74 lines
4.1 KiB
TypeScript
74 lines
4.1 KiB
TypeScript
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { Link } from 'react-router-dom';
|
|
import { useStore } from '../src/context/StoreContext';
|
|
|
|
const Collections: React.FC = () => {
|
|
const { products } = useStore();
|
|
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"
|
|
>
|
|
Shop Collection
|
|
</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. From our 'Sandstone' mugs to 'Seafoam' vases, each collection celebrates the palette of the Texas coast.
|
|
</motion.p>
|
|
</div>
|
|
|
|
{/* Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-12 gap-y-16 lg:gap-x-16 px-4">
|
|
{products.map((collection, index) => (
|
|
<Link to={`/collections/${collection.slug}`} key={collection.id} className="block group cursor-pointer">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: index * 0.1 }}
|
|
>
|
|
<div className="relative overflow-hidden mb-6 aspect-[4/5] bg-stone-100">
|
|
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors duration-500 z-10" />
|
|
<img
|
|
src={collection.image}
|
|
alt={collection.title}
|
|
className="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-110"
|
|
/>
|
|
{/* Quick overlay info */}
|
|
<div className="absolute bottom-6 left-6 z-20 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
|
<span className="bg-white dark:bg-black px-4 py-2 text-xs uppercase tracking-widest text-text-main dark:text-white">View Item</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between items-baseline pr-2">
|
|
<div>
|
|
<h2 className="font-display text-3xl font-light text-text-main dark:text-white mb-1 group-hover:underline decoration-1 underline-offset-4">
|
|
{collection.title}
|
|
</h2>
|
|
</div>
|
|
<span className="text-lg font-light text-text-main dark:text-white">
|
|
${collection.price}
|
|
</span>
|
|
</div>
|
|
</motion.div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Collections;
|