Merge version_3 into main #6
339
src/app/page.tsx
339
src/app/page.tsx
@@ -1,273 +1,100 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { ThemeProvider } from "@/components/ThemeProvider";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
|
||||
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
||||
import MediaAbout from "@/components/sections/about/MediaAbout";
|
||||
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
|
||||
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
|
||||
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
||||
import {
|
||||
UtensilsCrossed,
|
||||
ShoppingCart,
|
||||
Heart,
|
||||
Star,
|
||||
Zap,
|
||||
MessageSquare,
|
||||
TrendingUp,
|
||||
Clock,
|
||||
Shield,
|
||||
Users,
|
||||
CheckCircle,
|
||||
MessageCircle,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function BubunibblePage() {
|
||||
export default function Home() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="large"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="semibold"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
brandName="BUBUNIBBLE"
|
||||
navItems={[
|
||||
{ name: "Makanan", id: "products" },
|
||||
{ name: "Minuman", id: "products" },
|
||||
{ name: "Dessert", id: "products" },
|
||||
{ name: "Tentang Kami", id: "about" },
|
||||
{ name: "Kontak", id: "contact" },
|
||||
]}
|
||||
button={{ text: "Pesan Sekarang", href: "contact" }}
|
||||
/>
|
||||
</div>
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
brandName="BUBUNIBBLE"
|
||||
/>
|
||||
<main>
|
||||
<div id="home" data-section="home" className="min-h-screen flex items-center justify-center bg-gradient-to-br from-red-50 to-orange-50">
|
||||
<div className="text-center px-4">
|
||||
<h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-4">
|
||||
Selamat Datang di BUBUNIBBLE
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-gray-600 mb-8">
|
||||
Pesan makanan dan minuman terbaik dengan mudah, cepat, dan terpercaya
|
||||
</p>
|
||||
<button className="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-lg transition duration-300">
|
||||
Mulai Pesan Sekarang
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
title="Pesan Makanan & Minuman Terbaik dari BUBUNIBBLE"
|
||||
description="Jelajahi koleksi lengkap makanan lezat, minuman segar, dan dessert istimewa. Pesan sekarang dan nikmati pengalaman berbelanja yang mudah dan menyenangkan."
|
||||
tag="Selamat Datang"
|
||||
tagIcon={UtensilsCrossed}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "radial-gradient" }}
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/delicious-nasi-goreng-with-fried-egg-fresh-chili_84443-64661.jpg?_wi=1", imageAlt: "Nasi Goreng Spesial"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/refreshing-boba-tea-plastic-cup_191095-80342.jpg?_wi=1", imageAlt: "Bubble Tea Signature"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/freshly-baked-homemade-chocolate-brownies_53876-105966.jpg?_wi=1", imageAlt: "Brownies Premium"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/noodles-with-chicken-leg-chicken-fillet-blood-with-soup-thai-style-vegetable-boat-noodles-selective-focus_1150-45666.jpg?_wi=1", imageAlt: "Mie Ayam Lezat"},
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cold-summer-coffee-drink-with-ice-orange-juice_169016-21399.jpg?_wi=1", imageAlt: "Iced Coffee"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/italian-tiramisu-dessert-plate-served-bamboo-boards_140725-1379.jpg?_wi=1", imageAlt: "Tiramisu Deluxe"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/green-curry-made-with-chicken-chili-basil-with-tomato-lime-kaffir-lime-leaves-garlic_1150-25723.jpg?_wi=1", imageAlt: "Soto Ayam Hangat"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/healthy-raw-detox-smoothies-fruits-vegetables-wooden-background_482257-36253.jpg?_wi=1", imageAlt: "Fresh Juice"},
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Pesan Sekarang", href: "#products" },
|
||||
{ text: "Pelajari Lebih", href: "#about" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
carouselPosition="right"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about" className="min-h-screen flex items-center justify-center bg-white py-20 px-4">
|
||||
<div className="max-w-3xl text-center">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">Tentang BUBUNIBBLE</h2>
|
||||
<p className="text-lg text-gray-600 leading-relaxed">
|
||||
BUBUNIBBLE adalah platform pesan makanan online terpercaya yang menyediakan berbagai pilihan makanan lezat, minuman segar, dan dessert istimewa dari restoran dan kafe terbaik di kota Anda.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
title="Menu Kami"
|
||||
description="Pilih kategori makanan, minuman, atau dessert favorit Anda dan tambahkan ke keranjang pesanan."
|
||||
tag="Katalog Produk"
|
||||
tagIcon={ShoppingCart}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
carouselMode="buttons"
|
||||
products={[
|
||||
{
|
||||
id: "food-1", name: "Nasi Goreng Spesial", price: "Rp 35.000", variant: "Makanan • Porsi Besar", imageSrc: "http://img.b2bpic.net/free-psd/delicious-nasi-goreng-with-fried-egg-fresh-chili_84443-64661.jpg?_wi=2", imageAlt: "Nasi Goreng Spesial"},
|
||||
{
|
||||
id: "food-2", name: "Mie Ayam Lezat", price: "Rp 30.000", variant: "Makanan • Porsi Standar", imageSrc: "http://img.b2bpic.net/free-photo/noodles-with-chicken-leg-chicken-fillet-blood-with-soup-thai-style-vegetable-boat-noodles-selective-focus_1150-45666.jpg?_wi=2", imageAlt: "Mie Ayam Lezat"},
|
||||
{
|
||||
id: "food-3", name: "Soto Ayam Hangat", price: "Rp 28.000", variant: "Makanan • Kuah Tradisional", imageSrc: "http://img.b2bpic.net/free-photo/green-curry-made-with-chicken-chili-basil-with-tomato-lime-kaffir-lime-leaves-garlic_1150-25723.jpg?_wi=2", imageAlt: "Soto Ayam Hangat"},
|
||||
{
|
||||
id: "drink-1", name: "Bubble Tea Signature", price: "Rp 22.000", variant: "Minuman • Tapioka Premium", imageSrc: "http://img.b2bpic.net/free-psd/refreshing-boba-tea-plastic-cup_191095-80342.jpg?_wi=2", imageAlt: "Bubble Tea Signature"},
|
||||
{
|
||||
id: "drink-2", name: "Iced Coffee Premium", price: "Rp 18.000", variant: "Minuman • Arabika Pilihan", imageSrc: "http://img.b2bpic.net/free-photo/cold-summer-coffee-drink-with-ice-orange-juice_169016-21399.jpg?_wi=2", imageAlt: "Iced Coffee"},
|
||||
{
|
||||
id: "drink-3", name: "Fresh Juice Mix", price: "Rp 20.000", variant: "Minuman • Buah Segar", imageSrc: "http://img.b2bpic.net/free-photo/healthy-raw-detox-smoothies-fruits-vegetables-wooden-background_482257-36253.jpg?_wi=2", imageAlt: "Fresh Juice Mix"},
|
||||
{
|
||||
id: "dessert-1", name: "Brownies Premium", price: "Rp 25.000", variant: "Dessert • Coklat Belgia", imageSrc: "http://img.b2bpic.net/free-photo/freshly-baked-homemade-chocolate-brownies_53876-105966.jpg?_wi=2", imageAlt: "Brownies Premium"},
|
||||
{
|
||||
id: "dessert-2", name: "Tiramisu Deluxe", price: "Rp 32.000", variant: "Dessert • Italia Asli", imageSrc: "http://img.b2bpic.net/free-photo/italian-tiramisu-dessert-plate-served-bamboo-boards_140725-1379.jpg?_wi=2", imageAlt: "Tiramisu Deluxe"},
|
||||
{
|
||||
id: "dessert-3", name: "Lava Cake Coklat", price: "Rp 28.000", variant: "Dessert • Molten Center", imageSrc: "http://img.b2bpic.net/free-photo/chocolate-lava-cake-white-plate_1150-6317.jpg", imageAlt: "Lava Cake Coklat"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services" className="min-h-screen flex items-center justify-center bg-gray-50 py-20 px-4">
|
||||
<div className="max-w-5xl w-full">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-12 text-center">Layanan Kami</h2>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<div className="bg-white p-8 rounded-lg shadow-md text-center">
|
||||
<div className="text-4xl mb-4">🍔</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4">Makanan Lezat</h3>
|
||||
<p className="text-gray-600">Pilihan makanan dari restoran terbaik dengan cita rasa autentik</p>
|
||||
</div>
|
||||
<div className="bg-white p-8 rounded-lg shadow-md text-center">
|
||||
<div className="text-4xl mb-4">🥤</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4">Minuman Segar</h3>
|
||||
<p className="text-gray-600">Berbagai minuman segar untuk menemani hari Anda</p>
|
||||
</div>
|
||||
<div className="bg-white p-8 rounded-lg shadow-md text-center">
|
||||
<div className="text-4xl mb-4">🍰</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4">Dessert Istimewa</h3>
|
||||
<p className="text-gray-600">Kue dan dessert premium dari kafe pilihan</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
title="Tentang BUBUNIBBLE"
|
||||
description="BUBUNIBBLE adalah destinasi kuliner favorit untuk makanan berkualitas, minuman menyegarkan, dan dessert istimewa. Dengan komitmen pada cita rasa autentik dan pelayanan terbaik, kami menghadirkan pengalaman berbelanja yang tak terlupakan untuk setiap pelanggan setia kami."
|
||||
tag="Kisah Kami"
|
||||
tagIcon={Heart}
|
||||
tagAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/cocktails-bar-with-waitress-background_23-2147821271.jpg"
|
||||
imageAlt="Toko BUBUNIBBLE"
|
||||
useInvertedBackground={true}
|
||||
buttons={[{ text: "Hubungi Kami", href: "contact" }]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact" className="min-h-screen flex items-center justify-center bg-red-600 py-20 px-4">
|
||||
<div className="text-center max-w-2xl">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">Hubungi Kami</h2>
|
||||
<p className="text-lg text-red-100 mb-8">
|
||||
Punya pertanyaan? Tim kami siap membantu Anda 24/7
|
||||
</p>
|
||||
<div className="flex flex-col gap-4">
|
||||
<button className="bg-white text-red-600 font-bold py-3 px-8 rounded-lg hover:bg-red-50 transition duration-300">
|
||||
WhatsApp: +62 812-3456-7890
|
||||
</button>
|
||||
<button className="border-2 border-white text-white font-bold py-3 px-8 rounded-lg hover:bg-red-700 transition duration-300">
|
||||
Email: info@bubunibble.com
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
title="Mengapa Memilih BUBUNIBBLE?"
|
||||
description="Kami menyediakan pengalaman pesan-antar terbaik dengan sistem yang mudah, cepat, dan aman."
|
||||
tag="Keunggulan Kami"
|
||||
tagIcon={Star}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Pesan Cepat", description: "Sistem pemesanan yang intuitif dan responsif memudahkan Anda memilih menu favorit dalam hitungan detik.", button: { text: "Mulai Pesan", href: "#products" },
|
||||
},
|
||||
{
|
||||
icon: MessageSquare,
|
||||
title: "Integrasi WhatsApp", description: "Kirim pesanan langsung ke WhatsApp kami. Konfirmasi instan dan update status pesanan real-time.", button: { text: "Chat via WhatsApp", href: "#contact" },
|
||||
},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
title: "Harga Terjangkau", description: "Menu berkualitas dengan harga yang kompetitif. Nikmati promo spesial setiap hari.", button: { text: "Lihat Menu", href: "#products" },
|
||||
},
|
||||
{
|
||||
icon: Heart,
|
||||
title: "Kesegaran Terjamin", description: "Semua menu disiapkan fresh setiap hari dengan bahan-bahan pilihan terbaik.", button: { text: "Pelajari Lebih", href: "#about" },
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
title: "Layanan Cepat", description: "Pesanan disiapkan dengan cepat tanpa mengorbankan kualitas dan cita rasa.", button: { text: "Hubungi Kami", href: "#contact" },
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Aman & Terpercaya", description: "Sistem pembayaran aman dan terjamin. Data pelanggan dijaga dengan ketat.", button: { text: "Info Keamanan", href: "#contact" },
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Siti Rahma", imageSrc: "http://img.b2bpic.net/free-photo/close-up-friendly-woman-holding-shopping-bags_1098-1574.jpg?_wi=1", imageAlt: "Siti Rahma"},
|
||||
{
|
||||
id: "2", name: "Budi Santoso", imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg?_wi=1", imageAlt: "Budi Santoso"},
|
||||
{
|
||||
id: "3", name: "Ani Wijaya", imageSrc: "http://img.b2bpic.net/free-photo/woman-showing-ok-sign_23-2148990150.jpg", imageAlt: "Ani Wijaya"},
|
||||
{
|
||||
id: "4", name: "Roni Hermawan", imageSrc: "http://img.b2bpic.net/free-photo/man-portrait-posing-loft-modern-space_158595-5367.jpg", imageAlt: "Roni Hermawan"},
|
||||
{
|
||||
id: "5", name: "Eka Putri", imageSrc: "http://img.b2bpic.net/free-photo/close-up-friendly-woman-holding-shopping-bags_1098-1574.jpg?_wi=2", imageAlt: "Eka Putri"},
|
||||
{
|
||||
id: "6", name: "Hendra Syaiful", imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg?_wi=2", imageAlt: "Hendra Syaiful"},
|
||||
]}
|
||||
cardTitle="Ribuan pelanggan puas telah merasakan kelezatan menu BUBUNIBBLE dan kemudahan sistem pemesanan kami"
|
||||
cardTag="Dipercaya oleh Pelanggan"
|
||||
cardTagIcon={Users}
|
||||
cardAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="socialproof" data-section="socialproof">
|
||||
<SocialProofOne
|
||||
title="Dipercaya oleh Ribuan Pelanggan"
|
||||
description="Bergabunglah dengan komunitas pelanggan setia BUBUNIBBLE yang menikmati makanan berkualitas setiap hari."
|
||||
tag="Kepercayaan Pelanggan"
|
||||
tagIcon={CheckCircle}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"Keluarga Sidoarjo", "Karyawan Kantoran", "Mahasiswa Kampus", "Ibu Rumah Tangga", "Pengusaha Muda", "Komunitas Foodies", "Peserta Kantin Digital", "Keluarga Besar Jakarta"]}
|
||||
speed={40}
|
||||
showCard={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Hubungi Kami"
|
||||
title="Siap Menerima Pesanan Anda"
|
||||
description="Jangan ragu untuk menghubungi BUBUNIBBLE melalui WhatsApp atau form di bawah ini. Tim kami siap membantu Anda dengan respons cepat dan profesional."
|
||||
tagIcon={MessageCircle}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
useInvertedBackground={false}
|
||||
inputPlaceholder="Masukkan email Anda"
|
||||
buttonText="Daftar Newsletter"
|
||||
termsText="Kami menghormati privasi Anda. Unsubscribe kapan saja dengan mudah."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/chicken-sticks-with-balsamic-vinegar-olive-oil_114579-2170.jpg"
|
||||
imageAlt="BUBUNIBBLE Restaurant"
|
||||
logoText="BUBUNIBBLE"
|
||||
copyrightText="© 2025 BUBUNIBBLE | Semua Hak Dilindungi"
|
||||
columns={[
|
||||
{
|
||||
title: "Produk", items: [
|
||||
{ label: "Makanan", href: "#products" },
|
||||
{ label: "Minuman", href: "#products" },
|
||||
{ label: "Dessert", href: "#products" },
|
||||
{ label: "Menu Spesial", href: "#products" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Perusahaan", items: [
|
||||
{ label: "Tentang Kami", href: "#about" },
|
||||
{ label: "Hubungi Kami", href: "#contact" },
|
||||
{ label: "Testimoni", href: "#testimonials" },
|
||||
{ label: "Karir", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Kontak", items: [
|
||||
{ label: "WhatsApp", href: "https://wa.me/62812345678" },
|
||||
{ label: "Email", href: "mailto:info@bubunibble.com" },
|
||||
{ label: "Instagram", href: "https://instagram.com/bubunibble" },
|
||||
{ label: "Facebook", href: "https://facebook.com/bubunibble" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<footer className="bg-gray-900 text-white py-8 px-4 text-center">
|
||||
<p>© 2024 BUBUNIBBLE. Semua hak dilindungi.</p>
|
||||
</footer>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user