100 lines
4.4 KiB
TypeScript
100 lines
4.4 KiB
TypeScript
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>
|
||
);
|
||
}
|