chore(style): migrate TextRotater component to tailwind css #8047 (#8091)

Author: frankiefab100

src/components/TextRotater/TextRotater.jsx

@@ -2,9 +2,6 @@
 import PropTypes from "prop-types";
 import { Children, PureComponent, cloneElement } from "react";
 
-// Load Styling
-import "./TextRotater.scss";
-
 export default class TextRotater extends PureComponent {
   static defaultProps = {
     delay: 0,
@@ -39,9 +36,19 @@ export default class TextRotater extends PureComponent {
     );
 
     return (
-      <div className="text-rotater">
+      <div
+        className="
+          relative inline-block overflow-hidden align-bottom px-[0.3em]
+          before:content-[''] before:absolute before:left-0 before:w-full before:h-[3px]
+          before:bottom-0 before:z-10
+          before:bg-linear-to-t before:from-[#2b3a42] before:to-transparent
+          after:content-[''] after:absolute after:left-0 after:w-full after:h-[3px]
+          after:top-0
+          after:bg-linear-to-b after:from-[#2b3a42] after:to-transparent
+        "
+      >
         <div
-          className="text-rotater__wrap"
+          className="inline-flex flex-col text-left"
           ref={(trw) => (this.textRotatorWrap = trw)}
           onTransitionEnd={this._handleTransitionEnd}
           style={{ height: contentHeight, width: maxWidth }}

src/components/TextRotater/TextRotater.scss

@@ -50,6 +50,9 @@
 .DocSearch-Button .DocSearch-Search-Icon {
   @apply text-white! lg:text-gray-100!;
 }
+.text-rotater--slide-up {
+  @apply transition-transform duration-[1000ms] ease-[cubic-bezier(0.7,0,0.3,1)] -translate-y-full;
+}
 
 /* Reading Progress – keyframes for scroll-driven animation */
 @keyframes grow-progress {