Merge version_1 into main #2
328
src/app/page.tsx
328
src/app/page.tsx
@@ -12,7 +12,7 @@ import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaA
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import { Award, Building2, Clock, Diamond, Droplets, FileText, Search, ShieldCheck, Tool, Users, Wrench, Zap } from "lucide-react";
|
||||
import { Award, Building2, Clock, Diamond, Droplets, FileText, Search, ShieldCheck, Users, Wrench, Zap } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -32,26 +32,11 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Projects",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Projects", id: "products" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="JM Roofing"
|
||||
/>
|
||||
@@ -59,108 +44,35 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Premium Roofing Built on 3 Generations of Trust"
|
||||
description="Serving homes and businesses with unmatched craftsmanship and reliability. Experience the legacy of JM Roofing."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Abdela Sharif",
|
||||
handle: "@customer",
|
||||
testimonial: "مشاء الله تبارك الله الله",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-content-elegant-man_23-2147689111.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
name: "Ali Amin",
|
||||
handle: "@customer",
|
||||
testimonial: "مكان رائع",
|
||||
rating: 4,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-girl-shows-okay-ok-signs-look-satisfied-recommend-good-company-perfect-quality-praise-good-job-well-done-standing-pleased-against-white-background_176420-54380.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
name: "Mehatish",
|
||||
handle: "@customer",
|
||||
testimonial: "ماركه مسجله في بلدي",
|
||||
rating: 4,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-stands-with-crossed-arms-isolated-pink-wall-with-copy-space_141793-118510.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
name: "Khaled F.",
|
||||
handle: "@customer",
|
||||
testimonial: "خدمة ممتازة واحترافية",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-successful-businessman-smiling-holding-tablet-office_176420-918.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
name: "Sara H.",
|
||||
handle: "@customer",
|
||||
testimonial: "سعدت جداً بالنتيجة النهائية",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-street-using-mobile-phone_657883-744.jpg?_wi=1",
|
||||
},
|
||||
{ name: "Abdela Sharif", handle: "@customer", testimonial: "مشاء الله تبارك الله الله", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-content-elegant-man_23-2147689111.jpg" },
|
||||
{ name: "Ali Amin", handle: "@customer", testimonial: "مكان رائع", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-girl-shows-okay-ok-signs-look-satisfied-recommend-good-company-perfect-quality-praise-good-job-well-done-standing-pleased-against-white-background_176420-54380.jpg" },
|
||||
{ name: "Mehatish", handle: "@customer", testimonial: "ماركه مسجله في بلدي", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-stands-with-crossed-arms-isolated-pink-wall-with-copy-space_141793-118510.jpg" },
|
||||
{ name: "Khaled F.", handle: "@customer", testimonial: "خدمة ممتازة واحترافية", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-successful-businessman-smiling-holding-tablet-office_176420-918.jpg" },
|
||||
{ name: "Sara H.", handle: "@customer", testimonial: "سعدت جداً بالنتيجة النهائية", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-street-using-mobile-phone_657883-744.jpg" },
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Free Quote",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "Call Now",
|
||||
href: "tel:+9670000000",
|
||||
},
|
||||
{ text: "Get Free Quote", href: "#contact" },
|
||||
{ text: "Call Now", href: "tel:+9670000000" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/glass-pyramid_1122-430.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-handsome-business-man_23-2148479507.jpg",
|
||||
alt: "Abdela Sharif",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/handsome-man-posing-outdoors-with-copy-space_23-2148803560.jpg",
|
||||
alt: "Ali Amin",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiley-man-wearing-headphones_23-2148718046.jpg",
|
||||
alt: "Mehatish",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-indoors_23-2150234188.jpg",
|
||||
alt: "Khaled F.",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-woman-trendy-stylish-glasses-bright-orange-oversized-jacket-white-background_343596-8172.jpg",
|
||||
alt: "Sara H.",
|
||||
},
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-handsome-business-man_23-2148479507.jpg", alt: "Abdela Sharif" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/handsome-man-posing-outdoors-with-copy-space_23-2148803560.jpg", alt: "Ali Amin" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/smiley-man-wearing-headphones_23-2148718046.jpg", alt: "Mehatish" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-indoors_23-2150234188.jpg", alt: "Khaled F." },
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-woman-trendy-stylish-glasses-bright-orange-oversized-jacket-white-background_343596-8172.jpg", alt: "Sara H." },
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "100% Guaranteed",
|
||||
icon: ShieldCheck,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Premium Materials",
|
||||
icon: Diamond,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Expert Team",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Licensed & Insured",
|
||||
icon: FileText,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Fast Turnaround",
|
||||
icon: Clock,
|
||||
},
|
||||
{ type: "text-icon", text: "100% Guaranteed", icon: ShieldCheck },
|
||||
{ type: "text-icon", text: "Premium Materials", icon: Diamond },
|
||||
{ type: "text-icon", text: "Expert Team", icon: Users },
|
||||
{ type: "text-icon", text: "Licensed & Insured", icon: FileText },
|
||||
{ type: "text-icon", text: "Fast Turnaround", icon: Clock },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -171,14 +83,8 @@ export default function LandingPage() {
|
||||
title="A Legacy of Craftsmanship"
|
||||
description="JM Roofing is a family-owned business built on 3 generations of experience. From traditional craftsmanship to modern solutions, we combine heritage with innovation."
|
||||
metrics={[
|
||||
{
|
||||
value: "15+",
|
||||
title: "Years Experience",
|
||||
},
|
||||
{
|
||||
value: "500+",
|
||||
title: "Projects Completed",
|
||||
},
|
||||
{ value: "15+", title: "Years Experience" },
|
||||
{ value: "500+", title: "Projects Completed" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/front-view-carpenter-man-sitting-smiling_23-2148748790.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
@@ -192,31 +98,11 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Roof Installation",
|
||||
description: "Professional installation using top-tier materials for lasting protection.",
|
||||
icon: Tool,
|
||||
},
|
||||
{
|
||||
title: "Roof Repair",
|
||||
description: "Quick, reliable fixes for leaks, cracks, and storm damage.",
|
||||
icon: Wrench,
|
||||
},
|
||||
{
|
||||
title: "Waterproofing",
|
||||
description: "Expert sealing services to prevent water ingress and structural damage.",
|
||||
icon: Droplets,
|
||||
},
|
||||
{
|
||||
title: "Inspection",
|
||||
description: "Detailed diagnostic reports for your peace of mind.",
|
||||
icon: Search,
|
||||
},
|
||||
{
|
||||
title: "Commercial",
|
||||
description: "Robust and efficient roofing services for business properties.",
|
||||
icon: Building2,
|
||||
},
|
||||
{ title: "Roof Installation", description: "Professional installation using top-tier materials for lasting protection.", icon: Wrench },
|
||||
{ title: "Roof Repair", description: "Quick, reliable fixes for leaks, cracks, and storm damage.", icon: Wrench },
|
||||
{ title: "Waterproofing", description: "Expert sealing services to prevent water ingress and structural damage.", icon: Droplets },
|
||||
{ title: "Inspection", description: "Detailed diagnostic reports for your peace of mind.", icon: Search },
|
||||
{ title: "Commercial", description: "Robust and efficient roofing services for business properties.", icon: Building2 },
|
||||
]}
|
||||
title="Our Roofing Services"
|
||||
description="Comprehensive roofing solutions tailored to your property needs."
|
||||
@@ -230,60 +116,12 @@ export default function LandingPage() {
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
brand: "Villa",
|
||||
name: "Residential Slate Finish",
|
||||
price: "Custom",
|
||||
rating: 5,
|
||||
reviewCount: "12",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/small-aged-old-house-two-modern-new-houses_181624-30561.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
brand: "Commercial",
|
||||
name: "Office Complex Roofing",
|
||||
price: "Custom",
|
||||
rating: 5,
|
||||
reviewCount: "8",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-wooden-strips-bench_1252-1026.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
brand: "Home",
|
||||
name: "Modern Suburban Villa",
|
||||
price: "Custom",
|
||||
rating: 4,
|
||||
reviewCount: "5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-working-roof-with-drill_23-2148748775.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
brand: "Historic",
|
||||
name: "Traditional Clay Resto",
|
||||
price: "Custom",
|
||||
rating: 5,
|
||||
reviewCount: "20",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/old-brown-roof-tile-pattern-background-texture_1150-21736.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
brand: "Modern",
|
||||
name: "Geometric Custom House",
|
||||
price: "Custom",
|
||||
rating: 5,
|
||||
reviewCount: "7",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-style-house-exterior-with-terrace_114579-2229.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
brand: "Luxury",
|
||||
name: "Estate Property Finish",
|
||||
price: "Custom",
|
||||
rating: 5,
|
||||
reviewCount: "15",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/roof-tiles-warehouse-closeup-selective-focus-construction-repair-houses-delivery-sale-building-materials_166373-3212.jpg",
|
||||
},
|
||||
{ id: "1", brand: "Villa", name: "Residential Slate Finish", price: "Custom", rating: 5, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/small-aged-old-house-two-modern-new-houses_181624-30561.jpg" },
|
||||
{ id: "2", brand: "Commercial", name: "Office Complex Roofing", price: "Custom", rating: 5, reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/close-up-wooden-strips-bench_1252-1026.jpg" },
|
||||
{ id: "3", brand: "Home", name: "Modern Suburban Villa", price: "Custom", rating: 4, reviewCount: "5", imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-working-roof-with-drill_23-2148748775.jpg" },
|
||||
{ id: "4", brand: "Historic", name: "Traditional Clay Resto", price: "Custom", rating: 5, reviewCount: "20", imageSrc: "http://img.b2bpic.net/free-photo/old-brown-roof-tile-pattern-background-texture_1150-21736.jpg" },
|
||||
{ id: "5", brand: "Modern", name: "Geometric Custom House", price: "Custom", rating: 5, reviewCount: "7", imageSrc: "http://img.b2bpic.net/free-photo/modern-style-house-exterior-with-terrace_114579-2229.jpg" },
|
||||
{ id: "6", brand: "Luxury", name: "Estate Property Finish", price: "Custom", rating: 5, reviewCount: "15", imageSrc: "http://img.b2bpic.net/free-photo/roof-tiles-warehouse-closeup-selective-focus-construction-repair-houses-delivery-sale-building-materials_166373-3212.jpg" },
|
||||
]}
|
||||
title="Recent Projects"
|
||||
description="Quality finish for every property."
|
||||
@@ -297,27 +135,9 @@ export default function LandingPage() {
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "3",
|
||||
title: "Generations of Expertise",
|
||||
description: "A deep-rooted family legacy.",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "100%",
|
||||
title: "Warranty Guaranteed",
|
||||
description: "Quality materials and support.",
|
||||
icon: ShieldCheck,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "24/7",
|
||||
title: "Fast Local Team",
|
||||
description: "Reliable and responsive support.",
|
||||
icon: Zap,
|
||||
},
|
||||
{ id: "m1", value: "3", title: "Generations of Expertise", description: "A deep-rooted family legacy.", icon: Award },
|
||||
{ id: "m2", value: "100%", title: "Warranty Guaranteed", description: "Quality materials and support.", icon: ShieldCheck },
|
||||
{ id: "m3", value: "24/7", title: "Fast Local Team", description: "Reliable and responsive support.", icon: Zap },
|
||||
]}
|
||||
title="Why Choose JM Roofing"
|
||||
description="Excellence in every detail."
|
||||
@@ -328,31 +148,11 @@ export default function LandingPage() {
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Abdela Sharif",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-content-elegant-man_23-2147689111.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Ali Amin",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-girl-shows-okay-ok-signs-look-satisfied-recommend-good-company-perfect-quality-praise-good-job-well-done-standing-pleased-against-white-background_176420-54380.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Mehatish",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-stands-with-crossed-arms-isolated-pink-wall-with-copy-space_141793-118510.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Client Four",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-successful-businessman-smiling-holding-tablet-office_176420-918.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Client Five",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-street-using-mobile-phone_657883-744.jpg?_wi=2",
|
||||
},
|
||||
{ id: "t1", name: "Abdela Sharif", imageSrc: "http://img.b2bpic.net/free-photo/portrait-content-elegant-man_23-2147689111.jpg" },
|
||||
{ id: "t2", name: "Ali Amin", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-girl-shows-okay-ok-signs-look-satisfied-recommend-good-company-perfect-quality-praise-good-job-well-done-standing-pleased-against-white-background_176420-54380.jpg" },
|
||||
{ id: "t3", name: "Mehatish", imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-stands-with-crossed-arms-isolated-pink-wall-with-copy-space_141793-118510.jpg" },
|
||||
{ id: "t4", name: "Client Four", imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-successful-businessman-smiling-holding-tablet-office_176420-918.jpg" },
|
||||
{ id: "t5", name: "Client Five", imageSrc: "http://img.b2bpic.net/free-photo/man-street-using-mobile-phone_657883-744.jpg" },
|
||||
]}
|
||||
cardTitle="Trusted by Customers"
|
||||
cardTag="Our Reputation"
|
||||
@@ -365,26 +165,10 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How long does a new roof last?",
|
||||
content: "Our high-quality installations typically last 20-30+ years.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Do you offer emergency repairs?",
|
||||
content: "Yes, we provide prompt emergency services for leaks and damage.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Are you licensed and insured?",
|
||||
content: "Absolutely, we are fully licensed and insured for your peace of mind.",
|
||||
},
|
||||
{
|
||||
id: "f4",
|
||||
title: "What materials do you use?",
|
||||
content: "We use premium, locally sourced, and internationally tested materials.",
|
||||
},
|
||||
{ id: "f1", title: "How long does a new roof last?", content: "Our high-quality installations typically last 20-30+ years." },
|
||||
{ id: "f2", title: "Do you offer emergency repairs?", content: "Yes, we provide prompt emergency services for leaks and damage." },
|
||||
{ id: "f3", title: "Are you licensed and insured?", content: "Absolutely, we are fully licensed and insured for your peace of mind." },
|
||||
{ id: "f4", title: "What materials do you use?", content: "We use premium, locally sourced, and internationally tested materials." },
|
||||
]}
|
||||
title="Common Roofing Questions"
|
||||
description="Get quick answers to all your concerns."
|
||||
@@ -396,9 +180,7 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Contact Us"
|
||||
title="Protect Your Property Today"
|
||||
description="Request your free consultation and quote from the Sana'a trusted team."
|
||||
@@ -411,14 +193,8 @@ export default function LandingPage() {
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="JM Roofing"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Terms of Service",
|
||||
href: "#",
|
||||
}}
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user