251 lines
14 KiB
TypeScript
251 lines
14 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
|
import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
|
|
import SplitAbout from "@/components/sections/about/SplitAbout";
|
|
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
|
|
import ProductCardThree from "@/components/sections/product/ProductCardThree";
|
|
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
|
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
|
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
|
import { Award, Bike, Calendar, Camera, Droplet, Phone, Sparkles, Users, Wrench } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Garasi Roda Dua"
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Gallery", id: "gallery" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Booking", id: "booking" }
|
|
]}
|
|
button={{ text: "Contact Us", href: "contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitTestimonial
|
|
title="Garasi Roda Dua"
|
|
description="Premium Bike Wash & Big Bike Dealer in Yogyakarta. The best place for motorcycle enthusiasts in Jogja. From buying and selling big bikes, premium bike wash, motorcycle detailing, to a comfortable community hangout space."
|
|
tag="All About 2 Wheels"
|
|
tagIcon={Bike}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "glowing-orb" }}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/man-cafe-racer-style-motorbike_23-2148189648.jpg"
|
|
imageAlt="Garasi Roda Dua Premium Motorcycle Showroom"
|
|
imagePosition="right"
|
|
mediaAnimation="blur-reveal"
|
|
buttons={[
|
|
{ text: "Book Bike Wash", href: "booking" },
|
|
{ text: "View Motorcycles", href: "#" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
name: "GT Vlog", handle: "YouTube Content Creator", testimonial: "First time coming here and I was warmly welcomed. Whether you want to wash your bike or just look around, it's totally fine. The washing result is excellent, very clean, detailed, and safe for the electrical system.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/handsome-brutal-biker-dressed-black-t-shirt-jeans-with-charming-smile-sitting-sports-motorcycle-against-skyscraper-city-downtown_613910-4390.jpg"
|
|
},
|
|
{
|
|
name: "N.I Restiani", handle: "Big Bike Enthusiast", testimonial: "Super clean and shiny. The service is great and they treat all types of motorcycles equally.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-redhead-biker-flannel-shirt-holds-motorcycle-helmet-posing-gray-background_613910-5171.jpg"
|
|
},
|
|
{
|
|
name: "Lik", handle: "Regular Customer", testimonial: "Premium motorcycle wash. Friendly service and guaranteed shiny results. The place is spacious with an aesthetic waiting area.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/mechanic-examining-bicycle-wheel_1170-2504.jpg"
|
|
}
|
|
]}
|
|
testimonialRotationInterval={5000}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
title="About Garasi Roda Dua"
|
|
description="Garasi Roda Dua is a pioneer big bike dealer and premium motorcycle wash in Yogyakarta. We provide high-standard motorcycle care services to keep your bike looking perfect and performing at its best. Established as a community hub for motorcycle enthusiasts, we combine professional service excellence with authentic passion for the riding lifestyle."
|
|
tag="Our Story"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
imageSrc="http://img.b2bpic.net/free-photo/mechanic-using-laptop_1170-1320.jpg"
|
|
imageAlt="Garasi Roda Dua Professional Team at Work"
|
|
imagePosition="right"
|
|
mediaAnimation="blur-reveal"
|
|
bulletPoints={[
|
|
{
|
|
title: "Pioneer Big Bike Dealer", description: "First-choice destination for buying and selling high-quality big motorcycles in Yogyakarta", icon: Bike
|
|
},
|
|
{
|
|
title: "Premium Bike Wash", description: "Professional motorcycle washing with detailed cleaning safe for electrical components", icon: Droplet
|
|
},
|
|
{
|
|
title: "Expert Detailing", description: "Deep cleaning and protection services to keep your motorcycle looking brand new", icon: Sparkles
|
|
},
|
|
{
|
|
title: "Community Hub", description: "A comfortable gathering place where motorcycle enthusiasts connect and share their passion", icon: Users
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardThree
|
|
features={[
|
|
{
|
|
id: "01", title: "Premium Bike Wash", description: "Professional motorcycle washing with detailed cleaning that is safe for electrical components and protective coatings.", imageSrc: "http://img.b2bpic.net/free-photo/bearded-mechanic-repairing-bicycle-wheel-tire-workshop-back-view-service-manual_613910-13542.jpg", imageAlt: "Premium Bike Wash Service"
|
|
},
|
|
{
|
|
id: "02", title: "Motorcycle Detailing", description: "Deep cleaning and protection to keep your motorcycle looking brand new with enhanced shine and durability.", imageSrc: "http://img.b2bpic.net/free-photo/man-taking-protection-before-ride_23-2148321939.jpg", imageAlt: "Motorcycle Detailing Service"
|
|
},
|
|
{
|
|
id: "03", title: "Big Bike Dealer", description: "Buying and selling high-quality big bikes with expert guidance and transparent transactions for enthusiasts.", imageSrc: "http://img.b2bpic.net/free-photo/view-cool-powerful-motorcycle_23-2150704647.jpg", imageAlt: "Big Bike Dealer Service"
|
|
},
|
|
{
|
|
id: "04", title: "Community Hub", description: "A comfortable place for motorcycle communities to gather, connect, and share experiences in a premium setting.", imageSrc: "http://img.b2bpic.net/free-photo/best-friends-hanging-out-while-enjoying-delicious-drink_23-2148914562.jpg", imageAlt: "Community Hub Lounge"
|
|
}
|
|
]}
|
|
title="Our Services"
|
|
description="Complete motorcycle solutions from washing to community experiences"
|
|
tag="What We Offer"
|
|
tagIcon={Wrench}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
gridVariant="three-columns-all-equal-width"
|
|
/>
|
|
</div>
|
|
|
|
<div id="gallery" data-section="gallery">
|
|
<ProductCardThree
|
|
products={[
|
|
{
|
|
id: "1", name: "Before & After Wash", price: "Professional Transformation", imageSrc: "http://img.b2bpic.net/free-photo/active-man-cleaning-motorbike-outdoors_23-2148585536.jpg", imageAlt: "Motorcycle Before Wash"
|
|
},
|
|
{
|
|
id: "2", name: "Pristine Clean Results", price: "Guaranteed Shine", imageSrc: "http://img.b2bpic.net/free-photo/active-man-cleaning-motorbike-outdoors_23-2148585536.jpg", imageAlt: "Motorcycle After Professional Wash"
|
|
},
|
|
{
|
|
id: "3", name: "Premium Showroom", price: "Big Bike Selection", imageSrc: "http://img.b2bpic.net/free-photo/man-choosed-motorcycles-moto-shop-guy-black-jacket_1157-44637.jpg", imageAlt: "Garasi Roda Dua Showroom"
|
|
},
|
|
{
|
|
id: "4", name: "Professional Wash Bay", price: "State-of-the-Art Facility", imageSrc: "http://img.b2bpic.net/free-photo/focused-rider-trying-reanimate-broken-motorbike_1262-17366.jpg", imageAlt: "Motorcycle Wash Bay"
|
|
},
|
|
{
|
|
id: "5", name: "Comfortable Lounge", price: "Premium Waiting Experience", imageSrc: "http://img.b2bpic.net/free-photo/two-sexy-brunette-wearing-stylish-black-dresses-posing-near-bicycles-against-background-street-cafe_613910-18773.jpg", imageAlt: "Community Cafe Lounge"
|
|
}
|
|
]}
|
|
title="Gallery"
|
|
description="Explore our premium services through stunning visual moments"
|
|
tag="Visual Portfolio"
|
|
tagIcon={Camera}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
animationType="slide-up"
|
|
gridVariant="asymmetric-60-wide-40-narrow"
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="Premium motorcycle wash with expert detailing. The team treats every bike with care, attention to detail, and professionalism. Whether you are a big bike enthusiast or casual rider, the experience here is exceptional. The waiting lounge is comfortable and the results are always perfect."
|
|
rating={5}
|
|
author="Rindra Pradipta, Motorcycle Enthusiast"
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/handsome-brutal-biker-dressed-black-t-shirt-jeans-with-charming-smile-sitting-sports-motorcycle-against-skyscraper-city-downtown_613910-4390.jpg", alt: "Customer Review" },
|
|
{ src: "http://img.b2bpic.net/free-photo/young-handsome-redhead-biker-flannel-shirt-holds-motorcycle-helmet-posing-gray-background_613910-5171.jpg", alt: "Customer Review" },
|
|
{ src: "http://img.b2bpic.net/free-photo/mechanic-examining-bicycle-wheel_1170-2504.jpg", alt: "Customer Review" },
|
|
{ src: "http://img.b2bpic.net/free-photo/positive-bearded-redhead-male-leather-jacket-holds-motorcycle-helmet-grey-background_613910-1094.jpg", alt: "Customer Review" },
|
|
{ src: "http://img.b2bpic.net/free-photo/side-view-man-riding-motorbike_23-2150819793.jpg", alt: "Customer Review" },
|
|
{ src: "http://img.b2bpic.net/free-photo/front-view-smiley-man-posing_23-2150171293.jpg", alt: "Customer Review" }
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="booking" data-section="booking">
|
|
<ContactCenter
|
|
tag="Booking"
|
|
tagIcon={Calendar}
|
|
tagAnimation="slide-up"
|
|
title="Book Your Service"
|
|
description="Reserve your premium bike wash, detailing, or community hangout experience. Fill in your details and we will confirm your appointment via WhatsApp."
|
|
background={{ variant: "glowing-orb" }}
|
|
useInvertedBackground={true}
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Book Now"
|
|
termsText="By booking you agree to our service terms. We will contact you via WhatsApp to confirm your appointment."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Get In Touch"
|
|
tagIcon={Phone}
|
|
tagAnimation="slide-up"
|
|
title="Contact Garasi Roda Dua"
|
|
description="Garasi Roda Dua - Yogyakarta, Indonesia. Phone / WhatsApp: +6285822222085. Reach out to us for inquiries about bike sales, wash services, detailing, or community events."
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="Your phone number"
|
|
buttonText="Chat on WhatsApp"
|
|
termsText="We respect your privacy. Your information will only be used to assist with your inquiry."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="Garasi Roda Dua"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{ label: "Home", href: "/" },
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Services", href: "#services" },
|
|
{ label: "Gallery", href: "#gallery" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Testimonials", href: "#testimonials" },
|
|
{ label: "Booking", href: "#booking" },
|
|
{ label: "Contact", href: "#contact" },
|
|
{ label: "Community", href: "#services" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "YouTube", href: "https://youtube.com" },
|
|
{ label: "Google Maps", href: "https://maps.google.com" },
|
|
{ label: "WhatsApp", href: "https://wa.me/6285822222085" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|