Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 35ef906d3a | |||
| 7b29120fde | |||
| 36aee102d5 |
349
src/app/page.tsx
349
src/app/page.tsx
@@ -2,6 +2,7 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { useState } from "react";
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
@@ -11,8 +12,29 @@ import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloating
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
import Input from '@/components/form/Input';
|
||||
|
||||
const LeadCapturePopup = ({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) => {
|
||||
const [name, setName] = useState("");
|
||||
const [project, setProject] = useState("");
|
||||
if (!isOpen) return null;
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
|
||||
<div className="w-full max-w-md p-6 bg-white rounded-lg shadow-xl">
|
||||
<h2 className="mb-4 text-2xl font-bold">Get Your Free Estimate</h2>
|
||||
<Input value={name} onChange={setName} placeholder="Your Name" className="mb-3" />
|
||||
<Input value={project} onChange={setProject} placeholder="Describe your project" className="mb-4" />
|
||||
<div className="flex justify-end gap-2">
|
||||
<button onClick={onClose} className="px-4 py-2 border rounded">Cancel</button>
|
||||
<button onClick={() => { alert('Estimate request submitted!'); onClose(); }} className="px-4 py-2 text-white bg-blue-600 rounded">Submit Request</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function LandingPage() {
|
||||
const [isPopupOpen, setIsPopupOpen] = useState(false);
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
@@ -27,290 +49,53 @@ export default function LandingPage() {
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "About Us",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
]}
|
||||
brandName="ContractPro"
|
||||
button={{
|
||||
text: "Get Free Estimate",
|
||||
href: "#contact",
|
||||
}}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
<LeadCapturePopup isOpen={isPopupOpen} onClose={() => setIsPopupOpen(false)} />
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "About Us", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
]}
|
||||
brandName="ContractPro"
|
||||
button={{
|
||||
text: "Get Free Estimate", onClick: () => setIsPopupOpen(true),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="ContractPro"
|
||||
description="Fast, Honest, No-BS Contractor Services. Get Your Free Estimate Today!"
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Free Estimate",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/friends-running-bridge-night-city_23-2149285665.jpg",
|
||||
imageAlt: "Modern home exterior renovation",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-construction-worker_329181-3739.jpg",
|
||||
imageAlt: "Contractor working on a roof",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-environment-concept_23-2148472378.jpg",
|
||||
imageAlt: "Clean and finished home interior",
|
||||
},
|
||||
]}
|
||||
autoplayDelay={4000}
|
||||
showDimOverlay={true}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="ContractPro"
|
||||
description="Fast, Honest, No-BS Contractor Services. Get Your Free Estimate Today!"
|
||||
buttons={[
|
||||
{ text: "Get Free Estimate", onClick: () => setIsPopupOpen(true) },
|
||||
]}
|
||||
slides={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/friends-running-bridge-night-city_23-2149285665.jpg", imageAlt: "Modern home exterior renovation" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-construction-worker_329181-3739.jpg", imageAlt: "Contractor working on a roof" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/top-view-environment-concept_23-2148472378.jpg", imageAlt: "Clean and finished home interior" },
|
||||
]}
|
||||
autoplayDelay={4000}
|
||||
showDimOverlay={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Your Trusted Local Contractor. Real Results, No Headaches."
|
||||
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardNineteen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
tag: "Efficiency",
|
||||
title: "Projects Completed in One Day",
|
||||
subtitle: "Speed & Quality",
|
||||
description: "Our streamlined process ensures most projects are completed within a single day, minimizing disruption to your home and life without compromising on craftsmanship.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/teamwork-off-engineer-meeting-architectural-project_1421-115.jpg",
|
||||
imageAlt: "Worker quickly completing a construction task",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
tag: "Value",
|
||||
title: "2-3x Cheaper Than Competitors",
|
||||
subtitle: "Unbeatable Pricing",
|
||||
description: "Thanks to our efficient operations and direct approach, we offer superior services at prices significantly lower than our competition. Quality work doesn't have to break the bank.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hand-pampered-coins-small-house-model_1150-14861.jpg",
|
||||
imageAlt: "Graph showing cost savings",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
tag: "Professionalism",
|
||||
title: "Spotless Cleanup, Every Time",
|
||||
subtitle: "Respectful Service",
|
||||
description: "We treat your home as if it were our own. After every project, we ensure a meticulous cleanup, leaving your property cleaner than we found it. No mess, no fuss.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-with-vinyl-records-side-view_23-2149726837.jpg",
|
||||
imageAlt: "Clean construction site",
|
||||
},
|
||||
]}
|
||||
title="Our Promise: Fast, Honest, Superior Value."
|
||||
description="We're not just contractors; we're craftsmen committed to delivering excellence. Experience the difference of a team that prioritizes your satisfaction."
|
||||
tagAnimation="opacity"
|
||||
buttonAnimation="opacity"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "rating",
|
||||
value: "5.0",
|
||||
title: "Star Rating",
|
||||
items: [
|
||||
"Consistently High Customer Satisfaction",
|
||||
"Trusted by Local Homeowners",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "cost-savings",
|
||||
value: "2-3x",
|
||||
title: "Cost Savings",
|
||||
items: [
|
||||
"Cheaper Than Competitors",
|
||||
"Transparent & Fair Pricing",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "projects",
|
||||
value: "100+",
|
||||
title: "Projects Done",
|
||||
items: [
|
||||
"Successfully Completed",
|
||||
"On-Time & On-Budget",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Results That Speak For Themselves"
|
||||
description="Our commitment to excellence is reflected in every project we undertake and every client we serve."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
carouselMode="buttons"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah J.",
|
||||
role: "Homeowner",
|
||||
company: "Ohio",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-businessman-smiling_107420-84736.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael C.",
|
||||
role: "Property Manager",
|
||||
company: "Ohio",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/aspirated-confident-businesswoman-looking-forward_1262-5277.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily R.",
|
||||
role: "Resident",
|
||||
company: "Ohio",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/contemplated-serious-young-man-looking-camera_23-2148130297.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David K.",
|
||||
role: "Satisfied Client",
|
||||
company: "Ohio",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-business-woman-posing-office_23-2149206529.jpg",
|
||||
},
|
||||
]}
|
||||
title="Real Sentiment from Happy Homeowners"
|
||||
description="Our clients consistently praise our speed, honesty, and the unparalleled value we provide."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[]}
|
||||
logos={[
|
||||
"http://img.b2bpic.net/free-vector/labour-day-label_23-2147616755.jpg",
|
||||
"http://img.b2bpic.net/free-vector/rogers-flooring-services-logo-design_742173-22860.jpg",
|
||||
"http://img.b2bpic.net/free-vector/four-gold-warranty-badges_1017-6698.jpg",
|
||||
"http://img.b2bpic.net/free-vector/labor-day-badges-collection-flat-style_23-2147864538.jpg",
|
||||
"http://img.b2bpic.net/free-vector/gradient-bank-holiday-labels_23-2149378401.jpg",
|
||||
"http://img.b2bpic.net/free-vector/flat-design-labor-day-badge-collection_23-2148488783.jpg",
|
||||
"http://img.b2bpic.net/free-vector/colourful-real-estate-logo-set_23-2147780002.jpg",
|
||||
]}
|
||||
title="Trusted by Leading Brands & Local Communities"
|
||||
description="Our commitment to excellence has earned us the trust of many, from major suppliers to local homeowners."
|
||||
speed={40}
|
||||
showCard={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "canvas-reveal",
|
||||
}}
|
||||
text="Ready for a fast, honest, and no-BS estimate? Let's talk about your next project."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Your Free Estimate Now",
|
||||
href: "mailto:info@contractpro.com",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{
|
||||
label: "Roofing",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Remodeling",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Repairs",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Cleanup",
|
||||
href: "#features",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Testimonials",
|
||||
href: "#testimonials",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 ContractPro. All rights reserved."
|
||||
bottomRightText="Built with integrity."
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about"><TextAbout title="Your Trusted Local Contractor. Real Results, No Headaches." useInvertedBackground={false} /></div>
|
||||
<div id="features" data-section="features"><FeatureCardNineteen textboxLayout="default" useInvertedBackground={true} features={[{ id: 1, tag: "Efficiency", title: "Projects Completed in One Day", subtitle: "Speed & Quality", description: "Our streamlined process ensures most projects are completed within a single day.", imageSrc: "http://img.b2bpic.net/free-photo/teamwork-off-engineer-meeting-architectural-project_1421-115.jpg" }, { id: 2, tag: "Value", title: "2-3x Cheaper Than Competitors", subtitle: "Unbeatable Pricing", description: "Superior services at prices significantly lower than our competition.", imageSrc: "http://img.b2bpic.net/free-photo/hand-pampered-coins-small-house-model_1150-14861.jpg" }, { id: 3, tag: "Professionalism", title: "Spotless Cleanup, Every Time", subtitle: "Respectful Service", description: "We treat your home as if it were our own.", imageSrc: "http://img.b2bpic.net/free-photo/people-with-vinyl-records-side-view_23-2149726837.jpg" }]} title="Our Promise: Fast, Honest, Superior Value." description="We deliver top-tier results with unmatched service levels." /></div>
|
||||
<div id="metrics" data-section="metrics"><MetricCardSeven animationType="slide-up" textboxLayout="default" metrics={[{ id: "rating", value: "5.0", title: "Star Rating", items: [] }, { id: "cost-savings", value: "2-3x", title: "Cost Savings", items: [] }, { id: "projects", value: "100+", title: "Projects Done", items: [] }]} title="Results That Speak For Themselves" description="Consistent excellence delivered in every project." useInvertedBackground={false} /></div>
|
||||
<div id="testimonials" data-section="testimonials"><TestimonialCardOne animationType="slide-up" textboxLayout="default" gridVariant="three-columns-all-equal-width" testimonials={[{ id: "1", name: "Sarah J.", role: "Homeowner", company: "Ohio", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/confident-businessman-smiling_107420-84736.jpg" }, { id: "2", name: "Michael C.", role: "Property Manager", company: "Ohio", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/aspirated-confident-businesswoman-looking-forward_1262-5277.jpg" }, { id: "3", name: "Emily R.", role: "Resident", company: "Ohio", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/contemplated-serious-young-man-looking-camera_23-2148130297.jpg" }]} title="Real Sentiment from Happy Homeowners" description="Hear from those who trust us with their projects." useInvertedBackground={false} /></div>
|
||||
<div id="social-proof" data-section="social-proof"><SocialProofOne names={["Ohio Housing Authority", "Midwest Construction News"]} logos={["http://img.b2bpic.net/free-vector/labour-day-label_23-2147616755.jpg", "http://img.b2bpic.net/free-vector/rogers-flooring-services-logo-design_742173-22860.jpg"]} title="Trusted by Leading Brands" description="Acknowledged for our reliability in the industry." textboxLayout="default" useInvertedBackground={false} /></div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "canvas-reveal" }}
|
||||
text="Ready for a fast, honest, and no-BS estimate? Let's talk about your next project."
|
||||
buttons={[{ text: "Get Your Free Estimate Now", onClick: () => setIsPopupOpen(true) }]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer"><FooterSimple columns={[{ title: "Services", items: [{ label: "Roofing", href: "#features" }] }]} bottomLeftText="© 2024 ContractPro." bottomRightText="All Rights Reserved." /></div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user