82 lines
3.4 KiB
TypeScript
82 lines
3.4 KiB
TypeScript
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>
|
||
);
|
||
}
|