346 lines
18 KiB
TypeScript
346 lines
18 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
||
import { Activity, Award, Feather, Heart, ShieldCheck, Sparkles, Quote } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="shift-hover"
|
||
defaultTextAnimation="entrance-slide"
|
||
borderRadius="pill"
|
||
contentWidth="mediumSmall"
|
||
sizing="medium"
|
||
background="fluid"
|
||
cardStyle="solid"
|
||
primaryButtonStyle="primary-glow"
|
||
secondaryButtonStyle="solid"
|
||
headingFontWeight="bold"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleCentered
|
||
navItems={[
|
||
{
|
||
name: "Home", id: "#home"},
|
||
{
|
||
name: "Services", id: "#features"},
|
||
{
|
||
name: "Portfolio", id: "#products"},
|
||
{
|
||
name: "Testimonials", id: "#testimonials"},
|
||
{
|
||
name: "FAQs", id: "#faq"},
|
||
{
|
||
name: "Socials", id: "#social-media"},
|
||
{
|
||
name: "Quote", id: "#contact"},
|
||
]}
|
||
button={{
|
||
text: "Request a Quote", href: "#contact"}}
|
||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EWBlOfpaA3C8pfIkwG9Yg6pp65/uploaded-1780480689439-0t879idk.png"
|
||
logoAlt="MPY Paint Jobs Logo"
|
||
brandName="MPY Paint Jobs"
|
||
logoImageClassName="bg-transparent"
|
||
/>
|
||
</div>
|
||
|
||
<div id="home" data-section="home">
|
||
<HeroSplit
|
||
background={{
|
||
variant: "glowing-orb"}}
|
||
imagePosition="right"
|
||
title="Your Frame Your Vision Pure Custom Art"
|
||
description="MPY transforms bicycle frames into personalized masterpieces through premium handpainted designs, expert restorations, and one-of-a-kind finishes. From road to street, every bike tells your story."
|
||
buttons={[
|
||
{
|
||
text: "Book Now", href: "#contact"},
|
||
]}
|
||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EWBlOfpaA3C8pfIkwG9Yg6pp65/uploaded-1780468256156-hkaddfls.jpg"
|
||
imageAlt="Custom painted bicycle frame in a studio"
|
||
mediaAnimation="blur-reveal"
|
||
fixedMediaHeight={true}
|
||
avatars={[
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/portrait-happy-extremal-young-woman-with-shining-smile-dressed-fashionable-biker-s-clothing-rests-fast-motorbike-likes-her-hobby-people-active-lifestyle-extreme-sport-concept_273609-2461.jpg", alt: "Happy woman cyclist"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/young-business-woman-riding-electro-scooter-by-ofice-center_1303-31446.jpg", alt: "Woman riding scooter"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/medium-shot-cool-man-having-fun-with-scooter_23-2149356795.jpg", alt: "Man with scooter"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/stylish-adult-woman-posing-with-eco-friendly-bike_23-2148731241.jpg", alt: "Stylish woman with bike"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-with-arms-crossed_1170-2406.jpg", alt: "Smiling bike mechanic"},
|
||
]}
|
||
avatarText="Join 500+ happy riders!"
|
||
marqueeItems={[
|
||
{
|
||
type: "text-icon", text: "Precision Craftsmanship", icon: Feather
|
||
},
|
||
{
|
||
type: "text", text: "Your Vision, Our Canvas"},
|
||
{
|
||
type: "text-icon", text: "Unmatched Durability", icon: ShieldCheck
|
||
},
|
||
{
|
||
type: "text", text: "Hand-Painted Perfection"},
|
||
{
|
||
type: "text-icon", text: "Ride in Unique Style", icon: Activity
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<TestimonialAboutCard
|
||
useInvertedBackground={false}
|
||
tag="Our Promise"
|
||
title="Your Vision, Our Canvas."
|
||
description="At MPY Paint Jobs, we believe every bike tells a story. Hear from our satisfied customers who have experienced the MPY difference and ride with unparalleled style."
|
||
subdescription="Their custom bikes are now personalized masterpieces, reflecting their unique vision and our dedication to excellence."
|
||
icon={Quote}
|
||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EWBlOfpaA3C8pfIkwG9Yg6pp65/uploaded-1780477477656-h7tjjciu.jpg"
|
||
imageAlt="Happy cyclist with a custom painted bike"
|
||
mediaAnimation="blur-reveal"
|
||
/>
|
||
</div>
|
||
|
||
<div id="features" data-section="features">
|
||
<FeatureCardTwentyOne
|
||
useInvertedBackground={true}
|
||
title="The MPY Craft Process"
|
||
description="We turn your vision into a precision-crafted finish where artistry and technical mastery meet."
|
||
accordionItems={[
|
||
{
|
||
id: "process-1", title: "1. Vision & Consultation", content: "Share your ideas, inspirations, and desired aesthetics. We'll explore design concepts, color palettes, and material finishes to fully capture your vision."},
|
||
{
|
||
id: "process-2", title: "2. Precision Preparation", content: "Every frame undergoes rigorous preparation, from stripping old paint and repairing imperfections to meticulous sanding, ensuring a flawless canvas for your new artwork."},
|
||
{
|
||
id: "process-3", title: "3. Artistic Application", content: "Our master artisans apply your custom design with unparalleled precision, using premium paints and techniques to bring your unique vision to life, layer by intricate layer."},
|
||
{
|
||
id: "process-4", title: "4. Durable Finish & Delivery", content: "A multi-layer clear coat is applied for maximum durability and a deep, lasting shine. Your masterpiece is then carefully inspected and prepared for its journey back to you."},
|
||
]}
|
||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EWBlOfpaA3C8pfIkwG9Yg6pp65/uploaded-1780469364696-hiwp5qar.jpg"
|
||
imageAlt="Bicycle frame being prepped for painting"
|
||
mediaAnimation="blur-reveal"
|
||
mediaPosition="right"
|
||
/>
|
||
</div>
|
||
|
||
<div id="products" data-section="products">
|
||
<FeatureCardTwentyFour
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
animationType="slide-up"
|
||
title="Our Services: Crafting Your Ride"
|
||
description="We offer a range of services from custom paint designs to expert restoration, ensuring every bicycle frame is a unique masterpiece."
|
||
features={[
|
||
{
|
||
id: "feature-1", title: "Custom Paint Designs", author: "MPY Paint Jobs", description: "Unleash your creativity with personalized graphics, vibrant color schemes, and unique finishes tailored to your style.", tags: ["Design", "Personalization"],
|
||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EWBlOfpaA3C8pfIkwG9Yg6pp65/uploaded-1780467729397-lqxx901e.jpg", imageAlt: "Custom painted racing bike frame with geometric patterns"
|
||
},
|
||
{
|
||
id: "feature-2", title: "Expert Restoration", author: "MPY Paint Jobs", description: "Bring your vintage or damaged frames back to life with meticulous repairs, flawless paint matching, and durable finishes.", tags: ["Restoration", "Repair"],
|
||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EWBlOfpaA3C8pfIkwG9Yg6pp65/uploaded-1780467713489-t0pr11a2.jpg", imageAlt: "Restored vintage bicycle frame with new paint"
|
||
},
|
||
{
|
||
id: "feature-3", title: "Premium Finishes", author: "MPY Paint Jobs", description: "Choose from a wide array of high-quality finishes, including matte, gloss, metallic, and specialty effects for a truly unique look.", tags: ["Finishing", "Quality"],
|
||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EWBlOfpaA3C8pfIkwG9Yg6pp65/uploaded-1780466560858-i0e9zcla.jpg?_wi=1", imageAlt: "Custom painted mountain bike frame with artistic design"
|
||
},
|
||
{
|
||
id: "feature-4", title: "Bulk & Team Orders", author: "MPY Paint Jobs", description: "Custom painting solutions for bike shops, racing teams, and group projects with consistent quality and competitive pricing.", tags: ["Bulk", "Teams"],
|
||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EWBlOfpaA3C8pfIkwG9Yg6pp65/uploaded-1780478634392-fiau9xji.jpg", imageAlt: "Custom painted electric bike frame for urban commuting"
|
||
}
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="metrics" data-section="metrics">
|
||
<MetricCardThree
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
metrics={[
|
||
{
|
||
id: "m1", icon: Award,
|
||
title: "Crafting Since", value: "2021"},
|
||
{
|
||
id: "m2", icon: Sparkles,
|
||
title: "Custom Designs", value: "Limitless"},
|
||
{
|
||
id: "m3", icon: Heart,
|
||
title: "Client Satisfaction", value: "99%"},
|
||
]}
|
||
title="The Art of Numbers: Our Commitment to Excellence"
|
||
description="Our studio is built on more than paint—it’s built on precision, craftsmanship, and detail. These numbers reflect our commitment to quality, client trust, and one-of-one artistry."
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardTwelve
|
||
useInvertedBackground={false}
|
||
testimonials={[
|
||
{
|
||
id: "t1", name: "Alex P.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EWBlOfpaA3C8pfIkwG9Yg6pp65/uploaded-1780481087551-8p9bipxt.jpg", imageAlt: "Alex P. with custom bike"},
|
||
{
|
||
id: "t2", name: "Sarah J.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EWBlOfpaA3C8pfIkwG9Yg6pp65/uploaded-1780481159781-397bl9jm.jpg", imageAlt: "Sarah J. with her custom bike"},
|
||
{
|
||
id: "t3", name: "Mike C.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EWBlOfpaA3C8pfIkwG9Yg6pp65/uploaded-1780481163326-q46znam2.jpg", imageAlt: "Mike C. showing off his restoration"},
|
||
{
|
||
id: "t4", name: "Emily R.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EWBlOfpaA3C8pfIkwG9Yg6pp65/uploaded-1780481238971-wn0n8f2k.jpg", imageAlt: "Emily R. excited about her new paint job"},
|
||
{
|
||
id: "t5", name: "David K.", imageSrc: "http://img.b2bpic.net/free-photo/man-racing-dirt-bike_23-2151493384.jpg", imageAlt: "David K. admiring his custom frame"},
|
||
]}
|
||
cardTitle="Riders Love Their MPY Transformations"
|
||
cardTag="Unmatched Craftsmanship"
|
||
cardAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="faq" data-section="faq">
|
||
<FaqDouble
|
||
useInvertedBackground={true}
|
||
title="Frequently Asked Questions"
|
||
description="Find quick answers to common questions about our custom bicycle frame painting, refinishing, and restoration services."
|
||
tag="FAQs"
|
||
faqsAnimation="slide-up"
|
||
textboxLayout="default"
|
||
faqs={[
|
||
{
|
||
id: "faq-1", title: "Where are you located?", content: "Our shop is located in Salitran 1, Dasmariñas City, Cavite. You can pin your map at Total (Salitran), and our shop is directly in front of it—just look for the sliding door beside the helmet vending machine."
|
||
},
|
||
{
|
||
id: "faq-2", title: "How much is the paint job service?", content: "Prices vary depending on the frame material whether aluminum, steel, or carbon and the color or design you choose. Our custom paint jobs usually start at ₱7,500."
|
||
},
|
||
{
|
||
id: "faq-3", title: "How long does it take?", content: "A custom paint job usually takes 3–4 weeks, depending on the frame’s condition, weather, and any unexpected delays. We always make sure to give each frame the time and attention it deserves."
|
||
},
|
||
{
|
||
id: "faq-4", title: "Do you scrape or strip off the old paint?", content: "Yes! for aluminum and steel frames, we use a chemical paint stripper to fully remove the old paint. For carbon frames, we DON'T use chemicals, we sand it manually to avoid damaging the material and to keep the frame in good condition underneath the new paint."
|
||
},
|
||
{
|
||
id: "faq-6", title: "Can we ship our frames if we're far from the shop?", content: "Yes, you can! you can send your frames through couriers like Lalamove, J&T or any shipping company you trust. We accept shipped frames from anywhere, Worldwide."
|
||
}
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="social-media" data-section="social-media">
|
||
<SocialProofOne
|
||
useInvertedBackground={true}
|
||
title="Connect with MPY Paint Jobs"
|
||
description="Follow us on our social media platforms to see our latest custom paint projects, behind-the-scenes glimpses, and connect with our community of riders and enthusiasts."
|
||
tag="Stay Connected"
|
||
names={[
|
||
"Facebook: mpycustompaintjobs", "Instagram: mpypaintjobs_", "YouTube", "Twitter (X)"
|
||
]}
|
||
buttons={[
|
||
{
|
||
text: "Facebook: mpycustompaintjobs"},
|
||
{
|
||
text: "Instagram: mpypaintjobs_"},
|
||
{
|
||
text: "YouTube", href: "https://www.youtube.com/MPYPaintJobs"},
|
||
{
|
||
text: "Twitter (X)", href: "https://twitter.com/MPYPaintJobs"}
|
||
]}
|
||
speed={40}
|
||
showCard={true}
|
||
ariaLabel="Social Media Section"
|
||
textboxLayout="default"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactSplitForm
|
||
useInvertedBackground={false}
|
||
title="Get a Custom Quote for Your Dream Frame"
|
||
description="Tell us about your vision. Our team will get back to you within 24 hours to discuss your project and provide a personalized quote."
|
||
inputs={[
|
||
{
|
||
name: "name", type: "text", placeholder: "Your Name", required: true
|
||
},
|
||
{
|
||
name: "email", type: "email", placeholder: "Your Email", required: true
|
||
},
|
||
{
|
||
name: "phone", type: "tel", placeholder: "Phone Number (Optional)"},
|
||
]}
|
||
multiSelect={{
|
||
name: "serviceType", label: "Type of Service", options: [
|
||
"Custom Paint", "Refinish", "Restoration", "Bulk Order (Bike Shops/Teams)", "Other"],
|
||
}}
|
||
textarea={{
|
||
name: "projectDetails", placeholder: "Tell us about your project vision (e.g., bike type, style, colors, desired date)", rows: 5,
|
||
required: true
|
||
}}
|
||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EWBlOfpaA3C8pfIkwG9Yg6pp65/uploaded-1780476585715-xxiwthkq.jpg"
|
||
imageAlt="Close up of bicycle frame in a workshop"
|
||
mediaAnimation="blur-reveal"
|
||
mediaPosition="right"
|
||
buttonText="Request Quote"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterBaseCard
|
||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EWBlOfpaA3C8pfIkwG9Yg6pp65/uploaded-1780480689439-0t879idk.png"
|
||
logoAlt="MPY Paint Jobs Logo"
|
||
logoText="MPY Paint Jobs"
|
||
columns={[
|
||
{
|
||
title: "Services", items: [
|
||
{
|
||
label: "Custom Paint", href: "#features"},
|
||
{
|
||
label: "Refinishing", href: "#features"},
|
||
{
|
||
label: "Restoration", href: "#features"},
|
||
]
|
||
},
|
||
{
|
||
title: "Studio", items: [
|
||
{
|
||
label: "Portfolio", href: "#products"},
|
||
{
|
||
label: "Our Process", href: "#features"},
|
||
{
|
||
label: "Testimonials", href: "#testimonials"},
|
||
{
|
||
label: "FAQs", href: "#faq"},
|
||
{
|
||
label: "Socials", href: "#social-media"},
|
||
{
|
||
label: "Contact", href: "#contact"},
|
||
]
|
||
},
|
||
{
|
||
title: "Legal", items: [
|
||
{
|
||
label: "Privacy Policy", href: "#"},
|
||
{
|
||
label: "Terms of Service", href: "#"},
|
||
]
|
||
},
|
||
]}
|
||
copyrightText="© 2021 MPY Paint Jobs. All rights reserved."
|
||
logoImageClassName="bg-transparent"
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|