50 lines
2.8 KiB
TypeScript
50 lines
2.8 KiB
TypeScript
import { ArrowUpRight } from "lucide-react";
|
|
import { motion } from "framer-motion";
|
|
import Image from "next/image";
|
|
import { business } from "@/config/business";
|
|
import type { Messages } from "@/messages";
|
|
import AnimatedSection from "./AnimatedSection";
|
|
import SectionHeader from "./SectionHeader";
|
|
|
|
const collectionImages = [
|
|
business.assets.prescriptionGlasses,
|
|
business.assets.sunglasses,
|
|
business.assets.kidsGlasses,
|
|
business.assets.budgetFrames
|
|
];
|
|
|
|
export default function CollectionsSection({ t }: { t: Messages }) {
|
|
return (
|
|
<AnimatedSection id="collections" className="px-4 py-20 sm:px-6">
|
|
<div className="mx-auto max-w-7xl">
|
|
<SectionHeader eyebrow={t.collections.eyebrow} title={t.collections.title} body={t.collections.body} />
|
|
<motion.div className="mt-12 grid gap-5 md:grid-cols-2 lg:grid-cols-4" initial={false} whileInView="show" viewport={{ once: true, amount: 0.08 }} variants={{ show: { transition: { staggerChildren: 0.1 } } }}>
|
|
{t.collections.items.map((item, index) => (
|
|
<motion.article key={item.title} variants={{ show: { opacity: 1, y: 0, rotateX: 0 } }} transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }} whileHover={{ y: -10, scale: 1.015 }} className="group relative min-h-[23rem] overflow-hidden rounded-[2.2rem] bg-ink p-6 text-white shadow-glass">
|
|
<Image
|
|
src={collectionImages[index]}
|
|
alt={`${business.name} - ${item.title}`}
|
|
fill
|
|
sizes="(min-width: 1024px) 25vw, (min-width: 768px) 50vw, 92vw"
|
|
className="object-cover opacity-68 transition duration-700 group-hover:scale-105 group-hover:opacity-78"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-b from-ink/35 via-ink/35 to-ink/92" />
|
|
<div className="absolute inset-x-4 bottom-4 top-auto h-28 rounded-[1.7rem] bg-white/10 blur-2xl" />
|
|
<div className="relative z-10 flex h-full min-h-[19rem] flex-col justify-between">
|
|
<div className="flex items-center justify-between">
|
|
<span className="rounded-full bg-white/14 px-3 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-white/75 backdrop-blur">0{index + 1}</span>
|
|
<ArrowUpRight size={18} className="text-white/50 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-white rtl:rotate-[-90deg]" />
|
|
</div>
|
|
<div className="rounded-[1.6rem] border border-white/12 bg-ink/42 p-5 backdrop-blur-xl">
|
|
<h3 className="text-2xl font-semibold tracking-[-0.045em]">{item.title}</h3>
|
|
<p className="mt-3 text-sm leading-7 text-white/68">{item.text}</p>
|
|
</div>
|
|
</div>
|
|
</motion.article>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</AnimatedSection>
|
|
);
|
|
}
|