From 5e34e6826f1149d1fbf0b6c79b70cfbb609cb991 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Mon, 13 Oct 2025 16:10:09 +0200
Subject: [PATCH] feat: wrap homepage sections in AnimatedSection components
 for scroll animations

---
 src/app/(main)/page.tsx            | 34 ++++++++++++++++++++++--------
 src/components/AnimatedSection.tsx | 23 ++++++++++++++++++++
 2 files changed, 48 insertions(+), 9 deletions(-)
 create mode 100644 src/components/AnimatedSection.tsx

diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx
index 7ab1cbb..5002a15 100644
--- a/src/app/(main)/page.tsx
+++ b/src/app/(main)/page.tsx
@@ -1,7 +1,7 @@
+import { AnimatedSection } from '@/components/AnimatedSection'
 import { CallToAction } from '@/components/CallToAction'
 import { Faqs } from '@/components/Faqs'
 import { Hero } from '@/components/Hero'
-import { Pricing } from '@/components/Pricing'
 import { PrimaryFeatures } from '@/components/PrimaryFeatures'
 import { UseCases } from '@/components/UseCases'
 import { SecondaryFeatures } from '@/components/SecondaryFeatures'
@@ -11,14 +11,30 @@ import { About } from '@/components/About'
 export default function Home() {
   return (
     <>
-      <Hero />
-      <About />
-      <Benefits />
-      <PrimaryFeatures />
-       <UseCases />
-      <CallToAction />
-      <SecondaryFeatures />
-      <Faqs />
+      <AnimatedSection>
+        <Hero />
+      </AnimatedSection>
+      <AnimatedSection>
+        <About />
+      </AnimatedSection>
+      <AnimatedSection>
+        <Benefits />
+      </AnimatedSection>
+      <AnimatedSection>
+        <PrimaryFeatures />
+      </AnimatedSection>
+      <AnimatedSection>
+        <UseCases />
+      </AnimatedSection>
+      <AnimatedSection>
+        <CallToAction />
+      </AnimatedSection>
+      <AnimatedSection>
+        <SecondaryFeatures />
+      </AnimatedSection>
+      <AnimatedSection>
+        <Faqs />
+      </AnimatedSection>
     </>
   )
 }
diff --git a/src/components/AnimatedSection.tsx b/src/components/AnimatedSection.tsx
new file mode 100644
index 0000000..a1402e0
--- /dev/null
+++ b/src/components/AnimatedSection.tsx
@@ -0,0 +1,23 @@
+'use client'
+
+import { useRef } from 'react'
+import { motion, useInView } from 'framer-motion'
+
+export function AnimatedSection({ children }: { children: React.ReactNode }) {
+  const ref = useRef(null)
+  const isInView = useInView(ref, { once: false, margin: '-50% 0px -50% 0px' })
+
+  return (
+    <motion.section
+      ref={ref}
+      initial={{ opacity: 0, y: 50 }}
+      animate={{
+        opacity: isInView ? 1 : 0,
+        y: isInView ? 0 : 50,
+      }}
+      transition={{ duration: 0.5 }}
+    >
+      {children}
+    </motion.section>
+  )
+}