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

src/app/(main)/page.tsx

@@ -3,6 +3,8 @@ import { Faqs } from '@/components/Faqs'
 import { UseCases } from '@/components/UseCases'
 import { Steps } from '@/components/Steps'
 import { HomeHero } from '@/components/HomeHero'
+import { HomeHeroLight } from '@/components/HomeHeroLight'
+import { HomeHeroLight2 } from '@/components/HomeHeroLight2'
 import { HomeAbout } from '@/components/HomeAbout'
 import { ClickableGallery } from '@/components/ClickableGallery'
 import { StackSectionPreview } from '@/components/StackSection'
@@ -19,7 +21,7 @@ export default function Home() {
   return (
     <>
       <section id="home-hero">
-        <HomeHero />
+        <HomeHeroLight2 />
       </section>
       <section id="network">
         <WorldMap />

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>
+  )
+}

src/components/HomeHeroLight.tsx

@@ -0,0 +1,54 @@
+'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'
+
+const navigation = [
+  { name: 'Product', href: '#' },
+  { name: 'Features', href: '#' },
+  { name: 'Marketplace', href: '#' },
+  { name: 'Company', href: '#' },
+]
+
+export function HomeHeroLight() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+  return (
+    <div
+      className="relative isolate overflow-hidden bg-white"
+      style={{
+        backgroundImage: 'url(/images/cloud.png)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }}
+    >
+
+      <div className="mx-auto max-w-7xl px-6 pt-10 pb-24 sm:pb-32 lg:flex lg:px-8 lg:py-40">
+        <div className="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:pt-8">
+          <h1 className="mt-10 text-5xl font-semibold tracking-tight text-pretty 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 className="mt-10 flex items-center gap-x-6">
+            <a
+              href="#"
+              className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            >
+              Get started
+            </a>
+            <a href="#" className="text-sm/6 font-semibold text-gray-900">
+              Learn more <span aria-hidden="true">→</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/HomeHeroLight2.tsx

@@ -0,0 +1,50 @@
+'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'
+
+
+export function HomeHeroLight2() {
+  return (
+    <div>
+
+      <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">
+            <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>
+
+          <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"
+          />
+        </div>
+      </div>
+  )
+}

src/components/Layout.tsx

@@ -1,10 +1,10 @@
 import { Footer } from '@/components/Footer'
-import { Header } from '@/components/Header'
+import { HeaderLight } from '@/components/HeaderLight'
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <Header />
+      <HeaderLight />
       <main className="flex-auto">{children}</main>
       <Footer />
     </>

src/components/NavLinks.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link'
 import { AnimatePresence, motion } from 'framer-motion'
 import clsx from 'clsx'
 
-export function NavLinks({ className }: { className?: string }) {
+export function NavLinks({ className, theme = 'dark' }: { className?: string, theme?: 'dark' | 'light' }) {
   let [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
   let timeoutRef = useRef<number | null>(null)
 
@@ -33,7 +33,10 @@ export function NavLinks({ className }: { className?: string }) {
       key={label}
       href={href}
       className={clsx(
-        'relative -mx-3 -my-2 rounded-lg px-3 py-2 text-sm text-white transition-colors delay-150 hover:text-gray-300 hover:delay-0',
+        'relative -mx-3 -my-2 rounded-lg px-3 py-2 text-sm transition-colors delay-150 hover:delay-0',
+        theme === 'dark'
+          ? 'text-white hover:text-gray-300'
+          : 'text-gray-900 hover:text-gray-700',
         className,
       )}
       onClick={(e) => handleClick(e, href)}
@@ -52,7 +55,10 @@ export function NavLinks({ className }: { className?: string }) {
       <AnimatePresence>
         {hoveredIndex === index && (
           <motion.span
-            className="absolute inset-0 rounded-lg bg-white/10"
+            className={clsx(
+              'absolute inset-0 rounded-lg',
+              theme === 'dark' ? 'bg-white/10' : 'bg-gray-900/5',
+            )}
             layoutId="hoverBackground"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1, transition: { duration: 0.15 } }}