b

2026-06-09 15:15:40 +03:00
parent f6b4acb760
commit d908d83ca5
58 changed files with 4320 additions and 419 deletions
@@ -0,0 +1,103 @@
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowRight, Clock, Users } from "lucide-react";
+import ScrollReveal from "@/components/ScrollReveal";
+
+import prisma from "@/lib/prisma";
+
+export default async function AktivitelerPage({ params }: { params: Promise<{ lang: string }> }) {
+  const { lang } = await params;
+  const activities = await prisma.activity.findMany({ where: { lang }, orderBy: { order: "asc" } });
+
+  return (
+    <div className="min-h-screen bg-background">
+
+      {/* Page Header */}
+      <section className="relative h-[55vh] w-full flex items-end overflow-hidden">
+        <div className="absolute inset-0">
+          <Image
+            src="https://images.unsplash.com/photo-1526367790999-0150786686a2?q=80&w=2940&auto=format&fit=crop"
+            alt="Aktiviteler"
+            fill
+            className="object-cover"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-dark/85 via-dark/30 to-black/20" />
+        </div>
+        <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-14 w-full">
+          <span className="block text-accent text-xs tracking-[0.3em] uppercase font-semibold mb-3 animate-fade-up">
+            Deneyimler
+          </span>
+          <h1 className="font-serif text-5xl md:text-7xl text-white font-bold animate-fade-up delay-100">
+            Aktiviteler
+          </h1>
+          <p className="text-white/60 text-lg mt-3 font-light animate-fade-up delay-200">
+            Rüzgarı hisset, doğayla bir ol.
+          </p>
+        </div>
+      </section>
+
+      {/* Activities */}
+      <section className="py-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          {activities.length > 0 ? activities.map((act, i) => (
+            <ScrollReveal key={act.id} delay={i * 80}>
+              <div className="card-lift group bg-white rounded-3xl overflow-hidden border border-sand flex flex-col h-full">
+                <div className="relative h-64 overflow-hidden">
+                  <Image
+                    src={act.image}
+                    alt={act.title}
+                    fill
+                    className="object-cover group-hover:scale-105 transition-transform duration-700"
+                  />
+                  {act.badge && (
+                    <span className="absolute top-4 left-4 text-[10px] font-bold px-3 py-1.5 rounded-full tracking-widest uppercase bg-accent text-white shadow">
+                      {act.badge}
+                    </span>
+                  )}
+                </div>
+
+                <div className="p-8 flex-grow flex flex-col">
+                  <h2 className="font-serif text-2xl font-bold text-dark mb-3">{act.title}</h2>
+                  <p className="text-gray-500 text-[14px] leading-relaxed mb-6 flex-grow">{act.description}</p>
+
+                  <div className="flex justify-between items-center pt-6 border-t border-sand">
+                    <div>
+                      <span className="text-2xl font-bold text-dark">{act.price}</span>
+                    </div>
+                    <Link
+                      href={`/${lang}/iletisim`}
+                      className="inline-flex items-center gap-2 text-accent font-bold text-[12px] tracking-wider uppercase hover:text-primary transition-colors group/link"
+                    >
+                      Bilgi Al
+                      <ArrowRight size={14} className="group-hover/link:translate-x-1 transition-transform" />
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </ScrollReveal>
+          )) : (
+            <div className="col-span-2 text-center py-20 text-gray-500">Henüz aktivite eklenmedi.</div>
+          )}
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="py-20 bg-primary">
+        <div className="max-w-3xl mx-auto px-4 text-center">
+          <h3 className="font-serif text-4xl text-white font-bold mb-4">
+            Özel Paket Teklifi Al
+          </h3>
+          <p className="text-white/60 mb-8">
+            Kitesurf + konaklama veya yoga + SUP gibi özel aktivite paketleri için bizimle iletişime geçin.
+          </p>
+          <Link
+            href="/iletisim"
+            className="btn-shimmer inline-block bg-accent text-white px-10 py-4 rounded-full text-xs font-bold tracking-[0.15em] uppercase"
+          >
+            İletişime Geç
+          </Link>
+        </div>
+      </section>
+    </div>
+  );
+}