feat: implement full site animations with framer motion
This commit is contained in:
AyrisAI
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user