feat: enhance dashboard preview with scroll-based animations using framer-motion, improving interactivity and visual dynamics

app/page.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import Link from 'next/link'
-import { motion } from 'framer-motion'
+import { motion, useScroll, useTransform } from 'framer-motion'
 import { useAuth } from '@/lib/auth/context'
 import { initiateOAuthFlow, initiateSignupFlow } from '@/lib/api/oauth'
 import { listSites, deleteSite, type Site } from '@/lib/api/sites'
@@ -13,19 +13,32 @@ import { BarChartIcon, LockIcon, ZapIcon, CheckCircleIcon, XIcon } from '@cipher
 import { toast } from '@ciphera-net/ui'
 
 function DashboardPreview() {
+  const containerRef = useRef<HTMLDivElement>(null)
+  
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ["start end", "end end"]
+  })
+
+  const rotateX = useTransform(scrollYProgress, [0, 1], [30, 0])
+  const scale = useTransform(scrollYProgress, [0, 1], [0.8, 1])
+  const opacity = useTransform(scrollYProgress, [0, 0.8], [0.5, 1])
+
   return (
-    <div className="relative w-full max-w-5xl mx-auto mt-20 mb-32">
+    <div ref={containerRef} className="relative w-full max-w-5xl mx-auto mt-20 mb-32 h-[600px] flex items-center justify-center">
       {/* * Glow behind the image */}
       <div className="absolute inset-0 bg-brand-orange/20 blur-[100px] -z-10 rounded-full opacity-50" />
       
       {/* * Animated Container */}
       <motion.div
-        initial={{ opacity: 0, rotateX: 20, scale: 0.9, y: 50 }}
-        whileInView={{ opacity: 1, rotateX: 0, scale: 1, y: 0 }}
-        viewport={{ once: true, margin: "-100px" }}
-        transition={{ duration: 0.8, ease: "easeOut" }}
-        style={{ perspective: '1000px' }}
-        className="relative rounded-xl border border-neutral-200/50 dark:border-neutral-800/50 bg-neutral-900/50 backdrop-blur-sm shadow-2xl overflow-hidden"
+        style={{ 
+          rotateX, 
+          scale, 
+          opacity,
+          perspective: '1000px',
+          transformStyle: 'preserve-3d'
+        }}
+        className="relative w-full rounded-xl border border-neutral-200/50 dark:border-neutral-800/50 bg-neutral-900/50 backdrop-blur-sm shadow-2xl overflow-hidden"
       >
         {/* * Header of the fake browser window */}
         <div className="h-8 bg-neutral-800/50 border-b border-white/5 flex items-center px-4 gap-2">