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