feat: wrap homepage sections in AnimatedSection components for scroll animations

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 (
     <>
+      <AnimatedSection>
         <Hero />
+      </AnimatedSection>
+      <AnimatedSection>
         <About />
+      </AnimatedSection>
+      <AnimatedSection>
         <Benefits />
+      </AnimatedSection>
+      <AnimatedSection>
         <PrimaryFeatures />
+      </AnimatedSection>
+      <AnimatedSection>
         <UseCases />
+      </AnimatedSection>
+      <AnimatedSection>
         <CallToAction />
+      </AnimatedSection>
+      <AnimatedSection>
         <SecondaryFeatures />
+      </AnimatedSection>
+      <AnimatedSection>
         <Faqs />
+      </AnimatedSection>
     </>
   )
 }

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>
+  )
+}