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,81 @@
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+import ScrollReveal from "@/components/ScrollReveal";
+
+interface Activity {
+  id: number | string;
+  image: string;
+  title: string;
+  description: string;
+  badge?: string | null;
+}
+
+interface ActivitiesGridProps {
+  activities: Activity[];
+  lang: string;
+}
+
+export default function ActivitiesGrid({ activities, lang }: ActivitiesGridProps) {
+  return (
+    <section className="py-28 bg-background">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <ScrollReveal className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-10">
+          <div>
+            <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
+              {lang === "en" ? "What Will You Do?" : "Ne Yapacaksınız?"}
+            </span>
+            <h2 className="font-serif text-5xl font-bold text-dark">
+              {lang === "en" ? "Activities" : "Aktiviteler"}
+            </h2>
+          </div>
+          <Link
+            href={`/${lang}/aktiviteler`}
+            className="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:text-accent transition-colors"
+          >
+            {lang === "en" ? "See All" : "Tümünü Gör"} <ArrowRight className="w-4 h-4" />
+          </Link>
+        </ScrollReveal>
+
+        {/* Single Row 3 Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {activities.length > 0 ? (
+            activities.map((act, i) => (
+              <ScrollReveal
+                key={act.id}
+                delay={i * 50}
+              >
+                <Link href={`/${lang}/aktiviteler`} className={`group relative block rounded-3xl overflow-hidden h-[400px]`}>
+                  <Image
+                    src={act.image}
+                    alt={act.title}
+                    fill
+                    sizes="(max-width: 768px) 100vw, 33vw"
+                    className="object-cover group-hover:scale-105 transition-transform duration-700"
+                  />
+                  <div className={`absolute inset-0 bg-gradient-to-t from-dark/90 via-dark/30 to-transparent`} />
+                  <div className={`absolute bottom-0 p-8 flex flex-col justify-end h-full`}>
+                    {act.badge && (
+                      <span className="block text-accent text-[10px] tracking-[0.25em] uppercase font-bold mb-3">{act.badge}</span>
+                    )}
+                    <h3 className={`font-serif text-white font-bold mb-3 text-3xl`}>{act.title}</h3>
+                    <p className="text-white/70 text-sm mb-4 max-w-xs line-clamp-3">
+                      {act.description}
+                    </p>
+                    <span className="inline-flex items-center gap-2 text-white text-sm font-semibold hover:text-accent transition-colors mt-auto opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 duration-400">
+                      <ArrowRight className="w-4 h-4" />
+                    </span>
+                  </div>
+                </Link>
+              </ScrollReveal>
+            ))
+          ) : (
+            <div className="md:col-span-3 py-10 text-center text-gray-500">
+              {lang === "en" ? "No activities added yet." : "Henüz aktivite eklenmedi."}
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}