feat: implement full site animations with framer motion

components/ClientWrapper.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { usePathname } from "next/navigation";
+import { motion, AnimatePresence } from "framer-motion";
 import Navbar from "./Navbar";
 
 export default function ClientLayout({ children }: { children: React.ReactNode }) {
@@ -10,7 +11,17 @@ export default function ClientLayout({ children }: { children: React.ReactNode }
     return (
         <>
             {!isAdmin && <Navbar />}
+            <AnimatePresence mode="wait">
+                <motion.div
+                    key={pathname}
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, y: -10 }}
+                    transition={{ duration: 0.4, ease: "easeOut" }}
+                >
                     {children}
+                </motion.div>
+            </AnimatePresence>
         </>
     );
 }

components/SelectedWorks.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
+import { motion } from "framer-motion";
 import { ArrowRight, Loader2 } from "lucide-react";
 import { getFeaturedProjects } from "@/app/actions";
 
@@ -13,19 +14,32 @@ interface ProjectCardProps {
     year: string;
     subtitle: string;
     slug: string;
+    index: number;
 }
 
-function ProjectCard({ hero_image, category, title, year, subtitle, slug }: ProjectCardProps) {
+function ProjectCard({ hero_image, category, title, year, subtitle, slug, index }: ProjectCardProps) {
     return (
+        <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: "-50px" }}
+            transition={{ duration: 0.8, delay: (index % 3) * 0.1, ease: [0.16, 1, 0.3, 1] }}
+        >
             <Link href={`/works/${slug}`} className="group cursor-pointer block">
                 <div className="space-y-5">
                     <div className="relative aspect-video overflow-hidden bg-black/5 border border-black/10">
+                        <motion.div 
+                            className="w-full h-full"
+                            whileHover={{ scale: 1.05 }}
+                            transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
+                        >
                             <Image
                                 src={hero_image || "https://images.unsplash.com/photo-1550745165-9bc0b252726f"}
                                 alt={title}
                                 fill
-                        className="object-cover transition-all duration-700 group-hover:scale-105 grayscale group-hover:grayscale-0"
+                                className="object-cover transition-all duration-700 grayscale group-hover:grayscale-0"
                             />
+                        </motion.div>
 
                         {/* Category Badge */}
                         <div className="absolute top-4 right-4">
@@ -36,7 +50,11 @@ function ProjectCard({ hero_image, category, title, year, subtitle, slug }: Proj
                     </div>
 
                     {/* Content Below Image */}
-                <div>
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        whileInView={{ opacity: 1 }}
+                        transition={{ delay: 0.2 + (index % 3) * 0.1 }}
+                    >
                         <div className="flex justify-between items-start mb-2">
                             <h3 className="text-[14px] tracking-[0.05em] uppercase text-black group-hover:text-primary transition-colors leading-tight">
                                 {title}
@@ -48,9 +66,10 @@ function ProjectCard({ hero_image, category, title, year, subtitle, slug }: Proj
                         <p className="text-[11px] text-black/40 leading-relaxed line-clamp-1">
                             {subtitle}
                         </p>
-                </div>
+                    </motion.div>
                 </div>
             </Link>
+        </motion.div>
     );
 }
 
@@ -83,7 +102,13 @@ export default function SelectedWorks() {
         <section className="py-24 px-6 md:px-12 border-t border-black/10">
             <div className="max-w-7xl mx-auto">
                 {/* Header Section */}
-                <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-8 mb-16">
+                <motion.div 
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
+                    className="flex flex-col md:flex-row justify-between items-start md:items-end gap-8 mb-16"
+                >
                     <div>
                         <span className="text-[10px] tracking-[0.2em] uppercase text-black/40 block mb-4">Son Projeler</span>
                         <h2 className="editorial-headline text-4xl md:text-5xl text-black">
@@ -94,12 +119,12 @@ export default function SelectedWorks() {
                         Tüm Portfolyo
                         <ArrowRight className="w-3 h-3 group-hover:translate-x-1 transition-transform" />
                     </Link>
-                </div>
+                </motion.div>
 
                 {/* Grid */}
                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
                     {projects.map((project, index) => (
-                        <ProjectCard key={index} {...project} />
+                        <ProjectCard key={index} {...project} index={index} />
                     ))}
                 </div>
             </div>