improvements

src/components/AnimatedSection.tsx

@@ -1,20 +1,20 @@
-import { useRef } from 'react'
-import { motion, useInView } from 'framer-motion'
+import { motion } from 'framer-motion'
 
-export function AnimatedSection({ children, id }: { children: React.ReactNode; id?: string }) {
-  const ref = useRef(null)
-  const isInView = useInView(ref, { once: true, margin: '-20% 0px -20% 0px' })
+type AnimatedSectionProps = {
+  children: React.ReactNode
+  id?: string
+  className?: string
+}
 
+export function AnimatedSection({ children, id, className }: AnimatedSectionProps) {
   return (
     <motion.section
       id={id}
-      ref={ref}
-      initial={{ opacity: 0, y: 50 }}
-      animate={{
-        opacity: isInView ? 1 : 0,
-        y: isInView ? 0 : 50,
-      }}
-      transition={{ duration: 0.5 }}
+      className={className}
+      initial={{ opacity: 0, y: 40 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: '-25% 0px -20% 0px' }}
+      transition={{ duration: 0.5, ease: 'easeOut' }}
     >
       {children}
     </motion.section>