tenext redesign

components/sections/MarqueeStrip.tsx

@@ -0,0 +1,39 @@
+interface MarqueeStripProps {
+  text?: string;
+  className?: string;
+}
+
+export function MarqueeStrip({
+  text = "Artificial Intelligence",
+  className = "",
+}: MarqueeStripProps) {
+  const marqueeItems = Array.from({ length: 6 });
+
+  return (
+    <div
+      className={`relative z-10 mx-[-5px] mb-[-20px] mt-0 overflow-hidden bg-gradient-to-r from-tenext-teal to-tenext-blue py-[42px] ${className}`}
+      style={{ transform: "rotate(-2.07deg)" }}
+    >
+      <div className="marquee-track flex w-max whitespace-nowrap">
+        {[0, 1].map((track) => (
+          <div key={track} className="flex shrink-0 items-center">
+            {marqueeItems.map((_, i) => (
+              <div
+                key={`${track}-${i}`}
+                className="flex items-center gap-8 pr-8"
+              >
+                <span
+                  className="marquee-text text-white"
+                  style={{ fontFamily: "var(--font-sora)" }}
+                >
+                  {text}
+                </span>
+                <span className="flex h-3 w-3 rounded-full bg-white opacity-50" />
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}