946 lines
47 KiB
TypeScript
946 lines
47 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: {
|
||
navServices: "Hizmetlerimiz",
|
||
navDoctors: "Uzman Kadromuz",
|
||
navReviews: "Hasta Yorumları",
|
||
navContact: "İletişim",
|
||
navBooking: "Randevu Al",
|
||
badge: "GÜVENİLİR SAĞLIK MERKEZİ",
|
||
heroTitlePart1: "Sağlığınız İçin",
|
||
heroTitlePart2: "En İyi Ellerde",
|
||
heroTitlePart3: "Olun",
|
||
heroDesc: "Uzman hekim kadromuz, modern tıbbi donanımımız ve kişiye özel tedavi yaklaşımlarımızla sağlığınızı korumak için buradayız. Doğan Tıp Merkezi güvenilir koordinatları.",
|
||
appointmentsToday: "Bugünkü Randevular",
|
||
saturday: "Cumartesi, 28 Mayıs 2026",
|
||
appointmentList: [
|
||
{ saat: "09:30", tip: "Genel Muayene", dolu: true },
|
||
{ saat: "11:00", tip: "Check-Up Kontrolü", dolu: false },
|
||
{ saat: "13:30", tip: "Kardiyoloji Muayenesi", dolu: true },
|
||
{ saat: "15:00", tip: "Göz Muayenesi", dolu: false },
|
||
],
|
||
statusDolu: "Dolu",
|
||
statusMusait: "Müsait",
|
||
ratingText: "4.9 / 5 • 620+ Hasta Değerlendirmesi",
|
||
smsReminder: "SMS Hatırlatma",
|
||
smsDesc: "Randevularınızı asla kaçırmayın",
|
||
servicesTitle: "Hizmetlerimiz",
|
||
servicesHeader: "UZMAN KADROMUZLA HER ALANDA YANINIZDAYIZ",
|
||
learnMore: "Detaylı Bilgi →",
|
||
doctorsTitle: "Ekibimiz",
|
||
doctorsHeader: "ALANINDA UZMAN DOKTORLARIMIZ",
|
||
yearsExp: "Yıl Deneyim",
|
||
patientsTreated: "Hasta Tedavisi",
|
||
bookingTitle: "Online Randevu",
|
||
bookingHeader: "HEMEN RANDEVU OLUŞTURUN",
|
||
bookingDesc: "Formu doldurun, randevu koordinatörümüz sizi 15 dakika içinde arayıp gününüzü kesinleştirsin.",
|
||
fieldsName: "Ad Soyad",
|
||
fieldsPhone: "Telefon Numarası",
|
||
fieldsEmail: "E-Posta Adresi",
|
||
fieldsDepartment: "Bölüm / Klinik",
|
||
fieldsDate: "Randevu Tarihi",
|
||
fieldsNotes: "Notunuz / Şikayetiniz",
|
||
fieldsNotesPlaceholder: "Belirtmek istediğiniz tıbbi şikayetler veya özel notlar...",
|
||
dispatchForm: "RANDEVU TALEP ET",
|
||
contactDetails: "İLETİŞİM BİLGİLERİMİZ",
|
||
callCenter: "7/24 Çağrı Merkezi",
|
||
addressLabel: "Klinik Adresi",
|
||
emailLabel: "E-Posta",
|
||
footerDesc: "İleri tanı ve tedavi yöntemleri, hasta odaklı hizmet anlayışı ve seçkin hekim kadrosuyla sağlığınız için en güvenilir koordinat.",
|
||
privacyRegs: "Gizlilik Sözleşmesi",
|
||
termsStay: "Kullanım Şartları",
|
||
dismiss: "KAPAT",
|
||
contactTitle: "Hızlı Danışma",
|
||
contactDesc: "İletişim bilgilerinizi bırakın, tıbbi danışmanımız sizi hemen arasın.",
|
||
submit: "Gönder",
|
||
serviceDahiliye: "Dahiliye",
|
||
serviceDahiliyeDesc: "Erişkin hastalıklarında kapsamlı tanı ve tedavi hizmetleri.",
|
||
serviceKardiyoloji: "Kardiyoloji",
|
||
serviceKardiyolojiDesc: "Kalp ve damar sağlığı için ileri tanı ve tedavi yöntemleri.",
|
||
serviceDis: "Diş Hekimliği",
|
||
serviceDisDesc: "İmplant, ortodonti ve estetik gülüş tasarımı uygulamaları.",
|
||
serviceGoz: "Göz Sağlığı",
|
||
serviceGozDesc: "Lazer tedavileri, katarakt ve mikro cerrahi operasyonları.",
|
||
serviceLab: "Laboratuvar",
|
||
serviceLabDesc: "Hızlı, güvenilir ve tam kapsamlı tahlil sonuçları.",
|
||
serviceRad: "Radyoloji",
|
||
serviceRadDesc: "MR, bilgisayarlı tomografi ve ileri ultrason görüntüleme.",
|
||
},
|
||
en: {
|
||
navServices: "Our Services",
|
||
navDoctors: "Our Doctors",
|
||
navReviews: "Testimonials",
|
||
navContact: "Contact",
|
||
navBooking: "Book Appointment",
|
||
badge: "TRUSTED MEDICAL CENTER",
|
||
heroTitlePart1: "Your Health",
|
||
heroTitlePart2: "In The Safest Hands",
|
||
heroTitlePart3: "Always",
|
||
heroDesc: "We protect your health with our expert physicians, state-of-the-art diagnostic systems, and customized treatment plans. Trusted coordinates of Doğan Medical Center.",
|
||
appointmentsToday: "Today's Schedule",
|
||
saturday: "Saturday, May 28, 2026",
|
||
appointmentList: [
|
||
{ saat: "09:30", tip: "General Checkup", dolu: true },
|
||
{ saat: "11:00", tip: "Prevention Review", dolu: false },
|
||
{ saat: "13:30", tip: "Cardiology Consult", dolu: true },
|
||
{ saat: "15:00", tip: "Ophthalmology Exam", dolu: false },
|
||
],
|
||
statusDolu: "Booked",
|
||
statusMusait: "Available",
|
||
ratingText: "4.9 / 5 • 620+ Patient Feedbacks",
|
||
smsReminder: "SMS Reminder",
|
||
smsDesc: "Never miss your medical checks",
|
||
servicesTitle: "Our Services",
|
||
servicesHeader: "COMPREHENSIVE MEDICAL CARE IN EVERY SPECIALTY",
|
||
learnMore: "Learn More →",
|
||
doctorsTitle: "Our Team",
|
||
doctorsHeader: "MEET OUR ACCOMPLISHED PHYSICIANS",
|
||
yearsExp: "Years Experience",
|
||
patientsTreated: "Patients Treated",
|
||
bookingTitle: "Online Booking",
|
||
bookingHeader: "SCHEDULE A MEDICAL APPOINTMENT",
|
||
bookingDesc: "Fill in the details and our patient representative will call you back within 15 minutes to lock your slot.",
|
||
fieldsName: "Full Name",
|
||
fieldsPhone: "Phone Number",
|
||
fieldsEmail: "Email Address",
|
||
fieldsDepartment: "Specialty / Department",
|
||
fieldsDate: "Preferred Date",
|
||
fieldsNotes: "Symptoms / Clinical Notes",
|
||
fieldsNotesPlaceholder: "Briefly describe your symptoms or specific notes for the doctor...",
|
||
dispatchForm: "REQUEST APPOINTMENT",
|
||
contactDetails: "CONTACT CHANNELS",
|
||
callCenter: "24/7 Call Center",
|
||
addressLabel: "Clinic Coordinates",
|
||
emailLabel: "Support Email",
|
||
footerDesc: "Trusted medical hub offering comprehensive diagnosis and advanced therapy protocols utilizing the latest patient care systems.",
|
||
privacyRegs: "Privacy Policy",
|
||
termsStay: "Terms of Service",
|
||
dismiss: "DISMISS",
|
||
contactTitle: "Quick Consultation",
|
||
contactDesc: "Leave your contact coordinates and our medical coordinator will call you back shortly.",
|
||
submit: "Submit",
|
||
serviceDahiliye: "Internal Medicine",
|
||
serviceDahiliyeDesc: "Comprehensive diagnostics and advanced therapies for adult diseases.",
|
||
serviceKardiyoloji: "Cardiology",
|
||
serviceKardiyolojiDesc: "Advanced diagnostics and treatment plans for cardiovascular wellness.",
|
||
serviceDis: "Dentistry",
|
||
serviceDisDesc: "Modern implants, clear aligners, and aesthetic smile design applications.",
|
||
serviceGoz: "Ophthalmology",
|
||
serviceGozDesc: "State-of-the-art laser corrections, cataract surgeries, and microsurgery.",
|
||
serviceLab: "Medical Laboratory",
|
||
serviceLabDesc: "Ultra-fast, certified, and fully automated biological analysis protocols.",
|
||
serviceRad: "Advanced Radiology",
|
||
serviceRadDesc: "High-resolution MRI, computerized tomography, and diagnostic ultrasound.",
|
||
}
|
||
};
|
||
|
||
export default function KlinikTemplate({ data }: { data: DemoData }) {
|
||
const { firma, istatistikler = [], hizmetler = [], doktorlar = [], 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);
|
||
}, []);
|
||
|
||
// Localized statistics labels
|
||
const getLocalizedStatLabel = (deger: string) => {
|
||
if (deger === "4200") return lang === "tr" ? "Mutlu Hasta" : "Happy Patients";
|
||
if (deger === "14") return lang === "tr" ? "Uzman Hekim" : "Expert Physicians";
|
||
if (deger === "12") return lang === "tr" ? "Yıl Deneyim" : "Years of Experience";
|
||
return lang === "tr" ? "Hasta Yorumu" : "Patient Reviews";
|
||
};
|
||
|
||
// Maps services text based on data
|
||
const getLocalizedServiceText = (baslik: string) => {
|
||
if (baslik.includes("Dahiliye")) return { title: t.serviceDahiliye, desc: t.serviceDahiliyeDesc };
|
||
if (baslik.includes("Kardiyoloji")) return { title: t.serviceKardiyoloji, desc: t.serviceKardiyolojiDesc };
|
||
if (baslik.includes("Diş")) return { title: t.serviceDis, desc: t.serviceDisDesc };
|
||
if (baslik.includes("Göz")) return { title: t.serviceGoz, desc: t.serviceGozDesc };
|
||
if (baslik.includes("Laboratuvar")) return { title: t.serviceLab, desc: t.serviceLabDesc };
|
||
return { title: t.serviceRad, desc: t.serviceRadDesc };
|
||
};
|
||
|
||
// Maps service icons
|
||
const getServiceIconSvg = (baslik: string) => {
|
||
if (baslik.includes("Dahiliye")) {
|
||
return (
|
||
<svg className="w-6 h-6 stroke-[#0ea5e9] fill-none" viewBox="0 0 24 24" strokeWidth="2">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||
</svg>
|
||
);
|
||
}
|
||
if (baslik.includes("Kardiyoloji")) {
|
||
return (
|
||
<svg className="w-6 h-6 stroke-[#0ea5e9] fill-none" viewBox="0 0 24 24" strokeWidth="2">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
||
</svg>
|
||
);
|
||
}
|
||
if (baslik.includes("Diş")) {
|
||
return (
|
||
<svg className="w-6 h-6 stroke-[#0ea5e9] 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>
|
||
);
|
||
}
|
||
if (baslik.includes("Göz")) {
|
||
return (
|
||
<svg className="w-6 h-6 stroke-[#0ea5e9] fill-none" viewBox="0 0 24 24" strokeWidth="2">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||
</svg>
|
||
);
|
||
}
|
||
if (baslik.includes("Laboratuvar")) {
|
||
return (
|
||
<svg className="w-6 h-6 stroke-[#0ea5e9] fill-none" viewBox="0 0 24 24" strokeWidth="2">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
|
||
</svg>
|
||
);
|
||
}
|
||
return (
|
||
<svg className="w-6 h-6 stroke-[#0ea5e9] fill-none" viewBox="0 0 24 24" strokeWidth="2">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||
<circle cx="12" cy="13" r="3" />
|
||
</svg>
|
||
);
|
||
};
|
||
|
||
const getLocalizedDoctor = (ad: string) => {
|
||
if (ad.includes("Ahmet")) {
|
||
return {
|
||
name: lang === "tr" ? "Dr. Ahmet Yılmaz" : "Dr. Ahmet Yilmaz",
|
||
title: lang === "tr" ? "Dahiliye Uzmanı" : "Internal Medicine Specialist",
|
||
};
|
||
}
|
||
if (ad.includes("Ayşe")) {
|
||
return {
|
||
name: lang === "tr" ? "Dr. Ayşe Kaya" : "Dr. Ayse Kaya",
|
||
title: lang === "tr" ? "Kardiyolog" : "Cardiologist",
|
||
};
|
||
}
|
||
if (ad.includes("Mehmet")) {
|
||
return {
|
||
name: lang === "tr" ? "Dr. Mehmet Demir" : "Dr. Mehmet Demir",
|
||
title: lang === "tr" ? "Göz Sağlığı Uzmanı" : "Ophthalmology Specialist",
|
||
};
|
||
}
|
||
return {
|
||
name: lang === "tr" ? "Dr. Zeynep Arslan" : "Dr. Zeynep Arslan",
|
||
title: lang === "tr" ? "Estetik Diş Hekimi" : "Aesthetic Dentist",
|
||
};
|
||
};
|
||
|
||
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 {
|
||
--color-klinik-sky: #0ea5e9;
|
||
--color-klinik-sky-dark: #0284c7;
|
||
--color-klinik-sky-light: #e0f2fe;
|
||
--color-klinik-charcoal: #0F172A;
|
||
--color-klinik-sand: #FAF8F5;
|
||
}
|
||
|
||
.font-sora-editorial {
|
||
font-family: 'Sora', sans-serif;
|
||
}
|
||
|
||
.font-sans-clean {
|
||
font-family: 'DM Sans', sans-serif;
|
||
}
|
||
|
||
.shadow-premium {
|
||
box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.05);
|
||
}
|
||
|
||
.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-[#0F172A] 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-sora-editorial tracking-[4px] uppercase text-[#0ea5e9] block"
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5 }}
|
||
>
|
||
DOĞAN TIP MERKEZİ
|
||
</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-[#0ea5e9]"
|
||
initial={{ width: "0%" }}
|
||
animate={{ width: "100%" }}
|
||
transition={{ duration: 1.2, ease: "easeInOut" }}
|
||
/>
|
||
</div>
|
||
<motion.h2
|
||
className="font-sora-editorial 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-[#FAF8F5] text-[#0F172A] min-h-screen font-sans-clean selection:bg-[#0ea5e9] selection:text-white overflow-hidden relative pb-20">
|
||
|
||
{/* Floating Ambient Orbs */}
|
||
<div className="absolute top-[10%] left-[-15%] w-[600px] h-[600px] bg-[#0ea5e9]/3 blur-[120px] rounded-full pointer-events-none z-0" />
|
||
<div className="absolute bottom-[20%] right-[-15%] w-[600px] h-[600px] bg-[#0284c7]/3 blur-[140px] rounded-full pointer-events-none z-0" />
|
||
|
||
{/* ── FLOATING CONCEPT BANNER ── */}
|
||
<div className="fixed bottom-4 left-4 z-40 bg-[#0F172A]/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-[#0ea5e9] animate-pulse" />
|
||
<span className="text-[9px] font-sora-editorial 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 NAVBAR ── */}
|
||
<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/80 backdrop-blur-xl border border-white/40 rounded-2xl shadow-[0_10px_30px_rgba(15,23,42,0.03)]">
|
||
{/* Logo */}
|
||
<a href="#" className="flex items-center gap-2.5 group">
|
||
<span className="text-lg font-black tracking-tight text-[#0F172A] font-sora-editorial flex items-center gap-2.5 uppercase">
|
||
<svg className="w-5 h-5 text-[#0ea5e9]" 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.navServices, href: "#hizmetler" },
|
||
{ label: t.navDoctors, href: "#doktorlar" },
|
||
{ label: t.navReviews, href: "#testimonials" },
|
||
{ label: t.navContact, href: "#randevu" }
|
||
].map(item => (
|
||
<a
|
||
key={item.label}
|
||
href={item.href}
|
||
className="text-[10px] font-black tracking-[2px] uppercase text-[#0F172A]/70 hover:text-[#0ea5e9] transition-colors relative py-1 cursor-pointer group"
|
||
>
|
||
{item.label}
|
||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#0ea5e9] transition-all group-hover:w-full" />
|
||
</a>
|
||
))}
|
||
</nav>
|
||
|
||
{/* Language Selector + Booking Button */}
|
||
<div className="flex items-center gap-4">
|
||
{/* Language Switcher */}
|
||
<div className="flex items-center gap-1 bg-[#0F172A]/5 border border-[#0F172A]/10 rounded-xl p-1 shrink-0">
|
||
<button
|
||
onClick={() => setLang("tr")}
|
||
className={`text-[9px] font-sora-editorial px-2 py-1.5 rounded-lg transition-all cursor-pointer ${
|
||
lang === "tr" ? "bg-white text-slate-900 shadow-sm" : "text-[#0F172A]/60 hover:text-[#0F172A]"
|
||
}`}
|
||
>
|
||
TR
|
||
</button>
|
||
<button
|
||
onClick={() => setLang("en")}
|
||
className={`text-[9px] font-sora-editorial px-2 py-1.5 rounded-lg transition-all cursor-pointer ${
|
||
lang === "en" ? "bg-white text-slate-900 shadow-sm" : "text-[#0F172A]/60 hover:text-[#0F172A]"
|
||
}`}
|
||
>
|
||
EN
|
||
</button>
|
||
</div>
|
||
|
||
<motion.button
|
||
onClick={() => setShowBookingModal(true)}
|
||
className="text-[10px] font-black tracking-[2.5px] uppercase text-white bg-[#0ea5e9] hover:bg-[#0284c7] px-6 py-3.5 rounded-xl transition-all cursor-pointer shadow-[0_4px_12px_rgba(14,165,233,0.15)] hidden sm:block"
|
||
whileHover={{ scale: 1.02 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
>
|
||
{t.navBooking}
|
||
</motion.button>
|
||
</div>
|
||
</div>
|
||
</motion.header>
|
||
|
||
{/* ── HERO & INTERACTIVE APPOINTMENT TRACKER ── */}
|
||
<section className="relative min-h-screen pt-32 pb-20 flex items-center z-10 px-6">
|
||
<div className="max-w-7xl mx-auto w-full">
|
||
<div className="grid lg:grid-cols-12 gap-16 items-center">
|
||
|
||
{/* Left Column: Heading and clinic stats */}
|
||
<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-[#0ea5e9] mb-6 bg-[#0ea5e9]/5 border border-[#0ea5e9]/10 px-4 py-2 rounded-full"
|
||
>
|
||
<span className="w-1.5 h-1.5 rounded-full bg-[#0ea5e9] animate-pulse" />
|
||
{t.badge}
|
||
</motion.div>
|
||
|
||
<motion.h1
|
||
variants={fadeUp}
|
||
className="font-sora-editorial font-black text-[#0F172A] leading-[1.1] mb-8 hero-title-clamp uppercase"
|
||
>
|
||
{t.heroTitlePart1}
|
||
<br />
|
||
<span className="italic font-light text-[#0ea5e9] lowercase">{t.heroTitlePart2}</span>
|
||
<br />
|
||
{t.heroTitlePart3}
|
||
</motion.h1>
|
||
|
||
<motion.p
|
||
variants={fadeUp}
|
||
className="text-[#0F172A]/60 text-xs lg:text-sm leading-relaxed max-w-md mb-12 font-semibold"
|
||
>
|
||
{t.heroDesc}
|
||
</motion.p>
|
||
|
||
{/* Statistics Grid */}
|
||
<motion.div
|
||
variants={fadeUp}
|
||
className="grid grid-cols-2 sm:grid-cols-4 gap-6 mb-12 font-semibold"
|
||
>
|
||
{istatistikler.map((stat, idx) => (
|
||
<div key={idx} className="border-l border-[#0ea5e9]/30 pl-4 py-1">
|
||
<h4 className="font-sora-editorial font-black text-[#0F172A] text-lg uppercase tracking-wider mb-1 leading-none">
|
||
{stat.deger === "4200" || stat.deger === "620" ? `${stat.deger}+` : stat.deger}
|
||
</h4>
|
||
<p className="text-[#0F172A]/50 text-[10px] leading-snug">
|
||
{getLocalizedStatLabel(stat.deger)}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</motion.div>
|
||
|
||
{/* CTA buttons */}
|
||
<motion.div variants={fadeUp} className="flex gap-4">
|
||
<a
|
||
href="#randevu"
|
||
className="inline-flex items-center gap-3 px-8 py-4.5 rounded-xl bg-[#0ea5e9] hover:bg-[#0284c7] text-white font-black text-[10px] tracking-[2px] uppercase transition-all shadow-[0_5px_15px_rgba(14,165,233,0.2)] cursor-pointer"
|
||
>
|
||
📅 {t.navBooking}
|
||
</a>
|
||
<a
|
||
href="#hizmetler"
|
||
className="inline-flex items-center gap-3 px-8 py-4.5 rounded-xl border border-[#0F172A]/10 bg-white/40 hover:bg-white/80 text-[#0F172A] font-black text-[10px] tracking-[2px] uppercase transition-all cursor-pointer"
|
||
>
|
||
{t.navServices}
|
||
</a>
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
{/* Right Column: Layered Live Tracker Mockup */}
|
||
<div className="lg:col-span-6 relative flex justify-center lg:justify-end">
|
||
<motion.div
|
||
className="relative w-full max-w-md bg-white rounded-3xl p-8 border border-white shadow-premium z-10"
|
||
initial={{ opacity: 0, scale: 0.95 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.8 }}
|
||
>
|
||
<div className="flex items-center justify-between mb-6 pb-4 border-b border-gray-100">
|
||
<div>
|
||
<h4 className="font-sora-editorial font-black text-[#0F172A] text-sm uppercase leading-tight">{t.appointmentsToday}</h4>
|
||
<span className="text-[10px] text-[#0F172A]/40 uppercase tracking-widest font-black mt-1.5 block">{t.saturday}</span>
|
||
</div>
|
||
<div className="w-10 h-10 rounded-xl bg-[#0ea5e9]/10 flex items-center justify-center shrink-0">
|
||
<svg className="w-5 h-5 text-[#0ea5e9]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-3 font-semibold">
|
||
{t.appointmentList.map((r, i) => (
|
||
<div
|
||
key={i}
|
||
className="flex items-center justify-between p-3.5 rounded-2xl bg-gray-50 border border-gray-100/50 hover:bg-[#0ea5e9]/5 transition-colors"
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
<div className={`w-2 h-2 rounded-full ${r.dolu ? "bg-red-500 animate-pulse" : "bg-emerald-500"}`} />
|
||
<div>
|
||
<h5 className="text-[12px] font-black text-[#0F172A]">{r.saat}</h5>
|
||
<span className="text-[10px] text-[#0F172A]/50 mt-0.5 block">{r.tip}</span>
|
||
</div>
|
||
</div>
|
||
<span className={`text-[9px] font-black uppercase tracking-wider px-2.5 py-1 rounded-full ${r.dolu ? "bg-red-500/10 text-red-500" : "bg-emerald-500/10 text-emerald-500"}`}>
|
||
{r.dolu ? t.statusDolu : t.statusMusait}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Rating Badge Overlay */}
|
||
<motion.div
|
||
className="absolute -top-6 -right-6 bg-white border border-gray-100 rounded-2xl px-5 py-3.5 shadow-2xl flex items-center gap-3 select-none"
|
||
animate={{ y: [0, -6, 0] }}
|
||
transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
|
||
>
|
||
<span className="text-xl">⭐</span>
|
||
<div>
|
||
<h5 className="font-sora-editorial font-black text-slate-800 text-[13px] uppercase leading-none">{t.ratingText.split("•")[0]}</h5>
|
||
<span className="text-[9px] text-[#0F172A]/40 uppercase tracking-widest font-black mt-1 block">{t.ratingText.split("•")[1]}</span>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* SMS Reminder Overlay */}
|
||
<motion.div
|
||
className="absolute -bottom-6 -left-6 bg-white border border-gray-100 rounded-2xl px-5 py-3.5 shadow-2xl flex items-center gap-3 select-none"
|
||
animate={{ y: [0, 6, 0] }}
|
||
transition={{ duration: 4.5, repeat: Infinity, ease: "easeInOut", delay: 0.5 }}
|
||
>
|
||
<span className="text-xl">🔔</span>
|
||
<div>
|
||
<h5 className="font-sora-editorial font-black text-slate-800 text-[13px] uppercase leading-none">{t.smsReminder}</h5>
|
||
<span className="text-[9px] text-[#0F172A]/40 uppercase tracking-widest font-black mt-1 block">{t.smsDesc}</span>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── HİZMETLER ── */}
|
||
<section id="hizmetler" className="py-32 bg-white px-6 border-t border-[#0f172a]/5">
|
||
<div className="max-w-7xl mx-auto">
|
||
<motion.div
|
||
className="mb-20"
|
||
initial="hidden"
|
||
whileInView="show"
|
||
viewport={{ once: true }}
|
||
variants={stagger}
|
||
>
|
||
<motion.span
|
||
variants={fadeUp}
|
||
className="inline-block text-[10px] font-black uppercase tracking-widest px-4 py-2 rounded-full mb-4 bg-[#0ea5e9]/5 text-[#0ea5e9] border border-[#0ea5e9]/10"
|
||
>
|
||
{t.servicesTitle}
|
||
</motion.span>
|
||
<motion.h2 variants={fadeUp} className="text-4xl lg:text-5xl font-sora-premium font-black text-gray-900 leading-tight uppercase">
|
||
{t.servicesHeader}
|
||
</motion.h2>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6"
|
||
initial="hidden"
|
||
whileInView="show"
|
||
viewport={{ once: true }}
|
||
variants={stagger}
|
||
>
|
||
{hizmetler.map((h, i) => {
|
||
const item = getLocalizedServiceText(h.baslik);
|
||
return (
|
||
<motion.div
|
||
key={i}
|
||
variants={fadeUp}
|
||
className="group p-8 rounded-3xl border border-gray-100 hover:border-transparent transition-all duration-300 cursor-default bg-white flex flex-col justify-between h-80"
|
||
whileHover={{ y: -6, boxShadow: `0 24px 60px rgba(14,165,233,0.1)` }}
|
||
>
|
||
<div>
|
||
<div
|
||
className="w-14 h-14 rounded-2xl flex items-center justify-center mb-6 transition-transform group-hover:scale-105 shadow-sm border border-gray-100 bg-gray-50"
|
||
>
|
||
{getServiceIconSvg(h.baslik)}
|
||
</div>
|
||
<h3 className="font-sora-premium font-bold text-base text-gray-900 mb-2 leading-snug uppercase tracking-wide">{item.title}</h3>
|
||
<p className="text-gray-500 text-xs leading-relaxed font-semibold">{item.desc}</p>
|
||
</div>
|
||
<button
|
||
onClick={() => setShowBookingModal(true)}
|
||
className="text-[#0ea5e9] 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 shrink-0"
|
||
>
|
||
{t.learnMore}
|
||
</button>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── DOKTORLAR ── */}
|
||
<section id="doktorlar" className="py-32 px-6 bg-[#f8fafc] border-t border-gray-100">
|
||
<div className="max-w-7xl mx-auto">
|
||
<motion.div
|
||
className="mb-20"
|
||
initial="hidden"
|
||
whileInView="show"
|
||
viewport={{ once: true }}
|
||
variants={stagger}
|
||
>
|
||
<motion.span
|
||
variants={fadeUp}
|
||
className="inline-block text-[10px] font-black uppercase tracking-widest px-4 py-2 rounded-full mb-4 bg-[#0ea5e9]/5 text-[#0ea5e9] border border-[#0ea5e9]/10"
|
||
>
|
||
{t.doctorsTitle}
|
||
</motion.span>
|
||
<motion.h2 variants={fadeUp} className="text-4xl lg:text-5xl font-sora-premium font-black text-gray-900 uppercase">
|
||
{t.doctorsHeader}
|
||
</motion.h2>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 font-semibold"
|
||
initial="hidden"
|
||
whileInView="show"
|
||
viewport={{ once: true }}
|
||
variants={stagger}
|
||
>
|
||
{doktorlar.map((d, i) => {
|
||
const doc = getLocalizedDoctor(d.ad);
|
||
return (
|
||
<motion.div
|
||
key={i}
|
||
variants={fadeUp}
|
||
className="bg-white rounded-3xl overflow-hidden border border-gray-100/60 shadow-premium flex flex-col justify-between"
|
||
whileHover={{ y: -8 }}
|
||
>
|
||
<div
|
||
className="h-48 flex items-center justify-center text-7xl relative overflow-hidden select-none"
|
||
style={{ background: `linear-gradient(135deg, ${firma.renkAcik}, rgba(14,165,233,0.15))` }}
|
||
>
|
||
<motion.span whileHover={{ scale: 1.15 }} transition={{ type: "spring", stiffness: 300 }}>
|
||
{d.emoji}
|
||
</motion.span>
|
||
</div>
|
||
<div className="p-6">
|
||
<h3 className="font-sora-premium font-black text-gray-900 text-sm uppercase leading-tight">{doc.name}</h3>
|
||
<p className="text-[11px] font-bold mt-1.5 mb-4 text-[#0ea5e9] uppercase tracking-wide">{doc.title}</p>
|
||
<div className="flex items-center justify-between text-[9px] text-gray-500 border-t border-gray-100 pt-3 font-black uppercase tracking-widest">
|
||
<span>⭐ {d.puan}</span>
|
||
<span>🏥 {d.yil} {lang === "tr" ? "YIL" : "YRS"}</span>
|
||
<span>👥 {d.hasta}+ {lang === "tr" ? "HASTA" : "PATS"}</span>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── ONLINE APPOINTMENT FORM ── */}
|
||
<section id="randevu" className="py-32 px-6 relative overflow-hidden"
|
||
style={{ background: `linear-gradient(135deg, ${firma.renkKoyu} 0%, ${firma.renkAna} 100%)` }}>
|
||
|
||
{/* Subtle cosmic grid layout */}
|
||
<div className="absolute inset-0 opacity-[0.03] pointer-events-none"
|
||
style={{ backgroundImage: "linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px)", backgroundSize: "40px 40px" }} />
|
||
|
||
<div className="max-w-7xl mx-auto relative z-10">
|
||
<div className="grid lg:grid-cols-2 gap-16 items-start">
|
||
|
||
{/* Left Column: Contact details */}
|
||
<motion.div initial="hidden" whileInView="show" viewport={{ once: true }} variants={stagger}>
|
||
<motion.span
|
||
variants={fadeUp}
|
||
className="inline-block text-[9px] font-black uppercase tracking-widest px-4 py-2 rounded-full mb-4 bg-white/20 text-white border border-white/10"
|
||
>
|
||
{t.bookingTitle}
|
||
</motion.span>
|
||
<motion.h2 variants={fadeUp} className="text-4xl lg:text-5xl font-sora-premium font-black text-white leading-tight mb-6 uppercase">
|
||
{t.bookingHeader}
|
||
</motion.h2>
|
||
<motion.p variants={fadeUp} className="text-white/70 text-xs lg:text-sm mb-10 font-semibold leading-relaxed">
|
||
{t.bookingDesc}
|
||
</motion.p>
|
||
|
||
<motion.div variants={fadeUp} className="space-y-4 font-semibold">
|
||
{[
|
||
{ ikon: "📞", baslik: t.callCenter, aciklama: firma.telefon },
|
||
{ ikon: "📍", baslik: t.addressLabel, aciklama: firma.adres },
|
||
{ ikon: "✉️", baslik: t.emailLabel, aciklama: firma.email },
|
||
].map((item) => (
|
||
<div key={item.baslik} className="flex items-start gap-4 bg-white/10 rounded-2xl p-4 border border-white/5">
|
||
<span className="text-xl mt-0.5 shrink-0 select-none">{item.ikon}</span>
|
||
<div>
|
||
<p className="text-white/60 text-[9px] font-black uppercase tracking-wider">{item.baslik}</p>
|
||
<p className="text-white text-xs mt-1 leading-snug">{item.aciklama}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
{/* Right Column: Appointment Form */}
|
||
<motion.div
|
||
className="bg-white rounded-3xl p-8 shadow-2xl border border-white/10"
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.7, delay: 0.2 }}
|
||
>
|
||
<h3 className="font-sora-premium font-black text-gray-900 text-lg mb-6 uppercase tracking-wide">{t.bookingTitle}</h3>
|
||
<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.fieldsDepartment, 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-gray-700 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-[#0ea5e9] bg-gray-50/50 transition-all font-semibold cursor-pointer">
|
||
<option>{t.serviceDahiliye}</option>
|
||
<option>{t.serviceKardiyoloji}</option>
|
||
<option>{t.serviceDis}</option>
|
||
<option>{t.serviceGoz}</option>
|
||
<option>{t.serviceLab}</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-[#0ea5e9] bg-gray-50/50 transition-all placeholder-slate-300 font-semibold" />
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
<motion.button
|
||
onClick={() => setShowBookingModal(true)}
|
||
className="mt-6 w-full py-4.5 rounded-xl text-white font-black text-xs uppercase tracking-widest cursor-pointer shadow-[0_5px_15px_rgba(14,165,233,0.2)]"
|
||
style={{ background: `linear-gradient(135deg, ${firma.renkAna}, ${firma.renkKoyu})` }}
|
||
whileHover={{ scale: 1.02 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
>
|
||
📅 {t.dispatchForm}
|
||
</motion.button>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── TESTIMONIALS ── */}
|
||
<section id="testimonials" className="py-32 px-6 bg-gray-950 border-t border-white/5 relative z-10">
|
||
<div className="max-w-7xl mx-auto">
|
||
<motion.div
|
||
className="mb-20 text-center"
|
||
initial="hidden"
|
||
whileInView="show"
|
||
viewport={{ once: true }}
|
||
variants={stagger}
|
||
>
|
||
<motion.span
|
||
variants={fadeUp}
|
||
className="inline-block text-[10px] font-black uppercase tracking-widest px-4 py-2 rounded-full mb-4 bg-white/5 text-[#0ea5e9] border border-white/10"
|
||
>
|
||
{t.navReviews}
|
||
</motion.span>
|
||
<h2 className="text-3xl lg:text-4xl font-sora-premium font-black text-white uppercase tracking-tight">
|
||
{t.bookingTitle}
|
||
</h2>
|
||
</motion.div>
|
||
|
||
<div className="relative">
|
||
<AnimatePresence mode="wait">
|
||
<motion.div
|
||
key={activeYorum}
|
||
className="bg-white/5 backdrop-blur-xl border border-white/10 rounded-3xl p-10 max-w-2xl mx-auto shadow-2xl"
|
||
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 h-4 fill-[#0ea5e9]" 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-white/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 font-semibold">
|
||
<div className="w-10 h-10 rounded-full flex items-center justify-center text-sm bg-white/10 border border-white/10 font-bold select-none text-white">
|
||
{yorumlar[activeYorum]?.yazar.charAt(0)}
|
||
</div>
|
||
<div>
|
||
<p className="text-white font-bold text-xs uppercase tracking-wide leading-tight">{yorumlar[activeYorum]?.yazar}</p>
|
||
<p className="text-gray-500 text-[9px] uppercase tracking-wider font-black font-sora-premium 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 ? "#0ea5e9" : "rgba(255,255,255,0.15)",
|
||
transform: i === activeYorum ? "scale(1.3)" : "scale(1)" }} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── FOOTER ── */}
|
||
<footer className="bg-gray-950 border-t border-white/5 px-6 pt-24 pb-8 relative z-10">
|
||
<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-sora-premium 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-sora-premium text-white font-bold text-xs uppercase tracking-wider mb-6">{t.navServices}</h4>
|
||
{hizmetler.slice(0, 4).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-sora-premium text-white font-bold text-xs uppercase tracking-wider mb-6">Klinik</h4>
|
||
{[t.navServices, t.navDoctors, t.navReviews, t.navContact].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-sora-premium font-black text-[#0F172A] 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-[#0ea5e9]" 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-[#0ea5e9]" placeholder="05xx xxx xx xx" />
|
||
</div>
|
||
<motion.button
|
||
className="w-full py-4 rounded-xl bg-[#0ea5e9] text-white font-black text-xs hover:bg-[#0284c7] transition-colors mt-2 cursor-pointer shadow-[0_4px_12px_rgba(14,165,233,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>
|
||
</>
|
||
);
|
||
}
|