91 lines
3.9 KiB
TypeScript
91 lines
3.9 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { Star, ArrowRight } from "lucide-react";
|
|
import ScrollReveal from "@/components/ScrollReveal";
|
|
|
|
interface AboutSectionProps {
|
|
aboutData: {
|
|
image: string;
|
|
badge: string;
|
|
statsGuestCount: string;
|
|
statsGuestLabel: string;
|
|
statsYearCount: string;
|
|
statsYearLabel: string;
|
|
badgeIkoTitle: string;
|
|
badgeIkoLabel: string;
|
|
titleLine1: string;
|
|
titleLine2: string;
|
|
titleHighlight: string;
|
|
description1: string;
|
|
description2: string;
|
|
};
|
|
lang: string;
|
|
}
|
|
|
|
export default function AboutSection({ aboutData, lang }: AboutSectionProps) {
|
|
return (
|
|
<section className="py-28 bg-background overflow-hidden">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24 items-center">
|
|
<ScrollReveal className="relative">
|
|
<div className="relative h-[540px] lg:h-[660px] rounded-3xl overflow-hidden shadow-2xl">
|
|
<Image
|
|
src={aboutData.image}
|
|
alt={aboutData.badge}
|
|
fill
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
{/* Stats card */}
|
|
<div className="absolute -bottom-5 -right-4 md:-right-8 bg-white rounded-2xl p-6 shadow-xl border border-sand">
|
|
<div className="grid grid-cols-2 gap-6 divide-x divide-sand">
|
|
<div className="text-center">
|
|
<span className="block font-serif text-3xl font-bold text-primary">{aboutData.statsGuestCount}</span>
|
|
<span className="block text-[10px] text-muted uppercase tracking-wider mt-1">{aboutData.statsGuestLabel}</span>
|
|
</div>
|
|
<div className="text-center pl-6">
|
|
<span className="block font-serif text-3xl font-bold text-primary">{aboutData.statsYearCount}</span>
|
|
<span className="block text-[10px] text-muted uppercase tracking-wider mt-1">{aboutData.statsYearLabel}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* IKO badge */}
|
|
<div className="absolute -top-4 -left-4 bg-accent text-white rounded-2xl p-4 shadow-lg">
|
|
<Star className="w-4 h-4 mb-1" fill="white" />
|
|
<span className="block text-xs font-bold leading-none">{aboutData.badgeIkoTitle}</span>
|
|
<span className="block text-[10px] opacity-80 mt-0.5">{aboutData.badgeIkoLabel}</span>
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
<ScrollReveal delay={200}>
|
|
<span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-5">
|
|
{aboutData.badge}
|
|
</span>
|
|
<h2 className="font-serif text-4xl md:text-5xl lg:text-6xl font-bold text-dark leading-[1.05] mb-8">
|
|
{aboutData.titleLine1}<br />{aboutData.titleLine2}<br />
|
|
<span className="text-primary italic">{aboutData.titleHighlight}</span>
|
|
</h2>
|
|
<p className="text-gray-600 leading-relaxed mb-5">
|
|
{aboutData.description1}
|
|
</p>
|
|
<p className="text-gray-600 leading-relaxed mb-10">
|
|
{aboutData.description2}
|
|
</p>
|
|
<div className="section-line mb-8" />
|
|
<Link
|
|
href={`/${lang}/hakkimizda`}
|
|
className="inline-flex items-center gap-2 text-dark font-bold text-sm tracking-wide group"
|
|
>
|
|
<span className="border-b-2 border-accent pb-0.5">
|
|
{lang === "en" ? "Read Our Story" : "Hikayemizi Okuyun"}
|
|
</span>
|
|
<ArrowRight className="w-4 h-4 group-hover:translate-x-1.5 transition-transform" />
|
|
</Link>
|
|
</ScrollReveal>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|