Merge version_2 into main #2
217
src/app/page.tsx
217
src/app/page.tsx
@@ -12,7 +12,7 @@ import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||
import { Droplets, Home, PlusCircle, RefreshCw, Search, Sun, Tool } from "lucide-react";
|
||||
import { Droplets, Home, PlusCircle, RefreshCw, Search, Sun } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -33,29 +33,17 @@ export default function LandingPage() {
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
name: "Services", id: "services"},
|
||||
{
|
||||
name: "Solutions",
|
||||
id: "solutions",
|
||||
},
|
||||
name: "Solutions", id: "solutions"},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
name: "About", id: "about"},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
name: "Testimonials", id: "testimonials"},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
name: "FAQ", id: "faq"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="RoofPro"
|
||||
/>
|
||||
@@ -64,22 +52,17 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
variant: "radial-gradient"}}
|
||||
imagePosition="right"
|
||||
title="Your Trusted Partner for Quality Roofing"
|
||||
description="Protect your home with durable, high-quality roofing solutions. We offer expert installations, repairs, and comprehensive inspections to ensure your peace of mind."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get a Free Inspection",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Get a Free Inspection", href: "#contact"},
|
||||
{
|
||||
text: "Explore Our Services",
|
||||
href: "#services",
|
||||
},
|
||||
text: "Explore Our Services", href: "#services"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/cute-yellow-rural-house-with-wooden-stairs-countryside_176420-7157.jpg"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSINHT5EodZCgYAu69TZIJHOCJ/uploaded-1774476142679-rrdctakz.png"
|
||||
imageAlt="Modern house with a newly installed roof under a clear sky"
|
||||
mediaAnimation="opacity"
|
||||
fixedMediaHeight={true}
|
||||
@@ -93,35 +76,23 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Tool,
|
||||
title: "Roof Repairs",
|
||||
description: "Prompt and effective repairs for leaks, storm damage, and wear-and-tear to extend your roof's lifespan.",
|
||||
},
|
||||
icon: RefreshCw,
|
||||
title: "Roof Repairs", description: "Prompt and effective repairs for leaks, storm damage, and wear-and-tear to extend your roof's lifespan."},
|
||||
{
|
||||
icon: PlusCircle,
|
||||
title: "New Roof Installation",
|
||||
description: "Professional installation of high-quality roofing systems, ensuring durability and aesthetic appeal for your new build.",
|
||||
},
|
||||
title: "New Roof Installation", description: "Professional installation of high-quality roofing systems, ensuring durability and aesthetic appeal for your new build."},
|
||||
{
|
||||
icon: RefreshCw,
|
||||
title: "Roof Replacement",
|
||||
description: "Seamless old roof removal and new roof installation with minimal disruption and superior materials.",
|
||||
},
|
||||
title: "Roof Replacement", description: "Seamless old roof removal and new roof installation with minimal disruption and superior materials."},
|
||||
{
|
||||
icon: Search,
|
||||
title: "Free Roof Inspections",
|
||||
description: "Thorough assessments to identify potential issues and provide honest, detailed recommendations at no cost.",
|
||||
},
|
||||
title: "Free Roof Inspections", description: "Thorough assessments to identify potential issues and provide honest, detailed recommendations at no cost."},
|
||||
{
|
||||
icon: Droplets,
|
||||
title: "Gutter Services",
|
||||
description: "Installation, repair, and cleaning of gutters to ensure proper water drainage and protect your foundation.",
|
||||
},
|
||||
title: "Gutter Services", description: "Installation, repair, and cleaning of gutters to ensure proper water drainage and protect your foundation."},
|
||||
{
|
||||
icon: Sun,
|
||||
title: "Storm Damage Repair",
|
||||
description: "Emergency services and expert repairs for roofs damaged by severe weather, including insurance claim assistance.",
|
||||
},
|
||||
title: "Storm Damage Repair", description: "Emergency services and expert repairs for roofs damaged by severe weather, including insurance claim assistance."},
|
||||
]}
|
||||
title="Our Comprehensive Roofing Services"
|
||||
description="From minor repairs to full replacements, our certified team delivers exceptional craftsmanship and reliable solutions tailored to your needs."
|
||||
@@ -136,26 +107,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "asphalt-shingles",
|
||||
name: "Asphalt Shingles",
|
||||
price: "Starting from $3/sq ft",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-roof-shingles-houses-buildings-old-town_181624-11885.jpg",
|
||||
imageAlt: "Close up of asphalt shingles",
|
||||
},
|
||||
id: "asphalt-shingles", name: "Asphalt Shingles", price: "Starting from $3/sq ft", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-roof-shingles-houses-buildings-old-town_181624-11885.jpg", imageAlt: "Close up of asphalt shingles"},
|
||||
{
|
||||
id: "metal-roofing",
|
||||
name: "Metal Roofing",
|
||||
price: "Starting from $8/sq ft",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-working-roof_23-2149343702.jpg",
|
||||
imageAlt: "Modern metal roof on a residential house",
|
||||
},
|
||||
id: "metal-roofing", name: "Metal Roofing", price: "Starting from $8/sq ft", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-working-roof_23-2149343702.jpg", imageAlt: "Modern metal roof on a residential house"},
|
||||
{
|
||||
id: "tile-roofing",
|
||||
name: "Tile Roofing",
|
||||
price: "Starting from $10/sq ft",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-design-roof-tile-pattern-design_23-2149262464.jpg",
|
||||
imageAlt: "Terracotta tile roof on a Mediterranean style house",
|
||||
},
|
||||
id: "tile-roofing", name: "Tile Roofing", price: "Starting from $10/sq ft", imageSrc: "http://img.b2bpic.net/free-vector/flat-design-roof-tile-pattern-design_23-2149262464.jpg", imageAlt: "Terracotta tile roof on a Mediterranean style house"},
|
||||
]}
|
||||
title="Our Premium Roofing Solutions"
|
||||
description="Explore our wide range of durable and aesthetically pleasing roofing materials designed to suit any home style and budget."
|
||||
@@ -178,37 +134,18 @@ export default function LandingPage() {
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah J.",
|
||||
role: "Homeowner",
|
||||
testimonial: "RoofPro did an outstanding job replacing our old roof. The team was professional, efficient, and the new roof looks fantastic!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg",
|
||||
},
|
||||
id: "1", name: "Sarah J.", role: "Homeowner", testimonial: "RoofPro did an outstanding job replacing our old roof. The team was professional, efficient, and the new roof looks fantastic!", imageSrc: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael D.",
|
||||
role: "Property Manager",
|
||||
testimonial: "Their inspection service was incredibly thorough, identifying issues before they became major problems. Highly recommend their expertise.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-smiling-blonde-russian-girl-puts-hands-chest-looking-side-isolated-orange-background-with-copy-space_141793-65450.jpg",
|
||||
},
|
||||
id: "2", name: "Michael D.", role: "Property Manager", testimonial: "Their inspection service was incredibly thorough, identifying issues before they became major problems. Highly recommend their expertise.", imageSrc: "http://img.b2bpic.net/free-photo/young-smiling-blonde-russian-girl-puts-hands-chest-looking-side-isolated-orange-background-with-copy-space_141793-65450.jpg"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily R.",
|
||||
role: "Business Owner",
|
||||
testimonial: "Quick and effective storm damage repair. RoofPro handled everything, making the process stress-free and keeping our business protected.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-doing-okay_1187-4049.jpg",
|
||||
},
|
||||
id: "3", name: "Emily R.", role: "Business Owner", testimonial: "Quick and effective storm damage repair. RoofPro handled everything, making the process stress-free and keeping our business protected.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-doing-okay_1187-4049.jpg"},
|
||||
{
|
||||
id: "4",
|
||||
name: "David K.",
|
||||
role: "Residential Client",
|
||||
testimonial: "From initial quote to final cleanup, the experience was excellent. Our new roof is beautiful and adds great value to our home.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/background-pretty-young-woman-success_1303-531.jpg",
|
||||
},
|
||||
id: "4", name: "David K.", role: "Residential Client", testimonial: "From initial quote to final cleanup, the experience was excellent. Our new roof is beautiful and adds great value to our home.", imageSrc: "http://img.b2bpic.net/free-photo/background-pretty-young-woman-success_1303-531.jpg"},
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Don't just take our word for it—see what homeowners and businesses in your area are saying about our reliable roofing services."
|
||||
@@ -217,17 +154,11 @@ export default function LandingPage() {
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
names={["Partner 1", "Partner 2", "Partner 3", "Partner 4", "Partner 5", "Partner 6", "Partner 7"]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
logos={[
|
||||
"http://img.b2bpic.net/free-vector/flat-labour-day-label-collection_23-2148898963.jpg",
|
||||
"http://img.b2bpic.net/free-vector/flat-design-logo-templates-pack_23-2148880939.jpg",
|
||||
"http://img.b2bpic.net/free-psd/botanical-garden-facebook-template_23-2150258224.jpg",
|
||||
"http://img.b2bpic.net/free-vector/gradient-accounting-logo-template_23-2148854302.jpg",
|
||||
"http://img.b2bpic.net/free-vector/labor-day-badges-collection-flat-style_23-2147864471.jpg",
|
||||
"http://img.b2bpic.net/free-vector/hand-drawn-industry-4-0-logo-design_23-2151323293.jpg",
|
||||
"http://img.b2bpic.net/free-psd/modern-architecture-design-template_23-2149566956.jpg",
|
||||
]}
|
||||
"http://img.b2bpic.net/free-vector/flat-labour-day-label-collection_23-2148898963.jpg", "http://img.b2bpic.net/free-vector/flat-design-logo-templates-pack_23-2148880939.jpg", "http://img.b2bpic.net/free-psd/botanical-garden-facebook-template_23-2150258224.jpg", "http://img.b2bpic.net/free-vector/gradient-accounting-logo-template_23-2148854302.jpg", "http://img.b2bpic.net/free-vector/labor-day-badges-collection-flat-style_23-2147864471.jpg", "http://img.b2bpic.net/free-vector/hand-drawn-industry-4-0-logo-design_23-2151323293.jpg", "http://img.b2bpic.net/free-psd/modern-architecture-design-template_23-2149566956.jpg"]}
|
||||
title="Trusted by Homeowners & Partners"
|
||||
description="We're proud to be a preferred roofing contractor for leading material suppliers, builders, and local communities."
|
||||
/>
|
||||
@@ -238,25 +169,13 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How often should I have my roof inspected?",
|
||||
content: "We recommend a professional roof inspection at least once every 1-3 years, and always after a major storm or severe weather event.",
|
||||
},
|
||||
id: "1", title: "How often should I have my roof inspected?", content: "We recommend a professional roof inspection at least once every 1-3 years, and always after a major storm or severe weather event."},
|
||||
{
|
||||
id: "2",
|
||||
title: "What types of roofing materials do you work with?",
|
||||
content: "We specialize in a variety of materials including asphalt shingles, metal roofing, tile, and flat roofs. We'll help you choose the best option for your home.",
|
||||
},
|
||||
id: "2", title: "What types of roofing materials do you work with?", content: "We specialize in a variety of materials including asphalt shingles, metal roofing, tile, and flat roofs. We'll help you choose the best option for your home."},
|
||||
{
|
||||
id: "3",
|
||||
title: "Do you offer warranties on your work?",
|
||||
content: "Yes, we stand by the quality of our craftsmanship and materials. All new installations and major repairs come with comprehensive warranties, specific details available upon consultation.",
|
||||
},
|
||||
id: "3", title: "Do you offer warranties on our work?", content: "Yes, we stand by the quality of our craftsmanship and materials. All new installations and major repairs come with comprehensive warranties, specific details available upon consultation."},
|
||||
{
|
||||
id: "4",
|
||||
title: "How long does a typical roof replacement take?",
|
||||
content: "The duration of a roof replacement depends on the size and complexity of your roof. Most residential projects are completed within 1-3 days, weather permitting.",
|
||||
},
|
||||
id: "4", title: "How long does a typical roof replacement take?", content: "The duration of a roof replacement depends on the size and complexity of your roof. Most residential projects are completed within 1-3 days, weather permitting."},
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Find answers to common inquiries about our roofing services, materials, and process. If you don't see your question, feel free to reach out!"
|
||||
@@ -272,27 +191,16 @@ export default function LandingPage() {
|
||||
description="Ready for a durable, beautiful roof? Contact us for a complimentary, no-obligation inspection and a detailed estimate. We're here to help!"
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
name: "name", type: "text", placeholder: "Your Name", required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
name: "email", type: "email", placeholder: "Your Email", required: true,
|
||||
},
|
||||
{
|
||||
name: "phone",
|
||||
type: "tel",
|
||||
placeholder: "Phone Number (Optional)",
|
||||
},
|
||||
name: "phone", type: "tel", placeholder: "Phone Number (Optional)"},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Tell us about your roofing needs or questions...",
|
||||
rows: 4,
|
||||
name: "message", placeholder: "Tell us about your roofing needs or questions...", rows: 4,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/engineer-writing-condenser-values_482257-90848.jpg"
|
||||
imageAlt="Roofing contractor using a tablet to inspect a roof"
|
||||
@@ -308,62 +216,37 @@ export default function LandingPage() {
|
||||
imageAlt="Stylized modern roofline against a sky background"
|
||||
columns={[
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
title: "Services", items: [
|
||||
{
|
||||
label: "Roof Repairs",
|
||||
href: "#services",
|
||||
},
|
||||
label: "Roof Repairs", href: "#services"},
|
||||
{
|
||||
label: "Installations",
|
||||
href: "#services",
|
||||
},
|
||||
label: "Installations", href: "#services"},
|
||||
{
|
||||
label: "Inspections",
|
||||
href: "#services",
|
||||
},
|
||||
label: "Inspections", href: "#services"},
|
||||
{
|
||||
label: "Gutter Services",
|
||||
href: "#services",
|
||||
},
|
||||
label: "Gutter Services", href: "#services"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
label: "About Us", href: "#about"},
|
||||
{
|
||||
label: "Testimonials",
|
||||
href: "#testimonials",
|
||||
},
|
||||
label: "Testimonials", href: "#testimonials"},
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
label: "FAQ", href: "#faq"},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
label: "Contact", href: "#contact"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect",
|
||||
items: [
|
||||
title: "Connect", items: [
|
||||
{
|
||||
label: "Facebook",
|
||||
href: "#",
|
||||
},
|
||||
label: "Facebook", href: "#"},
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
label: "Instagram", href: "#"},
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "#",
|
||||
},
|
||||
label: "LinkedIn", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
@@ -13,12 +13,12 @@
|
||||
--background: #ffffff;
|
||||
--card: #f9f9f9;
|
||||
--foreground: #120a00e6;
|
||||
--primary-cta: #E34400;
|
||||
--primary-cta: #FF7B05;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #f9f9f9;
|
||||
--secondary-cta-text: #120a00e6;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #E34400;
|
||||
--background-accent: #FF7B05;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user