441 lines
20 KiB
TypeScript
441 lines
20 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
|
import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
|
|
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
|
|
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
|
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
|
|
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
|
|
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
|
import BlogCardThree from "@/components/sections/blog/BlogCardThree";
|
|
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
|
import { Sparkles, Award, Wrench, CheckCircle, Star, HelpCircle, Image as ImageIcon, Camera, FileText, Calendar } from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
const navItems = [
|
|
{ name: "Home", id: "/" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Our Process", id: "process" },
|
|
{ name: "Projects", id: "projects" },
|
|
{ name: "Reviews", id: "reviews" },
|
|
{ name: "About", id: "about" },
|
|
];
|
|
|
|
const footerColumns = [
|
|
{
|
|
title: "Services",
|
|
items: [
|
|
{ label: "Residential Roofing", href: "#services" },
|
|
{ label: "Roof Repairs", href: "#services" },
|
|
{ label: "Storm Damage", href: "#services" },
|
|
{ label: "Commercial Roofing", href: "#services" },
|
|
{ label: "Property Manager Program", href: "#property-manager" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{ label: "About Us", href: "/about" },
|
|
{ label: "Our Process", href: "#process" },
|
|
{ label: "Projects", href: "#projects" },
|
|
{ label: "Reviews", href: "#reviews" },
|
|
{ label: "Contact", href: "/contact" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal",
|
|
items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Warranty Information", href: "#" },
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="compact"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="floatingGradient"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={navItems}
|
|
brandName="Five Star Roofing"
|
|
button={{
|
|
text: "Get Free Inspection",
|
|
href: "#contact",
|
|
}}
|
|
buttonClassName="px-4 py-2 rounded-full font-semibold hover:shadow-lg transition-all"
|
|
buttonTextClassName="font-bold"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
title="Five-Star Roofing, Without the Stress"
|
|
description="I treat you like a person, not a job. You get a clean, professional process from inspection to final walkthrough—so you can relax knowing it's handled."
|
|
background={{ variant: "plain" }}
|
|
tag="Premium Roofing Service"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Get a Free Roof Inspection", href: "#contact" },
|
|
{ text: "Call Now", href: "tel:+1234567890" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/long-shot-men-working-together-roof_23-2149343674.jpg?_wi=1",
|
|
imageAlt: "Professional roofing crew on site",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/specialist-technician-professional-engineer-with-laptop-tablet-maintenance-checking-installing-solar-roof-panel-factory-rooftop-sunlight-engineers-team-survey-check-solar-panel-roof_609648-2202.jpg?_wi=1",
|
|
imageAlt: "Detailed roof inspection process",
|
|
},
|
|
]}
|
|
mediaAnimation="blur-reveal"
|
|
rating={5}
|
|
ratingText="5.0 Rating | Fast Response | Clean Sites | Photo Updates"
|
|
className="min-h-screen"
|
|
titleClassName="text-5xl md:text-7xl"
|
|
descriptionClassName="text-lg md:text-xl max-w-2xl"
|
|
ratingClassName="flex items-center gap-2"
|
|
/>
|
|
</div>
|
|
|
|
<div id="values" data-section="values">
|
|
<FeatureCardOne
|
|
title="Why Homeowners & Property Managers Stay With Us"
|
|
description="Three core principles that define Five Star Roofing's commitment to excellence and customer care"
|
|
tag="Our Foundation"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
title: "Human-First Service",
|
|
description: "You're not another ticket—you're taken care of. We treat every client with the respect and attention they deserve.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/people-working-call-center_23-2149288167.jpg?_wi=1",
|
|
imageAlt: "Professional customer service team",
|
|
},
|
|
{
|
|
title: "Organized & Professional Systems",
|
|
description: "Clear timelines, clean communication, no chaos. We manage every detail so you don't have to worry.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/business-people-meeting_53876-25158.jpg?_wi=1",
|
|
imageAlt: "Business team meeting and planning",
|
|
},
|
|
{
|
|
title: "Problems Found Before They Grow",
|
|
description: "We catch issues you didn't even know existed. Preventative care saves you money and stress down the road.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-female-engineer-hand-controling-robot-arm-welding-machine-industrial-40-modern-factory-backgroundsmart-female-engineer-inspect-quality-control-factory_609648-856.jpg?_wi=1",
|
|
imageAlt: "Quality control and inspection process",
|
|
},
|
|
]}
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
titleClassName="text-4xl md:text-5xl"
|
|
descriptionClassName="text-lg text-gray-600"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<ProductCardTwo
|
|
title="Our Services"
|
|
description="Comprehensive roofing solutions for every need"
|
|
tag="Premium Services"
|
|
tagIcon={Wrench}
|
|
tagAnimation="slide-up"
|
|
products={[
|
|
{
|
|
id: "1",
|
|
brand: "Residential",
|
|
name: "Roof Replacement & Upgrades",
|
|
price: "Full Assessment Required",
|
|
rating: 5,
|
|
reviewCount: "200+",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/closeup-roof-house-made-wooden-tiles_169016-24747.jpg?_wi=1",
|
|
imageAlt: "Residential roof replacement project",
|
|
},
|
|
{
|
|
id: "2",
|
|
brand: "Repairs",
|
|
name: "Repairs & Leak Detection",
|
|
price: "Fast, Accurate Service",
|
|
rating: 5,
|
|
reviewCount: "180+",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/male-worker-operating-machinery-factory_107420-96043.jpg?_wi=1",
|
|
imageAlt: "Leak detection and repair process",
|
|
},
|
|
{
|
|
id: "3",
|
|
brand: "Insurance Support",
|
|
name: "Storm Damage & Insurance Claims",
|
|
price: "Complete Documentation",
|
|
rating: 5,
|
|
reviewCount: "150+",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/view-abandoned-decaying-house-nature_23-2150166560.jpg?_wi=1",
|
|
imageAlt: "Storm damage assessment and documentation",
|
|
},
|
|
{
|
|
id: "4",
|
|
brand: "Commercial",
|
|
name: "Commercial Roofing Solutions",
|
|
price: "Low-Disruption Service",
|
|
rating: 5,
|
|
reviewCount: "120+",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/agricultural-silo_146671-19121.jpg?_wi=1",
|
|
imageAlt: "Commercial roofing project",
|
|
},
|
|
{
|
|
id: "5",
|
|
brand: "Property Mgmt",
|
|
name: "Property Manager Program",
|
|
price: "Multi-Property Support",
|
|
rating: 5,
|
|
reviewCount: "95+",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/indoor-objects-company-background-papers_1304-2624.jpg?_wi=1",
|
|
imageAlt: "Property manager scheduling and reporting",
|
|
},
|
|
]}
|
|
textboxLayout="default"
|
|
gridVariant="two-columns-alternating-heights"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
titleClassName="text-4xl md:text-5xl"
|
|
descriptionClassName="text-lg text-gray-600"
|
|
/>
|
|
</div>
|
|
|
|
<div id="process" data-section="process">
|
|
<MetricCardThree
|
|
title="The Five Star Process"
|
|
description="Your journey from worry to complete peace of mind in five simple steps"
|
|
tag="Our Proven System"
|
|
tagIcon={CheckCircle}
|
|
tagAnimation="slide-up"
|
|
metrics={[
|
|
{ id: "1", icon: Camera, title: "Inspection & Photos", value: "Same-Day Options" },
|
|
{ id: "2", icon: FileText, title: "Clear Plan & Quote", value: "No Surprises" },
|
|
{ id: "3", icon: Calendar, title: "Schedule & Prep", value: "You Know What's Next" },
|
|
{ id: "4", icon: Wrench, title: "Install/Repair", value: "Clean & Professional" },
|
|
{ id: "5", icon: CheckCircle, title: "Final Walkthrough", value: "Warranty Included" },
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
titleClassName="text-4xl md:text-5xl"
|
|
descriptionClassName="text-lg text-gray-600"
|
|
/>
|
|
</div>
|
|
|
|
<div id="reviews" data-section="reviews">
|
|
<TestimonialCardOne
|
|
title="What Our Customers Say"
|
|
description="Real feedback from homeowners and property managers who trust Five Star Roofing"
|
|
tag="Customer Testimonials"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Sarah Mitchell",
|
|
role: "Homeowner",
|
|
company: "Residential Client",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg?_wi=1",
|
|
imageAlt: "Sarah Mitchell testimonial",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "James Rodriguez",
|
|
role: "Property Manager",
|
|
company: "Multi-Unit Management",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg?_wi=1",
|
|
imageAlt: "James Rodriguez testimonial",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Emily Chen",
|
|
role: "Business Owner",
|
|
company: "Commercial Building",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg?_wi=2",
|
|
imageAlt: "Emily Chen testimonial",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Michael Thompson",
|
|
role: "Homeowner",
|
|
company: "Insurance Claim Support",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg?_wi=2",
|
|
imageAlt: "Michael Thompson testimonial",
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "Lisa Anderson",
|
|
role: "Property Manager",
|
|
company: "Portfolio of 50+ Units",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg?_wi=3",
|
|
imageAlt: "Lisa Anderson testimonial",
|
|
},
|
|
{
|
|
id: "6",
|
|
name: "David Park",
|
|
role: "Homeowner",
|
|
company: "Storm Recovery",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg?_wi=3",
|
|
imageAlt: "David Park testimonial",
|
|
},
|
|
]}
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
titleClassName="text-4xl md:text-5xl"
|
|
descriptionClassName="text-lg text-gray-600"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
title="Managing Multiple Properties? We're Built for That."
|
|
description={[
|
|
"Our Property Manager Program is designed specifically for busy professionals managing multiple units. We handle everything—from priority scheduling to comprehensive photo documentation and detailed reporting.",
|
|
"Priority scheduling across your entire portfolio. Photo documentation and visual reporting for every project. Preventative inspections on a regular cadence. Simple invoicing with consistent communication and transparent pricing. No surprises, no complications.",
|
|
"Join dozens of property managers who've streamlined their roofing operations with Five Star.",
|
|
]}
|
|
buttons={[
|
|
{ text: "Request a Property Manager Quote", href: "/contact" },
|
|
]}
|
|
showBorder={true}
|
|
useInvertedBackground={false}
|
|
titleClassName="text-3xl md:text-4xl"
|
|
descriptionClassName="text-base md:text-lg leading-relaxed"
|
|
/>
|
|
</div>
|
|
|
|
<div id="projects" data-section="projects">
|
|
<BlogCardThree
|
|
title="Project Gallery"
|
|
description="Real projects completed for satisfied homeowners and businesses"
|
|
tag="Our Work"
|
|
tagIcon={ImageIcon}
|
|
tagAnimation="slide-up"
|
|
blogs={[
|
|
{
|
|
id: "1",
|
|
category: "Leak Repair",
|
|
title: "Leak Repair & Flashing Correction",
|
|
excerpt: "Precision flashing installation that stopped a persistent leak and restored peace of mind.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/old-rusty-metallic-surface_23-2148846057.jpg",
|
|
imageAlt: "Leak repair project",
|
|
authorName: "Five Star Team",
|
|
authorAvatar: "http://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg",
|
|
date: "2025-01-15",
|
|
},
|
|
{
|
|
id: "2",
|
|
category: "Replacement",
|
|
title: "Full Roof Replacement with Architectural Shingles",
|
|
excerpt: "Complete roof replacement with premium materials and architectural shingles for superior durability.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-walking-roof_1321-1041.jpg",
|
|
imageAlt: "Full roof replacement project",
|
|
authorName: "Five Star Team",
|
|
authorAvatar: "http://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg",
|
|
date: "2025-01-10",
|
|
},
|
|
{
|
|
id: "3",
|
|
category: "Storm Damage",
|
|
title: "Storm Damage Assessment & Insurance Documentation",
|
|
excerpt: "Professional assessment and thorough documentation to support your insurance claim.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-working-alternative-energy_23-2149311503.jpg?_wi=1",
|
|
imageAlt: "Storm damage assessment project",
|
|
authorName: "Five Star Team",
|
|
authorAvatar: "http://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg",
|
|
date: "2025-01-05",
|
|
},
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
titleClassName="text-4xl md:text-5xl"
|
|
descriptionClassName="text-lg text-gray-600"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<BlogCardThree
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about our roofing services"
|
|
tag="Support"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
blogs={[
|
|
{
|
|
id: "1",
|
|
category: "Service",
|
|
title: "How fast can you come out for an inspection?",
|
|
excerpt: "We offer same-day and next-day inspection options for most emergencies. For routine inspections, we typically schedule within 3-5 business days. Call us directly for urgent situations.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-support-customer-woman-talking-into-headset-microphone-with-call-center-customer-while-working-startup-company-office-caucasian-female-consultant-providing-telemarketing-service_482257-28282.jpg?_wi=1",
|
|
imageAlt: "Customer support representative",
|
|
authorName: "Five Star Team",
|
|
authorAvatar: "http://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg",
|
|
date: "FAQ",
|
|
},
|
|
{
|
|
id: "2",
|
|
category: "Documentation",
|
|
title: "Do you provide photos of the issues?",
|
|
excerpt: "Absolutely. We provide comprehensive photo documentation of all findings during inspection. For every project, we take before, during, and after photos so you can see exactly what was done.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-support-customer-woman-talking-into-headset-microphone-with-call-center-customer-while-working-startup-company-office-caucasian-female-consultant-providing-telemarketing-service_482257-28282.jpg?_wi=2",
|
|
imageAlt: "Photo documentation service",
|
|
authorName: "Five Star Team",
|
|
authorAvatar: "http://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg",
|
|
date: "FAQ",
|
|
},
|
|
{
|
|
id: "3",
|
|
category: "Service",
|
|
title: "What does the inspection include?",
|
|
excerpt: "Our thorough inspection covers structural integrity, flashing condition, drainage systems, existing damage, and potential issues. We'll give you a detailed report with photos and clear recommendations.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-support-customer-woman-talking-into-headset-microphone-with-call-center-customer-while-working-startup-company-office-caucasian-female-consultant-providing-telemarketing-service_482257-28282.jpg?_wi=3",
|
|
imageAlt: "Inspection service overview",
|
|
authorName: "Five Star Team",
|
|
authorAvatar: "http://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg",
|
|
date: "FAQ",
|
|
},
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
titleClassName="text-4xl md:text-5xl"
|
|
descriptionClassName="text-lg text-gray-600"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={footerColumns}
|
|
copyrightText="© 2025 Five Star Roofing. All rights reserved. Licensed | Insured | Bonded."
|
|
ariaLabel="Site footer"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |