Update src/app/page.tsx
This commit is contained in:
279
src/app/page.tsx
279
src/app/page.tsx
@@ -33,38 +33,22 @@ export default function LandingPage() {
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#hero",
|
||||
},
|
||||
name: "Home", id: "#hero"},
|
||||
{
|
||||
name: "Services",
|
||||
id: "#services",
|
||||
},
|
||||
name: "Services", id: "#services"},
|
||||
{
|
||||
name: "Portfolio",
|
||||
id: "#portfolio",
|
||||
},
|
||||
name: "Portfolio", id: "#portfolio"},
|
||||
{
|
||||
name: "About Us",
|
||||
id: "#about",
|
||||
},
|
||||
name: "About Us", id: "#about"},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "#testimonials",
|
||||
},
|
||||
name: "Testimonials", id: "#testimonials"},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "#faq",
|
||||
},
|
||||
name: "FAQ", id: "#faq"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
name: "Contact", id: "#contact"},
|
||||
]}
|
||||
button={{
|
||||
text: "Schedule Consultation",
|
||||
href: "#contact",
|
||||
}}
|
||||
text: "Schedule Consultation", href: "#contact"}}
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gmbsji"
|
||||
logoAlt="Elysian Roofing Logo"
|
||||
brandName="Elysian Roofing"
|
||||
@@ -74,65 +58,40 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
variant: "plain"}}
|
||||
title="Roofing That Elevates Your Home"
|
||||
description="Premium materials, flawless execution, and designs that complement Los Angeles's finest properties. We deliver roofs as exceptional as the homes they protect."
|
||||
buttons={[
|
||||
{
|
||||
text: "Schedule Your Consultation",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Schedule Your Consultation", href: "#contact"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/view-stone-building-with-large-windows_23-2148252828.jpg"
|
||||
imageAlt="Luxury home with a new roof in Los Angeles"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/lifestyle-portrait-handsome-young-man-sitting-cafe-talking-friend-mobile-phone-with-wireless-earphones-laughing-smiling-listening-funny-podcast_1258-314334.jpg",
|
||||
alt: "Satisfied client John D.",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/lifestyle-portrait-handsome-young-man-sitting-cafe-talking-friend-mobile-phone-with-wireless-earphones-laughing-smiling-listening-funny-podcast_1258-314334.jpg", alt: "Satisfied client John D."},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-people-having-fun_23-2149832986.jpg",
|
||||
alt: "Satisfied client Emily W.",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/young-people-having-fun_23-2149832986.jpg", alt: "Satisfied client Emily W."},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/latin-amateurs-dancing-salsa_23-2151245245.jpg",
|
||||
alt: "Satisfied client David P.",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/latin-amateurs-dancing-salsa_23-2151245245.jpg", alt: "Satisfied client David P."},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/handsome-welldressed-arabian-man-smoke-cigar-with-glass-whiskey-balcony-pub_627829-5920.jpg",
|
||||
alt: "Satisfied client Sarah K.",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/handsome-welldressed-arabian-man-smoke-cigar-with-glass-whiskey-balcony-pub_627829-5920.jpg", alt: "Satisfied client Sarah K."},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-sexy-smiling-handsome-fashion-businessman-model-dressed-elegant-blue-suit-posing-street-background-metrosexual_158538-10424.jpg",
|
||||
alt: "Satisfied client Michael B.",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-sexy-smiling-handsome-fashion-businessman-model-dressed-elegant-blue-suit-posing-street-background-metrosexual_158538-10424.jpg", alt: "Satisfied client Michael B."},
|
||||
]}
|
||||
avatarText="Trusted by over 1000+ luxury homeowners"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Exceptional Craftsmanship",
|
||||
},
|
||||
type: "text", text: "Exceptional Craftsmanship"},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/modern-skyscrapers-japan-business-district_23-2148836784.jpg",
|
||||
alt: "Modern skyscrapers",
|
||||
},
|
||||
type: "image", src: "http://img.b2bpic.net/free-photo/modern-skyscrapers-japan-business-district_23-2148836784.jpg", alt: "Modern skyscrapers"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Timeless Design",
|
||||
},
|
||||
type: "text", text: "Timeless Design"},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-modern-building-modern-architecture_181624-21692.jpg",
|
||||
alt: "Beautiful modern building",
|
||||
},
|
||||
type: "image", src: "http://img.b2bpic.net/free-photo/beautiful-modern-building-modern-architecture_181624-21692.jpg", alt: "Beautiful modern building"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Unrivaled Durability",
|
||||
},
|
||||
type: "text", text: "Unrivaled Durability"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -143,11 +102,8 @@ export default function LandingPage() {
|
||||
title="Crafting Lasting Luxury: Our Commitment to Excellence"
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More About Our Process",
|
||||
href: "#services",
|
||||
},
|
||||
text: "Learn More About Our Process", href: "#services"},
|
||||
]}
|
||||
description="Elysian Roofing is Los Angeles's premier choice for homeowners who demand perfection. We blend time-honored craftsmanship with innovative techniques, using only the finest materials to create roofs that are not just protective, but truly architectural masterpieces. Our meticulous attention to detail ensures every project reflects the elegance and value of your home."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -158,34 +114,16 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "service-1",
|
||||
label: "Meticulous Planning",
|
||||
title: "Tailored Design Consultations",
|
||||
items: [
|
||||
"Detailed site assessment & analysis",
|
||||
"Customized material selection advice",
|
||||
"Architectural integration planning",
|
||||
],
|
||||
id: "service-1", label: "Meticulous Planning", title: "Tailored Design Consultations", items: [
|
||||
"Detailed site assessment & analysis", "Customized material selection advice", "Architectural integration planning"],
|
||||
},
|
||||
{
|
||||
id: "service-2",
|
||||
label: "Superior Craftsmanship",
|
||||
title: "Flawless Installation & Execution",
|
||||
items: [
|
||||
"Experienced, certified roofing artisans",
|
||||
"Advanced installation techniques",
|
||||
"Rigorous quality control at every stage",
|
||||
],
|
||||
id: "service-2", label: "Superior Craftsmanship", title: "Flawless Installation & Execution", items: [
|
||||
"Experienced, certified roofing artisans", "Advanced installation techniques", "Rigorous quality control at every stage"],
|
||||
},
|
||||
{
|
||||
id: "service-3",
|
||||
label: "Lasting Protection",
|
||||
title: "Premium Durability & Warranties",
|
||||
items: [
|
||||
"Exclusive access to high-grade materials",
|
||||
"Industry-leading structural integrity",
|
||||
"Comprehensive long-term guarantees",
|
||||
],
|
||||
id: "service-3", label: "Lasting Protection", title: "Premium Durability & Warranties", items: [
|
||||
"Exclusive access to high-grade materials", "Industry-leading structural integrity", "Comprehensive long-term guarantees"],
|
||||
},
|
||||
]}
|
||||
title="Our Signature Approach: Precision, Durability, Beauty"
|
||||
@@ -201,47 +139,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p-1",
|
||||
name: "Luxury Clay Tile",
|
||||
price: "Timeless Elegance",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-architecture-italy-style_1203-7263.jpg",
|
||||
imageAlt: "Luxury Clay Tile Roof",
|
||||
},
|
||||
id: "p-1", name: "Luxury Clay Tile", price: "Timeless Elegance", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-architecture-italy-style_1203-7263.jpg", imageAlt: "Luxury Clay Tile Roof"},
|
||||
{
|
||||
id: "p-2",
|
||||
name: "Natural Slate Roofing",
|
||||
price: "Unmatched Durability",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/new-york-city-ny-usa-october-20-2020-vessel-hudson-yards-staircase-designed-by-architect-thomas-heatherwick-midtown-manhattan-west_1321-2491.jpg",
|
||||
imageAlt: "Natural Slate Roof",
|
||||
},
|
||||
id: "p-2", name: "Natural Slate Roofing", price: "Unmatched Durability", imageSrc: "http://img.b2bpic.net/free-photo/new-york-city-ny-usa-october-20-2020-vessel-hudson-yards-staircase-designed-by-architect-thomas-heatherwick-midtown-manhattan-west_1321-2491.jpg", imageAlt: "Natural Slate Roof"},
|
||||
{
|
||||
id: "p-3",
|
||||
name: "Modern Metal Systems",
|
||||
price: "Sleek & Sustainable",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/streetlight_23-2148098669.jpg",
|
||||
imageAlt: "Modern Metal Roof",
|
||||
},
|
||||
id: "p-3", name: "Modern Metal Systems", price: "Sleek & Sustainable", imageSrc: "http://img.b2bpic.net/free-photo/streetlight_23-2148098669.jpg", imageAlt: "Modern Metal Roof"},
|
||||
{
|
||||
id: "p-4",
|
||||
name: "Cedar Shake Shingles",
|
||||
price: "Rustic Grandeur",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-wooden-house-with-dark-roof_23-2149343705.jpg",
|
||||
imageAlt: "Cedar Shake Shingles Roof",
|
||||
},
|
||||
id: "p-4", name: "Cedar Shake Shingles", price: "Rustic Grandeur", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-wooden-house-with-dark-roof_23-2149343705.jpg", imageAlt: "Cedar Shake Shingles Roof"},
|
||||
{
|
||||
id: "p-5",
|
||||
name: "Custom Flat Roofs",
|
||||
price: "Contemporary Design",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-enjoying-her-exterior-hobbies_23-2149367017.jpg",
|
||||
imageAlt: "Custom Flat Roof",
|
||||
},
|
||||
id: "p-5", name: "Custom Flat Roofs", price: "Contemporary Design", imageSrc: "http://img.b2bpic.net/free-photo/woman-enjoying-her-exterior-hobbies_23-2149367017.jpg", imageAlt: "Custom Flat Roof"},
|
||||
{
|
||||
id: "p-6",
|
||||
name: "Integrated Green Roofs",
|
||||
price: "Eco-Luxury Living",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/old-roof-house-forest-covered-with-moss_169016-24751.jpg",
|
||||
imageAlt: "Integrated Green Roof",
|
||||
},
|
||||
id: "p-6", name: "Integrated Green Roofs", price: "Eco-Luxury Living", imageSrc: "http://img.b2bpic.net/free-photo/old-roof-house-forest-covered-with-moss_169016-24751.jpg", imageAlt: "Integrated Green Roof"},
|
||||
]}
|
||||
title="Exquisite Materials for Discerning Tastes"
|
||||
description="Explore our curated selection of high-end roofing materials, each chosen for its aesthetic appeal, durability, and ability to enhance the unique character of Los Angeles's luxury homes."
|
||||
@@ -255,28 +163,16 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m-1",
|
||||
value: "25+",
|
||||
title: "Years of Expertise",
|
||||
items: [
|
||||
"Decades of high-end roofing experience in LA.",
|
||||
],
|
||||
id: "m-1", value: "25+", title: "Years of Expertise", items: [
|
||||
"Decades of high-end roofing experience in LA."],
|
||||
},
|
||||
{
|
||||
id: "m-2",
|
||||
value: "99%",
|
||||
title: "Client Satisfaction",
|
||||
items: [
|
||||
"Our relentless pursuit of perfection resonates with clients.",
|
||||
],
|
||||
id: "m-2", value: "99%", title: "Client Satisfaction", items: [
|
||||
"Our relentless pursuit of perfection resonates with clients."],
|
||||
},
|
||||
{
|
||||
id: "m-3",
|
||||
value: "500+",
|
||||
title: "Luxury Projects",
|
||||
items: [
|
||||
"Proven track record with LA's most prestigious properties.",
|
||||
],
|
||||
id: "m-3", value: "500+", title: "Luxury Projects", items: [
|
||||
"Proven track record with LA's most prestigious properties."],
|
||||
},
|
||||
]}
|
||||
title="A Legacy of Trust & Superior Results"
|
||||
@@ -291,64 +187,28 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t-1",
|
||||
name: "Sophia R.",
|
||||
role: "Bel Air Homeowner",
|
||||
company: "Private Client",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-showing-engagement-ring-his-happy-girlfriend-restaurant_23-2147891141.jpg",
|
||||
imageAlt: "Sophia R. smiling",
|
||||
},
|
||||
id: "t-1", name: "Sophia R.", role: "Bel Air Homeowner", company: "Private Client", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-showing-engagement-ring-his-happy-girlfriend-restaurant_23-2147891141.jpg", imageAlt: "Sophia R. smiling"},
|
||||
{
|
||||
id: "t-2",
|
||||
name: "Marcus L.",
|
||||
role: "Beverly Hills Resident",
|
||||
company: "Private Client",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-mature-businessman-with-cup-coffee_23-2147955267.jpg",
|
||||
imageAlt: "Marcus L. smiling",
|
||||
},
|
||||
id: "t-2", name: "Marcus L.", role: "Beverly Hills Resident", company: "Private Client", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-mature-businessman-with-cup-coffee_23-2147955267.jpg", imageAlt: "Marcus L. smiling"},
|
||||
{
|
||||
id: "t-3",
|
||||
name: "The Chen Family",
|
||||
role: "Malibu Estate Owners",
|
||||
company: "Private Client",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-couple-announcing-pregnancy-with-smartphone_23-2150296850.jpg",
|
||||
imageAlt: "The Chen Family smiling",
|
||||
},
|
||||
id: "t-3", name: "The Chen Family", role: "Malibu Estate Owners", company: "Private Client", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-couple-announcing-pregnancy-with-smartphone_23-2150296850.jpg", imageAlt: "The Chen Family smiling"},
|
||||
{
|
||||
id: "t-4",
|
||||
name: "Isabella V.",
|
||||
role: "Architect & Developer",
|
||||
company: "IA Architects",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-mechanic-repair-garage_107420-95937.jpg",
|
||||
imageAlt: "Isabella V. smiling",
|
||||
},
|
||||
id: "t-4", name: "Isabella V.", role: "Architect & Developer", company: "IA Architects", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-mechanic-repair-garage_107420-95937.jpg", imageAlt: "Isabella V. smiling"},
|
||||
{
|
||||
id: "t-5",
|
||||
name: "Jonathan K.",
|
||||
role: "Hollywood Hills Resident",
|
||||
company: "Private Client",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-indian-businessman-formal-wear-standing-against-door-business-center-with-cross-arms_627829-671.jpg",
|
||||
imageAlt: "Jonathan K. smiling",
|
||||
},
|
||||
id: "t-5", name: "Jonathan K.", role: "Hollywood Hills Resident", company: "Private Client", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-indian-businessman-formal-wear-standing-against-door-business-center-with-cross-arms_627829-671.jpg", imageAlt: "Jonathan K. smiling"},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "5/5",
|
||||
label: "Average Rating",
|
||||
},
|
||||
value: "5/5", label: "Average Rating"},
|
||||
{
|
||||
value: "100%",
|
||||
label: "Referral Rate",
|
||||
},
|
||||
value: "100%", label: "Referral Rate"},
|
||||
{
|
||||
value: "Seamless",
|
||||
label: "Project Experience",
|
||||
},
|
||||
value: "Seamless", label: "Project Experience"},
|
||||
]}
|
||||
title="Voices of Our Valued Homeowners"
|
||||
description="Hear directly from Los Angeles residents who chose Elysian Roofing for unparalleled quality and a seamless experience. Their homes now stand as testaments to our dedication."
|
||||
@@ -360,14 +220,7 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Pacific Estates",
|
||||
"Grandeur Realty",
|
||||
"Architectural Digest Partners",
|
||||
"Beverly Hills Luxury Homes",
|
||||
"Sunset Property Management",
|
||||
"Premier Builders Guild",
|
||||
"LA Design Collective",
|
||||
]}
|
||||
"Pacific Estates", "Grandeur Realty", "Architectural Digest Partners", "Beverly Hills Luxury Homes", "Sunset Property Management", "Premier Builders Guild", "LA Design Collective"]}
|
||||
title="Trusted by Luxury Property Experts"
|
||||
description="Elysian Roofing is the preferred partner for leading luxury real estate agencies and property management firms across Los Angeles, recognized for our uncompromising standards."
|
||||
/>
|
||||
@@ -378,20 +231,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q-1",
|
||||
title: "What types of luxury roofing materials do you specialize in?",
|
||||
content: "We specialize in a diverse range of premium materials including natural slate, high-grade clay tiles, custom metal roofing systems, and cedar shakes. Our experts will guide you in selecting the perfect material that complements your home's architecture and your aesthetic preferences.",
|
||||
},
|
||||
id: "q-1", title: "What types of luxury roofing materials do you specialize in?", content: "We specialize in a diverse range of premium materials including natural slate, high-grade clay tiles, custom metal roofing systems, and cedar shakes. Our experts will guide you in selecting the perfect material that complements your home's architecture and your aesthetic preferences."},
|
||||
{
|
||||
id: "q-2",
|
||||
title: "How does your consultation process work?",
|
||||
content: "Our process begins with a personalized consultation where we assess your property, discuss your vision and requirements, and provide tailored recommendations. We then create a detailed proposal outlining material options, design plans, timeline, and transparent cost estimates.",
|
||||
},
|
||||
id: "q-2", title: "How does your consultation process work?", content: "Our process begins with a personalized consultation where we assess your property, discuss your vision and requirements, and provide tailored recommendations. We then create a detailed proposal outlining material options, design plans, timeline, and transparent cost estimates."},
|
||||
{
|
||||
id: "q-3",
|
||||
title: "What makes Elysian Roofing different from other contractors?",
|
||||
content: "Elysian Roofing stands apart through our unwavering commitment to superior craftsmanship, exclusive use of premium materials, bespoke design integration, and exceptional project management. We focus on delivering not just a roof, but a complete aesthetic and functional enhancement to your luxury property.",
|
||||
},
|
||||
id: "q-3", title: "What makes Elysian Roofing different from other contractors?", content: "Elysian Roofing stands apart through our unwavering commitment to superior craftsmanship, exclusive use of premium materials, bespoke design integration, and exceptional project management. We focus on delivering not just a roof, but a complete aesthetic and functional enhancement to your luxury property."},
|
||||
]}
|
||||
sideTitle="Your Questions, Our Expertise"
|
||||
sideDescription="We believe in transparent communication. Here are answers to common questions about luxury roofing projects, materials, and our process."
|
||||
@@ -403,8 +247,7 @@ export default function LandingPage() {
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
variant: "plain"}}
|
||||
tag="Connect"
|
||||
title="Begin Your Luxury Roofing Journey"
|
||||
description="Ready to elevate your home with a roof that combines superior protection with exquisite design? Schedule a personalized consultation with Elysian Roofing today."
|
||||
@@ -420,13 +263,9 @@ export default function LandingPage() {
|
||||
logoAlt="Elysian Roofing Logo"
|
||||
logoText="Elysian Roofing"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
text: "Privacy Policy", href: "#"}}
|
||||
rightLink={{
|
||||
text: "Terms of Service",
|
||||
href: "#",
|
||||
}}
|
||||
text: "Terms of Service", href: "#"}}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user