From c5703c060dcaeed551af7b41460b2281cbbb1268 Mon Sep 17 00:00:00 2001
From: AyrisAI <ayris@ayris.tech>
Date: Sat, 16 May 2026 00:52:38 +0300
Subject: [PATCH] feat: implement full site animations with framer motion

---
 components/ClientWrapper.tsx | 13 ++++-
 components/SelectedWorks.tsx | 93 +++++++++++++++++++++++-------------
 2 files changed, 71 insertions(+), 35 deletions(-)

diff --git a/components/ClientWrapper.tsx b/components/ClientWrapper.tsx
index 76c2b5e..8679e98 100644
--- a/components/ClientWrapper.tsx
+++ b/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 />}
-            {children}
+            <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>
         </>
     );
 }
\ No newline at end of file
diff --git a/components/SelectedWorks.tsx b/components/SelectedWorks.tsx
index b2e2d66..98cbdcc 100644
--- a/components/SelectedWorks.tsx
+++ b/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,44 +14,62 @@ 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 (
-        <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">
-                    <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"
-                    />
+        <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 grayscale group-hover:grayscale-0"
+                            />
+                        </motion.div>
 
-                    {/* Category Badge */}
-                    <div className="absolute top-4 right-4">
-                        <span className="bg-white/90 backdrop-blur-sm border border-black/10 px-3 py-1 text-[9px] tracking-[0.15em] uppercase text-black/60">
-                            {category}
-                        </span>
+                        {/* Category Badge */}
+                        <div className="absolute top-4 right-4">
+                            <span className="bg-white/90 backdrop-blur-sm border border-black/10 px-3 py-1 text-[9px] tracking-[0.15em] uppercase text-black/60">
+                                {category}
+                            </span>
+                        </div>
                     </div>
-                </div>
 
-                {/* Content Below Image */}
-                <div>
-                    <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}
-                        </h3>
-                        <span className="text-[10px] text-black/30 tracking-[0.1em] uppercase mt-0.5">
-                            {year}
-                        </span>
-                    </div>
-                    <p className="text-[11px] text-black/40 leading-relaxed line-clamp-1">
-                        {subtitle}
-                    </p>
+                    {/* Content Below Image */}
+                    <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}
+                            </h3>
+                            <span className="text-[10px] text-black/30 tracking-[0.1em] uppercase mt-0.5">
+                                {year}
+                            </span>
+                        </div>
+                        <p className="text-[11px] text-black/40 leading-relaxed line-clamp-1">
+                            {subtitle}
+                        </p>
+                    </motion.div>
                 </div>
-            </div>
-        </Link>
+            </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>