Files
a5d405cf-9824-44ee-87df-499…/src/app/page.tsx
2026-04-25 07:52:02 +00:00

176 lines
9.8 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="small"
sizing="largeSmall"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="solid"
headingFontWeight="bold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Services", id: "features" },
{ name: "Contact", id: "contact" },
]}
brandName="Wolfe Construction"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
background={{ variant: "gradient-bars" }}
title="Built on Quality. Delivered with Care."
description="Wolfe Construction has been delivering top-quality workmanship and professional construction management in Edmonton for over 15 years."
buttons={[{ text: "Request Consultation", href: "#contact" }]}
kpis={[
{ value: "15+", label: "Years Experience" },
{ value: "90+", label: "Verified Reviews" },
{ value: "4.8", label: "Avg. Rating" },
]}
enableKpiAnimation={true}
imageSrc="http://img.b2bpic.net/free-photo/building-construction-worker-site_23-2149124282.jpg"
imageAlt="Wolfe Construction Site"
mediaAnimation="slide-up"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/construction-worker-is-carrying-wood-planks-very-hard-construction-site_1150-21888.jpg", alt: "Construction worker is carrying wood planks" },
{ src: "http://img.b2bpic.net/free-photo/building-construction-worker-site-with-architect_23-2149124270.jpg", alt: "Building and construction worker" },
{ src: "http://img.b2bpic.net/free-photo/working-with-blueprint_1098-14292.jpg", alt: "Working with blueprint" },
{ src: "http://img.b2bpic.net/free-photo/worker-wearing-safety-glasses-construction-site_23-2148784055.jpg", alt: "Worker wearing safety glasses" },
{ src: "http://img.b2bpic.net/free-photo/correcting-blueprint_1098-18185.jpg", alt: "Correcting blueprint" },
]}
avatarText="Trusted by local experts"
marqueeItems={[
{ type: "text", text: "Residential Construction" },
{ type: "text", text: "Commercial Renovation" },
{ type: "text", text: "Project Management" },
{ type: "text", text: "Expert Framing" },
{ type: "text", text: "Quality Finishing" },
]}
/>
</div>
<div id="about" data-section="about">
<SplitAbout
textboxLayout="split"
useInvertedBackground={true}
title="Trusted Edmonton General Contractors"
description="We are a full-service construction company committed to high standards, reliable results, and clear communication. From bathroom renovations to full commercial management, we handle projects with professional precision."
bulletPoints={[
{ title: "Expert Management", description: "Seamless construction project coordination from start to finish." },
{ title: "High Quality Standards", description: "Proven results through 15+ years of dedicated professional craft." },
{ title: "Client Focused", description: "Exceptional communication with reliable project turnaround times." },
]}
imageSrc="http://img.b2bpic.net/free-photo/building-construction-worker-site-with-architect_23-2149124313.jpg"
imageAlt="Construction Management"
mediaAnimation="blur-reveal"
/>
</div>
<div id="features" data-section="features">
<FeatureCardSix
textboxLayout="split-actions"
buttons={[{ text: "Get a Quote", href: "#contact" }]}
useInvertedBackground={false}
features={[
{ title: "Remodeling & Renovations", description: "Expert bathroom and kitchen makeovers.", imageSrc: "http://img.b2bpic.net/free-photo/light-symmetry-historic-atrium-upward-view-through-stairs_169016-70079.jpg", imageAlt: "Renovation" },
{ title: "Finishing & Drywall", description: "Precision drywall installation and taping.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-construction-workers-job_23-2149366671.jpg", imageAlt: "Finishing" },
{ title: "Residential Framing", description: "Structural framing with professional accuracy.", imageSrc: "http://img.b2bpic.net/free-photo/photovoltaics-factory-manager-sends-engineer-improve-energy-production_482257-118030.jpg", imageAlt: "Framing" },
]}
title="Comprehensive Construction Services"
description="Professional solutions for residential and commercial needs."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
animationType="scale-rotate"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
metrics={[
{ id: "m1", value: "15+", description: "Years in Business" },
{ id: "m2", value: "500+", description: "Projects Completed" },
{ id: "m3", value: "91", description: "5-Star Google Reviews" },
]}
title="Our Project Impact"
description="Proven results for Edmonton's residential and commercial landscape."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
textboxLayout="default"
animationType="scale-rotate"
useInvertedBackground={false}
testimonials={[
{ id: "t1", name: "Sarah J.", role: "Homeowner", company: "Residential", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/couple-painting-walls-their-new-home-together_23-2149086832.jpg" },
{ id: "t2", name: "Michael D.", role: "Manager", company: "Commercial", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-man-sitting-desk_329181-15290.jpg" },
{ id: "t3", name: "Emily R.", role: "Homeowner", company: "Renovation", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-browsing-tablet-kitchen_23-2147769506.jpg" },
{ id: "t4", name: "David K.", role: "Developer", company: "Real Estate", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-working-as-real-estate-agent_23-2151065019.jpg" },
{ id: "t5", name: "Karen S.", role: "Homeowner", company: "Washroom", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-fashion-designer-working-her-workshop-alone_23-2148877352.jpg" },
]}
kpiItems={[
{ value: "4.8", label: "Overall Rating" },
{ value: "91", label: "Total Reviews" },
{ value: "100%", label: "Client Satisfaction" },
]}
title="What Our Clients Say"
description="Trusted by Edmonton home and business owners."
/>
</div>
<div id="socialproof" data-section="socialproof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={true}
names={[
"Edmonton Construction Association Member", "Commercial & Residential Standards", "Professional Licensing", "Safety Certified", "Construction Association Western Canada", "Quality Craftsmanship", "Project Management Excellence"]}
title="Serving Edmonton & Area"
description="Professional construction associations and standards."
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{ variant: "plain" }}
tag="Get in touch"
title="Start Your Project Today"
description="Ready to discuss your renovation or construction project? Contact us today for professional management and quality service."
buttonText="Book Your Consultation"
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Wolfe Construction"
copyrightText="© 2025 Wolfe Construction. Edmonton, AB."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}