229 lines
13 KiB
TypeScript
229 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
|
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
|
|
import TextAbout from "@/components/sections/about/TextAbout";
|
|
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
|
|
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
|
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
|
import { Sparkles, Award, ImageIcon, Wrench, Phone } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="small"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="floatingGradient"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Hollywood Collision"
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Gallery", id: "gallery" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Get a Quote", href: "#contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardScroll
|
|
title="Precision Luxury Auto Repair"
|
|
description="Where meticulous craftsmanship meets luxury vehicles. Hollywood Collision delivers boutique-quality collision repair and restoration for discerning automotive enthusiasts."
|
|
tag="Luxury Auto Body Shop"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "radial-gradient" }}
|
|
buttons={[
|
|
{ text: "Get a Quote", href: "#contact" },
|
|
{ text: "View Our Work", href: "#gallery" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B38s0JZKtrtoWLcC2zVrK3ng88/uploaded-1773859385073-x4cbn78y.png"
|
|
imageAlt="Luxury Mercedes-Benz awaiting premium repair service"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="Woman-Owned & Operated"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
title="Philadelphia's Premier Luxury Auto Repair"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Learn Our Story", href: "#services" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="gallery" data-section="gallery">
|
|
<FeatureCardTwentyThree
|
|
title="Luxury Transformation Gallery"
|
|
description="Witness the meticulous restoration of high-end vehicles. Each project showcases our commitment to perfection and attention to detail."
|
|
tag="Before & After"
|
|
tagIcon={ImageIcon}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: "1", title: "Mercedes-Benz Collision Restoration", tags: ["Luxury", "Collision Repair"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B38s0JZKtrtoWLcC2zVrK3ng88/uploaded-1773707925153-hc9jv472.png", imageAlt: "Mercedes-Benz before and after collision repair"
|
|
},
|
|
{
|
|
id: "2", title: "Audi Premium Paint Restoration", tags: ["Premium", "Paint Work"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B38s0JZKtrtoWLcC2zVrK3ng88/uploaded-1773708490624-qb4qkz9h.jpg", imageAlt: "Audi luxury vehicle paint restoration"
|
|
},
|
|
{
|
|
id: "3", title: "Complete Body Reconstruction", tags: ["Structural", "Premium Work"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B38s0JZKtrtoWLcC2zVrK3ng88/uploaded-1773708643923-lnbrnolq.png", imageAlt: "Luxury vehicle complete body work restoration"
|
|
},
|
|
{
|
|
id: "4", title: "Range Rover Damage Assessment to Perfection", tags: ["SUV", "Premium Restoration"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B38s0JZKtrtoWLcC2zVrK3ng88/uploaded-1773708280104-i2r9ivea.png", imageAlt: "Range Rover luxury SUV collision repair"
|
|
},
|
|
{
|
|
id: "5", title: "Sports Car Performance Restoration", tags: ["Performance", "Detail Work"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B38s0JZKtrtoWLcC2zVrK3ng88/uploaded-1773708221118-nqbtyo2q.png", imageAlt: "High-performance luxury sports car restoration"
|
|
},
|
|
{
|
|
id: "6", title: "Comprehensive Luxury Transformation", tags: ["Full Service", "Excellence"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B38s0JZKtrtoWLcC2zVrK3ng88/uploaded-1773708436111-opjsa8um.png", imageAlt: "Comprehensive luxury vehicle restoration complete"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwentyThree
|
|
title="Premium Collision Repair Services"
|
|
description="Comprehensive auto body services tailored to luxury and high-performance vehicles. From precision painting to structural restoration."
|
|
tag="Our Expertise"
|
|
tagIcon={Wrench}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: "1", title: "Expert Collision Damage Repair", tags: ["Structural", "Precision"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B38s0JZKtrtoWLcC2zVrK3ng88/uploaded-1773708844912-xp3fqbav.png", imageAlt: "Professional collision damage repair service"
|
|
},
|
|
{
|
|
id: "2", title: "Premium Paint & Finishing", tags: ["Custom", "Luxury"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B38s0JZKtrtoWLcC2zVrK3ng88/uploaded-1773708780552-xcx3382m.png", imageAlt: "Professional luxury vehicle paint application"
|
|
},
|
|
{
|
|
id: "3", title: "Structural Welding & Restoration", tags: ["Advanced", "Technical"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B38s0JZKtrtoWLcC2zVrK3ng88/uploaded-1773708925350-3fva4a8k.png", imageAlt: "Professional auto body welding and structural repair"
|
|
}
|
|
]}
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="brands" data-section="brands">
|
|
<SocialProofOne
|
|
title="Trusted by Luxury Brands"
|
|
description="We specialize in repairing and restoring the world's most prestigious automotive brands."
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
names={["Mercedes-Benz", "Audi", "Range Rover", "BMW", "Porsche", "Tesla", "Jaguar"]}
|
|
logos={[
|
|
"http://img.b2bpic.net/free-photo/closeup-shot-antique-white-car-headlight_181624-4205.jpg", "http://img.b2bpic.net/free-photo/black-car-garage_417767-26.jpg", "http://img.b2bpic.net/free-vector/rent-car-label-black_24908-60860.jpg", "http://img.b2bpic.net/free-vector/vintage-label-design-with-lettering-composition-dark-background-t-shirt-design_1284-47179.jpg", "http://img.b2bpic.net/free-vector/car-logo-design_1390-140.jpg", "http://img.b2bpic.net/free-vector/gradient-electronics-logos-pack_23-2148976397.jpg", "http://img.b2bpic.net/free-vector/tiger-face-background_23-2148007948.jpg"
|
|
]}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
title="Client Experiences"
|
|
description="Discover why Philadelphia's most discerning automotive owners trust Hollywood Collision."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", title: "Outstanding Precision", quote: "My Range Rover was treated with extraordinary care. The attention to detail and professionalism exceeded all expectations. Hollywood Collision is the gold standard.", name: "Victoria Chen", role: "Executive", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B38s0JZKtrtoWLcC2zVrK3ng88/uploaded-1773709337724-hr4ncpk8.png"
|
|
},
|
|
{
|
|
id: "2", title: "What Our Customers Are Saying: Excellence in Collision Repair ", quote: "As someone who knows luxury automotive repair, I can confidently say Hollywood Collision delivered flawless restoration work on my Mercedes. Highly recommended.", name: "Shadonyah Carroll ", role: "Collector", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B38s0JZKtrtoWLcC2zVrK3ng88/uploaded-1773860402587-y26ik03o.png"
|
|
},
|
|
{
|
|
id: "3", title: "", quote: "They understood the value and complexity of my vehicle. The restoration was meticulous and transparent. This is the auto body shop for luxury owners.", name: 'Xiomara Rosa,', role: "customer ", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B38s0JZKtrtoWLcC2zVrK3ng88/uploaded-1773860531159-zgh8l3pg.png"
|
|
},
|
|
{
|
|
id: "4", title: "Premium Service Experience", quote: "From initial assessment to final delivery, Hollywood Collision maintained the highest standards. My Audi looks showroom-ready. Exceptional work.", name: "Lynnette Jones ", role: "customer ", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B38s0JZKtrtoWLcC2zVrK3ng88/uploaded-1774027340515-kmjwb5bn.png"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Ready to Restore Your Vehicle?"
|
|
tagIcon={Phone}
|
|
tagAnimation="slide-up"
|
|
title="Get Your Luxury Auto Repair Quote Today"
|
|
description="Contact Hollywood Collision for a comprehensive assessment and personalized quote. Our team is ready to restore your vehicle to its pristine condition."
|
|
buttons={[
|
|
{ text: "Request a Quote", href: "mailto:quote@hollywoodcollision.com" },
|
|
{ text: "Schedule Consultation", href: "tel:+12155551234" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "sparkles-gradient" }}
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={[
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Our Services", href: "#services" },
|
|
{ label: "Gallery", href: "#gallery" },
|
|
{ label: "Testimonials", href: "#testimonials" }
|
|
]
|
|
},
|
|
{
|
|
title: "Contact", items: [
|
|
{ label: "Phone", href: "tel:+12155551234" },
|
|
{ label: "Email", href: "mailto:info@hollywoodcollision.com" },
|
|
{ label: "Location", href: "#" },
|
|
{ label: "Hours", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Insurance Partners", href: "#" },
|
|
{ label: "Warranty", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2024 Hollywood Collision. Woman-Owned & Operated. Philadelphia's Premier Luxury Auto Body Shop."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |