334 lines
20 KiB
TypeScript
334 lines
20 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
import { Award, Building, Building2 } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="mediumLarge"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="none"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "#home"},
|
|
{
|
|
name: "About", id: "#about"},
|
|
{
|
|
name: "Services", id: "#services"},
|
|
{
|
|
name: "Projects", id: "#projects"},
|
|
{
|
|
name: "Testimonials", id: "#testimonials"},
|
|
{
|
|
name: "Contact", id: "#contact"},
|
|
]}
|
|
brandName="Graybeale Construction Inc"
|
|
/>
|
|
</div>
|
|
|
|
<div id="home" data-section="home">
|
|
<HeroBillboardTestimonial
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain"}}
|
|
title="Quality Construction Built to Last"
|
|
description="Graybeale Construction delivers professional general contracting services with proven expertise and attention to detail. From concept to completion, we build projects that exceed expectations."
|
|
testimonials={[
|
|
{
|
|
name: "Sarah Chen", handle: "@homeowner_nj", testimonial: "Graybeale transformed our old home into a modern masterpiece. Their team was professional, transparent, and delivered beyond our dreams.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg", imageAlt: "Sarah Chen avatar"},
|
|
{
|
|
name: "Mark Johnson", handle: "@property_mgmt", testimonial: "As a property manager, I need reliable contractors. Graybeale consistently delivers high-quality work on time and within budget.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-empowered-business-woman-office_23-2149333043.jpg", imageAlt: "Mark Johnson avatar"},
|
|
{
|
|
name: "Emily Davis", handle: "@arch_designs", testimonial: "Partnering with Graybeale is always a pleasure. Their attention to detail and commitment to architectural integrity is unmatched.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-african-american-businessman_1262-20994.jpg", imageAlt: "Emily Davis avatar"},
|
|
{
|
|
name: "David Lee", handle: "@developer_corp", testimonial: "Their commercial team handled our large-scale project with exceptional efficiency. Highly recommended for complex builds.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-woman-with-laptop-office_23-2147787651.jpg", imageAlt: "David Lee avatar"},
|
|
{
|
|
name: "Jessica White", handle: "@biz_owner", testimonial: "Our new retail space was completed flawlessly. Graybeale's expertise made the entire process smooth and stress-free.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-shot-man-looking-away_23-2148230181.jpg", imageAlt: "Jessica White avatar"},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "View Our Work", href: "#projects"},
|
|
]}
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/sleepy-mixed-race-man-portrait-deep-blue-background_633478-2106.jpg", alt: "Sarah Chen"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/business-woman-with-laptop-looking-away_23-2148317298.jpg", alt: "Mark Johnson"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/businessman-front-building_23-2147985136.jpg", alt: "Emily Davis"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/young-painter-white-shirt-striped-t-shirt-sitting-floor-thoughtfully-looking-camera-while-drawing-by-watercolor-with-paint-tools-near-home_574295-3776.jpg", alt: "David Lee"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/mature-woman-blue-t-shirt-pretending-hold-show-something-looking-merry_176474-32604.jpg", alt: "Jessica White"},
|
|
]}
|
|
avatarText="Trusted by leading clients"
|
|
imageSrc="http://img.b2bpic.net/free-photo/house-construction-petrovac-montenegro_1268-14788.jpg"
|
|
imageAlt="Construction site with modern building under construction"
|
|
mediaAnimation="slide-up"
|
|
buttonAnimation="slide-up"
|
|
marqueeItems={[
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-photo/crane-building-construction-exterior_74190-7518.jpg", alt: "Crane building under construction exterior"},
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-photo/tall-office-modern-buildings_23-2148836835.jpg", alt: "Tall office modern buildings"},
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-photo/street-reflection-glass-steel-building-facade_1153-3596.jpg", alt: "Street reflection on glass steel building facade"},
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-photo/giant-glass-buildings_1127-2023.jpg", alt: "Giant glass buildings"},
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-photo/new-york-city-ny-usa-october-20-2020-vessel-hudson-yards-staircase-designed-by-architect-thomas-heatherwick-midtown-manhattan-west_1321-2499.jpg", alt: "Modern building development"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
useInvertedBackground={true}
|
|
title="Building Dreams into Reality Since 1995"
|
|
metrics={[
|
|
{
|
|
icon: Building,
|
|
label: "Years in Business", value: "28+"},
|
|
{
|
|
icon: Building2,
|
|
label: "Projects Completed", value: "500+"},
|
|
{
|
|
icon: Award,
|
|
label: "Satisfied Clients", value: "98%"},
|
|
]}
|
|
metricsAnimation="entrance-slide"
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardEleven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
groups={[
|
|
{
|
|
id: "leadership", groupTitle: "Leadership", members: [
|
|
{
|
|
id: "1", title: "John Graybeale", subtitle: "Founder & CEO", detail: "Over 30 years of experience in general contracting, specializing in large-scale commercial and residential developments. John founded Graybeale Construction with a vision for quality and integrity.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-man-sitting-desk_329181-15290.jpg", imageAlt: "John Graybeale"},
|
|
{
|
|
id: "2", title: "Maria Rodriguez", subtitle: "Chief Operations Officer", detail: "Maria oversees all project operations, ensuring efficiency, safety, and timely completion. Her expertise in logistics and team management is critical to our success.", imageSrc: "http://img.b2bpic.net/free-photo/senior-businessman-architect-hard-hat_1303-18998.jpg", imageAlt: "Maria Rodriguez"},
|
|
{
|
|
id: "3", title: "David Kim", subtitle: "Head of Project Development", detail: "David leads our project acquisition and client relations, identifying new opportunities and fostering strong partnerships. His strategic vision drives our growth.", imageSrc: "http://img.b2bpic.net/free-photo/happy-people-with-sketch-tablet_23-2148269344.jpg", imageAlt: "David Kim"},
|
|
{
|
|
id: "4", title: "Jessica Lee", subtitle: "Lead Architect & Designer", detail: "Jessica brings innovative design solutions and a keen eye for detail to every project, ensuring aesthetic appeal and functional excellence for our clients.", imageSrc: "http://img.b2bpic.net/free-photo/three-architects-with-plans_23-2147702498.jpg", imageAlt: "Jessica Lee"},
|
|
]
|
|
}
|
|
]}
|
|
title="Meet Our Dedicated Leadership Team"
|
|
description="Our experienced team is committed to delivering exceptional craftsmanship and unparalleled service on every project."
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
title: "Residential Renovations", description: "Transform your home with our expert renovation services, including kitchen and bathroom remodels, additions, and whole-house makeovers. We bring your vision to life.", imageSrc: "http://img.b2bpic.net/free-photo/abstract-city-building-shadows_23-2149283249.jpg", imageAlt: "Modern residential kitchen renovation"},
|
|
{
|
|
title: "Commercial Construction", description: "Specializing in new commercial builds, office fit-outs, and retail space construction. We deliver functional and aesthetically pleasing environments for your business.", imageSrc: "http://img.b2bpic.net/free-photo/modern-hotel-lobby-with-hallway-office-lounge-room_1262-12372.jpg", imageAlt: "Modern commercial building exterior"},
|
|
{
|
|
title: "Project Management", description: "Our experienced project managers ensure seamless execution from concept to completion. We handle all aspects, including budgeting, scheduling, and subcontractor coordination.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-builder-looking-clipboard-high-quality-photo_114579-61056.jpg", imageAlt: "Construction project manager reviewing blueprints"},
|
|
]}
|
|
title="Our Comprehensive Construction Services"
|
|
description="From residential remodels to large-scale commercial builds, Graybeale Construction offers a full spectrum of general contracting solutions tailored to your needs."
|
|
/>
|
|
</div>
|
|
|
|
<div id="projects" data-section="projects">
|
|
<ProductCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "1", name: "The Grand Plaza Retail", price: "Commercial Retail", imageSrc: "http://img.b2bpic.net/free-photo/atelier-shop-full-sartorial-outfits_482257-90452.jpg", imageAlt: "Interior of a modern retail store"},
|
|
{
|
|
id: "2", name: "Skyline Corporate HQ", price: "Office Building", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-view-business-buildings_1359-1085.jpg", imageAlt: "Modern corporate office space interior"},
|
|
{
|
|
id: "3", name: "Coastal Haven Residence", price: "Luxury Residential", imageSrc: "http://img.b2bpic.net/free-photo/swimming-pool-beach-luxury-hotel-type-entertainment-complex-amara-dolce-vita-luxury-hotel-resort-tekirova-kemer-turkey_146671-18719.jpg", imageAlt: "Exterior of a luxury modern home"},
|
|
{
|
|
id: "4", name: "Urban Living Apartments", price: "Multi-Family Residential", imageSrc: "http://img.b2bpic.net/free-photo/aerial-shot-ski-resort-covered-snow-alps_181624-30150.jpg", imageAlt: "Exterior of a modern apartment complex"},
|
|
{
|
|
id: "5", name: "The Beacon Hotel & Spa", price: "Hospitality", imageSrc: "http://img.b2bpic.net/free-photo/silhouette-young-business-woman-beige-suit-walking-city-center-posing-near-office-buildings_1258-194036.jpg", imageAlt: "Luxurious hotel lobby interior"},
|
|
{
|
|
id: "6", name: "Precision Manufacturing Facility", price: "Industrial", imageSrc: "http://img.b2bpic.net/free-photo/warehouse-workers-checking-inventory-goods-distribution-large-storehouse_342744-1482.jpg", imageAlt: "Clean and modern industrial manufacturing facility"},
|
|
]}
|
|
title="Showcasing Our Past Work"
|
|
description="Explore a selection of our recently completed projects, demonstrating our commitment to quality, innovative design, and client satisfaction."
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
names={[
|
|
"Asset Group", "Urban Developers", "Property Solutions Inc.", "Architectural Visionaries", "Prime Estates Group", "EcoBuild Innovations", "Hospitality Ventures"]}
|
|
title="Trusted by Industry Leaders"
|
|
description="We partner with top-tier clients and collaborate with leading industry experts to deliver exceptional results."
|
|
showCard={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah J.", imageSrc: "http://img.b2bpic.net/free-photo/modern-skyscrapers-business-district_23-2148836789.jpg", imageAlt: "Modern office building"},
|
|
{
|
|
id: "2", name: "Michael L.", imageSrc: "http://img.b2bpic.net/free-photo/modern-dining-room-with-outdoor-patio-pool_23-2152008246.jpg", imageAlt: "Luxury home interior"},
|
|
{
|
|
id: "3", name: "Emily R.", imageSrc: "http://img.b2bpic.net/free-photo/elegant-women-with-shopping-bags-city_1157-26764.jpg", imageAlt: "Retail store front"},
|
|
{
|
|
id: "4", name: "David K.", imageSrc: "http://img.b2bpic.net/free-photo/daylight-analog-city-landscape-with-buildings_23-2149661407.jpg", imageAlt: "Modern apartment building"},
|
|
{
|
|
id: "5", name: "Jessica A.", imageSrc: "http://img.b2bpic.net/free-photo/clean-organized-pharmaceutical-plant-where-steel-pipelines-valves-are-part-sterile-environment_73899-44052.jpg", imageAlt: "Industrial warehouse interior"},
|
|
]}
|
|
cardTitle="What Our Clients Say"
|
|
cardTag="Success Stories"
|
|
buttons={[
|
|
{
|
|
text: "Read All Reviews", href: "#testimonials"}
|
|
]}
|
|
cardAnimation="blur-reveal"
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What types of projects does Graybeale Construction handle?", content: "We specialize in both residential and commercial general contracting, including new construction, renovations, remodels, and large-scale build-outs for various industries."},
|
|
{
|
|
id: "2", title: "How do you ensure project quality and timely completion?", content: "Our experienced project managers follow a rigorous process including detailed planning, regular site inspections, transparent communication, and strict adherence to timelines and budgets. We use only high-quality materials and trusted subcontractors."},
|
|
{
|
|
id: "3", title: "Can I see examples of your previous work?", content: "Absolutely! Our 'Projects' section showcases a diverse portfolio of our completed residential and commercial projects. We can also provide case studies and references upon request."},
|
|
{
|
|
id: "4", title: "How do I get started with a project proposal?", content: "Simply reach out to us through our 'Contact' form or call us directly. We'll schedule an initial consultation to discuss your vision, requirements, and provide a tailored proposal."},
|
|
]}
|
|
sideTitle="Frequently Asked Questions"
|
|
sideDescription="Find answers to common questions about our services, process, and commitment to quality."
|
|
faqsAnimation="entrance-slide"
|
|
textPosition="left"
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="Let's Build Something Great Together"
|
|
description="Ready to start your next construction project? Get in touch with Graybeale Construction Inc. for a consultation and estimate."
|
|
inputs={[
|
|
{
|
|
name: "name", type: "text", placeholder: "Your Name", required: true,
|
|
},
|
|
{
|
|
name: "email", type: "email", placeholder: "Your Email", required: true,
|
|
},
|
|
{
|
|
name: "phone", type: "tel", placeholder: "Your Phone (Optional)"},
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Tell us about your project...", rows: 5,
|
|
required: true,
|
|
}}
|
|
imageSrc="http://img.b2bpic.net/free-photo/man-standing-rooftop-with-phone-hand_23-2148269876.jpg"
|
|
imageAlt="Construction blueprints and hard hat on a table"
|
|
mediaAnimation="entrance-slide"
|
|
mediaPosition="right"
|
|
buttonText="Send Message"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
logoText="Graybeale Construction Inc"
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{
|
|
label: "Residential", href: "#services"},
|
|
{
|
|
label: "Commercial", href: "#services"},
|
|
{
|
|
label: "Project Management", href: "#services"},
|
|
{
|
|
label: "Consultation", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "About Us", href: "#about"},
|
|
{
|
|
label: "Our Team", href: "#team"},
|
|
{
|
|
label: "Projects", href: "#projects"},
|
|
{
|
|
label: "Testimonials", href: "#testimonials"},
|
|
],
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{
|
|
label: "Contact Us", href: "#contact"},
|
|
{
|
|
label: "Careers", href: "#"},
|
|
{
|
|
label: "FAQs", href: "#faq"},
|
|
{
|
|
label: "LinkedIn", href: "https://linkedin.com/graybeale"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 Graybeale Construction Inc. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|