Merge version_2 into main #4
294
src/app/page.tsx
294
src/app/page.tsx
@@ -12,7 +12,7 @@ import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloating
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
||||
import { Calendar, Camera, CheckCircle, FileText, Send, ShieldCheck, Wrench } from "lucide-react";
|
||||
import { Calendar, Camera, FileText, Send, ShieldCheck, Wrench } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -29,162 +29,162 @@ export default function LandingPage() {
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Process", id: "how-it-works" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Roofing USA"
|
||||
button={{ text: "Get Quote", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Process", id: "how-it-works" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Roofing USA"
|
||||
button={{ text: "Get Quote", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="America’s Most Trusted Roofing Experts"
|
||||
description="Facing storm damage, leaks, or an aging roof? Get a FREE professional inspection with advanced drone imaging. No obligation, just expert care."
|
||||
testimonials={[
|
||||
{ name: "Sarah J.", handle: "@customer", testimonial: "Cooper answered the phone and was at my house that same afternoon.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-man-holding-house-model-showing-winner-gesture-shirt-vest-hat-looking-happy-front-view_176474-30662.jpg" },
|
||||
{ name: "Michael D.", handle: "@customer", testimonial: "Professional, thorough inspection, and we're very happy with the service.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-man-looking-his-girlfriend_23-2148243181.jpg" },
|
||||
{ name: "Linda M.", handle: "@customer", testimonial: "Highly efficient process. I knew exactly what was happening the whole time.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/modern-woman-home-with-book_23-2147611420.jpg" },
|
||||
{ name: "David R.", handle: "@customer", testimonial: "The communication was excellent. They exceeded all expectations.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-couple-smiling-very-happy-showing-keys-new-home-moving-buying-new-apartmet-concept_839833-22727.jpg" },
|
||||
{ name: "Karen S.", handle: "@customer", testimonial: "Roofing USA is committed to making things right. Great experience.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/proper-collaboration-two-carpenter-workers_329181-15626.jpg" }
|
||||
]}
|
||||
buttons={[{ text: "Get Free Inspection", href: "#contact" }, { text: "Check for Storm Damage", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-working-with-protection-helmet-full-shot_23-2149343641.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[{ src: "http://img.b2bpic.net/free-photo/collaboration-two-carpenters-building_329181-15617.jpg", alt: "Satisfied client" }, { src: "http://img.b2bpic.net/free-photo/young-farmer-taking-care-his-business_329181-15997.jpg", alt: "Happy homeowner" }, { src: "http://img.b2bpic.net/free-photo/close-up-men-holding-thumbs-up_23-2148752021.jpg", alt: "Satisfied homeowner" }, { src: "http://img.b2bpic.net/free-photo/happy-gay-couple-balcony_74855-20307.jpg", alt: "Happy customer" }, { src: "http://img.b2bpic.net/free-photo/portrait-happy-young-man-pointing-camera_1262-3266.jpg", alt: "Positive client" }]}
|
||||
avatarText="Trusted by 500+ Local Homeowners"
|
||||
marqueeItems={[{ type: "text", text: "Licensed & Insured" }, { type: "text", text: "24/7 Emergency Repairs" }, { type: "text", text: "Insurance Specialists" }, { type: "text", text: "Elite Quality Materials" }, { type: "text", text: "Fast Turnaround" }]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="America’s Most Trusted Roofing Experts"
|
||||
description="Facing storm damage, leaks, or an aging roof? Get a FREE professional inspection with advanced drone imaging. No obligation, just expert care."
|
||||
testimonials={[
|
||||
{ name: "Sarah J.", handle: "@customer", testimonial: "Cooper answered the phone and was at my house that same afternoon.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-man-holding-house-model-showing-winner-gesture-shirt-vest-hat-looking-happy-front-view_176474-30662.jpg" },
|
||||
{ name: "Michael D.", handle: "@customer", testimonial: "Professional, thorough inspection, and we're very happy with the service.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-man-looking-his-girlfriend_23-2148243181.jpg" },
|
||||
{ name: "Linda M.", handle: "@customer", testimonial: "Highly efficient process. I knew exactly what was happening the whole time.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/modern-woman-home-with-book_23-2147611420.jpg" },
|
||||
{ name: "David R.", handle: "@customer", testimonial: "The communication was excellent. They exceeded all expectations.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-couple-smiling-very-happy-showing-keys-new-home-moving-buying-new-apartmet-concept_839833-22727.jpg" },
|
||||
{ name: "Karen S.", handle: "@customer", testimonial: "Roofing USA is committed to making things right. Great experience.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/proper-collaboration-two-carpenter-workers_329181-15626.jpg" }
|
||||
]}
|
||||
buttons={[{ text: "Get Free Inspection", href: "#contact" }, { text: "Check for Storm Damage", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-working-with-protection-helmet-full-shot_23-2149343641.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[{ src: "http://img.b2bpic.net/free-photo/collaboration-two-carpenters-building_329181-15617.jpg", alt: "Satisfied client" }, { src: "http://img.b2bpic.net/free-photo/young-farmer-taking-care-his-business_329181-15997.jpg", alt: "Happy homeowner" }, { src: "http://img.b2bpic.net/free-photo/close-up-men-holding-thumbs-up_23-2148752021.jpg", alt: "Satisfied homeowner" }, { src: "http://img.b2bpic.net/free-photo/happy-gay-couple-balcony_74855-20307.jpg", alt: "Happy customer" }, { src: "http://img.b2bpic.net/free-photo/portrait-happy-young-man-pointing-camera_1262-3266.jpg", alt: "Positive client" }]}
|
||||
avatarText="Trusted by 500+ Local Homeowners"
|
||||
marqueeItems={[{ type: "text", text: "Licensed & Insured" }, { type: "text", text: "24/7 Emergency Repairs" }, { type: "text", text: "Insurance Specialists" }, { type: "text", text: "Elite Quality Materials" }, { type: "text", text: "Fast Turnaround" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pillars" data-section="pillars">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Advanced Inspections", description: "High-def drone details.", bentoComponent: "reveal-icon", icon: Send },
|
||||
{ title: "Stress-Free Process", description: "We advocate for you.", bentoComponent: "reveal-icon", icon: FileText },
|
||||
{ title: "Premium Results", description: "Durable, long-lasting roofs.", bentoComponent: "reveal-icon", icon: ShieldCheck }
|
||||
]}
|
||||
title="We Handle Everything"
|
||||
description="Seamless process from start to finish."
|
||||
/>
|
||||
</div>
|
||||
<div id="pillars" data-section="pillars">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Advanced Inspections", description: "High-def drone details.", bentoComponent: "reveal-icon", icon: Send },
|
||||
{ title: "Stress-Free Process", description: "We advocate for you.", bentoComponent: "reveal-icon", icon: FileText },
|
||||
{ title: "Premium Results", description: "Durable, long-lasting roofs.", bentoComponent: "reveal-icon", icon: ShieldCheck }
|
||||
]}
|
||||
title="We Handle Everything"
|
||||
description="Seamless process from start to finish."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={true}
|
||||
tag="Our Expertise"
|
||||
title="Comprehensive Roofing Services"
|
||||
description="Licensed experts provide turn-key solutions."
|
||||
subdescription="Specializing in storm damage mitigation."
|
||||
icon={Wrench}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-touching-measuring-device-wall-near-power-socket_259150-58248.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={true}
|
||||
tag="Our Expertise"
|
||||
title="Comprehensive Roofing Services"
|
||||
description="Licensed experts provide turn-key solutions."
|
||||
subdescription="Specializing in storm damage mitigation."
|
||||
icon={Wrench}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-touching-measuring-device-wall-near-power-socket_259150-58248.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="how-it-works" data-section="how-it-works">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "1. Book Free Inspection", description: "Get in touch today.", bentoComponent: "reveal-icon", icon: Calendar },
|
||||
{ title: "2. Drone Analysis", description: "Expert imaging tech.", bentoComponent: "reveal-icon", icon: Camera },
|
||||
{ title: "3. Claim Assistance", description: "We document damage.", bentoComponent: "reveal-icon", icon: FileText },
|
||||
{ title: "4. Expert Installation", description: "Precision execution.", bentoComponent: "reveal-icon", icon: Wrench },
|
||||
{ title: "5. Peace of Mind", description: "Worry-free home.", bentoComponent: "reveal-icon", icon: CheckCircle }
|
||||
]}
|
||||
title="Simple 5-Step Process"
|
||||
description="Removing the headache from claims."
|
||||
/>
|
||||
</div>
|
||||
<div id="how-it-works" data-section="how-it-works">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "1. Book Free Inspection", description: "Get in touch today.", bentoComponent: "reveal-icon", icon: Calendar },
|
||||
{ title: "2. Drone Analysis", description: "Expert imaging tech.", bentoComponent: "reveal-icon", icon: Camera },
|
||||
{ title: "3. Claim Assistance", description: "We document damage.", bentoComponent: "reveal-icon", icon: FileText },
|
||||
{ title: "4. Expert Installation", description: "Precision execution.", bentoComponent: "reveal-icon", icon: Wrench },
|
||||
{ title: "5. Peace of Mind", description: "Worry-free home.", bentoComponent: "reveal-icon", icon: CheckCircle }
|
||||
]}
|
||||
title="Simple 5-Step Process"
|
||||
description="Removing the headache from claims."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah J.", role: "Homeowner", company: "Mt. Pleasant", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/people-practicing-social-integration-workspace_23-2149405354.jpg" },
|
||||
{ id: "2", name: "Michael D.", role: "Homeowner", company: "Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3666.jpg" },
|
||||
{ id: "3", name: "Linda M.", role: "Homeowner", company: "Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/indoor-image-optimistic-energetic-mature-businesswoman-with-short-blonde-hair-posing-stylish-office-interior-with-arms-folded-her-chest-looking-camera-with-confident-happy-smile_343059-2245.jpg" },
|
||||
{ id: "4", name: "David R.", role: "Homeowner", company: "Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/workers-having-little-chat-while-having-cup-coffee_329181-15605.jpg" },
|
||||
{ id: "5", name: "Karen S.", role: "Homeowner", company: "Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/worker-with-hard-hat-level-checking-roof-timber_23-2148748853.jpg" }
|
||||
]}
|
||||
title="Real Results"
|
||||
description="Why homeowners trust us."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah J.", role: "Homeowner", company: "Mt. Pleasant", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/people-practicing-social-integration-workspace_23-2149405354.jpg" },
|
||||
{ id: "2", name: "Michael D.", role: "Homeowner", company: "Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3666.jpg" },
|
||||
{ id: "3", name: "Linda M.", role: "Homeowner", company: "Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/indoor-image-optimistic-energetic-mature-businesswoman-with-short-blonde-hair-posing-stylish-office-interior-with-arms-folded-her-chest-looking-camera-with-confident-happy-smile_343059-2245.jpg" },
|
||||
{ id: "4", name: "David R.", role: "Homeowner", company: "Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/workers-having-little-chat-while-having-cup-coffee_329181-15605.jpg" },
|
||||
{ id: "5", name: "Karen S.", role: "Homeowner", company: "Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/worker-with-hard-hat-level-checking-roof-timber_23-2148748853.jpg" }
|
||||
]}
|
||||
title="Real Results"
|
||||
description="Why homeowners trust us."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="offer" data-section="offer">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "FREE", title: "Inspection", items: ["No Obligation", "Fast Turnaround", "Drone Technology"] },
|
||||
{ id: "m2", value: "LOW", title: "Deductible", items: ["Insurance Advocacy", "Direct Billing", "Paperwork Handled"] }
|
||||
]}
|
||||
title="Could You Qualify?"
|
||||
description="Insurance may cover your replacement."
|
||||
/>
|
||||
</div>
|
||||
<div id="offer" data-section="offer">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "FREE", title: "Inspection", items: ["No Obligation", "Fast Turnaround", "Drone Technology"] },
|
||||
{ id: "m2", value: "LOW", title: "Deductible", items: ["Insurance Advocacy", "Direct Billing", "Paperwork Handled"] }
|
||||
]}
|
||||
title="Could You Qualify?"
|
||||
description="Insurance may cover your replacement."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="local" data-section="local">
|
||||
<SocialProofOne
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
names={["Mt. Pleasant", "Charleston Area", "Daniel Island", "Isle of Palms", "Sullivan's Island", "Summerville", "Goose Creek"]}
|
||||
title="Serving Homeowners"
|
||||
description="We proudly serve Mt. Pleasant."
|
||||
/>
|
||||
</div>
|
||||
<div id="local" data-section="local">
|
||||
<SocialProofOne
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
names={["Mt. Pleasant", "Charleston Area", "Daniel Island", "Isle of Palms", "Sullivan's Island", "Summerville", "Goose Creek"]}
|
||||
title="Serving Homeowners"
|
||||
description="We proudly serve Mt. Pleasant."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "How much does an inspection cost?", content: "100% free with no obligation." },
|
||||
{ id: "f2", title: "Will you work with my insurance?", content: "Yes, we act as your advocate." },
|
||||
{ id: "f3", title: "How long does a replacement take?", content: "Typically within a few days." },
|
||||
{ id: "f4", title: "Do you offer warranties?", content: "Yes, premium material warranties." }
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Info about the process."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "How much does an inspection cost?", content: "100% free with no obligation." },
|
||||
{ id: "f2", title: "Will you work with my insurance?", content: "Yes, we act as your advocate." },
|
||||
{ id: "f3", title: "How long does a replacement take?", content: "Typically within a few days." },
|
||||
{ id: "f4", title: "Do you offer warranties?", content: "Yes, premium material warranties." }
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Info about the process."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Don't Wait Until Damage Gets Worse"
|
||||
description="Schedule your inspection today."
|
||||
buttonText="Schedule Free Inspection"
|
||||
tag="Contact Us"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Don't Wait Until Damage Gets Worse"
|
||||
description="Schedule your inspection today."
|
||||
buttons={[{text: "Schedule Free Inspection", href: "#contact"}]}
|
||||
tag="Contact Us"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[{ items: [{ label: "Services", href: "#services" }, { label: "Our Process", href: "#how-it-works" }, { label: "Contact Us", href: "#contact" }] }, { items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }, { label: "License: #12345", href: "#" }] }]
|
||||
logoText="Roofing USA"
|
||||
logoSrc="https://img.b2bpic.net/free-vector/roofing-logo-design_12345-6789.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[{ items: [{ label: "Services", href: "#services" }, { label: "Our Process", href: "#how-it-works" }, { label: "Contact Us", href: "#contact" }] }, { items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }, { label: "License: #12345", href: "#" }] }]}
|
||||
logoText="Roofing USA"
|
||||
logoSrc="https://img.b2bpic.net/free-vector/roofing-logo-design_12345-6789.jpg"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user