refactor: extract hero content from aurora background component

- Separated HomeAurora into pure background component and new HomeHero for content
- Converted aurora to absolute positioned background layer in Layout for homepage
- Removed z-index conflicts and cleaned up background color declarations

src/components/Header.tsx

@@ -26,9 +26,9 @@ export function Header() {
   };
 
   return (
-    <header>
+    <header className="bg-transparent">
       <nav>
-                <Container className="relative z-50 flex bg-transparent justify-between py-4">
+                <Container className="flex bg-transparent justify-between py-4">
           <div className="relative z-10 flex items-center gap-16">
             <Link to="/" aria-label="Home">
               <img src={pmyceliumLogo} alt="Mycelium" className="h-8 w-auto" />

src/components/Layout.tsx

@@ -1,16 +1,22 @@
-import { Outlet } from 'react-router-dom'
+import { Outlet, useLocation } from 'react-router-dom'
 import { Footer } from './Footer'
 import { Header } from './Header'
+import { HomeAurora } from '../pages/home/HomeAurora'
 
 export function Layout() {
+  const location = useLocation()
+  const isHomePage = location.pathname === '/'
 
   return (
-    <div className="bg-white antialiased" style={{ fontFamily: 'var(--font-inter)' }}>
+    <div className="bg-transparent antialiased relative" style={{ fontFamily: 'var(--font-inter)' }}>
+      {isHomePage && <HomeAurora />}
+      <div className="relative z-10">
         <Header />
-            <main className="">
+        <main>
           <Outlet />
         </main>
         <Footer />
       </div>
+    </div>
   )
 }

src/index.css

@@ -6,9 +6,7 @@
   line-height: 1.5;
   font-weight: 400;
 
-  color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -60,7 +58,6 @@ button:focus-visible {
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
-    background-color: #ffffff;
   }
   a:hover {
     color: #747bff;

src/pages/home/HomeAurora.tsx

@@ -1,9 +1,7 @@
-import { Button } from "@/components/Button"
-
 export function HomeAurora() {
   return (
     <div
-      className="relative isolate overflow-hidden h-screen"
+      className="absolute inset-0 -z-10 h-full w-full"
       style={{
         backgroundImage: "url('/images/cloud.png')",
         backgroundSize: "cover",
@@ -25,28 +23,6 @@ export function HomeAurora() {
             className="relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#00eaff] to-[#009dff] opacity-10 sm:left-[calc(50%-30rem)] sm:w-288.75"
           />
         </div>
-      </div>
-
-      <div className="mx-auto max-w-7xl px-6 pt-20 pb-24 lg:pb-32 lg:px-8 lg:py-40">
-        <div className="mx-auto max-w-2xl text-center">
-          <h1 className="text-6xl font-semibold tracking-tight text-gray-900 lg:text-8xl">
-            The Sovereign Agentic Cloud
-          </h1>
-
-          <p className="mt-8 text-lg font-medium text-pretty text-gray-500 lg:text-xl/8">
-            Host nodes, deploy workloads, or build private AI systems,
-            all on infrastructure you own and control.
-          </p>
-
-          <div className="mt-10 flex items-center justify-center gap-x-6">
-            <Button variant="solid" color="cyan" href="#">
-              Start Hosting
-            </Button>
-
-            <Button href="#" variant="outline" color="gray">
-              Deploy in Cloud <span aria-hidden="true">→</span>
-            </Button>
-          </div>
 
         {/* Bottom cyan soft blob */}
         <div
@@ -63,6 +39,5 @@ export function HomeAurora() {
         </div>
       </div>
     </div>
-    </div>
   )
 }

src/pages/home/HomeHero.tsx

@@ -0,0 +1,28 @@
+import { Button } from '@/components/Button'
+
+export function HomeHero() {
+  return (
+    <div className="mx-auto max-w-7xl px-6 pt-20 pb-24 lg:pb-32 lg:px-8 lg:py-40">
+      <div className="mx-auto max-w-2xl text-center">
+        <h1 className="text-6xl font-semibold tracking-tight text-gray-900 lg:text-8xl">
+          The Sovereign Agentic Cloud
+        </h1>
+
+        <p className="mt-8 text-lg font-medium text-pretty text-gray-500 lg:text-xl/8">
+          Host nodes, deploy workloads, or build private AI systems,
+          all on infrastructure you own and control.
+        </p>
+
+        <div className="mt-10 flex items-center justify-center gap-x-6">
+          <Button variant="solid" color="cyan" href="#">
+            Start Hosting
+          </Button>
+
+          <Button href="#" variant="outline" color="gray">
+            Deploy in Cloud <span aria-hidden="true">→</span>
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/home/HomePage.tsx

@@ -1,6 +1,5 @@
-import { useRef } from 'react'
 import { AnimatedSection } from '../../components/AnimatedSection'
-import { HomeAurora } from './HomeAurora'
+import { HomeHero } from './HomeHero'
 import { StackSectionDark } from './StackSectionDark'
 import { WorldMap } from './HomeGlobe'
 import { HomeBenefits } from './HomeBenefits'
@@ -10,15 +9,10 @@ import { HomeHosting } from './HomeHosting'
 
 
 export default function HomePage() {
-  const sliderRef = useRef<HTMLDivElement>(null)
-
-  const handleScrollToSlider = () => {
-    sliderRef.current?.scrollIntoView({ behavior: 'smooth' })
-  }
   return (
     <div>
       <AnimatedSection>
-        <HomeAurora/>
+        <HomeHero />
       </AnimatedSection>
 
       <AnimatedSection id="next-section">
@@ -33,7 +27,7 @@ export default function HomePage() {
         <StackSectionDark />
       </AnimatedSection>
 
-      <AnimatedSection ref={sliderRef}>
+      <AnimatedSection>
         <HomeSlider />
       </AnimatedSection>