feat: redesign home page with new hero and layout

- Replaced abstract aurora background with hero section featuring image background and call-to-action
- Reorganized page sections with new components (HomeHostingDark, HomeBenefits, StackSectionLight)
- Changed layout background from #FAFAFA to white and removed conditional aurora rendering

src/components/Layout.tsx

@@ -1,15 +1,11 @@
-import { Outlet, useLocation } from 'react-router-dom'
+import { Outlet } 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-[#FAFAFA] antialiased relative" style={{ fontFamily: 'var(--font-inter)' }}>
+    <div className="bg-[white] antialiased relative" style={{ fontFamily: 'var(--font-inter)' }}>
-      {isHomePage && <HomeAurora />}
       <div className="relative z-10">
         <Header />
         <main>

src/pages/home/HomeAurora.tsx

@@ -1,41 +1,46 @@
-export function HomeAurora() {
+import { H1, H5 } from "@/components/Texts"
+import { Button } from "@/components/Button"
+
+
+export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => void }) {
   return (
     <div
-      className="absolute inset-0 -z-10 h-full w-full"
+      className="relative bg-cover sm:bg-contain bg-right bg-no-repeat"
-      style={{
+      style={{ backgroundImage: "url('/images/hero11.webp')" }}
-        backgroundImage: "url('/images/cloud.png')",
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-        backgroundRepeat: "no-repeat",
-      }}
     >
-      <div className="relative isolate px-6 lg:px-8">
+      <div className="mx-auto max-w-7xl lg:px-4">
-        {/* Top cyan soft blob */}
+        <div className="px-6 pt-12 pb-24 sm:pb-32 lg:col-span-5 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-5">
-        <div
+          <div className="mx-auto max-w-2xl lg:mx-0">
-          aria-hidden="true"
+            <div className="hidden sm:flex">
-          className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+              <div className="relative rounded-full px-3 py-1 text-sm/6 text-gray-500 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
-        >
+                Deploying at scale?{' '}
-          <div
+                <a href="#" className="font-semibold whitespace-nowrap text-cyan-600">
-            style={{
+                  <span aria-hidden="true" className="absolute inset-0" />
-              clipPath:
+                  Book a call  <span>&rarr;</span>
-                '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%)',
+                </a>
-            }}
-            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>
-        {/* Bottom cyan soft blob */}
+            <H1 className="mt-8">
-        <div
+              The Sovereign Agentic Cloud
-          aria-hidden="true"
+            </H1>
-          className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl lg:top-[calc(100%-30rem)]"
+            <H5 className="mt-8 text-lg text-gray-600">
+              Host nodes, deploy workloads, or build private AI systems, 
+all on infrastructure you own and control.
+            </H5>
+            <div className="mt-10 flex items-center gap-x-6">
+              <Button
+                variant="solid"
+                className=""
+                color="cyan"
+                onClick={onGetStartedClick}
               >
-          <div
+                 Start Hosting 
-            style={{
+              </Button>
-              clipPath:
+              <Button to="#" variant="outline">
-                '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%)',
+                Deploy in Cloud <span aria-hidden="true"> →</span>
-            }}
+              </Button>
-            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>
       </div>
     </div>

src/pages/home/HomeAuroracopy.tsx

@@ -1,48 +0,0 @@
-import { H1, H5 } from "@/components/Texts"
-import { Button } from "@/components/Button"
-
-
-export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => void }) {
-  return (
-    <div
-      className="relative bg-cover sm:bg-contain bg-right bg-no-repeat"
-      style={{ backgroundImage: "url('/images/hero11.webp')" }}
-    >
-      <div className="mx-auto max-w-7xl lg:px-4">
-        <div className="px-6 pt-12 pb-24 sm:pb-32 lg:col-span-5 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-5">
-          <div className="mx-auto max-w-2xl lg:mx-0">
-            <div className="hidden sm:flex">
-              <div className="relative rounded-full px-3 py-1 text-sm/6 text-gray-500 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
-                Deploying at scale?{' '}
-                <a href="#" className="font-semibold whitespace-nowrap text-cyan-600">
-                  <span aria-hidden="true" className="absolute inset-0" />
-                  Book a call  <span>&rarr;</span>
-                </a>
-              </div>
-            </div>
-            <H1 className="mt-8">
-              The Sovereign Agentic Cloud
-            </H1>
-            <H5 className="mt-8 text-lg text-gray-600">
-              Host nodes, deploy workloads, or build private AI systems, 
-all on infrastructure you own and control.
-            </H5>
-            <div className="mt-10 flex items-center gap-x-6">
-              <Button
-                variant="solid"
-                className=""
-                color="cyan"
-                onClick={onGetStartedClick}
-              >
-                 Start Hosting 
-              </Button>
-              <Button to="#" variant="outline">
-                Deploy in Cloud <span aria-hidden="true"> →</span>
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

src/pages/home/HomeAuroraedt.tsx

@@ -0,0 +1,43 @@
+export function HomeAurora() {
+  return (
+    <div
+      className="absolute inset-0 -z-10 h-full w-full"
+      style={{
+        backgroundImage: "url('/images/cloud.png')",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+      }}
+    >
+      <div className="relative isolate px-6 lg:px-8">
+        {/* Top cyan soft blob */}
+        <div
+          aria-hidden="true"
+          className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+        >
+          <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%-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>
+
+        {/* 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
+            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/HomePage.tsx

@@ -1,57 +1,49 @@
+
+import { useRef } from 'react'
 import { AnimatedSection } from '../../components/AnimatedSection'
-import { HomeHero } from './HomeHero'
+import { StackSectionLight } from './StackSection'
-import { HomeGlobeNew } from './HomeGlobeNew'
+import { WorldMap } from './HomeGlobe'
-import { HomeStat } from './HomeStat'
+import { HomeBenefits } from './HomeBenefits'
-import { HomeApplication } from './HomeTabs'
+import { CallToAction } from './CallToAction'
-import { HomeStack } from './HomeStack'
+import { HomeSlider } from './HomeSlider'
-import { HomeUniverse } from './HomeUniverse'
+import { HomeHostingDark } from './HomeHostingDark'
-import { HomeProductsA } from './HomeProductsA'
+import { HomeAurora } from './HomeAurora'
-import { HomeWhy } from './HomeWhy'
-import { HomeCTA } from './HomeCTA'
-
-
-
-
-
 
 
 export default function HomePage() {
+  const sliderRef = useRef<HTMLDivElement>(null)
+
+  const handleScrollToSlider = () => {
+    sliderRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }
   return (
     <div>
       <AnimatedSection>
-        <HomeHero />
+        <HomeAurora onGetStartedClick={handleScrollToSlider} />
+      </AnimatedSection>
+
+      <AnimatedSection id="next-section">
+        <WorldMap />
       </AnimatedSection>
 
       <AnimatedSection>
-        <HomeGlobeNew />
+        <HomeHostingDark   />
       </AnimatedSection>
 
       <AnimatedSection>
-        <HomeStat />
+        <StackSectionLight />
+      </AnimatedSection>
+
+      <AnimatedSection ref={sliderRef}>
+        <HomeSlider />
       </AnimatedSection>
 
       <AnimatedSection>
-        <HomeApplication />
+       <HomeBenefits />
       </AnimatedSection>
 
       <AnimatedSection>
-        <HomeStack />
+        <CallToAction />
-      </AnimatedSection>
-
-      <AnimatedSection>
-        <HomeUniverse />
-      </AnimatedSection>
-
-      <AnimatedSection>
-        <HomeProductsA />
-      </AnimatedSection>
-
-      <AnimatedSection>
-        <HomeWhy />
-      </AnimatedSection>
-
-      <AnimatedSection>
-        <HomeCTA />
       </AnimatedSection>
     </div>
   )