85 lines
4.4 KiB
TypeScript
85 lines
4.4 KiB
TypeScript
'use client';
|
|
|
|
import { use } from "react";
|
|
import { yachts } from "../../data/yachts";
|
|
import { Link } from "@/i18n/routing";
|
|
import { useTranslations, useLocale } from "next-intl";
|
|
import { CldImage } from "next-cloudinary";
|
|
|
|
interface PageProps {
|
|
params: Promise<{ locale: string }>;
|
|
}
|
|
|
|
export default function FleetPage({ params }: PageProps) {
|
|
const { locale: _locale } = use(params);
|
|
const t = useTranslations('FleetList');
|
|
const locale = useLocale();
|
|
return (
|
|
<div className="pt-40 pb-24 px-6 md:px-24 min-h-screen bg-surface">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="flex flex-col md:flex-row items-end gap-16 mb-24">
|
|
<div className="w-full md:w-1/2">
|
|
<span className="font-label text-xs tracking-[0.4em] text-secondary uppercase mb-4 block">{t('collection')}</span>
|
|
<h1 className="font-headline text-5xl md:text-7xl text-primary leading-tight mb-8">
|
|
{t('title1')} <br />
|
|
<span className="text-secondary italic">{t('title2')}</span>
|
|
</h1>
|
|
<div className="h-px w-24 bg-secondary mb-8"></div>
|
|
<p className="font-body text-on-surface-variant text-lg leading-relaxed font-light">
|
|
{t('description')}
|
|
</p>
|
|
</div>
|
|
<div className="w-full md:w-1/2 flex justify-end">
|
|
<div className="text-right">
|
|
<span className="font-label text-6xl md:text-8xl text-outline-variant/30 font-bold leading-none uppercase">{t('bg_text')}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-40">
|
|
{yachts.map((yacht, index) => (
|
|
<div key={yacht.slug} className={`grid grid-cols-1 md:grid-cols-12 gap-0 group ${index % 2 !== 0 ? 'md:flex-row-reverse' : ''}`}>
|
|
<div className={`md:col-span-7 relative h-[500px] md:h-[700px] overflow-hidden ${index % 2 !== 0 ? 'md:order-2' : ''}`}>
|
|
<CldImage
|
|
src={yacht.heroImage}
|
|
alt={yacht.name}
|
|
fill
|
|
crop="fill"
|
|
gravity="auto"
|
|
className="w-full h-full object-cover transition-all duration-1000 scale-100 group-hover:scale-105"
|
|
/>
|
|
<div className="absolute inset-0 bg-primary/20 group-hover:bg-transparent transition-colors duration-700" />
|
|
</div>
|
|
<div className={`md:col-span-5 flex flex-col justify-center py-12 md:py-0 ${index % 2 !== 0 ? 'md:order-1 md:pr-20 md:text-right md:items-end' : 'md:pl-20'}`}>
|
|
<span className="font-label text-xs tracking-[0.4em] text-secondary uppercase mb-4">{t('masterpiece')}{index + 1}</span>
|
|
<h3 className="font-headline text-4xl md:text-5xl text-primary mb-8 tracking-wide uppercase">{yacht.name}</h3>
|
|
<p className="text-on-surface-variant font-light leading-relaxed mb-12 max-w-sm">
|
|
{locale === 'tr' && yacht.description_tr ? yacht.description_tr : yacht.description}
|
|
</p>
|
|
<div className="grid grid-cols-3 border-t border-outline-variant/20 pt-8 w-full text-left">
|
|
<div className="flex flex-col gap-1">
|
|
<span className="material-symbols-outlined text-secondary text-xl">straighten</span>
|
|
<span className="font-label text-[10px] tracking-widest text-outline uppercase mt-2">{t('length')}</span>
|
|
<span className="font-body text-sm text-primary font-semibold">{yacht.length}</span>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<span className="material-symbols-outlined text-secondary text-xl">groups</span>
|
|
<span className="font-label text-[10px] tracking-widest text-outline uppercase mt-2">{t('guests')}</span>
|
|
<span className="font-body text-sm text-primary font-semibold">{yacht.guests} {t('guests_suffix')}</span>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<Link href={`/fleet/${yacht.slug}`} className="mt-auto">
|
|
<span className="font-label text-[10px] tracking-widest text-secondary border-b border-secondary pb-1 uppercase hover:opacity-70 smooth-transition">{t('discover')}</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|