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,115 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Calendar, Clock } from "lucide-react";
+import { MagicCard } from "@/components/ui/MagicCard";
+
+const events = [
+  {
+    id: 1,
+    title: "Canlı Konser Gecesi",
+    artist: "Evrencan Gündüz & Uzaylılar",
+    date: "12 Temmuz Cuma",
+    time: "21:30 - 02:00",
+    category: "Live Music",
+    image: "https://images.unsplash.com/photo-1540039155732-680e7c58ed8a?q=80&w=2070&auto=format&fit=crop"
+  },
+  {
+    id: 2,
+    title: "Sunset DJ Party",
+    artist: "DJ Soul",
+    date: "14 Temmuz Pazar",
+    time: "18:00 - 23:00",
+    category: "Sunset",
+    image: "https://images.unsplash.com/photo-1571266028243-3716f02d2d2e?q=80&w=2070&auto=format&fit=crop"
+  },
+  {
+    id: 3,
+    title: "Latin Gecesi",
+    artist: "Havana Vibes",
+    date: "20 Temmuz Cumartesi",
+    time: "22:00 - 03:00",
+    category: "Dance",
+    image: "https://images.unsplash.com/photo-1508215885820-4585e5610924?q=80&w=2058&auto=format&fit=crop"
+  }
+];
+
+export default function Events() {
+  return (
+    <section id="events" className="py-24 md:py-32 bg-[#0d0d0d] relative">
+      <div className="container mx-auto px-6 md:px-12">
+        
+        <div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
+          <motion.div 
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6 }}
+          >
+            <h2 className="font-serif text-4xl md:text-5xl text-text-main mb-4">Yaklaşan Etkinlikler</h2>
+            <p className="text-text-main/60 font-light text-lg">No talk, just music. Geceye yön veren performanslar.</p>
+          </motion.div>
+          <motion.a 
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            href="#contact" 
+            className="text-accent1 hover:text-text-main transition-colors uppercase tracking-widest text-sm font-semibold flex items-center gap-2"
+          >
+            Tüm Programı Gör <span aria-hidden="true">&rarr;</span>
+          </motion.a>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {events.map((event, index) => (
+            <motion.div
+              key={event.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="group relative bg-primary overflow-hidden border border-white/5 hover:border-accent1/50 transition-colors h-full">
+              <div className="aspect-[4/3] overflow-hidden relative">
+                <div className="absolute inset-0 bg-primary/40 group-hover:bg-transparent transition-colors duration-500 z-10" />
+                <img 
+                  src={event.image} 
+                  alt={event.title} 
+                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
+                />
+                <div className="absolute top-4 left-4 z-20 bg-primary/80 backdrop-blur border border-white/10 px-3 py-1 uppercase text-[10px] tracking-widest text-accent1 font-semibold">
+                  {event.category}
+                </div>
+              </div>
+              
+              <div className="p-8">
+                <h3 className="font-serif text-2xl text-text-main mb-1 group-hover:text-accent1 transition-colors">{event.title}</h3>
+                <p className="text-text-main/70 font-light mb-6">{event.artist}</p>
+                
+                <div className="space-y-3 mb-8">
+                  <div className="flex items-center text-sm text-text-main/60 font-light">
+                    <Calendar size={16} className="text-accent2 mr-3" />
+                    {event.date}
+                  </div>
+                  <div className="flex items-center text-sm text-text-main/60 font-light">
+                    <Clock size={16} className="text-accent2 mr-3" />
+                    {event.time}
+                  </div>
+                </div>
+                
+                <a 
+                  href="#contact" 
+                  className="block w-full py-3 text-center border border-white/10 hover:bg-accent1 hover:text-primary hover:border-accent1 transition-all uppercase tracking-widest text-xs font-bold"
+                >
+                  Rezervasyon
+                </a>
+              </div>
+            </MagicCard>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}