81 lines
3.3 KiB
TypeScript
81 lines
3.3 KiB
TypeScript
import { useState } from 'react';
|
||
import Head from 'next/head';
|
||
import Link from 'next/link';
|
||
import Image from 'next/image';
|
||
import { motion } from 'framer-motion';
|
||
import Header from '../../components/Header';
|
||
import Footer from '../../components/Footer';
|
||
import { Collection, collections } from '../../data/collections';
|
||
|
||
export default function Collections() {
|
||
const [hoveredCollection, setHoveredCollection] = useState<number | null>(null);
|
||
|
||
return (
|
||
<div className="min-h-screen bg-[#2B5F47] font-['Arimo']">
|
||
<Head>
|
||
<title>Коллекции | Brand Store</title>
|
||
<link rel="icon" href="/favicon.ico" />
|
||
<link href="https://fonts.googleapis.com/css2?family=Arimo:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||
</Head>
|
||
|
||
<Header />
|
||
|
||
<main className="pt-24 pb-16 px-4 md:px-8">
|
||
<div className="container mx-auto">
|
||
<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 text-white text-center"
|
||
>
|
||
Наши коллекции
|
||
</motion.h1>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 0.5, delay: 0.2 }}
|
||
className="grid grid-cols-1 md:grid-cols-2 gap-8"
|
||
>
|
||
{collections.map((collection, index) => (
|
||
<motion.div
|
||
key={collection.id}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: 0.1 * index }}
|
||
className="relative overflow-hidden rounded-lg shadow-md bg-white"
|
||
onMouseEnter={() => setHoveredCollection(collection.id)}
|
||
onMouseLeave={() => setHoveredCollection(null)}
|
||
>
|
||
<Link href={`/collections/${collection.slug}`}>
|
||
<div className="relative h-96 w-full overflow-hidden">
|
||
<Image
|
||
src={collection.image}
|
||
alt={collection.name}
|
||
fill
|
||
className={`object-cover transition-transform duration-500 ${
|
||
hoveredCollection === collection.id ? 'scale-110' : 'scale-100'
|
||
}`}
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-[#2B5F47]/80 to-transparent"></div>
|
||
</div>
|
||
<div className="absolute bottom-0 left-0 right-0 p-8">
|
||
<h2 className="text-2xl font-semibold text-white mb-3">{collection.name}</h2>
|
||
<p className="text-white/90 text-sm mb-6 line-clamp-3">{collection.description}</p>
|
||
<div className={`inline-block px-5 py-2 bg-[#63823B] text-white rounded-md transition-transform duration-300 ${
|
||
hoveredCollection === collection.id ? 'translate-y-0' : 'translate-y-8 opacity-0'
|
||
}`}>
|
||
Смотреть коллекцию
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
</motion.div>
|
||
))}
|
||
</motion.div>
|
||
</div>
|
||
</main>
|
||
|
||
<Footer />
|
||
</div>
|
||
);
|
||
}
|