Update src/app/page.tsx

src/app/page.tsx

@@ -3,7 +3,7 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import HeroSplit from '@/components/sections/hero/HeroSplit';
-import TagAbout from '@/components/sections/about/TagAbout';
+import MediaSplitAbout from '@/components/sections/about/MediaSplitAbout';
 import FeatureCardThirteen from '@/components/sections/feature/FeatureCardThirteen';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import ProductCardFive from '@/components/sections/product/ProductCardFive';
@@ -59,10 +59,16 @@ export default function LandingPage() {
       </div>
 
       <div id="system-architecture" data-section="system-architecture">
-        <TagAbout
-          tag="How It Works"
+        <MediaSplitAbout
+          title="How It Works"
           description="Our platform bridges software, infrastructure, and intelligent automation into a unified system. Each layer solves specific problems and amplifies the next. No fragmentation. No manual bridges. Pure orchestration."
+          imageSrc="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=400&fit=crop"
+          imageAlt="infrastructure architecture technology system"
+          imagePosition="right"
           useInvertedBackground="noInvert"
+          buttons={[
+            { text: "Learn More", href: "features" }
+          ]}
         />
       </div>
 
@@ -98,6 +104,7 @@ export default function LandingPage() {
           gridVariant="uniform-all-items-equal"
           animationType="slide-up"
           useInvertedBackground="noInvert"
+          cardDescriptionClassName="text-neutral-300/90 font-medium contrast-75"
         />
       </div>
 
@@ -203,6 +210,7 @@ export default function LandingPage() {
           gridVariant="uniform-all-items-equal"
           animationType="slide-up"
           useInvertedBackground="noInvert"
+          cardDescriptionClassName="text-neutral-200/95 font-semibold contrast-100"
         />
       </div>
 
@@ -268,6 +276,7 @@ export default function LandingPage() {
           gridVariant="uniform-all-items-equal"
           animationType="slide-up"
           useInvertedBackground="noInvert"
+          cardDescriptionClassName="text-neutral-200/95 font-bold contrast-125"
         />
       </div>