Merge version_1 into main #1

Merged
bender merged 1 commits from version_1 into main 2026-05-10 06:29:45 +00:00

View File

@@ -29,382 +29,183 @@ export default function LandingPage() {
headingFontWeight="bold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "Services",
id: "services",
},
{
name: "Testimonials",
id: "testimonials",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Klinik Ikram KB"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "hero" },
{ name: "Services", id: "services" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Contact", id: "contact" },
]}
brandName="Klinik Ikram KB"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
background={{
variant: "gradient-bars",
}}
title="Kesihatan Anda, Keutamaan Kami."
description="Klinik Ikram Kota Bharu menyediakan rawatan perubatan 24 jam yang profesional, telus, dan mesra pelanggan. Kami sentiasa sedia berkhidmat untuk anda."
kpis={[
{
value: "24/7",
label: "Sentiasa Sedia",
},
{
value: "Pakar",
label: "Doktor Berpengalaman",
},
{
value: "Moden",
label: "Peralatan Canggih",
},
]}
enableKpiAnimation={true}
buttons={[
{
text: "Temujanji Sekarang",
href: "#contact",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/empty-medical-office-with-desktop-pc_482257-110139.jpg"
mediaAnimation="blur-reveal"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/nobody-doctors-office-with-modern-funiture-medical-facility-empty-examination-cabinet-healthcare-specialist-close-up-white-desk-with-laptop-stethoscope-pens_482257-28596.jpg",
alt: "Doctor profile 1",
},
{
src: "http://img.b2bpic.net/free-photo/empty-medical-office-with-technology_482257-110140.jpg",
alt: "Doctor profile 2",
},
{
src: "http://img.b2bpic.net/free-photo/empty-hospital-reception-counter-hallway-waiting-room-seats-medical-examination-appointment-with-physician-registration-desk-with-waiting-area-help-patients-with-disease-diagnosis_482257-51632.jpg",
alt: "Doctor profile 3",
},
{
src: "http://img.b2bpic.net/free-photo/vacant-hospital-room-with-laptop_482257-119789.jpg",
alt: "Doctor profile 4",
},
{
src: "http://img.b2bpic.net/free-photo/empty-healthcare-medical-office-no-people-modern-hospital-interior-computer-desk-with-examining-diagnostic-data-checking-disease-doctor-medical-space_482257-64606.jpg",
alt: "Doctor profile 5",
},
]}
avatarText="Dipercayai oleh ribuan pesakit"
marqueeItems={[
{
type: "text",
text: "Rawatan Kecemasan 24 Jam",
},
{
type: "text",
text: "Doktor Pakar Bertauliah",
},
{
type: "text",
text: "Peralatan Diagnostik Terkini",
},
{
type: "text",
text: "Persekitaran Selesa & Bersih",
},
{
type: "text",
text: "Harga Perubatan Berpatutan",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
background={{ variant: "gradient-bars" }}
title="Kesihatan Anda, Keutamaan Kami."
description="Klinik Ikram Kota Bharu menyediakan rawatan perubatan 24 jam yang profesional, telus, dan mesra pelanggan. Kami sentiasa sedia berkhidmat untuk anda."
kpis={[
{ value: "24/7", label: "Sentiasa Sedia" },
{ value: "Pakar", label: "Doktor Berpengalaman" },
{ value: "Moden", label: "Peralatan Canggih" },
]}
enableKpiAnimation={true}
buttons={[{ text: "Temujanji Sekarang", href: "#contact" }]}
imageSrc="http://img.b2bpic.net/free-photo/empty-medical-office-with-desktop-pc_482257-110139.jpg"
mediaAnimation="blur-reveal"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/nobody-doctors-office-with-modern-funiture-medical-facility-empty-examination-cabinet-healthcare-specialist-close-up-white-desk-with-laptop-stethoscope-pens_482257-28596.jpg", alt: "Doctor profile 1" },
{ src: "http://img.b2bpic.net/free-photo/empty-medical-office-with-technology_482257-110140.jpg", alt: "Doctor profile 2" },
{ src: "http://img.b2bpic.net/free-photo/empty-hospital-reception-counter-hallway-waiting-room-seats-medical-examination-appointment-with-physician-registration-desk-with-waiting-area-help-patients-with-disease-diagnosis_482257-51632.jpg", alt: "Doctor profile 3" },
{ src: "http://img.b2bpic.net/free-photo/vacant-hospital-room-with-laptop_482257-119789.jpg", alt: "Doctor profile 4" },
{ src: "http://img.b2bpic.net/free-photo/empty-healthcare-medical-office-no-people-modern-hospital-interior-computer-desk-with-examining-diagnostic-data-checking-disease-doctor-medical-space_482257-64606.jpg", alt: "Doctor profile 5" },
]}
avatarText="Dipercayai oleh ribuan pesakit"
marqueeItems={[
{ type: "text", text: "Rawatan Kecemasan 24 Jam" },
{ type: "text", text: "Doktor Pakar Bertauliah" },
{ type: "text", text: "Peralatan Diagnostik Terkini" },
{ type: "text", text: "Persekitaran Selesa & Bersih" },
{ type: "text", text: "Harga Perubatan Berpatutan" },
]}
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={true}
title="Perkhidmatan Perubatan Berkualiti"
metrics={[
{
icon: Activity,
label: "Rawatan Am",
value: "Berkualiti",
},
{
icon: Heart,
label: "Check Jantung",
value: "ECG",
},
{
icon: Droplet,
label: "Vaksin",
value: "Segera",
},
]}
metricsAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={true}
title="Perkhidmatan Perubatan Berkualiti"
metrics={[
{ icon: Activity, label: "Rawatan Am", value: "Berkualiti" },
{ icon: Heart, label: "Check Jantung", value: "ECG" },
{ icon: Droplet, label: "Vaksin", value: "Segera" },
]}
metricsAnimation="slide-up"
/>
</div>
<div id="services" data-section="services">
<FeatureBorderGlow
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
icon: Activity,
title: "Rawatan Am & Drip",
description: "Rawatan rutin untuk kesihatan keluarga.",
},
{
icon: ShieldCheck,
title: "Pemeriksaan Kesihatan",
description: "Check-up lengkap untuk kesejahteraan anda.",
},
{
icon: User,
title: "Kesihatan Lelaki",
description: "Program khusus yang telus dan profesional.",
},
]}
title="Rawatan Kami"
description="Menawarkan pelbagai perkhidmatan perubatan dengan standard kualiti tertinggi."
/>
</div>
<div id="services" data-section="services">
<FeatureBorderGlow
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{ icon: Activity, title: "Rawatan Am & Drip", description: "Rawatan rutin untuk kesihatan keluarga." },
{ icon: ShieldCheck, title: "Pemeriksaan Kesihatan", description: "Check-up lengkap untuk kesejahteraan anda." },
{ icon: User, title: "Kesihatan Lelaki", description: "Program khusus yang telus dan profesional." },
]}
title="Rawatan Kami"
description="Menawarkan pelbagai perkhidmatan perubatan dengan standard kualiti tertinggi."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEleven
textboxLayout="split"
useInvertedBackground={true}
metrics={[
{
id: "m1",
value: "100%",
title: "Puas Hati",
description: "Maklum balas pelanggan yang positif.",
imageSrc: "http://img.b2bpic.net/free-photo/doctor-using-x-ray-unit-control-panel-patient_107420-63776.jpg",
},
{
id: "m2",
value: "Pakar",
title: "Doktor Mesra",
description: "Penjelasan jelas dan mudah difahami.",
imageSrc: "http://img.b2bpic.net/free-photo/modern-hospital-machinery-illuminates-blue-mri-scanner-generated-by-ai_188544-44420.jpg",
},
{
id: "m3",
value: "Bersih",
title: "Persekitaran Selesa",
description: "Klinik yang terjaga kebersihannya.",
imageSrc: "http://img.b2bpic.net/free-photo/african-american-nurse-takes-notes-consultation-with-old-people_482257-122742.jpg",
},
]}
title="Kecemerlangan Klinikal"
description="Hasil perkhidmatan kami yang dipercayai oleh masyarakat."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEleven
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
metrics={[
{
id: "m1", value: "100%", title: "Puas Hati", description: "Maklum balas pelanggan yang positif.", imageSrc: "http://img.b2bpic.net/free-photo/doctor-using-x-ray-unit-control-panel-patient_107420-63776.jpg"},
{
id: "m2", value: "Pakar", title: "Doktor Mesra", description: "Penjelasan jelas dan mudah difahami.", imageSrc: "http://img.b2bpic.net/free-photo/modern-hospital-machinery-illuminates-blue-mri-scanner-generated-by-ai_188544-44420.jpg"},
{
id: "m3", value: "Bersih", title: "Persekitaran Selesa", description: "Klinik yang terjaga kebersihannya.", imageSrc: "http://img.b2bpic.net/free-photo/african-american-nurse-takes-notes-consultation-with-old-people_482257-122742.jpg"},
]}
title="Kecemerlangan Klinikal"
description="Hasil perkhidmatan kami yang dipercayai oleh masyarakat."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{
id: "t1",
title: "Sangat Membantu",
quote: "Doktor sangat membantu dan penjelasan jelas.",
name: "Hindunitul Syifa",
role: "Pelanggan",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-female-doctor-patient_23-2149844603.jpg",
},
{
id: "t2",
title: "Peralatan Canggih",
quote: "Peralatan canggih, doktor pakar dan mesra.",
name: "Chegumark",
role: "Pelanggan",
imageSrc: "http://img.b2bpic.net/free-photo/smiley-doctor-posing-patient_23-2148757390.jpg",
},
{
id: "t3",
title: "Penerangan Jelas",
quote: "Penjelasan doktor berkaitan keadaan kesihatan sangat jelas.",
name: "Khairul Izzuddin",
role: "Pelanggan",
imageSrc: "http://img.b2bpic.net/free-photo/young-happy-nurse-duty-communicating-with-mature-man-reception-desk-clinic_637285-471.jpg",
},
{
id: "t4",
title: "Bersih Selesa",
quote: "Klinik bersih dan selesa, servis sangat terbaik.",
name: "Fatin Atikah",
role: "Pelanggan",
imageSrc: "http://img.b2bpic.net/free-photo/smiling-healthcare-worker-with-headset-working-hospital-call-center-looking-camera_637285-4900.jpg",
},
{
id: "t5",
title: "Profesional",
quote: "Staf profesional dan doktor sangat membantu.",
name: "Zati Hani",
role: "Pelanggan",
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-nurses-talking_23-2148501139.jpg",
},
]}
title="Kata Pelanggan Kami"
description="Kami amat menghargai kepercayaan yang diberikan oleh pelanggan kami."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{ id: "t1", title: "Sangat Membantu", quote: "Doktor sangat membantu dan penjelasan jelas.", name: "Hindunitul Syifa", role: "Pelanggan", imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-female-doctor-patient_23-2149844603.jpg" },
{ id: "t2", title: "Peralatan Canggih", quote: "Peralatan canggih, doktor pakar dan mesra.", name: "Chegumark", role: "Pelanggan", imageSrc: "http://img.b2bpic.net/free-photo/smiley-doctor-posing-patient_23-2148757390.jpg" },
{ id: "t3", title: "Penerangan Jelas", quote: "Penjelasan doktor berkaitan keadaan kesihatan sangat jelas.", name: "Khairul Izzuddin", role: "Pelanggan", imageSrc: "http://img.b2bpic.net/free-photo/young-happy-nurse-duty-communicating-with-mature-man-reception-desk-clinic_637285-471.jpg" },
{ id: "t4", title: "Bersih Selesa", quote: "Klinik bersih dan selesa, servis sangat terbaik.", name: "Fatin Atikah", role: "Pelanggan", imageSrc: "http://img.b2bpic.net/free-photo/smiling-healthcare-worker-with-headset-working-hospital-call-center-looking-camera_637285-4900.jpg" },
{ id: "t5", title: "Profesional", quote: "Staf profesional dan doktor sangat membantu.", name: "Zati Hani", role: "Pelanggan", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-nurses-talking_23-2148501139.jpg" },
]}
title="Kata Pelanggan Kami"
description="Kami amat menghargai kepercayaan yang diberikan oleh pelanggan kami."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
plans={[
{
id: "p1",
price: "RM 50",
name: "Rawatan Asas",
buttons: [
{
text: "Pilih",
href: "#contact",
},
],
features: [
"Pemeriksaan Am",
"Ubat-ubatan Asas",
"Konsultasi",
],
},
{
id: "p2",
price: "RM 150",
name: "Check-up Penuh",
buttons: [
{
text: "Pilih",
href: "#contact",
},
],
features: [
"FBC",
"ECG",
"Body Analysis",
"Konsultasi",
],
},
{
id: "p3",
price: "RM 250",
name: "Wellness Pro",
buttons: [
{
text: "Pilih",
href: "#contact",
},
],
features: [
"Pakej Penuh",
"Program Kesihatan Lelaki",
"Rawatan Saraf",
],
},
]}
title="Pakej Kesihatan"
description="Harga berpatutan tanpa mengabaikan kualiti rawatan."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
plans={[
{
id: "p1", price: "RM 50", name: "Rawatan Asas", buttons: [{ text: "Pilih", href: "#contact" }],
features: ["Pemeriksaan Am", "Ubat-ubatan Asas", "Konsultasi"],
},
{
id: "p2", price: "RM 150", name: "Check-up Penuh", buttons: [{ text: "Pilih", href: "#contact" }],
features: ["FBC", "ECG", "Body Analysis", "Konsultasi"],
},
{
id: "p3", price: "RM 250", name: "Wellness Pro", buttons: [{ text: "Pilih", href: "#contact" }],
features: ["Pakej Penuh", "Program Kesihatan Lelaki", "Rawatan Saraf"],
},
]}
title="Pakej Kesihatan"
description="Harga berpatutan tanpa mengabaikan kualiti rawatan."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{
id: "f1",
title: "Adakah klinik buka 24 jam?",
content: "Ya, Klinik Ikram Kota Bharu beroperasi 24 jam sehari.",
},
{
id: "f2",
title: "Perlukan temujanji?",
content: "Kami mengalu-alukan temujanji, namun kes kecemasan diutamakan.",
},
{
id: "f3",
title: "Jenis rawatan apa disediakan?",
content: "Kami menyediakan rawatan am, ECG, vaksin, kesihatan lelaki dan banyak lagi.",
},
]}
sideTitle="Soalan Lazim"
sideDescription="Dapatkan jawapan mengenai perkhidmatan kami di sini."
faqsAnimation="blur-reveal"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{ id: "f1", title: "Adakah klinik buka 24 jam?", content: "Ya, Klinik Ikram Kota Bharu beroperasi 24 jam sehari." },
{ id: "f2", title: "Perlukan temujanji?", content: "Kami mengalu-alukan temujanji, namun kes kecemasan diutamakan." },
{ id: "f3", title: "Jenis rawatan apa disediakan?", content: "Kami menyediakan rawatan am, ECG, vaksin, kesihatan lelaki dan banyak lagi." },
]}
sideTitle="Soalan Lazim"
sideDescription="Dapatkan jawapan mengenai perkhidmatan kami di sini."
faqsAnimation="blur-reveal"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={true}
background={{
variant: "plain",
}}
tag="Hubungi Kami"
title="Kami Sedia Membantu"
description="Untuk sebarang pertanyaan atau temujanji, sila hubungi kami terus."
imageSrc="http://img.b2bpic.net/free-photo/portrait-hospital-receptionist-working-administrative-counter-help-patients-with-appointments-female-secretary-giving-support-healthcare-reception-desk-facility_482257-48713.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={true}
background={{ variant: "plain" }}
tag="Hubungi Kami"
title="Kami Sedia Membantu"
description="Untuk sebarang pertanyaan atau temujanji, sila hubungi kami terus."
imageSrc="http://img.b2bpic.net/free-photo/portrait-hospital-receptionist-working-administrative-counter-help-patients-with-appointments-female-secretary-giving-support-healthcare-reception-desk-facility_482257-48713.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/nobody-hospital-waiting-room-front-desk-with-office-supplies-promotional-flyers-healthcare-facility-empty-reception-counter-with-no-people-private-practice-clinic_482257-45891.jpg"
logoText="Klinik Ikram KB"
columns={[
{
title: "Navigasi",
items: [
{
label: "Utama",
href: "#hero",
},
{
label: "Servis",
href: "#services",
},
{
label: "Testimoni",
href: "#testimonials",
},
],
},
{
title: "Hubungi",
items: [
{
label: "Alamat",
href: "#",
},
{
label: "Telefon",
href: "#",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/nobody-hospital-waiting-room-front-desk-with-office-supplies-promotional-flyers-healthcare-facility-empty-reception-counter-with-no-people-private-practice-clinic_482257-45891.jpg"
logoText="Klinik Ikram KB"
columns={[
{
title: "Navigasi", items: [
{ label: "Utama", href: "#hero" },
{ label: "Servis", href: "#services" },
{ label: "Testimoni", href: "#testimonials" },
],
},
{
title: "Hubungi", items: [
{ label: "Alamat", href: "#" },
{ label: "Telefon", href: "#" },
],
},
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);