Update src/app/page.tsx
This commit is contained in:
303
src/app/page.tsx
303
src/app/page.tsx
@@ -2,14 +2,14 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import LegalSection from '@/components/legal/LegalSection';
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import { Award, Star, Users } from "lucide-react";
|
||||
import LegalSection from '@/components/legal/LegalSection';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import { Star, Users, Award } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -26,216 +26,101 @@ export default function LandingPage() {
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "/",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "/services",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "/about",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "/reviews",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "/contact",
|
||||
},
|
||||
]}
|
||||
brandName="Neal Roofing"
|
||||
button={{
|
||||
text: "Get Estimate",
|
||||
href: "/contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Reviews", id: "/reviews" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
brandName="Neal Roofing"
|
||||
button={{ text: "Get Estimate", href: "/contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="South Florida’s Most Trusted Roofing & Waterproofing Experts"
|
||||
description="4.9⭐ Rated by 900+ Homeowners — Seamless Process. Premium Results."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Free Estimate",
|
||||
href: "/contact",
|
||||
},
|
||||
{
|
||||
text: "Call Now",
|
||||
href: "tel:5550199",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/aerial-shot-area-sandsfoot-beach-weymouth-dorset-taken-with-drone_181624-26659.jpg",
|
||||
imageAlt: "Luxury Florida Roof",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/long-shot-man-with-helmet-sitting-roof_23-2149343711.jpg",
|
||||
imageAlt: "Metal Roof Install",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-15608.jpg",
|
||||
imageAlt: "Roof Renovation",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-green-palm-tree-species-with-beautiful-foliage_23-2151486444.jpg",
|
||||
imageAlt: "Architectural Roofing",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/engineering-concept-with-plans-table_23-2147704231.jpg",
|
||||
imageAlt: "Clean Site",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="South Florida’s Most Trusted Roofing & Waterproofing Experts"
|
||||
description="4.9⭐ Rated by 900+ Homeowners — Seamless Process. Premium Results."
|
||||
buttons={[{ text: "Get Free Estimate", href: "/contact" }, { text: "Call Now", href: "tel:5550199" }]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/aerial-shot-area-sandsfoot-beach-weymouth-dorset-taken-with-drone_181624-26659.jpg", imageAlt: "Luxury Florida Roof" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/long-shot-man-with-helmet-sitting-roof_23-2149343711.jpg", imageAlt: "Metal Roof Install" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-15608.jpg", imageAlt: "Roof Renovation" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/view-green-palm-tree-species-with-beautiful-foliage_23-2151486444.jpg", imageAlt: "Architectural Roofing" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/engineering-concept-with-plans-table_23-2147704231.jpg", imageAlt: "Clean Site" }
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about-metrics" data-section="about-metrics">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Why Neal Roofing"
|
||||
metrics={[
|
||||
{
|
||||
icon: Star,
|
||||
label: "Google Rating",
|
||||
value: "4.9+",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
label: "Satisfied Homeowners",
|
||||
value: "900+",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
label: "Years in Business",
|
||||
value: "8+",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about-metrics" data-section="about-metrics">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Why Neal Roofing"
|
||||
metrics={[
|
||||
{ icon: Star, label: "Google Rating", value: "4.9+" },
|
||||
{ icon: Users, label: "Satisfied Homeowners", value: "900+" },
|
||||
{ icon: Award, label: "Years in Business", value: "8+" }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="differentiator" data-section="differentiator">
|
||||
<FeatureCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "White-Glove Communication",
|
||||
description: "You’re informed every step — no guessing, no chasing updates.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/telegram-logo-icon-3d-style_23-2152000223.jpg",
|
||||
},
|
||||
{
|
||||
title: "We Handle Everything",
|
||||
description: "Permits, inspections, cleanup — handled start to finish by our team.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/variety-construction-engineer-icons_23-2147506665.jpg",
|
||||
},
|
||||
{
|
||||
title: "Built for Florida Weather",
|
||||
description: "Specializing in durable, hurricane-ready systems & metal roofing.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/check-mark-shield-half-glyph-black-green_78370-4402.jpg",
|
||||
},
|
||||
]}
|
||||
title="Not Just a Roof — A Smooth, Stress-Free Experience"
|
||||
description="We simplify every aspect of your premium roofing project."
|
||||
/>
|
||||
</div>
|
||||
<div id="differentiator" data-section="differentiator">
|
||||
<FeatureCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ title: "White-Glove Communication", description: "You’re informed every step — no guessing, no chasing updates.", imageSrc: "http://img.b2bpic.net/free-photo/telegram-logo-icon-3d-style_23-2152000223.jpg" },
|
||||
{ title: "We Handle Everything", description: "Permits, inspections, cleanup — handled start to finish by our team.", imageSrc: "http://img.b2bpic.net/free-vector/variety-construction-engineer-icons_23-2147506665.jpg" },
|
||||
{ title: "Built for Florida Weather", description: "Specializing in durable, hurricane-ready systems & metal roofing.", imageSrc: "http://img.b2bpic.net/free-vector/check-mark-shield-half-glyph-black-green_78370-4402.jpg" }
|
||||
]}
|
||||
title="Not Just a Roof — A Smooth, Stress-Free Experience"
|
||||
description="We simplify every aspect of your premium roofing project."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="process" data-section="process">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "s1",
|
||||
value: "1",
|
||||
title: "Free Inspection",
|
||||
description: "Assessment of your property needs.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-black-gift-box-with-gold-ribbon-bow_107791-17735.jpg",
|
||||
},
|
||||
{
|
||||
id: "s2",
|
||||
value: "2",
|
||||
title: "Clear Estimate",
|
||||
description: "Detailed, transparent pricing plan.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/chart-statistics-sign-front-side-with-white-background_187299-39803.jpg",
|
||||
},
|
||||
{
|
||||
id: "s3",
|
||||
value: "3",
|
||||
title: "Permits & Scheduling",
|
||||
description: "Handled by our experienced admin.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gear-icon-set-isolated-background_53876-71277.jpg",
|
||||
},
|
||||
{
|
||||
id: "s4",
|
||||
value: "4",
|
||||
title: "Installation",
|
||||
description: "Fast, clean, high-quality build.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/long-shot-men-working-roof-together_23-2149343676.jpg",
|
||||
},
|
||||
{
|
||||
id: "s5",
|
||||
value: "5",
|
||||
title: "Final Walkthrough",
|
||||
description: "Ensuring 100% satisfaction.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-working-roof_23-2149343660.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Proven 5-Step Process"
|
||||
description="No stress. No surprises. Just results."
|
||||
/>
|
||||
</div>
|
||||
<div id="process" data-section="process">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "s1", value: "1", title: "Free Inspection", description: "Assessment of your property needs.", imageSrc: "http://img.b2bpic.net/free-photo/3d-black-gift-box-with-gold-ribbon-bow_107791-17735.jpg" },
|
||||
{ id: "s2", value: "2", title: "Clear Estimate", description: "Detailed, transparent pricing plan.", imageSrc: "http://img.b2bpic.net/free-photo/chart-statistics-sign-front-side-with-white-background_187299-39803.jpg" },
|
||||
{ id: "s3", value: "3", title: "Permits & Scheduling", description: "Handled by our experienced admin.", imageSrc: "http://img.b2bpic.net/free-photo/gear-icon-set-isolated-background_53876-71277.jpg" },
|
||||
{ id: "s4", value: "4", title: "Installation", description: "Fast, clean, high-quality build.", imageSrc: "http://img.b2bpic.net/free-photo/long-shot-men-working-roof-together_23-2149343676.jpg" },
|
||||
{ id: "s5", value: "5", title: "Final Walkthrough", description: "Ensuring 100% satisfaction.", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-working-roof_23-2149343660.jpg" }
|
||||
]}
|
||||
title="Our Proven 5-Step Process"
|
||||
description="No stress. No surprises. Just results."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="legal" data-section="legal">
|
||||
<LegalSection
|
||||
layout="section"
|
||||
title="Terms and Conditions"
|
||||
sections={[
|
||||
{
|
||||
heading: "Our Commitment",
|
||||
content: {
|
||||
type: "paragraph",
|
||||
text: "Neal Roofing provides premium roofing services across South Florida. We prioritize transparency, safety, and craftsmanship in every project we undertake.",
|
||||
},
|
||||
},
|
||||
{
|
||||
heading: "Service Terms",
|
||||
content: {
|
||||
type: "list",
|
||||
items: [
|
||||
"Detailed estimates are valid for 30 days.",
|
||||
"Permitting processes are handled by our dedicated administrative team.",
|
||||
"All installations include a comprehensive final walkthrough.",
|
||||
"We provide full site cleanup upon project completion.",
|
||||
],
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="legal" data-section="legal">
|
||||
<LegalSection
|
||||
layout="section"
|
||||
title="Terms and Conditions"
|
||||
sections={[
|
||||
{ heading: "Our Commitment", content: { text: "Neal Roofing provides premium roofing services across South Florida. We prioritize transparency, safety, and craftsmanship in every project we undertake." } },
|
||||
{ heading: "Service Terms", content: { items: ["Detailed estimates are valid for 30 days.", "Permitting processes are handled by our dedicated administrative team.", "All installations include a comprehensive final walkthrough.", "We provide full site cleanup upon project completion."] } }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Neal Roofing"
|
||||
copyrightText="© 2025 Neal Roofing. All Rights Reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Neal Roofing"
|
||||
copyrightText="© 2025 Neal Roofing. All Rights Reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user