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)' }}>
-      <Header />
-            <main className="">
-        <Outlet />
-      </main>
-      <Footer />
+    <div className="bg-transparent antialiased relative" style={{ fontFamily: 'var(--font-inter)' }}>
+      {isHomePage && <HomeAurora />}
+      <div className="relative z-10">
+        <Header />
+        <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,42 +23,19 @@ 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 */}
+        {/* Bottom cyan soft blob */}
+        <div
+          aria-hidden="true"
+          className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl lg:top-[calc(100%-30rem)]"
+        >
           <div
-            aria-hidden="true"
-            className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl lg: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-[#00eaff] to-[#009dff] opacity-10 lg:left-[calc(50%+36rem)] lg:w-288.75"
-            />
-          </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-[#00eaff] to-[#009dff] opacity-10 lg:left-[calc(50%+36rem)] lg:w-288.75"
+          />
         </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>