Update src/app/page.tsx
This commit is contained in:
432
src/app/page.tsx
432
src/app/page.tsx
@@ -29,307 +29,155 @@ export default function LandingPage() {
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Projects",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
]}
|
||||
brandName="Commercial Roofers Inc"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Projects", id: "products" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
]}
|
||||
brandName="Commercial Roofers Inc"
|
||||
button={{ text: "Get Quote", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Professional Commercial Roofing Services"
|
||||
description="Protect your assets with industry-leading commercial roofing solutions. From installations to emergency repairs, we have you covered."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get a Free Quote",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/skateboard-rink-view_23-2148937901.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/asian-couple-standing-together-against-new-modern-building-look-sky_627829-1322.jpg",
|
||||
alt: "Asian couple standing together against new modern building",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/modern-brick-building-skyline_23-2148252768.jpg",
|
||||
alt: "Modern brick building skyline",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/view-stone-building-with-large-windows_23-2148252828.jpg",
|
||||
alt: "View of stone building with large windows",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/low-angle-artistic-architectural-design_23-2148252774.jpg",
|
||||
alt: "Low angle artistic architectural design",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",
|
||||
alt: "Smiling businessman standing at airport",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Certified Expertise",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "24/7 Emergency Support",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Safety First Protocol",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Quality Guaranteed",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Sustainable Solutions",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Professional Commercial Roofing Services"
|
||||
description="Protect your assets with industry-leading commercial roofing solutions. From installations to emergency repairs, we have you covered."
|
||||
buttons={[{ text: "Get a Free Quote", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/skateboard-rink-view_23-2148937901.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/asian-couple-standing-together-against-new-modern-building-look-sky_627829-1322.jpg", alt: "Asian couple standing together against new modern building" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/modern-brick-building-skyline_23-2148252768.jpg", alt: "Modern brick building skyline" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/view-stone-building-with-large-windows_23-2148252828.jpg", alt: "View of stone building with large windows" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/low-angle-artistic-architectural-design_23-2148252774.jpg", alt: "Low angle artistic architectural design" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg", alt: "Smiling businessman standing at airport" },
|
||||
]}
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Certified Expertise" },
|
||||
{ type: "text", text: "24/7 Emergency Support" },
|
||||
{ type: "text", text: "Safety First Protocol" },
|
||||
{ type: "text", text: "Quality Guaranteed" },
|
||||
{ type: "text", text: "Sustainable Solutions" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={true}
|
||||
tag="Our Commitment"
|
||||
title="Decades of Roofing Excellence"
|
||||
description="Commercial Roofers Inc has been delivering top-tier roofing services for over 20 years, ensuring durability and performance for every project we undertake."
|
||||
subdescription="We treat every roof as our own, maintaining strict safety and quality standards at every site."
|
||||
icon={Shield}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/conversation-engineers_1098-15478.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={true}
|
||||
tag="Our Commitment"
|
||||
title="Decades of Roofing Excellence"
|
||||
description="Commercial Roofers Inc has been delivering top-tier roofing services for over 20 years, ensuring durability and performance for every project we undertake."
|
||||
subdescription="We treat every roof as our own, maintaining strict safety and quality standards at every site."
|
||||
icon={Shield}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/conversation-engineers_1098-15478.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardEight
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Expert Installation",
|
||||
description: "Highly trained crew focused on precision and speed.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-stadium_1127-110.jpg",
|
||||
},
|
||||
{
|
||||
title: "Durable Materials",
|
||||
description: "Using industry-grade roofing components for long-lasting results.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-working-roof-together_23-2149343670.jpg",
|
||||
},
|
||||
{
|
||||
title: "Routine Maintenance",
|
||||
description: "Preventive services to extend your roof lifespan significantly.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/south-asian-agronomist-farmer-looking-diagram-papers-farm-agriculture-production-concept_627829-7300.jpg",
|
||||
},
|
||||
]}
|
||||
title="Why Choose Us?"
|
||||
description="We offer comprehensive services tailored to your commercial infrastructure needs."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardEight
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Expert Installation", description: "Highly trained crew focused on precision and speed.", imageSrc: "http://img.b2bpic.net/free-photo/modern-stadium_1127-110.jpg" },
|
||||
{ title: "Durable Materials", description: "Using industry-grade roofing components for long-lasting results.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-working-roof-together_23-2149343670.jpg" },
|
||||
{ title: "Routine Maintenance", description: "Preventive services to extend your roof lifespan significantly.", imageSrc: "http://img.b2bpic.net/free-photo/south-asian-agronomist-farmer-looking-diagram-papers-farm-agriculture-production-concept_627829-7300.jpg" },
|
||||
]}
|
||||
title="Why Choose Us?"
|
||||
description="We offer comprehensive services tailored to your commercial infrastructure needs."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Office Complex Roof",
|
||||
price: "Custom Quote",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-with-helmet-working-roof-full-shot_23-2149343662.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Warehouse Retrofit",
|
||||
price: "Custom Quote",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-working-roof-front-view_23-2148748780.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Industrial Park Site",
|
||||
price: "Custom Quote",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hand-woven-geometric-denim-area-rug-wooden-floor_169016-48743.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Commercial Plaza",
|
||||
price: "Custom Quote",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/engineer-working-with-airplane_1098-12552.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Distribution Center",
|
||||
price: "Custom Quote",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/building-with-metallic-bars-wooden-ceiling_250224-285.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Retail Storefront",
|
||||
price: "Custom Quote",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gray-brown-concrete-modern-building-shot-from-low-angle_181624-3502.jpg",
|
||||
},
|
||||
]}
|
||||
title="Project Portfolio"
|
||||
description="Recent installations and renovations demonstrating our commitment to quality."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "p1", name: "Office Complex Roof", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/man-with-helmet-working-roof-full-shot_23-2149343662.jpg" },
|
||||
{ id: "p2", name: "Warehouse Retrofit", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/man-working-roof-front-view_23-2148748780.jpg" },
|
||||
{ id: "p3", name: "Industrial Park Site", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/hand-woven-geometric-denim-area-rug-wooden-floor_169016-48743.jpg" },
|
||||
{ id: "p4", name: "Commercial Plaza", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/engineer-working-with-airplane_1098-12552.jpg" },
|
||||
{ id: "p5", name: "Distribution Center", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/building-with-metallic-bars-wooden-ceiling_250224-285.jpg" },
|
||||
{ id: "p6", name: "Retail Storefront", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/gray-brown-concrete-modern-building-shot-from-low-angle_181624-3502.jpg" },
|
||||
]}
|
||||
title="Project Portfolio"
|
||||
description="Recent installations and renovations demonstrating our commitment to quality."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
icon: Award,
|
||||
title: "Years Experience",
|
||||
value: "20+",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
icon: CheckCircle,
|
||||
title: "Projects Completed",
|
||||
value: "500+",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
icon: Smile,
|
||||
title: "Happy Clients",
|
||||
value: "450+",
|
||||
},
|
||||
]}
|
||||
title="Our Impact"
|
||||
description="Numbers speak to our commitment and reliability in the roofing industry."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", icon: Award, title: "Years Experience", value: "20+" },
|
||||
{ id: "m2", icon: CheckCircle, title: "Projects Completed", value: "500+" },
|
||||
{ id: "m3", icon: Smile, title: "Happy Clients", value: "450+" },
|
||||
]}
|
||||
title="Our Impact"
|
||||
description="Numbers speak to our commitment and reliability in the roofing industry."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "John Doe",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Jane Smith",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/successful-man-pointing-camera-with-finger_1262-3118.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Mark Wilson",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Lisa Brown",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-waitress_107420-12324.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Alex Taylor",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-black-auto-mechanic-workshop_637285-9406.jpg",
|
||||
},
|
||||
]}
|
||||
cardTitle="Client Feedback"
|
||||
cardTag="Reliable Service"
|
||||
cardAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "John Doe", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg" },
|
||||
{ id: "2", name: "Jane Smith", imageSrc: "http://img.b2bpic.net/free-photo/successful-man-pointing-camera-with-finger_1262-3118.jpg" },
|
||||
{ id: "3", name: "Mark Wilson", imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg" },
|
||||
{ id: "4", name: "Lisa Brown", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-waitress_107420-12324.jpg" },
|
||||
{ id: "5", name: "Alex Taylor", imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-black-auto-mechanic-workshop_637285-9406.jpg" },
|
||||
]}
|
||||
cardTitle="Client Feedback"
|
||||
cardTag="Reliable Service"
|
||||
cardAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do you provide warranties?",
|
||||
content: "Yes, all our roofing projects come with comprehensive material and workmanship warranties.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "How long does a roof install take?",
|
||||
content: "Timeline varies by scope, but we maintain efficient schedules for minimal business disruption.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Can I get an emergency repair?",
|
||||
content: "We offer 24/7 support for urgent commercial roofing needs to protect your interior assets.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Have questions about our roofing solutions? Find answers below."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Do you provide warranties?", content: "Yes, all our roofing projects come with comprehensive material and workmanship warranties." },
|
||||
{ id: "f2", title: "How long does a roof install take?", content: "Timeline varies by scope, but we maintain efficient schedules for minimal business disruption." },
|
||||
{ id: "f3", title: "Can I get an emergency repair?", content: "We offer 24/7 support for urgent commercial roofing needs to protect your interior assets." },
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Have questions about our roofing solutions? Find answers below."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "rotated-rays-animated",
|
||||
}}
|
||||
text="Ready to secure your commercial roof? Contact us today for a free consultation."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us Now",
|
||||
href: "mailto:info@commercialroofers.com",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
text="Ready to secure your commercial roof? Contact us today for a free consultation."
|
||||
buttons={[{ text: "Contact Us Now", href: "mailto:info@commercialroofers.com" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Commercial Roofers Inc"
|
||||
copyrightText="© 2025 Commercial Roofers Inc. All rights reserved."
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "#",
|
||||
ariaLabel: "Twitter",
|
||||
},
|
||||
{
|
||||
icon: Linkedin,
|
||||
href: "#",
|
||||
ariaLabel: "LinkedIn",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Commercial Roofers Inc"
|
||||
copyrightText="© 2025 Commercial Roofers Inc. All rights reserved."
|
||||
socialLinks={[
|
||||
{ icon: Twitter, href: "#", ariaLabel: "Twitter" },
|
||||
{ icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user