269 lines
13 KiB
TypeScript
269 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
|
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
|
|
import SplitAbout from "@/components/sections/about/SplitAbout";
|
|
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
|
|
import ProductCardThree from "@/components/sections/product/ProductCardThree";
|
|
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
|
|
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
|
|
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
|
import FooterBase from "@/components/sections/footer/FooterBase";
|
|
import {
|
|
Award,
|
|
Briefcase,
|
|
Camera,
|
|
Hammer,
|
|
Heart,
|
|
Palette,
|
|
Phone,
|
|
Sparkles,
|
|
Star,
|
|
Trophy,
|
|
Users,
|
|
Wrench,
|
|
Zap,
|
|
} from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="compact"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="WRAPPRO"
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Portfolio", id: "portfolio" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
title="Elevate Your Vehicle with Premium Wraps"
|
|
description="Transform your car with our professional wrapping services. Custom designs, flawless execution, and showroom-quality finishes."
|
|
background={{ variant: "sparkles-gradient" }}
|
|
tag="Premium Quality"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Get Free Quote", href: "contact" },
|
|
{ text: "View Portfolio", href: "portfolio" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-vector/abstract-black-background-with-metallic-silver-shapes_1017-31884.jpg"
|
|
imageAlt="luxury car premium wrap matte black"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
title="Crafted to Perfection"
|
|
description="With over a decade of expertise in vehicle wrapping, we deliver exceptional results that exceed expectations. Every project is executed with precision, using premium materials and advanced techniques."
|
|
tag="Our Expertise"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
bulletPoints={[
|
|
{
|
|
title: "Expert Craftsmanship", description:
|
|
"Precision installation with attention to every detail and seamless finishes.", icon: Hammer,
|
|
},
|
|
{
|
|
title: "Premium Materials", description:
|
|
"Industry-leading vinyl and protection products for durability and appearance.", icon: Zap,
|
|
},
|
|
{
|
|
title: "Custom Design", description:
|
|
"Bring your vision to life with our professional design and consultation team.", icon: Palette,
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/person-working-car-wrapping_23-2149342620.jpg"
|
|
imageAlt="professional car wrap installation team working"
|
|
mediaAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
imagePosition="right"
|
|
/>
|
|
</div>
|
|
|
|
<div id="portfolio" data-section="portfolio">
|
|
<FeatureCardTwentyThree
|
|
features={[
|
|
{
|
|
id: "1", title: "Luxury Sports Car Matte Wrap", tags: ["Matte Black", "Premium"],
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/person-working-car-wrapping_23-2149342662.jpg", imageAlt: "matte black sports car wrap luxury"},
|
|
{
|
|
id: "2", title: "Commercial Fleet Branding", tags: ["Fleet Wrap", "Business"],
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-vector/social-media-cover-template-transport-conveyance_23-2150278981.jpg", imageAlt: "commercial fleet vehicle wrapping branding"},
|
|
{
|
|
id: "3", title: "Custom Chrome Effect Wrap", tags: ["Chrome", "Custom Design"],
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/person-working-car-wrapping_23-2149342617.jpg", imageAlt: "chrome effect car wrap premium custom"},
|
|
{
|
|
id: "4", title: "Carbon Fiber Texture Wrap", tags: ["Texture", "Performance"],
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/metallic-texture-with-dots_1048-5114.jpg", imageAlt: "carbon fiber wrap texture vehicle"},
|
|
]}
|
|
animationType="slide-up"
|
|
title="Portfolio Showcase"
|
|
description="Explore our latest transformations and see the quality of our work firsthand."
|
|
tag="Recent Projects"
|
|
tagIcon={Camera}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<ProductCardThree
|
|
products={[
|
|
{
|
|
id: "1", name: "Full Vehicle Wrap", price: "From $2,500", imageSrc:
|
|
"http://img.b2bpic.net/free-photo/male-customer-examining-car-hood-while-being-auto-repair-shop_637285-7710.jpg", imageAlt: "full vehicle wrap transformation complete"},
|
|
{
|
|
id: "2", name: "Partial Wrap", price: "From $800", imageSrc:
|
|
"http://img.b2bpic.net/free-vector/abstract-banner_23-2148033220.jpg", imageAlt: "partial vehicle wrap hood roof"},
|
|
{
|
|
id: "3", name: "Paint Protection Film", price: "From $1,200", imageSrc:
|
|
"http://img.b2bpic.net/free-photo/car-detailing-concept-man-face-mask-with-orbital-polisher-repair-shop-polishing-orange-suv-car_627829-12604.jpg", imageAlt: "paint protection film clear automotive"},
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
title="Our Services"
|
|
description="Professional wrapping solutions for every vehicle and need."
|
|
tag="Complete Solutions"
|
|
tagIcon={Wrench}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardThree
|
|
metrics={[
|
|
{ id: "1", icon: Briefcase, title: "Projects Completed", value: "500+" },
|
|
{ id: "2", icon: Users, title: "Satisfied Clients", value: "450+" },
|
|
{ id: "3", icon: Trophy, title: "Years Experience", value: "10+" },
|
|
{ id: "4", icon: Heart, title: "Client Satisfaction", value: "98%" },
|
|
]}
|
|
animationType="slide-up"
|
|
title="By the Numbers"
|
|
description="Our proven track record of excellence and customer satisfaction."
|
|
tag="Our Achievement"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "James Mitchell", handle: "Luxury Car Collector", testimonial:
|
|
"Absolutely exceptional work. The precision and attention to detail on my sports car was flawless. Worth every penny.", imageSrc:
|
|
"http://img.b2bpic.net/free-photo/portrait-beautiful-woman-looking-camera_23-2148304959.jpg", imageAlt: "professional headshot business portrait"},
|
|
{
|
|
id: "2", name: "Sarah Chen", handle: "Business Owner", testimonial:
|
|
"Our fleet branding looks stunning. Professional team, quick turnaround, and outstanding customer service throughout.", imageSrc:
|
|
"http://img.b2bpic.net/free-photo/portrait-business-woman-office_1398-6.jpg", imageAlt: "professional woman business portrait"},
|
|
{
|
|
id: "3", name: "Michael Rodriguez", handle: "Performance Enthusiast", testimonial:
|
|
"The custom wrap design exceeded my expectations. The team took my vision and made it reality beautifully.", imageSrc:
|
|
"http://img.b2bpic.net/free-photo/portrait-outdoors-business-man-smiles_23-2148763856.jpg", imageAlt: "professional man portrait headshot"},
|
|
{
|
|
id: "4", name: "Emma Thompson", handle: "Event Coordinator", testimonial:
|
|
"Amazing service! Transformed our promotional vehicles in no time. The quality and finish are impeccable.", imageSrc:
|
|
"http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-4107.jpg", imageAlt: "professional woman headshot portrait"},
|
|
{
|
|
id: "5", name: "David Park", handle: "Automotive Dealer", testimonial:
|
|
"We've trusted them with dozens of vehicle wraps for our inventory. Consistency, quality, and reliability every single time.", imageSrc:
|
|
"http://img.b2bpic.net/free-photo/young-successful-businessman-posing-dark-wall_176420-54.jpg", imageAlt: "professional man business portrait"},
|
|
{
|
|
id: "6", name: "Lisa Anderson", handle: "Car Enthusiast", testimonial:
|
|
"Brought my dream wrap concept to life. Professional, courteous, and the results are museum-quality. Highly recommended.", imageSrc:
|
|
"http://img.b2bpic.net/free-photo/portrait-smiley-woman_23-2149022644.jpg", imageAlt: "professional woman portrait business"},
|
|
]}
|
|
animationType="slide-up"
|
|
title="What Our Clients Say"
|
|
description="Hear directly from vehicle owners who've transformed their cars with us."
|
|
tag="Client Reviews"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
speed={40}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Get Started"
|
|
title="Ready for Your Transformation?"
|
|
description="Contact us today for a free consultation and custom quote. Our team is ready to bring your vision to life."
|
|
tagIcon={Phone}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "sparkles-gradient" }}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/multiethnic-work-group-posing-modern-office_1262-12703.jpg"
|
|
imageAlt="professional team working together office"
|
|
mediaAnimation="slide-up"
|
|
inputPlaceholder="Enter your email address"
|
|
buttonText="Request Quote"
|
|
termsText="We'll reach out within 24 hours with a personalized consultation."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="WRAPPRO"
|
|
copyrightText="© 2025 WRAPPRO. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "about" },
|
|
{ label: "Our Work", href: "portfolio" },
|
|
{ label: "Services", href: "services" },
|
|
],
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "Contact", href: "contact" },
|
|
{ label: "FAQ", href: "#" },
|
|
{ label: "Maintenance Guide", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Warranty", href: "#" },
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|