Merge version_4 into main #7
119
src/app/page.tsx
119
src/app/page.tsx
@@ -2,13 +2,13 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
||||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -26,104 +26,87 @@ export default function LandingPage() {
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "About", id: "about"},
|
||||
{
|
||||
name: "Services", id: "features"},
|
||||
{
|
||||
name: "Testimonials", id: "testimonials"},
|
||||
{
|
||||
name: "Contact", id: "contact"},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="the bennys Roofing & Gutters"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboardSplit
|
||||
logoText="Quality Roofing & Gutter Solutions"
|
||||
description="Protecting your biggest investment with expert craftsmanship and premium materials. Serving our community with integrity."
|
||||
background={{ variant: "gradient-bars" }}
|
||||
<HeroCentered
|
||||
title="Expert Roofing & Gutter Solutions"
|
||||
description="Professional craftsmanship for your home. Serving our community with high-quality materials and reliable service."
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
avatars={[{ src: "http://img.b2bpic.net/free-photo/man-walking-roof_1321-1041.jpg?_wi=1", alt: "Roofing expert" }]}
|
||||
buttons={[{ text: "Get Your Quote", href: "#contact" }]}
|
||||
layoutOrder="default"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/electrician-examines-construction-site-while-holding-electrical-cable-his-hand-worksite_169016-12127.jpg?_wi=1"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
<MetricSplitMediaAbout
|
||||
title="The Benny Difference"
|
||||
description={["We believe in quality, transparency, and timely delivery. With years of experience in the roofing industry, we ensure every project is handled with precision and care."]}
|
||||
description="With years of dedication, we provide precision roofing and gutter repairs. We combine hard work with high-quality materials to protect your largest asset."
|
||||
metrics={[{ value: "10+ years", title: "Experience" }, { value: "500+", title: "Projects" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-walking-roof_1321-1041.jpg?_wi=2"
|
||||
imageAlt="Team working on a residential roof"
|
||||
useInvertedBackground={true}
|
||||
mediaAnimation="opacity"
|
||||
metricsAnimation="opacity"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardNine
|
||||
showStepNumbers={true}
|
||||
title="Our Professional Services"
|
||||
description="Comprehensive roofing and gutter solutions tailored for your home needs."
|
||||
textboxLayout="split"
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{
|
||||
id: 1, title: "Roof Installation", description: "High-quality, durable roof installations.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/man-walking-roof_1321-1041.jpg?_wi=1" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/man-walking-roof_1321-1041.jpg?_wi=2" }
|
||||
},
|
||||
{
|
||||
id: 2, title: "Gutter Repair", description: "Efficient gutter systems and repairs.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/polishing-ring-close-up_23-2148643293.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/polishing-ring-close-up_23-2148643293.jpg" }
|
||||
}
|
||||
<FeatureCardTwentyOne
|
||||
title="Our Roofing & Gutter Services"
|
||||
description="Comprehensive maintenance, repair, and installation services for all your roofing and gutter needs."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-walking-roof_1321-1041.jpg?_wi=3"
|
||||
accordionItems={[
|
||||
{ id: "r1", title: "Roofing Installation", content: "Professional installation using the best materials in the market." },
|
||||
{ id: "r2", title: "Gutter Repairs", content: "Keep your home safe from water damage with our efficient gutter repair systems." }
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
mediaAnimation="opacity"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
<TestimonialCardTen
|
||||
title="What Our Customers Say"
|
||||
description="Your trust is our greatest achievement. Here is how we've helped homeowners keep their properties safe."
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
title="Trusted by Homeowners"
|
||||
description="Hear what our happy customers are saying about our roofing and gutter work."
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah J.", role: "Homeowner", company: "Local Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/receiving-keys-happy-couple-together-their-new-house-conception-moving_146671-16174.jpg?_wi=1" },
|
||||
{ id: "2", name: "Mark D.", role: "Homeowner", company: "Local Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/business-woman-posing-curtain_23-2148218540.jpg" }
|
||||
{
|
||||
id: "t1", title: "Excellent Service!", quote: "The team did an amazing job on our roof replacement. Quick, professional, and reliable.", name: "Sarah J.", role: "Homeowner", imageSrc: "http://img.b2bpic.net/free-photo/man-walking-roof_1321-1041.jpg?_wi=4"
|
||||
}
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
text="Ready to transform your home's exterior? Reach out to our team for a professional consultation today."
|
||||
background={{ variant: "plain" }}
|
||||
buttons={[{ text: "Contact Us", href: "#contact" }]}
|
||||
<ContactCenter
|
||||
tag="Get in touch"
|
||||
title="Ready for a free estimate?"
|
||||
description="Let us help you with your next roofing project. Our team is ready to provide you with a consultation."
|
||||
background={{ variant: "rotated-rays-static" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{ label: "Roofing Services", href: "#features" },
|
||||
{ label: "Gutter Repairs", href: "#features" },
|
||||
{ label: "Request Estimate", href: "#contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
<FooterLogoReveal
|
||||
logoText="the bennys Roofing & Gutters"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #1f7cff;
|
||||
--background: #fdf8f4;
|
||||
--card: #ffffff;
|
||||
--foreground: #1a0b00;
|
||||
--primary-cta: #E34400;
|
||||
--primary-cta-text: #f5f4ef;
|
||||
--secondary-cta: #010101;
|
||||
--secondary-cta: #106EFB;
|
||||
--secondary-cta-text: #2a2928;
|
||||
--accent: #1f7cff;
|
||||
--background-accent: #f96b2f;
|
||||
--accent: #FF7B05;
|
||||
--background-accent: #f9f1e9;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user