ok

src/app/(main)/page.tsx

@@ -1,27 +1,48 @@
-import { CallToAction } from '@/components/CallToAction'
+
 import { Faqs } from '@/components/Faqs'
 import { UseCases } from '@/components/UseCases'
-import { SecondaryFeatures } from '@/components/SecondaryFeatures'
 import { Steps } from '@/components/Steps'
 import { HomeHero } from '@/components/HomeHero'
 import { HomeAbout } from '@/components/HomeAbout'
 import { ClickableGallery } from '@/components/ClickableGallery'
 import { StackSectionPreview } from '@/components/StackSection'
 import { Companies } from '@/components/Companies'
+import { CallTo } from '@/components/CallTo'
+import { ScrollDown } from '@/components/ui/ScrollDown'
+import { ScrollUp } from '@/components/ui/ScrollUp'
 
 export default function Home() {
   return (
     <>
-      <HomeHero />  
-      <Companies />
-      <HomeAbout />
-      <StackSectionPreview />
-      <Steps />
-      <ClickableGallery />
-      <UseCases />
-      <CallToAction />
-      <SecondaryFeatures />
-      <Faqs />
+      <section id="home-hero">
+        <HomeHero />
+      </section>
+      <section id="companies">
+        <Companies />
+      </section>
+      <section id="home-about">
+        <HomeAbout />
+      </section>
+      <section id="stack-section">
+        <StackSectionPreview />
+      </section>
+      <section id="steps">
+        <Steps />
+      </section>
+      <section id="clickable-gallery">
+        <ClickableGallery />
+      </section>
+      <section id="use-cases">
+        <UseCases />
+      </section>
+      <section id="call-to-action">
+        <CallTo />
+      </section>
+      <section id="faqs">
+        <Faqs />
+      </section>
+      <ScrollDown />
+      <ScrollUp />
     </>
   )
 }