Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 0fc4d9a549 | |||
| 05041ba4dc | |||
| 66aa3242e3 | |||
| b1520c053e | |||
| f32ce638ee |
250
src/app/page.tsx
250
src/app/page.tsx
@@ -2,14 +2,22 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import { Sparkles, CheckCircle, ShieldCheck } from "lucide-react";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
|
||||
const handleBookNow = () => {
|
||||
const element = document.getElementById('contact');
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
};
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -29,228 +37,106 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Trust",
|
||||
id: "why",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "testimonials",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="House Of Shine"
|
||||
button={{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
}}
|
||||
button={{ text: "Book Now", onClick: handleBookNow }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
<HeroBillboardRotatedCarousel
|
||||
title="House Of Shine Autoworks"
|
||||
description="Not the cheapest. The best. We provide showroom-quality transformations for the most discerning automotive enthusiasts."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "Get A Quote",
|
||||
href: "#contact",
|
||||
},
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
buttons={[{ text: "Book Appointment", onClick: handleBookNow }]}
|
||||
carouselItems={[
|
||||
{ id: "c1", imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp-car_1339-3081.jpg", imageAlt: "Headlight" },
|
||||
{ id: "c2", imageSrc: "http://img.b2bpic.net/free-photo/man-working-car-detailing-coating-car_1303-30600.jpg?_wi=1", imageAlt: "Detailing" },
|
||||
{ id: "c3", imageSrc: "http://img.b2bpic.net/free-photo/view-3d-car-interior_23-2151138882.jpg?_wi=1", imageAlt: "Interior" },
|
||||
{ id: "c4", imageSrc: "http://img.b2bpic.net/free-photo/luxury-car-service_1303-1025.jpg", imageAlt: "Car" },
|
||||
{ id: "c5", imageSrc: "http://img.b2bpic.net/free-photo/car-polishing-man-working-shop_1339-3064.jpg", imageAlt: "Polishing" },
|
||||
{ id: "c6", imageSrc: "http://img.b2bpic.net/free-photo/detailing-car-surface-cleaner_1339-3080.jpg", imageAlt: "Cleaning" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/headlight-lamp-car_1339-3081.jpg"
|
||||
imageAlt="Luxury car with high gloss finish"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="trust" data-section="trust">
|
||||
<MetricCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "5.0",
|
||||
description: "Star Google Rating",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "134+",
|
||||
description: "Happy Clients",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "100%",
|
||||
description: "Satisfaction Guarantee",
|
||||
},
|
||||
]}
|
||||
<MetricCardThree
|
||||
title="Elite Standards"
|
||||
description="Unrivaled expertise for your luxury investment."
|
||||
textboxLayout="split"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", icon: CheckCircle, title: "Satisfaction", value: "100%" },
|
||||
{ id: "m2", icon: ShieldCheck, title: "Coating Quality", value: "Elite" },
|
||||
{ id: "m3", icon: Sparkles, title: "Transformations", value: "134+" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentySeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Ceramic Coating",
|
||||
descriptions: [
|
||||
"Flagship protection for years of shine.",
|
||||
"Hydrophobic layer for easier maintenance.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bubbling-blue-water_23-2147798200.jpg",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Paint Correction",
|
||||
descriptions: [
|
||||
"Remove swirl marks and light scratches.",
|
||||
"Restore true color intensity and clarity.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-working-car-detailing-coating-car_1303-30600.jpg",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Interior Detailing",
|
||||
descriptions: [
|
||||
"Immaculate restoration of all surfaces.",
|
||||
"Deep cleaning with premium leather care.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-car-interior_23-2151138882.jpg",
|
||||
},
|
||||
]}
|
||||
title="Premium Services"
|
||||
description="Excellence in every detail, from paint protection to full interior restoration."
|
||||
textboxLayout="split"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "f1", title: "Ceramic Coating", descriptions: ["Flagship protection for years of shine.", "Hydrophobic layer for easier maintenance."], imageSrc: "http://img.b2bpic.net/free-photo/bubbling-blue-water_23-2147798200.jpg" },
|
||||
{ id: "f2", title: "Paint Correction", descriptions: ["Remove swirl marks and light scratches.", "Restore true color intensity and clarity."], imageSrc: "http://img.b2bpic.net/free-photo/man-working-car-detailing-coating-car_1303-30600.jpg?_wi=2" },
|
||||
{ id: "f3", title: "Interior Detailing", descriptions: ["Immaculate restoration of all surfaces.", "Deep cleaning with premium leather care."], imageSrc: "http://img.b2bpic.net/free-photo/view-3d-car-interior_23-2151138882.jpg?_wi=2" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="why" data-section="why">
|
||||
<MediaAbout
|
||||
useInvertedBackground={false}
|
||||
<TextAbout
|
||||
title="The Detail-Obsessed Difference"
|
||||
description="At House Of Shine, we don't just wash cars; we curate perfection. Jim's passion for automotive excellence ensures every vehicle receives unmatched attention to detail and care."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Our Team",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/beautiful-small-girl-is-sitting-lifting-platform-with-car-holding-hammer_613910-17072.jpg"
|
||||
imageAlt="Jim working on a luxury car"
|
||||
tag="Our Philosophy"
|
||||
useInvertedBackground={false}
|
||||
buttons={[{ text: "Get In Touch", onClick: handleBookNow }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
<TestimonialCardTwelve
|
||||
cardTitle="Client Success Stories"
|
||||
cardTag="Testimonials"
|
||||
cardAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
testimonial="My car looked better than the day I bought it. The ceramic coating is flawless, and the attention to detail is truly unmatched. Jim treats your vehicle like his own."
|
||||
rating={5}
|
||||
author="Sarah Miller"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-woman-with-phone-car-showroom_1303-21397.jpg",
|
||||
alt: "Customer 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-checking-out-new-car_23-2148130139.jpg",
|
||||
alt: "Customer 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-man-close-up-hard-light_1321-496.jpg",
|
||||
alt: "Customer 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-young-woman-having-fun-amusement-park_23-2147911674.jpg",
|
||||
alt: "Customer 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/car-detailing-concept-man-face-mask-with-orbital-polisher-repair-shop-polishing-orange-suv-car_627829-12604.jpg",
|
||||
alt: "Customer 5",
|
||||
},
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah Miller", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-with-phone-car-showroom_1303-21397.jpg" },
|
||||
{ id: "t2", name: "James Smith", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-close-up-hard-light_1321-496.jpg" }
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
<ContactSplit
|
||||
tag="Contact Us"
|
||||
title="Secure Your Spot"
|
||||
description="Limited openings available for our premium detailing services. Secure your spot today to experience the House Of Shine difference."
|
||||
background={{ variant: "gradient-bars" }}
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "rotated-rays-animated-grid",
|
||||
}}
|
||||
text="Limited openings available for our premium detailing services. Secure your spot today to experience the House Of Shine difference."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
<FooterLogoEmphasis
|
||||
logoText="House Of Shine"
|
||||
columns={[
|
||||
{
|
||||
title: "House Of Shine",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#why",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Testimonials",
|
||||
href: "#testimonials",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Contact Jim",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ items: [{ label: "About" }, { label: "Services" }, { label: "Testimonials" }] },
|
||||
{ items: [{ label: "FAQ" }, { label: "Terms" }] }
|
||||
]}
|
||||
bottomLeftText="© 2024 House Of Shine Autoworks."
|
||||
bottomRightText="All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user