418 lines
17 KiB
TypeScript
418 lines
17 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import Image from "next/image";
|
||
import { m, type Variants } from "framer-motion";
|
||
import Link from "next/link";
|
||
import { MapPin, ArrowRight } from "lucide-react";
|
||
import { Button } from "@/app/components/ui/button";
|
||
import { SectionHeader } from "@/app/components/ui/section-header";
|
||
import { Marquee } from "@/app/components/ui/marquee";
|
||
import { AnimatedNumber } from "@/app/components/ui/animated-number";
|
||
import { TextReveal } from "@/app/components/ui/text-reveal";
|
||
import { ShimmerButton } from "@/app/components/ui/shimmer-button";
|
||
import { Badge } from "@/app/components/ui/badge";
|
||
import type { Dictionary } from "@/types/dictionary";
|
||
|
||
const HERO_BG =
|
||
"https://images.unsplash.com/photo-1499793983690-e29da59ef1c2?auto=format&fit=crop&q=80&w=2070";
|
||
|
||
const MARQUEE_ITEMS = [
|
||
"Akyaka",
|
||
"Akçapınar",
|
||
"Beach Bar",
|
||
"Kite Surf",
|
||
"Restaurant",
|
||
"Hotel",
|
||
"Ege Denizi",
|
||
];
|
||
|
||
const STATS = [
|
||
{ value: 15, suffix: "+", label: "Yıl Deneyim" },
|
||
{ value: 3, suffix: "", label: "Lokasyon" },
|
||
{ value: 5000, suffix: "+", label: "Mutlu Misafir" },
|
||
{ value: 5, suffix: "", label: "Hizmet Kategorisi" },
|
||
];
|
||
|
||
const fadeUp: Variants = {
|
||
hidden: { opacity: 0, y: 30 },
|
||
visible: (i = 0) => ({
|
||
opacity: 1,
|
||
y: 0,
|
||
transition: { duration: 0.65, delay: i * 0.12, ease: [0.16, 1, 0.3, 1] as [number, number, number, number] },
|
||
}),
|
||
};
|
||
|
||
export default function HomeClient({ lang, dict }: { lang: string; dict: Dictionary["home"] }) {
|
||
const [activeMap, setActiveMap] = useState(0);
|
||
|
||
const VENUES: { id: string; title: string; tag: string; desc: string; img: string; color: string; link: string }[] = dict.venuesList;
|
||
const LOCATIONS_MAP: { place: string; addr: string; embed: string }[] = dict.locationsMap;
|
||
|
||
return (
|
||
<div className="flex flex-col min-h-screen">
|
||
|
||
{/* ── Hero ── */}
|
||
<section className="relative h-screen flex items-center justify-center overflow-hidden moy-grain">
|
||
<div className="absolute inset-0 scale-105">
|
||
<Image
|
||
src={HERO_BG}
|
||
alt="Moy Group Hero"
|
||
fill
|
||
priority
|
||
sizes="100vw"
|
||
className="object-cover object-center"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-b from-black/50 via-black/30 to-black/60" />
|
||
</div>
|
||
|
||
<div className="relative z-10 text-center px-4 max-w-5xl mx-auto">
|
||
{/* Eyebrow */}
|
||
<m.p
|
||
initial={{ opacity: 0, y: 12 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.1 }}
|
||
className="text-[10px] uppercase tracking-[0.3em] text-[var(--color-moy-gold)] mb-8 font-medium"
|
||
>
|
||
{dict.hero.eyebrow}
|
||
</m.p>
|
||
|
||
{/* Main heading */}
|
||
<h1 className="text-3xl sm:text-4xl md:text-6xl lg:text-7xl font-serif text-white mb-8 leading-[0.95] tracking-tight whitespace-nowrap">
|
||
<TextReveal text={dict.hero.title} delay={0.2} />
|
||
</h1>
|
||
|
||
<m.p
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 0.8, delay: 0.9 }}
|
||
className="text-base md:text-lg text-gray-300/90 mb-12 font-light max-w-xl mx-auto leading-relaxed"
|
||
>
|
||
{dict.hero.subtitle}
|
||
</m.p>
|
||
|
||
<m.div
|
||
initial={{ opacity: 0, y: 16 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.7, delay: 1.1 }}
|
||
className="flex flex-col sm:flex-row gap-4 justify-center"
|
||
>
|
||
<Link href={`/${lang}/iletisim`}>
|
||
<Button variant="primary" size="lg" shimmer className="group">
|
||
{dict.hero.btn1}
|
||
</Button>
|
||
</Link>
|
||
<Button variant="outline-light" size="lg" className="group" as="button">
|
||
<Link href={`/${lang}/#mekanlar`} className="flex items-center gap-2">
|
||
{dict.hero.btn2}
|
||
<ArrowRight size={14} className="group-hover:translate-x-1 transition-transform" />
|
||
</Link>
|
||
</Button>
|
||
</m.div>
|
||
</div>
|
||
|
||
{/* Scroll indicator */}
|
||
<m.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ delay: 1.6, duration: 0.6 }}
|
||
className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2"
|
||
>
|
||
<span className="text-[9px] uppercase tracking-[0.25em] text-white/50">{dict.hero.scroll}</span>
|
||
<m.div
|
||
animate={{ y: [0, 8, 0] }}
|
||
transition={{ duration: 1.6, repeat: Infinity, ease: "easeInOut" }}
|
||
className="w-[1px] h-8 bg-gradient-to-b from-white/50 to-transparent"
|
||
/>
|
||
</m.div>
|
||
</section>
|
||
|
||
{/* ── Marquee Strip ── */}
|
||
<div className="bg-[var(--color-moy-gold)] py-4 overflow-hidden">
|
||
<Marquee
|
||
items={MARQUEE_ITEMS}
|
||
separator="·"
|
||
speed="normal"
|
||
itemClassName="text-[var(--color-moy-dark)] font-semibold"
|
||
separatorClassName="text-[var(--color-moy-dark)] opacity-40"
|
||
/>
|
||
</div>
|
||
|
||
{/* ── Stats ── */}
|
||
<section className="bg-[var(--color-moy-dark)] py-20">
|
||
<div className="max-w-5xl mx-auto px-6">
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-12 md:gap-6">
|
||
{STATS.map((s, i) => (
|
||
<m.div
|
||
key={s.label}
|
||
custom={i}
|
||
initial="hidden"
|
||
whileInView="visible"
|
||
viewport={{ once: true }}
|
||
variants={fadeUp}
|
||
className="text-center"
|
||
>
|
||
<p className="text-5xl md:text-6xl font-serif text-[var(--color-moy-gold)] mb-2 leading-none">
|
||
<AnimatedNumber value={s.value} suffix={s.suffix} duration={1600} />
|
||
</p>
|
||
<p className="text-[10px] uppercase tracking-[0.2em] text-gray-500 mt-3">
|
||
{s.label}
|
||
</p>
|
||
</m.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── Services (Geçici olarak gizlendi) ── */}
|
||
{/*
|
||
<section id="hizmetler" className="py-28 bg-[var(--color-moy-light)]">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<SectionHeader
|
||
eyebrow="Ne Sunuyoruz"
|
||
title="Hizmetlerimiz"
|
||
subtitle="Her biri kendi hikâyesini taşıyan beş kategori — hepsi Ege'nin özüyle harmanlanmış."
|
||
/>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-5">
|
||
{SERVICES.map((service, i) => (
|
||
<m.div
|
||
key={service.id}
|
||
custom={i}
|
||
initial="hidden"
|
||
whileInView="visible"
|
||
viewport={{ once: true }}
|
||
variants={fadeUp}
|
||
whileHover={{ y: -10 }}
|
||
className="group relative h-80 overflow-hidden cursor-pointer"
|
||
>
|
||
<Image
|
||
src={service.bg}
|
||
alt={service.title}
|
||
fill
|
||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 20vw"
|
||
className="absolute inset-0 object-cover object-center transition-transform duration-700 group-hover:scale-110"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-[var(--color-moy-dark)] via-[var(--color-moy-dark)]/50 to-transparent" />
|
||
|
||
<div className="absolute bottom-0 left-0 right-0 h-[2px] bg-[var(--color-moy-gold)] scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left" />
|
||
|
||
<div className="absolute inset-0 p-6 flex flex-col justify-end items-center text-center">
|
||
<div className="w-14 h-14 border border-[var(--color-moy-gold)]/60 text-[var(--color-moy-gold)] flex items-center justify-center mb-4 group-hover:bg-[var(--color-moy-gold)] group-hover:text-[var(--color-moy-dark)] group-hover:border-[var(--color-moy-gold)] transition-all duration-300">
|
||
<service.icon size={24} />
|
||
</div>
|
||
<h3 className="text-xl font-serif text-white mb-2">{service.title}</h3>
|
||
<p className="text-xs text-gray-300/80 opacity-0 translate-y-3 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 leading-relaxed">
|
||
{service.desc}
|
||
</p>
|
||
</div>
|
||
</m.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
*/}
|
||
|
||
{/* ── Venues ── */}
|
||
<section id="mekanlar" className="py-28 bg-white">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<SectionHeader
|
||
eyebrow={dict.venues.eyebrow}
|
||
title={dict.venues.title}
|
||
subtitle={dict.venues.subtitle}
|
||
/>
|
||
|
||
<div className="space-y-20">
|
||
{VENUES.map((venue, i) => (
|
||
<m.div
|
||
key={venue.id}
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true, margin: "-60px" }}
|
||
transition={{ duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
|
||
className={`flex flex-col ${i % 2 === 1 ? "md:flex-row-reverse" : "md:flex-row"} gap-10 items-center`}
|
||
>
|
||
{/* Image */}
|
||
<div className="w-full md:w-[55%] h-[420px] group relative overflow-hidden shadow-[var(--shadow-xl)]">
|
||
<Image
|
||
src={venue.img}
|
||
alt={venue.title}
|
||
fill
|
||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 55vw, 50vw"
|
||
className="object-cover transition-transform duration-700 group-hover:scale-105"
|
||
/>
|
||
<div className={`absolute inset-0 bg-gradient-to-t ${venue.color} to-transparent opacity-50`} />
|
||
<Badge variant="light" className="absolute bottom-6 left-6 shadow-md">
|
||
{venue.tag}
|
||
</Badge>
|
||
</div>
|
||
|
||
{/* Text */}
|
||
<div className="w-full md:w-[45%] px-2 md:px-6">
|
||
<p className="text-[10px] uppercase tracking-[0.22em] text-[var(--color-moy-gold-dark)] mb-4">
|
||
{venue.tag}
|
||
</p>
|
||
<h3 className="text-3xl md:text-4xl font-serif text-[var(--color-moy-dark)] mb-6 leading-tight">
|
||
{venue.title}
|
||
</h3>
|
||
<span className="moy-gold-line mb-6 block" />
|
||
<p className="text-gray-500 mb-8 text-base leading-relaxed">{venue.desc}</p>
|
||
<Link
|
||
href={`${venue.link}`}
|
||
className="inline-flex items-center gap-2 text-[11px] uppercase tracking-[0.18em] font-semibold text-[var(--color-moy-dark)] border-b border-[var(--color-moy-gold)] pb-1 hover:text-[var(--color-moy-gold-dark)] transition-colors group"
|
||
>
|
||
{dict.cta.exploreBtn}
|
||
<ArrowRight size={12} className="group-hover:translate-x-1 transition-transform" />
|
||
</Link>
|
||
</div>
|
||
</m.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── Testimonials (Geçici olarak gizlendi) ── */}
|
||
{/*
|
||
<section className="py-28 bg-[var(--color-moy-blue)] relative overflow-hidden">
|
||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[600px] rounded-full bg-[var(--color-moy-gold)]/5 blur-3xl pointer-events-none" />
|
||
|
||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative">
|
||
<SectionHeader
|
||
eyebrow="Misafir Deneyimleri"
|
||
title="Misafirlerimiz Ne Diyor?"
|
||
light
|
||
/>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
{TESTIMONIALS.map((t, i) => (
|
||
<m.div
|
||
key={i}
|
||
custom={i}
|
||
initial="hidden"
|
||
whileInView="visible"
|
||
viewport={{ once: true }}
|
||
variants={fadeUp}
|
||
className="relative bg-white/6 backdrop-blur-sm border border-white/10 p-8 hover:border-[var(--color-moy-gold)]/30 transition-colors duration-300"
|
||
>
|
||
<span className="absolute top-6 right-8 text-6xl font-serif text-[var(--color-moy-gold)]/15 leading-none select-none">
|
||
"
|
||
</span>
|
||
|
||
<div className="flex gap-1 mb-6">
|
||
{[...Array(t.rating)].map((_, j) => (
|
||
<Star key={j} size={14} className="fill-[var(--color-moy-gold)] text-[var(--color-moy-gold)]" />
|
||
))}
|
||
</div>
|
||
|
||
<p className="text-gray-300/85 text-sm leading-relaxed mb-8 italic">
|
||
"{t.comment}"
|
||
</p>
|
||
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-8 h-[1px] bg-[var(--color-moy-gold)]/50" />
|
||
<div>
|
||
<p className="font-serif text-white text-base">{t.name}</p>
|
||
<p className="text-[10px] uppercase tracking-[0.15em] text-gray-500 mt-0.5">{t.origin}</p>
|
||
</div>
|
||
</div>
|
||
</m.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
*/}
|
||
|
||
{/* ── CTA Banner ── */}
|
||
<section className="relative py-32 overflow-hidden bg-[var(--color-moy-dark)]">
|
||
<div className="absolute inset-0 opacity-20">
|
||
<Image
|
||
src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&q=60&w=1600"
|
||
alt="Moy Group CTA Background"
|
||
fill
|
||
sizes="100vw"
|
||
className="object-cover object-center"
|
||
/>
|
||
</div>
|
||
<div className="absolute inset-0 bg-gradient-to-r from-[var(--color-moy-dark)] via-transparent to-[var(--color-moy-dark)]" />
|
||
|
||
<div className="relative max-w-3xl mx-auto px-6 text-center">
|
||
<p className="text-[10px] uppercase tracking-[0.28em] text-[var(--color-moy-gold)] mb-6">
|
||
{dict.cta.eyebrow}
|
||
</p>
|
||
<h2 className="text-4xl md:text-6xl font-serif text-white mb-6 leading-tight">
|
||
{dict.cta.title1}<br />
|
||
<span className="italic text-[var(--color-moy-gold)]">{dict.cta.title2}</span>
|
||
</h2>
|
||
<p className="text-gray-400 text-base mb-12 max-w-md mx-auto leading-relaxed">
|
||
{dict.cta.subtitle}
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<Link href={`/${lang}/iletisim`}>
|
||
<ShimmerButton
|
||
shimmerColor="rgba(201,169,110,0.6)"
|
||
background="var(--color-moy-gold)"
|
||
className="text-[var(--color-moy-dark)] font-bold"
|
||
>
|
||
{dict.cta.btn1}
|
||
</ShimmerButton>
|
||
</Link>
|
||
<Link href={`/${lang}/iletisim`}>
|
||
<Button variant="outline-light" size="lg">
|
||
{dict.cta.btn2}
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── Map / Location ── */}
|
||
<section className="py-28 bg-[var(--color-moy-light)]">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="flex flex-col lg:flex-row gap-16 items-start">
|
||
<div className="w-full lg:w-1/3">
|
||
<SectionHeader
|
||
eyebrow={dict.venues.eyebrow}
|
||
title={dict.venues.title}
|
||
align="left"
|
||
/>
|
||
<p className="text-gray-500 mb-10 -mt-8 leading-relaxed">
|
||
{dict.venues.subtitle}
|
||
</p>
|
||
<ul className="space-y-4">
|
||
{LOCATIONS_MAP.map((loc, idx) => (
|
||
<li
|
||
key={loc.place}
|
||
className={`flex items-start gap-3 p-4 rounded-xl cursor-pointer transition-all duration-300 ${activeMap === idx ? 'bg-white shadow-[var(--shadow-sm)] translate-x-2' : 'hover:bg-white/50'}`}
|
||
onClick={() => setActiveMap(idx)}
|
||
>
|
||
<MapPin className={`${activeMap === idx ? 'text-[var(--color-moy-gold)]' : 'text-gray-400'} mt-0.5 shrink-0 transition-colors`} size={18} />
|
||
<div>
|
||
<strong className={`block text-sm font-medium mb-0.5 transition-colors ${activeMap === idx ? 'text-[var(--color-moy-dark)]' : 'text-gray-600'}`}>
|
||
{loc.place}
|
||
</strong>
|
||
<span className="text-xs text-gray-500">{loc.addr}</span>
|
||
</div>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="w-full lg:w-2/3 h-[420px] bg-white overflow-hidden shadow-[var(--shadow-lg)] relative rounded-2xl">
|
||
<iframe
|
||
src={LOCATIONS_MAP[activeMap].embed}
|
||
width="100%"
|
||
height="100%"
|
||
style={{ border: 0 }}
|
||
allowFullScreen={false}
|
||
loading="lazy"
|
||
referrerPolicy="no-referrer-when-downgrade"
|
||
className="absolute inset-0"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|