Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 5a3b329aa2 | |||
| 307d2f7267 | |||
| aff4bb01dd | |||
| 1d5cb5dc9b |
223
src/app/page.tsx
223
src/app/page.tsx
@@ -9,7 +9,6 @@ import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaA
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -23,32 +22,17 @@ export default function LandingPage() {
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="semibold"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Menu",
|
||||
id: "menu",
|
||||
},
|
||||
{
|
||||
name: "Story",
|
||||
id: "story",
|
||||
},
|
||||
{
|
||||
name: "Locations",
|
||||
id: "location",
|
||||
},
|
||||
{
|
||||
name: "Partnership",
|
||||
id: "partnership",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Menu", id: "menu" },
|
||||
{ name: "Story", id: "story" },
|
||||
{ name: "Location", id: "location" },
|
||||
{ name: "Partnership", id: "partnership" },
|
||||
]}
|
||||
brandName="Sambal Bakar Indonesia"
|
||||
/>
|
||||
@@ -56,42 +40,14 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Sambal Bakar Indonesia"
|
||||
description="Rasakan sensasi sambal bakar autentik yang mendidih langsung di atas cobek. Pedas, nikmat, dan membakar selera!"
|
||||
buttons={[
|
||||
{
|
||||
text: "Lihat Menu",
|
||||
href: "#menu",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Lihat Menu", href: "#menu" }]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/grill-vegetable-salad-charcoal-table_140725-9824.jpg",
|
||||
imageAlt: "Sambal sizzling on stone plate",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-scrambled-eggs-with-tomatoes-greens-inside-pan-dark-green-surface_140725-61677.jpg",
|
||||
imageAlt: "Sambal sizzling on stone plate",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/ong-chili-paste-mortar-decorated-with-beautiful-side-dishes_1150-24472.jpg",
|
||||
imageAlt: "Sambal sizzling on stone plate",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-vegetable-soup-with-raw-buckwheat-greens-grey-space_140725-97911.jpg",
|
||||
imageAlt: "Sambal sizzling on stone plate",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/thai-food-tom-yum-seafood-seafood-spicy-soup_1150-38137.jpg",
|
||||
imageAlt: "Sambal sizzling on stone plate",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/chicken-curry-black-cup_1150-23791.jpg",
|
||||
imageAlt: "Sambal sizzling on stone plate",
|
||||
},
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CeUYA2EdLEfRlgbVvqNzKr2V2t/uploaded-1776746738938-tk7nlb3z.jpg?_wi=1", imageAlt: "Sambal Bakar Signature" },
|
||||
{ imageSrc: "https://img.b2bpic.net/free-photo/grill-vegetable-salad-charcoal-table_140725-9824.jpg", imageAlt: "Grilled dish" },
|
||||
{ imageSrc: "https://img.b2bpic.net/free-photo/front-view-scrambled-eggs-with-tomatoes-greens-inside-pan-dark-green-surface_140725-61677.jpg", imageAlt: "Sizzling pan" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -102,172 +58,55 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
brand: "Sambal Bakar",
|
||||
name: "Ayam Bakar Sambal Gami",
|
||||
price: "Rp 35.000",
|
||||
rating: 5,
|
||||
reviewCount: "1.2k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-tomato-sauce-delicious-with-vegetables-brown-space_140725-79506.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
brand: "Sambal Bakar",
|
||||
name: "Lele Bakar Sambal Matah",
|
||||
price: "Rp 25.000",
|
||||
rating: 4,
|
||||
reviewCount: "800",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/green-curry-made-with-chicken-chili-basil-with-tomato-lime-kaffir-lime-leaves-garlic_1150-25732.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
brand: "Sambal Bakar",
|
||||
name: "Cumi Bakar Sambal Hijau",
|
||||
price: "Rp 40.000",
|
||||
rating: 5,
|
||||
reviewCount: "1.5k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/spicy-pork-chops-black-cup-consisting-lemons-chili-side-dishes_1150-23116.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
brand: "Sambal Bakar",
|
||||
name: "Tahu Bakar Sambal Terasi",
|
||||
price: "Rp 15.000",
|
||||
rating: 4,
|
||||
reviewCount: "600",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crispy-pork-paste-mixed-with-beautiful-decorative-ingredients-thai-food_1150-23699.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
brand: "Sambal Bakar",
|
||||
name: "Telur Dadar Sambal Bakar",
|
||||
price: "Rp 12.000",
|
||||
rating: 5,
|
||||
reviewCount: "900",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-steamed-rice-meal-plate_140725-114509.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
brand: "Sambal Bakar",
|
||||
name: "Tempe Bakar Sambal Pedas",
|
||||
price: "Rp 10.000",
|
||||
rating: 4,
|
||||
reviewCount: "500",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-traditional-nasi-lemak-meal-composition_23-2149056833.jpg",
|
||||
},
|
||||
]}
|
||||
title="Menu Unggulan"
|
||||
description="Pilihan sambal bakar terlaris kami yang disajikan segar."
|
||||
description="Pilihan sambal bakar terlaris kami yang disajikan segar dengan sensasi pedas membara."
|
||||
products={[
|
||||
{ id: "p1", brand: "Signature", name: "Ayam Bakar Sambal Gami", price: "Rp 35.000", rating: 5, reviewCount: "1.2k", imageSrc: "https://img.b2bpic.net/free-photo/front-view-tomato-sauce-delicious-with-vegetables-brown-space_140725-79506.jpg" },
|
||||
{ id: "p2", brand: "Signature", name: "Lele Bakar Sambal Matah", price: "Rp 25.000", rating: 4, reviewCount: "800", imageSrc: "https://img.b2bpic.net/free-photo/green-curry-made-with-chicken-chili-basil-with-tomato-lime-kaffir-lime-leaves-garlic_1150-25732.jpg" },
|
||||
{ id: "p3", brand: "Signature", name: "Cumi Bakar Sambal Hijau", price: "Rp 40.000", rating: 5, reviewCount: "1.5k", imageSrc: "https://img.b2bpic.net/free-photo/spicy-pork-chops-black-cup-consisting-lemons-chili-side-dishes_1150-23116.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="story" data-section="story">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Our Story: Visi Iben Ma"
|
||||
description="Berawal dari kecintaan pada cita rasa autentik Indonesia, Sambal Bakar Indonesia hadir membawa inovasi sambal yang disajikan mendidih di atas cobek. Iben Ma ingin setiap orang merasakan hangatnya sambal bakar rumah yang otentik."
|
||||
metrics={[
|
||||
{
|
||||
value: "50+",
|
||||
title: "Cabang Se-Indonesia",
|
||||
},
|
||||
{
|
||||
value: "1M+",
|
||||
title: "Porsi Terjual",
|
||||
},
|
||||
{
|
||||
value: "4.8/5",
|
||||
title: "Kepuasan Pelanggan",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-kitchen_23-2149631733.jpg"
|
||||
description="Berawal dari kecintaan pada cita rasa autentik Indonesia, Sambal Bakar Indonesia hadir membawa inovasi sambal yang disajikan mendidih di atas cobek."
|
||||
metrics={[{ value: "50+", title: "Cabang" }, { value: "1M+", title: "Porsi Terjual" }, { value: "4.8/5", title: "Kepuasan" }]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CeUYA2EdLEfRlgbVvqNzKr2V2t/uploaded-1776746738938-tk7nlb3z.jpg?_wi=2"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Budi Santoso",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-is-eating-monastic-chicken-with-fried-potatoes-vegetable-salad-with-juice-table_141793-12489.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Siti Aminah",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-borsch-ukranian-beet-soup-with-meat-white-space_140725-97816.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Andi Wijaya",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/asian-people-having-dinner-party_23-2149552629.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Dewi Lestari",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-eats-dushbara-served-with-herbs_141793-1084.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Rizky Ramadhan",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/adults-enjoying-mexican-food_23-2149663874.jpg",
|
||||
},
|
||||
]}
|
||||
cardTitle="Apa Kata Mereka?"
|
||||
cardTag="Testimonial"
|
||||
cardAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="location" data-section="location">
|
||||
<SocialProofOne
|
||||
title="Lokasi Kami"
|
||||
names={["Jakarta Pusat", "Jakarta Selatan", "Bandung", "Surabaya", "Bali", "Medan"]}
|
||||
description="Temukan outlet terdekat kami di berbagai kota besar di Indonesia."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Jakarta Pusat",
|
||||
"Jakarta Selatan",
|
||||
"Bandung",
|
||||
"Surabaya",
|
||||
"Yogyakarta",
|
||||
"Bali",
|
||||
"Medan",
|
||||
]}
|
||||
title="Temukan Kami"
|
||||
description="Kami hadir di puluhan titik lokasi di seluruh Indonesia untuk melayani rasa pedas Anda."
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="partnership" data-section="partnership">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
tag="Partnership"
|
||||
title="Franchise & Partnership"
|
||||
description="Ingin menjadi bagian dari sukses Sambal Bakar Indonesia? Bergabunglah dengan kami sebagai mitra waralaba."
|
||||
description="Ingin menjadi mitra kami? Daftarkan bisnis Anda sekarang untuk peluang franchise yang menjanjikan."
|
||||
background={{ variant: "gradient-bars" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Sambal Bakar Indonesia"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Contact Us",
|
||||
href: "#",
|
||||
}}
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Contact Us", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #ffffff;
|
||||
--card: #f9f9f9;
|
||||
--foreground: #1c1c1c;
|
||||
--background: #1A1A1A;
|
||||
--card: #262626;
|
||||
--foreground: #FFFFFF;
|
||||
--primary-cta: #E34400;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #333333;
|
||||
--secondary-cta: #E63946;
|
||||
--secondary-cta-text: #ffffff;
|
||||
--accent: #E63946;
|
||||
--background-accent: #f9f9f9;
|
||||
--accent: #E34400;
|
||||
--background-accent: #262626;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user