diff --git a/src/app/ai-automation/page.tsx b/src/app/ai-automation/page.tsx
new file mode 100644
index 0000000..68c7012
--- /dev/null
+++ b/src/app/ai-automation/page.tsx
@@ -0,0 +1,190 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
+import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
+import ProductCardOne from "@/components/sections/product/ProductCardOne";
+import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { Brain, Zap, TrendingUp, Clock, Lightbulb, Workflow } from "lucide-react";
+
+export default function AIAutomationPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="largeSmall"
+      background="blurBottom"
+      cardStyle="outline"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="Abdul Rafay"
+          navItems={[
+            { name: "Work", id: "projects" },
+            { name: "Services", id: "/" },
+            { name: "AI Automation", id: "/ai-automation" },
+            { name: "Web Development", id: "/web-development" },
+            { name: "About", id: "about" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{
+            text: "Start a Project",            href: "#contact"
+          }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroSplitKpi
+          title="AI Automation Systems That Scale Your Operations"
+          description="Intelligent automation workflows that eliminate manual tasks, reduce operational costs by up to 60%, and streamline complex business processes. From lead qualification to customer support, transform your operations with AI-powered intelligence."
+          background={{ variant: "glowing-orb" }}
+          kpis={[
+            { value: "50+", label: "Systems Deployed" },
+            { value: "85%", label: "Manual Work Eliminated" },
+            { value: "60%", label: "Cost Reduction" }
+          ]}
+          enableKpiAnimation={true}
+          tag="AI-Powered Automation"
+          tagAnimation="slide-up"
+          buttons={[
+            { text: "See Case Studies", href: "#projects" },
+            { text: "Get Started", href: "#contact" }
+          ]}
+          buttonAnimation="slide-up"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AndPFbpHqBEtlv0fG4wek8eWPV/a-sleek-ai-automation-dashboard-interfac-1773232935194-8f25812e.png?_wi=1"
+          imageAlt="AI Automation Dashboard"
+          imagePosition="right"
+          mediaAnimation="slide-up"
+        />
+      </div>
+
+      <div id="capabilities" data-section="capabilities">
+        <FeatureCardTwelve
+          title="What AI Automation Can Do For You"
+          description="Comprehensive automation solutions designed to handle your most complex business processes with intelligence and precision."
+          tag="Core Capabilities"
+          tagAnimation="slide-up"
+          features={[
+            {
+              id: "intelligent-workflows",              label: "Intelligent Workflows",              title: "Smart Business Processes",              items: [
+                "Automated lead qualification and scoring",                "Intelligent customer routing and assignment",                "Smart follow-up sequencing and timing",                "Dynamic workflow optimization"
+              ],
+              buttons: [
+                { text: "Learn More", href: "#contact" }
+              ]
+            },
+            {
+              id: "customer-support",              label: "Support Automation",              title: "24/7 Customer Intelligence",              items: [
+                "AI-powered support ticket routing",                "Automated response generation",                "Intelligent escalation management",                "Customer satisfaction optimization"
+              ],
+              buttons: [
+                { text: "Explore", href: "#contact" }
+              ]
+            },
+            {
+              id: "data-intelligence",              label: "Data Intelligence",              title: "Smart Analytics & Insights",              items: [
+                "Real-time business intelligence dashboards",                "Predictive analytics and forecasting",                "Automated reporting and insights",                "Data-driven decision automation"
+              ],
+              buttons: [
+                { text: "Discover", href: "#contact" }
+              ]
+            },
+            {
+              id: "integrations",              label: "AI Integration",              title: "Seamless AI Ecosystem",              items: [
+                "Custom AI model implementation",                "Multi-tool integration and orchestration",                "Advanced API connectivity",                "Enterprise automation infrastructure"
+              ],
+              buttons: [
+                { text: "Get Started", href: "#contact" }
+              ]
+            }
+          ]}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="projects" data-section="projects">
+        <ProductCardOne
+          title="AI Automation Projects"
+          description="Real-world AI automation systems deployed across diverse industries, delivering measurable business impact."
+          tag="Case Studies"
+          tagAnimation="slide-up"
+          products={[
+            {
+              id: "1",              name: "Lead Qualification AI",              price: "Custom",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AndPFbpHqBEtlv0fG4wek8eWPV/screenshot-of-a-sophisticated-automation-1773232936102-44b60f1d.png?_wi=1",              imageAlt: "AI Lead Qualification System"
+            },
+            {
+              id: "2",              name: "Customer Support AI",              price: "Custom",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AndPFbpHqBEtlv0fG4wek8eWPV/modern-web-interface-for-an-ai-content-g-1773232936048-fda19c95.png?_wi=1",              imageAlt: "AI Customer Support Platform"
+            },
+            {
+              id: "3",              name: "Workflow Automation Engine",              price: "Custom",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AndPFbpHqBEtlv0fG4wek8eWPV/screenshot-of-a-high-end-modern-business-1773232935942-84f134d4.png?_wi=1",              imageAlt: "Enterprise Workflow Automation"
+            }
+          ]}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="metrics" data-section="metrics">
+        <MetricCardThree
+          title="AI Automation Impact"
+          description="Proven results from intelligent automation systems deployed across businesses."
+          tag="Performance Metrics"
+          tagAnimation="slide-up"
+          metrics={[
+            {
+              id: "1",              icon: Zap,
+              title: "Efficiency Improvement",              value: "85%+"
+            },
+            {
+              id: "2",              icon: TrendingUp,
+              title: "Revenue Growth",              value: "3-5x"
+            },
+            {
+              id: "3",              icon: Clock,
+              title: "Time Savings",              value: "40+ hrs/mo"
+            }
+          ]}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCTA
+          tag="Transform Your Operations"
+          tagAnimation="slide-up"
+          title="Ready to Automate with AI?"
+          description="Let's build intelligent automation systems that streamline your operations, reduce costs, and scale your business without scaling your team. Schedule a consultation to explore what's possible."
+          buttons={[
+            { text: "Schedule Consultation", href: "mailto:your-email@example.com?subject=AI%20Automation%20Consultation" }
+          ]}
+          buttonAnimation="slide-up"
+          background={{ variant: "animated-grid" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Abdul Rafay"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Terms of Service", href: "#" }}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file
diff --git a/src/app/integrations/page.tsx b/src/app/integrations/page.tsx
new file mode 100644
index 0000000..1b0f4e6
--- /dev/null
+++ b/src/app/integrations/page.tsx
@@ -0,0 +1,188 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
+import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
+import ProductCardOne from "@/components/sections/product/ProductCardOne";
+import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { Zap, TrendingUp, Clock, Plug } from "lucide-react";
+
+export default function IntegrationsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="largeSmall"
+      background="blurBottom"
+      cardStyle="outline"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="Abdul Rafay"
+          navItems={[
+            { name: "Work", id: "projects" },
+            { name: "Services", id: "services" },
+            { name: "About", id: "about" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{
+            text: "Start a Project",            href: "#contact"
+          }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroSplitKpi
+          title="Seamless Integrations & AI Tools"
+          description="Connect your entire business ecosystem with powerful API integrations and AI tool implementations. We build bridges between your systems, enabling data flow, automation, and intelligent decision-making across your entire operation."
+          background={{ variant: "glowing-orb" }}
+          kpis={[
+            { value: "50+", label: "Platform Integrations" },
+            { value: "99.9%", label: "API Uptime" },
+            { value: "Real-time", label: "Data Sync" }
+          ]}
+          enableKpiAnimation={true}
+          tag="Integration Specialist"
+          tagAnimation="slide-up"
+          buttons={[
+            { text: "View Integrations", href: "#projects" },
+            { text: "Get Connected", href: "#contact" }
+          ]}
+          buttonAnimation="slide-up"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AndPFbpHqBEtlv0fG4wek8eWPV/modern-web-interface-for-an-ai-content-g-1773232936048-fda19c95.png?_wi=1"
+          imageAlt="Integration Platform Interface"
+          imagePosition="right"
+          mediaAnimation="slide-up"
+        />
+      </div>
+
+      <div id="services" data-section="services">
+        <FeatureCardTwelve
+          title="Integration & AI Services"
+          description="Comprehensive integration solutions and AI implementations for enterprise systems."
+          tag="Integration Types"
+          tagAnimation="slide-up"
+          features={[
+            {
+              id: "api-integration",              label: "API Integration",              title: "Custom API Integrations",              items: [
+                "RESTful and GraphQL API development",                "Third-party API connections",                "Webhook implementation and management",                "Real-time data synchronization"
+              ],
+              buttons: [
+                { text: "Learn More", href: "#contact" }
+              ]
+            },
+            {
+              id: "ai-models",              label: "AI Models",              title: "AI Model Implementation",              items: [
+                "LLM integration and fine-tuning",                "Custom machine learning models",                "Predictive analytics implementation",                "Natural language processing solutions"
+              ],
+              buttons: [
+                { text: "Explore AI", href: "#contact" }
+              ]
+            },
+            {
+              id: "platform-sync",              label: "Platform Connectivity",              title: "Multi-Platform Ecosystem Sync",              items: [
+                "CRM to marketing automation sync",                "ERP and accounting system integration",                "E-commerce platform connections",                "Analytics and BI tool integration"
+              ],
+              buttons: [
+                { text: "Get Started", href: "#contact" }
+              ]
+            },
+            {
+              id: "advanced-tooling",              label: "Advanced Tools",              title: "Advanced Automation Tooling",              items: [
+                "No-code automation platform setup",                "Custom webhook infrastructure",                "Data transformation pipelines",                "Real-time event processing"
+              ],
+              buttons: [
+                { text: "Discover", href: "#contact" }
+              ]
+            }
+          ]}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="projects" data-section="projects">
+        <ProductCardOne
+          title="Integration Projects"
+          description="Showcase of successful integrations and AI implementations across industries."
+          tag="Portfolio"
+          tagAnimation="slide-up"
+          products={[
+            {
+              id: "1",              name: "Multi-Platform CRM Integration",              price: "5+ systems",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AndPFbpHqBEtlv0fG4wek8eWPV/screenshot-of-a-sophisticated-automation-1773232936102-44b60f1d.png?_wi=1",              imageAlt: "CRM Integration Architecture"
+            },
+            {
+              id: "2",              name: "AI Content Processing Engine",              price: "Custom LLM",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AndPFbpHqBEtlv0fG4wek8eWPV/modern-web-interface-for-an-ai-content-g-1773232936048-fda19c95.png?_wi=1",              imageAlt: "AI Processing System"
+            },
+            {
+              id: "3",              name: "Real-time Analytics Dashboard",              price: "24/7 sync",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AndPFbpHqBEtlv0fG4wek8eWPV/screenshot-of-a-high-end-modern-business-1773232935942-84f134d4.png?_wi=1",              imageAlt: "Real-time Analytics Platform"
+            }
+          ]}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="metrics" data-section="metrics">
+        <MetricCardThree
+          title="Integration Results"
+          description="Proven outcomes from our integration and AI implementations."
+          tag="Results"
+          tagAnimation="slide-up"
+          metrics={[
+            {
+              id: "1",              icon: Plug,
+              title: "System Connectivity",              value: "99.9%"
+            },
+            {
+              id: "2",              icon: TrendingUp,
+              title: "Data Accuracy",              value: "99.8%"
+            },
+            {
+              id: "3",              icon: Zap,
+              title: "Performance",              value: "<100ms"
+            }
+          ]}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCTA
+          tag="Ready to Integrate?"
+          tagAnimation="slide-up"
+          title="Connect Your Systems Today"
+          description="Let's build the integrations and AI solutions that will connect your entire business ecosystem and unlock new possibilities for growth and efficiency."
+          buttons={[
+            { text: "Send Message", href: "mailto:your-email@example.com?subject=Integration%20Inquiry", onClick: () => window.open("https://mail.google.com/mail/u/0/#inbox?compose=CllgCKCJDpcNVLgLjnmzlfjhpdVpzlhHMczkBTgTPMlCJWbKpnvxftQMXCJXsLrmzvsghmMqHjV", "_blank") }
+          ]}
+          buttonAnimation="slide-up"
+          background={{ variant: "animated-grid" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Abdul Rafay"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Terms of Service", href: "#" }}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index adc28ef..1514b7f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -90,7 +90,7 @@ export default function LandingPage() {
                 "Custom AI workflows for business processes",                "Intelligent lead qualification and routing",                "Automated customer support systems",                "Smart business intelligence dashboards"
               ],
               buttons: [
-                { text: "Learn More", href: "#contact" }
+                { text: "Learn More", href: "/services/ai-automation" }
               ]
             },
             {
@@ -98,7 +98,7 @@ export default function LandingPage() {
                 "Modern conversion-focused design",                "Lightning-fast performance optimization",                "Scalable architecture for growth",                "Mobile-first responsive development"
               ],
               buttons: [
-                { text: "View Portfolio", href: "#projects" }
+                { text: "View Portfolio", href: "/services/web-development" }
               ]
             },
             {
@@ -106,7 +106,7 @@ export default function LandingPage() {
                 "Lead pipeline automation systems",                "CRM integration and optimization",                "Automated follow-up sequences",                "Business process automation"
               ],
               buttons: [
-                { text: "Explore", href: "#contact" }
+                { text: "Explore", href: "/services/workflows" }
               ]
             },
             {
@@ -114,7 +114,7 @@ export default function LandingPage() {
                 "Custom API integrations",                "AI model implementation",                "Software ecosystem connectivity",                "Advanced automation tooling"
               ],
               buttons: [
-                { text: "Get Started", href: "#contact" }
+                { text: "Get Started", href: "/services/integrations" }
               ]
             }
           ]}
diff --git a/src/app/web-development/page.tsx b/src/app/web-development/page.tsx
new file mode 100644
index 0000000..d574aae
--- /dev/null
+++ b/src/app/web-development/page.tsx
@@ -0,0 +1,190 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
+import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
+import ProductCardOne from "@/components/sections/product/ProductCardOne";
+import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { Zap, TrendingUp, Clock } from "lucide-react";
+
+export default function WebDevelopmentPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="largeSmall"
+      background="blurBottom"
+      cardStyle="outline"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="Abdul Rafay"
+          navItems={[
+            { name: "Work", id: "projects" },
+            { name: "Services", id: "/" },
+            { name: "AI Automation", id: "/ai-automation" },
+            { name: "Web Development", id: "/web-development" },
+            { name: "About", id: "about" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{
+            text: "Start a Project",            href: "#contact"
+          }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroSplitKpi
+          title="High-Performance Web Solutions That Convert"
+          description="Modern, lightning-fast websites built with cutting-edge technology. From responsive design to conversion optimization, I build digital products that drive measurable business results and scale with your growth."
+          background={{ variant: "glowing-orb" }}
+          kpis={[
+            { value: "100", label: "Lighthouse Score" },
+            { value: "3-5x", label: "Conversion Increase" },
+            { value: "2.5s", label: "Average Load Time" }
+          ]}
+          enableKpiAnimation={true}
+          tag="Modern Web Development"
+          tagAnimation="slide-up"
+          buttons={[
+            { text: "View Portfolio", href: "#projects" },
+            { text: "Start Your Project", href: "#contact" }
+          ]}
+          buttonAnimation="slide-up"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AndPFbpHqBEtlv0fG4wek8eWPV/screenshot-of-a-high-end-modern-business-1773232935942-84f134d4.png?_wi=1"
+          imageAlt="Modern Web Design Interface"
+          imagePosition="right"
+          mediaAnimation="slide-up"
+        />
+      </div>
+
+      <div id="expertise" data-section="expertise">
+        <FeatureCardTwelve
+          title="Web Development Expertise"
+          description="Comprehensive web solutions covering every aspect of modern digital product development, from design to deployment."
+          tag="Technical Stack"
+          tagAnimation="slide-up"
+          features={[
+            {
+              id: "frontend-development",              label: "Frontend Development",              title: "Modern Interactive Interfaces",              items: [
+                "React & Next.js applications",                "Responsive design across all devices",                "Advanced animations and interactions",                "Accessibility-first implementation"
+              ],
+              buttons: [
+                { text: "Learn More", href: "#contact" }
+              ]
+            },
+            {
+              id: "performance-optimization",              label: "Performance",              title: "Lightning-Fast Performance",              items: [
+                "Image optimization and lazy loading",                "Code splitting and bundling optimization",                "Core Web Vitals optimization",                "Content delivery network integration"
+              ],
+              buttons: [
+                { text: "Explore", href: "#contact" }
+              ]
+            },
+            {
+              id: "backend-infrastructure",              label: "Backend Services",              title: "Scalable Infrastructure",              items: [
+                "Node.js and API development",                "Database design and optimization",                "Cloud infrastructure setup",                "Secure authentication systems"
+              ],
+              buttons: [
+                { text: "Discover", href: "#contact" }
+              ]
+            },
+            {
+              id: "conversion-seo",              label: "Optimization",              title: "SEO & Conversion Focused",              items: [
+                "Technical SEO implementation",                "Conversion rate optimization",                "Analytics and tracking setup",                "A/B testing and performance monitoring"
+              ],
+              buttons: [
+                { text: "Get Started", href: "#contact" }
+              ]
+            }
+          ]}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="projects" data-section="projects">
+        <ProductCardOne
+          title="Web Development Projects"
+          description="Showcase of high-performance websites and digital products built to convert, scale, and perform exceptionally."
+          tag="Portfolio"
+          tagAnimation="slide-up"
+          products={[
+            {
+              id: "1",              name: "E-Commerce Platform",              price: "Custom",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AndPFbpHqBEtlv0fG4wek8eWPV/screenshot-of-a-high-end-modern-business-1773232935942-84f134d4.png?_wi=1",              imageAlt: "E-Commerce Platform"
+            },
+            {
+              id: "2",              name: "SaaS Application",              price: "Custom",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AndPFbpHqBEtlv0fG4wek8eWPV/a-sleek-ai-automation-dashboard-interfac-1773232935194-8f25812e.png?_wi=1",              imageAlt: "SaaS Dashboard Application"
+            },
+            {
+              id: "3",              name: "Marketing Website",              price: "Custom",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AndPFbpHqBEtlv0fG4wek8eWPV/modern-web-interface-for-an-ai-content-g-1773232936048-fda19c95.png?_wi=1",              imageAlt: "High-Converting Marketing Website"
+            }
+          ]}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="metrics" data-section="metrics">
+        <MetricCardThree
+          title="Web Development Results"
+          description="Proven performance metrics from modern web solutions."
+          tag="Success Metrics"
+          tagAnimation="slide-up"
+          metrics={[
+            {
+              id: "1",              icon: Zap,
+              title: "Performance Gain",              value: "100"
+            },
+            {
+              id: "2",              icon: TrendingUp,
+              title: "Conversion Boost",              value: "3-5x"
+            },
+            {
+              id: "3",              icon: Clock,
+              title: "Load Time",              value: "<2.5s"
+            }
+          ]}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCTA
+          tag="Build Something Exceptional"
+          tagAnimation="slide-up"
+          title="Ready to Build Your Next Web Project?"
+          description="Let's create a high-performance web solution that stands out, converts visitors into customers, and scales with your business. Contact me to discuss your project requirements and get started."
+          buttons={[
+            { text: "Get In Touch", href: "mailto:your-email@example.com?subject=Web%20Development%20Project" }
+          ]}
+          buttonAnimation="slide-up"
+          background={{ variant: "animated-grid" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Abdul Rafay"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Terms of Service", href: "#" }}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file
diff --git a/src/app/workflows/page.tsx b/src/app/workflows/page.tsx
new file mode 100644
index 0000000..3209d48
--- /dev/null
+++ b/src/app/workflows/page.tsx
@@ -0,0 +1,188 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
+import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
+import ProductCardOne from "@/components/sections/product/ProductCardOne";
+import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { Zap, TrendingUp, Clock, CheckCircle } from "lucide-react";
+
+export default function WorkflowsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="largeSmall"
+      background="blurBottom"
+      cardStyle="outline"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="Abdul Rafay"
+          navItems={[
+            { name: "Work", id: "projects" },
+            { name: "Services", id: "services" },
+            { name: "About", id: "about" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{
+            text: "Start a Project",            href: "#contact"
+          }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroSplitKpi
+          title="Automation Workflows That Drive Results"
+          description="Transform your business operations with intelligent automation workflows. Eliminate repetitive tasks, reduce errors, and scale your processes without adding headcount. Our workflow solutions integrate seamlessly with your existing tools and systems."
+          background={{ variant: "glowing-orb" }}
+          kpis={[
+            { value: "95%+", label: "Task Automation Success" },
+            { value: "40+ hrs", label: "Time Saved Monthly" },
+            { value: "24/7", label: "Continuous Operation" }
+          ]}
+          enableKpiAnimation={true}
+          tag="Workflow Automation"
+          tagAnimation="slide-up"
+          buttons={[
+            { text: "View Case Studies", href: "#projects" },
+            { text: "Schedule Demo", href: "#contact" }
+          ]}
+          buttonAnimation="slide-up"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AndPFbpHqBEtlv0fG4wek8eWPV/screenshot-of-a-sophisticated-automation-1773232936102-44b60f1d.png?_wi=1"
+          imageAlt="Workflow Automation System"
+          imagePosition="right"
+          mediaAnimation="slide-up"
+        />
+      </div>
+
+      <div id="services" data-section="services">
+        <FeatureCardTwelve
+          title="Workflow Solutions We Provide"
+          description="Comprehensive automation workflows designed to optimize every aspect of your business operations."
+          tag="Workflow Types"
+          tagAnimation="slide-up"
+          features={[
+            {
+              id: "lead-automation",              label: "Lead Generation",              title: "Lead Pipeline Automation",              items: [
+                "Intelligent lead capture and qualification",                "Automated nurturing sequences",                "Smart lead scoring and routing",                "Multi-channel lead integration"
+              ],
+              buttons: [
+                { text: "Learn More", href: "#contact" }
+              ]
+            },
+            {
+              id: "crm-workflows",              label: "CRM Integration",              title: "CRM Automation & Optimization",              items: [
+                "Seamless CRM data synchronization",                "Automated contact management",                "Pipeline stage automation",                "Real-time sales insights"
+              ],
+              buttons: [
+                { text: "Explore CRM", href: "#contact" }
+              ]
+            },
+            {
+              id: "customer-support",              label: "Customer Support",              title: "Automated Support Workflows",              items: [
+                "Ticket routing and prioritization",                "Automated response systems",                "Customer escalation workflows",                "Support analytics and reporting"
+              ],
+              buttons: [
+                { text: "Get Started", href: "#contact" }
+              ]
+            },
+            {
+              id: "business-processes",              label: "Business Operations",              title: "Core Business Process Automation",              items: [
+                "Document processing workflows",                "Invoice and payment automation",                "Approval and compliance workflows",                "Reporting and analytics automation"
+              ],
+              buttons: [
+                { text: "Discover", href: "#contact" }
+              ]
+            }
+          ]}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="projects" data-section="projects">
+        <ProductCardOne
+          title="Workflow Case Studies"
+          description="Real-world implementations showcasing the power of automated workflows."
+          tag="Portfolio"
+          tagAnimation="slide-up"
+          products={[
+            {
+              id: "1",              name: "Lead Pipeline Automation",              price: "50+ leads/day",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AndPFbpHqBEtlv0fG4wek8eWPV/screenshot-of-a-sophisticated-automation-1773232936102-44b60f1d.png?_wi=1",              imageAlt: "Lead Pipeline Workflow"
+            },
+            {
+              id: "2",              name: "Customer Support Automation",              price: "80% reduction",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AndPFbpHqBEtlv0fG4wek8eWPV/modern-web-interface-for-an-ai-content-g-1773232936048-fda19c95.png?_wi=1",              imageAlt: "Support Automation System"
+            },
+            {
+              id: "3",              name: "E-commerce Order Automation",              price: "24/7 processing",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AndPFbpHqBEtlv0fG4wek8eWPV/screenshot-of-a-high-end-modern-business-1773232935942-84f134d4.png?_wi=1",              imageAlt: "Order Processing Workflow"
+            }
+          ]}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="metrics" data-section="metrics">
+        <MetricCardThree
+          title="Workflow Impact"
+          description="Measurable results from our workflow automation implementations."
+          tag="Results"
+          tagAnimation="slide-up"
+          metrics={[
+            {
+              id: "1",              icon: Zap,
+              title: "Process Efficiency",              value: "90%+"
+            },
+            {
+              id: "2",              icon: TrendingUp,
+              title: "Productivity Gain",              value: "5x"
+            },
+            {
+              id: "3",              icon: Clock,
+              title: "Time Saved",              value: "60+ hrs/mo"
+            }
+          ]}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCTA
+          tag="Ready to Automate?"
+          tagAnimation="slide-up"
+          title="Transform Your Workflows Today"
+          description="Let's discuss how automation workflows can streamline your operations, reduce manual work, and scale your business efficiently."
+          buttons={[
+            { text: "Send Message", href: "mailto:your-email@example.com?subject=Workflow%20Automation%20Inquiry", onClick: () => window.open("https://mail.google.com/mail/u/0/#inbox?compose=CllgCKCJDpcNVLgLjnmzlfjhpdVpzlhHMczkBTgTPMlCJWbKpnvxftQMXCJXsLrmzvsghmMqHjV", "_blank") }
+          ]}
+          buttonAnimation="slide-up"
+          background={{ variant: "animated-grid" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Abdul Rafay"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Terms of Service", href: "#" }}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}