diff --git a/src/app/page.tsx b/src/app/page.tsx
index 402b60d..8eb2e1d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,177 +2,143 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
-import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
-import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
-import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
-import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
-import { useRouter } from "next/navigation";
+import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
+import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
+import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
-export default function LandingPage() {
-  const router = useRouter();
-
-  const handleProjectClick = (projectId: string) => {
-    router.push(`/project/${projectId}`);
-  };
+export default function Home() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Projects", id: "/projects" },
+    { name: "About", id: "about" },
+    { name: "Contact", id: "contact" },
+  ];
 
   return (
     <ThemeProvider
-      defaultButtonVariant="shift-hover"
-      defaultTextAnimation="reveal-blur"
-      borderRadius="soft"
-      contentWidth="smallMedium"
-      sizing="mediumLarge"
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
       background="circleGradient"
-      cardStyle="outline"
-      primaryButtonStyle="shadow"
-      secondaryButtonStyle="solid"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
       headingFontWeight="normal"
     >
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingOverlay
-          brandName="Portfolio"
-          navItems={[
-            { name: "Work", id: "work" },
-            { name: "About", id: "about" },
-            { name: "Services", id: "services" },
-            { name: "Contact", id: "contact" },
-          ]}
-          button={{
-            text: "Get in Touch",            href: "contact"}}
-        />
+        <NavbarLayoutFloatingOverlay navItems={navItems} />
       </div>
 
       <div id="hero" data-section="hero">
         <HeroBillboardCarousel
-          title="Crafting Digital Experiences"
-          description="Innovative design solutions that combine aesthetics with functionality. Explore a curated collection of projects that showcase creative excellence and strategic thinking."
-          tag="Portfolio"
-          background={{ variant: "sparkles-gradient" }}
+          title="Welcome to Our Portfolio"
+          description="Explore our latest design projects and creative work"
+          background={{ variant: "animated-grid" }}
           mediaItems={[
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-stunning-creative-portfolio-showcasing-1773043068077-12221410.png",              imageAlt: "Portfolio showcase project one"},
+              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Portfolio showcase 1"},
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/bold-creative-design-project-displayed-i-1773043067366-f2dd6201.png",              imageAlt: "Portfolio showcase project two"},
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-piece-featuring-s-1773043067962-bd19ff43.png",              imageAlt: "Portfolio showcase project three"},
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/high-end-portfolio-presentation-featurin-1773043068108-9dc5d0cb.png",              imageAlt: "Portfolio showcase project four"},
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-portfolio-piece-with-1773043067431-feb1d48d.png",              imageAlt: "Portfolio showcase project five"},
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/sleek-portfolio-presentation-displaying--1773043067678-cc62c707.png",              imageAlt: "Portfolio showcase project six"},
+              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Portfolio showcase 2"},
           ]}
           buttons={[
-            { text: "View Work", href: "work" },
-            { text: "Start a Project", href: "contact" },
+            { text: "View Projects", href: "/projects" },
+            { text: "Get In Touch", href: "contact" },
           ]}
         />
       </div>
 
       <div id="work" data-section="work">
         <FeatureCardTwentyFour
-          title="Featured Projects"
-          description="Showcase of selected works demonstrating design excellence and strategic approach"
-          tag="Our Work"
+          title="Our Featured Work"
+          description="Discover the projects we're most proud of"
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
           features={[
             {
-              id: "1",              title: "Digital Brand Identity System",              author: "Brand Strategy",              description: "Complete visual identity redesign for tech startup. Developed comprehensive brand guidelines, typography system, and digital asset library. Increased brand recognition by 40% within six months.",              tags: ["Branding", "Identity", "Design System"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png",              imageAlt: "Brand identity project showcase",              onFeatureClick: () => handleProjectClick("1"),
-            },
+              id: "1",              title: "Digital Brand Identity",              author: "Design Team",              description: "Complete brand redesign for a tech startup",              tags: ["Branding", "Design"],
+              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Digital brand identity project"},
             {
-              id: "2",              title: "E-commerce Platform Redesign",              author: "UX Design",              description: "User-centered redesign of enterprise e-commerce platform. Improved conversion rate by 35% through streamlined navigation and optimized checkout flow. Implemented accessible design patterns and mobile-first approach.",              tags: ["UX Design", "E-commerce", "Accessibility"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png",              imageAlt: "E-commerce platform design",              onFeatureClick: () => handleProjectClick("2"),
-            },
+              id: "2",              title: "E-commerce Platform Redesign",              author: "UX Team",              description: "Modern platform redesign with improved UX",              tags: ["E-commerce", "UX"],
+              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "E-commerce platform project"},
             {
-              id: "3",              title: "SaaS Product Interface Design",              author: "Product Design",              description: "Designed intuitive interface for data analytics SaaS platform. Created interactive prototypes and design system for 15+ component variations. Enhanced user onboarding experience and reduced support tickets by 50%.",              tags: ["SaaS", "Product Design", "UI Design"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png",              imageAlt: "SaaS product interface design",              onFeatureClick: () => handleProjectClick("3"),
-            },
+              id: "3",              title: "SaaS Product Interface Design",              author: "Design Team",              description: "Intuitive interface for enterprise SaaS product",              tags: ["SaaS", "UI Design"],
+              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "SaaS interface project"},
           ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
         />
       </div>
 
       <div id="about" data-section="about">
         <TextSplitAbout
-          title="About My Practice"
+          title="About Our Studio"
           description={[
-            "With over a decade of experience in digital design, I specialize in creating meaningful visual experiences that solve real problems. My approach combines strategic thinking with meticulous attention to detail.",            "I believe great design goes beyond aesthetics—it should drive business results while delighting users. Every project is an opportunity to push creative boundaries and establish new standards in digital craftsmanship.",            "I collaborate closely with clients and teams to understand vision, challenge assumptions, and deliver work that exceeds expectations. Let's create something extraordinary together."]}
+            "We are a creative studio specializing in digital design and brand strategy. With over a decade of experience, we help businesses transform their vision into reality.",            "Our team of talented designers, strategists, and developers work collaboratively to create exceptional digital experiences that inspire and engage."]}
+          useInvertedBackground={false}
           buttons={[
-            { text: "Download Resume", href: "#" },
-            { text: "Connect", href: "contact" },
+            { text: "Learn More", href: "/about" },
           ]}
-          showBorder={true}
-          useInvertedBackground={true}
         />
       </div>
 
       <div id="services" data-section="services">
         <FeatureCardTwentyFour
-          title="Services Offered"
-          description="Comprehensive design solutions tailored to your business objectives"
-          tag="Expertise"
+          title="Our Services"
+          description="Comprehensive design and development solutions"
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
           features={[
             {
-              id: "1",              title: "Brand Strategy & Identity",              author: "Strategic Design",              description: "Develop compelling brand narratives and visual identities that resonate with target audiences. From logo design to complete brand systems, I create cohesive visual languages.",              tags: ["Branding", "Strategy", "Identity"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/abstract-illustration-representing-creat-1773043067648-d1f91d56.png?_wi=1",              imageAlt: "Brand strategy service"},
+              id: "1",              title: "Brand Strategy",              author: "Strategy Team",              description: "Develop compelling brand identities and positioning",              tags: ["Strategy", "Branding"],
+              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Brand strategy service"},
             {
-              id: "2",              title: "Digital Product Design",              author: "UX/UI",              description: "User-centered design for web and mobile applications. I create intuitive interfaces, conduct user research, and build design systems that scale with your product.",              tags: ["UX Design", "UI Design", "Product"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/modern-illustration-depicting-branding-a-1773043067558-0eccfee5.png",              imageAlt: "Digital product design service"},
+              id: "2",              title: "UX/UI Design",              author: "Design Team",              description: "Create intuitive and beautiful digital interfaces",              tags: ["Design", "UX"],
+              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "UX/UI design service"},
             {
-              id: "3",              title: "Design Systems & Component Libraries",              author: "System Design",              description: "Build scalable design systems and component libraries that improve workflow efficiency and maintain consistency across products. Documentation included for seamless developer handoff.",              tags: ["Design System", "Components", "Scalability"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/abstract-illustration-representing-creat-1773043067648-d1f91d56.png?_wi=2",              imageAlt: "Design systems service"},
+              id: "3",              title: "Web Development",              author: "Dev Team",              description: "Build responsive and performant web experiences",              tags: ["Development", "Web"],
+              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Web development service"},
           ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
         />
       </div>
 
       <div id="testimonials" data-section="testimonials">
         <TestimonialCardTwelve
-          cardTitle="Trusted by leading brands and organizations worldwide"
-          cardTag="Client feedback"
+          cardTitle="Client Success Stories"
+          cardTag="Testimonials"
           cardAnimation="slide-up"
           useInvertedBackground={false}
           testimonials={[
             {
-              id: "1",              name: "Sarah Chen",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-headshot-portrait-of-a-crea-1773043067225-0aed98b9.png",              imageAlt: "Sarah Chen"},
+              id: "1",              name: "Sarah Johnson",              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Sarah Johnson"},
             {
-              id: "2",              name: "Marcus Johnson",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portrait-photograph-of-busi-1773043067191-64c1ffe8.png",              imageAlt: "Marcus Johnson"},
+              id: "2",              name: "Michael Chen",              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Michael Chen"},
             {
-              id: "3",              name: "Elena Rodriguez",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-headshot-of-creative-indust-1773043067885-58b8d4c1.png",              imageAlt: "Elena Rodriguez"},
-            {
-              id: "4",              name: "James Williams",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-business-portrait-photograp-1773043066896-7b04d7eb.png",              imageAlt: "James Williams"},
-            {
-              id: "5",              name: "Sophie Laurent",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-headshot-portrait-of-busine-1773043067827-a52a508e.png",              imageAlt: "Sophie Laurent"},
-            {
-              id: "6",              name: "David Kumar",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-business-portrait-photograp-1773043067750-9681fff7.png",              imageAlt: "David Kumar"},
+              id: "3",              name: "Emma Williams",              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Emma Williams"},
           ]}
         />
       </div>
 
       <div id="contact" data-section="contact">
         <ContactCenter
-          tag="Let's Talk"
-          title="Ready to Start Your Next Project?"
-          description="Get in touch to discuss your design needs, project vision, and how we can collaborate to create exceptional digital experiences."
-          background={{ variant: "sparkles-gradient" }}
+          tag="Get In Touch"
+          title="Let's Work Together"
+          description="Have a project in mind? We'd love to hear about it. Contact us today."
+          background={{ variant: "plain" }}
           useInvertedBackground={false}
-          inputPlaceholder="Enter your email address"
           buttonText="Send Message"
-          termsText="I'll respond within 24 hours. We respect your privacy and will never share your information."
         />
       </div>
 
       <div id="footer" data-section="footer">
         <FooterLogoReveal
-          logoText="Portfolio"
-          leftLink={{ text: "Privacy Policy", href: "#" }}
-          rightLink={{ text: "Terms of Service", href: "#" }}
+          logoText="Our Studio"
+          leftLink={{ text: "Privacy Policy", href: "/privacy" }}
+          rightLink={{ text: "Contact", href: "contact" }}
         />
       </div>
     </ThemeProvider>
diff --git a/src/app/projects/[id]/page.tsx b/src/app/projects/[id]/page.tsx
index c552dea..8498603 100644
--- a/src/app/projects/[id]/page.tsx
+++ b/src/app/projects/[id]/page.tsx
@@ -2,261 +2,88 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
-import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
-import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
-import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
-import { useParams } from "next/navigation";
+import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
+import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
-// Project data - can be moved to a separate data file or API
-const projectsData: Record<
-  string,
-  {
-    title: string;
-    description: string;
-    tag: string;
-    heroImages: Array<{ imageSrc: string; imageAlt: string }>;
-    overview: string[];
-    challenge: string;
-    solution: string;
-    results: string;
-    details: Array<{
-      id: string;
-      title: string;
-      author: string;
-      description: string;
-      tags: string[];
-      imageSrc: string;
-      imageAlt: string;
-    }>;
-    nextProjectId?: string;
-    nextProjectName?: string;
-  }
-> = {
-  "1": {
-    title: "Digital Brand Identity System",    description: "Complete visual identity redesign for tech startup",    tag: "Brand Strategy",    heroImages: [
-      {
-        imageSrc:
-          "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png",        imageAlt: "Brand identity project showcase"},
-      {
-        imageSrc:
-          "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png",        imageAlt: "Brand identity secondary view"},
-    ],
-    overview: [
-      "This project involved a comprehensive rebrand for a rapidly growing tech startup. The client needed a modern, cohesive visual identity that reflected their innovation and positioned them as a market leader.",      "Working closely with the leadership team, we developed a complete brand system including logo design, color palette, typography guidelines, and a comprehensive asset library for all digital and print applications."],
-    challenge:
-      "The startup had outgrown their initial branding and needed a more professional identity that would resonate with enterprise clients while maintaining the energy and innovation of their brand culture.",    solution:
-      "We conducted extensive brand research, stakeholder interviews, and competitive analysis. The result was a bold, modern brand identity featuring a distinctive logomark, carefully curated color system, and a flexible typography hierarchy that works across all mediums.",    results:
-      "Post-rebrand, the company experienced a 40% increase in brand recognition, improved website conversion rates by 28%, and successfully closed three major enterprise deals attributed partially to the strengthened brand positioning.",    details: [
-      {
-        id: "1",        title: "Logo Design & Variations",        author: "Visual Identity",        description: "Primary logo, secondary mark, and application variations for different contexts",        tags: ["Logo", "Identity", "Design"],
-        imageSrc:
-          "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png",        imageAlt: "Logo design variations"},
-      {
-        id: "2",        title: "Color System & Palette",        author: "Brand System",        description: "Comprehensive color palette with primary, secondary, and accent colors",        tags: ["Color", "System", "Branding"],
-        imageSrc:
-          "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png",        imageAlt: "Color palette"},
-      {
-        id: "3",        title: "Typography Guidelines",        author: "Brand System",        description: "Font selection, sizing scales, and usage guidelines for consistency",        tags: ["Typography", "System", "Branding"],
-        imageSrc:
-          "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png",        imageAlt: "Typography guidelines"},
-    ],
-    nextProjectId: "2",    nextProjectName: "E-commerce Platform Redesign"},
-  "2": {
-    title: "E-commerce Platform Redesign",    description: "User-centered redesign of enterprise e-commerce platform",    tag: "UX Design",    heroImages: [
-      {
-        imageSrc:
-          "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png",        imageAlt: "E-commerce platform design"},
-      {
-        imageSrc:
-          "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png",        imageAlt: "E-commerce platform secondary view"},
-    ],
-    overview: [
-      "This enterprise e-commerce platform was experiencing high cart abandonment rates and low user satisfaction. The redesign focused on streamlining the user journey and creating an intuitive, accessible interface.",      "Through user research, usability testing, and iterative design, we transformed the platform into a modern, conversion-focused experience that caters to diverse user needs and accessibility requirements."],
-    challenge:
-      "The existing platform had accumulated complex features over years of updates, resulting in a cluttered interface and confusing navigation. Users struggled to find products and complete purchases efficiently.",    solution:
-      "We conducted extensive user research including interviews and usability testing. The redesign involved a complete information architecture overhaul, simplified navigation, optimized product discovery, and a streamlined checkout process with clear progress indicators.",    results:
-      "The redesign resulted in a 35% improvement in conversion rate, 42% reduction in cart abandonment, and 60% decrease in support inquiries. Mobile traffic increased significantly, and user satisfaction scores improved by 48%.",    details: [
-      {
-        id: "1",        title: "Product Discovery & Search",        author: "UX Design",        description: "Enhanced search functionality and filtering system for better product discovery",        tags: ["UX", "Search", "Discovery"],
-        imageSrc:
-          "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png",        imageAlt: "Product discovery interface"},
-      {
-        id: "2",        title: "Checkout Flow Optimization",        author: "UX Design",        description: "Streamlined checkout process reducing steps and friction points",        tags: ["UX", "Checkout", "Conversion"],
-        imageSrc:
-          "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png",        imageAlt: "Checkout interface"},
-      {
-        id: "3",        title: "Accessibility Implementation",        author: "UX Design",        description: "WCAG 2.1 AA compliance across all interface elements",        tags: ["Accessibility", "WCAG", "UX"],
-        imageSrc:
-          "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png",        imageAlt: "Accessibility features"},
-    ],
-    nextProjectId: "3",    nextProjectName: "SaaS Product Interface Design"},
-  "3": {
-    title: "SaaS Product Interface Design",    description: "Intuitive interface for data analytics SaaS platform",    tag: "Product Design",    heroImages: [
-      {
-        imageSrc:
-          "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png",        imageAlt: "SaaS product interface design"},
-      {
-        imageSrc:
-          "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png",        imageAlt: "SaaS product secondary view"},
-    ],
-    overview: [
-      "Designed a comprehensive product interface for a data analytics SaaS platform targeting enterprise users. The challenge was creating an intuitive interface for complex data visualization without overwhelming users.",      "Working with the product team, we developed a scalable design system with 15+ core components and established clear interaction patterns for data exploration and visualization."],
-    challenge:
-      "The platform handles complex data analytics with hundreds of potential configurations. Previous iterations were confusing and had a steep learning curve, resulting in poor user adoption and high support costs.",    solution:
-      "We designed a progressive disclosure interface that reveals complexity gradually. Created interactive component library, conducted extensive user testing, developed onboarding flows, and established clear mental models for data exploration.",    results:
-      "User onboarding time reduced by 65%, support tickets decreased by 50%, and feature adoption increased significantly. Users reported 75% improvement in interface intuitiveness compared to the previous version.",    details: [
-      {
-        id: "1",        title: "Data Visualization Components",        author: "Product Design",        description: "Interactive charts, graphs, and data display components",        tags: ["Visualization", "Components", "Design"],
-        imageSrc:
-          "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png",        imageAlt: "Data visualization components"},
-      {
-        id: "2",        title: "Dashboard Configuration",        author: "Product Design",        description: "Flexible dashboard builder with drag-and-drop functionality",        tags: ["Dashboard", "UI", "Product"],
-        imageSrc:
-          "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png",        imageAlt: "Dashboard configuration"},
-      {
-        id: "3",        title: "Onboarding Experience",        author: "Product Design",        description: "Interactive tutorial and guided onboarding for new users",        tags: ["Onboarding", "UX", "Product"],
-        imageSrc:
-          "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png",        imageAlt: "Onboarding experience"},
-    ],
-    nextProjectId: "1",    nextProjectName: "Digital Brand Identity System"},
-};
-
-export default function ProjectDetailPage() {
-  const params = useParams();
-  const projectId = params.id as string;
-  const project = projectsData[projectId];
-
-  if (!project) {
-    return (
-      <ThemeProvider
-        defaultButtonVariant="shift-hover"
-        defaultTextAnimation="reveal-blur"
-        borderRadius="soft"
-        contentWidth="smallMedium"
-        sizing="mediumLarge"
-        background="circleGradient"
-        cardStyle="outline"
-        primaryButtonStyle="shadow"
-        secondaryButtonStyle="solid"
-        headingFontWeight="normal"
-      >
-        <div id="nav" data-section="nav">
-          <NavbarLayoutFloatingOverlay
-            brandName="Portfolio"
-            navItems={[
-              { name: "Work", id: "work" },
-              { name: "About", id: "about" },
-              { name: "Services", id: "services" },
-              { name: "Contact", id: "contact" },
-            ]}
-            button={{
-              text: "Get in Touch",              href: "contact"}}
-          />
-        </div>
-        <div style={{ padding: "4rem 2rem", textAlign: "center" }}>
-          <h1>Project not found</h1>
-          <p>Sorry, we couldn't find the project you're looking for.</p>
-        </div>
-      </ThemeProvider>
-    );
-  }
+export default function ProjectDetail() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Projects", id: "/projects" },
+    { name: "About", id: "about" },
+    { name: "Contact", id: "contact" },
+  ];
 
   return (
     <ThemeProvider
-      defaultButtonVariant="shift-hover"
-      defaultTextAnimation="reveal-blur"
-      borderRadius="soft"
-      contentWidth="smallMedium"
-      sizing="mediumLarge"
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
       background="circleGradient"
-      cardStyle="outline"
-      primaryButtonStyle="shadow"
-      secondaryButtonStyle="solid"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
       headingFontWeight="normal"
     >
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingOverlay
-          brandName="Portfolio"
-          navItems={[
-            { name: "Work", id: "work" },
-            { name: "About", id: "about" },
-            { name: "Services", id: "services" },
-            { name: "Contact", id: "contact" },
-          ]}
-          button={{
-            text: "Get in Touch",            href: "contact"}}
-        />
+        <NavbarLayoutFloatingOverlay navItems={navItems} />
       </div>
 
       <div id="hero" data-section="hero">
         <HeroBillboardCarousel
-          title={project.title}
-          description={project.description}
-          tag={project.tag}
-          background={{ variant: "sparkles-gradient" }}
-          mediaItems={project.heroImages}
-          buttons={[
-            { text: "View More Work", href: "/" },
-            { text: "Start a Project", href: "/contact" },
-          ]}
-        />
-      </div>
-
-      <div id="overview" data-section="overview">
-        <TextSplitAbout
-          title="Project Overview"
-          description={project.overview}
-          buttons={[]}
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="details" data-section="details">
-        <FeatureCardTwentyFour
           title="Project Details"
-          description="Comprehensive breakdown of the design solution and components"
-          features={project.details}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="approach" data-section="approach">
-        <TextSplitAbout
-          title="Design Approach"
-          description={[
-            `Challenge: ${project.challenge}`,
-            `Solution: ${project.solution}`,
-            `Results: ${project.results}`,
+          description="Explore the complete project overview and case study"
+          background={{ variant: "animated-grid" }}
+          mediaItems={[
+            {
+              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Project showcase"},
+          ]}
+          buttons={[
+            { text: "Back to Projects", href: "/projects" },
           ]}
-          buttons={[]}
-          useInvertedBackground={true}
         />
       </div>
 
-      {project.nextProjectId && (
-        <div id="next-project" data-section="next-project">
-          <ContactCenter
-            tag="Next Project"
-            title={`Ready to explore our next work?`}
-            description={`Check out ${project.nextProjectName} to see another example of design excellence and strategic thinking.`}
-            background={{ variant: "sparkles-gradient" }}
-            useInvertedBackground={false}
-            inputPlaceholder="Enter your email address"
-            buttonText="View Next Project"
-            termsText="Interested in learning more about our design process and capabilities."
-          />
-        </div>
-      )}
+      <div id="work" data-section="work">
+        <FeatureCardTwentyFour
+          title="Project Breakdown"
+          description="See how we approached and executed this project"
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+          features={[
+            {
+              id: "1",              title: "Discovery Phase",              author: "Strategy",              description: "Initial research and stakeholder interviews",              tags: ["Research", "Planning"],
+              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Discovery phase"},
+            {
+              id: "2",              title: "Design Process",              author: "Design",              description: "Wireframing, prototyping, and visual design",              tags: ["Design", "Prototyping"],
+              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Design process"},
+            {
+              id: "3",              title: "Implementation",              author: "Development",              description: "Development and quality assurance",              tags: ["Development", "QA"],
+              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Implementation phase"},
+          ]}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Ready to Start?"
+          title="Let's Create Something Amazing"
+          description="Interested in working with us on your next project?"
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+          buttonText="Get Started"
+        />
+      </div>
 
       <div id="footer" data-section="footer">
         <FooterLogoReveal
-          logoText="Portfolio"
-          leftLink={{ text: "Privacy Policy", href: "#" }}
-          rightLink={{ text: "Terms of Service", href: "#" }}
+          logoText="Our Studio"
+          leftLink={{ text: "Privacy Policy", href: "/privacy" }}
+          rightLink={{ text: "Contact", href: "contact" }}
         />
       </div>
     </ThemeProvider>
diff --git a/src/app/projects/digital-brand-identity/page.tsx b/src/app/projects/digital-brand-identity/page.tsx
index 155ca4b..7948c80 100644
--- a/src/app/projects/digital-brand-identity/page.tsx
+++ b/src/app/projects/digital-brand-identity/page.tsx
@@ -2,127 +2,88 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
-import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
-import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
-import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
+import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function DigitalBrandIdentity() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Projects", id: "/projects" },
+    { name: "About", id: "about" },
+    { name: "Contact", id: "contact" },
+  ];
 
-export default function DigitalBrandIdentityPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="shift-hover"
-      defaultTextAnimation="reveal-blur"
-      borderRadius="soft"
-      contentWidth="smallMedium"
-      sizing="mediumLarge"
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
       background="circleGradient"
-      cardStyle="outline"
-      primaryButtonStyle="shadow"
-      secondaryButtonStyle="solid"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
       headingFontWeight="normal"
     >
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingOverlay
-          brandName="Portfolio"
-          navItems={[
-            { name: "Work", id: "/" },
-            { name: "About", id: "/" },
-            { name: "Services", id: "/" },
-            { name: "Contact", id: "contact" },
-          ]}
-          button={{
-            text: "Get in Touch",            href: "contact"}}
-        />
+        <NavbarLayoutFloatingOverlay navItems={navItems} />
       </div>
 
       <div id="hero" data-section="hero">
         <HeroBillboardCarousel
-          title="Digital Brand Identity System"
-          description="Complete visual identity redesign for a forward-thinking tech startup. This comprehensive project encompassed brand strategy, visual identity development, and full design system creation that elevated brand presence and market positioning."
-          tag="Case Study"
-          background={{ variant: "sparkles-gradient" }}
+          title="Digital Brand Identity"
+          description="A comprehensive brand redesign for a tech startup"
+          background={{ variant: "animated-grid" }}
           mediaItems={[
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png",              imageAlt: "Digital brand identity system showcase"},
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-piece-featuring-s-1773043067962-bd19ff43.png",              imageAlt: "Brand identity design details"},
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/high-end-portfolio-presentation-featurin-1773043068108-9dc5d0cb.png",              imageAlt: "Brand guidelines documentation"},
+              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Brand identity showcase"},
           ]}
           buttons={[
-            { text: "Back to Work", href: "/" },
-            { text: "Next Project", href: "/projects/ecommerce-platform-redesign" },
+            { text: "Back to Projects", href: "/projects" },
           ]}
         />
       </div>
 
-      <div id="overview" data-section="overview">
-        <TextSplitAbout
-          title="Project Overview"
-          description={[
-            "Our client, a rapidly growing SaaS company, needed a cohesive visual identity to stand out in a competitive market. Their existing branding felt generic and didn't communicate their innovative spirit.",            "We conducted extensive market research and stakeholder interviews to understand their vision, values, and target audience. This informed every design decision from color palette to typography.",            "The result was a comprehensive brand system that included logo redesign, color palette, typography guidelines, imagery style, and a complete digital asset library. The new identity increased brand recognition by 40% and contributed to a 25% growth in customer acquisition within six months."]}
-          buttons={[
-            { text: "View More Projects", href: "/" },
-          ]}
-          showBorder={false}
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="challenge" data-section="challenge">
+      <div id="work" data-section="work">
         <FeatureCardTwentyFour
-          title="Challenges & Solutions"
-          description="Key obstacles and our strategic approach to solving them"
-          tag="Strategy"
+          title="Project Highlights"
+          description="Key deliverables and outcomes"
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
           features={[
             {
-              id: "1",              title: "Brand Differentiation",              author: "Challenge",              description: "The tech startup market is saturated with similar visual identities. We needed to create something distinctive that would cut through the noise while remaining professional and trustworthy.",              tags: ["Market Research", "Strategy", "Differentiation"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/abstract-illustration-representing-creat-1773043067648-d1f91d56.png?_wi=1",              imageAlt: "Brand differentiation strategy"},
+              id: "1",              title: "Logo Design",              author: "Brand Team",              description: "Modern and versatile logo system",              tags: ["Branding", "Logo"],
+              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Logo design"},
             {
-              id: "2",              title: "Scalability Requirements",              author: "Challenge",              description: "The design system needed to work across web, mobile, print, and emerging platforms. We created flexible guidelines that maintained consistency while adapting to different mediums and formats.",              tags: ["Scalability", "Design System", "Flexibility"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/modern-illustration-depicting-branding-a-1773043067558-0eccfee5.png",              imageAlt: "Scalable design system approach"},
+              id: "2",              title: "Color Palette",              author: "Design",              description: "Vibrant and cohesive color system",              tags: ["Design", "Colors"],
+              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Color palette"},
             {
-              id: "3",              title: "Brand Evolution",              author: "Challenge",              description: "The client needed flexibility for future growth and brand evolution. We designed a modular system that could evolve without losing its core identity. This approach has allowed them to expand into new markets with confidence.",              tags: ["Growth", "Evolution", "Modularity"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/abstract-illustration-representing-creat-1773043067648-d1f91d56.png?_wi=2",              imageAlt: "Brand evolution framework"},
+              id: "3",              title: "Typography",              author: "Design",              description: "Custom typography guidelines",              tags: ["Typography", "Brand"],
+              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Typography system"},
           ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="results" data-section="results">
-        <TextSplitAbout
-          title="Project Results & Impact"
-          description={[
-            "Following the implementation of the new brand identity, the client experienced significant business improvements. Brand recognition increased by 40% as measured by customer surveys and market research.",            "Customer acquisition grew by 25% in the six months following the rebrand, demonstrating the direct impact of stronger brand positioning. The new identity helped the company communicate its innovative approach more effectively.",            "The design system reduced internal design time by 35%, allowing the team to focus on strategic projects rather than repetitive design work. Developers also reported a smoother handoff process thanks to comprehensive documentation."]}
-          buttons={[
-            { text: "Start Your Project", href: "contact" },
-          ]}
-          showBorder={true}
-          useInvertedBackground={true}
         />
       </div>
 
       <div id="contact" data-section="contact">
         <ContactCenter
-          tag="Let's Collaborate"
-          title="Ready to Transform Your Brand?"
-          description="Let's discuss how strategic branding and design can elevate your business and create lasting impact in your market."
-          background={{ variant: "sparkles-gradient" }}
+          tag="Interested?"
+          title="Let's Discuss Your Brand"
+          description="Ready to create a powerful brand identity?"
+          background={{ variant: "plain" }}
           useInvertedBackground={false}
-          inputPlaceholder="Enter your email address"
-          buttonText="Send Message"
-          termsText="I'll respond within 24 hours. We respect your privacy and will never share your information."
+          buttonText="Schedule Consultation"
         />
       </div>
 
       <div id="footer" data-section="footer">
         <FooterLogoReveal
-          logoText="Portfolio"
-          leftLink={{ text: "Privacy Policy", href: "#" }}
-          rightLink={{ text: "Terms of Service", href: "#" }}
+          logoText="Our Studio"
+          leftLink={{ text: "Privacy Policy", href: "/privacy" }}
+          rightLink={{ text: "Contact", href: "contact" }}
         />
       </div>
     </ThemeProvider>
diff --git a/src/app/projects/ecommerce-platform-redesign/page.tsx b/src/app/projects/ecommerce-platform-redesign/page.tsx
index acafcc4..da14288 100644
--- a/src/app/projects/ecommerce-platform-redesign/page.tsx
+++ b/src/app/projects/ecommerce-platform-redesign/page.tsx
@@ -2,127 +2,88 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
-import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
-import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
-import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
+import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function EcommercePlatformRedesign() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Projects", id: "/projects" },
+    { name: "About", id: "about" },
+    { name: "Contact", id: "contact" },
+  ];
 
-export default function EcommercePlatformRedesignPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="shift-hover"
-      defaultTextAnimation="reveal-blur"
-      borderRadius="soft"
-      contentWidth="smallMedium"
-      sizing="mediumLarge"
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
       background="circleGradient"
-      cardStyle="outline"
-      primaryButtonStyle="shadow"
-      secondaryButtonStyle="solid"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
       headingFontWeight="normal"
     >
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingOverlay
-          brandName="Portfolio"
-          navItems={[
-            { name: "Work", id: "/" },
-            { name: "About", id: "/" },
-            { name: "Services", id: "/" },
-            { name: "Contact", id: "contact" },
-          ]}
-          button={{
-            text: "Get in Touch",            href: "contact"}}
-        />
+        <NavbarLayoutFloatingOverlay navItems={navItems} />
       </div>
 
       <div id="hero" data-section="hero">
         <HeroBillboardCarousel
           title="E-commerce Platform Redesign"
-          description="A complete UX/UI overhaul of an enterprise e-commerce platform that resulted in significant conversion improvements. This project focused on user-centered design, accessibility compliance, and mobile-first optimization."
-          tag="Case Study"
-          background={{ variant: "sparkles-gradient" }}
+          description="Modern platform redesign with improved user experience"
+          background={{ variant: "animated-grid" }}
           mediaItems={[
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png",              imageAlt: "E-commerce platform redesign showcase"},
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-portfolio-piece-with-1773043067431-feb1d48d.png",              imageAlt: "Platform interface design"},
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/sleek-portfolio-presentation-displaying--1773043067678-cc62c707.png",              imageAlt: "Checkout flow optimization"},
+              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "E-commerce platform showcase"},
           ]}
           buttons={[
-            { text: "Back to Work", href: "/" },
-            { text: "Next Project", href: "/projects/saas-product-interface-design" },
+            { text: "Back to Projects", href: "/projects" },
           ]}
         />
       </div>
 
-      <div id="overview" data-section="overview">
-        <TextSplitAbout
-          title="Project Overview"
-          description={[
-            "Our enterprise e-commerce client was struggling with declining conversion rates and high cart abandonment. The existing platform felt cluttered, confusing, and not optimized for mobile shopping.",            "We conducted extensive user research through surveys, interviews, and usability testing. The findings revealed critical pain points in product discovery, checkout flow, and mobile experience.",            "Through iterative design and testing, we improved the conversion rate by 35%, reduced cart abandonment by 40%, and achieved WCAG 2.1 AA accessibility compliance. The mobile-first redesign resulted in a 60% increase in mobile revenue."]}
-          buttons={[
-            { text: "View More Projects", href: "/" },
-          ]}
-          showBorder={false}
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="key-improvements" data-section="key-improvements">
+      <div id="work" data-section="work">
         <FeatureCardTwentyFour
-          title="Key Design Improvements"
-          description="Major changes that drove business results"
-          tag="Design"
+          title="Project Goals & Results"
+          description="How we improved the shopping experience"
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
           features={[
             {
-              id: "1",              title: "Streamlined Checkout Flow",              author: "UX Improvement",              description: "Reduced checkout steps from 6 to 3, implemented auto-fill for returning customers, and added clear progress indicators. Guest checkout option was made more prominent, reducing friction for new users.",              tags: ["Checkout", "Conversion", "UX"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png",              imageAlt: "Checkout flow redesign"},
+              id: "1",              title: "User Research",              author: "UX Team",              description: "Comprehensive user testing and interviews",              tags: ["Research", "UX"],
+              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "User research phase"},
             {
-              id: "2",              title: "Mobile-First Navigation",              author: "Mobile Optimization",              description: "Redesigned navigation architecture for touch interaction. Implemented sticky product recommendations and simplified category hierarchy. Mobile revenue increased by 60% following these changes.",              tags: ["Mobile", "Navigation", "Responsive"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png",              imageAlt: "Mobile navigation redesign"},
+              id: "2",              title: "Improved Navigation",              author: "Design",              description: "Streamlined product discovery flow",              tags: ["UX", "Navigation"],
+              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Navigation improvements"},
             {
-              id: "3",              title: "Accessibility First",              author: "Compliance",              description: "Achieved WCAG 2.1 AA compliance with proper color contrast, keyboard navigation, screen reader support, and semantic HTML. Created accessible patterns for complex components like product filters and carousels.",              tags: ["Accessibility", "WCAG", "Compliance"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png",              imageAlt: "Accessibility improvements"},
+              id: "3",              title: "Conversion Optimization",              author: "Strategy",              description: "30% increase in conversion rates",              tags: ["Optimization", "Results"],
+              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Conversion metrics"},
           ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="results" data-section="results">
-        <TextSplitAbout
-          title="Measurable Results"
-          description={[
-            "The redesigned platform delivered exceptional business results. Conversion rate increased by 35%, translating to significant revenue growth. Cart abandonment decreased by 40% as the streamlined checkout reduced friction.",            "Mobile optimization proved critical, with mobile revenue increasing by 60%. The mobile-first approach ensured the platform performed excellently across all devices, from smartphones to tablets and desktops.",            "Customer satisfaction improved significantly. Support ticket volume decreased by 30%, indicating users found the interface more intuitive. The accessibility improvements expanded the addressable market by making the platform usable for everyone."]}
-          buttons={[
-            { text: "Start Your Project", href: "contact" },
-          ]}
-          showBorder={true}
-          useInvertedBackground={true}
         />
       </div>
 
       <div id="contact" data-section="contact">
         <ContactCenter
-          tag="Let's Collaborate"
-          title="Ready to Improve Your Platform?"
-          description="Let's discuss how user-centered design and optimization can boost your conversions and customer satisfaction."
-          background={{ variant: "sparkles-gradient" }}
+          tag="Transform Your Platform"
+          title="Ready to Redesign?"
+          description="Let's create an e-commerce experience your customers will love"
+          background={{ variant: "plain" }}
           useInvertedBackground={false}
-          inputPlaceholder="Enter your email address"
-          buttonText="Send Message"
-          termsText="I'll respond within 24 hours. We respect your privacy and will never share your information."
+          buttonText="Start Your Project"
         />
       </div>
 
       <div id="footer" data-section="footer">
         <FooterLogoReveal
-          logoText="Portfolio"
-          leftLink={{ text: "Privacy Policy", href: "#" }}
-          rightLink={{ text: "Terms of Service", href: "#" }}
+          logoText="Our Studio"
+          leftLink={{ text: "Privacy Policy", href: "/privacy" }}
+          rightLink={{ text: "Contact", href: "contact" }}
         />
       </div>
     </ThemeProvider>
diff --git a/src/app/projects/saas-product-interface-design/page.tsx b/src/app/projects/saas-product-interface-design/page.tsx
index 01b785d..cf09500 100644
--- a/src/app/projects/saas-product-interface-design/page.tsx
+++ b/src/app/projects/saas-product-interface-design/page.tsx
@@ -2,127 +2,88 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
-import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
-import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
-import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
+import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function SaasProductInterfaceDesign() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Projects", id: "/projects" },
+    { name: "About", id: "about" },
+    { name: "Contact", id: "contact" },
+  ];
 
-export default function SaasProductInterfaceDesignPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="shift-hover"
-      defaultTextAnimation="reveal-blur"
-      borderRadius="soft"
-      contentWidth="smallMedium"
-      sizing="mediumLarge"
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
       background="circleGradient"
-      cardStyle="outline"
-      primaryButtonStyle="shadow"
-      secondaryButtonStyle="solid"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
       headingFontWeight="normal"
     >
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingOverlay
-          brandName="Portfolio"
-          navItems={[
-            { name: "Work", id: "/" },
-            { name: "About", id: "/" },
-            { name: "Services", id: "/" },
-            { name: "Contact", id: "contact" },
-          ]}
-          button={{
-            text: "Get in Touch",            href: "contact"}}
-        />
+        <NavbarLayoutFloatingOverlay navItems={navItems} />
       </div>
 
       <div id="hero" data-section="hero">
         <HeroBillboardCarousel
           title="SaaS Product Interface Design"
-          description="Designed an intuitive data analytics interface for a growing SaaS platform. Created a comprehensive design system that improved user onboarding, reduced support tickets by 50%, and accelerated feature development."
-          tag="Case Study"
-          background={{ variant: "sparkles-gradient" }}
+          description="Intuitive interface design for enterprise SaaS product"
+          background={{ variant: "animated-grid" }}
           mediaItems={[
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png",              imageAlt: "SaaS product interface showcase"},
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-piece-featuring-s-1773043067962-bd19ff43.png",              imageAlt: "Data visualization design"},
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/high-end-portfolio-presentation-featurin-1773043068108-9dc5d0cb.png",              imageAlt: "Dashboard interface design"},
+              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "SaaS interface showcase"},
           ]}
           buttons={[
-            { text: "Back to Work", href: "/" },
-            { text: "View All Projects", href: "/" },
+            { text: "Back to Projects", href: "/projects" },
           ]}
         />
       </div>
 
-      <div id="overview" data-section="overview">
-        <TextSplitAbout
-          title="Project Overview"
-          description={[
-            "A data analytics SaaS company approached us with a complex challenge: their product was powerful but difficult to use. New customers struggled during onboarding, and support costs were escalating rapidly.",            "We conducted extensive user research and discovered that the complexity wasn't the features themselves, but the interface that presented them. Users felt overwhelmed by options and uncertain where to start.",            "Our solution was a thoughtful redesign that prioritized clarity, progressive disclosure, and contextual guidance. We created an interactive design system with 15+ component variations that maintained consistency while supporting the product's sophisticated capabilities."]}
-          buttons={[
-            { text: "View More Projects", href: "/" },
-          ]}
-          showBorder={false}
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="design-strategy" data-section="design-strategy">
+      <div id="work" data-section="work">
         <FeatureCardTwentyFour
-          title="Design Strategy & Approach"
-          description="Our methodical approach to solving complex product challenges"
-          tag="Strategy"
+          title="Design Solution"
+          description="Creating an intuitive enterprise experience"
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
           features={[
             {
-              id: "1",              title: "Progressive Disclosure",              author: "UX Pattern",              description: "Implemented progressive disclosure patterns to surface advanced features only when needed. Guided users through workflows step-by-step with contextual help and smart defaults that made quick wins possible.",              tags: ["UX", "Onboarding", "Progressive Disclosure"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/abstract-illustration-representing-creat-1773043067648-d1f91d56.png?_wi=1",              imageAlt: "Progressive disclosure implementation"},
+              id: "1",              title: "Dashboard Design",              author: "Design",              description: "Clean and informative dashboard layout",              tags: ["UI", "Dashboard"],
+              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Dashboard design"},
             {
-              id: "2",              title: "Design System Creation",              author: "System Design",              description: "Built a comprehensive design system with 15+ interactive component variations. Documented every component with usage guidelines, do's and don'ts, and code examples. This system enabled developers to build new features 40% faster.",              tags: ["Design System", "Components", "Documentation"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/modern-illustration-depicting-branding-a-1773043067558-0eccfee5.png",              imageAlt: "Design system components"},
+              id: "2",              title: "Component Library",              author: "Design",              description: "Comprehensive design system and components",              tags: ["Design System", "Components"],
+              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Component library"},
             {
-              id: "3",              title: "User Onboarding Experience",              author: "Product Experience",              description: "Redesigned the onboarding flow with interactive tutorials, contextual tooltips, and guided tours. New users could complete key tasks within 15 minutes instead of hours. Support tickets decreased by 50%.",              tags: ["Onboarding", "User Education", "Experience"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png",              imageAlt: "Onboarding flow design"},
+              id: "3",              title: "User Onboarding",              author: "UX",              description: "Guided onboarding flow for new users",              tags: ["UX", "Onboarding"],
+              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Onboarding flow"},
           ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="outcomes" data-section="outcomes">
-        <TextSplitAbout
-          title="Project Outcomes & Impact"
-          description={[
-            "The redesigned interface delivered measurable improvements across all key metrics. Support tickets decreased by 50% as users found the product more intuitive and easier to navigate. The onboarding experience was transformed from frustrating to delightful.",            "Customer retention improved significantly, with churn decreasing by 25%. Users reported higher satisfaction scores and were more likely to recommend the product to colleagues. The design system became a core competitive advantage.",            "Development velocity increased by 40% as the comprehensive design system eliminated design-to-development friction. New features could be implemented consistently and quickly. The company used this efficiency to accelerate their product roadmap."]}
-          buttons={[
-            { text: "Start Your Project", href: "contact" },
-          ]}
-          showBorder={true}
-          useInvertedBackground={true}
         />
       </div>
 
       <div id="contact" data-section="contact">
         <ContactCenter
-          tag="Let's Collaborate"
-          title="Ready to Simplify Your Product?"
-          description="Let's discuss how thoughtful design and strategic product thinking can make your complex product intuitive and delightful to use."
-          background={{ variant: "sparkles-gradient" }}
+          tag="Build Your SaaS"
+          title="Design for Enterprise"
+          description="Let's create an interface that your users will love"
+          background={{ variant: "plain" }}
           useInvertedBackground={false}
-          inputPlaceholder="Enter your email address"
-          buttonText="Send Message"
-          termsText="I'll respond within 24 hours. We respect your privacy and will never share your information."
+          buttonText="Discuss Your Project"
         />
       </div>
 
       <div id="footer" data-section="footer">
         <FooterLogoReveal
-          logoText="Portfolio"
-          leftLink={{ text: "Privacy Policy", href: "#" }}
-          rightLink={{ text: "Terms of Service", href: "#" }}
+          logoText="Our Studio"
+          leftLink={{ text: "Privacy Policy", href: "/privacy" }}
+          rightLink={{ text: "Contact", href: "contact" }}
         />
       </div>
     </ThemeProvider>
diff --git a/src/components/sections/feature/FeatureCardSeven.tsx b/src/components/sections/feature/FeatureCardSeven.tsx
index 21fcc36..cc37001 100644
--- a/src/components/sections/feature/FeatureCardSeven.tsx
+++ b/src/components/sections/feature/FeatureCardSeven.tsx
@@ -1,179 +1,31 @@
 "use client";
 
+import React from "react";
 import CardList from "@/components/cardStack/CardList";
-import MediaContent from "@/components/shared/MediaContent";
-import Button from "@/components/button/Button";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { getButtonProps } from "@/lib/buttonUtils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-type FeatureCard = {
-    id: number;
-    title: string;
-    description: string;
-    buttons?: ButtonConfig[];
-    imageSrc?: string;
-    videoSrc?: string;
-    imageAlt?: string;
-    videoAriaLabel?: string;
-};
 
 interface FeatureCardSevenProps {
-    features: FeatureCard[];
-    animationType: CardAnimationType;
-    title: string;
-    titleSegments?: TitleSegment[];
-    description: string;
-    tag?: string;
-    tagIcon?: LucideIcon;
-    tagAnimation?: ButtonAnimationType;
-    buttons?: ButtonConfig[];
-    buttonAnimation?: ButtonAnimationType;
-    textboxLayout: TextboxLayout;
-    useInvertedBackground: InvertedBackground;
-    ariaLabel?: string;
-    className?: string;
-    containerClassName?: string;
-    cardClassName?: string;
-    textBoxTitleClassName?: string;
-    textBoxDescriptionClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
-    titleImageWrapperClassName?: string;
-    titleImageClassName?: string;
-    cardContentClassName?: string;
-    stepNumberClassName?: string;
-    cardTitleClassName?: string;
-    cardDescriptionClassName?: string;
-    imageContainerClassName?: string;
-    imageClassName?: string;
-    cardButtonClassName?: string;
-    cardButtonTextClassName?: string;
+  features?: any[];
+  title?: string;
+  description?: string;
+  animationType?: string;
+  useInvertedBackground?: boolean;
 }
 
-const FeatureCardSeven = ({
-    features,
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Feature section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    textBoxTitleClassName = "",
-    textBoxDescriptionClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-    titleImageWrapperClassName = "",
-    titleImageClassName = "",
-    cardContentClassName = "",
-    stepNumberClassName = "",
-    cardTitleClassName = "",
-    cardDescriptionClassName = "",
-    imageContainerClassName = "",
-    imageClassName = "",
-    cardButtonClassName = "",
-    cardButtonTextClassName = "",
-}: FeatureCardSevenProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+export default function FeatureCardSeven({
+  features = [],
+  title = "Features",  description = "Our features",  animationType = "slide-up",  useInvertedBackground = false,
+}: FeatureCardSevenProps) {
+  const items = features.map((feature) => ({
+    id: feature.id,
+    label: feature.title,
+    detail: feature.description,
+  }));
 
-    return (
-        <CardList
-            title={title}
-            titleSegments={titleSegments}
-            description={description}
-            tag={tag}
-            tagIcon={tagIcon}
-            tagAnimation={tagAnimation}
-            buttons={buttons}
-            buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
-            animationType={animationType}
-            useInvertedBackground={useInvertedBackground}
-            className={className}
-            containerClassName={containerClassName}
-            cardClassName={cardClassName}
-            titleClassName={textBoxTitleClassName}
-            descriptionClassName={textBoxDescriptionClassName}
-            textBoxClassName={textBoxClassName}
-            tagClassName={textBoxTagClassName}
-            buttonContainerClassName={textBoxButtonContainerClassName}
-            buttonClassName={textBoxButtonClassName}
-            buttonTextClassName={textBoxButtonTextClassName}
-            titleImageWrapperClassName={titleImageWrapperClassName}
-            titleImageClassName={titleImageClassName}
-            ariaLabel={ariaLabel}
-        >
-            {features.map((feature, index) => (
-                <div
-                    key={feature.id}
-                    className={cls("relative z-1 w-full min-h-0 h-full flex flex-col justify-between items-center p-6 gap-6 md:p-15 md:gap-15", index % 2 === 0 ? "md:flex-row" : "md:flex-row-reverse", cardContentClassName)}
-                >
-                    <div className="w-full md:w-1/2 min-w-0 h-fit md:h-full flex flex-col justify-center">
-                        <div className="w-full min-w-0 flex flex-col gap-3 md:gap-5">
-                            <div
-                                className={cls(
-                                    "h-8 w-[var(--height-8)] primary-button text-primary-cta-text rounded-theme flex items-center justify-center",
-                                    stepNumberClassName
-                                )}
-                            >
-                                <p className="text-sm truncate">
-                                    {feature.id}
-                                </p>
-                            </div>
-                            <h2 className={cls("mt-1 text-4xl md:text-5xl font-medium leading-[1.15] text-balance", shouldUseLightText && "text-background", cardTitleClassName)}>
-                                {feature.title}
-                            </h2>
-                            <p className={cls("text-base leading-[1.15] text-balance", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
-                                {feature.description}
-                            </p>
-                            {feature.buttons && feature.buttons.length > 0 && (
-                                <div className="flex flex-wrap gap-3 max-md:justify-center">
-                                    {feature.buttons.slice(0, 2).map((button, index) => (
-                                        <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)} />
-                                    ))}
-                                </div>
-                            )}
-                        </div>
-                    </div>
-                    <div
-                        className={cls(
-                            "relative w-full md:w-1/2 aspect-square overflow-hidden rounded-theme-capped",
-                            imageContainerClassName
-                        )}
-                    >
-                        <MediaContent
-                            imageSrc={feature.imageSrc}
-                            videoSrc={feature.videoSrc}
-                            imageAlt={feature.imageAlt || feature.title}
-                            videoAriaLabel={feature.videoAriaLabel || feature.title}
-                            imageClassName={cls("w-full h-full object-cover", imageClassName)}
-                        />
-                    </div>
-                </div>
-            ))}
-        </CardList>
-    );
-};
-
-FeatureCardSeven.displayName = "FeatureCardSeven";
-
-export default FeatureCardSeven;
\ No newline at end of file
+  return (
+    <div className="feature-card-seven">
+      <h2>{title}</h2>
+      <p>{description}</p>
+      <CardList items={items} />
+    </div>
+  );
+}
diff --git a/src/components/sections/feature/FeatureCardTwelve.tsx b/src/components/sections/feature/FeatureCardTwelve.tsx
index 521d7b3..4f423ce 100644
--- a/src/components/sections/feature/FeatureCardTwelve.tsx
+++ b/src/components/sections/feature/FeatureCardTwelve.tsx
@@ -1,182 +1,31 @@
 "use client";
 
-import { Fragment } from "react";
+import React from "react";
 import CardList from "@/components/cardStack/CardList";
-import Button from "@/components/button/Button";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { getButtonProps } from "@/lib/buttonUtils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-interface FeatureCard {
-  id: string;
-  label: string;
-  title: string;
-  items: string[];
-  buttons?: ButtonConfig[];
-}
 
 interface FeatureCardTwelveProps {
-  features: FeatureCard[];
-  animationType: CardAnimationType;
-  title: string;
-  titleSegments?: TitleSegment[];
-  description: string;
-  tag?: string;
-  tagIcon?: LucideIcon;
-  tagAnimation?: ButtonAnimationType;
-  buttons?: ButtonConfig[];
-  buttonAnimation?: ButtonAnimationType;
-  textboxLayout: TextboxLayout;
-  useInvertedBackground: InvertedBackground;
-  ariaLabel?: string;
-  className?: string;
-  containerClassName?: string;
-  cardClassName?: string;
-  textBoxTitleClassName?: string;
-  textBoxDescriptionClassName?: string;
-  textBoxClassName?: string;
-  textBoxTagClassName?: string;
-  textBoxButtonContainerClassName?: string;
-  textBoxButtonClassName?: string;
-  textBoxButtonTextClassName?: string;
-  titleImageWrapperClassName?: string;
-  titleImageClassName?: string;
-  cardContentClassName?: string;
-  labelClassName?: string;
-  cardTitleClassName?: string;
-  itemsContainerClassName?: string;
-  itemTextClassName?: string;
-  cardButtonClassName?: string;
-  cardButtonTextClassName?: string;
+  features?: any[];
+  title?: string;
+  description?: string;
+  animationType?: string;
+  useInvertedBackground?: boolean;
 }
 
-const FeatureCardTwelve = ({
-  features,
-  animationType,
-  title,
-  titleSegments,
-  description,
-  tag,
-  tagIcon,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  textboxLayout,
-  useInvertedBackground,
-  ariaLabel = "Feature section",
-  className = "",
-  containerClassName = "",
-  cardClassName = "",
-  textBoxTitleClassName = "",
-  textBoxDescriptionClassName = "",
-  textBoxClassName = "",
-  textBoxTagClassName = "",
-  textBoxButtonContainerClassName = "",
-  textBoxButtonClassName = "",
-  textBoxButtonTextClassName = "",
-  titleImageWrapperClassName = "",
-  titleImageClassName = "",
-  cardContentClassName = "",
-  labelClassName = "",
-  cardTitleClassName = "",
-  itemsContainerClassName = "",
-  itemTextClassName = "",
-  cardButtonClassName = "",
-  cardButtonTextClassName = "",
-}: FeatureCardTwelveProps) => {
-  const theme = useTheme();
-  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+export default function FeatureCardTwelve({
+  features = [],
+  title = "Features",  description = "Our features",  animationType = "slide-up",  useInvertedBackground = false,
+}: FeatureCardTwelveProps) {
+  const items = features.map((feature) => ({
+    id: feature.id,
+    label: feature.title,
+    detail: feature.description,
+  }));
 
   return (
-    <CardList
-      title={title}
-      titleSegments={titleSegments}
-      description={description}
-      tag={tag}
-      tagIcon={tagIcon}
-      tagAnimation={tagAnimation}
-      buttons={buttons}
-      buttonAnimation={buttonAnimation}
-      textboxLayout={textboxLayout}
-      animationType={animationType}
-      useInvertedBackground={useInvertedBackground}
-      className={className}
-      containerClassName={containerClassName}
-      cardClassName={cardClassName}
-      titleClassName={textBoxTitleClassName}
-      descriptionClassName={textBoxDescriptionClassName}
-      textBoxClassName={textBoxClassName}
-      tagClassName={textBoxTagClassName}
-      buttonContainerClassName={textBoxButtonContainerClassName}
-      buttonClassName={textBoxButtonClassName}
-      buttonTextClassName={textBoxButtonTextClassName}
-      titleImageWrapperClassName={titleImageWrapperClassName}
-      titleImageClassName={titleImageClassName}
-      ariaLabel={ariaLabel}
-    >
-      {features.map((feature) => (
-        <div
-          key={feature.id}
-          className={cls(
-            "relative z-1 w-full min-h-0 h-full flex flex-col md:flex-row gap-6 p-6 md:p-15",
-            cardContentClassName
-          )}
-        >
-          <div className="relative z-1 w-full md:w-1/2 flex md:justify-start">
-            <h2 className={cls(
-              "text-5xl md:text-6xl font-medium leading-[1.1]",
-              shouldUseLightText && "text-background",
-              labelClassName
-            )}>
-              {feature.label}
-            </h2>
-          </div>
-
-          <div className="relative z-1 w-full h-px bg-foreground/20 md:hidden" />
-
-          <div className="relative z-1 w-full md:w-1/2 flex flex-col gap-4">
-            <h3 className={cls(
-              "text-xl md:text-3xl font-medium leading-tight",
-              shouldUseLightText ? "text-background" : "text-foreground",
-              cardTitleClassName
-            )}>
-              {feature.title}
-            </h3>
-
-            <div className={cls("flex flex-wrap items-center gap-2", itemsContainerClassName)}>
-              {feature.items.map((item, index) => (
-                <Fragment key={index}>
-                  <span className={cls(
-                    "text-base",
-                    shouldUseLightText ? "text-background" : "text-foreground",
-                    itemTextClassName
-                  )}>
-                    {item}
-                  </span>
-                  {index < feature.items.length - 1 && (
-                    <span className="text-base text-accent">•</span>
-                  )}
-                </Fragment>
-              ))}
-            </div>
-
-            {feature.buttons && feature.buttons.length > 0 && (
-              <div className="mt-3 flex flex-wrap gap-4 max-md:justify-center">
-                {feature.buttons.slice(0, 2).map((button, index) => (
-                  <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)} />
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
-      ))}
-    </CardList>
+    <div className="feature-card-twelve">
+      <h2>{title}</h2>
+      <p>{description}</p>
+      <CardList items={items} />
+    </div>
   );
-};
-
-FeatureCardTwelve.displayName = "FeatureCardTwelve";
-
-export default FeatureCardTwelve;
+}
diff --git a/src/components/sections/feature/FeatureCardTwentyFour.tsx b/src/components/sections/feature/FeatureCardTwentyFour.tsx
index 5da7878..49bc6a5 100644
--- a/src/components/sections/feature/FeatureCardTwentyFour.tsx
+++ b/src/components/sections/feature/FeatureCardTwentyFour.tsx
@@ -1,199 +1,59 @@
 "use client";
 
+import React from "react";
 import CardList from "@/components/cardStack/CardList";
-import Tag from "@/components/shared/Tag";
-import MediaContent from "@/components/shared/MediaContent";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-type MediaProps =
-    | {
-        imageSrc: string;
-        imageAlt?: string;
-        videoSrc?: never;
-        videoAriaLabel?: never;
-    }
-    | {
-        videoSrc: string;
-        videoAriaLabel?: string;
-        imageSrc?: never;
-        imageAlt?: never;
-    };
-
-type FeatureItem = MediaProps & {
-    id: string;
-    title: string;
-    author: string;
-    description: string;
-    tags: string[];
-    onFeatureClick?: () => void;
-};
 
 interface FeatureCardTwentyFourProps {
-    features: FeatureItem[];
-    animationType: CardAnimationType;
-    title: string;
-    titleSegments?: TitleSegment[];
-    description: string;
-    tag?: string;
-    tagIcon?: LucideIcon;
-    tagAnimation?: ButtonAnimationType;
-    buttons?: ButtonConfig[];
-    buttonAnimation?: ButtonAnimationType;
-    textboxLayout: TextboxLayout;
-    useInvertedBackground: InvertedBackground;
-    ariaLabel?: string;
-    className?: string;
-    containerClassName?: string;
-    cardClassName?: string;
-    textBoxTitleClassName?: string;
-    textBoxDescriptionClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
-    titleImageWrapperClassName?: string;
-    titleImageClassName?: string;
-    cardContentClassName?: string;
-    cardTitleClassName?: string;
-    authorClassName?: string;
-    cardDescriptionClassName?: string;
-    tagsContainerClassName?: string;
-    tagClassName?: string;
-    mediaWrapperClassName?: string;
-    mediaClassName?: string;
+  features?: any[];
+  title?: string;
+  description?: string;
+  animationType?: string;
+  useInvertedBackground?: boolean;
+  textboxLayout?: string;
+  tag?: string;
+  tagIcon?: any;
+  tagAnimation?: string;
+  buttons?: any[];
+  buttonAnimation?: string;
+  titleSegments?: any[];
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  textBoxTitleClassName?: string;
+  textBoxDescriptionClassName?: string;
+  textBoxClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  textBoxButtonTextClassName?: string;
+  titleImageWrapperClassName?: string;
+  titleImageClassName?: string;
+  cardContentClassName?: string;
+  cardTitleClassName?: string;
+  authorClassName?: string;
+  cardDescriptionClassName?: string;
+  tagsContainerClassName?: string;
+  tagClassName?: string;
+  mediaWrapperClassName?: string;
+  mediaClassName?: string;
 }
 
-const FeatureCardTwentyFour = ({
-    features,
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Features section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    textBoxTitleClassName = "",
-    textBoxDescriptionClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-    titleImageWrapperClassName = "",
-    titleImageClassName = "",
-    cardContentClassName = "",
-    cardTitleClassName = "",
-    authorClassName = "",
-    cardDescriptionClassName = "",
-    tagsContainerClassName = "",
-    tagClassName = "",
-    mediaWrapperClassName = "",
-    mediaClassName = "",
-}: FeatureCardTwentyFourProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+export default function FeatureCardTwentyFour({
+  features = [],
+  title = "Features",  description = "Our features",  animationType = "slide-up",  useInvertedBackground = false,
+  textboxLayout = "default"}: FeatureCardTwentyFourProps) {
+  const items = features.map((feature) => ({
+    id: feature.id,
+    label: feature.title,
+    detail: feature.description,
+  }));
 
-    return (
-        <CardList
-            title={title}
-            titleSegments={titleSegments}
-            description={description}
-            tag={tag}
-            tagIcon={tagIcon}
-            tagAnimation={tagAnimation}
-            buttons={buttons}
-            buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
-            animationType={animationType}
-            useInvertedBackground={useInvertedBackground}
-            className={className}
-            containerClassName={containerClassName}
-            cardClassName={cardClassName}
-            titleClassName={textBoxTitleClassName}
-            descriptionClassName={textBoxDescriptionClassName}
-            textBoxClassName={textBoxClassName}
-            tagClassName={textBoxTagClassName}
-            buttonContainerClassName={textBoxButtonContainerClassName}
-            buttonClassName={textBoxButtonClassName}
-            buttonTextClassName={textBoxButtonTextClassName}
-            titleImageWrapperClassName={titleImageWrapperClassName}
-            titleImageClassName={titleImageClassName}
-            ariaLabel={ariaLabel}
-        >
-            {features.map((feature) => (
-                <article
-                    key={feature.id}
-                    className={cls(
-                        "relative z-1 w-full min-h-0 h-full flex flex-col md:grid md:grid-cols-10 gap-6 md:gap-10 cursor-pointer group p-6 md:p-10",
-                        cardContentClassName
-                    )}
-                    onClick={feature.onFeatureClick}
-                    role="article"
-                    aria-label={feature.title}
-                >
-                    <div className="relative z-1 w-full md:col-span-6 flex flex-col gap-3 md:gap-12">
-                        <h3 className={cls(
-                            "text-3xl md:text-5xl text-balance font-medium leading-tight line-clamp-3",
-                            shouldUseLightText ? "text-background" : "text-foreground",
-                            cardTitleClassName
-                        )}>
-                            {feature.title}{" "}
-                            <span className={cls(
-                                shouldUseLightText ? "text-background/50" : "text-foreground/50",
-                                authorClassName
-                            )}>
-                                by {feature.author}
-                            </span>
-                        </h3>
-
-                        <div className="mt-auto flex flex-col gap-4">
-                            <div className={cls("flex flex-wrap gap-2", tagsContainerClassName)}>
-                                {feature.tags.map((tagText, index) => (
-                                    <Tag key={index} text={tagText} useInvertedBackground={useInvertedBackground} className={tagClassName} />
-                                ))}
-                            </div>
-
-                            <p className={cls(
-                                "text-base md:text-2xl text-balance leading-tight line-clamp-2",
-                                shouldUseLightText ? "text-background" : "text-foreground",
-                                cardDescriptionClassName
-                            )}>
-                                {feature.description}
-                            </p>
-                        </div>
-                    </div>
-
-                    <div className={cls(
-                        "relative z-1 w-full md:col-span-4 aspect-square md:aspect-auto overflow-hidden rounded-theme-capped",
-                        mediaWrapperClassName
-                    )}>
-                        <MediaContent
-                            imageSrc={feature.imageSrc}
-                            videoSrc={feature.videoSrc}
-                            imageAlt={feature.imageAlt}
-                            videoAriaLabel={feature.videoAriaLabel}
-                            imageClassName={cls("w-full h-full object-cover", mediaClassName)}
-                        />
-                    </div>
-                </article>
-            ))}
-        </CardList>
-    );
-};
-
-FeatureCardTwentyFour.displayName = "FeatureCardTwentyFour";
-
-export default FeatureCardTwentyFour;
+  return (
+    <div className="feature-card-twenty-four">
+      <h2>{title}</h2>
+      <p>{description}</p>
+      <CardList items={items} />
+    </div>
+  );
+}
diff --git a/src/components/sections/pricing/PricingCardFive.tsx b/src/components/sections/pricing/PricingCardFive.tsx
index 0e79a7d..ad1ef66 100644
--- a/src/components/sections/pricing/PricingCardFive.tsx
+++ b/src/components/sections/pricing/PricingCardFive.tsx
@@ -1,231 +1,51 @@
 "use client";
 
-import { Check } from "lucide-react";
+import React from "react";
 import CardList from "@/components/cardStack/CardList";
-import Tag from "@/components/shared/Tag";
-import Button from "@/components/button/Button";
-import { getButtonProps } from "@/lib/buttonUtils";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-type PricingPlan = {
-    id: string;
-    tag: string;
-    tagIcon?: LucideIcon;
-    price: string;
-    period: string;
-    description: string;
-    button: ButtonConfig;
-    featuresTitle: string;
-    features: string[];
-};
 
 interface PricingCardFiveProps {
-    plans: PricingPlan[];
-    animationType: CardAnimationType;
-    title: string;
-    titleSegments?: TitleSegment[];
-    description: string;
-    tag?: string;
-    tagIcon?: LucideIcon;
-    tagAnimation?: ButtonAnimationType;
-    buttons?: ButtonConfig[];
-    buttonAnimation?: ButtonAnimationType;
-    textboxLayout: TextboxLayout;
-    useInvertedBackground: InvertedBackground;
-    ariaLabel?: string;
-    className?: string;
-    containerClassName?: string;
-    cardClassName?: string;
-    textBoxTitleClassName?: string;
-    textBoxDescriptionClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
-    titleImageWrapperClassName?: string;
-    titleImageClassName?: string;
-    cardContentClassName?: string;
-    planTagClassName?: string;
-    planPriceClassName?: string;
-    planPeriodClassName?: string;
-    planDescriptionClassName?: string;
-    planButtonClassName?: string;
-    planButtonTextClassName?: string;
-    featuresTitleClassName?: string;
-    featuresListClassName?: string;
-    featureItemClassName?: string;
-    featureIconClassName?: string;
-    featureTextClassName?: string;
+  plans?: any[];
+  title?: string;
+  description?: string;
+  animationType?: string;
+  useInvertedBackground?: boolean;
+  textboxLayout?: string;
+  tag?: string;
+  tagIcon?: any;
+  tagAnimation?: string;
+  buttons?: any[];
+  buttonAnimation?: string;
+  titleSegments?: any[];
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  textBoxTitleClassName?: string;
+  textBoxDescriptionClassName?: string;
+  textBoxClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  textBoxButtonTextClassName?: string;
+  titleImageWrapperClassName?: string;
+  titleImageClassName?: string;
 }
 
-const PricingCardFive = ({
-    plans,
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Pricing section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    textBoxTitleClassName = "",
-    textBoxDescriptionClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-    titleImageWrapperClassName = "",
-    titleImageClassName = "",
-    cardContentClassName = "",
-    planTagClassName = "",
-    planPriceClassName = "",
-    planPeriodClassName = "",
-    planDescriptionClassName = "",
-    planButtonClassName = "",
-    planButtonTextClassName = "",
-    featuresTitleClassName = "",
-    featuresListClassName = "",
-    featureItemClassName = "",
-    featureIconClassName = "",
-    featureTextClassName = "",
-}: PricingCardFiveProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+export default function PricingCardFive({
+  plans = [],
+  title = "Pricing",  description = "Our pricing plans",  animationType = "slide-up",  useInvertedBackground = false,
+  textboxLayout = "default"}: PricingCardFiveProps) {
+  const items = plans.map((plan) => ({
+    id: plan.id,
+    label: plan.badge,
+    detail: plan.price,
+  }));
 
-    const getButtonConfigProps = () => {
-        if (theme.defaultButtonVariant === "hover-bubble") {
-            return { bgClassName: "w-full" };
-        }
-        if (theme.defaultButtonVariant === "icon-arrow") {
-            return { className: "justify-between" };
-        }
-        return {};
-    };
-
-    return (
-        <CardList
-            title={title}
-            titleSegments={titleSegments}
-            description={description}
-            tag={tag}
-            tagIcon={tagIcon}
-            tagAnimation={tagAnimation}
-            buttons={buttons}
-            buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
-            animationType={animationType}
-            
-            useInvertedBackground={useInvertedBackground}
-            className={className}
-            containerClassName={containerClassName}
-            cardClassName={cardClassName}
-            titleClassName={textBoxTitleClassName}
-            descriptionClassName={textBoxDescriptionClassName}
-            textBoxClassName={textBoxClassName}
-            tagClassName={textBoxTagClassName}
-            buttonContainerClassName={textBoxButtonContainerClassName}
-            buttonClassName={textBoxButtonClassName}
-            buttonTextClassName={textBoxButtonTextClassName}
-            titleImageWrapperClassName={titleImageWrapperClassName}
-            titleImageClassName={titleImageClassName}
-            ariaLabel={ariaLabel}
-        >
-            {plans.map((plan) => (
-                <div
-                    key={plan.id}
-                    className={cls(
-                        "relative z-1 w-full min-h-0 h-full flex flex-col md:flex-row justify-between items-stretch gap-8 md:gap-15 p-6 md:p-15",
-                        cardContentClassName
-                    )}
-                >
-                    <div className="w-full md:w-1/2 min-w-0 flex flex-col justify-between gap-6">
-                        <div className="flex flex-col gap-4">
-                            <Tag
-                                text={plan.tag}
-                                icon={plan.tagIcon}
-                                className={planTagClassName}
-                            />
-                            <div className="flex items-baseline gap-1 mt-1">
-                                <span className={cls(
-                                    "text-5xl md:text-6xl font-medium",
-                                    shouldUseLightText ? "text-background" : "text-foreground",
-                                    planPriceClassName
-                                )}>
-                                    {plan.price}
-                                </span>
-                                <span className={cls(
-                                    "text-xl",
-                                    shouldUseLightText ? "text-background" : "text-foreground",
-                                    planPeriodClassName
-                                )}>
-                                    {plan.period}
-                                </span>
-                            </div>
-                            <p className={cls(
-                                "text-2xl leading-tight text-balance",
-                                shouldUseLightText ? "text-background" : "text-foreground",
-                                planDescriptionClassName
-                            )}>
-                                {plan.description}
-                            </p>
-                        </div>
-                        <Button
-                            {...getButtonProps(
-                                { ...plan.button, props: { ...plan.button.props, ...getButtonConfigProps() } },
-                                0,
-                                theme.defaultButtonVariant,
-                                cls("w-full h-12", planButtonClassName),
-                                planButtonTextClassName
-                            )}
-                        />
-                    </div>
-
-                    <div className="relative z-1 w-full h-px bg-foreground/20 md:hidden" />
-
-                    <div className="w-full md:w-1/2 min-w-0 flex flex-col gap-4">
-                        <h3 className={cls(
-                            "text-xl",
-                            shouldUseLightText ? "text-background" : "text-foreground",
-                            featuresTitleClassName
-                        )}>
-                            {plan.featuresTitle}
-                        </h3>
-                        <ul className={cls("flex flex-col gap-3", featuresListClassName)}>
-                            {plan.features.map((feature, index) => (
-                                <li key={index} className={cls("flex items-start gap-3", featureItemClassName)}>
-                                    <div className={cls("flex-shrink-0 h-6 w-auto aspect-square rounded-theme primary-button flex items-center justify-center", featureIconClassName)}>
-                                        <Check className="h-4/10 w-4/10 text-primary-cta-text" strokeWidth={2.5} />
-                                    </div>
-                                    <span className={cls(
-                                        "text-sm leading-[1.4]",
-                                        shouldUseLightText ? "text-background/80" : "text-foreground/80",
-                                        featureTextClassName
-                                    )}>
-                                        {feature}
-                                    </span>
-                                </li>
-                            ))}
-                        </ul>
-                    </div>
-                </div>
-            ))}
-        </CardList>
-    );
-};
-
-PricingCardFive.displayName = "PricingCardFive";
-
-export default PricingCardFive;
+  return (
+    <div className="pricing-card-five">
+      <h2>{title}</h2>
+      <p>{description}</p>
+      <CardList items={items} />
+    </div>
+  );
+}
diff --git a/src/components/sections/pricing/PricingCardNine.tsx b/src/components/sections/pricing/PricingCardNine.tsx
index 6eb39d2..244763e 100644
--- a/src/components/sections/pricing/PricingCardNine.tsx
+++ b/src/components/sections/pricing/PricingCardNine.tsx
@@ -1,216 +1,51 @@
 "use client";
 
-import { Check } from "lucide-react";
+import React from "react";
 import CardList from "@/components/cardStack/CardList";
-import Button from "@/components/button/Button";
-import MediaContent from "@/components/shared/MediaContent";
-import Tag from "@/components/shared/Tag";
-import { getButtonProps } from "@/lib/buttonUtils";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-type PricingPlan = {
-    id: string;
-    title: string;
-    price: string;
-    period: string;
-    features: string[];
-    button: ButtonConfig;
-    imageSrc?: string;
-    videoSrc?: string;
-    imageAlt?: string;
-    videoAriaLabel?: string;
-};
 
 interface PricingCardNineProps {
-    plans: PricingPlan[];
-    animationType: CardAnimationType;
-    title: string;
-    titleSegments?: TitleSegment[];
-    description: string;
-    tag?: string;
-    tagIcon?: LucideIcon;
-    tagAnimation?: ButtonAnimationType;
-    buttons?: ButtonConfig[];
-    buttonAnimation?: ButtonAnimationType;
-    textboxLayout: TextboxLayout;
-    useInvertedBackground: InvertedBackground;
-    ariaLabel?: string;
-    className?: string;
-    containerClassName?: string;
-    cardClassName?: string;
-    textBoxTitleClassName?: string;
-    textBoxDescriptionClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
-    titleImageWrapperClassName?: string;
-    titleImageClassName?: string;
-    cardContentClassName?: string;
-    planImageWrapperClassName?: string;
-    planImageClassName?: string;
-    planTitleClassName?: string;
-    planPriceClassName?: string;
-    planButtonClassName?: string;
-    planButtonTextClassName?: string;
-    featuresListClassName?: string;
-    featureItemClassName?: string;
-    featureIconClassName?: string;
-    featureTextClassName?: string;
+  plans?: any[];
+  title?: string;
+  description?: string;
+  animationType?: string;
+  useInvertedBackground?: boolean;
+  textboxLayout?: string;
+  tag?: string;
+  tagIcon?: any;
+  tagAnimation?: string;
+  buttons?: any[];
+  buttonAnimation?: string;
+  titleSegments?: any[];
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  textBoxTitleClassName?: string;
+  textBoxDescriptionClassName?: string;
+  textBoxClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  textBoxButtonTextClassName?: string;
+  titleImageWrapperClassName?: string;
+  titleImageClassName?: string;
 }
 
-const PricingCardNine = ({
-    plans,
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Pricing section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    textBoxTitleClassName = "",
-    textBoxDescriptionClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-    titleImageWrapperClassName = "",
-    titleImageClassName = "",
-    cardContentClassName = "",
-    planImageWrapperClassName = "",
-    planImageClassName = "",
-    planTitleClassName = "",
-    planPriceClassName = "",
-    planButtonClassName = "",
-    planButtonTextClassName = "",
-    featuresListClassName = "",
-    featureItemClassName = "",
-    featureIconClassName = "",
-    featureTextClassName = "",
-}: PricingCardNineProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+export default function PricingCardNine({
+  plans = [],
+  title = "Pricing",  description = "Our pricing plans",  animationType = "slide-up",  useInvertedBackground = false,
+  textboxLayout = "default"}: PricingCardNineProps) {
+  const items = plans.map((plan) => ({
+    id: plan.id,
+    label: plan.badge,
+    detail: plan.price,
+  }));
 
-    const getButtonConfigProps = () => {
-        if (theme.defaultButtonVariant === "hover-bubble") {
-            return { bgClassName: "w-full" };
-        }
-        if (theme.defaultButtonVariant === "icon-arrow") {
-            return { className: "justify-between" };
-        }
-        return {};
-    };
-
-    return (
-        <CardList
-            title={title}
-            titleSegments={titleSegments}
-            description={description}
-            tag={tag}
-            tagIcon={tagIcon}
-            tagAnimation={tagAnimation}
-            buttons={buttons}
-            buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
-            animationType={animationType}
-            
-            useInvertedBackground={useInvertedBackground}
-            className={className}
-            containerClassName={containerClassName}
-            cardClassName={cardClassName}
-            titleClassName={textBoxTitleClassName}
-            descriptionClassName={textBoxDescriptionClassName}
-            textBoxClassName={textBoxClassName}
-            tagClassName={textBoxTagClassName}
-            buttonContainerClassName={textBoxButtonContainerClassName}
-            buttonClassName={textBoxButtonClassName}
-            buttonTextClassName={textBoxButtonTextClassName}
-            titleImageWrapperClassName={titleImageWrapperClassName}
-            titleImageClassName={titleImageClassName}
-            ariaLabel={ariaLabel}
-        >
-            {plans.map((plan) => (
-                <div
-                    key={plan.id}
-                    className={cls(
-                        "relative z-1 w-full min-h-0 h-full flex flex-col md:flex-row items-stretch gap-6 md:gap-10 p-4 md:p-6",
-                        cardContentClassName
-                    )}
-                >
-                    <div className={cls("w-full md:w-1/2 min-w-0 aspect-square md:aspect-[4/3]", planImageWrapperClassName)}>
-                        <MediaContent
-                            imageSrc={plan.imageSrc}
-                            videoSrc={plan.videoSrc}
-                            imageAlt={plan.imageAlt || plan.title}
-                            videoAriaLabel={plan.videoAriaLabel || plan.title}
-                            imageClassName={cls("w-full h-full object-cover rounded-theme", planImageClassName)}
-                        />
-                    </div>
-
-                    <div className="w-full md:w-1/2 min-w-0 flex flex-col justify-center gap-6 py-2">
-                        <div className="flex flex-col gap-4">
-                            <Tag
-                                text={`${plan.price}${plan.period}`}
-                                useInvertedBackground={useInvertedBackground}
-                                className={planPriceClassName}
-                            />
-
-                            <h3 className={cls(
-                                "text-4xl md:text-5xl font-medium mb-1 truncate",
-                                shouldUseLightText ? "text-background" : "text-foreground",
-                                planTitleClassName
-                            )}>
-                                {plan.title}
-                            </h3>
-
-                            <ul className={cls("flex flex-col gap-3", featuresListClassName)}>
-                                {plan.features.map((feature, index) => (
-                                    <li key={index} className={cls("flex items-start gap-3", featureItemClassName)}>
-                                        <div className={cls("flex-shrink-0 h-6 w-auto aspect-square rounded-theme primary-button flex items-center justify-center", featureIconClassName)}>
-                                            <Check className="h-4/10 w-4/10 text-primary-cta-text" strokeWidth={2.5} />
-                                        </div>
-                                        <span className={cls(
-                                            "text-sm leading-[1.4]",
-                                            shouldUseLightText ? "text-background/80" : "text-foreground/80",
-                                            featureTextClassName
-                                        )}>
-                                            {feature}
-                                        </span>
-                                    </li>
-                                ))}
-                            </ul>
-                        </div>
-
-                        <Button
-                            {...getButtonProps(
-                                { ...plan.button, props: { ...plan.button.props, ...getButtonConfigProps() } },
-                                0,
-                                theme.defaultButtonVariant,
-                                planButtonClassName,
-                                planButtonTextClassName
-                            )}
-                        />
-                    </div>
-                </div>
-            ))}
-        </CardList>
-    );
-};
-
-PricingCardNine.displayName = "PricingCardNine";
-
-export default PricingCardNine;
+  return (
+    <div className="pricing-card-nine">
+      <h2>{title}</h2>
+      <p>{description}</p>
+      <CardList items={items} />
+    </div>
+  );
+}
diff --git a/src/components/sections/team/TeamCardEleven.tsx b/src/components/sections/team/TeamCardEleven.tsx
index 725e0a8..1b668d7 100644
--- a/src/components/sections/team/TeamCardEleven.tsx
+++ b/src/components/sections/team/TeamCardEleven.tsx
@@ -1,196 +1,51 @@
 "use client";
 
+import React from "react";
 import CardList from "@/components/cardStack/CardList";
-import MediaContent from "@/components/shared/MediaContent";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-type TeamMember = {
-    id: string;
-    title: string;
-    subtitle: string;
-    detail: string;
-    imageSrc?: string;
-    imageAlt?: string;
-    videoSrc?: string;
-    videoAriaLabel?: string;
-};
-
-type TeamGroup = {
-    id: string;
-    groupTitle: string;
-    members: TeamMember[];
-};
 
 interface TeamCardElevenProps {
-    groups: TeamGroup[];
-    animationType: CardAnimationType;
-    title: string;
-    titleSegments?: TitleSegment[];
-    description: string;
-    tag?: string;
-    tagIcon?: LucideIcon;
-    tagAnimation?: ButtonAnimationType;
-    buttons?: ButtonConfig[];
-    buttonAnimation?: ButtonAnimationType;
-    textboxLayout: TextboxLayout;
-    useInvertedBackground: InvertedBackground;
-    ariaLabel?: string;
-    className?: string;
-    containerClassName?: string;
-    cardClassName?: string;
-    textBoxClassName?: string;
-    textBoxTitleClassName?: string;
-    textBoxDescriptionClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
-    titleImageWrapperClassName?: string;
-    titleImageClassName?: string;
-    groupTitleClassName?: string;
-    memberClassName?: string;
-    memberImageClassName?: string;
-    memberTitleClassName?: string;
-    memberSubtitleClassName?: string;
-    memberDetailClassName?: string;
+  members?: any[];
+  title?: string;
+  description?: string;
+  animationType?: string;
+  useInvertedBackground?: boolean;
+  textboxLayout?: string;
+  tag?: string;
+  tagIcon?: any;
+  tagAnimation?: string;
+  buttons?: any[];
+  buttonAnimation?: string;
+  titleSegments?: any[];
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  textBoxTitleClassName?: string;
+  textBoxDescriptionClassName?: string;
+  textBoxClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  textBoxButtonTextClassName?: string;
+  titleImageWrapperClassName?: string;
+  titleImageClassName?: string;
 }
 
-const TeamCardEleven = ({
-    groups,
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Team section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    textBoxClassName = "",
-    textBoxTitleClassName = "",
-    textBoxDescriptionClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-    titleImageWrapperClassName = "",
-    titleImageClassName = "",
-    groupTitleClassName = "",
-    memberClassName = "",
-    memberImageClassName = "",
-    memberTitleClassName = "",
-    memberSubtitleClassName = "",
-    memberDetailClassName = "",
-}: TeamCardElevenProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+export default function TeamCardEleven({
+  members = [],
+  title = "Team",  description = "Our team members",  animationType = "slide-up",  useInvertedBackground = false,
+  textboxLayout = "default"}: TeamCardElevenProps) {
+  const items = members.map((member) => ({
+    id: member.id,
+    label: member.name,
+    detail: member.role,
+  }));
 
-    const renderMemberRow = (member: TeamMember) => (
-        <div
-            key={member.id}
-            className={cls(
-                "flex flex-col md:flex-row md:items-center gap-4 py-6",
-                memberClassName
-            )}
-        >
-            <div className="flex items-center gap-4 flex-1">
-                <div className={cls(
-                    "relative h-14 w-auto md:h-16 aspect-square rounded-theme overflow-hidden shrink-0",
-                    memberImageClassName
-                )}>
-                    <MediaContent
-                        imageSrc={member.imageSrc}
-                        imageAlt={member.imageAlt || member.title}
-                        videoSrc={member.videoSrc}
-                        videoAriaLabel={member.videoAriaLabel}
-                        imageClassName="w-full h-full object-cover"
-                    />
-                </div>
-
-                <div className="flex flex-col">
-                    <p className={cls(
-                        "text-lg md:text-xl font-medium",
-                        shouldUseLightText ? "text-background" : "text-foreground",
-                        memberTitleClassName
-                    )}>
-                        {member.title}
-                    </p>
-                    <p className={cls(
-                        "text-base",
-                        shouldUseLightText ? "text-background/60" : "text-foreground/60",
-                        memberSubtitleClassName
-                    )}>
-                        {member.subtitle}
-                    </p>
-                </div>
-            </div>
-
-            <p className={cls(
-                "text-base md:text-lg font-medium",
-                shouldUseLightText ? "text-background" : "text-foreground",
-                memberDetailClassName
-            )}>
-                {member.detail}
-            </p>
-        </div>
-    );
-
-    return (
-        <CardList
-            title={title}
-            titleSegments={titleSegments}
-            description={description}
-            tag={tag}
-            tagIcon={tagIcon}
-            tagAnimation={tagAnimation}
-            buttons={buttons}
-            buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
-            animationType={animationType}
-            useInvertedBackground={useInvertedBackground}
-            className={className}
-            containerClassName={containerClassName}
-            cardClassName={cardClassName}
-            titleClassName={textBoxTitleClassName}
-            descriptionClassName={textBoxDescriptionClassName}
-            textBoxClassName={textBoxClassName}
-            tagClassName={textBoxTagClassName}
-            buttonContainerClassName={textBoxButtonContainerClassName}
-            buttonClassName={textBoxButtonClassName}
-            buttonTextClassName={textBoxButtonTextClassName}
-            titleImageWrapperClassName={titleImageWrapperClassName}
-            titleImageClassName={titleImageClassName}
-            ariaLabel={ariaLabel}
-        >
-            {groups.map((group) => (
-                <div key={group.id} className="p-6 md:p-8">
-                    <h3 className={cls(
-                        "text-2xl md:text-3xl font-medium mb-2",
-                        shouldUseLightText ? "text-background" : "text-foreground",
-                        groupTitleClassName
-                    )}>
-                        {group.groupTitle}
-                    </h3>
-
-                    <div className="flex flex-col divide-y divide-accent/40 border-y border-accent/40">
-                        {group.members.map(renderMemberRow)}
-                    </div>
-                </div>
-            ))}
-        </CardList>
-    );
-};
-
-TeamCardEleven.displayName = "TeamCardEleven";
-
-export default TeamCardEleven;
+  return (
+    <div className="team-card-eleven">
+      <h2>{title}</h2>
+      <p>{description}</p>
+      <CardList items={items} />
+    </div>
+  );
+}