Update gallery to bento grid, add real reviews, update phone numbers and locations

2026-07-15 13:51:22 +03:00
parent d4bcbb0cc3
commit 7a874ab11d
43 changed files with 1234 additions and 790 deletions
@@ -0,0 +1,99 @@
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+import ScrollReveal from "@/components/ScrollReveal";
+
+interface Event {
+  id: number | string;
+  image: string;
+  title: string;
+  description: string;
+  badge?: string | null;
+  date: string;
+  time: string;
+  location: string;
+}
+
+interface EventsPreviewProps {
+  events: Event[];
+  lang: string;
+}
+
+export default function EventsPreview({ events, lang }: EventsPreviewProps) {
+  return (
+    <section className="py-28 bg-dark text-white relative overflow-hidden">
+      {/* Background glow */}
+      <div className="absolute top-0 right-0 w-96 h-96 bg-accent/20 rounded-full blur-[120px] pointer-events-none" />
+      <div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-primary/20 rounded-full blur-[150px] pointer-events-none" />
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <ScrollReveal className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-16">
+          <div>
+            <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
+              {lang === "en" ? "Calendar" : "Takvim"}
+            </span>
+            <h2 className="font-serif text-5xl font-bold">
+              {lang === "en" ? "Events" : "Etkinlikler"}
+            </h2>
+          </div>
+          <Link
+            href={`/${lang}/etkinlikler`}
+            className="inline-flex items-center gap-2 text-sm font-semibold text-white/70 hover:text-white transition-colors border border-white/20 hover:border-white px-6 py-2.5 rounded-full"
+          >
+            {lang === "en" ? "All Events" : "Tüm Etkinlikler"} <ArrowRight className="w-4 h-4" />
+          </Link>
+        </ScrollReveal>
+
+        <ScrollReveal delay={100}>
+          {events.length > 0 ? (
+            events.map((ev) => (
+              <div key={ev.id} className="group relative flex flex-col md:flex-row gap-8 bg-white/5 border border-white/10 rounded-3xl p-6 md:p-10 hover:bg-white/10 transition-colors backdrop-blur-sm mb-6">
+                <div className="relative w-full md:w-1/3 h-[250px] md:h-auto rounded-2xl overflow-hidden shrink-0">
+                  <Image
+                    src={ev.image}
+                    alt={ev.title}
+                    fill
+                    sizes="(max-width: 768px) 100vw, 33vw"
+                    className="object-cover group-hover:scale-105 transition-transform duration-700"
+                  />
+                </div>
+                <div className="flex flex-col justify-center w-full md:w-2/3">
+                  {ev.badge && (
+                    <div className="inline-block bg-accent/20 text-accent text-[10px] font-bold px-3 py-1.5 rounded-full tracking-widest uppercase mb-4 w-max">
+                      {ev.badge}
+                    </div>
+                  )}
+                  <h3 className="font-serif text-3xl md:text-4xl font-bold mb-4">{ev.title}</h3>
+                  <p className="text-white/60 leading-relaxed mb-6 max-w-xl">
+                    {ev.description}
+                  </p>
+                  <div className="flex flex-wrap items-center gap-6 mb-8 text-sm text-white/80">
+                    <span className="flex items-center gap-2">
+                      <span className="w-2 h-2 rounded-full bg-accent" /> {ev.date}
+                    </span>
+                    <span className="flex items-center gap-2">
+                      <span className="w-2 h-2 rounded-full bg-accent" /> {ev.time}
+                    </span>
+                    <span className="flex items-center gap-2">
+                      <span className="w-2 h-2 rounded-full bg-accent" /> {ev.location}
+                    </span>
+                  </div>
+                  <Link
+                    href={`/${lang}/etkinlikler`}
+                    className="inline-flex items-center gap-2 text-xs font-bold tracking-widest uppercase text-accent hover:text-white transition-colors w-max"
+                  >
+                    {lang === "en" ? "View Details" : "Detayları İncele"} <ArrowRight className="w-4 h-4" />
+                  </Link>
+                </div>
+              </div>
+            ))
+          ) : (
+            <div className="py-10 text-center text-white/50">
+              {lang === "en" ? "No events added yet." : "Henüz etkinlik eklenmedi."}
+            </div>
+          )}
+        </ScrollReveal>
+      </div>
+    </section>
+  );
+}