Update src/app/page.tsx

src/app/layout.tsx

@@ -1269,4 +1269,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
@@ -6,10 +6,11 @@ import HeroSplit from '@/components/sections/hero/HeroSplit';
 import TagAbout from '@/components/sections/about/TagAbout';
 import FeatureCardThirteen from '@/components/sections/feature/FeatureCardThirteen';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import ProductCardFive from '@/components/sections/product/ProductCardFive';
 import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import { Zap, Layers, Brain, Target } from "lucide-react";
+import { Zap, Layers, Brain, Target, Package } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -50,7 +51,7 @@ export default function LandingPage() {
             { text: "Book a Demo", href: "contact" },
             { text: "Learn How It Works", href: "how-it-works" }
           ]}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767551140484-75myjdoa.jpg"
+          imageSrc="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1200&h=600&fit=crop"
           imageAlt="system architecture infrastructure diagram technology flow data pipeline network diagram"
           imagePosition="right"
           fixedMediaHeight={true}
@@ -100,6 +101,42 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="products" data-section="products">
+        <ProductCardFive
+          title="Browse Our Product Offerings"
+          description="Explore our comprehensive suite of enterprise solutions designed to accelerate your digital transformation."
+          tag="Products"
+          tagIcon={Package}
+          textboxLayout="default"
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          useInvertedBackground="noInvert"
+          products={[
+            {
+              id: "1",
+              button: { text: "Explore", href: "#product-1" },
+              imageSrc: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=400&fit=crop",
+              imageAlt: "cloud infrastructure server architecture distributed systems",
+              isFavorited: false
+            },
+            {
+              id: "2",
+              button: { text: "Learn More", href: "#product-2" },
+              imageSrc: "https://images.unsplash.com/photo-1555949519-2cdbaa6fb0c5?w=600&h=400&fit=crop",
+              imageAlt: "machine learning architecture neural network visualization AI",
+              isFavorited: false
+            },
+            {
+              id: "3",
+              button: { text: "Get Started", href: "#product-3" },
+              imageSrc: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=600&h=400&fit=crop",
+              imageAlt: "artificial intelligence technology smart systems automation",
+              isFavorited: false
+            }
+          ]}
+        />
+      </div>
+
       <div id="intelligence" data-section="intelligence">
         <ProductCardFour
           title="Intelligent Systems at Scale"
@@ -116,7 +153,7 @@ export default function LandingPage() {
               name: "Predictive Resource Allocation",
               price: "40% reduction",
               variant: "In infrastructure costs",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767551141756-0jpqu94a.jpg",
+              imageSrc: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=400&fit=crop",
               imageAlt: "cloud infrastructure server architecture distributed systems cloud computing infrastructure"
             },
             {
@@ -124,7 +161,7 @@ export default function LandingPage() {
               name: "Anomaly Detection Engine",
               price: "99.97%",
               variant: "Uptime guarantee with predictive alerts",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548946838-9eu2bn6w.jpg",
+              imageSrc: "https://images.unsplash.com/photo-1555949519-2cdbaa6fb0c5?w=600&h=400&fit=crop",
               imageAlt: "machine learning architecture neural network visualization AI algorithm data science intelligent automation"
             },
             {
@@ -132,7 +169,7 @@ export default function LandingPage() {
               name: "Automated Incident Response",
               price: "87%",
               variant: "Faster MTTR. Self-healing systems.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767551142117-ou336baw.jpg",
+              imageSrc: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=600&h=400&fit=crop",
               imageAlt: "artificial intelligence machine learning neural network AI technology smart systems"
             }
           ]}
@@ -281,4 +318,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}