diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 7cb78a7..08759e6 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -3,35 +3,29 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
+import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 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>
-        <NavbarStyleCentered 
-            navItems={[
-                { name: "Home", id: "/" },
-                { name: "Pricing", id: "/pricing" },
-                { name: "About", id: "/about" }
-            ]}
-            brandName="Moeez Ecom"
-        />
-        <TestimonialAboutCard
-          tag="About Us"
-          title="Driving E-commerce Excellence"
-          description="At Moeez Ecom, we believe that every brand deserves a store that converts. Our expert team of developers and strategists works around the clock to ensure your business thrives in the competitive digital landscape."
-          subdescription="We started with a simple vision: to empower shop owners with top-tier technology and data-backed strategies. Today, we've helped hundreds of brands scale to seven figures."
-          icon={Rocket}
-          imageSrc="http://img.b2bpic.net/free-photo/successful-team-business-people-meeting-modern-office_1163-4481.jpg"
-        />
-        <FooterLogoReveal
-          logoText="Moeez Ecom"
-          leftLink={{ text: "Privacy Policy", href: "#" }}
-          rightLink={{ text: "Terms of Service", href: "#" }}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Pricing", id: "/pricing" }, { name: "About", id: "/about" }]} />
+        </div>
+        <div id="testimonial" data-section="testimonial">
+          <TestimonialCardTen
+            title="Driving E-commerce Excellence"
+            description="At Moeez Ecom, we believe that every brand deserves a store that converts."
+            textboxLayout="default"
+            useInvertedBackground={false}
+            testimonials={[{ id: "1", title: "Excellent Service", quote: "Moeez Ecom scaled our store to 7 figures.", name: "John Doe", role: "Founder", imageSrc: "http://img.b2bpic.net/free-photo/successful-team-business-people-meeting-modern-office_1163-4481.jpg" }]} 
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal logoText="Moeez Ecom" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 5d3dea1..a6138ed 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -8,19 +8,26 @@ import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
 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>
-        <NavbarStyleCentered navItems={[{name: "Home", id: "/"}, {name: "Blog", id: "/blog"}, {name: "Contact", id: "/contact"}]} brandName="Moeez Ecom" />
-        <BlogCardThree 
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Blog", id: "/blog" }, { name: "Contact", id: "/contact" }]} />
+        </div>
+        <div id="blog" data-section="blog">
+          <BlogCardThree 
             animationType="slide-up"
             textboxLayout="default"
+            useInvertedBackground={false}
             title="Latest Insights"
             description="Our thoughts on Shopify, CRO, and digital growth."
             blogs={[
-                { id: "1", category: "Development", title: "Optimizing Shopify Speed", excerpt: "Learn how to make your store load under 2 seconds.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-black-friday-sales-arrangement-with-tablet_23-2149093516.jpg", authorName: "Moeez", authorAvatar: "", date: "2024-05-01" }
+              { id: "1", category: "Dev", title: "Optimizing Speed", excerpt: "Make your store load faster.", imageSrc: "https://example.com/img.jpg", authorName: "Moeez", authorAvatar: "", date: "2024-05-01" }
             ]}
-        />
-        <FooterLogoReveal logoText="Moeez Ecom" leftLink={{text: "Privacy", href: "#"}} rightLink={{text: "Terms", href: "#"}} />
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal logoText="Moeez Ecom" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 4b548be..d6cdce0 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -3,25 +3,27 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import ButtonBounceEffect from '@/components/button/ButtonBounceEffect/ButtonBounceEffect';
 
 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>
-        <NavbarStyleCentered navItems={[{name: "Home", id: "/"}, {name: "Blog", id: "/blog"}, {name: "Contact", id: "/contact"}]} brandName="Moeez Ecom" />
-        <ContactSplitForm 
-            title="Contact Us"
-            description="Reach out for any Shopify project inquiries."
-            inputs={[{name: "name", type: "text", placeholder: "Name"}, {name: "email", type: "email", placeholder: "Email"}]}
-            textarea={{name: "message", placeholder: "Your message"}}
-        />
-        <div className="flex justify-center py-10">
-            <ButtonBounceEffect text="Message us on WhatsApp" href="https://wa.me/yournumber" />
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Blog", id: "/blog" }, { name: "Contact", id: "/contact" }]} />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactCenter 
+            tag="Contact Us"
+            title="Get in touch"
+            description="We would love to help with your project."
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal logoText="Moeez Ecom" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
         </div>
-        <FooterLogoReveal logoText="Moeez Ecom" leftLink={{text: "Privacy", href: "#"}} rightLink={{text: "Terms", href: "#"}} />
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/pricing/page.tsx b/src/app/pricing/page.tsx
index e87a2a4..a19f23b 100644
--- a/src/app/pricing/page.tsx
+++ b/src/app/pricing/page.tsx
@@ -3,36 +3,33 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
+import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
 export default function PricingPage() {
   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>
-        <NavbarStyleCentered 
-            navItems={[
-                { name: "Home", id: "/" },
-                { name: "Pricing", id: "/pricing" },
-                { name: "About", id: "/about" }
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Pricing", id: "/pricing" }, { name: "About", id: "/about" }]} />
+        </div>
+        <div id="pricing" data-section="pricing">
+          <PricingCardOne
+            title="Transparent Pricing"
+            description="Simple plans for scaling."
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            plans={[
+              { id: "p1", badge: "Starter", price: "$499", subtitle: "New stores", features: ["Setup"] },
+              { id: "p2", badge: "Growth", price: "$999", subtitle: "Scaling brands", features: ["Custom Design"] },
+              { id: "p3", badge: "Scale", price: "$1999", subtitle: "Enterprise", features: ["Development"] }
             ]}
-            brandName="Moeez Ecom"
-        />
-        <PricingCardEight
-          title="Transparent Pricing"
-          description="Simple plans designed for scaling your store."
-          animationType="slide-up"
-          plans={[
-            { id: "p1", badge: "Starter", price: "$499", subtitle: "Best for new stores", buttons: [{ text: "Get Started", href: "/contact" }], features: ["Store Setup", "Basic SEO", "Speed Optimization"] },
-            { id: "p2", badge: "Growth", price: "$999", subtitle: "Best for scaling brands", buttons: [{ text: "Get Started", href: "/contact" }], features: ["Custom Design", "Conversion Audit", "Advanced SEO", "Marketing Support"] },
-            { id: "p3", badge: "Scale", price: "$1999", subtitle: "Best for enterprise", buttons: [{ text: "Get Started", href: "/contact" }], features: ["Custom Development", "Full CRO", "Dedicated Manager", "Priority Support"] }
-          ]}
-        />
-        <FooterLogoReveal
-          logoText="Moeez Ecom"
-          leftLink={{ text: "Privacy Policy", href: "#" }}
-          rightLink={{ text: "Terms of Service", href: "#" }}
-        />
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal logoText="Moeez Ecom" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );