Update src/app/page.tsx
This commit is contained in:
204
src/app/page.tsx
204
src/app/page.tsx
@@ -8,11 +8,10 @@ import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import ProductCardThree from '@/components/ecommerce/productCatalog/ProductCatalog';
|
||||
import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||
import { Shield } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -29,112 +28,119 @@ export default function LandingPage() {
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Roofing Near Me"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Roofing Near Me"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Roofing Experts You Can Trust"
|
||||
description="Professional-grade roofing installation and repair services."
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/exterior-home_1203-2241.jpg", imageAlt: "Roofing project" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-doing-his-job-with-belt_23-2149343658.jpg", imageAlt: "Roofing professional" }
|
||||
]}
|
||||
buttons={[{ text: "Get Free Estimate", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Roofing Experts You Can Trust"
|
||||
description="Professional-grade roofing installation and repair services."
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/exterior-home_1203-2241.jpg", imageAlt: "Roofing project" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-doing-his-job-with-belt_23-2149343658.jpg", imageAlt: "Roofing professional" }
|
||||
]}
|
||||
buttons={[{ text: "Get Free Estimate", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
tag="About Us"
|
||||
title="Decades of Roofing Excellence"
|
||||
description="We provide premium residential roofing solutions with unmatched quality and service."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/construction-worker-doing-his-job-with-belt_23-2149343658.jpg"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
tag="About Us"
|
||||
title="Decades of Roofing Excellence"
|
||||
description="We provide premium residential roofing solutions with unmatched quality and service."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/construction-worker-doing-his-job-with-belt_23-2149343658.jpg"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwelve
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
title="Our Professional Services"
|
||||
description="Comprehensive maintenance and installation packages."
|
||||
features={[
|
||||
{ id: "f1", label: "Installation", title: "New Roofs", items: ["Asphalt Shingles", "Metal Roofing", "Slate Tile"], buttons: [{ text: "View Details" }] },
|
||||
{ id: "f2", label: "Maintenance", title: "Reliable Repairs", items: ["Emergency Leak Fix", "Storm Damage Repair", "Full Inspections"], buttons: [{ text: "Learn More" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwelve
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
title="Our Professional Services"
|
||||
description="Comprehensive maintenance and installation packages."
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "f1", label: "Installation", title: "New Roofs", items: ["Asphalt Shingles", "Metal Roofing", "Slate Tile"], buttons: [{ text: "View Details" }] },
|
||||
{ id: "f2", label: "Maintenance", title: "Reliable Repairs", items: ["Emergency Leak Fix", "Storm Damage Repair", "Full Inspections"], buttons: [{ text: "Learn More" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="process" data-section="process">
|
||||
<ProductCardThree
|
||||
layout="section"
|
||||
title="Roofing Catalog"
|
||||
description="Browse our most popular roofing materials."
|
||||
products={[
|
||||
{ id: "p1", name: "Asphalt Shingles", price: "$5,000+", imageSrc: "http://img.b2bpic.net/free-photo/white-tiled-building-blue-sky_181624-6378.jpg" },
|
||||
{ id: "p2", name: "Metal Roofing", price: "$12,000+", imageSrc: "http://img.b2bpic.net/free-photo/young-man-looking-into-solid-fuel-boiler-working-with-biofuels-economical-heating-top-view_169016-14806.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="process" data-section="process">
|
||||
<ProductCatalog
|
||||
layout="section"
|
||||
products={[
|
||||
{ id: "p1", name: "Asphalt Shingles", price: "$5,000+", imageSrc: "http://img.b2bpic.net/free-photo/white-tiled-building-blue-sky_181624-6378.jpg", rating: 5 },
|
||||
{ id: "p2", name: "Metal Roofing", price: "$12,000+", imageSrc: "http://img.b2bpic.net/free-photo/young-man-looking-into-solid-fuel-boiler-working-with-biofuels-economical-heating-top-view_169016-14806.jpg", rating: 4 }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
showRating={true}
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
title="What Clients Say"
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Mark R.", handle: "@markr", testimonial: "The roofing team was professional and fast!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/blissful-tanned-woman-pajama-waving-hand-with-smile-amazing-caucasian-female-model-standing-balcony_197531-20975.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
showRating={true}
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
title="What Clients Say"
|
||||
description="Hear from our satisfied customers."
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Mark R.", handle: "@markr", testimonial: "The roofing team was professional and fast!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/blissful-tanned-woman-pajama-waving-hand-with-smile-amazing-caucasian-female-model-standing-balcony_197531-20975.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
faqs={[{ id: "q1", title: "How long does a roof last?", content: "Typically 20-30 years." }]}
|
||||
title="FAQs"
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="split"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/construction-people-working-roof_23-2149343666.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
faqs={[{ id: "q1", title: "How long does a roof last?", content: "Typically 20-30 years." }]}
|
||||
title="FAQs"
|
||||
description="Common questions about our roofing services."
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/construction-people-working-roof_23-2149343666.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
names={["Roofing Masters", "Build Pro", "Shield Roofing"]}
|
||||
title="Industry Partners"
|
||||
/>
|
||||
</div>
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
names={["Roofing Masters", "Build Pro", "Shield Roofing"]}
|
||||
title="Industry Partners"
|
||||
description="We work with top industry experts."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Get Your Estimate"
|
||||
description="Our team is ready to inspect your property."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Full Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email Address", required: true }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Get Your Estimate"
|
||||
description="Our team is ready to inspect your property."
|
||||
useInvertedBackground={false}
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Full Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email Address", required: true }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Roofing Near Me"
|
||||
columns={[{ title: "Links", items: [{ label: "Home", href: "#" }] }]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Roofing Near Me"
|
||||
columns={[{ title: "Links", items: [{ label: "Home", href: "#" }] }]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user