feat: add hide-on-scroll header and redesign hero with video background

src/components/HomeHeroLight2.tsx

@@ -1,77 +1,58 @@
 'use client'
 
-import { useState } from 'react'
-import { motion } from 'framer-motion'
-import { TypeAnimation } from 'react-type-animation'
-import { Dialog, DialogPanel } from '@headlessui/react'
-import { Bars3Icon, XMarkIcon, ChevronDoubleDownIcon } from '@heroicons/react/24/outline'
-import { H1, H2, PL } from '@/components/Texts'
-import { ChevronRightIcon } from '@heroicons/react/20/solid'
-
+import { useRef, useEffect } from 'react'
 
 export function HomeHeroLight2() {
+  const videoRef = useRef<HTMLVideoElement>(null)
+
+  useEffect(() => {
+    if (videoRef.current) videoRef.current.playbackRate = 0.4
+  }, [])
+
   return (
-    <div>
+    <section className="relative h-screen overflow-hidden">
+      {/* Background video */}
+      <video
+        ref={videoRef}
+        src="/videos/cloud.mp4"
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="absolute inset-0 h-full w-full object-cover z-[-10]"
+      />
 
-      <div className="pt-24 lg:pt-32 bg-white pb-12">
-        <div className="mx-auto max-w-7xl px-6 lg:px-8 grid grid-cols-1">
-          <div className="col-start-1 row-start-1 mx-auto max-w-4xl text-center z-10">
-        <div
-          aria-hidden="true"
-          className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
-        >
-          <div
-            style={{
-              clipPath:
-                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-            }}
-            className="relative left-[calc(50%+3rem)] aspect-1155/678 w-144.5 -translate-x-1/2 bg-linear-to-tr from-blue-300 to-blue-600 opacity-20 sm:left-[calc(50%+36rem)] sm:w-288.75"
-          />
-        </div>
+      {/* Global soft wash + blur */}
+      <div className="absolute inset-0 bg-white opacity-30 backdrop-blur-md z-0" />
 
-         <div
-          aria-hidden="true"
-          className="absolute inset-x-0 bottom-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:bottom-[calc(100%-30rem)]"
-        >
-          <div
-            style={{
-              clipPath:
-                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-            }}
-            className="relative left-[calc(30%-3rem)] aspect-1155/678 w-144.5 -translate-x-1/2 bg-linear-to-tr from-blue-200 to-blue-400 opacity-15 sm:left-[calc(50%-36rem)] sm:w-288.75"
-          />
-        </div>
-            <h1 className="pt-8 text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl">
-              Decentralized Autonomous Agentic Cloud.
-            </h1>
-            <p className="mt-8 text-lg font-medium text-pretty text-gray-500 sm:text-xl/8">
-              Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
-            </p>
-        </div>
+      {/* Center “halo” for text legibility */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          background:
+            'radial-gradient(ellipse at center, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.88) 15%, rgba(255,255,255,0.72) 35%, rgba(255,255,255,0.08) 75%)'
+        }}
+      />
 
-        
+      {/* Content */}
+      <div className="relative z-10 h-full flex items-center justify-center">
+        <div className="mx-auto max-w-4xl text-center px-6 lg:px-8">
+          <h1
+            className="pt-6 text-5xl sm:text-7xl font-semibold tracking-tight leading-tight text-gray-900"
+            style={{ textShadow: '0 2px 8px rgba(0,0,0,0.08)' }}
+          >
+            Decentralized Autonomous Agentic Cloud.
+          </h1>
 
-          <img
-            alt="App screenshot"
-            src="/images/mchip.webp"
-            width={2432}
-            height={1442}
-            className="col-start-1 row-start-1 relative top-12"
-          />
-        </div>
-      </div>
-        <div
-          aria-hidden="true"
-          className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
-        >
-          <div
-            style={{
-              clipPath:
-                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-            }}
-            className="relative left-[calc(50%+3rem)] aspect-1155/678 w-144.5 -translate-x-1/2 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-288.75"
-          />
+          <p
+            className="mt-8 text-lg sm:text-xl font-medium text-gray-800/90 leading-relaxed"
+            style={{ textShadow: '0 1px 4px rgba(0,0,0,0.06)' }}
+          >
+            Mycelium&apos;s advancements in Agentic infrastructure support private, secure, and
+            autonomous Agents that connect, learn, and grow with you.
+          </p>
         </div>
       </div>
+    </section>
   )
-}
+}