Update src/app/workflows/page.tsx

Merge version_7 into main

src/app/ai-automation/page.tsx

@@ -0,0 +1,175 @@
+"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: "services" },
+            { name: "About", id: "about" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{
+            text: "Contact",            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" }
+          ]}
+          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"
+              ]
+            },
+            {
+              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"
+              ]
+            },
+            {
+              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"
+              ]
+            },
+            {
+              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"
+              ]
+            }
+          ]}
+          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>
+  );
+}

src/app/integrations/page.tsx

@@ -0,0 +1,175 @@
+"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: "Contact",            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" }
+          ]}
+          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"
+              ]
+            },
+            {
+              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"
+              ]
+            },
+            {
+              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"
+              ]
+            },
+            {
+              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"
+              ]
+            }
+          ]}
+          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>
+  );
+}

src/app/learn-more/ai-automation/page.tsx

@@ -32,7 +32,7 @@ export default function LearnMoreAIAutomation() {
             { name: "Contact", id: "#" }
           ]}
           button={{
-            text: "Start a Project",            href: "#contact"
+            text: "Contact",            href: "#contact"
           }}
         />
       </div>
@@ -67,9 +67,6 @@ export default function LearnMoreAIAutomation() {
           tagAnimation="slide-up"
           title="Intelligent systems that learn and adapt to your business needs. Custom AI workflows that eliminate repetitive tasks, reduce errors, and free your team to focus on strategic work."
           useInvertedBackground={false}
-          buttons={[
-            { text: "Back to Home", href: "/" }
-          ]}
           buttonAnimation="slide-up"
         />
       </div>

src/app/learn-more/integrations/page.tsx

@@ -32,7 +32,7 @@ export default function LearnMoreIntegrations() {
             { name: "Contact", id: "#" }
           ]}
           button={{
-            text: "Start a Project",            href: "#contact"
+            text: "Contact",            href: "#contact"
           }}
         />
       </div>
@@ -67,9 +67,6 @@ export default function LearnMoreIntegrations() {
           tagAnimation="slide-up"
           title="We specialize in connecting disparate systems into a unified, intelligent ecosystem. Custom API development, AI model implementation, and advanced automation tooling that scales with your business."
           useInvertedBackground={false}
-          buttons={[
-            { text: "Back to Home", href: "/" }
-          ]}
           buttonAnimation="slide-up"
         />
       </div>

src/app/page.tsx

@@ -35,7 +35,7 @@ export default function LandingPage() {
             { name: "Contact", id: "contact" }
           ]}
           button={{
-            text: "Start a Project",            href: "#contact"
+            text: "Contact",            href: "#contact"
           }}
         />
       </div>
@@ -54,8 +54,7 @@ export default function LandingPage() {
           tag="Automation Expert"
           tagAnimation="slide-up"
           buttons={[
-            { text: "View My Work", href: "#projects" },
-            { text: "Start a Project", href: "#contact" }
+            { text: "View My Work", href: "#projects" }
           ]}
           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"
@@ -71,9 +70,6 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           title="I design and build intelligent systems that automate business operations, streamline workflows, and transform ideas into scalable digital products. My focus: build systems that work smarter than people."
           useInvertedBackground={false}
-          buttons={[
-            { text: "Explore My Work", href: "#projects" }
-          ]}
           buttonAnimation="slide-up"
         />
       </div>
@@ -88,33 +84,21 @@ export default function LandingPage() {
             {
               id: "ai-automation",              label: "AI Automation",              title: "AI Automation Systems",              items: [
                 "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" }
               ]
             },
             {
               id: "web-development",              label: "Web Solutions",              title: "High-Performance Websites",              items: [
                 "Modern conversion-focused design",                "Lightning-fast performance optimization",                "Scalable architecture for growth",                "Mobile-first responsive development"
-              ],
-              buttons: [
-                { text: "View Portfolio", href: "#projects" }
               ]
             },
             {
               id: "workflows",              label: "Workflows",              title: "Automation Workflows",              items: [
                 "Lead pipeline automation systems",                "CRM integration and optimization",                "Automated follow-up sequences",                "Business process automation"
-              ],
-              buttons: [
-                { text: "Explore", href: "#contact" }
               ]
             },
             {
               id: "integrations",              label: "Integration",              title: "AI Tools & Integrations",              items: [
                 "Custom API integrations",                "AI model implementation",                "Software ecosystem connectivity",                "Advanced automation tooling"
-              ],
-              buttons: [
-                { text: "Get Started", href: "#contact" }
               ]
             }
           ]}

src/app/portfolio/page.tsx

@@ -28,8 +28,7 @@ export default function PortfolioPage() {
             { name: "Work", id: "projects" },
             { name: "Services", id: "services" },
             { name: "About", id: "about" },
-            { name: "Contact", id: "contact" },
-            { name: "Portfolio", id: "/portfolio" }
+            { name: "Contact", id: "contact" }
           ]}
           button={{
             text: "Start a Project",            href: "#contact"

src/app/web-development/page.tsx

@@ -0,0 +1,175 @@
+"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: "services" },
+            { name: "About", id: "about" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{
+            text: "Contact",            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" }
+          ]}
+          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"
+              ]
+            },
+            {
+              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"
+              ]
+            },
+            {
+              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"
+              ]
+            },
+            {
+              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"
+              ]
+            }
+          ]}
+          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>
+  );
+}

src/app/workflows/page.tsx

@@ -0,0 +1,175 @@
+"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: "Contact",            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" }
+          ]}
+          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"
+              ]
+            },
+            {
+              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"
+              ]
+            },
+            {
+              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"
+              ]
+            },
+            {
+              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"
+              ]
+            }
+          ]}
+          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>
+  );
+}