Merge version_1 into main #3
258
src/app/page.tsx
258
src/app/page.tsx
@@ -1,55 +1,18 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import Link from "next/link";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
|
||||
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
|
||||
import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
|
||||
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
||||
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
|
||||
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import { Shield, Wrench, Award, MessageSquare, Phone } from "lucide-react";
|
||||
import { Shield, Wrench, Image, Award, MessageSquare, Phone } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function HomePage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Projects", id: "/projects" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{ label: "Carport Installations", href: "/services" },
|
||||
{ label: "Steel Roofing", href: "/services" },
|
||||
{ label: "Shade Ports", href: "/services" },
|
||||
{ label: "Steel Fabrication", href: "/services" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Projects", href: "/projects" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
items: [
|
||||
{ label: "Phone: 082 416 8445", href: "tel:0824168445" },
|
||||
{ label: "Email: info@xenosteel.co.za", href: "mailto:info@xenosteel.co.za" },
|
||||
{ label: "7 Van Der Merwe, Krauseville AH, Pretoria, 0001", href: "#" },
|
||||
{ label: "Visit Website", href: "https://xenosteel.co.za" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
@@ -57,21 +20,28 @@ export default function HomePage() {
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="fluid"
|
||||
background="circleGradient"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
{/* Navbar */}
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="Xeno Steel"
|
||||
navItems={navItems}
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Projects", id: "/projects" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
button={{ text: "Get Free Quote", href: "/contact" }}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Hero Section */}
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
title="Strong, Reliable Steel Structures Built to Last"
|
||||
@@ -84,57 +54,27 @@ export default function HomePage() {
|
||||
{ text: "View Our Projects", href: "/projects" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
background={{ variant: "plain" }}
|
||||
background={{ variant: "fluid" }}
|
||||
carouselItems={[
|
||||
{
|
||||
id: "1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/windows-skyscraper-business-office_1112-1844.jpg?_wi=1",
|
||||
imageAlt: "Modern steel carport installation",
|
||||
},
|
||||
id: "1", imageSrc: "http://img.b2bpic.net/free-photo/windows-skyscraper-business-office_1112-1844.jpg", imageAlt: "modern steel carport installation residential"},
|
||||
{
|
||||
id: "2",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-working-roof_23-2149343671.jpg?_wi=1",
|
||||
imageAlt: "Custom steel roofing project",
|
||||
},
|
||||
id: "2", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-working-roof_23-2149343671.jpg", imageAlt: "custom steel roofing residential project"},
|
||||
{
|
||||
id: "3",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-seashore-with-breathtaking-skies_181624-373.jpg?_wi=1",
|
||||
imageAlt: "Residential shade port structure",
|
||||
},
|
||||
id: "3", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-seashore-with-breathtaking-skies_181624-373.jpg", imageAlt: "shade port structure steel frame"},
|
||||
{
|
||||
id: "4",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/worker-doing-gate-by-electric-steel-cutter-machine_7502-9155.jpg?_wi=1",
|
||||
imageAlt: "Industrial steel fabrication",
|
||||
},
|
||||
id: "4", imageSrc: "http://img.b2bpic.net/free-photo/worker-doing-gate-by-electric-steel-cutter-machine_7502-9155.jpg", imageAlt: "industrial steel fabrication workshop"},
|
||||
{
|
||||
id: "5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/urban-landscape-japan-rails_23-2148889589.jpg?_wi=1",
|
||||
imageAlt: "Commercial steel construction",
|
||||
},
|
||||
id: "5", imageSrc: "http://img.b2bpic.net/free-photo/urban-landscape-japan-rails_23-2148889589.jpg", imageAlt: "commercial steel construction building"},
|
||||
{
|
||||
id: "6",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/building_1127-3015.jpg?_wi=1",
|
||||
imageAlt: "Premium steel structure installation",
|
||||
},
|
||||
id: "6", imageSrc: "http://img.b2bpic.net/free-photo/building_1127-3015.jpg", imageAlt: "premium steel structure installation complete"},
|
||||
]}
|
||||
autoPlay={true}
|
||||
autoPlayInterval={4000}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
heading={[
|
||||
{ type: "text", content: "Built on Quality, Crafted with Precision" },
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Get Started Today", href: "/contact" },
|
||||
{ text: "Learn More", href: "/services" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Services Section */}
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardEight
|
||||
title="Our Services"
|
||||
@@ -147,32 +87,50 @@ export default function HomePage() {
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Carport Installations",
|
||||
description: "Custom-designed carports with premium steel construction. Weather-resistant, durable, and aesthetically pleasing installations for residential and commercial properties.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-tower-city-finance-skyline_1417-317.jpg?_wi=1",
|
||||
},
|
||||
title: "Carport Installations", description: "Custom-designed carports with premium steel construction. Weather-resistant, durable, and aesthetically pleasing installations for residential and commercial properties.", imageSrc: "http://img.b2bpic.net/free-photo/modern-tower-city-finance-skyline_1417-317.jpg", imageAlt: "carport installation process step by step"},
|
||||
{
|
||||
id: 2,
|
||||
title: "Steel Roofing",
|
||||
description: "High-quality steel roofing solutions offering superior durability and longevity. Professional installation with weatherproofing guarantees for lasting protection.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tenerife-canary-islands-spain-january-15-2024_58702-16667.jpg?_wi=1",
|
||||
},
|
||||
title: "Steel Roofing", description: "High-quality steel roofing solutions offering superior durability and longevity. Professional installation with weatherproofing guarantees for lasting protection.", imageSrc: "http://img.b2bpic.net/free-photo/tenerife-canary-islands-spain-january-15-2024_58702-16667.jpg", imageAlt: "steel roofing installation professional"},
|
||||
{
|
||||
id: 3,
|
||||
title: "Shade Ports",
|
||||
description: "Functional and stylish shade structures perfect for outdoor spaces. Custom designs that blend aesthetics with practical sun and weather protection.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/exterior-modern-buildings_1127-2869.jpg?_wi=1",
|
||||
},
|
||||
title: "Shade Ports", description: "Functional and stylish shade structures perfect for outdoor spaces. Custom designs that blend aesthetics with practical sun and weather protection.", imageSrc: "http://img.b2bpic.net/free-photo/exterior-modern-buildings_1127-2869.jpg", imageAlt: "outdoor shade structure steel patio"},
|
||||
{
|
||||
id: 4,
|
||||
title: "Steel Fabrication",
|
||||
description: "Custom steel fabrication for unique projects. Expert craftsmanship in creating bespoke steel structures tailored to your specifications.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/experienced-pensive-person-is-making-custom-made-shoes-his-personal-workshop_613910-17401.jpg?_wi=1",
|
||||
},
|
||||
title: "Steel Fabrication", description: "Custom steel fabrication for unique projects. Expert craftsmanship in creating bespoke steel structures tailored to your specifications.", imageSrc: "http://img.b2bpic.net/free-photo/experienced-pensive-person-is-making-custom-made-shoes-his-personal-workshop_613910-17401.jpg", imageAlt: "metal fabrication custom steel work"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Projects Section */}
|
||||
<div id="projects" data-section="projects">
|
||||
<ProductCardOne
|
||||
title="Featured Projects"
|
||||
description="Showcase of our completed steel construction and carport installations across Pretoria"
|
||||
tag="Project Gallery"
|
||||
tagIcon={Image}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
gridVariant="bento-grid"
|
||||
animationType="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "1", name: "Residential Carport - Centurion", price: "Completed 2024", imageSrc: "http://img.b2bpic.net/free-photo/warehouse-old-construction-beams-country_1127-2786.jpg", imageAlt: "residential carport completed installation"},
|
||||
{
|
||||
id: "2", name: "Commercial Steel Roofing - Pretoria East", price: "Completed 2024", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-old-man-pointing-something_23-2148269399.jpg", imageAlt: "commercial building steel roofing completed"},
|
||||
{
|
||||
id: "3", name: "Custom Shade Port - Residential", price: "Completed 2023", imageSrc: "http://img.b2bpic.net/free-photo/person-doing-house-tour-online_23-2151050271.jpg", imageAlt: "custom shade port residential finished"},
|
||||
{
|
||||
id: "4", name: "Industrial Steel Structure", price: "Completed 2023", imageSrc: "http://img.b2bpic.net/free-vector/skyscraper-construction-isometric-set_1284-25682.jpg", imageAlt: "large scale industrial steel structure"},
|
||||
{
|
||||
id: "5", name: "Double Carport Installation", price: "Completed 2024", imageSrc: "http://img.b2bpic.net/free-photo/old-parked-car-with-backlights_23-2148703178.jpg", imageAlt: "double carport steel installation completed"},
|
||||
{
|
||||
id: "6", name: "Premium Steel Fabrication", price: "Completed 2023", imageSrc: "http://img.b2bpic.net/free-photo/large-steel-factory-warehouse_1127-3265.jpg", imageAlt: "premium custom steel fabrication project"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Metrics Section */}
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
title="Our Track Record"
|
||||
@@ -185,37 +143,18 @@ export default function HomePage() {
|
||||
animationType="slide-up"
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "4.9★",
|
||||
title: "Customer Rating",
|
||||
description: "From 27 verified reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/star-rating-dark-theme_1017-6186.jpg?_wi=1",
|
||||
},
|
||||
id: "1", value: "4.9★", title: "Customer Rating", description: "From 27 verified reviews", imageSrc: "http://img.b2bpic.net/free-vector/star-rating-dark-theme_1017-6186.jpg", imageAlt: "customer reviews satisfied clients feedback"},
|
||||
{
|
||||
id: "2",
|
||||
value: "15+",
|
||||
title: "Years Experience",
|
||||
description: "Professional steel construction expertise",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-worker-hard-hat-large-metalworking-plant_146671-19585.jpg?_wi=1",
|
||||
},
|
||||
id: "2", value: "15+", title: "Years Experience", description: "Professional steel construction expertise", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-worker-hard-hat-large-metalworking-plant_146671-19585.jpg", imageAlt: "experienced professional team working"},
|
||||
{
|
||||
id: "3",
|
||||
value: "500+",
|
||||
title: "Projects Completed",
|
||||
description: "Satisfied clients across Pretoria",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-smiley-people-work_23-2149636276.jpg?_wi=1",
|
||||
},
|
||||
id: "3", value: "500+", title: "Projects Completed", description: "Satisfied clients across Pretoria", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-smiley-people-work_23-2149636276.jpg", imageAlt: "multiple completed projects portfolio"},
|
||||
{
|
||||
id: "4",
|
||||
value: "100%",
|
||||
title: "Quality Guarantee",
|
||||
description: "Premium materials and workmanship",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gears-cogwheels_1112-922.jpg?_wi=1",
|
||||
},
|
||||
id: "4", value: "100%", title: "Quality Guarantee", description: "Premium materials and workmanship", imageSrc: "http://img.b2bpic.net/free-photo/gears-cogwheels_1112-922.jpg", imageAlt: "quality guarantee premium materials"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Testimonials Section */}
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
title="Customer Reviews"
|
||||
@@ -227,57 +166,22 @@ export default function HomePage() {
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Exceptional Carport Installation",
|
||||
quote: "Xeno Steel transformed our driveway with a stunning carport. Professional team, high-quality materials, and completed on schedule. Highly recommended!",
|
||||
name: "James Peterson",
|
||||
role: "Homeowner, Centurion",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-marking-her-smile-with-her-fingers_1187-3168.jpg?_wi=1",
|
||||
},
|
||||
id: "1", title: "Exceptional Carport Installation", quote: "Xeno Steel transformed our driveway with a stunning carport. Professional team, high-quality materials, and completed on schedule. Highly recommended!", name: "James Peterson", role: "Homeowner, Centurion", imageSrc: "http://img.b2bpic.net/free-photo/woman-marking-her-smile-with-her-fingers_1187-3168.jpg", imageAlt: "satisfied customer smiling portrait"},
|
||||
{
|
||||
id: "2",
|
||||
title: "Professional Commercial Solution",
|
||||
quote: "We hired Xeno Steel for our commercial roofing project. Their expertise and attention to detail were outstanding. Great value for money.",
|
||||
name: "Sarah Mitchell",
|
||||
role: "Property Manager, Pretoria East",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blond-business-woman-blue-shirt_23-2148095792.jpg?_wi=1",
|
||||
},
|
||||
id: "2", title: "Professional Commercial Solution", quote: "We hired Xeno Steel for our commercial roofing project. Their expertise and attention to detail were outstanding. Great value for money.", name: "Sarah Mitchell", role: "Property Manager, Pretoria East", imageSrc: "http://img.b2bpic.net/free-photo/blond-business-woman-blue-shirt_23-2148095792.jpg", imageAlt: "professional woman business portrait"},
|
||||
{
|
||||
id: "3",
|
||||
title: "Reliable and Trustworthy",
|
||||
quote: "Fantastic service from start to finish. The team was professional, punctual, and delivered exactly what we wanted. Will definitely use them again.",
|
||||
name: "David Chen",
|
||||
role: "Business Owner, Pretoria",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-suit-showing-thumb-up_23-2148112210.jpg?_wi=1",
|
||||
},
|
||||
id: "3", title: "Reliable and Trustworthy", quote: "Fantastic service from start to finish. The team was professional, punctual, and delivered exactly what we wanted. Will definitely use them again.", name: "David Chen", role: "Business Owner, Pretoria", imageSrc: "http://img.b2bpic.net/free-photo/male-suit-showing-thumb-up_23-2148112210.jpg", imageAlt: "satisfied business owner portrait"},
|
||||
{
|
||||
id: "4",
|
||||
title: "Quality Craftsmanship",
|
||||
quote: "Our custom steel shade port looks incredible. Xeno Steel's craftsmanship is evident in every detail. Couldn't ask for better results.",
|
||||
name: "Margaret Johnson",
|
||||
role: "Residential Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-lying-bed_1150-8827.jpg?_wi=1",
|
||||
},
|
||||
id: "4", title: "Quality Craftsmanship", quote: "Our custom steel shade port looks incredible. Xeno Steel's craftsmanship is evident in every detail. Couldn't ask for better results.", name: "Margaret Johnson", role: "Residential Client", imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-lying-bed_1150-8827.jpg", imageAlt: "happy female customer testimonial"},
|
||||
{
|
||||
id: "5",
|
||||
title: "Expert Installation Team",
|
||||
quote: "Professional, clean, and efficient. The installation was handled with precision and care. Our entire family is thrilled with the outcome.",
|
||||
name: "Robert Williams",
|
||||
role: "Homeowner, Pretoria North",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/friendly-handsome-business-leader-cafe_1262-3537.jpg?_wi=1",
|
||||
},
|
||||
id: "5", title: "Expert Installation Team", quote: "Professional, clean, and efficient. The installation was handled with precision and care. Our entire family is thrilled with the outcome.", name: "Robert Williams", role: "Homeowner, Pretoria North", imageSrc: "http://img.b2bpic.net/free-photo/friendly-handsome-business-leader-cafe_1262-3537.jpg", imageAlt: "satisfied male customer headshot"},
|
||||
{
|
||||
id: "6",
|
||||
title: "Best in the Business",
|
||||
quote: "Outstanding work quality and customer service. Xeno Steel stands out for their commitment to excellence and attention to detail.",
|
||||
name: "Lisa Anderson",
|
||||
role: "Commercial Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/brunette-businesswoman-smiling_23-2148142775.jpg?_wi=1",
|
||||
},
|
||||
id: "6", title: "Best in the Business", quote: "Outstanding work quality and customer service. Xeno Steel stands out for their commitment to excellence and attention to detail.", name: "Lisa Anderson", role: "Commercial Client", imageSrc: "http://img.b2bpic.net/free-photo/brunette-businesswoman-smiling_23-2148142775.jpg", imageAlt: "professional female business testimonial"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Contact CTA Section */}
|
||||
<div id="contact-cta" data-section="contact-cta">
|
||||
<ContactCTA
|
||||
tag="Ready to Get Started?"
|
||||
@@ -290,16 +194,42 @@ export default function HomePage() {
|
||||
{ text: "Call: 082 416 8445", href: "tel:0824168445" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
background={{ variant: "plain" }}
|
||||
background={{ variant: "fluid" }}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Xeno Steel"
|
||||
copyrightText="© 2025 Xeno Steel | Premium Steel Construction Pretoria"
|
||||
columns={footerColumns}
|
||||
columns={[
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "Carport Installations", href: "/services" },
|
||||
{ label: "Steel Roofing", href: "/services" },
|
||||
{ label: "Shade Ports", href: "/services" },
|
||||
{ label: "Steel Fabrication", href: "/services" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Projects", href: "/projects" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact", items: [
|
||||
{ label: "Phone: 082 416 8445", href: "tel:0824168445" },
|
||||
{ label: "Email: info@xenosteel.co.za", href: "mailto:info@xenosteel.co.za" },
|
||||
{ label: "7 Van Der Merwe, Krauseville AH, Pretoria, 0001", href: "#" },
|
||||
{ label: "Visit Website", href: "https://xenosteel.co.za" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
Reference in New Issue
Block a user