Update gallery to bento grid, add real reviews, update phone numbers and locations
This commit is contained in:
Ayris Dev
@@ -0,0 +1,144 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Image from "next/image";
|
||||
import { X } from "lucide-react";
|
||||
|
||||
interface BentoGalleryProps {
|
||||
images: string[];
|
||||
}
|
||||
|
||||
export default function BentoGallery({ images }: BentoGalleryProps) {
|
||||
const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
|
||||
|
||||
const openLightbox = (index: number) => {
|
||||
setLightboxIndex(index);
|
||||
};
|
||||
|
||||
const closeLightbox = () => {
|
||||
setLightboxIndex(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 auto-rows-[200px] md:auto-rows-[250px]">
|
||||
{/* Big Feature Image */}
|
||||
{images.length > 0 && (
|
||||
<div
|
||||
className="relative rounded-3xl overflow-hidden group col-span-2 row-span-2 cursor-pointer h-full"
|
||||
onClick={() => openLightbox(0)}
|
||||
>
|
||||
<Image
|
||||
src={images[0]}
|
||||
alt="Gallery Image 1"
|
||||
fill
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
className="object-cover group-hover:scale-105 transition-transform duration-700"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{/* Top Right */}
|
||||
{images.length > 1 && (
|
||||
<div
|
||||
className="relative rounded-3xl overflow-hidden group col-span-2 row-span-1 cursor-pointer h-full"
|
||||
onClick={() => openLightbox(1)}
|
||||
>
|
||||
<Image
|
||||
src={images[1]}
|
||||
alt="Gallery Image 2"
|
||||
fill
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
className="object-cover group-hover:scale-105 transition-transform duration-700"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{/* Middle Right 1 */}
|
||||
{images.length > 2 && (
|
||||
<div
|
||||
className="relative rounded-3xl overflow-hidden group col-span-1 row-span-1 cursor-pointer h-full"
|
||||
onClick={() => openLightbox(2)}
|
||||
>
|
||||
<Image
|
||||
src={images[2]}
|
||||
alt="Gallery Image 3"
|
||||
fill
|
||||
sizes="(max-width: 768px) 50vw, 25vw"
|
||||
className="object-cover group-hover:scale-105 transition-transform duration-700"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{/* Middle Right 2 */}
|
||||
{images.length > 3 && (
|
||||
<div
|
||||
className="relative rounded-3xl overflow-hidden group col-span-1 row-span-1 cursor-pointer h-full"
|
||||
onClick={() => openLightbox(3)}
|
||||
>
|
||||
<Image
|
||||
src={images[3]}
|
||||
alt="Gallery Image 4"
|
||||
fill
|
||||
sizes="(max-width: 768px) 50vw, 25vw"
|
||||
className="object-cover group-hover:scale-105 transition-transform duration-700"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{/* Bottom Row 1 */}
|
||||
{images.length > 4 && (
|
||||
<div
|
||||
className="relative rounded-3xl overflow-hidden group col-span-2 md:col-span-3 row-span-1 cursor-pointer h-full"
|
||||
onClick={() => openLightbox(4)}
|
||||
>
|
||||
<Image
|
||||
src={images[4]}
|
||||
alt="Gallery Image 5"
|
||||
fill
|
||||
sizes="(max-width: 768px) 100vw, 75vw"
|
||||
className="object-cover group-hover:scale-105 transition-transform duration-700"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{/* Bottom Row 2 */}
|
||||
{images.length > 5 && (
|
||||
<div
|
||||
className="relative rounded-3xl overflow-hidden group col-span-2 md:col-span-1 row-span-1 cursor-pointer h-full"
|
||||
onClick={() => openLightbox(5)}
|
||||
>
|
||||
<Image
|
||||
src={images[5]}
|
||||
alt="Gallery Image 6"
|
||||
fill
|
||||
sizes="(max-width: 768px) 100vw, 25vw"
|
||||
className="object-cover group-hover:scale-105 transition-transform duration-700"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Lightbox */}
|
||||
{lightboxIndex !== null && (
|
||||
<div
|
||||
className="fixed inset-0 z-[100] bg-dark/95 backdrop-blur-sm flex items-center justify-center p-4 cursor-zoom-out opacity-0 animate-fade-in"
|
||||
style={{ animationFillMode: "forwards" }}
|
||||
onClick={closeLightbox}
|
||||
>
|
||||
<div className="relative max-w-6xl w-full h-[85vh] aspect-auto" onClick={(e) => e.stopPropagation()}>
|
||||
<Image
|
||||
src={images[lightboxIndex]}
|
||||
alt="Lightbox Image"
|
||||
fill
|
||||
sizes="100vw"
|
||||
className="object-contain rounded-xl shadow-2xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="absolute top-6 right-6 text-white/60 hover:text-white transition-colors bg-white/10 hover:bg-white/20 p-2 rounded-full"
|
||||
onClick={closeLightbox}
|
||||
>
|
||||
<X size={28} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -33,7 +33,7 @@ export default function Footer({ lang = "tr" }: { lang?: string }) {
|
||||
const isEn = lang === "en";
|
||||
const quickLinks = isEn ? [
|
||||
{ name: "Home", href: "/en" },
|
||||
// { name: "Rooms", href: "/en/odalar" },
|
||||
{ name: "Rooms", href: "/en/odalar" },
|
||||
{ name: "Activities", href: "/en/aktiviteler"},
|
||||
{ name: "Restaurant", href: "/en/restoran" },
|
||||
{ name: "Events", href: "/en/etkinlikler"},
|
||||
@@ -41,7 +41,7 @@ export default function Footer({ lang = "tr" }: { lang?: string }) {
|
||||
{ name: "About Us", href: "/en/hakkimizda" },
|
||||
] : [
|
||||
{ name: "Ana Sayfa", href: "/tr" },
|
||||
// { name: "Odalar", href: "/tr/odalar" },
|
||||
{ name: "Odalar", href: "/tr/odalar" },
|
||||
{ name: "Aktiviteler", href: "/tr/aktiviteler"},
|
||||
{ name: "Restoran", href: "/tr/restoran" },
|
||||
{ name: "Etkinlikler", href: "/tr/etkinlikler"},
|
||||
@@ -134,10 +134,10 @@ export default function Footer({ lang = "tr" }: { lang?: string }) {
|
||||
<Phone size={13} className="text-accent" />
|
||||
</div>
|
||||
<a
|
||||
href="tel:+905330816181"
|
||||
href="tel:+905445040310"
|
||||
className="text-white/50 hover:text-white transition-colors text-[13px]"
|
||||
>
|
||||
+90 533 081 6181
|
||||
+90 544 504 03 10
|
||||
</a>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
|
||||
@@ -8,7 +8,7 @@ import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Menu, X, Globe } from "lucide-react";
|
||||
|
||||
const navLinksEn = [
|
||||
// { name: "Rooms", href: "/en/odalar" },
|
||||
{ name: "Rooms", href: "/en/odalar" },
|
||||
{ name: "Activities", href: "/en/aktiviteler" },
|
||||
{ name: "Restaurant", href: "/en/restoran" },
|
||||
{ name: "Events", href: "/en/etkinlikler" },
|
||||
@@ -17,7 +17,7 @@ const navLinksEn = [
|
||||
];
|
||||
|
||||
const navLinksTr = [
|
||||
// { name: "Odalar", href: "/tr/odalar" },
|
||||
{ name: "Odalar", href: "/tr/odalar" },
|
||||
{ name: "Aktiviteler", href: "/tr/aktiviteler" },
|
||||
{ name: "Restoran", href: "/tr/restoran" },
|
||||
{ name: "Etkinlikler", href: "/tr/etkinlikler" },
|
||||
|
||||
@@ -6,7 +6,7 @@ import { motion } from "framer-motion";
|
||||
export default function WhatsAppButton() {
|
||||
return (
|
||||
<motion.a
|
||||
href="https://wa.me/905330816181"
|
||||
href="https://wa.me/905445040310"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="fixed bottom-6 right-6 z-50 flex items-center justify-center w-14 h-14 bg-green-500 text-white rounded-full shadow-lg hover:shadow-2xl hover:bg-green-600 transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import Image from "next/image";
|
||||
import ScrollReveal from "@/components/ScrollReveal";
|
||||
|
||||
interface CtaBandProps {
|
||||
lang: string;
|
||||
}
|
||||
|
||||
export default function CtaBand({ lang }: CtaBandProps) {
|
||||
return (
|
||||
<section className="relative py-28 overflow-hidden">
|
||||
<div
|
||||
className="absolute inset-0 animate-gradient-pan"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(135deg, #0D3D50 0%, #1A6B8A 35%, #0E1A24 60%, #1A4A60 100%)",
|
||||
}}
|
||||
/>
|
||||
<div className="absolute inset-0 opacity-[0.04]">
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1498623116890-37e912163d5d?q=80&w=2940&auto=format&fit=crop"
|
||||
alt=""
|
||||
fill
|
||||
sizes="100vw"
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 max-w-3xl mx-auto px-4 text-center">
|
||||
<ScrollReveal>
|
||||
<span className="inline-block text-accent text-xs tracking-[0.3em] uppercase font-semibold mb-6">
|
||||
{lang === "en" ? "Get Started" : "Hemen Başlayın"}
|
||||
</span>
|
||||
<h2 className="font-serif text-5xl md:text-6xl font-bold text-white leading-tight mb-6">
|
||||
{lang === "en" ? (
|
||||
<>Are you ready to plan<br />your dream vacation?</>
|
||||
) : (
|
||||
<>Hayalindeki tatili<br />planlamaya hazır mısın?</>
|
||||
)}
|
||||
</h2>
|
||||
<p className="text-white/50 mb-10 text-base leading-relaxed">
|
||||
{lang === "en"
|
||||
? "The wind is calling you. Book your spot now and become a part of this unique experience."
|
||||
: "Rüzgar seni çağırıyor. Hemen yerini ayırt ve bu eşsiz deneyimin bir parçası ol."}
|
||||
</p>
|
||||
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import {
|
||||
Star, Wind, Anchor, Utensils, BedDouble, Sun,
|
||||
Waves, Bike, Coffee, Music, MapPin, Camera, Heart, Compass,
|
||||
Fish, Mountain, Dumbbell, Leaf, Shield, Umbrella, Flame,
|
||||
type LucideIcon,
|
||||
} from "lucide-react";
|
||||
|
||||
const ICON_MAP: Record<string, LucideIcon> = {
|
||||
Wind, Anchor, Utensils, BedDouble, Sun, Star, Waves, Bike,
|
||||
Coffee, Music, MapPin, Camera, Heart, Compass, Fish, Mountain,
|
||||
Dumbbell, Leaf, Shield, Umbrella, Flame,
|
||||
};
|
||||
|
||||
interface Feature {
|
||||
icon: string | null;
|
||||
label: string;
|
||||
sub: string;
|
||||
}
|
||||
|
||||
interface FeaturesStripProps {
|
||||
features: Feature[];
|
||||
}
|
||||
|
||||
export default function FeaturesStrip({ features }: FeaturesStripProps) {
|
||||
return (
|
||||
<section className="bg-dark text-white py-8">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 divide-x divide-white/8">
|
||||
{features.map(({ icon, label, sub }, i) => {
|
||||
const IconComponent = ICON_MAP[icon as string] || Star;
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={`flex flex-col items-center justify-center gap-2 py-6 px-4 group ${i >= 2 ? "hidden md:flex" : ""}`}
|
||||
>
|
||||
<IconComponent className="w-5 h-5 text-accent group-hover:scale-110 transition-transform duration-300" />
|
||||
<span className="text-[13px] font-semibold text-center">{label}</span>
|
||||
<span className="text-[11px] text-white/40 text-center">{sub}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import Link from "next/link";
|
||||
import HeroVideo from "@/components/HeroVideo";
|
||||
|
||||
interface HeroSectionProps {
|
||||
heroData: {
|
||||
location: string;
|
||||
welcome: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
exploreActivities: string;
|
||||
scroll: string;
|
||||
};
|
||||
lang: string;
|
||||
}
|
||||
|
||||
export default function HeroSection({ heroData, lang }: HeroSectionProps) {
|
||||
return (
|
||||
<section className="relative h-screen w-full flex items-center justify-center overflow-hidden">
|
||||
<HeroVideo />
|
||||
|
||||
<div className="relative z-10 text-center px-4 max-w-5xl mx-auto">
|
||||
<div className="animate-fade-up delay-100">
|
||||
<span className="inline-block text-white/60 text-xs tracking-[0.35em] uppercase mb-8 font-light">
|
||||
{heroData.location}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center gap-4 md:gap-6 mb-6 animate-fade-up delay-200">
|
||||
<span
|
||||
className="text-xs md:text-sm tracking-[0.4em] font-bold uppercase whitespace-nowrap text-white/90"
|
||||
style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}
|
||||
>
|
||||
{heroData.welcome}
|
||||
</span>
|
||||
<h1 className="font-sans font-black text-white leading-none tracking-tighter text-[clamp(4rem,10vw,10rem)] uppercase">
|
||||
{heroData.title}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<p className="animate-fade-up delay-500 text-white/75 text-base md:text-xl mb-10 font-light italic tracking-wide">
|
||||
{heroData.subtitle}
|
||||
</p>
|
||||
|
||||
<div className="animate-fade-up delay-600 flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<Link
|
||||
href={`/${lang}/aktiviteler`}
|
||||
className="bg-white/10 backdrop-blur-sm border border-white/30 text-white px-10 py-4 rounded-full text-xs font-bold tracking-[0.15em] uppercase hover:bg-white/20 transition-colors w-full sm:w-auto text-center"
|
||||
>
|
||||
{heroData.exploreActivities}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scroll indicator */}
|
||||
<div className="absolute bottom-10 left-1/2 -translate-x-1/2 z-20 flex flex-col items-center gap-3">
|
||||
<span className="text-white/40 text-[10px] tracking-[0.3em] uppercase">{heroData.scroll}</span>
|
||||
<div className="w-px h-12 bg-gradient-to-b from-white/40 to-transparent animate-scroll-bounce" />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import { ArrowRight, Camera } from "lucide-react";
|
||||
import ScrollReveal from "@/components/ScrollReveal";
|
||||
|
||||
interface InstagramFeedProps {
|
||||
instagramPosts: any[];
|
||||
lang: string;
|
||||
}
|
||||
|
||||
export default function InstagramFeed({ instagramPosts, lang }: InstagramFeedProps) {
|
||||
if (!instagramPosts || instagramPosts.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="py-28 bg-background">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ScrollReveal className="text-center mb-16">
|
||||
<span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
|
||||
@kitebeachakyaka
|
||||
</span>
|
||||
<h2 className="font-serif text-5xl font-bold text-dark">Instagram</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal stagger className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
|
||||
{instagramPosts.map((post: any) => (
|
||||
<a
|
||||
key={post.id}
|
||||
href={`https://instagram.com/p/${post.code}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="group block relative rounded-2xl overflow-hidden aspect-[4/5] border border-sand"
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={post.image_versions2?.candidates[0]?.url}
|
||||
alt={post.caption?.text?.substring(0, 100) || "Instagram post"}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-dark/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col items-center justify-center text-white p-6 text-center">
|
||||
<Camera className="w-8 h-8 mb-3" />
|
||||
<p className="text-xs line-clamp-3">
|
||||
{post.caption?.text}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="text-center mt-12">
|
||||
<a
|
||||
href="https://instagram.com/kitebeachakyaka"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-flex items-center gap-2 border-2 border-dark text-dark text-xs px-8 py-3.5 rounded-full font-bold uppercase tracking-widest hover:bg-dark hover:text-white transition-colors"
|
||||
>
|
||||
{lang === "en" ? "Follow Us" : "Bizi Takip Edin"}
|
||||
<ArrowRight className="w-3.5 h-3.5" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { ArrowRight, Info } from "lucide-react";
|
||||
import ScrollReveal from "@/components/ScrollReveal";
|
||||
import BentoGallery from "@/components/BentoGallery";
|
||||
|
||||
export default function RoomsSection({ lang }: { lang: string }) {
|
||||
const isEn = lang === "en";
|
||||
|
||||
const galleryImages = [
|
||||
"https://media.ayris.tech/t/kitebeachakyaka/rooms/WhatsApp%20Image%202026-07-13%20at%2017.02.15.jpeg",
|
||||
"https://media.ayris.tech/t/kitebeachakyaka/rooms/WhatsApp%20Image%202026-07-13%20at%2017.02.18.jpeg",
|
||||
"https://media.ayris.tech/t/kitebeachakyaka/rooms/WhatsApp%20Image%202026-07-13%20at%2017.02.19.jpeg",
|
||||
"https://media.ayris.tech/t/kitebeachakyaka/rooms/WhatsApp%20Image%202026-07-13%20at%2017.02.20%20(1).jpeg",
|
||||
"https://media.ayris.tech/t/kitebeachakyaka/rooms/WhatsApp%20Image%202026-07-13%20at%2017.02.20.jpeg",
|
||||
"https://media.ayris.tech/t/kitebeachakyaka/rooms/WhatsApp%20Image%202026-07-13%20at%2017.02.21.jpeg",
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="py-28 bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ScrollReveal className="text-center mb-16">
|
||||
<span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
|
||||
{isEn ? "Accommodation" : "Konaklama"}
|
||||
</span>
|
||||
<h2 className="font-serif text-4xl md:text-5xl font-bold text-dark mb-6">Kite Beach Akyaka Otel</h2>
|
||||
<p className="text-muted max-w-3xl mx-auto text-sm leading-relaxed mb-8">
|
||||
{isEn
|
||||
? "We are at that special point in Akyaka's most beautiful corner, where the tranquility of the river embraces the endless blue of the sea. The silence of the riverbank that greets you as soon as you open your door will be your most peaceful invitation to start the day. You can balance your soul with a yoga session against the river view in the heart of nature, and then push the adrenaline to the top with Kite Surfing in Akyaka's famous winds. Leave the tiredness of the day behind by tasting the delicacies from our restaurant's kitchen and watching the enchanting sunset of the Aegean. Here, time flows only at the pace you desire."
|
||||
: "Akyaka’nın en güzel köşesinde, nehrin dinginliği ile denizin sonsuz maviliğinin kucaklaştığı o özel noktadayız. Kapınızı açtığınız anda sizi karşılayan nehir kıyısının sessizliği, güne başlamak için en huzurlu davetiniz olacak. Doğanın kalbinde, nehir manzarasına karşı yaptığınız bir yoga seansıyla ruhunuzu dengelerken; hemen ardından Akyaka’nın meşhur rüzgarlarında Kite Surf ile adrenalini zirveye taşıyabilirsiniz. Günün yorgunluğunu ise, restoranımızın mutfağından çıkan lezzetlerle, Ege’nin kendine has o büyüleyici gün batımını izleyerek geride bırakın. Burada zaman, sadece sizin istediğiniz hızda akıyor."}
|
||||
</p>
|
||||
|
||||
<div className="inline-flex items-center gap-3 bg-primary/10 text-primary border border-primary/20 px-6 py-3 rounded-2xl shadow-sm">
|
||||
<Info size={18} />
|
||||
<span className="font-bold text-[15px] tracking-wide">
|
||||
{isEn ? "Price: 8000 TL / Night (Breakfast Included)" : "Fiyat Bilgisi: 8000 TL / Gecelik (Kahvaltı Dahil)"}
|
||||
</span>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal>
|
||||
<BentoGallery images={galleryImages} />
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="text-center mt-12">
|
||||
<Link
|
||||
href={isEn ? "/en/odalar" : "/tr/odalar"}
|
||||
className="inline-flex items-center gap-2 border-2 border-dark text-dark text-xs px-8 py-3.5 rounded-full font-bold uppercase tracking-widest hover:bg-dark hover:text-white transition-colors"
|
||||
>
|
||||
{isEn ? "View Details" : "Detayları Gör"}
|
||||
<ArrowRight className="w-3.5 h-3.5" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import { Star } from "lucide-react";
|
||||
import ScrollReveal from "@/components/ScrollReveal";
|
||||
|
||||
interface Testimonial {
|
||||
text: string;
|
||||
name: string;
|
||||
from: string;
|
||||
}
|
||||
|
||||
interface TestimonialsSectionProps {
|
||||
testimonials: Testimonial[];
|
||||
lang: string;
|
||||
}
|
||||
|
||||
export default function TestimonialsSection({ testimonials, lang }: TestimonialsSectionProps) {
|
||||
return (
|
||||
<section className="py-28 bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ScrollReveal className="text-center mb-16">
|
||||
<span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
|
||||
{lang === "en" ? "Guest Reviews" : "Misafir Yorumları"}
|
||||
</span>
|
||||
<h2 className="font-serif text-5xl font-bold text-dark">
|
||||
{lang === "en" ? "Experiences" : "Deneyimler"}
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal stagger className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{testimonials.map((t, i) => (
|
||||
<div key={i} className="relative bg-sand rounded-2xl p-8 border border-sand overflow-hidden">
|
||||
{/* Large decorative quote */}
|
||||
<span className="absolute top-3 right-5 font-serif text-[8rem] leading-none text-primary/8 select-none">
|
||||
"
|
||||
</span>
|
||||
{/* Stars */}
|
||||
<div className="flex gap-1 mb-5 relative z-10">
|
||||
{Array.from({ length: 5 }).map((_, j) => (
|
||||
<Star key={j} className="w-3.5 h-3.5 text-accent" fill="#E87040" />
|
||||
))}
|
||||
</div>
|
||||
<p className="text-foreground/75 text-[13px] leading-relaxed mb-6 relative z-10 italic">
|
||||
"{t.text}"
|
||||
</p>
|
||||
<div className="flex items-center gap-3 relative z-10">
|
||||
<div className="w-9 h-9 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<span className="text-primary font-bold text-sm">{t.name[0]}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="block font-semibold text-dark text-sm">{t.name}</span>
|
||||
<span className="text-muted text-xs">{t.from}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user