Update src/app/page.tsx

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 (
@@ -42,7 +43,7 @@ export default function LandingPage() {
 
       <div id="hero" data-section="hero">
         <HeroSplit
-          title="Infrastructure, software, and intelligence unified."
+          title="Where Infrastructure Transcends Into Art"
           description="Enterprise-grade systems that handle complexity with precision. Automate the entire stack. Move faster. Scale without friction."
           tag="Enterprise Platform"
           tagIcon={Zap}
@@ -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"