From 592a54418031471db99b7c66c3dca740180d1d31 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 10 Mar 2026 14:45:38 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 258 +++++++++++++++++------------------------------
 1 file changed, 94 insertions(+), 164 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index cc1c69f..c4c0df8 100644
--- a/src/app/page.tsx
+++ b/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>
-- 
2.49.1