891 lines
44 KiB
TypeScript
891 lines
44 KiB
TypeScript
"use client";
|
||
|
||
import { motion, AnimatePresence } from "framer-motion";
|
||
import { useState, useEffect } from "react";
|
||
import type { DemoData } from "@/data/demos";
|
||
|
||
const fadeUp = {
|
||
hidden: { opacity: 0, y: 35 },
|
||
show: { opacity: 1, y: 0, transition: { duration: 0.75, ease: [0.25, 0.46, 0.45, 0.94] as [number, number, number, number] } },
|
||
};
|
||
|
||
const stagger = {
|
||
hidden: {},
|
||
show: { transition: { staggerChildren: 0.1 } },
|
||
};
|
||
|
||
const translations = {
|
||
tr: {
|
||
navMembership: "Üyelik Programı",
|
||
navServices: "Hizmetlerimiz",
|
||
navWorks: "Portföyümüz",
|
||
navReviews: "Hasta Hikayeleri",
|
||
navBooking: "Randevu Al",
|
||
badge: "SEAMLESS DENTAL CLINIC",
|
||
heroTitlePart1: "Kusursuz",
|
||
heroTitlePart2: "Ağız ve Diş Sağlığı",
|
||
heroTitlePart3: "Deneyimi",
|
||
heroDesc: "Sağlıklı ve özgüvenli bir gülümseme için pürüzsüz ve stressiz bir diş hekimliği deneyimi. Odentries modern klinik koordinatları ile dijital sağlık lüksünü yaşayın.",
|
||
bookNow: "Randevu Al",
|
||
contactUs: "İletişim",
|
||
statTitle1: "Özel Üye Tasarrufu",
|
||
statDesc1: "Ağız Muayeneleri, Temizlik ve Röntgen dahil olmak üzere Diş Prosedürlerinde %60 - %80 arasında tasarruf sağlayın.",
|
||
statTitle2: "Gelişmiş Üye Avantajları",
|
||
statDesc2: "Kozmetik, Restoratif ve Uzmanlık Diş Tedavileri dahil olmak üzere Diğer Tüm Diş Hizmetlerinde %40 Tasarruf Sağlayın.",
|
||
membershipHeader: "Aileniz İçin Erişilebilir Diş Hekimliği",
|
||
membershipDesc: "Sevdikleriniz için en iyi diş sağlığı planlarını keşfedin. Muayene, temizlik ve özel estetik tedavilerde benzersiz fiyat avantajlarından yararlanın.",
|
||
joinedText: "Bu ay 1.200'den fazla üye katıldı",
|
||
joinBtn: "Üye Olun",
|
||
servicesHeader: "Ayrıcalıklı Klinik Hizmetleri",
|
||
worksHeader: "Sağlıklı Gülüşler Burada Başlar",
|
||
worksDesc: "Daha parlak, daha sağlıklı bir gülümseme ve kalıcı özgüven için uzman diş bakımı ve profesyonel temizlik uygulamaları.",
|
||
reviewsHeader: "Hasta Görüşleri",
|
||
bookingHeader: "Online Randevu Oluşturun",
|
||
bookingDesc: "Hayalinizdeki sağlıklı gülüşe kavuşmak için formu doldurun, sizi arayalım.",
|
||
fieldsName: "Ad Soyad",
|
||
fieldsPhone: "Telefon Numarası",
|
||
fieldsEmail: "E-Posta Adresi",
|
||
fieldsService: "Hizmet Türü",
|
||
fieldsDate: "Tercih Edilen Tarih",
|
||
fieldsNotes: "Şikayetiniz / Notunuz",
|
||
fieldsNotesPlaceholder: "Belirtmek istediğiniz özel detaylar...",
|
||
dispatchForm: "RANDEVU TALEP ET",
|
||
footerDesc: "Ferah ve hijyenik modern klinik ortamında, ağrısız ve en son teknoloji tedavi yöntemleri ile size özel ağız sağlığı çözümleri.",
|
||
privacyRegs: "Gizlilik Sözleşmesi",
|
||
termsStay: "Kullanım Şartları",
|
||
dismiss: "KAPAT",
|
||
contactTitle: "Hızlı İletişim",
|
||
contactDesc: "İletişim bilgilerinizi bırakın, en kısa sürede sizi arayalım.",
|
||
submit: "Gönder",
|
||
viewAllWorks: "PORTFÖYÜ KEŞFET • PORTFÖYÜ KEŞFET • ",
|
||
preventTitle: "Diş Çürüklerini Önleme",
|
||
preventDesc: "Kapsamlı diş muayeneleri ve koruyucu hekimlik uygulamaları ile dişlerinizi koruyoruz.",
|
||
sparkleTitle: "Işıldayan Temizlik",
|
||
sparkleDesc: "Profesyonel temizleme ve beyazlatma teknikleriyle parıldayan sağlıklı gülüşler yaratıyoruz.",
|
||
detectionTitle: "Erken Teşhis İmkanı",
|
||
detectionDesc: "İleri teknoloji röntgen ve teşhis araçlarıyla sorunları büyümeden yakalıyoruz.",
|
||
},
|
||
en: {
|
||
navMembership: "Membership Plan",
|
||
navServices: "Our Services",
|
||
navWorks: "Our Works",
|
||
navReviews: "Patient Stories",
|
||
navBooking: "Book Now",
|
||
badge: "SEAMLESS DENTAL CLINIC",
|
||
heroTitlePart1: "Seamless",
|
||
heroTitlePart2: "Dental Care",
|
||
heroTitlePart3: "Experience",
|
||
heroDesc: "A smooth and hassle-free dental care experience for a healthy and confident smile. Indulge in digital health luxury structured by Odentries clinic.",
|
||
bookNow: "Book Now",
|
||
contactUs: "Contact",
|
||
statTitle1: "Exclusive Member Savings",
|
||
statDesc1: "Save 60% - 80% on Dental Procedures, including Oral Exams, Cleanings, and X-Rays.",
|
||
statTitle2: "Enhanced Member Benefits",
|
||
statDesc2: "Save 40% on All Other Dental Services, including Cosmetic, Restorative, and Specialty Dental Procedures.",
|
||
membershipHeader: "Affordable Dental Care for Your Family",
|
||
membershipDesc: "Unlock optimal dental wellness for your loved ones. Get massive savings on check-ups, cleaning, and specialized cosmetic treatments.",
|
||
joinedText: "Joined by 1,200+ members this month",
|
||
joinBtn: "Join Membership",
|
||
servicesHeader: "Exclusive Clinic Services",
|
||
worksHeader: "A Healthy Smile Starts Here",
|
||
worksDesc: "Expert Dental Care and Cleaning Procedures for a Brighter, Healthier Smile and Lasting Confidence.",
|
||
reviewsHeader: "Patient Testimonials",
|
||
bookingHeader: "Online Appointment",
|
||
bookingDesc: "Fill out the appointment details to secure your priority consultation slot with our experts.",
|
||
fieldsName: "Full Name",
|
||
fieldsPhone: "Phone Number",
|
||
fieldsEmail: "Email Address",
|
||
fieldsService: "Service Category",
|
||
fieldsDate: "Preferred Date",
|
||
fieldsNotes: "Notes / Symptoms",
|
||
fieldsNotesPlaceholder: "Any specific dental notes or requests...",
|
||
dispatchForm: "REQUEST APPOINTMENT",
|
||
footerDesc: "Custom dental care solutions designed in an ultra-clean, welcoming clinic layout using advanced high-tech treatment instruments.",
|
||
privacyRegs: "Privacy Policy",
|
||
termsStay: "Terms of Service",
|
||
dismiss: "DISMISS",
|
||
contactTitle: "Quick Consultation",
|
||
contactDesc: "Leave your contact details and our medical coordinator will call you back within 15 minutes.",
|
||
submit: "Submit",
|
||
viewAllWorks: "VIEW ALL WORKS • VIEW ALL WORKS • ",
|
||
preventTitle: "Prevent Cavities & Disease",
|
||
preventDesc: "State-of-the-art checkups and preventative dentistry to protect your raw teeth structure.",
|
||
sparkleTitle: "Keep Your Teeth Sparkling Clean",
|
||
sparkleDesc: "Professional scale cleaning and premium laser whitening for an immediate aesthetic update.",
|
||
detectionTitle: "Early Detection of Dental Issues",
|
||
detectionDesc: "Advanced high-resolution diagnostic tools to intercept hidden micro-cavities before they expand.",
|
||
}
|
||
};
|
||
|
||
export default function DentalTemplate({ data }: { data: DemoData }) {
|
||
const { firma, istatistikler = [], hizmetler = [], projeler = [], yorumlar = [] } = data;
|
||
const [showBookingModal, setShowBookingModal] = useState(false);
|
||
const [activeYorum, setActiveYorum] = useState(0);
|
||
const [lang, setLang] = useState<"tr" | "en">("tr");
|
||
const [preloader, setPreloader] = useState(true);
|
||
|
||
const t = translations[lang];
|
||
|
||
// Lenis Smooth Scroll Integration
|
||
useEffect(() => {
|
||
let lenis: any;
|
||
import("@studio-freight/lenis").then(({ default: Lenis }) => {
|
||
lenis = new Lenis({ duration: 1.2, easing: (x: number) => Math.min(1, 1.001 - Math.pow(2, -10 * x)) });
|
||
function raf(time: number) { lenis.raf(time); requestAnimationFrame(raf); }
|
||
requestAnimationFrame(raf);
|
||
});
|
||
return () => lenis?.destroy();
|
||
}, []);
|
||
|
||
// Preloader Curtain Timer
|
||
useEffect(() => {
|
||
const timer = setTimeout(() => {
|
||
setPreloader(false);
|
||
}, 1500);
|
||
return () => clearTimeout(timer);
|
||
}, []);
|
||
|
||
// Map service icons without generic emojis
|
||
const getServiceIconSvg = (ikon: string) => {
|
||
switch (ikon) {
|
||
case "🦷":
|
||
return (
|
||
<svg className="w-6 h-6 stroke-[#1E2E38] fill-none" viewBox="0 0 24 24" strokeWidth="2">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9s2.015-9 4.5-9" />
|
||
</svg>
|
||
);
|
||
case "✨":
|
||
return (
|
||
<svg className="w-6 h-6 stroke-[#1E2E38] fill-none" viewBox="0 0 24 24" strokeWidth="2">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904L9 21l-1.813-5.096L2.1 14.1 7.187 13.2 9 8.1l1.813 5.1 5.087.9-5.087.904zM19.071 4.929l-.707 1.414-.707-1.414-.707-.707 1.414-.707.707 1.414.707-1.414.707.707-1.414.707zm-12.02 0l-.707 1.414-.707-1.414-.707-.707 1.414-.707.707 1.414.707-1.414.707.707-1.414.707z" />
|
||
</svg>
|
||
);
|
||
default:
|
||
return (
|
||
<svg className="w-6 h-6 stroke-[#1E2E38] fill-none" viewBox="0 0 24 24" strokeWidth="2">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||
</svg>
|
||
);
|
||
}
|
||
};
|
||
|
||
const getLocalizedServiceText = (baslik: string) => {
|
||
if (baslik.includes("Prevent")) return { title: t.preventTitle, desc: t.preventDesc };
|
||
if (baslik.includes("Sparkling")) return { title: t.sparkleTitle, desc: t.sparkleDesc };
|
||
return { title: t.detectionTitle, desc: t.detectionDesc };
|
||
};
|
||
|
||
const css = `
|
||
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700;800;900&family=Sora:wght@300;400;500;600;700;800&display=swap');
|
||
|
||
:root {
|
||
--bg-ivory: #FAF7F2;
|
||
--bg-mint: #EBF5F0;
|
||
--text-slate: #1E2E38;
|
||
--text-dark: #121C22;
|
||
--color-gold: #D4AF37;
|
||
}
|
||
|
||
.font-elegant {
|
||
font-family: 'Sora', sans-serif;
|
||
}
|
||
|
||
.font-sans-clean {
|
||
font-family: 'DM Sans', sans-serif;
|
||
}
|
||
|
||
.spinning-text {
|
||
animation: spin 24s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
.hero-title-clamp {
|
||
font-size: clamp(38px, 6vw, 85px);
|
||
letter-spacing: -0.02em;
|
||
line-height: 0.95;
|
||
}
|
||
`;
|
||
|
||
return (
|
||
<>
|
||
<style>{css}</style>
|
||
|
||
{/* ── IMZA AN: CURTAIN REVEAL PRELOADER ── */}
|
||
<AnimatePresence>
|
||
{preloader && (
|
||
<motion.div
|
||
className="fixed inset-0 z-50 bg-[#1E2E38] flex flex-col items-center justify-center p-6"
|
||
exit={{
|
||
clipPath: "polygon(0 0, 100% 0, 100% 0, 0 0)",
|
||
transition: { duration: 0.85, ease: [0.16, 1, 0.3, 1] }
|
||
}}
|
||
>
|
||
<div className="max-w-md text-center space-y-6">
|
||
<motion.span
|
||
className="text-[9px] font-elegant tracking-[4px] uppercase text-[#EBF5F0] block"
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5 }}
|
||
>
|
||
ODENTRIES CLINIC
|
||
</motion.span>
|
||
<div className="h-[1px] w-48 bg-white/10 mx-auto relative overflow-hidden">
|
||
<motion.div
|
||
className="absolute inset-y-0 left-0 bg-[#EBF5F0]"
|
||
initial={{ width: "0%" }}
|
||
animate={{ width: "100%" }}
|
||
transition={{ duration: 1.2, ease: "easeInOut" }}
|
||
/>
|
||
</div>
|
||
<motion.h2
|
||
className="font-elegant text-white/50 text-xs tracking-wider uppercase"
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ delay: 0.4, duration: 0.5 }}
|
||
>
|
||
interactive prototype
|
||
</motion.h2>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
<div className="bg-[#FAF7F2] text-[#1E2E38] min-h-screen font-sans-clean selection:bg-[#1E2E38] selection:text-white overflow-hidden relative pb-20">
|
||
|
||
{/* Floating cross graphics (+) from reference design */}
|
||
<div className="absolute inset-0 pointer-events-none z-10">
|
||
<div className="absolute top-[25%] left-[8%] text-[#1E2E38]/20 text-3xl font-light select-none">+</div>
|
||
<div className="absolute top-[35%] left-[30%] text-[#1E2E38]/30 text-lg font-light select-none">+</div>
|
||
<div className="absolute bottom-[20%] left-[28%] text-[#1E2E38]/20 text-3xl font-light select-none">+</div>
|
||
<div className="absolute top-[20%] right-[32%] text-[#1E2E38]/20 text-2xl font-light select-none">+</div>
|
||
<div className="absolute bottom-[35%] right-[5%] text-[#1E2E38]/30 text-3xl font-light select-none">+</div>
|
||
</div>
|
||
|
||
{/* ── FLOATING CONCEPT BANNER ── */}
|
||
<div className="fixed bottom-4 left-4 z-40 bg-[#1E2E38]/90 backdrop-blur-md border border-white/10 px-4 py-2.5 rounded-xl shadow-2xl flex items-center gap-2.5 max-w-sm pointer-events-none select-none">
|
||
<div className="w-1.5 h-1.5 rounded-full bg-[#EBF5F0] animate-pulse" />
|
||
<span className="text-[9px] font-elegant uppercase tracking-[1.5px] text-white/90">
|
||
{lang === "tr" ? "Bu web sitesi Ayris Tech tarafından hazırlanmış bir konsept çalışmasıdır." : "This website is a premium concept prototype designed by Ayris Tech."}
|
||
</span>
|
||
</div>
|
||
|
||
{/* ── PREMIUM HEADER ── */}
|
||
<motion.header
|
||
className="fixed top-4 left-4 right-4 z-50 px-4"
|
||
initial={{ y: -80, opacity: 0 }}
|
||
animate={{ y: 0, opacity: 1 }}
|
||
transition={{ duration: 0.85, ease: [0.16, 1, 0.3, 1] }}
|
||
>
|
||
<div className="mx-auto max-w-7xl h-20 flex items-center justify-between px-8 bg-white/70 backdrop-blur-xl border border-white/40 rounded-2xl shadow-[0_10px_30px_rgba(30,46,56,0.03)]">
|
||
{/* Logo */}
|
||
<a href="#" className="flex items-center gap-2.5 group">
|
||
<span className="text-lg font-black tracking-tight text-[#1E2E38] font-elegant flex items-center gap-2 uppercase">
|
||
<svg className="w-5 h-5 text-[#1E2E38]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
|
||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" />
|
||
<path d="M12 6v12M6 12h12" />
|
||
</svg>
|
||
{firma.adi}
|
||
</span>
|
||
</a>
|
||
|
||
{/* Links */}
|
||
<nav className="hidden lg:flex items-center gap-8">
|
||
{[
|
||
{ label: t.navMembership, href: "#uyelik" },
|
||
{ label: t.navServices, href: "#hizmetler" },
|
||
{ label: t.navWorks, href: "#works" },
|
||
{ label: t.navReviews, href: "#yorumlar" }
|
||
].map(item => (
|
||
<a
|
||
key={item.label}
|
||
href={item.href}
|
||
className="text-[10px] font-black tracking-[2px] uppercase text-[#1E2E38]/70 hover:text-[#1E2E38] transition-colors relative py-1 cursor-pointer group"
|
||
>
|
||
{item.label}
|
||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#1E2E38] transition-all group-hover:w-full" />
|
||
</a>
|
||
))}
|
||
</nav>
|
||
|
||
{/* Language Selector + Action Button */}
|
||
<div className="flex items-center gap-4">
|
||
{/* Language Switcher */}
|
||
<div className="flex items-center gap-1 bg-[#1E2E38]/5 border border-[#1E2E38]/10 rounded-xl p-1 shrink-0">
|
||
<button
|
||
onClick={() => setLang("tr")}
|
||
className={`text-[9px] font-elegant px-2 py-1.5 rounded-lg transition-all cursor-pointer ${
|
||
lang === "tr" ? "bg-white text-slate-900 shadow-sm" : "text-[#1E2E38]/60 hover:text-[#1E2E38]"
|
||
}`}
|
||
>
|
||
TR
|
||
</button>
|
||
<button
|
||
onClick={() => setLang("en")}
|
||
className={`text-[9px] font-elegant px-2 py-1.5 rounded-lg transition-all cursor-pointer ${
|
||
lang === "en" ? "bg-white text-slate-900 shadow-sm" : "text-[#1E2E38]/60 hover:text-[#1E2E38]"
|
||
}`}
|
||
>
|
||
EN
|
||
</button>
|
||
</div>
|
||
|
||
<motion.button
|
||
onClick={() => setShowBookingModal(true)}
|
||
className="text-[10px] font-black tracking-[2.5px] uppercase text-[#FAF7F2] bg-[#1E2E38] hover:bg-[#121C22] px-6 py-3.5 rounded-xl transition-all cursor-pointer shadow-[0_4px_12px_rgba(30,46,56,0.15)] hidden sm:block"
|
||
whileHover={{ scale: 1.02 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
>
|
||
{t.bookNow}
|
||
</motion.button>
|
||
</div>
|
||
</div>
|
||
</motion.header>
|
||
|
||
{/* ── HERO SECTION ── */}
|
||
<section className="relative min-h-screen flex items-center overflow-hidden pt-32 pb-20 px-6">
|
||
<div className="max-w-7xl mx-auto w-full">
|
||
<div className="grid lg:grid-cols-12 gap-16 items-center">
|
||
|
||
{/* Left Col - Text Content */}
|
||
<motion.div
|
||
className="lg:col-span-6 z-20"
|
||
variants={stagger}
|
||
initial="hidden"
|
||
animate="show"
|
||
>
|
||
<motion.div
|
||
variants={fadeUp}
|
||
className="inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-[#1E2E38]/60 mb-6 bg-[#1E2E38]/5 border border-[#1E2E38]/10 px-4 py-2 rounded-full"
|
||
>
|
||
<span className="w-1.5 h-1.5 rounded-full bg-[#1E2E38] animate-pulse" />
|
||
{t.badge}
|
||
</motion.div>
|
||
|
||
<motion.h1
|
||
variants={fadeUp}
|
||
className="font-elegant font-black text-[#1E2E38] mb-8 hero-title-clamp uppercase"
|
||
>
|
||
{t.heroTitlePart1}
|
||
<br />
|
||
<span className="italic font-light opacity-90 text-slate-600 lowercase">{t.heroTitlePart2}</span>
|
||
<br />
|
||
{t.heroTitlePart3}
|
||
</motion.h1>
|
||
|
||
<motion.p
|
||
variants={fadeUp}
|
||
className="text-[#1E2E38]/70 text-xs lg:text-sm leading-relaxed max-w-md mb-10 font-semibold"
|
||
>
|
||
{t.heroDesc}
|
||
</motion.p>
|
||
|
||
<motion.div variants={fadeUp}>
|
||
<motion.button
|
||
onClick={() => setShowBookingModal(true)}
|
||
className="inline-flex items-center gap-3 px-8 py-4.5 rounded-xl bg-[#1E2E38] hover:bg-[#121C22] text-[#FAF7F2] font-black text-[10px] tracking-[2px] uppercase transition-all shadow-[0_5px_15px_rgba(30,46,56,0.1)] cursor-pointer"
|
||
whileHover={{ scale: 1.02 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
>
|
||
{t.bookNow} <span className="text-[10px]">→</span>
|
||
</motion.button>
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
{/* Right Col - Cropped Smiling Portrait Overlay */}
|
||
<div className="lg:col-span-6 relative flex justify-center lg:justify-end">
|
||
<motion.div
|
||
className="relative w-full max-w-md lg:max-w-lg h-[460px] lg:h-[530px] rounded-3xl overflow-hidden shadow-2xl border border-white/60"
|
||
initial={{ opacity: 0, scale: 0.95 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.8, ease: "easeOut" }}
|
||
>
|
||
{/* Background soft lighting */}
|
||
<div className="absolute inset-0 bg-gradient-to-t from-[#FAF7F2] via-transparent to-transparent z-10 pointer-events-none" />
|
||
|
||
{/* Main Generated High-Fidelity Smiling Image */}
|
||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||
<img
|
||
src="/dental_hero.png"
|
||
alt="Odentries Smiling Model"
|
||
className="w-full h-full object-cover object-center scale-102 hover:scale-105 transition-transform duration-[4000ms]"
|
||
/>
|
||
</motion.div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── SECTION 001: AFFORDABLE CARE & BENTO CARDS ── */}
|
||
<section id="uyelik" className="py-32 bg-[#FAF7F2] px-6 border-t border-[#1E2E38]/5">
|
||
<div className="max-w-7xl mx-auto">
|
||
|
||
<div className="grid lg:grid-cols-12 gap-16 items-start">
|
||
|
||
{/* Left Content */}
|
||
<motion.div
|
||
className="lg:col-span-5"
|
||
initial="hidden"
|
||
whileInView="show"
|
||
viewport={{ once: true }}
|
||
variants={stagger}
|
||
>
|
||
<motion.span
|
||
variants={fadeUp}
|
||
className="inline-block text-[10px] font-black uppercase tracking-widest text-[#1E2E38]/50 mb-4"
|
||
>
|
||
001 - Join Membership
|
||
</motion.span>
|
||
<motion.h2
|
||
variants={fadeUp}
|
||
className="text-4xl lg:text-5xl font-elegant font-black text-[#1E2E38] leading-tight mb-6 uppercase"
|
||
>
|
||
{t.membershipHeader}
|
||
</motion.h2>
|
||
<motion.p
|
||
variants={fadeUp}
|
||
className="text-[#1E2E38]/70 text-xs lg:text-sm leading-relaxed mb-10 font-semibold"
|
||
>
|
||
{t.membershipDesc}
|
||
</motion.p>
|
||
|
||
{/* Patient Pile from Reference Design */}
|
||
<motion.div
|
||
variants={fadeUp}
|
||
className="flex items-center gap-6 mb-8 font-semibold"
|
||
>
|
||
<div className="flex -space-x-3 select-none">
|
||
{["👨⚕️", "👩⚕️", "🧑⚕️", "✨"].map((emoji, i) => (
|
||
<div
|
||
key={i}
|
||
className="w-9 h-9 rounded-full bg-white border-2 border-[#FAF7F2] flex items-center justify-center text-sm shadow-sm"
|
||
>
|
||
{emoji}
|
||
</div>
|
||
))}
|
||
<div className="w-9 h-9 rounded-full bg-[#1E2E38] border-2 border-[#FAF7F2] flex items-center justify-center text-[10px] text-[#FAF7F2] font-black">
|
||
+
|
||
</div>
|
||
</div>
|
||
<div className="text-xs text-[#1E2E38]/80">
|
||
{t.joinedText}
|
||
</div>
|
||
</motion.div>
|
||
|
||
<motion.button
|
||
onClick={() => setShowBookingModal(true)}
|
||
className="px-8 py-4 rounded-xl bg-[#1E2E38] hover:bg-[#121C22] text-[#FAF7F2] font-black text-[10px] tracking-[2.5px] uppercase transition-colors"
|
||
whileHover={{ scale: 1.02 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
>
|
||
{t.joinBtn} <span className="text-[9px]">→</span>
|
||
</motion.button>
|
||
</motion.div>
|
||
|
||
{/* Right Bento Cards */}
|
||
<div className="lg:col-span-7 grid md:grid-cols-2 gap-6 w-full">
|
||
|
||
{/* Card 1: 80% Savings */}
|
||
<motion.div
|
||
className="bg-[#EBF5F0] rounded-3xl p-8 border border-white flex flex-col justify-between h-[320px] relative overflow-hidden group shadow-sm"
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6 }}
|
||
whileHover={{ y: -6 }}
|
||
>
|
||
<div className="flex justify-between items-start">
|
||
<span className="text-5xl font-black text-[#1E2E38] font-elegant group-hover:scale-102 transition-transform">
|
||
{istatistikler[0]?.deger || "80%"}
|
||
</span>
|
||
<span className="text-2xl font-light text-[#1E2E38]/30 shrink-0 select-none">+</span>
|
||
</div>
|
||
<div>
|
||
<h4 className="text-xs font-black text-[#1E2E38] mb-2 uppercase tracking-wide">{t.statTitle1}</h4>
|
||
<p className="text-[#1E2E38]/60 text-[11px] leading-relaxed font-semibold">
|
||
{t.statDesc1}
|
||
</p>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Card 2: 40% Benefits */}
|
||
<motion.div
|
||
className="bg-[#1E2E38] rounded-3xl p-8 flex flex-col justify-between h-[320px] relative overflow-hidden group shadow-xl"
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6, delay: 0.15 }}
|
||
whileHover={{ y: -6 }}
|
||
>
|
||
<div className="flex justify-between items-start">
|
||
<span className="text-5xl font-black text-[#FAF7F2] font-elegant group-hover:scale-102 transition-transform">
|
||
{istatistikler[1]?.deger || "40%"}
|
||
</span>
|
||
<span className="text-2xl font-light text-[#FAF7F2]/30 shrink-0 select-none">+</span>
|
||
</div>
|
||
<div>
|
||
<h4 className="text-xs font-black text-[#FAF7F2] mb-2 uppercase tracking-wide">{t.statTitle2}</h4>
|
||
<p className="text-[#FAF7F2]/60 text-[11px] leading-relaxed font-semibold">
|
||
{t.statDesc2}
|
||
</p>
|
||
</div>
|
||
</motion.div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── CORE SERVICES CARD ROW ── */}
|
||
<section id="hizmetler" className="py-24 bg-white px-6">
|
||
<div className="max-w-7xl mx-auto">
|
||
|
||
<div className="text-center max-w-xl mx-auto mb-20">
|
||
<span className="text-[#1E2E38]/50 font-black text-[10px] uppercase tracking-widest block mb-2 font-elegant">{t.navServices}</span>
|
||
<h2 className="font-elegant text-3xl lg:text-4xl font-black uppercase text-[#1E2E38] tracking-tight">
|
||
{t.servicesHeader}
|
||
</h2>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-3 gap-6">
|
||
{hizmetler.map((h, i) => {
|
||
const item = getLocalizedServiceText(h.baslik);
|
||
return (
|
||
<motion.div
|
||
key={i}
|
||
className="bg-[#FAF7F2]/50 hover:bg-[#FAF7F2] rounded-3xl p-8 border border-gray-100 hover:border-[#1E2E38]/10 transition-all duration-300 flex flex-col justify-between h-80 group cursor-default"
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.5, delay: i * 0.1 }}
|
||
whileHover={{ y: -4 }}
|
||
>
|
||
<div>
|
||
<div className="w-12 h-12 rounded-2xl bg-white border border-[#1E2E38]/5 flex items-center justify-center mb-6 transition-transform group-hover:scale-105 shadow-sm">
|
||
{getServiceIconSvg(h.ikon)}
|
||
</div>
|
||
<h3 className="font-elegant font-bold text-[#1E2E38] text-base mb-3 leading-snug">
|
||
{item.title}
|
||
</h3>
|
||
<p className="text-gray-400 text-xs leading-relaxed font-semibold">
|
||
{item.desc}
|
||
</p>
|
||
</div>
|
||
|
||
<button
|
||
onClick={() => setShowBookingModal(true)}
|
||
className="text-[#1E2E38] font-black text-[9px] tracking-[2.5px] uppercase flex items-center gap-1 cursor-pointer hover:text-opacity-80 transition-colors pt-4 border-t border-gray-100"
|
||
>
|
||
{lang === "tr" ? "DAHA FAZLA BİLGİ →" : "LEARN MORE →"}
|
||
</button>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── SECTION 002: OUR WORKS / PORTFOLIO ── */}
|
||
<section id="works" className="py-32 bg-[#EBF5F0] px-6 border-t border-[#1E2E38]/5">
|
||
<div className="max-w-7xl mx-auto">
|
||
|
||
{/* Header */}
|
||
<div className="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6">
|
||
<motion.div
|
||
initial="hidden"
|
||
whileInView="show"
|
||
viewport={{ once: true }}
|
||
variants={stagger}
|
||
>
|
||
<motion.span
|
||
variants={fadeUp}
|
||
className="inline-block text-[10px] font-black uppercase tracking-widest text-[#1E2E38]/50 mb-4"
|
||
>
|
||
002 - Our Works
|
||
</motion.span>
|
||
<motion.h2
|
||
variants={fadeUp}
|
||
className="text-4xl lg:text-5xl font-elegant font-black text-[#1E2E38] leading-tight uppercase"
|
||
>
|
||
{t.worksHeader}
|
||
</motion.h2>
|
||
</motion.div>
|
||
|
||
{/* Spinning Circle badge and text details */}
|
||
<motion.div
|
||
className="flex items-center gap-6 max-w-sm font-semibold"
|
||
initial={{ opacity: 0, x: 20 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.7 }}
|
||
>
|
||
{/* Spinning Badge */}
|
||
<div className="relative w-20 h-20 shrink-0 flex items-center justify-center select-none">
|
||
<svg className="absolute w-full h-full spinning-text" viewBox="0 0 100 100">
|
||
<path id="circlePath" d="M 50, 50 m -37, 0 a 37,37 0 1,1 74,0 a 37,37 0 1,1 -74,0" fill="none" />
|
||
<text className="font-elegant font-black text-[8px] fill-[#1E2E38] tracking-[1px]">
|
||
<textPath xlinkHref="#circlePath">
|
||
{t.viewAllWorks}
|
||
</textPath>
|
||
</text>
|
||
</svg>
|
||
<span className="text-base text-[#1E2E38] font-bold">↗</span>
|
||
</div>
|
||
<p className="text-[#1E2E38]/70 text-xs leading-relaxed">
|
||
{t.worksDesc}
|
||
</p>
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* 3 Column Image Cards Grid */}
|
||
<div className="grid md:grid-cols-3 gap-8">
|
||
{projeler.map((p, i) => (
|
||
<motion.div
|
||
key={i}
|
||
className="flex flex-col group justify-between"
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6, delay: i * 0.15 }}
|
||
whileHover={{ y: -6 }}
|
||
>
|
||
<div>
|
||
{/* Photo container */}
|
||
<div className="h-[360px] rounded-3xl overflow-hidden mb-5 shadow-lg border border-white/20 relative">
|
||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||
<img
|
||
src={p.resim}
|
||
alt={p.baslik}
|
||
className="w-full h-full object-cover scale-102 group-hover:scale-105 transition-transform duration-1000"
|
||
/>
|
||
</div>
|
||
{/* Text details */}
|
||
<h3 className="font-elegant font-bold text-[#1E2E38] text-base mb-1 uppercase tracking-wide leading-tight">{p.baslik}</h3>
|
||
<p className="text-gray-500 text-xs font-semibold">{lang === "tr" ? "Estetik ve Dayanıklı Sonuçlar" : "Impressive, high-durability smile aesthetics"}</p>
|
||
</div>
|
||
|
||
<button
|
||
onClick={() => setShowBookingModal(true)}
|
||
className="text-[#1E2E38] font-black text-[9px] tracking-[2px] uppercase flex items-center gap-1 cursor-pointer hover:text-opacity-80 transition-colors pt-4 shrink-0"
|
||
>
|
||
{lang === "tr" ? "VAKAYI İNCELE →" : "VIEW CASE →"}
|
||
</button>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── YORUMLAR (TESTIMONIALS) ── */}
|
||
<section id="yorumlar" className="py-24 bg-white px-6">
|
||
<div className="max-w-7xl mx-auto">
|
||
<div className="mb-16 text-center">
|
||
<span className="inline-block text-[10px] font-black uppercase tracking-widest text-[#1E2E38]/50 mb-4 font-elegant">
|
||
003 - Patient Stories
|
||
</span>
|
||
<h2 className="text-3xl lg:text-4xl font-elegant font-black text-[#1E2E38] uppercase">
|
||
{t.reviewsHeader}
|
||
</h2>
|
||
</div>
|
||
|
||
<div className="relative">
|
||
<AnimatePresence mode="wait">
|
||
<motion.div
|
||
key={activeYorum}
|
||
className="bg-[#FAF7F2] border border-[#1E2E38]/5 rounded-3xl p-10 max-w-2xl mx-auto shadow-sm"
|
||
initial={{ opacity: 0, scale: 0.95 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
exit={{ opacity: 0, scale: 0.95 }}
|
||
transition={{ duration: 0.4 }}>
|
||
<div className="flex gap-1.5 mb-6 justify-center">
|
||
{[...Array(yorumlar[activeYorum]?.puan || 5)].map((_, i) => (
|
||
<svg key={i} className="w-4.5 h-4.5 fill-[#1E2E38]" viewBox="0 0 24 24">
|
||
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
|
||
</svg>
|
||
))}
|
||
</div>
|
||
<p className="text-[#1E2E38]/80 text-base leading-relaxed italic text-center mb-8 font-semibold">
|
||
“{yorumlar[activeYorum]?.yorum}”
|
||
</p>
|
||
<div className="flex items-center gap-3.5 justify-center">
|
||
<div className="w-10 h-10 rounded-full flex items-center justify-center text-sm bg-white shadow-sm border border-[#1E2E38]/5 font-bold font-elegant select-none">
|
||
{yorumlar[activeYorum]?.yazar.charAt(0)}
|
||
</div>
|
||
<div>
|
||
<p className="text-[#1E2E38] font-bold text-xs uppercase tracking-wide leading-tight">{yorumlar[activeYorum]?.yazar}</p>
|
||
<p className="text-gray-400 text-[10px] uppercase font-black font-elegant tracking-wider mt-0.5">{yorumlar[activeYorum]?.tarih}</p>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</AnimatePresence>
|
||
|
||
<div className="flex justify-center gap-2.5 mt-8">
|
||
{yorumlar.map((_, i) => (
|
||
<button key={i} onClick={() => setActiveYorum(i)}
|
||
className="w-2.5 h-2.5 rounded-full transition-all cursor-pointer"
|
||
style={{ background: i === activeYorum ? "#1E2E38" : "rgba(30,46,56,0.15)",
|
||
transform: i === activeYorum ? "scale(1.3)" : "scale(1)" }} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── RANDEVU AL (APPOINTMENT SECTION) ── */}
|
||
<section id="randevu" className="py-24 bg-[#FAF7F2] px-6 border-t border-[#1E2E38]/5">
|
||
<div className="max-w-3xl mx-auto">
|
||
<div className="bg-white rounded-3xl p-8 md:p-12 shadow-premium border border-white">
|
||
<div className="text-center mb-10">
|
||
<span className="inline-block text-[10px] font-black uppercase tracking-widest text-[#1E2E38]/50 mb-4 font-elegant">
|
||
004 - Online Appointment
|
||
</span>
|
||
<h2 className="text-3xl md:text-4xl font-elegant font-black text-[#1E2E38] uppercase tracking-tight">
|
||
{t.bookingHeader}
|
||
</h2>
|
||
<p className="text-gray-400 text-xs mt-2 font-semibold">
|
||
{t.bookingDesc}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4 font-semibold">
|
||
{[
|
||
{ label: t.fieldsName, placeholder: lang === "tr" ? "Adınız Soyadınız" : "Your Full Name", type: "text", full: false },
|
||
{ label: t.fieldsPhone, placeholder: "05xx xxx xx xx", type: "tel", full: false },
|
||
{ label: t.fieldsEmail, placeholder: "ornek@mail.com", type: "email", full: false },
|
||
{ label: t.fieldsService, placeholder: "", type: "select", full: false },
|
||
{ label: t.fieldsDate, placeholder: "", type: "date", full: false },
|
||
{ label: t.fieldsNotes, placeholder: t.fieldsNotesPlaceholder, type: "text", full: true },
|
||
].map((field, i) => (
|
||
<div key={i} className={field.full ? "col-span-2" : "col-span-2 sm:col-span-1"}>
|
||
<label className="block text-[10px] font-black text-[#1E2E38]/60 mb-1.5 uppercase tracking-wider">{field.label}</label>
|
||
{field.type === "select" ? (
|
||
<select className="w-full px-4 py-3.5 rounded-xl border border-gray-200 text-xs text-slate-800 focus:outline-none focus:ring-2 focus:ring-[#1E2E38] bg-gray-50/50 transition-all font-semibold cursor-pointer">
|
||
<option>{lang === "tr" ? "Diş Çürüklerini Önleme" : "Prevent Cavities & Disease"}</option>
|
||
<option>{lang === "tr" ? "Işıldayan Temizlik" : "Teeth Sparkling Cleaning"}</option>
|
||
<option>{lang === "tr" ? "Diş Düzeltme" : "Teeth Straightening"}</option>
|
||
<option>{lang === "tr" ? "Diş İmplantı" : "Dental Implant"}</option>
|
||
</select>
|
||
) : (
|
||
<input type={field.type} placeholder={field.placeholder}
|
||
className="w-full px-4 py-3.5 rounded-xl border border-gray-200 text-xs focus:outline-none focus:ring-2 focus:ring-[#1E2E38] bg-gray-50/50 transition-all placeholder-[#1E2E38]/20 font-semibold" />
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
<motion.button
|
||
onClick={() => setShowBookingModal(true)}
|
||
className="mt-8 w-full py-4.5 rounded-xl text-[#FAF7F2] font-black text-xs bg-[#1E2E38] hover:bg-[#121C22] uppercase tracking-widest cursor-pointer shadow-[0_5px_15px_rgba(30,46,56,0.15)]"
|
||
whileHover={{ scale: 1.02 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
>
|
||
📅 {t.dispatchForm}
|
||
</motion.button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── FOOTER ── */}
|
||
<footer className="bg-[#121C22] border-t border-white/10 px-6 pt-24 pb-8">
|
||
<div className="max-w-7xl mx-auto">
|
||
<div className="grid md:grid-cols-4 gap-12 pb-16 border-b border-white/5">
|
||
<div className="md:col-span-2">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<svg className="w-5 h-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
|
||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" />
|
||
<path d="M12 6v12M6 12h12" />
|
||
</svg>
|
||
<span className="font-bold text-white text-lg font-elegant uppercase tracking-wide">{firma.adi}</span>
|
||
</div>
|
||
<p className="text-white/40 text-xs leading-relaxed max-w-sm mb-8 font-semibold">{t.footerDesc}</p>
|
||
<div className="text-white/50 text-xs font-semibold space-y-3">
|
||
<p className="flex items-center gap-2">📍 <span className="text-white/80">{firma.adres}</span></p>
|
||
<p className="flex items-center gap-2">📞 <span className="text-white/80">{firma.telefon}</span></p>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h4 className="font-elegant text-white font-bold text-xs uppercase tracking-wider mb-6">{t.navServices}</h4>
|
||
{hizmetler.map((h, i) => {
|
||
const s = getLocalizedServiceText(h.baslik);
|
||
return (
|
||
<a key={i} href="#hizmetler" className="block text-white/40 text-xs mb-3 hover:text-white transition-colors font-semibold">{s.title}</a>
|
||
);
|
||
})}
|
||
</div>
|
||
<div>
|
||
<h4 className="font-elegant text-white font-bold text-xs uppercase tracking-wider mb-6">Odentries</h4>
|
||
{[t.navMembership, t.navServices, t.navWorks, t.navReviews].map((item) => (
|
||
<a key={item} href="#" className="block text-white/40 text-xs mb-3 hover:text-white transition-colors font-semibold">{item}</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-col md:flex-row justify-between items-center pt-8 gap-4 text-white/30 text-xs font-semibold">
|
||
<p>© 2026 {firma.adi}. All rights reserved.</p>
|
||
<div className="flex gap-4">
|
||
<a href="#" className="hover:text-white transition-colors">{t.privacyRegs}</a>
|
||
<span>·</span>
|
||
<a href="#" className="hover:text-white transition-colors">{t.termsStay}</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
{/* ── BOOKING MODAL ── */}
|
||
<AnimatePresence>
|
||
{showBookingModal && (
|
||
<motion.div
|
||
className="fixed inset-0 z-50 flex items-center justify-center p-6 bg-black/60 backdrop-blur-sm"
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
>
|
||
<motion.div
|
||
className="bg-white rounded-3xl p-8 max-w-md w-full relative shadow-2xl border border-gray-100"
|
||
initial={{ scale: 0.95, y: 20 }}
|
||
animate={{ scale: 1, y: 0 }}
|
||
exit={{ scale: 0.95, y: 20 }}
|
||
>
|
||
<button
|
||
className="absolute top-6 right-6 w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center font-bold text-gray-500 hover:bg-gray-200 transition-colors cursor-pointer"
|
||
onClick={() => setShowBookingModal(false)}
|
||
>
|
||
✕
|
||
</button>
|
||
|
||
<h3 className="font-elegant font-black text-[#1E2E38] text-2xl mb-1 uppercase tracking-wide">{t.contactTitle}</h3>
|
||
<p className="text-gray-400 text-xs mb-6 font-semibold">{t.contactDesc}</p>
|
||
|
||
<div className="space-y-4 font-semibold">
|
||
<div>
|
||
<label className="block text-[10px] font-black text-gray-500 mb-1.5 uppercase tracking-wider">{t.fieldsName}</label>
|
||
<input type="text" className="w-full px-4 py-3.5 rounded-xl border bg-gray-50/50 text-xs focus:outline-none focus:ring-2 focus:ring-[#1E2E38]" placeholder="John Doe" />
|
||
</div>
|
||
<div>
|
||
<label className="block text-[10px] font-black text-gray-500 mb-1.5 uppercase tracking-wider">{t.fieldsPhone}</label>
|
||
<input type="tel" className="w-full px-4 py-3.5 rounded-xl border bg-gray-50/50 text-xs focus:outline-none focus:ring-2 focus:ring-[#1E2E38]" placeholder="05xx xxx xx xx" />
|
||
</div>
|
||
<motion.button
|
||
className="w-full py-4 rounded-xl bg-[#1E2E38] text-[#FAF7F2] font-black text-xs hover:bg-[#121C22] transition-colors mt-2 cursor-pointer shadow-[0_4px_12px_rgba(30,46,56,0.15)] uppercase tracking-widest"
|
||
whileHover={{ scale: 1.02 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
onClick={() => setShowBookingModal(false)}
|
||
>
|
||
{t.submit}
|
||
</motion.button>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|