From 3564b5cb0f3acdced9a8c57cb949ae791f1d9478 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Sat, 1 Nov 2025 21:08:42 +0100
Subject: [PATCH] feat: enhance homepage with smooth scroll navigation

- Added scroll-to-slider functionality when clicking "Get Started" button
- Modified AnimatedSection to support ref forwarding for scroll targeting
- Updated HomeAurora component to accept click handler prop
- Refined homepage hero text and description for clearer value proposition
- Changed button from link to click handler for better user interaction
---
 src/components/AnimatedSection.tsx | 10 +++++++---
 src/pages/home/HomeAurora.tsx      | 12 +++++++-----
 src/pages/home/HomePage.tsx        | 10 ++++++++--
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/components/AnimatedSection.tsx b/src/components/AnimatedSection.tsx
index d5a0864..f7f9a33 100644
--- a/src/components/AnimatedSection.tsx
+++ b/src/components/AnimatedSection.tsx
@@ -1,4 +1,5 @@
 import { motion } from 'framer-motion'
+import { forwardRef } from 'react'
 
 type AnimatedSectionProps = {
   children: React.ReactNode
@@ -6,9 +7,11 @@ type AnimatedSectionProps = {
   className?: string
 }
 
-export function AnimatedSection({ children, id, className }: AnimatedSectionProps) {
+export const AnimatedSection = forwardRef<HTMLElement, AnimatedSectionProps>(
+  ({ children, id, className }, ref) => {
   return (
-    <motion.section
+        <motion.section
+      ref={ref}
       id={id}
       className={className}
       initial={{ opacity: 0, y: 40 }}
@@ -19,4 +22,5 @@ export function AnimatedSection({ children, id, className }: AnimatedSectionProp
       {children}
     </motion.section>
   )
-}
+  },
+)
diff --git a/src/pages/home/HomeAurora.tsx b/src/pages/home/HomeAurora.tsx
index ae77980..77fe084 100644
--- a/src/pages/home/HomeAurora.tsx
+++ b/src/pages/home/HomeAurora.tsx
@@ -2,7 +2,7 @@ import { H1, H5 } from "@/components/Texts"
 import { Button } from "@/components/Button"
 
 
-export  function HomeAurora() {
+export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => void }) {
   return (
     <div
       className="relative bg-cover sm:bg-contain bg-right bg-no-repeat"
@@ -16,22 +16,24 @@ export  function HomeAurora() {
                 Anim aute id magna aliqua ad ad non deserunt sunt.{' '}
                 <a href="#" className="font-semibold whitespace-nowrap text-cyan-600">
                   <span aria-hidden="true" className="absolute inset-0" />
-                  Read more <span aria-hidden="true">&rarr;</span>
+                  Read more <span aria-hidden="trwhenue">&rarr;</span>
                 </a>
               </div>
             </div>
             <H1 className="mt-8">
-              Full Sovereignty for Cloud, Network & AI.
+              The Sovereign Agentic Cloud
             </H1>
             <H5 className="mt-8 text-lg text-gray-600">
-              Build and run mission-critical workloads on distributed compute, encrypted networking, and sovereign AI orchestration without centralized gatekeepers.
+              A global, self-healing network you can join.
+              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
-                to="#"
                 variant="solid"
                 className=""
                 color="cyan"
+                onClick={onGetStartedClick}
               >
                 Get started
               </Button>
diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
index 1fec74a..12e1e7a 100644
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -1,3 +1,4 @@
+import { useRef } from 'react'
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { HomeAurora } from './HomeAurora'
 import { StackSectionLight } from './StackSection'
@@ -8,10 +9,15 @@ import { HomeSlider } from './HomeSlider'
 
 
 export default function HomePage() {
+  const sliderRef = useRef<HTMLDivElement>(null)
+
+  const handleScrollToSlider = () => {
+    sliderRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }
   return (
     <div>
       <AnimatedSection>
-        <HomeAurora />
+        <HomeAurora onGetStartedClick={handleScrollToSlider} />
       </AnimatedSection>
 
       <AnimatedSection id="next-section">
@@ -23,7 +29,7 @@ export default function HomePage() {
       </AnimatedSection>
 
 
-      <AnimatedSection>
+      <AnimatedSection ref={sliderRef}>
         <HomeSlider />
       </AnimatedSection>