Merge version_1 into main #1
430
src/app/page.tsx
430
src/app/page.tsx
@@ -19,320 +19,144 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Skyline Roofing Solutions"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Skyline Roofing Solutions"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{
|
||||
variant: "rotated-rays-animated",
|
||||
}}
|
||||
title="Skyline Roofing Solutions"
|
||||
description="Premium Roofing & Exterior Services in Mississauga"
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Your Free Quote — Call Now",
|
||||
href: "tel:+18888602551",
|
||||
},
|
||||
]}
|
||||
carouselItems={[
|
||||
{
|
||||
id: "c1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-working-with-helmet_23-2149343651.jpg",
|
||||
imageAlt: "Roofing Project 1",
|
||||
},
|
||||
{
|
||||
id: "c2",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-roof-texture-tiles-generative-al_169016-28456.jpg",
|
||||
imageAlt: "Roofing Project 2",
|
||||
},
|
||||
{
|
||||
id: "c3",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-smoking-roof_1321-1036.jpg",
|
||||
imageAlt: "Roofing Project 3",
|
||||
},
|
||||
{
|
||||
id: "c4",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-roof-house-made-wooden-tiles_169016-24989.jpg",
|
||||
imageAlt: "Roofing Project 4",
|
||||
},
|
||||
{
|
||||
id: "c5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-wooden-modern-house_23-2149343652.jpg",
|
||||
imageAlt: "Roofing Project 5",
|
||||
},
|
||||
{
|
||||
id: "c6",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/long-shot-men-working-together-roof_23-2149343674.jpg",
|
||||
imageAlt: "Roofing Project 6",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
title="Skyline Roofing Solutions"
|
||||
description="Premium Roofing & Exterior Services in Mississauga"
|
||||
buttons={[{ text: "Get Your Free Quote — Call Now", href: "tel:+18888602551" }]}
|
||||
carouselItems={[
|
||||
{ id: "c1", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-working-with-helmet_23-2149343651.jpg", imageAlt: "Roofing Project 1" },
|
||||
{ id: "c2", imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-roof-texture-tiles-generative-al_169016-28456.jpg", imageAlt: "Roofing Project 2" },
|
||||
{ id: "c3", imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-smoking-roof_1321-1036.jpg", imageAlt: "Roofing Project 3" },
|
||||
{ id: "c4", imageSrc: "http://img.b2bpic.net/free-photo/closeup-roof-house-made-wooden-tiles_169016-24989.jpg", imageAlt: "Roofing Project 4" },
|
||||
{ id: "c5", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-wooden-modern-house_23-2149343652.jpg", imageAlt: "Roofing Project 5" },
|
||||
{ id: "c6", imageSrc: "http://img.b2bpic.net/free-photo/long-shot-men-working-together-roof_23-2149343674.jpg", imageAlt: "Roofing Project 6" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
title="At Skyline Roofing Solutions, we endeavour to provide premium quality roofing and exterior services for your home or business."
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
title="At Skyline Roofing Solutions, we endeavour to provide premium quality roofing and exterior services for your home or business."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSix
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Residential Roofing",
|
||||
description: "High-quality shingle and metal roof installations for homes.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-closeup-shot-black-fire-escape-stairs_181624-3131.jpg",
|
||||
imageAlt: "Residential Roofing",
|
||||
},
|
||||
{
|
||||
title: "Commercial Roofing",
|
||||
description: "Durable and reliable roofing systems for commercial properties.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-walking-metal-platform-doing-visual-inspection-industrial-food-storage-tanks-silos_342744-444.jpg",
|
||||
imageAlt: "Commercial Roofing",
|
||||
},
|
||||
{
|
||||
title: "Emergency Repairs",
|
||||
description: "Fast response for leaks and storm damage remediation.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/long-shot-men-working-roof_23-2149343673.jpg",
|
||||
imageAlt: "Emergency Repairs",
|
||||
},
|
||||
]}
|
||||
title="Our Roofing Services"
|
||||
description="Comprehensive exterior solutions tailored to the needs of Mississauga residents and businesses."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSix
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Residential Roofing", description: "High-quality shingle and metal roof installations for homes.", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-closeup-shot-black-fire-escape-stairs_181624-3131.jpg", imageAlt: "Residential Roofing" },
|
||||
{ title: "Commercial Roofing", description: "Durable and reliable roofing systems for commercial properties.", imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-walking-metal-platform-doing-visual-inspection-industrial-food-storage-tanks-silos_342744-444.jpg", imageAlt: "Commercial Roofing" },
|
||||
{ title: "Emergency Repairs", description: "Fast response for leaks and storm damage remediation.", imageSrc: "http://img.b2bpic.net/free-photo/long-shot-men-working-roof_23-2149343673.jpg", imageAlt: "Emergency Repairs" },
|
||||
]}
|
||||
title="Our Roofing Services"
|
||||
description="Comprehensive exterior solutions tailored to the needs of Mississauga residents and businesses."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="benefits" data-section="benefits">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "100%",
|
||||
title: "Satisfaction Guaranteed",
|
||||
items: [
|
||||
"Certified experts",
|
||||
"Top materials",
|
||||
"Safety first",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "24/7",
|
||||
title: "Available Support",
|
||||
items: [
|
||||
"Always on call",
|
||||
"Fast response",
|
||||
"Clear communication",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "15+",
|
||||
title: "Years Experience",
|
||||
items: [
|
||||
"Local expertise",
|
||||
"Trusted team",
|
||||
"Proven results",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Why Choose Skyline"
|
||||
description="Excellence and reliability in every project we undertake."
|
||||
/>
|
||||
</div>
|
||||
<div id="benefits" data-section="benefits">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "m1", value: "100%", title: "Satisfaction Guaranteed", items: ["Certified experts", "Top materials", "Safety first"] },
|
||||
{ id: "m2", value: "24/7", title: "Available Support", items: ["Always on call", "Fast response", "Clear communication"] },
|
||||
{ id: "m3", value: "15+", title: "Years Experience", items: ["Local expertise", "Trusted team", "Proven results"] },
|
||||
]}
|
||||
title="Why Choose Skyline"
|
||||
description="Excellence and reliability in every project we undertake."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah J.",
|
||||
role: "Homeowner",
|
||||
company: "Mississauga Resident",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-working-project-together_23-2148920574.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Mark D.",
|
||||
role: "Property Manager",
|
||||
company: "Commercial Client",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-african-american-lady-safety-helmet-standing-near-model-building_23-2148039866.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Emily R.",
|
||||
role: "Homeowner",
|
||||
company: "Mississauga Resident",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-experienced-carpenter-his-younger-employee_329181-15602.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "David K.",
|
||||
role: "Business Owner",
|
||||
company: "Commercial Client",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-cute-clothes-reaching-plants-greenhouse_197531-12331.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Jessica M.",
|
||||
role: "Homeowner",
|
||||
company: "Mississauga Resident",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/concentrated-interracial-successful-coworkers-work-together-annual-economic-report_273609-18029.jpg",
|
||||
},
|
||||
]}
|
||||
title="Client Feedback"
|
||||
description="Hear what our valued clients in Mississauga have to say about our premium roofing services."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah J.", role: "Homeowner", company: "Mississauga Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-working-project-together_23-2148920574.jpg" },
|
||||
{ id: "t2", name: "Mark D.", role: "Property Manager", company: "Commercial Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-african-american-lady-safety-helmet-standing-near-model-building_23-2148039866.jpg" },
|
||||
{ id: "t3", name: "Emily R.", role: "Homeowner", company: "Mississauga Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-experienced-carpenter-his-younger-employee_329181-15602.jpg" },
|
||||
{ id: "t4", name: "David K.", role: "Business Owner", company: "Commercial Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-cute-clothes-reaching-plants-greenhouse_197531-12331.jpg" },
|
||||
{ id: "t5", name: "Jessica M.", role: "Homeowner", company: "Mississauga Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/concentrated-interracial-successful-coworkers-work-together-annual-economic-report_273609-18029.jpg" },
|
||||
]}
|
||||
title="Client Feedback"
|
||||
description="Hear what our valued clients in Mississauga have to say about our premium roofing services."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="proof" data-section="proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"GAF Certified",
|
||||
"Owens Corning",
|
||||
"CertainTeed",
|
||||
"IKO Roofing",
|
||||
"Metal Sales",
|
||||
"Velux Skylights",
|
||||
"Atlas Roofing",
|
||||
]}
|
||||
title="Certified Partners"
|
||||
description="We partner with leading manufacturers to provide the best materials for your roof."
|
||||
/>
|
||||
</div>
|
||||
<div id="proof" data-section="proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={["GAF Certified", "Owens Corning", "CertainTeed", "IKO Roofing", "Metal Sales", "Velux Skylights", "Atlas Roofing"]}
|
||||
title="Certified Partners"
|
||||
description="We partner with leading manufacturers to provide the best materials for your roof."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do you offer free quotes?",
|
||||
content: "Yes, we offer free, no-obligation quotes for all roofing projects.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "What areas do you serve?",
|
||||
content: "We proudly serve Mississauga and surrounding areas.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Is your work insured?",
|
||||
content: "Yes, our team is fully licensed and insured for your peace of mind.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Get answers to common roofing questions."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Do you offer free quotes?", content: "Yes, we offer free, no-obligation quotes for all roofing projects." },
|
||||
{ id: "f2", title: "What areas do you serve?", content: "We proudly serve Mississauga and surrounding areas." },
|
||||
{ id: "f3", title: "Is your work insured?", content: "Yes, our team is fully licensed and insured for your peace of mind." },
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Get answers to common roofing questions."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Contact Us"
|
||||
title="Ready for Your Free Quote?"
|
||||
description="Call us at +1 888-860-2551 or visit us at 6700 Century Ave, Mississauga, ON L5N 1V8."
|
||||
buttons={[
|
||||
{
|
||||
text: "Call for Free Quote",
|
||||
href: "tel:+18888602551",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Contact Us"
|
||||
title="Ready for Your Free Quote?"
|
||||
description="Call us at +1 888-860-2551 or visit us at 6700 Century Ave, Mississauga, ON L5N 1V8."
|
||||
buttons={[{ text: "Call for Free Quote", href: "tel:+18888602551" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Skyline Roofing Solutions"
|
||||
columns={[
|
||||
{
|
||||
title: "Contact",
|
||||
items: [
|
||||
{
|
||||
label: "+1 888-860-2551",
|
||||
href: "tel:+18888602551",
|
||||
},
|
||||
{
|
||||
label: "6700 Century Ave, Mississauga",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#features",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Skyline Roofing Solutions"
|
||||
columns={[
|
||||
{ title: "Contact", items: [{ label: "+1 888-860-2551", href: "tel:+18888602551" }, { label: "6700 Century Ave, Mississauga", href: "#" }] },
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Services", href: "#features" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user