Merge version_1 into main #4

Merged
bender merged 1 commits from version_1 into main 2026-03-05 00:34:33 +00:00

View File

@@ -1,325 +1,10 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Sparkles, Heart, Award, Check, Star, Zap, HelpCircle, BookOpen, Mail } from 'lucide-react';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="smallMedium"
sizing="mediumLarge"
background="blurBottom"
cardStyle="layered-gradient"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Glowé"
navItems={[
{ name: "Tentang", id: "about" },
{ name: "Produk", id: "products" },
{ name: "Kenapa Kami", id: "why-us" },
{ name: "Testimoni", id: "testimonials" }
]}
button={{ text: "Belanja Sekarang", href: "contact" }}
animateOnLoad={true}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardGallery
title="Kulit Glowing Sehat Dimulai di Sini"
description="Temukan rahasia kecantikan alami dengan produk skincare premium Glowé. Diformulasikan khusus untuk wanita Indonesia modern yang menginginkan kulit bercahaya tanpa kompromi kualitas."
background={{ variant: "radial-gradient" }}
tag="Luxury Skincare"
tagIcon={Sparkles}
tagAnimation="slide-up"
buttons={[
{ text: "Jelajahi Koleksi", href: "products" },
{ text: "Pelajari Lebih", href: "about" }
]}
buttonAnimation="slide-up"
mediaItems={[
{ imageSrc: "/placeholders/placeholder1.webp?_wi=1", imageAlt: "Serum Vitamin C Premium Glowé" },
{ imageSrc: "/placeholders/placeholder1.webp?_wi=2", imageAlt: "Rose Water Essence Luxury" },
{ imageSrc: "/placeholders/placeholder1.webp?_wi=3", imageAlt: "Moisturizer Kaya Nutrisi" },
{ imageSrc: "/placeholders/placeholder1.webp?_wi=4", imageAlt: "Wanita dengan Kulit Glowing" },
{ imageSrc: "/placeholders/placeholder1.webp?_wi=5", imageAlt: "Ritual Skincare Mewah" }
]}
mediaAnimation="blur-reveal"
className="w-full"
containerClassName="max-w-7xl"
titleClassName="text-5xl md:text-6xl font-bold"
descriptionClassName="text-lg md:text-xl"
buttonContainerClassName="flex gap-4 flex-col md:flex-row"
/>
</div>
<div id="about" data-section="about">
<TestimonialAboutCard
tag="Tentang Glowé"
tagIcon={Heart}
tagAnimation="slide-up"
title="Percayakan Kulit Anda pada Keahlian Dermatologi dan Alam"
description="Dipercaya oleh 50.000+ Wanita Indonesia"
subdescription="Sejak 2019, Glowé berkomitmen menghadirkan skincare berkualitas internasional dengan sentuhan lokal yang memahami kebutuhan kulit tropis."
icon={Heart}
imageSrc="/placeholders/placeholder1.webp?_wi=6"
imageAlt="Ritual Skincare Glowé Premium"
mediaAnimation="slide-up"
useInvertedBackground={false}
className="w-full"
containerClassName="max-w-7xl"
titleClassName="text-4xl md:text-5xl font-bold leading-tight"
/>
</div>
<div id="products" data-section="products">
<ProductCardTwo
title="Rangkaian Produk Pilihan"
description="Setiap produk Glowé diformulasikan dengan bahan-bahan premium alami dan didukung riset dermatologi selama bertahun-tahun. Rasakan perbedaannya dalam 14 hari."
tag="Bestsellers"
tagIcon={Award}
tagAnimation="slide-up"
products={[
{
id: "1", brand: "Glowé", name: "Vitamin C Luminous Serum", price: "Rp 299.000", rating: 5,
reviewCount: "2.3k", imageSrc: "/placeholders/placeholder1.webp?_wi=7", imageAlt: "Serum Vitamin C Brightening"
},
{
id: "2", brand: "Glowé", name: "Rose Hydrating Toner", price: "Rp 179.000", rating: 5,
reviewCount: "1.8k", imageSrc: "/placeholders/placeholder1.webp?_wi=8", imageAlt: "Toner Mawar Pelembab"
},
{
id: "3", brand: "Glowé", name: "Clay Purifying Mask", price: "Rp 249.000", rating: 5,
reviewCount: "1.5k", imageSrc: "/placeholders/placeholder1.webp?_wi=9", imageAlt: "Masker Tanah Liat Pembersih"
},
{
id: "4", brand: "Glowé", name: "Gentle Cream Cleanser", price: "Rp 189.000", rating: 5,
reviewCount: "2.1k", imageSrc: "/placeholders/placeholder1.webp?_wi=10", imageAlt: "Pembersih Krim Lembut"
}
]}
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
containerClassName="max-w-7xl"
buttons={[{ text: "Lihat Semua Produk", href: "#products" }]}
/>
</div>
<div id="why-us" data-section="why-us">
<FeatureCardTwentySeven
title="Mengapa Wanita Indonesia Memilih Glowé"
description="Kombinasi sempurna antara bahan alami lokal dan teknologi skincare internasional."
tag="Keunggulan"
tagIcon={Check}
tagAnimation="slide-up"
features={[
{
id: "1", title: "100% Bahan Alami", description: "Tidak mengandung bahan kimia keras, paraben, atau pewarna sintetis. Setiap bahan dipilih dengan cermat dari kebun organik terpercaya di Indonesia.", imageSrc: "/placeholders/placeholder1.webp?_wi=11", imageAlt: "Bahan Alami Organik"
},
{
id: "2", title: "Teruji Dermatologi", description: "Semua produk telah melalui uji klinis ekstensif dengan dermatolog bersertifikat. Aman untuk kulit sensitif dan ibu hamil.", imageSrc: "/placeholders/placeholder1.webp?_wi=12", imageAlt: "Riset Dermatologi"
},
{
id: "3", title: "Hasil Nyata 14 Hari", description: "Pelanggan kami melaporkan kulit lebih cerah, lebih lembab, dan tekstur lebih halus dalam waktu singkat. Hasil terukur dengan kepuasan 98%.", imageSrc: "/placeholders/placeholder1.webp?_wi=13", imageAlt: "Hasil Nyata Sebelum Sesudah"
},
{
id: "4", title: "Layanan Pelanggan 24/7", description: "Tim ahli skincare kami siap membantu Anda memilih produk yang tepat untuk jenis kulit Anda kapan saja melalui chat, email, atau telepon.", imageSrc: "/placeholders/placeholder1.webp?_wi=14", imageAlt: "Dukungan Pelanggan"
}
]}
gridVariant="two-columns-alternating-heights"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
containerClassName="max-w-7xl"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
title="Dipercaya oleh Ribuan Wanita Indonesia"
description="Baca kisah nyata dari pelanggan setia Glowé yang telah merasakan transformasi kulit mereka."
tag="Testimonial"
tagIcon={Star}
tagAnimation="slide-up"
testimonials={[
{
id: "1", title: "Akhirnya Kulit Glowing Impianku Terwujud", quote: "Saya sudah mencoba banyak produk skincare mahal, tapi tidak ada yang seeffektif Glowé. Dalam sebulan, kulit saya terlihat lebih bercahaya dan teksturnya jadi lebih lembut. Saya sangat merekomendasikan ini!", name: "Siti Nurhaliza", role: "Entrepreneur", imageSrc: "/placeholders/placeholder1.webp?_wi=15", imageAlt: "Siti Nurhaliza"
},
{
id: "2", title: "Serum Vitamin C-nya Mengubah Segalanya", quote: "Kulit saya dulu kusam dan banyak jerawat. Setelah pakai Vitamin C Serum Glowé selama 2 minggu, benar-benar ada perubahan. Sekarang kulit saya cerah dan breakout berkurang signifikan.", name: "Putri Wijaya", role: "Content Creator", imageSrc: "/placeholders/placeholder1.webp?_wi=16", imageAlt: "Putri Wijaya"
},
{
id: "3", title: "Bahan Alami tapi Hasil Maksimal", quote: "Sebagai dermatologist, saya cukup selektif. Saya senang Glowé menggunakan bahan alami tanpa mengorbankan efektivitas. Produk ini cocok untuk konsultasi klien saya yang mencari skincare natural premium.", name: "Dr. Ratna Kusuma", role: "Dermatologist", imageSrc: "/placeholders/placeholder1.webp?_wi=17", imageAlt: "Dr. Ratna Kusuma"
},
{
id: "4", title: "Layanan Pelanggan yang Luar Biasa", quote: "Tidak hanya produknya bagus, tapi customer service mereka juga amazing. Mereka membantu saya memilih rangkaian produk yang tepat untuk kulit kombinasi saya. Worth it banget!", name: "Amanda Santosa", role: "Marketing Manager", imageSrc: "/placeholders/placeholder1.webp?_wi=18", imageAlt: "Amanda Santosa"
},
{
id: "5", title: "Usia 40+ dan Kulit Terlihat Lebih Muda", quote: "Di usia 42, saya mulai takut kulitku akan turun. Tapi Glowé membuat perbedaan nyata. Garis-garis halus berkurang, kulit lebih firm, dan saya merasa percaya diri lagi.", name: "Yuni Hartono", role: "Business Executive", imageSrc: "/placeholders/placeholder1.webp?_wi=19", imageAlt: "Yuni Hartono"
},
{
id: "6", title: "Investasi Terbaik untuk Kulit Saya", quote: "Harga mungkin sedikit lebih tinggi dari brand lokal biasa, tapi kualitas dan hasilnya tidak tertandingi. Ini investasi untuk kesehatan dan kecantikan kulit saya jangka panjang.", name: "Indah Permata", role: "Founder Beauty Community", imageSrc: "/placeholders/placeholder1.webp?_wi=20", imageAlt: "Indah Permata"
}
]}
textboxLayout="default"
useInvertedBackground={false}
containerClassName="max-w-7xl"
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardEight
title="Paket Perawatan Kulit Terpilih"
description="Pilih paket yang sesuai dengan kebutuhan dan budget Anda. Semua paket mencakup konsultasi gratis dengan ahli skincare kami."
tag="Harga Spesial"
tagIcon={Zap}
tagAnimation="slide-up"
plans={[
{
id: "starter", badge: "Populer untuk Pemula", badgeIcon: Sparkles,
price: "Rp 499.000", subtitle: "Rangkaian perawatan dasar", buttons: [{ text: "Mulai Sekarang", href: "contact" }],
features: [
"Gentle Cream Cleanser", "Rose Hydrating Toner", "Moisturizer Kaya Nutrisi", "Konsultasi Skincare 1x", "Gratis Ongkir Se-Indonesia"
]
},
{
id: "premium", badge: "Paling Populer ⭐", badgeIcon: Sparkles,
price: "Rp 899.000", subtitle: "Perawatan lengkap maksimal hasil", buttons: [{ text: "Pilih Paket Ini", href: "contact" }],
features: [
"Semua produk Starter +", "Vitamin C Luminous Serum", "Clay Purifying Mask", "Eye Contour Cream", "Konsultasi Skincare 3x", "Priority Customer Support", "Gratis Ongkir Se-Indonesia", "Diskon 15% pembelian tambahan"
]
},
{
id: "luxury", badge: "VIP Exclusive", badgeIcon: Heart,
price: "Rp 1.499.000", subtitle: "Perawatan premium dengan akses VIP", buttons: [{ text: "Akses VIP", href: "contact" }],
features: [
"Semua produk Premium +", "Advanced Anti-Aging Serum", "24K Gold Facial Essence", "Luxury Night Restoration Cream", "Konsultasi Skincare Unlimited", "VIP Phone Support 24/7", "Gratis Ongkir Ke Seluruh Dunia", "Diskon 25% sepanjang tahun", "Member card eksklusif", "Akses ke produk limited edition"
]
}
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
containerClassName="max-w-7xl"
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
title="Pertanyaan yang Sering Diajukan"
description="Temukan jawaban atas pertanyaan umum tentang produk dan layanan Glowé. Jika ada yang belum terjawab, hubungi tim customer service kami."
tag="Bantuan"
tagIcon={HelpCircle}
tagAnimation="slide-up"
faqs={[
{
id: "1", title: "Apakah produk Glowé aman untuk kulit sensitif?", content: "Ya, semua produk Glowé telah teruji dermatologi dan aman untuk kulit sensitif. Kami tidak menggunakan bahan kimia keras, fragrance sintetis, atau bahan iritasi lainnya. Namun, jika Anda memiliki alergi spesifik, sebaiknya konsultasikan dengan ahli skincare kami terlebih dahulu."
},
{
id: "2", title: "Berapa lama hasil skincare Glowé terlihat?", content: "Kebanyakan pelanggan melaporkan perubahan dalam 1-2 minggu, terutama pada tingkat hidrasi dan kecerahan kulit. Untuk hasil maksimal seperti pengurangan garis halus atau pori-pori, diperlukan waktu 4-8 minggu dengan penggunaan konsisten. Setiap kulit berbeda, jadi hasil mungkin bervariasi."
},
{
id: "3", title: "Bisa digunakan saat hamil dan menyusui?", content: "Ya, produk Glowé aman digunakan selama kehamilan dan menyusui. Kami tidak menggunakan retinol, vitamin A dosis tinggi, atau bahan berbahaya lainnya. Namun, konsultasikan dengan dokter kandungan Anda untuk memastikan tidak ada kontraindikasi personal."
},
{
id: "4", title: "Bagaimana cara menyimpan produk Glowé agar tahan lama?", content: "Simpan produk di tempat yang sejuk, kering, dan terlindungi dari sinar matahari langsung. Hindari suhu ekstrem (di atas 30°C atau di bawah 5°C). Jangan menyimpan di kamar mandi yang lembab karena kelembaban dapat merusak formula. Semua produk Glowé memiliki umur simpan minimal 2 tahun."
},
{
id: "5", title: "Apakah ada efek samping atau alergi yang mungkin terjadi?", content: "Produk Glowé dirancang untuk meminimalkan risiko alergi dan efek samping. Namun, beberapa orang mungkin mengalami purging (breakout awal) dalam 1-2 minggu karena proses detoxifikasi kulit, yang normal terjadi. Jika terjadi iritasi berkelanjutan, hentikan penggunaan dan konsultasikan dengan dermatolog."
},
{
id: "6", title: "Bagaimana proses pembelian dan pengiriman?", content: "Anda bisa berbelanja melalui website, Instagram, atau WhatsApp kami. Pengiriman gratis ke seluruh Indonesia untuk pembelian di atas Rp 300.000. Pengiriman standar membutuhkan waktu 2-5 hari kerja, sedangkan pengiriman express 1 hari. Semua paket diasuransikan penuh."
},
{
id: "7", title: "Berapa lama garansi uang kembali Glowé?", content: "Kami menawarkan jaminan kepuasan 30 hari atau uang kembali 100%. Jika Anda tidak puas dengan hasil, kembalikan produk (minimal 70% isi) dan kami akan memberikan refund penuh tanpa pertanyaan. Komitmen kami adalah kepuasan pelanggan."
},
{
id: "8", title: "Apakah Glowé melayani konsultasi skincare gratis?", content: "Ya, semua pelanggan Glowé mendapatkan akses gratis ke konsultasi skincare dengan ahli kami. Anda bisa menghubungi kami via WhatsApp, email, atau video call untuk mendiskusikan jenis kulit, masalah spesifik, dan rekomendasi produk yang tepat."
}
]}
textboxLayout="default"
useInvertedBackground={false}
faqsAnimation="slide-up"
containerClassName="max-w-7xl"
/>
</div>
<div id="blog" data-section="blog">
<BlogCardThree
title="Blog Insights Skincare"
description="Tips, trik, dan pengetahuan mendalam tentang perawatan kulit dari para ahli Glowé."
tag="Artikel Terbaru"
tagIcon={BookOpen}
tagAnimation="slide-up"
blogs={[
{
id: "1", category: "Skincare Routine", title: "Rutinitas Skincare 10 Menit untuk Wanita Sibuk", excerpt: "Tidak perlu waktu berjam-jam untuk merawat kulit. Pelajari rutinitas skincare efisien yang memberikan hasil maksimal dalam 10 menit setiap hari.", imageSrc: "/placeholders/placeholder1.webp?_wi=21", imageAlt: "Rutinitas Skincare Cepat", authorName: "Dr. Stella Wijaya", authorAvatar: "/placeholders/placeholder1.webp", date: "15 Jan 2025"
},
{
id: "2", category: "Beauty Secrets", title: "7 Rahasia Kulit Glowing dari Para Beauty Expert", excerpt: "Temukan rahasia yang digunakan oleh beauty influencer dan dermatologist untuk mendapatkan kulit yang bercahaya alami sepanjang waktu.", imageSrc: "/placeholders/placeholder1.webp?_wi=22", imageAlt: "Rahasia Kulit Glowing", authorName: "Amanda Santosa", authorAvatar: "/placeholders/placeholder1.webp", date: "12 Jan 2025"
},
{
id: "3", category: "Anti-Aging", title: "Kombinasi Produk Anti-Aging yang Tepat untuk Usia 40+", excerpt: "Usia bukan halangan untuk memiliki kulit yang terlihat muda dan sehat. Ketahui kombinasi skincare yang efektif untuk mengatasi tanda-tanda penuaan.", imageSrc: "/placeholders/placeholder1.webp?_wi=23", imageAlt: "Anti-Aging Skincare", authorName: "Yuni Hartono", authorAvatar: "/placeholders/placeholder1.webp", date: "10 Jan 2025"
}
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
containerClassName="max-w-7xl"
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
tag="Hubungi Kami"
tagIcon={Mail}
tagAnimation="slide-up"
title="Siap untuk Kulit Glowing Impianmu?"
description="Bergabunglah dengan ribuan wanita yang telah merasakan transformasi kulit mereka. Dapatkan konsultasi gratis dari ahli skincare kami hari ini."
buttons={[
{ text: "Chat dengan Kami", href: "https://wa.me/6281234567890" },
{ text: "Pesan Sekarang", href: "contact" }
]}
buttonAnimation="slide-up"
background={{ variant: "blurBottom" }}
useInvertedBackground={false}
containerClassName="max-w-7xl"
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Glowé"
copyrightText="© 2025 Glowé Skincare. Semua hak dilindungi. Dibuat dengan ❤️ untuk kecantikan alami Anda."
socialLinks={[
{ icon: "Instagram", href: "https://instagram.com/glowe.skincare", ariaLabel: "Instagram Glowé" },
{ icon: "Whatsapp", href: "https://wa.me/6281234567890", ariaLabel: "WhatsApp Glowé" },
{ icon: "Mail", href: "mailto:info@glowe.com", ariaLabel: "Email Glowé" },
{ icon: "Facebook", href: "https://facebook.com/glowe.skincare", ariaLabel: "Facebook Glowé" }
]}
/>
</div>
</ThemeProvider>
<div>
<h1>Glowé Skincare</h1>
<p>Skincare premium tanpa bahan kimia keras untuk kulit glowing yang sehat.</p>
</div>
);
}