284 lines
17 KiB
TypeScript
284 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="fluid"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "#hero"},
|
|
{
|
|
name: "About Us", id: "#about"},
|
|
{
|
|
name: "Services", id: "#services"},
|
|
{
|
|
name: "Projects", id: "#projects"},
|
|
{
|
|
name: "Metrics", id: "#metrics"},
|
|
{
|
|
name: "Partners", id: "#partners"},
|
|
{
|
|
name: "Testimonials", id: "#testimonials"},
|
|
{
|
|
name: "FAQ", id: "#faq"},
|
|
{
|
|
name: "Contact", id: "#contact"},
|
|
]}
|
|
brandName="John Construction"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplit
|
|
background={{
|
|
variant: "radial-gradient"}}
|
|
title="Quality Construction Built on Trust and Results"
|
|
description="From concept to completion, we deliver exceptional builds on time and on budget. Explore our portfolio of residential and commercial projects."
|
|
buttons={[
|
|
{
|
|
text: "View Our Projects", href: "#projects"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/urban-landscape-japan-rails_23-2148889589.jpg"
|
|
imageAlt="Modern building construction site with cranes"
|
|
mediaAnimation="blur-reveal"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/handsome-groom-classy-black-suit-stands-dark-room_8353-7083.jpg", alt: "Satisfied Client 1"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/businesswoman-glasses-portrait_1262-1461.jpg", alt: "Satisfied Client 2"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/young-bearded-handsome-engineer-making-greeting-gesture-touching-his-helmet-smiling-standing-isolated-green-wall_141793-16601.jpg", alt: "Satisfied Client 3"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/female-builder-with-goggles-clipboard-high-quality-photo_114579-61058.jpg", alt: "Satisfied Client 4"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081912.jpg", alt: "Satisfied Client 5"},
|
|
]}
|
|
avatarText="Trusted by over 1000+ clients"
|
|
marqueeItems={[
|
|
{
|
|
type: "text", text: "Innovation"},
|
|
{
|
|
type: "text", text: "Reliability"},
|
|
{
|
|
type: "text", text: "Craftsmanship"},
|
|
{
|
|
type: "text", text: "Integrity"},
|
|
{
|
|
type: "text", text: "Excellence"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
useInvertedBackground={true}
|
|
title="Building Dreams, One Project at a Time"
|
|
description={[
|
|
"John Construction is dedicated to delivering high-quality residential and commercial building solutions. With decades of experience, our team ensures transparency, clear communication, and superior craftsmanship from the initial blueprint to the final touches. We pride ourselves on turning your vision into a reality, on schedule and within budget, with an unwavering commitment to excellence and client satisfaction. Our expertise spans new constructions, intricate renovations, and large-scale commercial developments, making us your trusted partner in construction.", "We understand the complexities of modern construction and strive to simplify the process for our clients. By leveraging innovative techniques and a skilled workforce, we tackle challenges head-on, ensuring every project meets the highest standards of quality and durability. Our proactive approach to project management minimizes delays and unexpected costs, providing peace of mind to homeowners, developers, and facility managers alike."]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardMedia
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "res-build", title: "Residential Construction", description: "Crafting beautiful, durable homes tailored to your unique lifestyle, from custom new builds to extensive renovations and extensions.", tag: "Homes", imageSrc: "http://img.b2bpic.net/free-photo/flower-vase-modern-interior_23-2151928991.jpg", imageAlt: "Modern home under construction"},
|
|
{
|
|
id: "com-build", title: "Commercial Construction", description: "Delivering robust and functional commercial spaces for offices, retail, industrial facilities, and mixed-use developments.", tag: "Business", imageSrc: "http://img.b2bpic.net/free-photo/industrial-park-factory-building-warehouse_1417-1910.jpg", imageAlt: "Modern commercial building exterior"},
|
|
{
|
|
id: "proj-mgmt", title: "Expert Project Management", description: "Ensuring seamless execution, adherence to timelines, strict budget control, and clear communication throughout your entire project.", tag: "Management", imageSrc: "http://img.b2bpic.net/free-photo/from-draftsmen-looking-blueprints_23-2147785497.jpg", imageAlt: "Architect looking at blueprints with tablet"},
|
|
]}
|
|
title="Our Comprehensive Construction Services"
|
|
description="We offer a full spectrum of construction services tailored to meet the diverse needs of our residential and commercial clients, ensuring every project is handled with expertise and care."
|
|
/>
|
|
</div>
|
|
|
|
<div id="projects" data-section="projects">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "proj-1", name: "Luxury Lakefront Residence", price: "$1.2M+", variant: "Residential New Build", imageSrc: "http://img.b2bpic.net/free-photo/architectural-reflection-modern-white-building-pool_23-2151993725.jpg", imageAlt: "Luxury lakefront residence exterior"},
|
|
{
|
|
id: "proj-2", name: "Downtown Office Complex Renovation", price: "$850K+", variant: "Commercial Renovation", imageSrc: "http://img.b2bpic.net/free-photo/modern-coffeehouse-with-contemporary-design_23-2149052832.jpg", imageAlt: "Renovated downtown office complex"},
|
|
{
|
|
id: "proj-3", name: "Modern Retail Storefront", price: "$300K+", variant: "Commercial New Build", imageSrc: "http://img.b2bpic.net/free-photo/corporate-businesswoman-beige-suit-silhouette-young-corporate-woman-with-documents-laptop_1258-119507.jpg", imageAlt: "Modern retail store exterior"},
|
|
{
|
|
id: "proj-4", name: "Historic District Home Restoration", price: "$700K+", variant: "Residential Renovation", imageSrc: "http://img.b2bpic.net/free-photo/view-abandoned-decaying-house-nature_23-2150166582.jpg", imageAlt: "Restored historic home exterior"},
|
|
{
|
|
id: "proj-5", name: "Industrial Warehouse Extension", price: "$1.5M+", variant: "Commercial Expansion", imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-corporate-buildings-west-london-uk_181624-17106.jpg", imageAlt: "Industrial warehouse extension"},
|
|
{
|
|
id: "proj-6", name: "Contemporary Suburban Villa", price: "$900K+", variant: "Residential New Build", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-house-with-wooden-pieces_23-2148931503.jpg", imageAlt: "Contemporary suburban villa"},
|
|
]}
|
|
title="Our Portfolio of Completed Projects"
|
|
description="Showcasing our diverse range of residential and commercial construction achievements, built with precision and passion. Each project reflects our dedication to quality and client satisfaction."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEleven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "metric-1", value: "35+", title: "Years of Experience", description: "Decades of expertise in residential and commercial construction.", imageSrc: "http://img.b2bpic.net/free-photo/architectural-blueprints_1359-424.jpg", imageAlt: "Vintage measuring tape and blueprints"},
|
|
{
|
|
id: "metric-2", value: "500+", title: "Projects Completed", description: "A vast portfolio of successful builds delivered on time and within budget.", imageSrc: "http://img.b2bpic.net/free-photo/building-night-with-prism-kaleidoscope-prism-lens-effect_53876-126894.jpg", imageAlt: "Modern city skyline with buildings"},
|
|
{
|
|
id: "metric-3", value: "98%", title: "Client Satisfaction", description: "Our dedication to client needs results in consistently high satisfaction ratings.", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-business-hand-shake_23-2148480352.jpg", imageAlt: "Happy client shaking hands with construction worker"},
|
|
]}
|
|
title="Proven Excellence in Every Endeavor"
|
|
description="Our commitment to quality, efficiency, and client satisfaction is reflected in our consistent track record and long-standing industry presence."
|
|
/>
|
|
</div>
|
|
|
|
<div id="partners" data-section="partners">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
names={[
|
|
"CityScape Developers", "Architectural Innovations", "Apex Retail Group", "Green Earth Holdings", "Urban Living Solutions", "Structural Dynamics Inc.", "Harmony Designs"]}
|
|
title="Trusted Partners & Valued Clients"
|
|
description="We've had the privilege of collaborating with leading architects, property developers, and businesses across various sectors, building strong relationships along the way."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
useInvertedBackground={false}
|
|
testimonial="John Construction transformed our commercial space, delivering exceptional quality ahead of schedule. Their team was professional, transparent, and a pleasure to work with. Highly recommended for any large-scale project."
|
|
rating={5}
|
|
author="Michael S., Commercial Developer"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/confident-entrepreneur-satisfied-with-own-success_1163-5474.jpg", alt: "Client A"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/young-woman-sitting-library_273609-15845.jpg", alt: "Client B"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-repair-shop_1170-1349.jpg", alt: "Client C"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-young-business-lady_1163-3171.jpg", alt: "Client D"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-smiling-attractive-woman-suit-taking-selfie-while-holding-take-away-coffee-cup-isolated_231208-253.jpg", alt: "Client E"},
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "faq-1", title: "What types of construction projects does John Construction handle?", content: "We specialize in both residential and commercial projects, including new home builds, major renovations, office fit-outs, retail spaces, and industrial facility construction. Our expertise covers a wide range of scopes and complexities."},
|
|
{
|
|
id: "faq-2", title: "How do you ensure projects stay on budget and on schedule?", content: "Our meticulous project management approach involves detailed planning, transparent cost tracking, and regular progress reports. We utilize advanced scheduling tools and maintain open communication with clients to anticipate and address potential issues proactively, minimizing delays and unexpected costs."},
|
|
{
|
|
id: "faq-3", title: "Can I view examples of your past work or client testimonials?", content: "Absolutely! Our 'Projects' section showcases a diverse portfolio of our completed residential and commercial work. We also feature testimonials from satisfied clients who can attest to our quality craftsmanship and professional service. Please feel free to request references."},
|
|
]}
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common inquiries about our construction process, services, and partnerships, ensuring you have all the information you need."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "radial-gradient"}}
|
|
tag="Get in Touch"
|
|
title="Let's Build Your Vision Together"
|
|
description="Ready to discuss your next construction project? Contact us today for a consultation. Our team is here to provide expert advice and a clear path forward, ensuring transparency and quality from start to finish."
|
|
imageSrc="http://img.b2bpic.net/free-photo/construction-background_1098-18279.jpg"
|
|
imageAlt="Modern construction office with blueprints"
|
|
mediaAnimation="blur-reveal"
|
|
inputPlaceholder="Your email"
|
|
buttonText="Send Message"
|
|
termsText="By clicking Send Message, you're confirming that you agree with our Terms and Conditions."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/beautiful-shot-downtown-san-fransisco-building-with-golden-gate-bridge-night-time_181624-1693.jpg"
|
|
imageAlt="Modern building exterior at sunset"
|
|
logoSrc="http://img.b2bpic.net/free-vector/red-abstract-3d-logo_1043-152.jpg"
|
|
logoAlt="John Construction Logo"
|
|
logoText="John Construction"
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{
|
|
label: "Residential", href: "#services"},
|
|
{
|
|
label: "Commercial", href: "#services"},
|
|
{
|
|
label: "Project Management", href: "#services"},
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "About Us", href: "#about"},
|
|
{
|
|
label: "Our Projects", href: "#projects"},
|
|
{
|
|
label: "Testimonials", href: "#testimonials"},
|
|
],
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{
|
|
label: "Contact Us", href: "#contact"},
|
|
{
|
|
label: "FAQ", href: "#faq"},
|
|
{
|
|
label: "Privacy Policy", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 John Construction. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|