257 lines
18 KiB
TypeScript
257 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import { ChefHat, PartyPopper, Star } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumLarge"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="Seblak Teh Iyam"
|
|
navItems={[
|
|
{ name: "Home", id: "#hero" },
|
|
{ name: "About", id: "#about" },
|
|
{ name: "Menu", id: "#products" },
|
|
{ name: "Pricing", id: "#pricing" },
|
|
{ name: "Testimonials", id: "#testimonials" },
|
|
{ name: "FAQ", id: "#faq" },
|
|
{ name: "Contact", id: "#contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
<div id="hero" data-section="hero">
|
|
<HeroCentered
|
|
title="Experience the Fiery Flavor of Seblak Teh Iyam"
|
|
description="Ignite your taste buds with our authentic Indonesian Seblak, crafted with fresh ingredients and customizable spice levels. Your next culinary adventure awaits!"
|
|
background={{
|
|
variant: "plain"
|
|
}}
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/close-up-stylish-korean-girl-sunglasses-smiling-happy-posing-against-pink-background-people-face-concept_1258-96241.jpg", alt: "Happy Customer 1" },
|
|
{ src: "http://img.b2bpic.net/free-photo/front-view-smiley-man-with-thumbs-up_23-2149434889.jpg", alt: "Happy Customer 2" },
|
|
{ src: "http://img.b2bpic.net/free-photo/business-executives-having-meal_1170-1746.jpg", alt: "Happy Customer 3" },
|
|
{ src: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-brunette-girl-glasses-smiling_176420-8501.jpg", alt: "Indonesian man with glasses smiling" }
|
|
]}
|
|
avatarText="Loved by over 1000+ spicy food enthusiasts!"
|
|
buttons={[
|
|
{ text: "Order Online", href: "#products" },
|
|
{ text: "View Menu", href: "#products" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
heading={[
|
|
{ type: "text", content: "Our Passion for Authentic Indonesian Flavors" }
|
|
]}
|
|
useInvertedBackground={true}
|
|
buttons={[
|
|
{ text: "Learn More", href: "#" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageWrapperClassName="order-first md:order-last"
|
|
imageClassName="w-full h-full object-cover rounded-lg"
|
|
headingClassName="text-balance text-left text-4xl font-semibold leading-tight tracking-tight md:text-5xl lg:text-6xl"
|
|
className="py-16 md:py-24 lg:py-32"
|
|
containerClassName="flex flex-col md:flex-row items-center gap-12"
|
|
/>
|
|
</div>
|
|
<div id="features" data-section="features">
|
|
<FeatureBento
|
|
title="Why Choose Seblak Teh Iyam?"
|
|
description="Discover what makes our Seblak truly special and a favorite among spicy food lovers."
|
|
features={[
|
|
{
|
|
title: "Authentic Recipes", description: "We use time-honored Indonesian recipes passed down through generations for an authentic taste.", bentoComponent: "media-stack", items: [
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/thai-food-tom-yum-kung-river-prawn-spicy-soup_1150-35452.jpg", imageAlt: "Colorful seblak bowl" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/thai-food-noodles-spicy-boil-with-seafood-pork-hot-pot_1150-27874.jpg", imageAlt: "Seblak with chicken and mushroom" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/top-view-sliced-meat-with-vegetables-along-with-onions-garlics-greens-dark-blue-desk-vegetable-food-meal-ingredient_140725-30908.jpg", imageAlt: "Vegetarian seblak" }
|
|
]
|
|
},
|
|
{
|
|
title: "Fresh Ingredients", description: "Only the freshest local produce and highest quality ingredients make it into our dishes.", bentoComponent: "media-stack", items: [
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/thai-food-tom-yum-kung-river-prawn-spicy-soup_1150-35452.jpg", imageAlt: "Colorful seblak bowl" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/thai-food-noodles-spicy-boil-with-seafood-pork-hot-pot_1150-27874.jpg", imageAlt: "Seblak with chicken and mushroom" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/top-view-sliced-meat-with-vegetables-along-with-onions-garlics-greens-dark-blue-desk-vegetable-food-meal-ingredient_140725-30908.jpg", imageAlt: "Vegetarian seblak" }
|
|
]
|
|
},
|
|
{
|
|
title: "Customizable Spice", description: "Tailor your Seblak's spiciness to your preference, from mild to fiery hot!", bentoComponent: "media-stack", items: [
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/thai-food-tom-yum-kung-river-prawn-spicy-soup_1150-35452.jpg", imageAlt: "Colorful seblak bowl" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/thai-food-noodles-spicy-boil-with-seafood-pork-hot-pot_1150-27874.jpg", imageAlt: "Seblak with chicken and mushroom" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/top-view-sliced-meat-with-vegetables-along-with-onions-garlics-greens-dark-blue-desk-vegetable-food-meal-ingredient_140725-30908.jpg", imageAlt: "Vegetarian seblak" }
|
|
]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
<div id="products" data-section="products">
|
|
<ProductCardTwo
|
|
title="Our Delicious Menu"
|
|
description="Explore our wide range of Seblak creations, each bursting with flavor and tradition."
|
|
products={[
|
|
{ id: "1", brand: "Classic", name: "Seblak Original", price: "Rp 25.000", rating: 5, reviewCount: "120 reviews", imageSrc: "http://img.b2bpic.net/free-photo/stir-fried-noodles-with-minced-pork-edamame-tomatoes-mushrooms-white-plate_1150-22742.jpg", imageAlt: "Seblak Original" },
|
|
{ id: "2", brand: "Premium", name: "Seblak Seafood", price: "Rp 45.000", rating: 4.5, reviewCount: "85 reviews", imageSrc: "http://img.b2bpic.net/free-photo/stir-fried-spaghetti-seafood_1339-3424.jpg", imageAlt: "Seblak Seafood" },
|
|
{ id: "3", brand: "Favorite", name: "Seblak Ayam", price: "Rp 35.000", rating: 4.8, reviewCount: "150 reviews", imageSrc: "http://img.b2bpic.net/free-photo/side-view-tomato-meatballs-soup-with-noodles-brown-bowl-dark-background_140725-141034.jpg", imageAlt: "Seblak Ayam" },
|
|
{ id: "4", brand: "Vegetarian", name: "Seblak Jamur", price: "Rp 30.000", rating: 4.2, reviewCount: "60 reviews", imageSrc: "http://img.b2bpic.net/free-photo/top-view-sliced-vegetables-bell-peppers-with-tomato-brown-wooden-background-vegetable-food-meal-food-salad-health_140725-80421.jpg", imageAlt: "Seblak Jamur" },
|
|
{ id: "5", brand: "Custom", name: "Seblak Telur", price: "Rp 28.000", rating: 4.7, reviewCount: "90 reviews", imageSrc: "http://img.b2bpic.net/free-photo/bowl-mixed-fermented-vegetables-blue-surface_114579-40892.jpg", imageAlt: "Seblak Telur" },
|
|
{ id: "6", brand: "Signature", name: "Seblak Spesial Komplit", price: "Rp 50.000", rating: 4.9, reviewCount: "200 reviews", imageSrc: "http://img.b2bpic.net/free-photo/thai-food-noodles-spicy-boil-with-seafood-pork-hot-pot_1150-27865.jpg", imageAlt: "Seblak Spesial Komplit" }
|
|
]}
|
|
carouselMode="buttons"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardFive
|
|
title="Seblak Party Packages"
|
|
description="Planning a gathering? Our special Seblak packages are perfect for sharing the spice!"
|
|
plans={[
|
|
{
|
|
id: "basic", tag: "Small Gathering", tagIcon: ChefHat,
|
|
price: "Rp 150.000", period: "/package", description: "Perfect for intimate gatherings of 4-5 people.", button: { text: "Choose Basic" },
|
|
featuresTitle: "Includes:", features: ["1 Large Seblak (choice of 2 toppings)", "4 additional crackers", "2 drinks"]
|
|
},
|
|
{
|
|
id: "standard", tag: "Medium Group", tagIcon: PartyPopper,
|
|
price: "Rp 280.000", period: "/package", description: "Ideal for medium-sized groups of 8-10 people.", button: { text: "Choose Standard" },
|
|
featuresTitle: "Includes:", features: ["2 Large Seblak (choice of 4 toppings)", "8 additional crackers", "4 drinks", "Extra spicy sauce on the side"]
|
|
},
|
|
{
|
|
id: "premium", tag: "Large Event", tagIcon: Star,
|
|
price: "Rp 500.000", period: "/package", description: "Great for large events and celebrations of 15-20 people.", button: { text: "Choose Premium" },
|
|
featuresTitle: "Includes:", features: ["4 Large Seblak (choice of 6 toppings)", "15 additional crackers", "8 drinks", "Assorted dessert platter", "Exclusive Teh Iyam Merchandise"]
|
|
}
|
|
]}
|
|
animationType="fade-in"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="Seblak Teh Iyam is simply the best! The flavors are incredibly rich, and the spice level is just perfect. It's my go-to comfort food!"
|
|
rating={5}
|
|
author="Rani Wijaya"
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/medium-shot-happy-woman-with-food_23-2148899066.jpg", alt: "Rani Wijaya" },
|
|
{ src: "http://img.b2bpic.net/free-photo/happy-mature-business-man-standing-office-cafe-leaning-counter-holding-jacket-shoulder-showing-thumb-up_74855-15159.jpg", alt: "Budi Santoso" },
|
|
{ src: "http://img.b2bpic.net/free-photo/close-up-portrait-beautiful-young-woman-kitchen-holding-tomato-smartphone-buys-fresh_1258-195017.jpg", alt: "Siti Aminah" },
|
|
{ src: "http://img.b2bpic.net/free-photo/asian-family-eating-together_23-2149503177.jpg", alt: "Yoga Pratama" },
|
|
{ src: "http://img.b2bpic.net/free-photo/happy-sweet-asian-couple-having-breakfast-cereal-milk-bread-drinking-orange-juice_7861-1054.jpg", alt: "Lisa & Adi" }
|
|
]}
|
|
ratingAnimation="blur-reveal"
|
|
avatarsAnimation="hover-bubble"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{ id: "1", name: "Rani Wijaya", role: "Food Blogger", company: "SpicyEatsID", rating: 5, testimonial: "Seblak Teh Iyam is simply the best! The flavors are incredibly rich, and the spice level is just perfect. It's my go-to comfort food!", avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-happy-woman-with-food_23-2148899066.jpg" },
|
|
{ id: "2", name: "Budi Santoso", role: "Local Resident", company: "Bandung Flavor Tours", rating: 5, testimonial: "I've tried many seblak places, but Teh Iyam's is consistently outstanding. The broth is so savory, and the toppings are always fresh.", avatarSrc: "http://img.b2bpic.net/free-photo/happy-mature-business-man-standing-office-cafe-leaning-counter-holding-jacket-shoulder-showing-thumb-up_74855-15159.jpg" },
|
|
{ id: "3", name: "Siti Aminah", role: "Student", company: "Unisba", rating: 4, testimonial: "Affordable and absolutely delicious! The customization options are great, and the delivery is always fast.", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-beautiful-young-woman-kitchen-holding-tomato-smartphone-buys-fresh_1258-195017.jpg" },
|
|
{ id: "4", name: "Yoga Pratama", role: "Office Worker", company: "TechCorp Indonesia", rating: 5, testimonial: "A true taste of home! Seblak Teh Iyam never disappoints. The pedasnya (spiciness) is just right to kickstart my day.", avatarSrc: "http://img.b2bpic.net/free-photo/asian-family-eating-together_23-2149503177.jpg" },
|
|
{ id: "5", name: "Lisa & Adi", role: "Couple", company: "Foodie Duo", rating: 5, testimonial: "We love ordering from Seblak Teh Iyam for our weekend dates. It's always a delightful and spicy treat for both of us!", avatarSrc: "http://img.b2bpic.net/free-photo/happy-sweet-asian-couple-having-breakfast-cereal-milk-bread-drinking-orange-juice_7861-1054.jpg" }
|
|
]}
|
|
/>
|
|
</div>
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
title="Frequently Asked Questions"
|
|
description="Have questions about our Seblak, ordering, or delivery? Find your answers here."
|
|
faqs={[
|
|
{ id: "1", title: "What are the spice levels available?", content: "We offer various spice levels, from mild (level 1) for a gentle warmth to extra spicy (level 5) for a fiery kick. You can customize it to your preference when ordering." },
|
|
{ id: "2", title: "Do you offer vegetarian or vegan options?", content: "Yes, we have delicious vegetarian options with tofu, mushrooms, and a variety of vegetables. For vegan options, please specify 'no egg' and we'll ensure no animal products are used." },
|
|
{ id: "3", title: "How long does delivery usually take?", content: "Delivery times typically range from 30-60 minutes, depending on your location and current order volume. You will receive an estimated delivery time upon order confirmation." },
|
|
{ id: "4", title: "Can I customize my toppings?", content: "Absolutely! Our menu allows for extensive customization, so you can mix and match your favorite toppings to create your perfect Seblak." }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/side-close-up-view-vegetables-bowl-lentil-herbs-vegetables-spices-citrus-fruits-with-leaves_140725-73599.jpg"
|
|
imageAlt="Fresh Seblak Ingredients"
|
|
mediaAnimation="blur-reveal"
|
|
mediaPosition="right"
|
|
faqsAnimation="hover-bubble"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Get in Touch with Teh Iyam"
|
|
description="Have a special request, feedback, or need catering for an event? We'd love to hear from you!"
|
|
inputs={[
|
|
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
|
{ name: "email", type: "email", placeholder: "Your Email", required: true }
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Your Message", rows: 5,
|
|
required: true
|
|
}}
|
|
useInvertedBackground={true}
|
|
imageSrc="http://img.b2bpic.net/free-photo/urban-mysterious-lights-film-aesthetic_23-2149098547.jpg"
|
|
imageAlt="Seblak Teh Iyam Storefront"
|
|
mediaAnimation="opacity"
|
|
mediaPosition="left"
|
|
buttonText="Send Message"
|
|
/>
|
|
</div>
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Menu", items: [
|
|
{ label: "Seblak Original", href: "#products" },
|
|
{ label: "Seblak Seafood", href: "#products" },
|
|
{ label: "Seblak Ayam", href: "#products" },
|
|
{ label: "Vegetarian Options", href: "#products" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Our Story", href: "#about" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Blog", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Contact Us", href: "#contact" },
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
bottomLeftText="© 2024 Seblak Teh Iyam. All rights reserved."
|
|
bottomRightText="Built with passion, served with spice."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|