diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index ae737f3..b5811c4 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1424,4 +1424,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3ab049d..67735df 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,6 +4,7 @@ import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatin
 import HeroCentered from '@/components/sections/hero/HeroCentered';
 import AboutMetric from '@/components/sections/about/AboutMetric';
 import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
+import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
 import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import ContactFaq from '@/components/sections/contact/ContactFaq';
@@ -143,35 +144,50 @@ export default function LandingPage() {
       </div>
 
       <div id="process" data-section="process">
-        <FeatureCardNine
-          title="The Process"
-          description="Our proven methodology for sustainable brand growth"
-          features={[
-            {
-              id: 1,
-              title: "Strategy",              description: "Deep audience analysis, competitor research, and custom roadmap creation tailored to your brand goals.",              phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/man-suit-is-holding-tablet-front-car-with-graph-it_188544-41092.jpg?_wi=2" },
-              phoneTwo: { imageSrc: "http://img.b2bpic.net/free-psd/online-courses-social-media-post-collection-set_47987-33999.jpg?_wi=3" }
-            },
-            {
-              id: 2,
-              title: "Content Creation",              description: "High-quality, on-brand content production optimized for maximum reach and engagement on your target platforms.",              phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/person-recording-blogger-influencer_1268-21928.jpg?_wi=4" },
-              phoneTwo: { imageSrc: "http://img.b2bpic.net/free-psd/winning-marketing-game-online-template_23-2151997287.jpg?_wi=3" }
-            },
-            {
-              id: 3,
-              title: "Growth & Optimization",              description: "Continuous monitoring, A/B testing, and real-time optimization to accelerate results and maximize ROI.",              phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg" },
-              phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/man-suit-is-holding-tablet-front-car-with-graph-it_188544-41092.jpg?_wi=3" }
-            },
-            {
-              id: 4,
-              title: "Reporting",              description: "Transparent monthly reports with detailed analytics, insights, and recommendations for ongoing improvement.",              phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/man-suit-is-holding-tablet-front-car-with-graph-it_188544-41092.jpg?_wi=4" },
-              phoneTwo: { imageSrc: "http://img.b2bpic.net/free-psd/online-courses-social-media-post-collection-set_47987-33999.jpg?_wi=4" }
-            }
+        <HeroSplitDualMedia
+          title="Strategy"
+          description="Deep audience analysis, competitor research, and custom roadmap creation tailored to your brand goals."
+          background={{ variant: "plain" }}
+          tag="Process Step 1"
+          mediaItems={[
+            { imageSrc: "http://img.b2bpic.net/free-photo/man-suit-is-holding-tablet-front-car-with-graph-it_188544-41092.jpg?_wi=2", imageAlt: "Strategy phase" },
+            { imageSrc: "http://img.b2bpic.net/free-psd/online-courses-social-media-post-collection-set_47987-33999.jpg?_wi=3", imageAlt: "Strategy planning" }
           ]}
-          showStepNumbers={true}
-          textboxLayout="default"
-          useInvertedBackground={true}
-          animationType="slide-up"
+          rating={5}
+          ratingText="First of Three Steps"
+          mediaAnimation="slide-up"
+        />
+      </div>
+
+      <div id="process-2" data-section="process-2">
+        <HeroSplitDualMedia
+          title="Content Creation"
+          description="High-quality, on-brand content production optimized for maximum reach and engagement on your target platforms."
+          background={{ variant: "plain" }}
+          tag="Process Step 2"
+          mediaItems={[
+            { imageSrc: "http://img.b2bpic.net/free-photo/person-recording-blogger-influencer_1268-21928.jpg?_wi=4", imageAlt: "Content creation" },
+            { imageSrc: "http://img.b2bpic.net/free-psd/winning-marketing-game-online-template_23-2151997287.jpg?_wi=3", imageAlt: "Content design" }
+          ]}
+          rating={5}
+          ratingText="Second of Three Steps"
+          mediaAnimation="slide-up"
+        />
+      </div>
+
+      <div id="process-3" data-section="process-3">
+        <HeroSplitDualMedia
+          title="Growth & Optimization"
+          description="Continuous monitoring, A/B testing, and real-time optimization to accelerate results and maximize ROI."
+          background={{ variant: "plain" }}
+          tag="Process Step 3"
+          mediaItems={[
+            { imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Growth optimization" },
+            { imageSrc: "http://img.b2bpic.net/free-photo/man-suit-is-holding-tablet-front-car-with-graph-it_188544-41092.jpg?_wi=3", imageAlt: "Optimization results" }
+          ]}
+          rating={5}
+          ratingText="Third of Three Steps"
+          mediaAnimation="slide-up"
         />
       </div>
 
@@ -253,4 +269,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css
index a618079..d443538 100644
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #ffffff;;
-  --card: #f8f6ff;;
-  --foreground: #1a1625;;
-  --primary-cta: #000000;;
-  --secondary-cta: #ffffff;;
-  --accent: #b79cff;;
-  --background-accent: #7fb3ff;; */
+  /* --background: linear-gradient(135deg, #85F1FF 0%, #FFA39F 50%, #FFBB87 100%);;
+  --card: linear-gradient(135deg, #85F1FF 0%, #FFA39F 50%, #FFBB87 100%);;
+  --foreground: #1a1a1a;;
+  --primary-cta: #85F1FF;;
+  --secondary-cta: #FFA39F;;
+  --accent: #FFBB87;;
+  --background-accent: #FFA39F;; */
 
-  --background: #ffffff;;
-  --card: #f8f6ff;;
-  --foreground: #1a1625;;
-  --primary-cta: #000000;;
+  --background: linear-gradient(135deg, #85F1FF 0%, #FFA39F 50%, #FFBB87 100%);;
+  --card: linear-gradient(135deg, #85F1FF 0%, #FFA39F 50%, #FFBB87 100%);;
+  --foreground: #1a1a1a;;
+  --primary-cta: #85F1FF;;
   --primary-cta-text: #ffffff;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #FFA39F;;
   --secondary-cta-text: #1a1625;;
-  --accent: #b79cff;;
-  --background-accent: #7fb3ff;;
+  --accent: #FFBB87;;
+  --background-accent: #FFA39F;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);