feat: implement light theme hero section with cloud background and updated header

src/components/HeaderLight.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import { useRef, useState } from 'react'
+import Link from 'next/link'
+import { AnimatePresence, motion } from 'framer-motion'
+import clsx from 'clsx'
+
+function NavLinks() {
+  let [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
+  let timeoutRef = useRef<number | null>(null)
+
+  return (
+    <div className="flex items-center gap-x-5">
+      <div className="flex items-center gap-x-5 border-l border-white/10 pl-5">
+        {[
+          ['Technologies', '/#technologies'],
+          ['Network', '/#network'],
+          ['How it Works', '/#how-it-works'],
+          ['Get Started', '/#get-started'],
+          ['Contact', '/#contact'],
+        ].map(([label, href], index) => (
+          <Link
+            key={label}
+            href={href}
+            className={clsx(
+              'relative rounded-lg px-3 py-2 text-sm text-black transition-colors delay-150 hover:text-gray-700 hover:delay-0',
+            )}
+            onMouseEnter={() => {
+              if (timeoutRef.current) {
+                window.clearTimeout(timeoutRef.current)
+              }
+              setHoveredIndex(index)
+            }}
+            onMouseLeave={() => {
+              timeoutRef.current = window.setTimeout(() => {
+                setHoveredIndex(null)
+              }, 200)
+            }}
+          >
+            <AnimatePresence>
+              {hoveredIndex === index && (
+                <motion.span
+                  className="absolute inset-0 rounded-lg bg-white/10"
+                  layoutId="hoverBackground"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1, transition: { duration: 0.15 } }}
+                  exit={{
+                    opacity: 0,
+                    transition: { duration: 0.15 },
+                  }}
+                />
+              )}
+            </AnimatePresence>
+            <span className="relative z-10">{label}</span>
+          </Link>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export function HeaderLight() {
+  return (
+    <header className="fixed top-4 left-0 right-0 z-50 flex justify-center">
+      <div className="rounded-full bg-gray-50/90 px-5 py-3 shadow-lg ring-1 ring-white/10 backdrop-blur-sm">
+        <NavLinks />
+      </div>
+    </header>
+  )
+}