102 lines
3.7 KiB
TypeScript
102 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { MagicCard } from "@/components/ui/MagicCard";
|
|
|
|
const cocktails = [
|
|
{
|
|
id: 1,
|
|
name: "Luna Sunset",
|
|
description: "Tequila, Mezcal, Passion Fruit, Chili, Lime",
|
|
price: "450 ₺",
|
|
image: "https://images.unsplash.com/photo-1513558161293-cdaf765ed2fd?q=80&w=1974&auto=format&fit=crop"
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "Midnight Velvet",
|
|
description: "Bourbon, Blackberry, Vermouth, Angostura",
|
|
price: "480 ₺",
|
|
image: "https://images.unsplash.com/photo-1536935338788-846bb9981813?q=80&w=2069&auto=format&fit=crop"
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "Golden Hour",
|
|
description: "Gin, Elderflower, Prosecco, Gold Dust",
|
|
price: "420 ₺",
|
|
image: "https://images.unsplash.com/photo-1551024709-8f23befc6f87?q=80&w=2157&auto=format&fit=crop"
|
|
}
|
|
];
|
|
|
|
export default function Cocktails() {
|
|
return (
|
|
<section id="cocktails" className="py-24 md:py-32 bg-primary relative border-t border-white/5">
|
|
<div className="container mx-auto px-6 md:px-12">
|
|
|
|
<div className="text-center mb-16 md:mb-24">
|
|
<motion.h2
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="font-serif text-4xl md:text-5xl text-text-main mb-6"
|
|
>
|
|
İmza Kokteyller
|
|
</motion.h2>
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
className="w-16 h-1 bg-accent1 mx-auto"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
|
|
{cocktails.map((cocktail, index) => (
|
|
<motion.div
|
|
key={cocktail.id}
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: "-50px" }}
|
|
transition={{ duration: 0.6, delay: index * 0.2 }}
|
|
>
|
|
<MagicCard className="flex flex-col group relative">
|
|
<div className="aspect-[3/4] overflow-hidden relative mb-6">
|
|
<img
|
|
src={cocktail.image}
|
|
alt={cocktail.name}
|
|
className="w-full h-full object-cover grayscale-[20%] group-hover:grayscale-0 group-hover:scale-105 transition-all duration-700"
|
|
/>
|
|
</div>
|
|
<div className="flex justify-between items-start border-b border-white/10 pb-4">
|
|
<div>
|
|
<h3 className="font-serif text-2xl text-text-main mb-2 group-hover:text-accent1 transition-colors">{cocktail.name}</h3>
|
|
<p className="text-text-main/60 font-light text-sm max-w-[200px]">{cocktail.description}</p>
|
|
</div>
|
|
<span className="text-accent2 font-serif text-xl">{cocktail.price}</span>
|
|
</div>
|
|
</MagicCard>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.6 }}
|
|
className="mt-20 text-center"
|
|
>
|
|
<a
|
|
href="#contact"
|
|
className="inline-block border border-accent1 text-text-main hover:bg-accent1 hover:text-primary transition-colors px-8 py-3 uppercase tracking-widest text-sm font-semibold"
|
|
>
|
|
Tüm Menüyü İncele
|
|
</a>
|
|
</motion.div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|