bender/7e11af9c-47a7-431d-af69-c77f511b96fc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main #3

Merged
bender merged 1 commits from version_1 into main 2026-03-10 14:46:00 +00:00
Conversation 0 Commits 1 Files Changed 1 +94 -164
1 changed files with 94 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
src/app/page.tsx
View File

@@ -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>