Update src/app/styles/variables.css

src/app/about/page.tsx

@@ -1,44 +1,41 @@
 'use client';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import AboutMetric from '@/components/sections/about/AboutMetric';
-import { Users, Rocket } from 'lucide-react';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
 
 export default function AboutPage() {
   const navItems = [
     { name: "Home", id: "/" },
     { name: "About", id: "/about" },
     { name: "Services", id: "/services" },
-    { name: "Portfolio", id: "/portfolio" },
-    { name: "Case Studies", id: "/case-studies" },
-    { name: "Contact", id: "/contact" }
+    { name: "Portfolio", id: "/portfolio" }
   ];
 
   return (
     <ThemeProvider
-      defaultButtonVariant="directional-hover"
-      defaultTextAnimation="reveal-blur"
-      borderRadius="soft"
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
       cardStyle="glass-depth"
-      primaryButtonStyle="radial-glow"
-      secondaryButtonStyle="solid"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="glass"
       contentWidth="medium"
       sizing="medium"
-      background="aurora"
-      headingFontWeight="semibold"
+      background="circleGradient"
+      headingFontWeight="normal"
     >
       <div id="nav" data-section="nav">
         <NavbarStyleApple navItems={navItems} brandName="Webild" />
       </div>
-      <div id="about-section" data-section="about" className="py-12 md:py-20 lg:py-24">
-        <AboutMetric
+      <div id="about-hero" data-section="about-hero" className="py-12 md:py-20 lg:py-24">
+        <HeroOverlay
           title="About Us"
-          useInvertedBackground={false}
-          metrics={[
-            { icon: Users, label: 'Happy Clients', value: '100+' },
-            { icon: Rocket, label: 'Projects Completed', value: '50+' }
-          ]}
-          metricsAnimation="slide-up"
+          description="Learn more about our mission, values, and the team behind our success."
+          textPosition="center"
+          showBlur={true}
+          showDimOverlay={false}
+          imageSrc="https://images.unsplash.com/photo-1552588102-167814c407d5?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          imageAlt="About us background image"
         />
       </div>
     </ThemeProvider>

src/app/blog/page.tsx

@@ -1,53 +0,0 @@
-'use client';
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
-
-export default function BlogPage() {
-  const navItems = [
-    { name: "Home", id: "/" },
-    { name: "About", id: "/about" },
-    { name: "Services", id: "/services" },
-    { name: "Portfolio", id: "/portfolio" },
-    { name: "Case Studies", id: "/case-studies" },
-    { name: "Blog", id: "/blog" },
-    { name: "Testimonials", id: "/testimonials" },
-    { name: "FAQ", id: "/faq" },
-    { name: "Contact", id: "/contact" }
-  ];
-
-  return (
-    <ThemeProvider
-      defaultButtonVariant="directional-hover"
-      defaultTextAnimation="reveal-blur"
-      borderRadius="soft"
-      cardStyle="glass-depth"
-      primaryButtonStyle="radial-glow"
-      secondaryButtonStyle="solid"
-      contentWidth="medium"
-      sizing="medium"
-      background="aurora"
-      headingFontWeight="semibold"
-    >
-      <div id="nav" data-section="nav">
-        <NavbarStyleApple navItems={navItems} brandName="Webild" />
-      </div>
-      <div id="blog" data-section="blog" className="py-12 md:py-20 lg:py-24">
-        <BlogCardTwo
-          title="Latest Insights & Updates"
-          description="Stay informed with our latest articles, thought leadership, and industry news."
-          tag="Blog"
-          blogs={[
-            { id: '1', category: ['Design', 'Strategy'], title: 'The Future of UI/UX: Trends to Watch', excerpt: 'Exploring emerging design trends that will shape user experiences.', imageSrc: '/blog-1.jpg', authorName: 'Olivia Rhye', authorAvatar: '/avatar.jpg', date: '20 Jan 2025' },
-            { id: '2', category: ['Development', 'Tech'], title: 'Optimizing Next.js Performance', excerpt: 'Practical tips to supercharge your Next.js applications.', imageSrc: '/placeholder-blog2.jpg', authorName: 'James Bond', authorAvatar: '/placeholder-avatar2.jpg', date: '15 Feb 2025' },
-            { id: '3', category: ['Marketing', 'Branding'], title: 'Building a Strong Digital Brand', excerpt: 'Strategies for creating a memorable and impactful online brand.', imageSrc: '/placeholder-blog3.jpg', authorName: 'Alice Wonderland', authorAvatar: '/placeholder-avatar3.jpg', date: '10 Mar 2025' }
-          ]}
-          textboxLayout="default"
-          useInvertedBackground={false}
-          animationType="slide-up"
-          carouselMode="buttons"
-        />
-      </div>
-    </ThemeProvider>
-  );
-}

src/app/case-studies/page.tsx

@@ -1,7 +1,8 @@
 'use client';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import BlogCardThree from '@/components/sections/blog/BlogCardThree';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
+import { Sparkles } from 'lucide-react';
 
 export default function CaseStudiesPage() {
   const navItems = [
@@ -13,35 +14,34 @@ export default function CaseStudiesPage() {
     { name: "Contact", id: "/contact" }
   ];
 
-  const caseStudiesItems = [
-    { id: '1', category: 'Retail', title: 'Boosting Sales by 30%', excerpt: 'How our innovative platform transformed a retail chain, leading to significant sales growth.', imageSrc: '/placeholder9.jpg', authorName: 'Webild Team', authorAvatar: '/placeholder-avatar.jpg', date: 'May 2024' },
-    { id: '2', category: 'Healthcare', title: 'Improving Patient Engagement', excerpt: 'A comprehensive case study on our digital solutions for enhanced patient interaction and care.', imageSrc: '/placeholder10.jpg', authorName: 'Webild Team', authorAvatar: '/placeholder-avatar.jpg', date: 'June 2024' },
-    { id: '3', category: 'Fintech', title: 'Secure Payment Integration', excerpt: 'Ensuring seamless and secure financial transactions with our robust fintech integration services.', imageSrc: '/placeholder11.jpg', authorName: 'Webild Team', authorAvatar: '/placeholder-avatar.jpg', date: 'July 2024' }
-  ];
-
   return (
     <ThemeProvider
-      defaultButtonVariant="directional-hover"
-      defaultTextAnimation="reveal-blur"
-      borderRadius="soft"
-      cardStyle="glass-depth"
-      primaryButtonStyle="radial-glow"
-      secondaryButtonStyle="solid"
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
       contentWidth="medium"
       sizing="medium"
-      background="aurora"
-      headingFontWeight="semibold"
+      background="circleGradient"
+      headingFontWeight="normal"
     >
       <div id="nav" data-section="nav">
         <NavbarStyleApple navItems={navItems} brandName="Webild" />
       </div>
-      <div id="case-studies-section" data-section="case-studies" className="py-12 md:py-20 lg:py-24">
-        <BlogCardThree
-          title="Case Studies"
-          description="Discover the impact we've made for our clients through detailed success stories."
-          blogs={caseStudiesItems}
-          textboxLayout="default"
-          animationType="slide-up"
+      <div id="case-study" data-section="case-study" className="py-12 md:py-20 lg:py-24">
+        <MetricSplitMediaAbout
+          tag="Case Study Highlight"
+          tagIcon={Sparkles}
+          title="Revolutionizing E-commerce for a Leading Retailer"
+          description="We partnered with a major retail client to completely overhaul their online shopping experience, focusing on performance, user engagement, and conversion optimization. Our solution integrated advanced AI-driven recommendations and a streamlined checkout process, leading to significant business growth."
+          metrics={[
+            { value: '30%', title: 'Increase in Conversion Rate' },
+            { value: '25%', title: 'Reduction in Bounce Rate' }
+          ]}
+          imageSrc="https://placehold.co/800x600/png?text=Case+Study+Image"
+          imageAlt="E-commerce platform interface showing product listings and shopping cart"
           useInvertedBackground={false}
         />
       </div>

src/app/contact/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 
 export default function ContactPage() {
   const navItems = [
@@ -29,17 +29,21 @@ export default function ContactPage() {
       <div id="nav" data-section="nav">
         <NavbarStyleApple navItems={navItems} brandName="Webild" />
       </div>
-      <div id="contact-section" data-section="contact" className="py-12 md:py-20 lg:py-24">
-        <ContactCenter
-          tag="Get in Touch"
-          title="Let's build something great together."
-          description="Have a project in mind or just want to say hello? Fill out the form below or reach out to us directly."
-          background={{ variant: 'rotated-rays-animated-grid' }}
-          useInvertedBackground={false}
-          inputPlaceholder="Your email address"
+      <div id="contact" data-section="contact" className="py-12 md:py-20 lg:py-24">
+        <ContactSplitForm
+          title="Get in Touch"
+          description="We're here to help! Send us a message and we'll get back to you as soon as possible."
+          inputs={[
+            { name: 'name', type: 'text', placeholder: 'Your Name', required: true },
+            { name: 'email', type: 'email', placeholder: 'Your Email', required: true }
+          ]}
+          textarea={{ name: 'message', placeholder: 'Your Message', rows: 5, required: true }}
+          imageSrc="/placeholders/placeholder-16-9.svg"
+          imageAlt="Contact Us"
+          mediaPosition="right"
           buttonText="Send Message"
-          termsText="By submitting, you agree to our privacy policy and terms of service."
-          onSubmit={(email) => console.log(`Contact form submitted with email: ${email}`)}
+          onSubmit={(data) => console.log('Contact form submitted:', data)}
+          useInvertedBackground={false}
         />
       </div>
     </ThemeProvider>

src/app/faq/page.tsx

@@ -1,55 +0,0 @@
-'use client';
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-
-export default function FaqPage() {
-  const navItems = [
-    { name: "Home", id: "/" },
-    { name: "About", id: "/about" },
-    { name: "Services", id: "/services" },
-    { name: "Portfolio", id: "/portfolio" },
-    { name: "Case Studies", id: "/case-studies" },
-    { name: "Blog", id: "/blog" },
-    { name: "Testimonials", id: "/testimonials" },
-    { name: "FAQ", id: "/faq" },
-    { name: "Contact", id: "/contact" }
-  ];
-
-  return (
-    <ThemeProvider
-      defaultButtonVariant="directional-hover"
-      defaultTextAnimation="reveal-blur"
-      borderRadius="soft"
-      cardStyle="glass-depth"
-      primaryButtonStyle="radial-glow"
-      secondaryButtonStyle="solid"
-      contentWidth="medium"
-      sizing="medium"
-      background="aurora"
-      headingFontWeight="semibold"
-    >
-      <div id="nav" data-section="nav">
-        <NavbarStyleApple navItems={navItems} brandName="Webild" />
-      </div>
-      <div id="faq" data-section="faq" className="py-12 md:py-20 lg:py-24">
-        <FaqSplitMedia
-          faqs={[
-            { id: '1', title: 'What services does Webild offer?', content: 'Webild specializes in custom web development, UI/UX design, and digital strategy consulting.' },
-            { id: '2', title: 'How can I get a quote for my project?', content: 'You can request a quote by visiting our contact page and filling out the inquiry form.' },
-            { id: '3', title: 'Do you work with startups and small businesses?', content: 'Absolutely! We tailor our services to meet the needs and budgets of businesses of all sizes.' },
-            { id: '4', title: 'What is your typical project timeline?', content: 'Project timelines vary based on complexity, but we always provide a detailed schedule after initial consultation.' }
-          ]}
-          imageSrc="/images/faq-hero.jpg"
-          imageAlt="Customer support illustration"
-          title="Frequently Asked Questions"
-          description="Find answers to common questions about our services, process, and more."
-          textboxLayout="default"
-          useInvertedBackground={false}
-          mediaPosition="left"
-          faqsAnimation="slide-up"
-        />
-      </div>
-    </ThemeProvider>
-  );
-}

src/app/page.tsx

@@ -19,8 +19,8 @@ export default function HomePage() {
       defaultButtonVariant="directional-hover"
       defaultTextAnimation="reveal-blur"
       borderRadius="soft"
-      cardStyle="solid"
-      primaryButtonStyle="gradient"
+      cardStyle="glass-depth"
+      primaryButtonStyle="radial-glow"
       secondaryButtonStyle="solid"
       contentWidth="medium"
       sizing="medium"

src/app/portfolio/page.tsx

@@ -1,49 +1,41 @@
 'use client';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import BlogCardThree from '@/components/sections/blog/BlogCardThree';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
 
 export default function PortfolioPage() {
   const navItems = [
     { name: "Home", id: "/" },
     { name: "About", id: "/about" },
     { name: "Services", id: "/services" },
-    { name: "Portfolio", id: "/portfolio" },
-    { name: "Case Studies", id: "/case-studies" },
-    { name: "Contact", id: "/contact" }
-  ];
-
-  const portfolioItems = [
-    { id: '1', category: 'Web Design', title: 'E-commerce Redesign', excerpt: 'A modern overhaul for an online retail giant, focusing on user experience and conversion rates.', imageSrc: '/placeholder5.jpg', authorName: 'Team Webild', authorAvatar: '/placeholder-avatar.jpg', date: 'Jan 2024' },
-    { id: '2', category: 'Mobile App', title: 'Fitness Tracker App', excerpt: 'Intuitive design and robust functionality for health and wellness enthusiasts.', imageSrc: '/placeholder6.jpg', authorName: 'Team Webild', authorAvatar: '/placeholder-avatar.jpg', date: 'Feb 2024' },
-    { id: '3', category: 'Branding', title: 'Corporate Identity', excerpt: 'Crafting a fresh and cohesive brand identity for a tech startup, from logo to guidelines.', imageSrc: '/placeholder7.jpg', authorName: 'Team Webild', authorAvatar: '/placeholder-avatar.jpg', date: 'Mar 2024' },
-    { id: '4', category: 'SaaS Platform', title: 'Project Management Tool', excerpt: 'Streamlining workflows for remote teams with a powerful and easy-to-use SaaS platform.', imageSrc: '/placeholder8.jpg', authorName: 'Team Webild', authorAvatar: '/placeholder-avatar.jpg', date: 'Apr 2024' }
+    { name: "Portfolio", id: "/portfolio" }
   ];
 
   return (
     <ThemeProvider
-      defaultButtonVariant="directional-hover"
-      defaultTextAnimation="reveal-blur"
-      borderRadius="soft"
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
       cardStyle="glass-depth"
-      primaryButtonStyle="radial-glow"
-      secondaryButtonStyle="solid"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="glass"
       contentWidth="medium"
       sizing="medium"
-      background="aurora"
-      headingFontWeight="semibold"
+      background="circleGradient"
+      headingFontWeight="normal"
     >
       <div id="nav" data-section="nav">
         <NavbarStyleApple navItems={navItems} brandName="Webild" />
       </div>
-      <div id="portfolio-section" data-section="portfolio" className="py-12 md:py-20 lg:py-24">
-        <BlogCardThree
+      <div id="portfolio-hero" data-section="portfolio-hero" className="py-12 md:py-20 lg:py-24">
+        <HeroOverlay
           title="Our Portfolio"
-          description="Explore our recent projects and success stories that highlight our expertise."
-          blogs={portfolioItems}
-          textboxLayout="default"
-          animationType="slide-up"
-          useInvertedBackground={false}
+          description="Explore our latest projects and see how we bring ideas to life."
+          textPosition="center"
+          showBlur={true}
+          showDimOverlay={false}
+          imageSrc="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          imageAlt="Portfolio background image"
         />
       </div>
     </ThemeProvider>

src/app/pricing/page.tsx

@@ -1,93 +0,0 @@
-'use client';
-import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
-
-export default function PricingPage() {
-  const navItems = [
-    { name: "Home", id: "/" },
-    { name: "About", id: "/about" },
-    { name: "Services", id: "/services" },
-    { name: "Pricing", id: "/pricing" },
-    { name: "Portfolio", id: "/portfolio" },
-    { name: "Case Studies", id: "/case-studies" },
-    { name: "Contact", id: "/contact" }
-  ];
-
-  return (
-    <ThemeProvider
-      defaultButtonVariant="directional-hover"
-      defaultTextAnimation="reveal-blur"
-      borderRadius="soft"
-      cardStyle="glass-depth"
-      primaryButtonStyle="radial-glow"
-      secondaryButtonStyle="solid"
-      contentWidth="medium"
-      sizing="medium"
-      background="aurora"
-      headingFontWeight="semibold"
-    >
-      <div id="nav" data-section="nav">
-        <NavbarStyleApple navItems={navItems} brandName="Webild" />
-      </div>
-      <div id="pricing" data-section="pricing" className="py-12 md:py-20 lg:py-24">
-        <PricingCardFive
-          title="Flexible Plans for Every Need"
-          description="Choose the perfect plan to accelerate your digital presence."
-          textboxLayout="default"
-          useInvertedBackground={false}
-          animationType="slide-up"
-          plans={[
-            {
-              id: 'starter',
-              tag: 'Starter',
-              price: '$99',
-              period: '/month',
-              description: 'Ideal for small businesses and startups looking to establish an online presence.',
-              button: { text: 'Get Started', href: '/contact' },
-              featuresTitle: 'Key Features:',
-              features: [
-                'Basic Website Design',
-                'Mobile Responsiveness',
-                'SEO Foundation',
-                'Monthly Support (2 hrs)'
-              ]
-            },
-            {
-              id: 'growth',
-              tag: 'Growth',
-              price: '$299',
-              period: '/month',
-              description: 'Expand your reach with advanced features and dedicated support for growing businesses.',
-              button: { text: 'Choose Plan', href: '/contact' },
-              featuresTitle: 'Everything in Starter, plus:',
-              features: [
-                'Custom CRM Integration',
-                'Advanced Analytics',
-                'Priority Support (8 hrs)',
-                'Content Management System',
-                'E-commerce Integration'
-              ]
-            },
-            {
-              id: 'enterprise',
-              tag: 'Enterprise',
-              price: 'Custom',
-              period: '/project',
-              description: 'Tailored solutions for large organizations with unique requirements and scale.',
-              button: { text: 'Contact Sales', href: '/contact' },
-              featuresTitle: 'Includes:',
-              features: [
-                'Enterprise-grade Security',
-                'Dedicated Account Manager',
-                '24/7 Premium Support',
-                'Scalable Cloud Infrastructure',
-                'API Development'
-              ]
-            }
-          ]}
-        />
-      </div>
-    </ThemeProvider>
-  );
-}

src/app/services/page.tsx

@@ -1,50 +1,41 @@
 'use client';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
 
 export default function ServicesPage() {
   const navItems = [
     { name: "Home", id: "/" },
     { name: "About", id: "/about" },
     { name: "Services", id: "/services" },
-    { name: "Portfolio", id: "/portfolio" },
-    { name: "Case Studies", id: "/case-studies" },
-    { name: "Contact", id: "/contact" }
-  ];
-
-  const features = [
-    { id: '1', title: 'Web Development', description: 'Custom website and application development tailored to your needs.', imageSrc: '/placeholder1.jpg', imageAlt: 'Web Development' },
-    { id: '2', title: 'UI/UX Design', description: 'Intuitive and engaging user interface design for optimal experience.', imageSrc: '/placeholder2.jpg', imageAlt: 'UI/UX Design' },
-    { id: '3', title: 'Digital Marketing', description: 'Strategies to boost your online presence and reach your target audience.', imageSrc: '/placeholder3.jpg', imageAlt: 'Digital Marketing' },
-    { id: '4', title: 'SEO Optimization', description: 'Improve your search engine rankings and increase organic traffic.', imageSrc: '/placeholder4.jpg', imageAlt: 'SEO Optimization' }
+    { name: "Portfolio", id: "/portfolio" }
   ];
 
   return (
     <ThemeProvider
-      defaultButtonVariant="directional-hover"
-      defaultTextAnimation="reveal-blur"
-      borderRadius="soft"
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
       cardStyle="glass-depth"
-      primaryButtonStyle="radial-glow"
-      secondaryButtonStyle="solid"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="glass"
       contentWidth="medium"
       sizing="medium"
-      background="aurora"
-      headingFontWeight="semibold"
+      background="circleGradient"
+      headingFontWeight="normal"
     >
       <div id="nav" data-section="nav">
         <NavbarStyleApple navItems={navItems} brandName="Webild" />
       </div>
-      <div id="services-section" data-section="services" className="py-12 md:py-20 lg:py-24">
-        <FeatureCardTwentySeven
+      <div id="services-hero" data-section="services-hero" className="py-12 md:py-20 lg:py-24">
+        <HeroOverlay
           title="Our Services"
-          description="Discover how we can help your business grow with our comprehensive digital services."
-          features={features}
-          gridVariant="four-items-2x2-equal-grid"
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
+          description="We offer a comprehensive suite of digital services to help your business thrive."
+          textPosition="center"
+          showBlur={true}
+          showDimOverlay={false}
+          imageSrc="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          imageAlt="Services background image"
         />
       </div>
     </ThemeProvider>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #000000;
-  --card: #0c0c0c;
-  --foreground: #ffffff;
-  --primary-cta: #106EFB;
-  --primary-cta-text: #ffffff;
-  --secondary-cta: #000000;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #f5f5f5;
+  --primary-cta: #ffdf7d;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #ffffff;
-  --accent: #535353;
-  --background-accent: #106EFB;
+  --accent: #b8860b;
+  --background-accent: #8b6914;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/testimonials/page.tsx

@@ -1,53 +1,53 @@
 'use client';
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 
 export default function TestimonialsPage() {
   const navItems = [
-    { name: "Home", id: "/" },
-    { name: "About", id: "/about" },
-    { name: "Services", id: "/services" },
-    { name: "Portfolio", id: "/portfolio" },
-    { name: "Case Studies", id: "/case-studies" },
-    { name: "Blog", id: "/blog" },
-    { name: "Testimonials", id: "/testimonials" },
-    { name: "FAQ", id: "/faq" },
-    { name: "Contact", id: "/contact" }
+    { name: 'Home', id: '/' },
+    { name: 'About', id: '/about' },
+    { name: 'Contact', id: '/contact' },
+    { name: 'Testimonials', id: '/testimonials' }
+  ];
+
+  // Placeholder images for testimonials
+  const testimonialImages = [
+    'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=2864&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.unsplash.com/photo-1507003211169-e69fe254be2c?q=80&w=2787&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=2788&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=2787&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
+  ];
+
+  const testimonialsData = [
+    { id: '1', name: 'Alice Smith', imageSrc: testimonialImages[0], imageAlt: 'Alice Smith, CEO of InnovateCorp' },
+    { id: '2', name: 'Bob Johnson', imageSrc: testimonialImages[1], imageAlt: 'Bob Johnson, Lead Developer at TechSolutions' },
+    { id: '3', name: 'Charlie Brown', imageSrc: testimonialImages[2], imageAlt: 'Charlie Brown, Marketing Director at GrowthCo' },
+    { id: '4', name: 'Diana Prince', imageSrc: testimonialImages[3], imageAlt: 'Diana Prince, Founder of FutureLabs' }
   ];
 
   return (
     <ThemeProvider
-      defaultButtonVariant="directional-hover"
-      defaultTextAnimation="reveal-blur"
-      borderRadius="soft"
-      cardStyle="glass-depth"
-      primaryButtonStyle="radial-glow"
-      secondaryButtonStyle="solid"
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
       contentWidth="medium"
       sizing="medium"
-      background="aurora"
-      headingFontWeight="semibold"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
     >
-      <div id="nav" data-section="nav">
-        <NavbarStyleApple navItems={navItems} brandName="Webild" />
-      </div>
-      <div id="testimonials" data-section="testimonials" className="py-12 md:py-20 lg:py-24">
-        <TestimonialCardFifteen
-          testimonial="Working with Webild has been a game-changer for our business. Their expertise and dedication delivered results beyond our expectations."
-          rating={5}
-          author="Sarah L., CEO of InnovateCorp"
-          avatars={[
-            { src: '/avatars/user1.jpg', alt: 'User 1' },
-            { src: '/avatars/user2.jpg', alt: 'User 2' },
-            { src: '/avatars/user3.jpg', alt: 'User 3' },
-            { src: '/avatars/user4.jpg', alt: 'User 4' },
-            { src: '/avatars/user5.jpg', alt: 'User 5' },
-            { src: '/avatars/user6.jpg', alt: 'User 6' }
-          ]}
-          ratingAnimation="slide-up"
-          avatarsAnimation="slide-up"
+      <NavbarStyleApple navItems={navItems} brandName="Webild" />
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardTwelve
+          testimonials={testimonialsData}
+          cardTitle="Hear What Our Clients Say"
+          cardTag="Client Reviews"
           useInvertedBackground={false}
+          cardAnimation="slide-up"
         />
       </div>
     </ThemeProvider>