238 lines
13 KiB
TypeScript
238 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
import { MessageSquare, Wrench } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="mediumLarge"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="none"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="light"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "/"},
|
|
{
|
|
name: "Work Done", id: "/work-done"},
|
|
{
|
|
name: "Reviews", id: "/reviews"},
|
|
{
|
|
name: "Schedule", id: "/schedule"},
|
|
{
|
|
name: "Contact", id: "/contact"},
|
|
]}
|
|
brandName="OC Roofing Construction Corp."
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitTestimonial
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain"}}
|
|
title="Your Trusted Partner for Quality Roofing"
|
|
description="OC Roofing Construction Corp. delivers exceptional roofing solutions for residential and commercial properties. Experience durability, reliability, and expert craftsmanship with every project."
|
|
testimonials={[
|
|
{
|
|
name: "Sarah J.", handle: "@homeowner", testimonial: "OC Roofing did an outstanding job on our new roof! Professional, efficient, and great communication.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/person-drinking-beverage-while-break-time_23-2149256900.jpg", imageAlt: "Sarah J. customer review"},
|
|
{
|
|
name: "John D.", handle: "@satisfiedclient", testimonial: "Completely impressed with the new roof installation. The team was thorough and the work was completed ahead of schedule. Fantastic service!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-smiling-woman_171337-4171.jpg", imageAlt: "Close up portrait of a attractive smiling woman"},
|
|
{
|
|
name: "Maria P.", handle: "@propertyowner", testimonial: "From the initial consultation to the final cleanup, OC Roofing demonstrated professionalism and high-quality work. Our home looks great!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-talking-phone_23-2149235740.jpg", imageAlt: "Medium shot woman talking on phone"},
|
|
{
|
|
name: "Robert L.", handle: "@businessexec", testimonial: "Reliable and efficient. OC Roofing provided excellent service for our commercial property, ensuring minimal disruption to our operations.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-goodlooking-man-showing-thumbs-up-praising-good-job-recommending-company-standing_1258-159836.jpg", imageAlt: "Closeup of smiling goodlooking man showing thumbs up praising good job recommending company standing"},
|
|
{
|
|
name: "Amanda G.", handle: "@happyclient", testimonial: "Highly recommend OC Roofing! They were prompt, transparent with pricing, and delivered a beautiful, sturdy roof.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/happy-businesswoman-smiling-looking-camera-successful-confident-grey-haired-manager-sitting-office-room-workplace-business-management-concept_74855-7343.jpg", imageAlt: "Happy businesswoman smiling and looking at camera. Successful confident grey-haired manager sitting in office room. Workplace, business and management concept"},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Get a Free Estimate", href: "/schedule"},
|
|
{
|
|
text: "View Our Work", href: "/work-done"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/full-shot-roofer-working-with-helmet_23-2149343710.jpg"
|
|
imageAlt="Professional roofer working on a residential roof project"
|
|
mediaAnimation="slide-up"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/crazy-man-funny-expression_1194-3203.jpg", alt: "crazy man.funny expression"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/happy-mature-businessman-showing-thumb-up_1262-3024.jpg", alt: "Happy mature businessman showing thumb up"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-pointing-with-finger_1262-3108.jpg", alt: "Smiling senior businessman pointing with finger"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-travel-agency_23-2150433448.jpg", alt: "Front view smiley woman at travel agency"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/stylish-woman-wearing-yellow-bandana_273609-13337.jpg", alt: "Stylish woman wearing yellow bandana"},
|
|
]}
|
|
avatarText="Join 500+ Happy Clients"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureBento
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
title: "Quality Materials", description: "We use only the highest-grade, durable materials for long-lasting protection and aesthetic appeal.", bentoComponent: "media-stack", items: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/3d-geometric-abstract-background_1048-17367.jpg", imageAlt: "Various types of roofing materials"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/worker-wearing-safety-glasses-construction-site_23-2148784066.jpg", imageAlt: "Roofing worker wearing safety gear"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-wearing-protection-helmet_23-2149343634.jpg", imageAlt: "Inspector examining roof shingles"},
|
|
]
|
|
},
|
|
{
|
|
title: "Expert Craftsmanship", description: "Our experienced team is dedicated to precision installation and meticulous attention to detail on every project.", bentoComponent: "reveal-icon", icon: Wrench
|
|
},
|
|
{
|
|
title: "Customer Satisfaction", description: "Your peace of mind is our priority. We ensure clear communication and exceptional service from start to finish.", bentoComponent: "reveal-icon", icon: MessageSquare
|
|
},
|
|
]}
|
|
title="Comprehensive Roofing Services"
|
|
description="From minor repairs to complete installations, we've got your roof covered. Explore our expertise."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1", value: "20+", description: "Years of Experience"},
|
|
{
|
|
id: "m2", value: "500+", description: "Projects Completed"},
|
|
{
|
|
id: "m3", value: "98%", description: "Customer Satisfaction"},
|
|
]}
|
|
title="Our Achievements Speak Volumes"
|
|
description="Years of dedication and countless successful projects define our commitment to excellence."
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
names={[
|
|
"Certified Roofing Professionals", "Licensed & Insured", "Top-Rated Local Service", "Quality Material Partners", "Community Builders", "Safety Compliant", "Client Recommended"]}
|
|
title="Trusted by Homeowners and Businesses Across OC"
|
|
description="Our commitment to quality is recognized by leading industry partners and delighted clients."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1", name: "David M.", role: "Homeowner, Irvine", testimonial: "The team at OC Roofing was fantastic from start to finish. Our new roof looks amazing, and the process was smooth and efficient. Highly recommend!", imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-attractive-woman-showing-thumb-up-outdoors_1262-12526.jpg", imageAlt: "David M."},
|
|
{
|
|
id: "t2", name: "Emily R.", role: "Property Manager, Newport Beach", testimonial: "We've used OC Roofing for several commercial projects, and they consistently deliver quality work on time and within budget. True professionals.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-smiling-brunette-asian-woman-sitting-with-graphic-pen-looking-happy-drawing_1258-199033.jpg", imageAlt: "Emily R."},
|
|
{
|
|
id: "t3", name: "Michael S.", role: "Business Owner, Santa Ana", testimonial: "After a storm, OC Roofing was quick to respond and repair our damaged roof. Their expertise and prompt service saved us a lot of trouble.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-making-ok-sign_1368-6336.jpg", imageAlt: "Michael S."},
|
|
{
|
|
id: "t4", name: "Jessica L.", role: "Homeowner, Laguna Niguel", testimonial: "OC Roofing replaced our old, leaky roof. The crew was respectful and tidy, and the finished product exceeded our expectations. Fantastic work!", imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-posing-new-flat_23-2147758899.jpg", imageAlt: "Jessica L."},
|
|
{
|
|
id: "t5", name: "Robert K.", role: "Retired, Mission Viejo", testimonial: "I was impressed by the detailed estimate and transparent communication. The job was done perfectly, and I feel much safer under my new roof.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-couple-looking-tablet_23-2148214631.jpg", imageAlt: "Robert K."},
|
|
]}
|
|
title="Hear From Our Happy Clients"
|
|
description="Discover why OC Roofing Construction Corp. is the preferred choice for reliable roofing services."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact-cta" data-section="contact-cta">
|
|
<ContactCTA
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "plain"}}
|
|
tag="Ready for a New Roof?"
|
|
title="Get Your Free Roofing Estimate Today"
|
|
description="Contact us now for a comprehensive assessment and a transparent quote. We're here to help you protect your biggest investment."
|
|
buttons={[
|
|
{
|
|
text: "Schedule Your Free Estimate", href: "/schedule"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
logoText="OC Roofing Construction Corp."
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{
|
|
label: "Residential Roofing", href: "/work-done#residential"},
|
|
{
|
|
label: "Commercial Roofing", href: "/work-done#commercial"},
|
|
{
|
|
label: "Roof Repair", href: "/work-done#repair"},
|
|
{
|
|
label: "New Installations", href: "/work-done#new-installations"},
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "Our Work", href: "/work-done"},
|
|
{
|
|
label: "Reviews", href: "/reviews"},
|
|
{
|
|
label: "About Us", href: "#about"},
|
|
{
|
|
label: "Contact", href: "/contact"},
|
|
],
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{
|
|
label: "Schedule Estimate", href: "/schedule"},
|
|
{
|
|
label: "jf.roofing@yahoo.com", href: "mailto:jf.roofing@yahoo.com"},
|
|
{
|
|
label: "714-713-2336", href: "tel:7147132336"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 OC Roofing Construction Corp. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|