Merge version_1 into main #1
351
src/app/page.tsx
351
src/app/page.tsx
@@ -1,326 +1,35 @@
|
||||
"use client";
|
||||
|
||||
'use client';
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import { Award, FileText, Home } from "lucide-react";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import HeroOverlayTestimonial from "@/components/sections/hero/HeroOverlayTestimonial";
|
||||
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
|
||||
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
|
||||
export default function LandingPage() {
|
||||
const navItems = [{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Contact", id: "/contact" }];
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmall"
|
||||
background="aurora"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "/",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "/about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "/services",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "/contact",
|
||||
},
|
||||
]}
|
||||
brandName="Empire Roofing"
|
||||
button={{
|
||||
text: "Call Now",
|
||||
href: "tel:5555555555",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlayTestimonial
|
||||
title="Missouri’s Most Trusted Roofing Experts"
|
||||
description="Roof Repairs • Insurance Claims • Full Replacements — Done Right the First Time"
|
||||
testimonials={[
|
||||
{
|
||||
name: "Kevin James",
|
||||
handle: "Homeowner",
|
||||
testimonial: "Professional. Honest. No shortcuts.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-handsome-male-smiling_181624-41237.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mark Mann",
|
||||
handle: "Homeowner",
|
||||
testimonial: "Out of 6 quotes, Empire was the only one that truly knew their craft.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-happy-mother-home_23-2148321636.jpg",
|
||||
},
|
||||
{
|
||||
name: "Ken Watson",
|
||||
handle: "Homeowner",
|
||||
testimonial: "They handled my insurance claim when it was denied and got it approved.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-confident-male-employee-white-collar-shirt-smiling-camera-standing-self-assured-against-studio-background_1258-26761.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mary Tuggle",
|
||||
handle: "Homeowner",
|
||||
testimonial: "Crew was clean, professional, and followed up.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg",
|
||||
},
|
||||
{
|
||||
name: "Local Resident",
|
||||
handle: "Homeowner",
|
||||
testimonial: "Best service in Springfield area, hands down.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-portrait-posing-loft-modern-space_158595-5365.jpg",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Free Roof Inspection",
|
||||
href: "/contact",
|
||||
},
|
||||
{
|
||||
text: "Call Now",
|
||||
href: "tel:5555555555",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/old-stone-building-with-blue-sky_23-2148252732.jpg"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/woman-smiling_1187-3196.jpg",
|
||||
alt: "happy customer portrait 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg",
|
||||
alt: "happy customer portrait 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/very-good-smiling-brunette-woman-shows-ok-okay-hand-sign-looking-satisfied-recommend-great-deal-pleased-with-quality-standing-white-background_176420-46695.jpg",
|
||||
alt: "happy customer portrait 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-middle-aged-woman-showing-ok-sign_1262-17571.jpg",
|
||||
alt: "happy customer portrait 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/cheerful-attractive-dark-haired-latin-man-posing-kitchen_74855-7991.jpg",
|
||||
alt: "happy customer portrait 5",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services-list" data-section="services-list">
|
||||
<FeatureCardTwentyFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "s1",
|
||||
title: "Roof Inspection",
|
||||
author: "Pro Team",
|
||||
description: "Detailed inspections with photos & videos so you see exactly what we see.",
|
||||
tags: [
|
||||
"Safety",
|
||||
"Analysis",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cute-yellow-rural-house-with-wooden-stairs-countryside_176420-7157.jpg",
|
||||
},
|
||||
{
|
||||
id: "s2",
|
||||
title: "Roof Repair",
|
||||
author: "Expert Crew",
|
||||
description: "From leaks to storm damage—we fix it fast and correctly.",
|
||||
tags: [
|
||||
"Speed",
|
||||
"Quality",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-working-roof-front-view_23-2148748780.jpg",
|
||||
},
|
||||
{
|
||||
id: "s3",
|
||||
title: "Full Replacement",
|
||||
author: "Master Craftsmen",
|
||||
description: "Premium materials, expert installation, built to last decades.",
|
||||
tags: [
|
||||
"Longevity",
|
||||
"Value",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-beautiful-wooden-house-with-new-roof_23-2149343703.jpg",
|
||||
},
|
||||
{
|
||||
id: "s4",
|
||||
title: "Insurance Help",
|
||||
author: "Claim Specialists",
|
||||
description: "We fight your insurance so you don’t have to.",
|
||||
tags: [
|
||||
"Claims",
|
||||
"Ease",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hand-holding-pen-close-up_23-2149191369.jpg",
|
||||
},
|
||||
]}
|
||||
title="Premium Roofing Services"
|
||||
description="Comprehensive care for your biggest asset."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="before-after" data-section="before-after">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "ba1",
|
||||
name: "Before: Storm Damaged",
|
||||
price: "Damaged",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-old-abandoned-house-nature_23-2150166504.jpg",
|
||||
},
|
||||
{
|
||||
id: "ba2",
|
||||
name: "After: Fully Restored",
|
||||
price: "Completed",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-stadium_1127-110.jpg",
|
||||
},
|
||||
{
|
||||
id: "ba3",
|
||||
name: "Before: Old Roof",
|
||||
price: "Weathered",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/metal-structure_181624-31076.jpg",
|
||||
},
|
||||
{
|
||||
id: "ba4",
|
||||
name: "After: Modern Install",
|
||||
price: "Completed",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-13092.jpg",
|
||||
},
|
||||
{
|
||||
id: "ba5",
|
||||
name: "Before: Leak Area",
|
||||
price: "Urgent",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-walking-roof_1321-1040.jpg",
|
||||
},
|
||||
{
|
||||
id: "ba6",
|
||||
name: "After: Sealed Repair",
|
||||
price: "Completed",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/home-clay-roof-tile_657883-716.jpg",
|
||||
},
|
||||
]}
|
||||
title="See the Difference"
|
||||
description="Real craftsmanship. Real transformation."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metric" data-section="metric">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
title="Empire by the Numbers"
|
||||
description="Dedicated to excellence in every project we undertake."
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "1500+",
|
||||
title: "Roofs Repaired",
|
||||
description: "Completed projects in SW Missouri",
|
||||
icon: Home,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "98%",
|
||||
title: "Claim Success",
|
||||
description: "Helping you navigate insurance coverage",
|
||||
icon: FileText,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "10+",
|
||||
title: "Years Experience",
|
||||
description: "Licensed and certified expertise",
|
||||
icon: Award,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-home" data-section="contact-home">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Don’t Wait Until It Gets Worse"
|
||||
description="A small roof issue today can cost thousands tomorrow. Get a free inspection."
|
||||
tag="Contact Us"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "/about",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "/contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{
|
||||
label: "Roof Repairs",
|
||||
href: "/services",
|
||||
},
|
||||
{
|
||||
label: "Full Replacements",
|
||||
href: "/services",
|
||||
},
|
||||
{
|
||||
label: "Claims",
|
||||
href: "/services",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 Empire Roofing & Construction"
|
||||
bottomRightText="Built Like an Empire."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
<ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline navItems={navItems} brandName="Empire Roofing" />
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlayTestimonial title="Missouri’s Most Trusted Roofing Experts" description="Roof Repairs • Insurance Claims • Full Replacements — Done Right the First Time" testimonials={[{name: "Kevin James", handle: "Homeowner", testimonial: "Professional. Honest. No shortcuts.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-handsome-male-smiling_181624-41237.jpg"}, {name: "Mark Mann", handle: "Homeowner", testimonial: "Out of 6 quotes, Empire was the only one that truly knew their craft.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-happy-mother-home_23-2148321636.jpg"}, {name: "Ken Watson", handle: "Homeowner", testimonial: "They handled my insurance claim when it was denied and got it approved.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-confident-male-employee-white-collar-shirt-smiling-camera-standing-self-assured-against-studio-background_1258-26761.jpg"}, {name: "Mary Tuggle", handle: "Homeowner", testimonial: "Crew was clean, professional, and followed up.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg"}, {name: "Local Resident", handle: "Homeowner", testimonial: "Best service in Springfield area, hands down.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-portrait-posing-loft-modern-space_158595-5365.jpg"}]} buttons={[{text: "Get Free Roof Inspection", href: "/contact"}, {text: "Call Now", href: "tel:5555555555"}]} imageSrc="http://img.b2bpic.net/free-photo/old-stone-building-with-blue-sky_23-2148252732.jpg" avatars={[{src: "http://img.b2bpic.net/free-photo/woman-smiling_1187-3196.jpg", alt: "happy customer portrait 1"}, {src: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg", alt: "happy customer portrait 2"}, {src: "http://img.b2bpic.net/free-photo/very-good-smiling-brunette-woman-shows-ok-okay-hand-sign-looking-satisfied-recommend-great-deal-pleased-with-quality-standing-white-background_176420-46695.jpg", alt: "happy customer portrait 3"}, {src: "http://img.b2bpic.net/free-photo/smiling-middle-aged-woman-showing-ok-sign_1262-17571.jpg", alt: "happy customer portrait 4"}, {src: "http://img.b2bpic.net/free-photo/cheerful-attractive-dark-haired-latin-man-posing-kitchen_74855-7991.jpg", alt: "happy customer portrait 5"}]} />
|
||||
</div>
|
||||
<div id="services-list" data-section="services-list">
|
||||
<FeatureCardTwentyFour animationType="slide-up" title="Premium Roofing Services" description="Comprehensive care for your biggest asset." textboxLayout="split" useInvertedBackground={false} features={[{id: "s1", title: "Roof Inspection", author: "Pro Team", description: "Detailed inspections with photos & videos so you see exactly what we see.", tags: ["Safety", "Analysis"], imageSrc: "http://img.b2bpic.net/free-photo/cute-yellow-rural-house-with-wooden-stairs-countryside_176420-7157.jpg"}, {id: "s2", title: "Roof Repair", author: "Expert Crew", description: "From leaks to storm damage—we fix it fast and correctly.", tags: ["Speed", "Quality"], imageSrc: "http://img.b2bpic.net/free-photo/man-working-roof-front-view_23-2148748780.jpg"}, {id: "s3", title: "Full Replacement", author: "Master Craftsmen", description: "Premium materials, expert installation, built to last decades.", tags: ["Longevity", "Value"], imageSrc: "http://img.b2bpic.net/free-photo/high-angle-beautiful-wooden-house-with-new-roof_23-2149343703.jpg"}, {id: "s4", title: "Insurance Help", author: "Claim Specialists", description: "We fight your insurance so you don’t have to.", tags: ["Claims", "Ease"], imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hand-holding-pen-close-up_23-2149191369.jpg"}]} />
|
||||
</div>
|
||||
<div id="before-after" data-section="before-after">
|
||||
<ProductCardOne title="See the Difference" description="Real craftsmanship. Real transformation." animationType="slide-up" gridVariant="two-columns-alternating-heights" textboxLayout="default" useInvertedBackground={true} products={[{id: "ba1", name: "Before: Storm Damaged", price: "Damaged", imageSrc: "http://img.b2bpic.net/free-photo/view-old-abandoned-house-nature_23-2150166504.jpg"}, {id: "ba2", name: "After: Fully Restored", price: "Completed", imageSrc: "http://img.b2bpic.net/free-photo/modern-stadium_1127-110.jpg"}, {id: "ba3", name: "Before: Old Roof", price: "Weathered", imageSrc: "http://img.b2bpic.net/free-photo/metal-structure_181624-31076.jpg"}, {id: "ba4", name: "After: Modern Install", price: "Completed", imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-13092.jpg"}, {id: "ba5", name: "Before: Leak Area", price: "Urgent", imageSrc: "http://img.b2bpic.net/free-photo/man-walking-roof_1321-1040.jpg"}, {id: "ba6", name: "After: Sealed Repair", price: "Completed", imageSrc: "http://img.b2bpic.net/free-photo/home-clay-roof-tile_657883-716.jpg"}]} />
|
||||
</div>
|
||||
<div id="contact-home" data-section="contact-home">
|
||||
<ContactCenter tag="Contact Us" title="Don’t Wait Until It Gets Worse" description="A small roof issue today can cost thousands tomorrow. Get a free inspection." useInvertedBackground={false} background={{ variant: "gradient-bars" }} />
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple columns={[{title: "Company", items: [{label: "About Us", href: "/about"}, {label: "Contact", href: "/contact"}]}, {title: "Services", items: [{label: "Roof Repairs", href: "/services"}, {label: "Full Replacements", href: "/services"}, {label: "Claims", href: "/services"}]}]} bottomLeftText="© 2024 Empire Roofing & Construction" bottomRightText="Built Like an Empire." />
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user