424 lines
22 KiB
TypeScript
424 lines
22 KiB
TypeScript
"use client";
|
||
|
||
import { motion, useScroll, useTransform, AnimatePresence } from "framer-motion";
|
||
import { useRef, useState } from "react";
|
||
import type { DemoData } from "@/data/demos";
|
||
import AnimatedCounter from "@/components/ui/AnimatedCounter";
|
||
|
||
const easeOutExpo = [0.16, 1, 0.3, 1] as [number, number, number, number];
|
||
|
||
const fadeUp = {
|
||
hidden: { opacity: 0, y: 40 },
|
||
show: { opacity: 1, y: 0, transition: { duration: 0.7, ease: easeOutExpo } },
|
||
};
|
||
|
||
const stagger = {
|
||
hidden: {},
|
||
show: { transition: { staggerChildren: 0.1 } },
|
||
};
|
||
|
||
export default function KlinikTemplate({ data }: { data: DemoData }) {
|
||
const { firma, istatistikler, hizmetler, doktorlar, yorumlar } = data;
|
||
const heroRef = useRef<HTMLDivElement>(null);
|
||
const { scrollYProgress } = useScroll({ target: heroRef, offset: ["start start", "end start"] });
|
||
const heroY = useTransform(scrollYProgress, [0, 1], ["0%", "30%"]);
|
||
const heroOpacity = useTransform(scrollYProgress, [0, 0.8], [1, 0]);
|
||
const [activeYorum, setActiveYorum] = useState(0);
|
||
const [menuOpen, setMenuOpen] = useState(false);
|
||
|
||
return (
|
||
<div className="bg-[#FAF9F6] text-[#1C1917] font-body">
|
||
|
||
{/* ── HEADER ── */}
|
||
<motion.header
|
||
className="fixed top-0 left-0 right-0 z-50 px-6 pt-5"
|
||
initial={{ y: -80 }}
|
||
animate={{ y: 0 }}
|
||
transition={{ duration: 0.6, ease: easeOutExpo }}
|
||
>
|
||
<div className="mx-auto max-w-6xl px-6 h-16 flex items-center justify-between bg-[#FAF9F6]/80 backdrop-blur-md border border-[#E7E5E4] rounded-full">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-8 h-8 rounded-lg bg-[#1C1917] flex items-center justify-center text-sm font-bold text-[#FAF9F6]">
|
||
{firma.logoEmoji}
|
||
</div>
|
||
<span className="font-display font-bold text-[15px] tracking-tight">{firma.adi}</span>
|
||
</div>
|
||
|
||
<nav className="hidden md:flex items-center gap-8">
|
||
{["Hizmetler", "Doktorlar", "Yorumlar", "İletişim"].map((item) => (
|
||
<a key={item} href={`#${item.toLowerCase()}`}
|
||
className="text-[12px] font-medium tracking-tight text-[#78716C] hover:text-[#1C1917] transition-colors duration-200">
|
||
{item}
|
||
</a>
|
||
))}
|
||
</nav>
|
||
|
||
<motion.a
|
||
href="#randevu"
|
||
className="hidden md:flex items-center gap-2 text-[12px] font-bold text-[#FAF9F6] bg-[#1C1917] px-5 py-2.5 rounded-full hover:bg-[#33302E] transition-colors"
|
||
whileTap={{ scale: 0.97 }}
|
||
>
|
||
Randevu Al
|
||
</motion.a>
|
||
|
||
<button className="md:hidden flex flex-col justify-center items-end gap-1 w-8 h-8 cursor-pointer" onClick={() => setMenuOpen(!menuOpen)}>
|
||
<span className={`h-0.5 bg-[#1C1917] transition-all duration-300 ${menuOpen ? "w-5 rotate-45 translate-y-1.5" : "w-5"}`} />
|
||
<span className={`h-0.5 bg-[#1C1917] transition-all duration-300 ${menuOpen ? "w-0 opacity-0" : "w-3"}`} />
|
||
<span className={`h-0.5 bg-[#1C1917] transition-all duration-300 ${menuOpen ? "w-5 -rotate-45 -translate-y-1.5" : "w-4"}`} />
|
||
</button>
|
||
</div>
|
||
|
||
{/* Mobile Dropdown */}
|
||
<AnimatePresence>
|
||
{menuOpen && (
|
||
<motion.div
|
||
className="md:hidden max-w-6xl mx-auto mt-2 bg-[#FAF9F6] border border-[#E7E5E4] rounded-2xl p-4 space-y-2"
|
||
initial={{ opacity: 0, y: -10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: -10 }}
|
||
transition={{ duration: 0.3, ease: easeOutExpo }}
|
||
>
|
||
{["Hizmetler", "Doktorlar", "Yorumlar", "İletişim", "Randevu"].map(item => (
|
||
<a
|
||
key={item}
|
||
href={item === "Randevu" ? "#randevu" : `#${item.toLowerCase()}`}
|
||
className="block text-[14px] font-medium py-2 px-3 rounded-lg hover:bg-[#E7E5E4]/30 text-[#1C1917]"
|
||
onClick={() => setMenuOpen(false)}
|
||
>
|
||
{item}
|
||
</a>
|
||
))}
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</motion.header>
|
||
|
||
{/* ── HERO ── */}
|
||
<section ref={heroRef} className="relative min-h-screen flex items-center overflow-hidden pt-24 pb-16 bg-[#FAF9F6]">
|
||
{/* Subtle grid pattern */}
|
||
<div className="absolute inset-0 pointer-events-none opacity-[0.03]"
|
||
style={{ backgroundImage: "radial-gradient(#1C1917 1px, transparent 1px)", backgroundSize: "32px 32px" }} />
|
||
|
||
<div className="relative z-10 max-w-6xl mx-auto px-6 w-full grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
|
||
|
||
{/* Hero Left */}
|
||
<motion.div className="lg:col-span-8" variants={stagger} initial="hidden" animate="show">
|
||
<motion.div variants={fadeUp}
|
||
className="inline-flex items-center gap-2 text-[11px] font-bold uppercase tracking-wider text-[#78716C] mb-8"
|
||
>
|
||
<span className="w-1.5 h-1.5 rounded-full bg-[#10B981]" />
|
||
{firma.sehir}'in Modern Sağlık Üssü
|
||
</motion.div>
|
||
|
||
<motion.h1 variants={fadeUp}
|
||
className="font-display font-black text-[12vw] sm:text-[8vw] lg:text-[5vw] leading-[0.9] tracking-tight uppercase text-[#1C1917] mb-8">
|
||
Sağlığınız İçin<br />
|
||
<span className="text-transparent stroke-text" style={{ WebkitTextStroke: "1px #1C1917" }}>En Doğru</span> Adım.
|
||
</motion.h1>
|
||
|
||
<motion.p variants={fadeUp} className="text-[#57534E] text-base sm:text-lg leading-relaxed max-w-xl mb-10 font-light">
|
||
{firma.slogan}. Son teknoloji teşhis altyapımız ve alanında uzman hekim kadromuz ile her hastamıza kişiselleştirilmiş bir bakım süreci vadediyoruz.
|
||
</motion.p>
|
||
|
||
<motion.div variants={fadeUp} className="flex flex-wrap gap-4 mb-12">
|
||
<motion.a href="#randevu"
|
||
className="flex items-center justify-center px-8 py-4 rounded-full font-bold text-[13px] tracking-wide uppercase bg-[#1C1917] text-[#FAF9F6] cursor-pointer hover:bg-[#33302E] transition-all duration-200"
|
||
whileTap={{ scale: 0.97 }}>
|
||
📅 Randevu Oluştur
|
||
</motion.a>
|
||
<motion.a href="#hizmetler"
|
||
className="flex items-center justify-center px-8 py-4 rounded-full font-bold text-[13px] tracking-wide uppercase border border-[#E7E5E4] text-[#1C1917] hover:bg-[#E7E5E4]/20 transition-all cursor-pointer duration-200"
|
||
whileTap={{ scale: 0.97 }}>
|
||
Hizmetler →
|
||
</motion.a>
|
||
</motion.div>
|
||
|
||
{/* Stats */}
|
||
<motion.div variants={fadeUp} className="grid grid-cols-2 sm:grid-cols-4 gap-6 pt-10 border-t border-[#E7E5E4]">
|
||
{istatistikler.map(s => {
|
||
const val = parseInt(s.deger.replace(/\D/g, "")) || 0;
|
||
const suf = s.deger.replace(/[0-9]/g, "");
|
||
return (
|
||
<div key={s.etiket}>
|
||
<div className="text-3xl font-display font-black text-[#1C1917]">
|
||
<AnimatedCounter target={val} suffix={suf} />
|
||
</div>
|
||
<div className="text-[#78716C] text-[10px] uppercase tracking-wider font-semibold mt-1">{s.etiket}</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
{/* Hero Right */}
|
||
<motion.div
|
||
className="lg:col-span-4 hidden lg:block"
|
||
initial={{ opacity: 0, x: 30 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.3, ease: easeOutExpo }}
|
||
style={{ y: heroY }}
|
||
>
|
||
<div className="bg-[#FAF9F6] border border-[#E7E5E4] rounded-3xl p-6 shadow-sm">
|
||
<div className="flex items-center justify-between border-b border-[#E7E5E4] pb-4 mb-4">
|
||
<span className="font-display font-bold text-[12px] uppercase tracking-wider text-[#78716C]">Günlük Randevu Akışı</span>
|
||
<span className="w-1.5 h-1.5 rounded-full bg-[#10B981] animate-pulse" />
|
||
</div>
|
||
|
||
<div className="space-y-3">
|
||
{[
|
||
{ 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 Polikliniği", dolu: false },
|
||
].map((r, i) => (
|
||
<div key={i} className="flex items-center justify-between p-3 rounded-2xl bg-[#FAF9F6] border border-[#E7E5E4]/60">
|
||
<div className="flex items-center gap-3">
|
||
<span className={`w-2 h-2 rounded-full ${r.dolu ? "bg-red-400" : "bg-green-400"}`} />
|
||
<div>
|
||
<p className="text-[#1C1917] text-[12px] font-bold">{r.saat}</p>
|
||
<p className="text-[#78716C] text-[10px]">{r.tip}</p>
|
||
</div>
|
||
</div>
|
||
<span className={`text-[10px] font-bold px-2 py-0.5 rounded-full ${r.dolu ? "bg-red-50 text-red-500" : "bg-green-50 text-green-500"}`}>
|
||
{r.dolu ? "Dolu" : "Müsait"}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── HİZMETLER ── */}
|
||
<section id="hizmetler" className="py-24 px-6 border-t border-[#E7E5E4] bg-[#FAF9F6]">
|
||
<div className="max-w-6xl mx-auto">
|
||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 border-b border-[#E7E5E4] pb-12 mb-16">
|
||
<div className="lg:col-span-5">
|
||
<span className="inline-block text-[11px] font-bold uppercase tracking-widest px-3 py-1 bg-[#FAF9F6] border border-[#E7E5E4] rounded-full text-[#78716C] mb-4">
|
||
Tıbbi Birimlerimiz
|
||
</span>
|
||
<h2 className="font-display font-black text-4xl sm:text-5xl uppercase leading-tight tracking-tight text-[#1C1917]">
|
||
Kapsamlı Tedavi Çözümleri
|
||
</h2>
|
||
</div>
|
||
<div className="lg:col-span-7 flex items-end">
|
||
<p className="text-[#57534E] text-base leading-relaxed font-light lg:pl-8 border-l border-transparent lg:border-[#E7E5E4]">
|
||
Her branşta yüksek teknolojik imkanlarla entegre edilmiş tanı ünitelerimiz ile kusursuz bir klinik deneyim sunuyoruz.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{hizmetler.map((h, i) => (
|
||
<motion.div key={i}
|
||
className="group p-8 rounded-3xl border border-[#E7E5E4] bg-[#FAF9F6] hover:border-[#1C1917] transition-all duration-300 flex flex-col justify-between min-h-[220px]"
|
||
whileHover={{ y: -4 }}
|
||
initial="hidden"
|
||
whileInView="show"
|
||
viewport={{ once: true }}
|
||
variants={fadeUp}>
|
||
<div>
|
||
<div className="w-10 h-10 rounded-xl bg-[#1C1917]/5 flex items-center justify-center mb-6 group-hover:bg-[#1C1917] group-hover:text-[#FAF9F6] transition-colors duration-300">
|
||
<span className="text-xl">🩺</span>
|
||
</div>
|
||
<h3 className="font-display font-black text-xl uppercase text-[#1C1917] mb-2">{h.baslik}</h3>
|
||
<p className="text-[#57534E] text-[13px] leading-relaxed font-light">{h.aciklama}</p>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── DOKTORLAR ── */}
|
||
{doktorlar && (
|
||
<section id="doktorlar" className="py-24 px-6 border-t border-[#E7E5E4] bg-[#FAF9F6]">
|
||
<div className="max-w-6xl mx-auto">
|
||
<div className="mb-16">
|
||
<span className="inline-block text-[11px] font-bold uppercase tracking-widest px-3 py-1 bg-[#FAF9F6] border border-[#E7E5E4] rounded-full text-[#78716C] mb-4">
|
||
Hekim Kadromuz
|
||
</span>
|
||
<h2 className="font-display font-black text-4xl sm:text-5xl uppercase tracking-tight text-[#1C1917]">
|
||
Alanında Öncü Akademik Ekip
|
||
</h2>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
{doktorlar.map((d, i) => (
|
||
<motion.div key={i}
|
||
className="bg-[#FAF9F6] border border-[#E7E5E4] rounded-3xl overflow-hidden hover:border-[#1C1917] transition-all duration-300 flex flex-col justify-between"
|
||
whileHover={{ y: -6 }}
|
||
initial="hidden"
|
||
whileInView="show"
|
||
viewport={{ once: true }}
|
||
variants={fadeUp}>
|
||
<div className="h-44 bg-[#FAF9F6] border-b border-[#E7E5E4] flex items-center justify-center text-5xl relative">
|
||
<span className="z-10">{d.emoji}</span>
|
||
</div>
|
||
<div className="p-6">
|
||
<h3 className="font-display font-black text-[15px] uppercase text-[#1C1917]">{d.ad}</h3>
|
||
<p className="text-[12px] font-bold uppercase tracking-wider text-[#78716C] mt-0.5 mb-3">{d.uzmanlik}</p>
|
||
<div className="flex items-center justify-between text-[11px] text-[#78716C] pt-3 border-t border-[#E7E5E4]/60">
|
||
<span>⭐ {d.puan}</span>
|
||
<span>🏥 {d.yil} Yıl</span>
|
||
<span>👥 {d.hasta}+ Hasta</span>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* ── RANDEVU ── */}
|
||
<section id="randevu" className="py-24 px-6 border-t border-[#E7E5E4] bg-[#FAF9F6]">
|
||
<div className="max-w-6xl mx-auto">
|
||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
|
||
|
||
{/* Left */}
|
||
<div className="lg:col-span-5">
|
||
<span className="inline-block text-[11px] font-bold uppercase tracking-widest px-3 py-1 bg-[#FAF9F6] border border-[#E7E5E4] rounded-full text-[#78716C] mb-4">
|
||
Hızlı Destek Hattı
|
||
</span>
|
||
<h2 className="font-display font-black text-4xl sm:text-5xl uppercase tracking-tight text-[#1C1917] leading-tight mb-8">
|
||
İletişime Geçin
|
||
</h2>
|
||
<p className="text-[#57534E] text-base font-light mb-10">
|
||
Form üzerinden randevu talebi oluşturun. Tıbbi sekreterliğimiz detayları onaylamak üzere sizi en kısa sürede arayacaktır.
|
||
</p>
|
||
|
||
<div className="space-y-4">
|
||
{[
|
||
{ ikon: "📞", baslik: "Çağrı Merkezi", val: firma.telefon },
|
||
{ ikon: "📍", baslik: "Poliklinik Adresi", val: firma.adres },
|
||
{ ikon: "✉️", baslik: "Resmi Yazışmalar", val: firma.email },
|
||
].map((item) => (
|
||
<div key={item.baslik} className="flex gap-4 bg-[#FAF9F6] border border-[#E7E5E4] rounded-2xl p-4">
|
||
<span className="text-xl">{item.ikon}</span>
|
||
<div>
|
||
<p className="text-[#78716C] text-[10px] font-bold uppercase tracking-wider">{item.baslik}</p>
|
||
<p className="text-[#1C1917] text-[13px] font-semibold mt-0.5">{item.val}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right Form */}
|
||
<div className="lg:col-span-7 bg-[#FAF9F6] border border-[#E7E5E4] rounded-3xl p-8 shadow-sm">
|
||
<h3 className="font-display font-black text-xl uppercase text-[#1C1917] mb-6">Online Randevu Formu</h3>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||
{[
|
||
{ label: "Hasta Adı Soyadı", placeholder: "Ad Soyad", type: "text" },
|
||
{ label: "Telefon Numarası", placeholder: "05xx xxx xx xx", type: "tel" },
|
||
{ label: "E-Posta Adresi", placeholder: "e-posta@adresiniz.com", type: "email" },
|
||
{ label: "Birim / Poliklinik", type: "select" },
|
||
{ label: "Tercih Edilen Tarih", type: "date" },
|
||
{ label: "Şikayet / Not", placeholder: "Tıbbi geçmişiniz veya eklemek istediğiniz notlar...", type: "textarea", full: true }
|
||
].map((field, i) => (
|
||
<div key={i} className={field.full ? "sm:col-span-2 flex flex-col" : "flex flex-col"}>
|
||
<label className="text-[11px] font-bold uppercase tracking-wider text-[#78716C] mb-2">{field.label}</label>
|
||
{field.type === "select" ? (
|
||
<select className="w-full px-0 py-3 bg-transparent border-b border-[#E7E5E4] text-[#1C1917] text-sm focus:outline-none focus:border-[#1C1917] transition-colors rounded-none appearance-none cursor-pointer">
|
||
<option>Dahiliye</option>
|
||
<option>Kardiyoloji</option>
|
||
<option>Göz Sağlığı</option>
|
||
<option>Diş Hekimliği</option>
|
||
</select>
|
||
) : field.type === "textarea" ? (
|
||
<textarea rows={3} placeholder={field.placeholder} className="w-full px-0 py-3 bg-transparent border-b border-[#E7E5E4] text-[#1C1917] placeholder-[#78716C]/40 text-sm focus:outline-none focus:border-[#1C1917] transition-colors resize-none rounded-none" />
|
||
) : (
|
||
<input type={field.type} placeholder={field.placeholder} className="w-full px-0 py-3 bg-transparent border-b border-[#E7E5E4] text-[#1C1917] placeholder-[#78716C]/40 text-sm focus:outline-none focus:border-[#1C1917] transition-colors rounded-none" />
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
<motion.button
|
||
className="mt-8 w-full py-4 rounded-full font-bold text-[13px] tracking-wide uppercase bg-[#1C1917] text-[#FAF9F6] hover:bg-[#33302E] transition-colors cursor-pointer"
|
||
whileTap={{ scale: 0.98 }}>
|
||
Randevu Talebi Gönder
|
||
</motion.button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── YORUMLAR ── */}
|
||
<section id="yorumlar" className="py-24 px-6 border-t border-[#E7E5E4] bg-[#FAF9F6]">
|
||
<div className="max-w-3xl mx-auto">
|
||
<div className="mb-16 text-center">
|
||
<span className="inline-block text-[11px] font-bold uppercase tracking-widest px-3 py-1 bg-[#FAF9F6] border border-[#E7E5E4] rounded-full text-[#78716C] mb-4">
|
||
Hasta Görüşleri
|
||
</span>
|
||
<h2 className="font-display font-black text-4xl sm:text-5xl uppercase tracking-tight text-[#1C1917]">
|
||
Hasta Deneyimleri
|
||
</h2>
|
||
</div>
|
||
|
||
<div className="relative border border-[#E7E5E4] rounded-3xl p-8 bg-[#FAF9F6]">
|
||
<AnimatePresence mode="wait">
|
||
<motion.div
|
||
key={activeYorum}
|
||
className="min-h-[160px] flex flex-col justify-between"
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: -10 }}
|
||
transition={{ duration: 0.4 }}>
|
||
<div>
|
||
<div className="flex gap-1 mb-4">
|
||
{[...Array(yorumlar[activeYorum].puan)].map((_, i) => (
|
||
<span key={i} className="text-yellow-500 text-lg">★</span>
|
||
))}
|
||
</div>
|
||
<p className="text-[#57534E] text-base leading-relaxed italic font-light mb-6">
|
||
“{yorumlar[activeYorum].yorum}”
|
||
</p>
|
||
</div>
|
||
<div className="flex items-center gap-3 pt-4 border-t border-[#E7E5E4]/60">
|
||
<span className="text-2xl">{yorumlar[activeYorum].emoji}</span>
|
||
<div>
|
||
<p className="text-[#1C1917] font-bold text-sm uppercase tracking-tight">{yorumlar[activeYorum].yazar}</p>
|
||
<p className="text-[#78716C] text-[11px]">{yorumlar[activeYorum].tarih}</p>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</AnimatePresence>
|
||
|
||
<div className="flex justify-center gap-2 mt-8">
|
||
{yorumlar.map((_, i) => (
|
||
<button key={i} onClick={() => setActiveYorum(i)}
|
||
className="w-2 h-2 rounded-full cursor-pointer transition-all"
|
||
style={{ background: i === activeYorum ? "#1C1917" : "#E7E5E4",
|
||
transform: i === activeYorum ? "scale(1.2)" : "scale(1)" }} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── FOOTER ── */}
|
||
<footer className="border-t border-[#E7E5E4] bg-[#FAF9F6] px-6 pt-16 pb-8">
|
||
<div className="max-w-6xl mx-auto flex flex-col sm:flex-row justify-between items-center gap-4 text-[12px] text-[#78716C]">
|
||
<p>© 2026 {firma.adi}. Tüm hakları saklıdır.</p>
|
||
<div className="flex gap-6">
|
||
<a href="#" className="hover:text-[#1C1917] font-light">Gizlilik Bildirgesi</a>
|
||
<a href="#" className="hover:text-[#1C1917] font-light">Çerez Ayarları</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<style jsx global>{`
|
||
.stroke-text {
|
||
font-weight: 900;
|
||
color: transparent;
|
||
}
|
||
`}</style>
|
||
|
||
</div>
|
||
);
|
||
}
|