Update src/app/page.tsx
This commit is contained in:
292
src/app/page.tsx
292
src/app/page.tsx
@@ -29,185 +29,137 @@ export default function LandingPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Services", id: "services"},
|
||||
{
|
||||
name: "Process", id: "about"},
|
||||
{
|
||||
name: "Testimonials", id: "testimonials"},
|
||||
{
|
||||
name: "FAQ", id: "faq"},
|
||||
]}
|
||||
brandName="San Diego Roof Pros"
|
||||
button={{
|
||||
text: "Get Quote", href: "#contact"}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Process", id: "about" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "FAQ", id: "faq" }
|
||||
]}
|
||||
brandName="San Diego Roof Pros"
|
||||
button={{ text: "Get Quote", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="San Diego Roofs Built to Last"
|
||||
description="Expert replacement and repair from licensed, local contractors. Get a free inspection and honest assessment today—no pressure, no surprises."
|
||||
buttons={[
|
||||
{
|
||||
text: "Schedule Free Inspection", href: "#contact"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/front-view-construction-roof-daylight_23-2148748815.jpg"
|
||||
imageAlt="residential roof replacement san diego"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="San Diego Roofs Built to Last"
|
||||
description="Expert replacement and repair from licensed, local contractors. Get a free inspection and honest assessment today—no pressure, no surprises."
|
||||
buttons={[{ text: "Schedule Free Inspection", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/front-view-construction-roof-daylight_23-2148748815.jpg"
|
||||
imageAlt="residential roof replacement san diego"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={true}
|
||||
title="Your Trusted San Diego Local Experts"
|
||||
description={[
|
||||
"For over 20 years, we've provided San Diego homeowners with premium roofing solutions that withstand the unique local climate.", "Our mission is to bring transparency, high-quality materials, and expert craftsmanship to every project, whether it's a minor repair or a complete replacement."]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={true}
|
||||
title="Your Trusted San Diego Local Experts"
|
||||
description={[
|
||||
"For over 20 years, we've provided San Diego homeowners with premium roofing solutions that withstand the unique local climate.", "Our mission is to bring transparency, high-quality materials, and expert craftsmanship to every project, whether it's a minor repair or a complete replacement."
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Roof Replacement", description: "High-durability materials installed to last.", bentoComponent: "reveal-icon", icon: Shield,
|
||||
},
|
||||
{
|
||||
title: "Expert Repair", description: "Fast response for leaks and weather damage.", bentoComponent: "reveal-icon", icon: Zap,
|
||||
},
|
||||
{
|
||||
title: "Routine Inspection", description: "Preventative care to extend roof lifespan.", bentoComponent: "reveal-icon", icon: Award,
|
||||
},
|
||||
]}
|
||||
title="Comprehensive Roofing Services"
|
||||
description="Tailored solutions to protect your property and ensure long-term value."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Roof Replacement", description: "High-durability materials installed to last.", bentoComponent: "reveal-icon", icon: Shield },
|
||||
{ title: "Expert Repair", description: "Fast response for leaks and weather damage.", bentoComponent: "reveal-icon", icon: Zap },
|
||||
{ title: "Routine Inspection", description: "Preventative care to extend roof lifespan.", bentoComponent: "reveal-icon", icon: Award }
|
||||
]}
|
||||
title="Comprehensive Roofing Services"
|
||||
description="Tailored solutions to protect your property and ensure long-term value."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="credentials" data-section="credentials">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1", icon: CheckCircle,
|
||||
title: "Projects Completed", value: "1,500+"},
|
||||
{
|
||||
id: "m2", icon: Star,
|
||||
title: "Customer Rating", value: "4.9/5"},
|
||||
{
|
||||
id: "m3", icon: Clock,
|
||||
title: "Years Local", value: "20+"},
|
||||
]}
|
||||
title="Why Choose Our Team?"
|
||||
description="Proven results for residential and commercial projects across San Diego."
|
||||
/>
|
||||
</div>
|
||||
<div id="credentials" data-section="credentials">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "m1", icon: CheckCircle, title: "Projects Completed", value: "1,500+" },
|
||||
{ id: "m2", icon: Star, title: "Customer Rating", value: "4.9/5" },
|
||||
{ id: "m3", icon: Clock, title: "Years Local", value: "20+" }
|
||||
]}
|
||||
title="Why Choose Our Team?"
|
||||
description="Proven results for residential and commercial projects across San Diego."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "p1", tag: "Essential", price: "Custom", period: "/ project", description: "Professional repair and maintenance plans.", button: {
|
||||
text: "Get Quote", href: "#contact"},
|
||||
featuresTitle: "Includes:", features: [
|
||||
"Leak detection", "Shingle repair", "Minor patching"],
|
||||
},
|
||||
{
|
||||
id: "p2", tag: "Complete", price: "Custom", period: "/ project", description: "Full roof replacement and installation.", button: {
|
||||
text: "Get Quote", href: "#contact"},
|
||||
featuresTitle: "Includes:", features: [
|
||||
"Full tear-off", "Material upgrade", "System warranty"],
|
||||
},
|
||||
]}
|
||||
title="Transparent Pricing Options"
|
||||
description="Clear and honest assessments for every type of roofing project."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "p1", tag: "Essential", price: "Custom", period: "/ project", description: "Professional repair and maintenance plans.", button: { text: "Get Quote", href: "#contact" }, featuresTitle: "Includes:", features: ["Leak detection", "Shingle repair", "Minor patching"]
|
||||
},
|
||||
{
|
||||
id: "p2", tag: "Complete", price: "Custom", period: "/ project", description: "Full roof replacement and installation.", button: { text: "Get Quote", href: "#contact" }, featuresTitle: "Includes:", features: ["Full tear-off", "Material upgrade", "System warranty"]
|
||||
}
|
||||
]}
|
||||
title="Transparent Pricing Options"
|
||||
description="Clear and honest assessments for every type of roofing project."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Sarah Johnson", imageSrc: "http://img.b2bpic.net/free-photo/financial-independent-woman-buying-new-house_23-2149571927.jpg"},
|
||||
{
|
||||
id: "2", name: "Michael Chen", imageSrc: "http://img.b2bpic.net/free-photo/business-man-sharing-idea-with-colleague_23-2148336895.jpg"},
|
||||
{
|
||||
id: "3", name: "Emily Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/front-view-cute-girl-looking-away_23-2148436134.jpg"},
|
||||
{
|
||||
id: "4", name: "David Kim", imageSrc: "http://img.b2bpic.net/free-photo/relaxing-fume-banking-adult-absence_1134-936.jpg"},
|
||||
{
|
||||
id: "5", name: "Jessica Lee", imageSrc: "http://img.b2bpic.net/free-photo/beauty-style-fashion-femininity-concept-positive-beautiful-young-european-woman-blue-shirt-looking-camera-with-broad-happy-smile-being-good-mood-kitchen-interior-background_343059-2087.jpg"},
|
||||
]}
|
||||
cardTitle="What Our Clients Say"
|
||||
cardTag="Social Proof"
|
||||
cardAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah Johnson", imageSrc: "http://img.b2bpic.net/free-photo/financial-independent-woman-buying-new-house_23-2149571927.jpg" },
|
||||
{ id: "2", name: "Michael Chen", imageSrc: "http://img.b2bpic.net/free-photo/business-man-sharing-idea-with-colleague_23-2148336895.jpg" },
|
||||
{ id: "3", name: "Emily Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/front-view-cute-girl-looking-away_23-2148436134.jpg" },
|
||||
{ id: "4", name: "David Kim", imageSrc: "http://img.b2bpic.net/free-photo/relaxing-fume-banking-adult-absence_1134-936.jpg" },
|
||||
{ id: "5", name: "Jessica Lee", imageSrc: "http://img.b2bpic.net/free-photo/beauty-style-fashion-femininity-concept-positive-beautiful-young-european-woman-blue-shirt-looking-camera-with-broad-happy-smile-being-good-mood-kitchen-interior-background_343059-2087.jpg" }
|
||||
]}
|
||||
cardTitle="What Our Clients Say"
|
||||
cardTag="Social Proof"
|
||||
cardAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1", title: "How long does a roof last?", content: "Most asphalt roofs in San Diego last 20-25 years depending on maintenance."},
|
||||
{
|
||||
id: "f2", title: "Do you provide free inspections?", content: "Yes, we offer completely free, no-pressure inspections."},
|
||||
{
|
||||
id: "f3", title: "Are you licensed and insured?", content: "Absolutely, we are fully licensed and bonded for all CA roofing work."},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/construction-worker-using-hammer-job-site_23-2150530688.jpg"
|
||||
title="Frequently Asked Questions"
|
||||
description="Common questions regarding San Diego roof care."
|
||||
faqsAnimation="slide-up"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "How long does a roof last?", content: "Most asphalt roofs in San Diego last 20-25 years depending on maintenance." },
|
||||
{ id: "f2", title: "Do you provide free inspections?", content: "Yes, we offer completely free, no-pressure inspections." },
|
||||
{ id: "f3", title: "Are you licensed and insured?", content: "Absolutely, we are fully licensed and bonded for all CA roofing work." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/construction-worker-using-hammer-job-site_23-2150530688.jpg"
|
||||
title="Frequently Asked Questions"
|
||||
description="Common questions regarding San Diego roof care."
|
||||
faqsAnimation="slide-up"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "animated-grid"}}
|
||||
text="Ready to protect your San Diego home? Schedule your free inspection today with our local experts."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "animated-grid" }}
|
||||
text="Ready to protect your San Diego home? Schedule your free inspection today with our local experts."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Services", href: "#services"},
|
||||
{
|
||||
label: "Pricing", href: "#pricing"},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Contact", href: "#contact"},
|
||||
{
|
||||
label: "Privacy Policy", href: "#"},
|
||||
],
|
||||
},
|
||||
],
|
||||
logoText="San Diego Roof Pros"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{ items: [{ label: "Services", href: "#services" }, { label: "Pricing", href: "#pricing" }] },
|
||||
{ items: [{ label: "Contact", href: "#contact" }, { label: "Privacy Policy", href: "#" }] }
|
||||
]}
|
||||
logoText="San Diego Roof Pros"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user