From b1c59a9b5af1dcf1ffca43e10c1e4adceeeecff8 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Thu, 6 Nov 2025 14:06:44 +0100
Subject: [PATCH] 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         |  8 +---
 src/pages/home/HomeAurora.tsx     | 75 ++++++++++++++++---------------
 src/pages/home/HomeAuroracopy.tsx | 48 --------------------
 src/pages/home/HomeAuroraedt.tsx  | 43 ++++++++++++++++++
 src/pages/home/HomePage.tsx       | 62 +++++++++++--------------
 5 files changed, 112 insertions(+), 124 deletions(-)
 delete mode 100644 src/pages/home/HomeAuroracopy.tsx
 create mode 100644 src/pages/home/HomeAuroraedt.tsx

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index d7a588b..07684fd 100644
--- a/src/components/Layout.tsx
+++ b/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)' }}>
-      {isHomePage && <HomeAurora />}
+    <div className="bg-[white] antialiased relative" style={{ fontFamily: 'var(--font-inter)' }}>
       <div className="relative z-10">
         <Header />
         <main>
diff --git a/src/pages/home/HomeAurora.tsx b/src/pages/home/HomeAurora.tsx
index 11049cb..2f744be 100644
--- a/src/pages/home/HomeAurora.tsx
+++ b/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"
-      style={{
-        backgroundImage: "url('/images/cloud.png')",
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-        backgroundRepeat: "no-repeat",
-      }}
+      className="relative bg-cover sm:bg-contain bg-right bg-no-repeat"
+      style={{ backgroundImage: "url('/images/hero11.webp')" }}
     >
-      <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 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>
diff --git a/src/pages/home/HomeAuroracopy.tsx b/src/pages/home/HomeAuroracopy.tsx
deleted file mode 100644
index 2f744be..0000000
--- a/src/pages/home/HomeAuroracopy.tsx
+++ /dev/null
@@ -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>
-  )
-}
diff --git a/src/pages/home/HomeAuroraedt.tsx b/src/pages/home/HomeAuroraedt.tsx
new file mode 100644
index 0000000..11049cb
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
index a2e1961..c636840 100644
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -1,57 +1,49 @@
+
+import { useRef } from 'react'
 import { AnimatedSection } from '../../components/AnimatedSection'
-import { HomeHero } from './HomeHero'
-import { HomeGlobeNew } from './HomeGlobeNew'
-import { HomeStat } from './HomeStat'
-import { HomeApplication } from './HomeTabs'
-import { HomeStack } from './HomeStack'
-import { HomeUniverse } from './HomeUniverse'
-import { HomeProductsA } from './HomeProductsA'
-import { HomeWhy } from './HomeWhy'
-import { HomeCTA } from './HomeCTA'
-
-
-
-
-
+import { StackSectionLight } from './StackSection'
+import { WorldMap } from './HomeGlobe'
+import { HomeBenefits } from './HomeBenefits'
+import { CallToAction } from './CallToAction'
+import { HomeSlider } from './HomeSlider'
+import { HomeHostingDark } from './HomeHostingDark'
+import { HomeAurora } from './HomeAurora'
 
 
 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 />
-      </AnimatedSection>
-
-      <AnimatedSection>
-        <HomeUniverse />
-      </AnimatedSection>
-
-      <AnimatedSection>
-        <HomeProductsA />
-      </AnimatedSection>
-
-      <AnimatedSection>
-        <HomeWhy />
-      </AnimatedSection>
-
-      <AnimatedSection>
-        <HomeCTA />
+        <CallToAction />
       </AnimatedSection>
     </div>
   )