diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index c8fbe6d..a96700e 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -3,43 +3,35 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
-import FooterBase from "@/components/sections/footer/FooterBase";
+import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
 import { Rocket } from "lucide-react";
 
 export default function AboutPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
         <NavbarLayoutFloatingOverlay
           brandName="Webild"
           navItems={[
-            { name: "Work", id: "/#work" },
-            { name: "Services", id: "/#services" },
+            { name: "Work", id: "/portfolio" },
+            { name: "Services", id: "/services" },
             { name: "About", id: "/about" },
             { name: "Team", id: "/team" },
-            { name: "Contact", id: "/#contact" },
+            { name: "Blog", id: "/blog" },
+            { name: "Contact", id: "/contact" },
           ]}
-          button={{ text: "Get Started", href: "/#contact" }}
         />
         <div className="pt-32 pb-20">
-          <TestimonialAboutCard
-            tag="About Us"
-            title="Driving Digital Excellence"
-            description="Zeemarke is a premier digital marketing agency focused on creating high-impact digital experiences that drive growth, engagement, and long-term brand loyalty."
-            subdescription="From custom development to strategic SEO, we bring a wealth of expertise to every project, ensuring your digital presence is not just seen, but felt."
-            icon={Rocket}
-            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp"
+          <InlineImageSplitTextAbout
+            heading={[{ type: "text", content: "Driving Digital Excellence" }]}
             useInvertedBackground={false}
           />
         </div>
-        <FooterBase
+        <FooterLogoEmphasis
           logoText="Webild"
-          copyrightText="© 2026 | Webild"
           columns={[
-            { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Team", href: "/team" }] },
-            { title: "Services", items: [{ label: "Web Development", href: "#" }, { label: "SEO", href: "#" }] },
-            { title: "Connect", items: [{ label: "Twitter", href: "#" }, { label: "LinkedIn", href: "#" }] }
+            { items: [{ label: "About", href: "/about" }, { label: "Team", href: "/team" }] },
           ]}
         />
       </ReactLenis>
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 78e778f..e5411cd 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -3,12 +3,12 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import BlogCardThree from "@/components/sections/blog/BlogCardThree";
-import FooterBase from "@/components/sections/footer/FooterBase";
+import BlogCardOne from "@/components/sections/blog/BlogCardOne";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
 
 export default function BlogPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
         <NavbarLayoutFloatingOverlay
           brandName="Webild"
@@ -17,19 +17,19 @@ export default function BlogPage() {
             { name: "Blog", id: "/blog" },
             { name: "Contact", id: "/contact" },
           ]}
-          button={{ text: "Contact", href: "/contact" }}
         />
-        <BlogCardThree
+        <BlogCardOne
           title="Marketing Insights"
           description="Latest articles and industry news to help you grow your business."
           textboxLayout="default"
           animationType="slide-up"
+          useInvertedBackground={false}
           blogs={[
             { id: "1", category: "Development", title: "Modern Web Architecture", excerpt: "Scaling your business with modern frameworks.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-1.webp", authorName: "Sarah Miller", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp", date: "Oct 24, 2026" },
             { id: "2", category: "Design", title: "UX Best Practices", excerpt: "How to create intuitive user interfaces.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-2.webp", authorName: "Valentina Reyes", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp", date: "Oct 20, 2026" },
           ]}
         />
-        <FooterBase
+        <FooterLogoEmphasis
           logoText="Webild"
           columns={[]}
         />
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 871bb4f..e234606 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -4,11 +4,11 @@ import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
 import ContactText from "@/components/sections/contact/ContactText";
-import FooterBase from "@/components/sections/footer/FooterBase";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
 
 export default function ContactPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
         <NavbarLayoutFloatingOverlay
           brandName="Webild"
@@ -21,9 +21,9 @@ export default function ContactPage() {
         <ContactText
           text="Get in Touch"
           background={{ variant: "rotated-rays-animated" }}
-          buttons={[{ text: "Send Message", href: "#" }]}
+          useInvertedBackground={false}
         />
-        <FooterBase
+        <FooterLogoEmphasis
           logoText="Webild"
           columns={[]}
         />
diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx
index c83f0ce..94e1995 100644
--- a/src/app/portfolio/page.tsx
+++ b/src/app/portfolio/page.tsx
@@ -3,39 +3,39 @@
 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 FooterBase from "@/components/sections/footer/FooterBase";
-import { ArrowUpRight } from "lucide-react";
+import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
 
 export default function PortfolioPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
         <NavbarLayoutFloatingOverlay
           brandName="Webild"
           navItems={[
             { name: "Work", id: "/portfolio" },
             { name: "Services", id: "/services" },
-            { name: "About", id: "about" },
-            { name: "Contact", id: "contact" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" },
           ]}
         />
         <div className="pt-32 pb-20">
-          <FeatureCardTwentySix
+          <FeatureCardNine
             title="Case Studies"
             description="Projects that delivered measurable results for our clients."
+            showStepNumbers={false}
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
             features={[
-              { title: "Client A", description: "Increased revenue by 50%", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-1.webp", buttonIcon: ArrowUpRight },
-              { title: "Client B", description: "Brand relaunch success", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-2.webp", buttonIcon: ArrowUpRight },
-              { title: "Client C", description: "Optimized conversion funnel", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-3.webp", buttonIcon: ArrowUpRight },
+              { title: "Client A", description: "Increased revenue by 50%", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-1.webp" }, phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-1.webp" } },
+              { title: "Client B", description: "Brand relaunch success", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-2.webp" }, phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-2.webp" } },
             ]}
           />
         </div>
-        <FooterBase
+        <FooterLogoEmphasis
           logoText="Webild"
-          columns={[
-            { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Services", href: "/services" }] },
-          ]}
+          columns={[]}
         />
       </ReactLenis>
     </ThemeProvider>
diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index 428eaaa..2081e64 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -3,42 +3,39 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import FeatureBento from "@/components/sections/feature/FeatureBento";
-import FooterBase from "@/components/sections/footer/FooterBase";
-import { Search, Monitor, Zap, Palette, Shield } from "lucide-react";
+import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
 
 export default function ServicesPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
         <NavbarLayoutFloatingOverlay
           brandName="Webild"
           navItems={[
             { name: "Work", id: "/portfolio" },
             { name: "Services", id: "/services" },
-            { name: "About", id: "about" },
-            { name: "Contact", id: "contact" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" },
           ]}
         />
         <div className="pt-32 pb-20">
-          <FeatureBento
+          <FeatureCardNine
             title="Our Digital Marketing Services"
             description="Comprehensive solutions to scale your business."
+            showStepNumbers={false}
             animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
             features={[
-              { title: "SEO", description: "Rank higher.", bentoComponent: "reveal-icon", icon: Search },
-              { title: "Web Development", description: "Fast & responsive.", bentoComponent: "reveal-icon", icon: Monitor },
-              { title: "Performance", description: "High speed.", bentoComponent: "reveal-icon", icon: Zap },
-              { title: "UI/UX", description: "User-centered design.", bentoComponent: "reveal-icon", icon: Palette },
-              { title: "Security", description: "Safe hosting.", bentoComponent: "reveal-icon", icon: Shield },
+              { title: "SEO", description: "Rank higher.", phoneOne: { imageSrc: "" }, phoneTwo: { imageSrc: "" } },
+              { title: "Web Development", description: "Fast & responsive.", phoneOne: { imageSrc: "" }, phoneTwo: { imageSrc: "" } },
             ]}
           />
         </div>
-        <FooterBase
+        <FooterLogoEmphasis
           logoText="Webild"
-          columns={[
-            { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Portfolio", href: "/portfolio" }] },
-          ]}
+          columns={[]}
         />
       </ReactLenis>
     </ThemeProvider>
diff --git a/src/app/team/page.tsx b/src/app/team/page.tsx
index 2070098..0430db9 100644
--- a/src/app/team/page.tsx
+++ b/src/app/team/page.tsx
@@ -3,47 +3,39 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import TeamCardTwo from "@/components/sections/team/TeamCardTwo";
-import FooterBase from "@/components/sections/footer/FooterBase";
+import TeamCardTen from "@/components/sections/team/TeamCardTen";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
 
 export default function TeamPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
         <NavbarLayoutFloatingOverlay
           brandName="Webild"
           navItems={[
-            { name: "Work", id: "/#work" },
-            { name: "Services", id: "/#services" },
+            { name: "Work", id: "/portfolio" },
+            { name: "Services", id: "/services" },
             { name: "About", id: "/about" },
             { name: "Team", id: "/team" },
-            { name: "Contact", id: "/#contact" },
+            { name: "Contact", id: "/contact" },
           ]}
-          button={{ text: "Get Started", href: "/#contact" }}
         />
         <div className="pt-32 pb-20">
-          <TeamCardTwo
+          <TeamCardTen
             title="Meet Our Experts"
-            description="The creative, technical, and strategic minds behind our successful client launches."
-            gridVariant="three-columns-all-equal-width"
-            animationType="slide-up"
-            textboxLayout="default"
-            members={[
-              { id: "1", name: "Sarah Miller", role: "Lead Developer", description: "Expert in building scalable React applications and modern web architectures.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp" },
-              { id: "2", name: "Valentina Reyes", role: "Creative Director", description: "Visionary designer creating memorable, high-conversion visual identities.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp" },
-              { id: "3", name: "Carlos Mendoza", role: "UX Designer", description: "Focused on user-centric design that balances functionality and aesthetic appeal.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp" },
-            ]}
+            tag="Team"
+            membersAnimation="slide-up"
+            memberVariant="default"
             useInvertedBackground={false}
+            members={[
+              { id: "1", name: "Sarah Miller", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp" },
+              { id: "2", name: "Valentina Reyes", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp" },
+            ]}
           />
         </div>
-        <FooterBase
+        <FooterLogoEmphasis
           logoText="Webild"
-          copyrightText="© 2026 | Webild"
-          columns={[
-            { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Team", href: "/team" }] },
-            { title: "Services", items: [{ label: "Web Development", href: "#" }, { label: "SEO", href: "#" }] },
-            { title: "Connect", items: [{ label: "Twitter", href: "#" }, { label: "LinkedIn", href: "#" }] }
-          ]}
+          columns={[]}
         />
       </ReactLenis>
     </ThemeProvider>