73 lines
2.7 KiB
TypeScript
73 lines
2.7 KiB
TypeScript
import { useState } from 'react';
|
||
import Head from 'next/head';
|
||
import Image from 'next/image';
|
||
import Link from 'next/link';
|
||
import Header from '../../components/Header';
|
||
import Footer from '../../components/Footer';
|
||
import { Collection, collections } from '../../data/collections';
|
||
import { motion } from 'framer-motion';
|
||
|
||
export default function Collections() {
|
||
const [hoveredCollection, setHoveredCollection] = useState<number | null>(null);
|
||
|
||
return (
|
||
<div className="min-h-screen bg-white font-['Arimo']">
|
||
<Head>
|
||
<title>Коллекции | Brand Store</title>
|
||
<link rel="icon" href="/favicon.ico" />
|
||
</Head>
|
||
|
||
<Header />
|
||
|
||
<main className="max-w-7xl mx-auto px-4 py-12 md:px-8">
|
||
<motion.h1
|
||
initial={{ opacity: 0, y: -20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5 }}
|
||
className="text-3xl md:text-4xl font-bold mb-8 font-['Playfair_Display']"
|
||
>
|
||
Коллекции
|
||
</motion.h1>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
{collections.map((collection) => (
|
||
<motion.div
|
||
key={collection.id}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: collection.id * 0.1 }}
|
||
whileHover={{ y: -5, transition: { duration: 0.2 } }}
|
||
>
|
||
<Link
|
||
href={`/collections/${collection.slug}`}
|
||
className="block h-full"
|
||
onMouseEnter={() => setHoveredCollection(collection.id)}
|
||
onMouseLeave={() => setHoveredCollection(null)}
|
||
>
|
||
<div className="relative overflow-hidden rounded-xl aspect-[16/9]">
|
||
<Image
|
||
src={collection.image}
|
||
alt={collection.name}
|
||
fill
|
||
className={`object-cover transition-all duration-500 ${
|
||
hoveredCollection === collection.id ? 'scale-110' : 'scale-100'
|
||
}`}
|
||
/>
|
||
<div className="absolute inset-0 bg-black bg-opacity-30 transition-opacity duration-300"></div>
|
||
<div className="absolute inset-0 flex items-center justify-center">
|
||
<h2 className="text-white text-xl md:text-2xl font-bold text-center px-4 font-['Playfair_Display']">
|
||
{collection.name}
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
<p className="mt-4 text-gray-600 line-clamp-3">{collection.description}</p>
|
||
</Link>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</main>
|
||
|
||
<Footer />
|
||
</div>
|
||
);
|
||
}
|