69 lines
3.9 KiB
TypeScript
69 lines
3.9 KiB
TypeScript
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { COLLECTIONS } from '../constants';
|
|
|
|
const Collections: React.FC = () => {
|
|
return (
|
|
<>
|
|
<section className="pt-32 pb-24 px-6 md:px-12 bg-stone-50 dark:bg-stone-900 min-h-screen">
|
|
<div className="max-w-[1920px] mx-auto">
|
|
{/* Header */}
|
|
<div className="mb-24 text-center">
|
|
<motion.h1
|
|
initial={{ y: 20, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
transition={{ delay: 0.5, duration: 0.8 }}
|
|
className="font-display text-5xl md:text-7xl font-light mb-6 text-text-main dark:text-white"
|
|
>
|
|
Collections
|
|
</motion.h1>
|
|
<motion.p
|
|
initial={{ y: 20, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
transition={{ delay: 0.7, duration: 0.8 }}
|
|
className="font-body text-stone-500 max-w-xl mx-auto text-lg font-light leading-relaxed"
|
|
>
|
|
Curated series of functional objects. Each collection explores a distinct form language and glaze palette.
|
|
</motion.p>
|
|
</div>
|
|
|
|
{/* Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-16">
|
|
{COLLECTIONS.map((item, index) => (
|
|
<motion.div
|
|
key={item.id}
|
|
initial={{ y: 40, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
transition={{ delay: 0.2 + (index * 0.1), duration: 0.8, ease: "easeOut" }}
|
|
className="group cursor-pointer"
|
|
>
|
|
{/* Image Container with Darker Background for Contrast */}
|
|
<div className={`relative overflow-hidden mb-6 ${item.aspectRatio || 'aspect-[3/4]'} bg-stone-200 dark:bg-stone-800`}>
|
|
<motion.img
|
|
src={item.image}
|
|
alt={item.title}
|
|
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 relative z-10"
|
|
whileHover={{ scale: 1.05 }}
|
|
/>
|
|
{/* Overlay on hover */}
|
|
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-500 z-20 pointer-events-none" />
|
|
</div>
|
|
|
|
<div className="flex justify-between items-end border-b border-stone-200 dark:border-stone-800 pb-4">
|
|
<div>
|
|
<span className="text-xs uppercase tracking-widest text-stone-400 mb-1 block">{item.number}</span>
|
|
<h3 className="font-display text-2xl text-text-main dark:text-white">{item.title}</h3>
|
|
</div>
|
|
<span className="material-symbols-outlined opacity-0 -translate-x-4 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 text-stone-400">arrow_forward</span>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Collections;
|