diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 1d54024..6168119 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -3,12 +3,23 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import MediaAbout from "@/components/sections/about/MediaAbout";
-import FooterBase from "@/components/sections/footer/FooterBase";
+import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
 
 export default function AboutPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="medium"
+    >
       <ReactLenis root>
         <NavbarLayoutFloatingOverlay
           brandName="Webild"
@@ -20,12 +31,12 @@ export default function AboutPage() {
           ]}
           button={{ text: "Get Started", href: "/contact" }}
         />
-        <MediaAbout
-          title="About Webild"
+        <InlineImageSplitTextAbout
+          heading={[{ type: "text", content: "About Webild" }]}
           description="We are a team of passionate creators dedicated to crafting digital excellence for brands worldwide."
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp"
+          useInvertedBackground={false}
         />
-        <FooterBase
+        <FooterBaseCard
           logoText="Webild"
           copyrightText="© 2026 | Webild"
           columns={[
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 63418dc..caec401 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -4,15 +4,23 @@ import ReactLenis from "lenis/react";
 import { useState } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import ContactText from "@/components/sections/contact/ContactText";
-import Input from "@/components/form/Input";
-import FooterBase from "@/components/sections/footer/FooterBase";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
 
 export default function ContactPage() {
-  const [name, setName] = useState("");
-  const [email, setEmail] = useState("");
   return (
-    <ThemeProvider>
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="medium"
+    >
       <ReactLenis root>
         <NavbarLayoutFloatingOverlay
           brandName="Webild"
@@ -24,22 +32,13 @@ export default function ContactPage() {
           ]}
           button={{ text: "Get Started", href: "/contact" }}
         />
-        <ContactText
-          text="Get in Touch"
-          background={{ variant: "sparkles-gradient" }}
+        <ContactSplitForm
+          title="Get in Touch"
+          description="We'd love to hear about your project. Reach out today."
+          inputs={[{ name: "name", type: "text", placeholder: "Your name", required: true }, { name: "email", type: "email", placeholder: "Your email", required: true }]}
+          useInvertedBackground={false}
         />
-        <div className="max-w-xl mx-auto py-20 px-6">
-          <h2 className="text-4xl mb-8">Send us a message</h2>
-          <Input value={name} onChange={setName} placeholder="Your name" className="mb-4" />
-          <Input value={email} onChange={setEmail} placeholder="Your email" className="mb-4" />
-          <div className="mt-10">
-            <p className="font-bold">Office Location:</p>
-            <p>123 Webild Street, Digital City</p>
-            <p className="font-bold mt-4">Hours:</p>
-            <p>Mon - Fri: 9am - 6pm</p>
-          </div>
-        </div>
-        <FooterBase
+        <FooterBaseCard
           logoText="Webild"
           copyrightText="© 2026 | Webild"
           columns={[
diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx
index 1debd91..75abc1e 100644
--- a/src/app/gallery/page.tsx
+++ b/src/app/gallery/page.tsx
@@ -3,9 +3,9 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
-import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
-import FooterBase from "@/components/sections/footer/FooterBase";
+import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import { CheckCircle } from "lucide-react";
 
 export default function GalleryPage() {
   return (
@@ -17,7 +17,7 @@ export default function GalleryPage() {
       sizing="medium"
       background="none"
       cardStyle="glass-elevated"
-      primaryButtonStyle="metallic"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
       headingFontWeight="medium"
     >
@@ -33,30 +33,18 @@ export default function GalleryPage() {
           ]}
           button={{ text: "Get Started", href: "/#contact" }}
         />
-        <FeatureCardTwentySix
+        <FeatureCardTen
           title="Cafe Gallery"
-          description="A curated selection of our finest cafe experiences and interior designs."
+          description="A curated selection of our finest cafe experiences."
           textboxLayout="default"
+          animationType="slide-up"
           useInvertedBackground={false}
           features={[
-            { title: "Cozy Nook", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp" },
-            { title: "Morning Brew", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp" },
-            { title: "Modern Cafe", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-3.webp" },
-            { title: "Artisan Roastery", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp" },
-            { title: "Rustic Vibe", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-5.webp" },
+            { title: "Cozy Nook", description: "Comfortable seating area.", media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp" }, items: [{ icon: CheckCircle, text: "Cozy" }, { icon: CheckCircle, text: "Warm" }], reverse: false },
+            { title: "Morning Brew", description: "The perfect start to your day.", media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp" }, items: [{ icon: CheckCircle, text: "Fresh" }, { icon: CheckCircle, text: "Aromatic" }], reverse: true },
           ]}
         />
-        <TestimonialCardTen
-          title="What People Say"
-          description="Hear from those who have visited our featured cafes."
-          textboxLayout="default"
-          useInvertedBackground={false}
-          testimonials={[
-            { id: "t1", title: "Incredible Ambiance", quote: "The atmosphere in every cafe they design is simply magical. Truly a unique experience.", name: "Alice Johnson", role: "Design Critic" },
-            { id: "t2", title: "Exceptional Taste", quote: "They managed to blend rustic charm with modern efficiency perfectly. I loved the lighting.", name: "Bob Smith", role: "Coffee Enthusiast" }
-          ]}
-        />
-        <FooterBase
+        <FooterBaseCard
           logoText="Webild"
           copyrightText="© 2026 | Webild"
           columns={[
diff --git a/src/app/menu/page.tsx b/src/app/menu/page.tsx
index bf7f698..494c65b 100644
--- a/src/app/menu/page.tsx
+++ b/src/app/menu/page.tsx
@@ -3,8 +3,8 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import FooterBase from "@/components/sections/footer/FooterBase";
-import ProductCardThree from "@/components/sections/product/ProductCardThree";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import ProductCardFour from "@/components/sections/product/ProductCardFour";
 
 export default function MenuPage() {
   return (
@@ -16,7 +16,7 @@ export default function MenuPage() {
       sizing="medium"
       background="none"
       cardStyle="glass-elevated"
-      primaryButtonStyle="metallic"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
       headingFontWeight="medium"
     >
@@ -34,21 +34,22 @@ export default function MenuPage() {
         />
         
         <div className="pt-32 pb-20">
-          <ProductCardThree
+          <ProductCardFour
             title="Our Menu"
             description="Explore our curated selection of digital solutions."
             gridVariant="three-columns-all-equal-width"
             animationType="slide-up"
             textboxLayout="default"
+            useInvertedBackground={false}
             products={[
-              { id: "1", name: "Web Audit", price: "$499", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp" },
-              { id: "2", name: "SEO Package", price: "$899", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp" },
-              { id: "3", name: "Design Sprint", price: "$1499", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp" },
+              { id: "1", name: "Web Audit", price: "$499", variant: "Standard", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp" },
+              { id: "2", name: "SEO Package", price: "$899", variant: "Standard", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp" },
+              { id: "3", name: "Design Sprint", price: "$1499", variant: "Premium", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp" },
             ]}
           />
         </div>
 
-        <FooterBase
+        <FooterBaseCard
           logoText="Webild"
           copyrightText="© 2026 | Webild"
           columns={[