first commit

2026-06-03 04:27:40 +03:00
parent dcfaf2723c
commit 48277fe8d2
22 changed files with 1610 additions and 117 deletions
@@ -0,0 +1,101 @@
+"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>
+  );
+}