db connect

app/about/page.tsx

@@ -201,20 +201,38 @@ export default function AboutPage() {
 function ServiceCard({ service, index, scrollYProgress }: { service: any, index: number, scrollYProgress: any }) {
   const initialOffsets = [0, 200, 400]
   const ranges: [number, number][] = [
-    [0, 0.01],
-    [0, 0.50],
-    [0.15, 0.85],
+    [0, 0.40],
+    [0.10, 0.60],
+    [0.20, 0.80],
   ]
 
+  const x = useTransform(
+    scrollYProgress,
+    ranges[index],
+    [index === 0 ? -300 : index === 2 ? 300 : 0, 0]
+  )
+
   const y = useTransform(
     scrollYProgress,
     ranges[index],
-    [initialOffsets[index], 0]
+    [index === 1 ? 400 : 200, 0]
+  )
+
+  const opacity = useTransform(
+    scrollYProgress,
+    ranges[index],
+    [0, 1]
+  )
+
+  const scale = useTransform(
+    scrollYProgress,
+    ranges[index],
+    [0.8, 1]
   )
 
   return (
     <motion.div
-      style={{ y }}
+      style={{ x, y, opacity, scale }}
       className="relative w-full h-full bg-white text-black flex flex-col rounded-2xl overflow-hidden shadow-2xl"
     >
       <div className="flex-1 p-10 lg:p-14 overflow-hidden">