Merge version_5 into main

Merge version_5 into main

src/app/about/page.tsx

@@ -1,39 +1,44 @@
 'use client';
-
-import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import AboutMetric from '@/components/sections/about/AboutMetric';
+import { Users, Rocket } from 'lucide-react';
 
 export default function AboutPage() {
   const navItems = [
-    { name: 'Home', id: '/' },
-    { name: 'About', id: '/about' },
-    { name: 'Contact', id: '/contact' },
-    { name: 'Testimonials', id: '/testimonials' }
+    { 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" }
   ];
 
   return (
     <ThemeProvider
-      defaultButtonVariant="hover-magnetic"
-      defaultTextAnimation="entrance-slide"
-      borderRadius="rounded"
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      cardStyle="glass-depth"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
       contentWidth="medium"
       sizing="medium"
-      background="none"
-      cardStyle="solid"
-      primaryButtonStyle="gradient"
-      secondaryButtonStyle="glass"
-      headingFontWeight="bold"
+      background="aurora"
+      headingFontWeight="semibold"
     >
-      <NavbarStyleApple navItems={navItems} brandName="Webild" />
-      <div id="about" data-section="about">
-        <TextSplitAbout
-          title="About Our Company"
-          description={[
-            "We are a dedicated team passionate about innovation and excellence. Our mission is to create impactful solutions that drive success for our clients.",            "Founded with a vision to revolutionize the industry, we continually strive to exceed expectations and deliver exceptional results."
-          ]}
-          showBorder={true}
+      <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
+          title="About Us"
           useInvertedBackground={false}
+          metrics={[
+            { icon: Users, label: 'Happy Clients', value: '100+' },
+            { icon: Rocket, label: 'Projects Completed', value: '50+' }
+          ]}
+          metricsAnimation="slide-up"
         />
       </div>
     </ThemeProvider>

src/app/blog/page.tsx

@@ -0,0 +1,53 @@
+'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: 'https://picsum.photos/seed/blog1/800/600', authorName: 'Olivia Rhye', authorAvatar: 'https://picsum.photos/seed/avatar1/100/100', date: '20 Jan 2025' },
+            { id: '2', category: ['Development', 'Tech'], title: 'Optimizing Next.js Performance', excerpt: 'Practical tips to supercharge your Next.js applications.', imageSrc: 'https://picsum.photos/seed/blog2/800/600', authorName: 'James Bond', authorAvatar: 'https://picsum.photos/seed/avatar2/100/100', 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: 'https://picsum.photos/seed/blog3/800/600', authorName: 'Alice Wonderland', authorAvatar: 'https://picsum.photos/seed/avatar3/100/100', date: '10 Mar 2025' }
+          ]}
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          carouselMode="buttons"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/case-studies/page.tsx

@@ -0,0 +1,50 @@
+'use client';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import BlogCardThree from '@/components/sections/blog/BlogCardThree';
+
+export default function CaseStudiesPage() {
+  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 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: 'https://picsum.photos/seed/retail/800/600', authorName: 'Webild Team', authorAvatar: 'https://picsum.photos/seed/teamavatar1/100/100', 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: 'https://picsum.photos/seed/healthcare/800/600', authorName: 'Webild Team', authorAvatar: 'https://picsum.photos/seed/teamavatar2/100/100', 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: 'https://picsum.photos/seed/fintech/800/600', authorName: 'Webild Team', authorAvatar: 'https://picsum.photos/seed/teamavatar3/100/100', date: 'July 2024' }
+  ];
+
+  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="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"
+          useInvertedBackground={false}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -1,42 +1,45 @@
 'use client';
-
-import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import ContactForm from '@/components/form/ContactForm';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
 
 export default function ContactPage() {
   const navItems = [
-    { name: 'Home', id: '/' },
-    { name: 'About', id: '/about' },
-    { name: 'Contact', id: '/contact' },
-    { name: 'Testimonials', id: '/testimonials' }
+    { 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" }
   ];
 
   return (
     <ThemeProvider
-      defaultButtonVariant="hover-magnetic"
-      defaultTextAnimation="entrance-slide"
-      borderRadius="rounded"
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      cardStyle="glass-depth"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
       contentWidth="medium"
       sizing="medium"
-      background="none"
-      cardStyle="solid"
-      primaryButtonStyle="gradient"
-      secondaryButtonStyle="glass"
-      headingFontWeight="bold"
+      background="aurora"
+      headingFontWeight="semibold"
     >
-      <NavbarStyleApple navItems={navItems} brandName="Webild" />
-      <div id="contact" data-section="contact" className="min-h-[calc(100vh-60px)] flex items-center justify-center p-4">
-        <ContactForm
-          title="Send Us a Message"
-          description="Fill out the details below and we'll get back to you as soon as possible."
-          tag="Contact Us"
-          inputPlaceholder="Your email address"
-          buttonText="Submit Message"
-          centered={true}
-          onSubmit={(email) => console.log('Contact form submitted with email:', email)}
+      <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}
-          className="w-full max-w-lg"
+          inputPlaceholder="Your email address"
+          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}`)}
         />
       </div>
     </ThemeProvider>

src/app/faq/page.tsx

@@ -0,0 +1,55 @@
+'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="https://picsum.photos/seed/faqs/800/600"
+          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

@@ -1,119 +1,61 @@
 'use client';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
+import { Sparkles } from 'lucide-react';
 
-import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import HeroLogo from '@/components/sections/hero/HeroLogo';
-import SplitAbout from '@/components/sections/about/SplitAbout';
-import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
-import FooterCard from '@/components/sections/footer/FooterCard';
-import SparklesGradientBackground from '@/components/background/SparklesGradientBackground';
-
-import { Lightbulb, Gem, ShieldCheck, Twitter, Linkedin } from 'lucide-react';
-
-export default function Home() {
+export default function HomePage() {
   const navItems = [
-    { name: 'Home', id: '/' },
-    { name: 'About', id: '#about' },
-    { name: 'Services', id: '#features' },
-    { name: 'Contact', id: '#contact' }
+    { 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" }
   ];
 
   return (
     <ThemeProvider
-      defaultButtonVariant="text-stagger"
+      defaultButtonVariant="directional-hover"
       defaultTextAnimation="reveal-blur"
       borderRadius="soft"
-      contentWidth="mediumLarge"
-      sizing="largeSizeMediumTitles"
-      background="circleGradient"
-      cardStyle="glass-elevated"
-      primaryButtonStyle="radial-glow"
-      secondaryButtonStyle="glass"
-      headingFontWeight="medium"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="solid"
+      contentWidth="medium"
+      sizing="medium"
+      background="aurora"
+      headingFontWeight="semibold"
     >
-      <NavbarLayoutFloatingInline
-        navItems={navItems}
-        brandName="Aethelred"
-        button={{ text: 'Get Started', href: '#contact' }}
-        animateOnLoad={true}
-      />
-      <SparklesGradientBackground />
-
-      <div id="home" data-section="home">
-        <HeroLogo
-          logoText="Aethelred"
-          description="Crafting timeless digital experiences with unparalleled elegance and precision."
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple navItems={navItems} brandName="Webild" />
+      </div>
+      <div id="home" data-section="home" className="py-12 md:py-20 lg:py-24">
+        <HeroSplitDoubleCarousel
+          background={{ variant: 'glowing-orb' }}
+          tag="Welcome"
+          tagIcon={Sparkles}
+          title="Crafting Digital Experiences"
+          description="We specialize in building cutting-edge web applications and delightful user interfaces."
+          carouselPosition="right"
+          leftCarouselItems={[
+            { imageSrc: 'https://picsum.photos/seed/webdesign/800/600', imageAlt: 'Web design concept' },
+            { imageSrc: 'https://picsum.photos/seed/mobileui/800/600', imageAlt: 'Mobile app UI' },
+            { imageSrc: 'https://picsum.photos/seed/dataviz/800/600', imageAlt: 'Data visualization dashboard' },
+            { imageSrc: 'https://picsum.photos/seed/cloudinfra/800/600', imageAlt: 'Cloud infrastructure' }
+          ]}
+          rightCarouselItems={[
+            { imageSrc: 'https://picsum.photos/seed/responsive/800/600', imageAlt: 'Responsive website' },
+            { imageSrc: 'https://picsum.photos/seed/creativeagency/800/600', imageAlt: 'Creative agency workspace' },
+            { imageSrc: 'https://picsum.photos/seed/digitalmarketing/800/600', imageAlt: 'Digital marketing strategy' },
+            { imageSrc: 'https://picsum.photos/seed/ecommerce/800/600', imageAlt: 'E-commerce solutions' }
+          ]}
           buttons={[
-            { text: 'Explore Services', href: '#features' },
-            { text: 'Get a Quote', href: '#contact' },
-          ]}
-          imageSrc="https://assets.dev.webild.io/webild/images/bg_landing_hero.jpg"
-          imageAlt="Luxury brand background"
-          showDimOverlay={true}
-        />
-      </div>
-
-      <div id="about" data-section="about">
-        <SplitAbout
-          title="Our Philosophy"
-          description="At Aethelred, we believe in the fusion of sophisticated design and cutting-edge technology to deliver bespoke digital solutions. Our commitment to excellence ensures every project reflects a legacy of quality and innovation."
-          textboxLayout="default"
-          useInvertedBackground={false}
-          bulletPoints={[
-            { title: 'Exquisite Design', description: 'Crafting visually stunning and intuitive interfaces.', icon: Gem },
-            { title: 'Technical Mastery', description: 'Leveraging advanced technology for robust solutions.', icon: ShieldCheck },
-            { title: 'Client-Centric Approach', description: 'Dedicated partnership from concept to deployment.', icon: Lightbulb },
-          ]}
-          imageSrc="https://assets.dev.webild.io/webild/images/about_split.jpg"
-          imageAlt="About Aethelred"
-          imagePosition="right"
-        />
-      </div>
-
-      <div id="features" data-section="features">
-        <FeatureCardThree
-          title="Unmatched Services"
-          description="Discover the range of premium services designed to elevate your brand's digital presence."
-          textboxLayout="default"
-          animationType="slide-up"
-          gridVariant="three-columns-all-equal-width"
-          useInvertedBackground={false}
-          features={[
-            {
-              id: '01',
-              title: 'Bespoke Web Development',
-              description: 'Tailored web solutions built with precision and scalability.',
-              imageSrc: 'https://assets.dev.webild.io/webild/images/card_dev.jpg',
-              imageAlt: 'Custom web development',
-            },
-            {
-              id: '02',
-              title: 'Strategic Brand Identity',
-              description: 'Developing a distinct and memorable brand voice and visual.',
-              imageSrc: 'https://assets.dev.webild.io/webild/images/card_branding.jpg',
-              imageAlt: 'Brand strategy',
-            },
-            {
-              id: '03',
-              title: 'Immersive UX/UI Design',
-              description: 'Creating intuitive and engaging user experiences.',
-              imageSrc: 'https://assets.dev.webild.io/webild/images/card_uxui.jpg',
-              imageAlt: 'UX/UI Design',
-            },
-          ]}
-        />
-      </div>
-
-      <div id="contact" data-section="contact">
-        <FooterCard
-          logoText="Aethelred"
-          copyrightText="© 2025 Aethelred. All rights reserved."
-          socialLinks={[
-            { icon: Twitter, href: 'https://twitter.com/aethelred', ariaLabel: 'Twitter' },
-            { icon: Linkedin, href: 'https://linkedin.com/company/aethelred', ariaLabel: 'LinkedIn' },
+            { text: 'View Services', href: '/services' },
+            { text: 'Our Work', href: '/portfolio' }
           ]}
         />
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/portfolio/page.tsx

@@ -1,94 +1,51 @@
-"use client";
-
-import { useState } from 'react';
+'use client';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
-import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
-import TextBox from "@/components/Textbox";
-
-export const metadata = {
-  title: "Our Portfolio & Gallery",  description: "Explore our latest projects and high-quality image galleries."};
-
-const projectData = [
-  { id: "1", category: "Web Design", name: "E-commerce Redesign", price: "2023", rating: 5, reviewCount: "Client A", imageSrc: "/placeholder-project-1.jpg", imageAlt: "E-commerce Redesign" },
-  { id: "2", category: "Branding", name: "Corporate Identity", price: "2022", rating: 4, reviewCount: "Client B", imageSrc: "/placeholder-project-2.jpg", imageAlt: "Corporate Identity" },
-  { id: "3", category: "Development", name: "SaaS Platform", price: "2024", rating: 5, reviewCount: "Client C", imageSrc: "/placeholder-project-3.jpg", imageAlt: "SaaS Platform" },
-  { id: "4", category: "Mobile Apps", name: "Fitness Tracker App", price: "2023", rating: 4, reviewCount: "Client D", imageSrc: "/placeholder-project-4.jpg", imageAlt: "Fitness Tracker App" },
-  { id: "5", category: "Web Design", name: "Portfolio Website", price: "2024", rating: 5, reviewCount: "Client E", imageSrc: "/placeholder-project-5.jpg", imageAlt: "Portfolio Website" },
-  { id: "6", category: "Branding", name: "Startup Logo Kit", price: "2023", rating: 4, reviewCount: "Client F", imageSrc: "/placeholder-project-6.jpg", imageAlt: "Startup Logo Kit" },
-  { id: "7", category: "Development", name: "AI Chatbot Integration", price: "2024", rating: 5, reviewCount: "Client G", imageSrc: "/placeholder-project-7.jpg", imageAlt: "AI Chatbot Integration" },
-  { id: "8", category: "Mobile Apps", name: "Recipe Finder App", price: "2022", rating: 4, reviewCount: "Client H", imageSrc: "/placeholder-project-8.jpg", imageAlt: "Recipe Finder App" }
-];
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import BlogCardThree from '@/components/sections/blog/BlogCardThree';
 
 export default function PortfolioPage() {
-  const [search, setSearch] = useState('');
-  const [categoryFilter, setCategoryFilter] = useState('All');
+  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 categories = ['All', 'Web Design', 'Branding', 'Development', 'Mobile Apps'];
-
-  const filteredProjects = projectData.filter(project => {
-    const matchesSearch = project.name.toLowerCase().includes(search.toLowerCase());
-    const matchesCategory = categoryFilter === 'All' || project.category === categoryFilter;
-    return matchesSearch && matchesCategory;
-  });
-
-  const navItems = [{ name: 'Home', id: '/' }, { name: 'Portfolio', id: '/portfolio' }];
-  const navButton = { text: 'Get Started', href: '#contact' };
-
-  const footerColumns = [
-    { items: [{ label: 'Home', href: '/' }, { label: 'Portfolio', href: '/portfolio' }] },
-    { items: [{ label: 'Privacy Policy', href: '#privacy' }] } // Using section link as no legal page exists
+  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: 'https://picsum.photos/seed/ecommerce-redesign/800/600', authorName: 'Team Webild', authorAvatar: 'https://picsum.photos/seed/team-webild-1/100/100', date: 'Jan 2024' },
+    { id: '2', category: 'Mobile App', title: 'Fitness Tracker App', excerpt: 'Intuitive design and robust functionality for health and wellness enthusiasts.', imageSrc: 'https://picsum.photos/seed/fitness-app/800/600', authorName: 'Team Webild', authorAvatar: 'https://picsum.photos/seed/team-webild-2/100/100', 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: 'https://picsum.photos/seed/corporate-identity/800/600', authorName: 'Team Webild', authorAvatar: 'https://picsum.photos/seed/team-webild-3/100/100', 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: 'https://picsum.photos/seed/saas-platform/800/600', authorName: 'Team Webild', authorAvatar: 'https://picsum.photos/seed/team-webild-4/100/100', date: 'Apr 2024' }
   ];
 
   return (
     <ThemeProvider
-      defaultButtonVariant="shift-hover"
-      defaultTextAnimation="entrance-slide"
-      borderRadius="rounded"
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      cardStyle="glass-depth"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
       contentWidth="medium"
       sizing="medium"
       background="aurora"
-      cardStyle="glass-elevated"
-      primaryButtonStyle="gradient"
-      secondaryButtonStyle="glass"
-      headingFontWeight="bold"
+      headingFontWeight="semibold"
     >
-      <NavbarStyleCentered
-        navItems={navItems}
-        button={navButton}
-        brandName="Webild"
-      />
-
-      <div id="portfolio" data-section="portfolio">
-        <TextBox
-          title="Our Creative Portfolio"
-          description="Explore a diverse collection of our design and development projects. Filter by category to find inspiration for your next endeavor."
+      <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
+          title="Our Portfolio"
+          description="Explore our recent projects and success stories that highlight our expertise."
+          blogs={portfolioItems}
           textboxLayout="default"
-          center={true}
-          className="py-16 md:py-24"
-        />
-        <ProductCatalog
-          layout="section"
-          products={filteredProjects}
-          searchValue={search}
-          onSearchChange={setSearch}
-          searchPlaceholder="Search projects..."
-          filters={[{
-            label: 'Category',
-            options: categories,
-            selected: categoryFilter,
-            onChange: setCategoryFilter,
-          }]}
-          emptyMessage="No projects found matching your criteria."
-          className="pb-24"
+          animationType="slide-up"
+          useInvertedBackground={false}
         />
       </div>
-
-      <FooterLogoEmphasis
-        logoText="Webild"
-        columns={footerColumns}
-      />
     </ThemeProvider>
   );
-}
+}

src/app/pricing/page.tsx

@@ -0,0 +1,93 @@
+'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,161 +1,52 @@
-"use client";
+'use client';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
-import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import TextAnimation from '@/components/text/TextAnimation';
-import { LayoutDashboard, Rocket, Palette } from 'lucide-react';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
 
 export default function ServicesPage() {
-  const navbarNavItems = [
-    { name: 'Home', id: '/' },
-    { name: 'Services', id: '/services' }
+  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 footerColumns = [
-    {
-      title: 'Product',
-      items: [
-        { label: 'Features', href: '#' },
-        { label: 'Pricing', href: '/pricing' }
-      ]
-    },
-    {
-      title: 'Company',
-      items: [
-        { label: 'About', href: '/about' },
-        { label: 'Contact', href: '/contact' }
-      ]
-    }
+
+  const features = [
+    { id: '1', title: 'Web Development', description: 'Custom website and application development tailored to your needs.', imageSrc: 'https://picsum.photos/seed/webdev/800/600', imageAlt: 'Web Development' },
+    { id: '2', title: 'UI/UX Design', description: 'Intuitive and engaging user interface design for optimal experience.', imageSrc: 'https://picsum.photos/seed/uiux/800/600', imageAlt: 'UI/UX Design' },
+    { id: '3', title: 'Digital Marketing', description: 'Strategies to boost your online presence and reach your target audience.', imageSrc: 'https://picsum.photos/seed/digitalmarketing2/800/600', imageAlt: 'Digital Marketing' },
+    { id: '4', title: 'SEO Optimization', description: 'Improve your search engine rankings and increase organic traffic.', imageSrc: 'https://picsum.photos/seed/seo/800/600', imageAlt: 'SEO Optimization' }
   ];
 
   return (
     <ThemeProvider
-      defaultButtonVariant="hover-magnetic"
-      defaultTextAnimation="entrance-slide"
-      borderRadius="rounded"
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      cardStyle="glass-depth"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
       contentWidth="medium"
       sizing="medium"
-      background="none"
-      cardStyle="solid"
-      primaryButtonStyle="gradient"
-      secondaryButtonStyle="glass"
-      headingFontWeight="bold"
+      background="aurora"
+      headingFontWeight="semibold"
     >
-      <NavbarStyleCentered
-        navItems={navbarNavItems}
-        button={{ text: 'Get Started', href: '/contact' }}
-        brandName="Webild"
-      />
-      <div id="services-hero" data-section="services-hero">
-        <div className="relative isolate flex h-svh flex-col items-center justify-center p-8 text-center">
-          <TextAnimation
-            className="flex flex-col items-center justify-center space-y-4"
-            titleClassName="text-5xl font-bold"
-            descriptionClassName="mt-4 text-lg text-foreground/70"
-            description="Explore our comprehensive offerings designed to meet your unique business needs."
-          >
-            Our Services
-          </TextAnimation>
-        </div>
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple navItems={navItems} brandName="Webild" />
       </div>
-      <div id="detailed-offerings" data-section="detailed-offerings">
-        <FeatureCardTwentyFour
+      <div id="services-section" data-section="services" className="py-12 md:py-20 lg:py-24">
+        <FeatureCardTwentySeven
+          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"
-          title="What We Offer"
-          description="From concept to launch, we provide end-to-end solutions."
-          tag="Offerings"
           textboxLayout="default"
           useInvertedBackground={false}
-          features={[
-            {
-              id: 'web-dev',
-              title: 'Web Development',
-              author: 'Our Expert Team',
-              description: 'Building responsive, high-performance websites tailored to your business goals.',
-              tags: ['Frontend', 'Backend', 'CMS'],
-              imageSrc: 'https://images.unsplash.com/photo-1549692520-acc6669e2fde?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-              imageAlt: 'Web development code on screen'
-            },
-            {
-              id: 'mobile-dev',
-              title: 'Mobile App Development',
-              author: 'Our Expert Team',
-              description: 'Crafting intuitive and engaging mobile applications for iOS and Android platforms.',
-              tags: ['iOS', 'Android', 'Cross-Platform'],
-              imageSrc: 'https://images.unsplash.com/photo-1590492211244-77a827419846?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-              imageAlt: 'Mobile app development UI screens'
-            },
-            {
-              id: 'ui-ux-design',
-              title: 'UI/UX Design',
-              author: 'Our Expert Team',
-              description: 'Creating stunning and user-friendly interfaces that enhance user experience.',
-              tags: ['Wireframing', 'Prototyping', 'User Research'],
-              imageSrc: 'https://images.unsplash.com/photo-1531297484643-982d6174164b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-              imageAlt: 'UI/UX design mockups'
-            }
-          ]}
         />
       </div>
-      <div id="service-plans" data-section="service-plans">
-        <PricingCardEight
-          animationType="slide-up"
-          title="Our Service Plans"
-          description="Find the perfect package for your project needs, from startups to enterprises."
-          tag="Pricing"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          plans={[
-            {
-              id: 'basic',
-              badge: 'Starter',
-              badgeIcon: Rocket,
-              price: '$999',
-              subtitle: 'Ideal for small projects & MVPs',
-              buttons: [{ text: 'Get Started', href: '/contact' }],
-              features: [
-                'Basic Web Development',
-                'Responsive Design',
-                '1 Month Support',
-                'SEO Fundamentals'
-              ]
-            },
-            {
-              id: 'standard',
-              badge: 'Popular',
-              badgeIcon: LayoutDashboard,
-              price: '$2499',
-              subtitle: 'Perfect for growing businesses',
-              buttons: [{ text: 'Choose Plan', href: '/contact' }],
-              features: [
-                'Custom Web Development',
-                'Mobile App Integration',
-                '3 Months Support',
-                'Advanced SEO',
-                'Analytics Setup'
-              ]
-            },
-            {
-              id: 'premium',
-              badge: 'Enterprise',
-              badgeIcon: Palette,
-              price: '$4999+',
-              subtitle: 'For large-scale, custom solutions',
-              buttons: [{ text: 'Contact Sales', href: '/contact' }],
-              features: [
-                'Enterprise-grade Solutions',
-                'Dedicated Team',
-                '6 Months Priority Support',
-                'Full Stack Development',
-                'Custom Integrations',
-                'Advanced Security'
-              ]
-            }
-          ]}
-        />
-      </div>
-      <FooterBaseReveal columns={footerColumns} copyrightText="© 2025 Webild" />
     </ThemeProvider>
   );
 }

src/app/styles/variables.css

@@ -13,12 +13,12 @@
   --background: #000000;
   --card: #0c0c0c;
   --foreground: #ffffff;
-  --primary-cta: #cee7ff;
-  --primary-cta-text: #000000;
+  --primary-cta: #106EFB;
+  --primary-cta-text: #ffffff;
   --secondary-cta: #000000;
   --secondary-cta-text: #ffffff;
   --accent: #535353;
-  --background-accent: #CEE7FF;
+  --background-accent: #106EFB;
 
   /* 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 TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 
 export default function TestimonialsPage() {
   const navItems = [
-    { 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' }
+    { 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="hover-magnetic"
-      defaultTextAnimation="entrance-slide"
-      borderRadius="rounded"
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      cardStyle="glass-depth"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
       contentWidth="medium"
       sizing="medium"
-      background="none"
-      cardStyle="solid"
-      primaryButtonStyle="gradient"
-      secondaryButtonStyle="glass"
-      headingFontWeight="bold"
+      background="aurora"
+      headingFontWeight="semibold"
     >
-      <NavbarStyleApple navItems={navItems} brandName="Webild" />
-      <div id="testimonials" data-section="testimonials">
-        <TestimonialCardTwelve
-          testimonials={testimonialsData}
-          cardTitle="Hear What Our Clients Say"
-          cardTag="Client Reviews"
+      <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: 'https://picsum.photos/seed/user1/100/100', alt: 'User 1' },
+            { src: 'https://picsum.photos/seed/user2/100/100', alt: 'User 2' },
+            { src: 'https://picsum.photos/seed/user3/100/100', alt: 'User 3' },
+            { src: 'https://picsum.photos/seed/user4/100/100', alt: 'User 4' },
+            { src: 'https://picsum.photos/seed/user5/100/100', alt: 'User 5' },
+            { src: 'https://picsum.photos/seed/user6/100/100', alt: 'User 6' }
+          ]}
+          ratingAnimation="slide-up"
+          avatarsAnimation="slide-up"
           useInvertedBackground={false}
-          cardAnimation="slide-up"
         />
       </div>
     </ThemeProvider>