482 lines
16 KiB
TypeScript
482 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="small"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{
|
|
name: "Produk",
|
|
id: "product-grid",
|
|
},
|
|
{
|
|
name: "Keunggulan",
|
|
id: "features",
|
|
},
|
|
{
|
|
name: "Testimoni",
|
|
id: "testimonials",
|
|
},
|
|
{
|
|
name: "Kontak",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="KeramikPro"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDoubleCarousel
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
title="Sentuhan Kemewahan untuk Hunian Anda"
|
|
description="Koleksi keramik dan sanitary premium dengan desain eksklusif untuk menciptakan kamar mandi dan hunian impian yang elegan dan tahan lama."
|
|
leftCarouselItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/interior-old-house-elegance-shower_1203-4967.jpg?_wi=1",
|
|
imageAlt: "Showroom",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326534.jpg",
|
|
imageAlt: "Showroom",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/spring-faucet-led-strip-blue-kitchen_169016-69053.jpg",
|
|
imageAlt: "Showroom",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-modern-luxury-hotel-office-reception-meeting-lounge_105762-2045.jpg",
|
|
imageAlt: "Showroom",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/bike-shop-with-shop-assistant_23-2148138657.jpg",
|
|
imageAlt: "Showroom",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/still-life-foam-roller_23-2151817453.jpg",
|
|
imageAlt: "Showroom",
|
|
},
|
|
]}
|
|
rightCarouselItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/drawer-with-cutlery-modern-kitchen-integrated-organization_169016-69119.jpg",
|
|
imageAlt: "Showroom",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/abstract-store-with-futuristic-concept-architecture_23-2150861880.jpg",
|
|
imageAlt: "Showroom",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/black-faucet-with-steel-sink-stylish-modern-kitchen_169016-19744.jpg",
|
|
imageAlt: "Showroom",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-flowers-with-copyspace_23-2148194814.jpg",
|
|
imageAlt: "Showroom",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/auto-service-salon-doign-car-wrapping_23-2149593824.jpg",
|
|
imageAlt: "Showroom",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-woman-thrift-shop_23-2149729342.jpg",
|
|
imageAlt: "Showroom",
|
|
},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Lihat Katalog",
|
|
href: "#product-grid",
|
|
},
|
|
{
|
|
text: "Hubungi Kami",
|
|
href: "#contact",
|
|
},
|
|
]}
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/collaboration-two-carpenters-building_329181-15617.jpg",
|
|
alt: "Client 1",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-workers-high-five_23-2149366624.jpg",
|
|
alt: "Client 2",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/workers-having-little-chat-while-having-cup-coffee_329181-15675.jpg",
|
|
alt: "Client 3",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/couple-painting-walls-their-new-home-together_23-2149086833.jpg",
|
|
alt: "Client 4",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-man-drinking-coffee-construction-side_329181-3771.jpg",
|
|
alt: "Client 5",
|
|
},
|
|
]}
|
|
avatarText="Dipercaya oleh lebih dari 1000+ pelanggan"
|
|
marqueeItems={[
|
|
{
|
|
type: "image",
|
|
src: "http://img.b2bpic.net/free-photo/elegant-matte-black-faucet-dark-kitchen-premium-interior-design-with-minimalist-furniture_169016-72709.jpg",
|
|
alt: "Logo 1",
|
|
},
|
|
{
|
|
type: "image",
|
|
src: "http://img.b2bpic.net/free-photo/top-view-male-self-care-items_23-2150347105.jpg",
|
|
alt: "Logo 2",
|
|
},
|
|
{
|
|
type: "image",
|
|
src: "http://img.b2bpic.net/free-vector/business-logo-template-minimal-branding-design-vector_53876-136228.jpg",
|
|
alt: "Logo 3",
|
|
},
|
|
{
|
|
type: "image",
|
|
src: "http://img.b2bpic.net/free-photo/arrangement-pf-bathroom-elements-self-care_23-2148883827.jpg",
|
|
alt: "Logo 4",
|
|
},
|
|
{
|
|
type: "image",
|
|
src: "http://img.b2bpic.net/free-vector/flat-geometric-double-sided-horizontal-business-card-template_23-2149287888.jpg",
|
|
alt: "Logo 5",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
useInvertedBackground={false}
|
|
title="Kualitas Tanpa Kompromi"
|
|
description="Dengan pengalaman lebih dari 10 tahun, kami menyediakan material bangunan terbaik yang memadukan estetika modern dengan ketahanan maksimal."
|
|
metrics={[
|
|
{
|
|
value: "1000+",
|
|
title: "Proyek Selesai",
|
|
},
|
|
{
|
|
value: "500+",
|
|
title: "Pilihan Produk",
|
|
},
|
|
{
|
|
value: "15",
|
|
title: "Tahun Pengalaman",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/crop-hands-near-tablet-with-blueprint_23-2147785622.jpg?_wi=1"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="product-grid" data-section="product-grid">
|
|
<ProductCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "p1",
|
|
brand: "LuxuryTile",
|
|
name: "Marble White Tile",
|
|
price: "Rp 250.000",
|
|
rating: 5,
|
|
reviewCount: "120",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-eco-cosmetics-concept_23-2148778674.jpg?_wi=1",
|
|
},
|
|
{
|
|
id: "p2",
|
|
brand: "ArtisTile",
|
|
name: "Mosaic Decor Tile",
|
|
price: "Rp 180.000",
|
|
rating: 5,
|
|
reviewCount: "85",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/white-modern-sink-faucet-bathroom_74190-6105.jpg",
|
|
},
|
|
{
|
|
id: "p3",
|
|
brand: "Moderna",
|
|
name: "Ceramic Basin",
|
|
price: "Rp 1.200.000",
|
|
rating: 4,
|
|
reviewCount: "45",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/photo-ground-texture-pattern_58702-12065.jpg",
|
|
},
|
|
{
|
|
id: "p4",
|
|
brand: "EliteSan",
|
|
name: "Gold Finish Faucet",
|
|
price: "Rp 850.000",
|
|
rating: 5,
|
|
reviewCount: "200",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/white-porcelain-sink-with-towels_1203-1319.jpg",
|
|
},
|
|
{
|
|
id: "p5",
|
|
brand: "PureSan",
|
|
name: "Ceramic Toilet",
|
|
price: "Rp 3.500.000",
|
|
rating: 5,
|
|
reviewCount: "90",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/white-marble-texture-with-natural-pattern-background-design-art-work_1258-84029.jpg",
|
|
},
|
|
{
|
|
id: "p6",
|
|
brand: "GraniteX",
|
|
name: "Polished Floor Tile",
|
|
price: "Rp 320.000",
|
|
rating: 4,
|
|
reviewCount: "60",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-elegant-candlestick-dark-surface_179666-37730.jpg",
|
|
},
|
|
]}
|
|
title="Produk Unggulan"
|
|
description="Temukan koleksi keramik berkualitas dan perlengkapan sanitary modern untuk kenyamanan hunian Anda."
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyNine
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Material Berkualitas",
|
|
description: "Keramik dengan daya tahan tinggi anti-gores dan anti-licin.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/photo-wall-texture-pattern_58702-14497.jpg?_wi=1",
|
|
titleImageSrc: "http://img.b2bpic.net/free-photo/detail-urban-stairs_23-2148107131.jpg",
|
|
buttonText: "Detail",
|
|
},
|
|
{
|
|
title: "Desain Modern",
|
|
description: "Koleksi yang terus diperbarui mengikuti tren arsitektur terbaru.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-glassware_107420-74257.jpg",
|
|
titleImageSrc: "http://img.b2bpic.net/free-photo/photo-wall-texture-pattern_58702-15299.jpg",
|
|
buttonText: "Detail",
|
|
},
|
|
{
|
|
title: "Layanan Ahli",
|
|
description: "Konsultasi desain profesional untuk setiap kebutuhan renovasi.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/bathtub-with-toys-soap_23-2147787862.jpg",
|
|
titleImageSrc: "http://img.b2bpic.net/free-photo/paving-stone-road-background_1252-1054.jpg",
|
|
buttonText: "Detail",
|
|
},
|
|
]}
|
|
title="Mengapa Memilih Kami?"
|
|
description="Kami berkomitmen untuk memberikan layanan terbaik dengan material berkualitas tinggi."
|
|
/>
|
|
</div>
|
|
|
|
<div id="social" data-section="social">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
names={[
|
|
"BrandKeramikA",
|
|
"SanitaryIndo",
|
|
"TileProGlobal",
|
|
"LuxuryConstruction",
|
|
"HomeRenovPartner",
|
|
"ModernTileCorp",
|
|
"EliteHardware",
|
|
]}
|
|
title="Dipercaya Mitra Industri"
|
|
description="Kami bekerja sama dengan brand-brand ternama untuk memastikan kualitas terbaik."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Sarah Johnson",
|
|
date: "10/01/2024",
|
|
title: "Renovasi Rumah",
|
|
quote: "Kualitas keramiknya luar biasa!",
|
|
tag: "Pelanggan",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/couple-painting-walls-their-new-home-together_23-2149086831.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/interior-old-house-elegance-shower_1203-4967.jpg?_wi=2",
|
|
imageAlt: "happy home renovation client",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Michael Chen",
|
|
date: "15/01/2024",
|
|
title: "Proyek Apartemen",
|
|
quote: "Sangat puas dengan layanan dan koleksi sanitary-nya.",
|
|
tag: "Pelanggan",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/young-handsome-businessman-writing-paper-pinned-corkboard-talking-phone-smiling_176420-6478.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/crop-hands-near-tablet-with-blueprint_23-2147785622.jpg?_wi=2",
|
|
imageAlt: "happy home renovation client",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Emily Rodriguez",
|
|
date: "20/01/2024",
|
|
title: "Desain Kamar Mandi",
|
|
quote: "Saran dari tim sangat membantu.",
|
|
tag: "Pelanggan",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/full-shot-smiley-woman-taking-selfie_23-2149098979.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/photo-wall-texture-pattern_58702-14497.jpg?_wi=2",
|
|
imageAlt: "happy home renovation client",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "David Kim",
|
|
date: "25/01/2024",
|
|
title: "Renovasi Kantor",
|
|
quote: "Layanan cepat dan produk prima.",
|
|
tag: "Pelanggan",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/happy-couple-with-their-future-construction_1098-2113.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-eco-cosmetics-concept_23-2148778674.jpg?_wi=2",
|
|
imageAlt: "happy home renovation client",
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "Anna Smith",
|
|
date: "30/01/2024",
|
|
title: "Rumah Baru",
|
|
quote: "Harga kompetitif dengan kualitas hebat.",
|
|
tag: "Pelanggan",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/full-shot-man-traveling-by-train_23-2150510174.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/elegant-matte-black-faucet-dark-kitchen-premium-interior-design-with-minimalist-furniture_169016-72709.jpg",
|
|
imageAlt: "happy home renovation client",
|
|
},
|
|
]}
|
|
title="Apa Kata Pelanggan?"
|
|
description="Ribuan keluarga telah mempercayakan kebutuhan keramik dan sanitary mereka kepada kami."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "q1",
|
|
title: "Apakah ada garansi produk?",
|
|
content: "Ya, kami memberikan garansi untuk setiap pembelian.",
|
|
},
|
|
{
|
|
id: "q2",
|
|
title: "Bisa kirim ke luar kota?",
|
|
content: "Tentu, kami melayani pengiriman seluruh Indonesia.",
|
|
},
|
|
{
|
|
id: "q3",
|
|
title: "Bisa minta konsultasi desain?",
|
|
content: "Tim ahli kami siap membantu Anda.",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/tile-background_1203-3167.jpg"
|
|
title="Pertanyaan Umum"
|
|
description="Informasi yang sering ditanyakan oleh pelanggan kami."
|
|
faqsAnimation="slide-up"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "gradient-bars",
|
|
}}
|
|
text="Siap membangun impian Anda? Hubungi kami sekarang untuk konsultasi gratis."
|
|
buttons={[
|
|
{
|
|
text: "WhatsApp Sekarang",
|
|
href: "https://wa.me/628123456789",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
columns={[
|
|
{
|
|
title: "Produk",
|
|
items: [
|
|
{
|
|
label: "Keramik Lantai",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Sanitary",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Perusahaan",
|
|
items: [
|
|
{
|
|
label: "Tentang Kami",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Kontak",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Legal",
|
|
items: [
|
|
{
|
|
label: "Privasi",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Ketentuan",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
logoText="KeramikPro"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|