Merge version_1 into main
Merge version_1 into main
This commit was merged in pull request #3.
This commit is contained in:
384
src/app/page.tsx
384
src/app/page.tsx
@@ -15,282 +15,132 @@ import { Award, CheckCircle, Users } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Services",
|
||||
id: "#services",
|
||||
},
|
||||
{
|
||||
name: "Why Us",
|
||||
id: "#why-us",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "#reviews",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Quote",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="Pasadena Roofing Co"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Why Us", id: "#why-us" },
|
||||
{ name: "Reviews", id: "#reviews" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Contact", id: "#contact" }
|
||||
]}
|
||||
brandName="Pasadena Roofing Co"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Pasadena's Most Trusted Roofers"
|
||||
description="Excellence in roofing. Combining master craftsmanship with transparent pricing to protect your greatest investment."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Addison Reed",
|
||||
handle: "@areed",
|
||||
testimonial: "The best roofing team in Pasadena. Professional, fast, and high quality.",
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
name: "Khalil Jackson",
|
||||
handle: "@kjackson",
|
||||
testimonial: "5-star service. They finished our roof on time and within budget.",
|
||||
rating: 5,
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Get a Free Quote",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://pixabay.com/get/gff00c5245cf20498fb15c0d5790431f4e174cee5a660e07581d53d5ca3741ca908315741d4f264e430db579dff0a69706f5e7e714272956b2d53c7565a59b822_1280.jpg"
|
||||
imageAlt="Luxurious roofing by Pasadena Roofing Co"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
title="Pasadena's Most Trusted Roofers"
|
||||
description="Excellence in roofing. Combining master craftsmanship with transparent pricing to protect your greatest investment."
|
||||
background={{ variant: "gradient-bars" }}
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="https://pixabay.com/get/gff00c5245cf20498fb15c0d5790431f4e174cee5a660e07581d53d5ca3741ca908315741d4f264e430db579dff0a69706f5e7e714272956b2d53c7565a59b822_1280.jpg"
|
||||
imageAlt="luxury roof installation Pasadena"
|
||||
useInvertedBackground={true}
|
||||
buttons={[{ text: "Get a Free Quote", href: "#contact" }]}
|
||||
testimonials={[
|
||||
{ name: "Addison Reed", handle: "@areed", testimonial: "The best roofing team in Pasadena. Professional, fast, and high quality.", rating: 5 },
|
||||
{ name: "Khalil Jackson", handle: "@kjackson", testimonial: "5-star service. They finished our roof on time and within budget.", rating: 5 }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Roof Replacement",
|
||||
price: "Custom Quote",
|
||||
variant: "Residential",
|
||||
imageSrc: "https://pixabay.com/get/gae1f037b0485d60b07bccf43b7d49fab4b2bf8d2776306eda9a8e01e9ccedb27664eae208d9333759313cef5f30b187e11a2f7183d6187e47faa39fd283030bd_1280.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Roof Repair",
|
||||
price: "Starting at $499",
|
||||
variant: "General",
|
||||
imageSrc: "https://pixabay.com/get/gae1f037b0485d60b07bccf43b7d49fab4b2bf8d2776306eda9a8e01e9ccedb27664eae208d9333759313cef5f30b187e11a2f7183d6187e47faa39fd283030bd_1280.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Roof Inspection",
|
||||
price: "Complimentary",
|
||||
variant: "Preventative",
|
||||
imageSrc: "https://pixabay.com/get/gae1f037b0485d60b07bccf43b7d49fab4b2bf8d2776306eda9a8e01e9ccedb27664eae208d9333759313cef5f30b187e11a2f7183d6187e47faa39fd283030bd_1280.jpg?_wi=3",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "New Installation",
|
||||
price: "Quote Requested",
|
||||
variant: "New Build",
|
||||
imageSrc: "https://pixabay.com/get/gae1f037b0485d60b07bccf43b7d49fab4b2bf8d2776306eda9a8e01e9ccedb27664eae208d9333759313cef5f30b187e11a2f7183d6187e47faa39fd283030bd_1280.jpg?_wi=4",
|
||||
},
|
||||
]}
|
||||
title="Our Expert Services"
|
||||
description="Comprehensive roofing solutions tailored to your home's unique needs."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<ProductCardFour
|
||||
title="Our Expert Services"
|
||||
description="Comprehensive roofing solutions tailored to your home's unique needs."
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", name: "Roof Replacement", price: "Custom Quote", variant: "Residential", imageSrc: "https://pixabay.com/get/gae1f037b0485d60b07bccf43b7d49fab4b2bf8d2776306eda9a8e01e9ccedb27664eae208d9333759313cef5f30b187e11a2f7183d6187e47faa39fd283030bd_1280.jpg" },
|
||||
{ id: "2", name: "Roof Repair", price: "Starting at $499", variant: "General", imageSrc: "https://pixabay.com/get/gae1f037b0485d60b07bccf43b7d49fab4b2bf8d2776306eda9a8e01e9ccedb27664eae208d9333759313cef5f30b187e11a2f7183d6187e47faa39fd283030bd_1280.jpg" },
|
||||
{ id: "3", name: "Roof Inspection", price: "Complimentary", variant: "Preventative", imageSrc: "https://pixabay.com/get/gae1f037b0485d60b07bccf43b7d49fab4b2bf8d2776306eda9a8e01e9ccedb27664eae208d9333759313cef5f30b187e11a2f7183d6187e47faa39fd283030bd_1280.jpg" },
|
||||
{ id: "4", name: "New Installation", price: "Quote Requested", variant: "New Build", imageSrc: "https://pixabay.com/get/gae1f037b0485d60b07bccf43b7d49fab4b2bf8d2776306eda9a8e01e9ccedb27664eae208d9333759313cef5f30b187e11a2f7183d6187e47faa39fd283030bd_1280.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="why-us" data-section="why-us">
|
||||
<FeatureCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Same-day Quotes",
|
||||
description: "Rapid response for your roofing needs.",
|
||||
phoneOne: {
|
||||
imageSrc: "https://pixabay.com/get/gae1f037b0485d60b07bccf43b7d49fab4b2bf8d2776306eda9a8e01e9ccedb27664eae208d9333759313cef5f30b187e11a2f7183d6187e47faa39fd283030bd_1280.jpg?_wi=5",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "https://pixabay.com/get/gae1f037b0485d60b07bccf43b7d49fab4b2bf8d2776306eda9a8e01e9ccedb27664eae208d9333759313cef5f30b187e11a2f7183d6187e47faa39fd283030bd_1280.jpg?_wi=6",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "On-time Completion",
|
||||
description: "Respecting your schedule, guaranteed.",
|
||||
phoneOne: {
|
||||
imageSrc: "https://pixabay.com/get/gae1f037b0485d60b07bccf43b7d49fab4b2bf8d2776306eda9a8e01e9ccedb27664eae208d9333759313cef5f30b187e11a2f7183d6187e47faa39fd283030bd_1280.jpg?_wi=7",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "https://pixabay.com/get/gae1f037b0485d60b07bccf43b7d49fab4b2bf8d2776306eda9a8e01e9ccedb27664eae208d9333759313cef5f30b187e11a2f7183d6187e47faa39fd283030bd_1280.jpg?_wi=8",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Local Pasadena Experts",
|
||||
description: "Deep knowledge of our community standards.",
|
||||
phoneOne: {
|
||||
imageSrc: "https://pixabay.com/get/gae1f037b0485d60b07bccf43b7d49fab4b2bf8d2776306eda9a8e01e9ccedb27664eae208d9333759313cef5f30b187e11a2f7183d6187e47faa39fd283030bd_1280.jpg?_wi=9",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "https://pixabay.com/get/gae1f037b0485d60b07bccf43b7d49fab4b2bf8d2776306eda9a8e01e9ccedb27664eae208d9333759313cef5f30b187e11a2f7183d6187e47faa39fd283030bd_1280.jpg?_wi=10",
|
||||
},
|
||||
},
|
||||
]}
|
||||
showStepNumbers={true}
|
||||
title="Why Choose Us"
|
||||
description="Local expertise meeting premium quality standards."
|
||||
/>
|
||||
</div>
|
||||
<div id="why-us" data-section="why-us">
|
||||
<FeatureCardNine
|
||||
title="Why Choose Us"
|
||||
description="Local expertise meeting premium quality standards."
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
showStepNumbers={true}
|
||||
features={[
|
||||
{ id: 1, title: "Same-day Quotes", description: "Rapid response for your roofing needs.", phoneOne: { imageSrc: "https://pixabay.com/get/gae1f037b0485d60b07bccf43b7d49fab4b2bf8d2776306eda9a8e01e9ccedb27664eae208d9333759313cef5f30b187e11a2f7183d6187e47faa39fd283030bd_1280.jpg" }, phoneTwo: { imageSrc: "https://pixabay.com/get/gae1f037b0485d60b07bccf43b7d49fab4b2bf8d2776306eda9a8e01e9ccedb27664eae208d9333759313cef5f30b187e11a2f7183d6187e47faa39fd283030bd_1280.jpg" } },
|
||||
{ id: 2, title: "On-time Completion", description: "Respecting your schedule, guaranteed.", phoneOne: { imageSrc: "https://pixabay.com/get/gae1f037b0485d60b07bccf43b7d49fab4b2bf8d2776306eda9a8e01e9ccedb27664eae208d9333759313cef5f30b187e11a2f7183d6187e47faa39fd283030bd_1280.jpg" }, phoneTwo: { imageSrc: "https://pixabay.com/get/gae1f037b0485d60b07bccf43b7d49fab4b2bf8d2776306eda9a8e01e9ccedb27664eae208d9333759313cef5f30b187e11a2f7183d6187e47faa39fd283030bd_1280.jpg" } },
|
||||
{ id: 3, title: "Local Pasadena Experts", description: "Deep knowledge of our community standards.", phoneOne: { imageSrc: "https://pixabay.com/get/gae1f037b0485d60b07bccf43b7d49fab4b2bf8d2776306eda9a8e01e9ccedb27664eae208d9333759313cef5f30b187e11a2f7183d6187e47faa39fd283030bd_1280.jpg" }, phoneTwo: { imageSrc: "https://pixabay.com/get/gae1f037b0485d60b07bccf43b7d49fab4b2bf8d2776306eda9a8e01e9ccedb27664eae208d9333759313cef5f30b187e11a2f7183d6187e47faa39fd283030bd_1280.jpg" } }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="reviews" data-section="reviews">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Addison Reed",
|
||||
role: "Homeowner",
|
||||
company: "Pasadena",
|
||||
rating: 5,
|
||||
imageSrc: "https://pixabay.com/get/g4398a3ed02229190bc9a7856a98380fcd364e4e4dea523a28318232991cb81bc2f1f184935623f27c94a0c64f77546513d758dedbe8afb4f75bce18f279092a4_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Khalil Jackson",
|
||||
role: "Homeowner",
|
||||
company: "Pasadena",
|
||||
rating: 5,
|
||||
imageSrc: "https://pixabay.com/get/ge09d30e3ef2ce62652f86010b8f00cae90ab8812d7e6d70a411d56dd73f2c2528a1e8795ed168e851caebbb4e51e2f197da95d3094726107acb1dcf9e0ddc855_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Johan Jackson",
|
||||
role: "Homeowner",
|
||||
company: "Pasadena",
|
||||
rating: 5,
|
||||
imageSrc: "https://pixabay.com/get/g9896599bed62cd8dce765237b268c7aff4fd666ee88a247e2fb9809400b7987bc108317883e6a3228413aa3028d546a21a769f805d1590377df50aa2253dee53_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Donna Martin",
|
||||
role: "Homeowner",
|
||||
company: "Pasadena",
|
||||
rating: 5,
|
||||
imageSrc: "https://pixabay.com/get/g78a8db2053f43e61e42b59c9ae8b6a4722e0466fc899d3064b161b770eaa6b8eb28ca9bf9fa7a593d6eb4d30e626d6ecb529ecaa7d5109653158630ac0b16ea4_1280.jpg",
|
||||
},
|
||||
]}
|
||||
title="Client Feedback"
|
||||
description="5.0 Rating across 100+ projects in Pasadena."
|
||||
/>
|
||||
</div>
|
||||
<div id="reviews" data-section="reviews">
|
||||
<TestimonialCardOne
|
||||
title="Client Feedback"
|
||||
description="5.0 Rating across 100+ projects in Pasadena."
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Addison Reed", role: "Homeowner", company: "Pasadena", rating: 5, imageSrc: "https://pixabay.com/get/g4398a3ed02229190bc9a7856a98380fcd364e4e4dea523a28318232991cb81bc2f1f184935623f27c94a0c64f77546513d758dedbe8afb4f75bce18f279092a4_1280.jpg" },
|
||||
{ id: "2", name: "Khalil Jackson", role: "Homeowner", company: "Pasadena", rating: 5, imageSrc: "https://pixabay.com/get/ge09d30e3ef2ce62652f86010b8f00cae90ab8812d7e6d70a411d56dd73f2c2528a1e8795ed168e851caebbb4e51e2f197da95d3094726107acb1dcf9e0ddc855_1280.jpg" },
|
||||
{ id: "3", name: "Johan Jackson", role: "Homeowner", company: "Pasadena", rating: 5, imageSrc: "https://pixabay.com/get/g9896599bed62cd8dce765237b268c7aff4fd666ee88a247e2fb9809400b7987bc108317883e6a3228413aa3028d546a21a769f805d1590377df50aa2253dee53_1280.jpg" },
|
||||
{ id: "4", name: "Donna Martin", role: "Homeowner", company: "Pasadena", rating: 5, imageSrc: "https://pixabay.com/get/g78a8db2053f43e61e42b59c9ae8b6a4722e0466fc899d3064b161b770eaa6b8eb28ca9bf9fa7a593d6eb4d30e626d6ecb529ecaa7d5109653158630ac0b16ea4_1280.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="About Our Team"
|
||||
metrics={[
|
||||
{
|
||||
icon: Users,
|
||||
label: "Community Focused",
|
||||
value: "100%",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
label: "Years Served",
|
||||
value: "20+",
|
||||
},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
label: "Google Rating",
|
||||
value: "5.0",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
title="About Our Team"
|
||||
useInvertedBackground={true}
|
||||
metricsAnimation="slide-up"
|
||||
metrics={[
|
||||
{ icon: Users, label: "Community Focused", value: "100%" },
|
||||
{ icon: Award, label: "Years Served", value: "20+" },
|
||||
{ icon: CheckCircle, label: "Google Rating", value: "5.0" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Ready to start?"
|
||||
title="Get a Free Quote"
|
||||
description="Contact us today for professional roofing services in Pasadena."
|
||||
buttons={[
|
||||
{
|
||||
text: "Call (626) 555-0123",
|
||||
href: "tel:+16265550123",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Ready to start?"
|
||||
title="Get a Free Quote"
|
||||
description="Contact us today for professional roofing services in Pasadena."
|
||||
useInvertedBackground={false}
|
||||
buttons={[{ text: "Call (626) 555-0123", href: "tel:+16265550123" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Pasadena Roofing Co",
|
||||
items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
items: [
|
||||
{
|
||||
label: "(626) 555-0123",
|
||||
href: "tel:+16265550123",
|
||||
},
|
||||
{
|
||||
label: "Email Us",
|
||||
href: "mailto:hello@pasadenaroofing.com",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 Pasadena Roofing Co. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{ title: "Pasadena Roofing Co", items: [{ label: "Home", href: "#" }, { label: "Services", href: "#services" }] },
|
||||
{ title: "Contact", items: [{ label: "(626) 555-0123", href: "tel:+16265550123" }, { label: "Email Us", href: "mailto:hello@pasadenaroofing.com" }] }
|
||||
]}
|
||||
copyrightText="© 2024 Pasadena Roofing Co. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user