Merge version_2 into main #2
325
src/app/page.tsx
325
src/app/page.tsx
@@ -33,26 +33,12 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Projects",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="PeakMetal"
|
||||
/>
|
||||
@@ -60,71 +46,28 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Built for Permanence. Engineered for Style."
|
||||
description="PeakMetal delivers premium metal roofing solutions designed to stand the test of time and elevate your property's value."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/alone-specialist-handsome-daydreaming-collar_1262-870.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/successful-businessman-imagines-great-career_1163-5478.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg", alt: "Customer" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/alone-specialist-handsome-daydreaming-collar_1262-870.jpg", alt: "Customer" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg", alt: "Customer" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg", alt: "Customer" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/successful-businessman-imagines-great-career_1163-5478.jpg", alt: "Customer" },
|
||||
]}
|
||||
avatarText="Trusted by 500+ homeowners"
|
||||
buttons={[
|
||||
{
|
||||
text: "Get a Quote",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "View Our Projects",
|
||||
href: "#products",
|
||||
},
|
||||
{ text: "Get a Quote", href: "#contact" },
|
||||
{ text: "View Our Projects", href: "#products" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "50 Year Warranty",
|
||||
icon: ShieldCheck,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Energy Efficient",
|
||||
icon: Sun,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Fire Resistant",
|
||||
icon: Flame,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Weather Proof",
|
||||
icon: Droplets,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Sustainable",
|
||||
icon: Leaf,
|
||||
},
|
||||
{ type: "text-icon", text: "50 Year Warranty", icon: ShieldCheck },
|
||||
{ type: "text-icon", text: "Energy Efficient", icon: Sun },
|
||||
{ type: "text-icon", text: "Fire Resistant", icon: Flame },
|
||||
{ type: "text-icon", text: "Weather Proof", icon: Droplets },
|
||||
{ type: "text-icon", text: "Sustainable", icon: Leaf },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -136,21 +79,9 @@ export default function LandingPage() {
|
||||
title="Why Choose Metal?"
|
||||
description="Our metal roofing systems offer unmatched durability, energy efficiency, and modern curb appeal. We combine traditional craftsmanship with innovative technology to ensure every roof is a masterpiece."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "50-Year Longevity",
|
||||
description: "Metal roofs are designed to last over five decades with minimal maintenance.",
|
||||
icon: Shield,
|
||||
},
|
||||
{
|
||||
title: "Energy Efficiency",
|
||||
description: "Reflective surfaces reduce heat absorption, lowering your cooling costs.",
|
||||
icon: Zap,
|
||||
},
|
||||
{
|
||||
title: "Extreme Weather Proof",
|
||||
description: "Engineered to withstand heavy snow, high winds, and fire risk.",
|
||||
icon: Award,
|
||||
},
|
||||
{ title: "50-Year Longevity", description: "Metal roofs are designed to last over five decades with minimal maintenance.", icon: Shield },
|
||||
{ title: "Energy Efficiency", description: "Reflective surfaces reduce heat absorption, lowering your cooling costs.", icon: Zap },
|
||||
{ title: "Extreme Weather Proof", description: "Engineered to withstand heavy snow, high winds, and fire risk.", icon: Award },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/detail-urban-stairs_23-2148107136.jpg"
|
||||
imageAlt="A modern home with a high-quality metal roof"
|
||||
@@ -163,30 +94,10 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Residential Installation",
|
||||
description: "Expert installation for single-family homes and estates.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-wearing-protection-helmet-outdoors_23-2149343635.jpg",
|
||||
buttonIcon: "Zap",
|
||||
},
|
||||
{
|
||||
title: "Commercial Roofing",
|
||||
description: "Durable solutions for businesses requiring heavy-duty protection.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-working-roof_23-2149343671.jpg",
|
||||
buttonIcon: "Zap",
|
||||
},
|
||||
{
|
||||
title: "Roof Repairs",
|
||||
description: "Prompt assessment and restoration for existing metal roofs.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-painting-car-door_23-2149714299.jpg",
|
||||
buttonIcon: "Zap",
|
||||
},
|
||||
{
|
||||
title: "Consultation & Design",
|
||||
description: "Custom color and finish selection to match your vision.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dngineer-meeting-architectural-project-working-with-partne_1421-122.jpg",
|
||||
buttonIcon: "Zap",
|
||||
},
|
||||
{ title: "Residential Installation", description: "Expert installation for single-family homes and estates.", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-wearing-protection-helmet-outdoors_23-2149343635.jpg", buttonIcon: Zap },
|
||||
{ title: "Commercial Roofing", description: "Durable solutions for businesses requiring heavy-duty protection.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-working-roof_23-2149343671.jpg", buttonIcon: Zap },
|
||||
{ title: "Roof Repairs", description: "Prompt assessment and restoration for existing metal roofs.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-painting-car-door_23-2149714299.jpg", buttonIcon: Zap },
|
||||
{ title: "Consultation & Design", description: "Custom color and finish selection to match your vision.", imageSrc: "http://img.b2bpic.net/free-photo/dngineer-meeting-architectural-project-working-with-partne_1421-122.jpg", buttonIcon: Zap },
|
||||
]}
|
||||
title="Comprehensive Roofing Services"
|
||||
description="We offer a full suite of services to ensure your roof is structurally sound and visually stunning."
|
||||
@@ -200,42 +111,12 @@ export default function LandingPage() {
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Standing Seam Panels",
|
||||
price: "From $12/sqft",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-iron-tin-fence-lined-background-metal-texture_158595-6441.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Metal Shingles",
|
||||
price: "From $15/sqft",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sun-twilight-air-blue-background_1172-233.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Corrugated Panels",
|
||||
price: "From $9/sqft",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-stadium_1127-110.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Shake Look Panels",
|
||||
price: "From $14/sqft",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-roof-house-made-wooden-tiles_169016-24747.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Slate Look Tiles",
|
||||
price: "From $18/sqft",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-13113.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Custom Finishes",
|
||||
price: "Quote requested",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-blue-lines-perfect-using-as-background_181624-15180.jpg",
|
||||
},
|
||||
{ id: "p1", name: "Standing Seam Panels", price: "From $12/sqft", imageSrc: "http://img.b2bpic.net/free-photo/black-iron-tin-fence-lined-background-metal-texture_158595-6441.jpg" },
|
||||
{ id: "p2", name: "Metal Shingles", price: "From $15/sqft", imageSrc: "http://img.b2bpic.net/free-photo/sun-twilight-air-blue-background_1172-233.jpg" },
|
||||
{ id: "p3", name: "Corrugated Panels", price: "From $9/sqft", imageSrc: "http://img.b2bpic.net/free-photo/modern-stadium_1127-110.jpg" },
|
||||
{ id: "p4", name: "Shake Look Panels", price: "From $14/sqft", imageSrc: "http://img.b2bpic.net/free-photo/closeup-roof-house-made-wooden-tiles_169016-24747.jpg" },
|
||||
{ id: "p5", name: "Slate Look Tiles", price: "From $18/sqft", imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-13113.jpg" },
|
||||
{ id: "p6", name: "Custom Finishes", price: "Quote requested", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-blue-lines-perfect-using-as-background_181624-15180.jpg" },
|
||||
]}
|
||||
title="Roofing Collections"
|
||||
description="Explore our range of premium panels and styles."
|
||||
@@ -249,27 +130,9 @@ export default function LandingPage() {
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "20+",
|
||||
title: "Years Experience",
|
||||
description: "Providing quality roofing services.",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "1200+",
|
||||
title: "Projects Completed",
|
||||
description: "Satisfied clients across the state.",
|
||||
icon: Zap,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "100%",
|
||||
title: "Customer Satisfaction",
|
||||
description: "Our commitment to excellence.",
|
||||
icon: Shield,
|
||||
},
|
||||
{ id: "m1", value: "20+", title: "Years Experience", description: "Providing quality roofing services.", icon: Award },
|
||||
{ id: "m2", value: "1200+", title: "Projects Completed", description: "Satisfied clients across the state.", icon: Zap },
|
||||
{ id: "m3", value: "100%", title: "Customer Satisfaction", description: "Our commitment to excellence.", icon: Shield },
|
||||
]}
|
||||
title="PeakMetal by the Numbers"
|
||||
description="Years of expertise and high-performance roofing results."
|
||||
@@ -283,46 +146,11 @@ export default function LandingPage() {
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah Jenkins",
|
||||
role: "Homeowner",
|
||||
company: "Westwood Hills",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-young-elegant-man-smiling_23-2148332976.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "David Thorne",
|
||||
role: "Property Developer",
|
||||
company: "Thorne Inc.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-beautiful-blonde-woman-wearing-white-shirt-standing-co-working-space-leaning-desk_74855-15151.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Elena Rodriguez",
|
||||
role: "Architect",
|
||||
company: "ER Design",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-businesswoman_23-2149153830.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Mark Wilson",
|
||||
role: "Homeowner",
|
||||
company: "Oak Valley",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/joyful-business-woman-with-coffee-cup_23-2148095746.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Lisa Wang",
|
||||
role: "Investor",
|
||||
company: "Wang Capital",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-afro-american-woman_23-2148332136.jpg",
|
||||
},
|
||||
{ id: "t1", name: "Sarah Jenkins", role: "Homeowner", company: "Westwood Hills", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-young-elegant-man-smiling_23-2148332976.jpg" },
|
||||
{ id: "t2", name: "David Thorne", role: "Property Developer", company: "Thorne Inc.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-beautiful-blonde-woman-wearing-white-shirt-standing-co-working-space-leaning-desk_74855-15151.jpg" },
|
||||
{ id: "t3", name: "Elena Rodriguez", role: "Architect", company: "ER Design", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-businesswoman_23-2149153830.jpg" },
|
||||
{ id: "t4", name: "Mark Wilson", role: "Homeowner", company: "Oak Valley", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/joyful-business-woman-with-coffee-cup_23-2148095746.jpg" },
|
||||
{ id: "t5", name: "Lisa Wang", role: "Investor", company: "Wang Capital", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-afro-american-woman_23-2148332136.jpg" },
|
||||
]}
|
||||
title="What Clients Say"
|
||||
description="Why homeowners trust PeakMetal for their most important asset."
|
||||
@@ -334,14 +162,7 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"CertainTeed",
|
||||
"GAF Roofing",
|
||||
"Owens Corning",
|
||||
"Metal Sales Inc.",
|
||||
"Petersen Aluminum",
|
||||
"ATAS International",
|
||||
"Fabral",
|
||||
]}
|
||||
"CertainTeed", "GAF Roofing", "Owens Corning", "Metal Sales Inc.", "Petersen Aluminum", "ATAS International", "Fabral"]}
|
||||
title="Certified Partners"
|
||||
description="We use materials from the most trusted manufacturers in the industry."
|
||||
/>
|
||||
@@ -351,21 +172,9 @@ export default function LandingPage() {
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Is metal roofing noisy?",
|
||||
content: "When installed correctly with insulation, metal roofs are no noisier than shingle roofs.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "How long does a metal roof last?",
|
||||
content: "Our systems are built for 50+ years of reliable protection.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Can I install metal over shingles?",
|
||||
content: "Yes, in most cases, this avoids tear-off costs and waste.",
|
||||
},
|
||||
{ id: "q1", title: "Is metal roofing noisy?", content: "When installed correctly with insulation, metal roofs are no noisier than shingle roofs." },
|
||||
{ id: "q2", title: "How long does a metal roof last?", content: "Our systems are built for 50+ years of reliable protection." },
|
||||
{ id: "q3", title: "Can I install metal over shingles?", content: "Yes, in most cases, this avoids tear-off costs and waste." },
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Everything you need to know about our roofing services."
|
||||
@@ -376,9 +185,7 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Ready to get started?"
|
||||
title="Book Your Free Consultation"
|
||||
description="Schedule a professional site assessment today and receive a tailored quote for your project."
|
||||
@@ -391,45 +198,9 @@ export default function LandingPage() {
|
||||
<FooterBaseCard
|
||||
logoText="PeakMetal"
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{
|
||||
label: "Installation",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Repair",
|
||||
href: "#features",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Company", items: [{ label: "About", href: "#about" }, { label: "Careers", href: "#" }] },
|
||||
{ title: "Services", items: [{ label: "Installation", href: "#features" }, { label: "Repair", href: "#features" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user