Add src/app/workflows/page.tsx

Merge version_5 into main

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>
+  );
+}

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>
+  );
+}

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

@@ -0,0 +1,101 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
+import TextAbout from "@/components/sections/about/TextAbout";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { Zap } from "lucide-react";
+
+export default function LearnMoreAIAutomation() {
+  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: "#" },
+            { name: "Services", id: "#" },
+            { name: "About", id: "#" },
+            { name: "Contact", id: "#" }
+          ]}
+          button={{
+            text: "Start a Project",            href: "#contact"
+          }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroSplitKpi
+          title="AI Automation Systems"
+          description="Custom AI workflows designed to transform your business processes. From intelligent lead qualification to automated customer support, these systems work 24/7 to streamline operations and drive growth."
+          background={{ variant: "glowing-orb" }}
+          kpis={[
+            { value: "24/7", label: "Availability" },
+            { value: "80%+", label: "Task Automation" },
+            { value: "Instant", label: "Processing" }
+          ]}
+          enableKpiAnimation={true}
+          tag="Deep Dive"
+          tagAnimation="slide-up"
+          buttons={[
+            { text: "Start Your Project", 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="about" data-section="about">
+        <TextAbout
+          tag="What We Deliver"
+          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>
+
+      <div id="contact" data-section="contact">
+        <ContactCTA
+          tag="Ready to Automate?"
+          tagAnimation="slide-up"
+          title="Transform Your Business with AI Automation"
+          description="Let's discuss how custom AI workflows can streamline your operations, reduce costs, and drive measurable results for your business."
+          buttons={[
+            { text: "Schedule Consultation", href: "https://mail.google.com/mail/u/0/#inbox?compose=CllgCKCJDpcNVLgLjnmzlfjhpdVpzlhHMczkBTgTPMlCJWbKpnvxftQMXCJXsLrmzvsghmMqHjV", 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/integrations/page.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
+import TextAbout from "@/components/sections/about/TextAbout";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { Zap } from "lucide-react";
+
+export default function LearnMoreIntegrations() {
+  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: "#" },
+            { name: "Services", id: "#" },
+            { name: "About", id: "#" },
+            { name: "Contact", id: "#" }
+          ]}
+          button={{
+            text: "Start a Project",            href: "#contact"
+          }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroSplitKpi
+          title="AI Tools & Integrations"
+          description="Connect your entire software ecosystem with powerful AI tools and custom integrations. Seamless data flow between your favorite platforms, powered by intelligent automation."
+          background={{ variant: "glowing-orb" }}
+          kpis={[
+            { value: "100+", label: "Integrations" },
+            { value: "Real-time", label: "Data Sync" },
+            { value: "Custom", label: "AI Models" }
+          ]}
+          enableKpiAnimation={true}
+          tag="Deep Dive"
+          tagAnimation="slide-up"
+          buttons={[
+            { 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-sophisticated-automation-1773232936102-44b60f1d.png?_wi=1"
+          imageAlt="Integration Dashboard"
+          imagePosition="right"
+          mediaAnimation="slide-up"
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <TextAbout
+          tag="Our Expertise"
+          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>
+
+      <div id="contact" data-section="contact">
+        <ContactCTA
+          tag="Ready to Integrate?"
+          tagAnimation="slide-up"
+          title="Connect Your Tools with Intelligent Automation"
+          description="Let's build custom integrations and AI tools that connect your entire business ecosystem and unlock new capabilities."
+          buttons={[
+            { text: "Schedule Consultation", href: "https://mail.google.com/mail/u/0/#inbox?compose=CllgCKCJDpcNVLgLjnmzlfjhpdVpzlhHMczkBTgTPMlCJWbKpnvxftQMXCJXsLrmzvsghmMqHjV", 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/workflows/page.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
+import TextAbout from "@/components/sections/about/TextAbout";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { Zap } from "lucide-react";
+
+export default function LearnMoreWorkflows() {
+  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: "#" },
+            { name: "Services", id: "#" },
+            { name: "About", id: "#" },
+            { name: "Contact", id: "#" }
+          ]}
+          button={{
+            text: "Start a Project",            href: "#contact"
+          }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroSplitKpi
+          title="Automation Workflows"
+          description="Intelligent workflow automation designed to streamline your business processes. From lead pipeline automation to CRM integration, these systems automate repetitive tasks and accelerate your growth."
+          background={{ variant: "glowing-orb" }}
+          kpis={[
+            { value: "80%", label: "Task Automation" },
+            { value: "10x", label: "Faster Processing" },
+            { value: "Zero", label: "Manual Errors" }
+          ]}
+          enableKpiAnimation={true}
+          tag="Deep Dive"
+          tagAnimation="slide-up"
+          buttons={[
+            { text: "Start Your Project", 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="Workflow Automation Dashboard"
+          imagePosition="right"
+          mediaAnimation="slide-up"
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <TextAbout
+          tag="How It Works"
+          tagAnimation="slide-up"
+          title="We design custom workflows that integrate with your existing tools and systems. Automated lead qualification, follow-up sequences, CRM syncing, and business intelligence—all working together seamlessly."
+          useInvertedBackground={false}
+          buttons={[
+            { text: "Back to Home", href: "/" }
+          ]}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCTA
+          tag="Ready to Automate?"
+          tagAnimation="slide-up"
+          title="Streamline Your Business with Automation Workflows"
+          description="Let's map out your processes and build intelligent workflows that save time, reduce errors, and accelerate your business growth."
+          buttons={[
+            { text: "Schedule Consultation", href: "https://mail.google.com/mail/u/0/#inbox?compose=CllgCKCJDpcNVLgLjnmzlfjhpdVpzlhHMczkBTgTPMlCJWbKpnvxftQMXCJXsLrmzvsghmMqHjV", 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/page.tsx

@@ -43,7 +43,7 @@ export default function LandingPage() {
       <div id="hero" data-section="hero">
         <HeroSplitKpi
           title="I Build Intelligent Systems for the Internet"
-          description="Automation, AI workflows, and high-performance digital products that help businesses scale faster and operate smarter."
+          description="Help businesses automate 80% of manual tasks while reducing operational costs by up to 60%. AI workflows and automation systems that scale your operations without scaling your team."
           background={{ variant: "glowing-orb" }}
           kpis={[
             { value: "50+", label: "Automation Systems Built" },
@@ -58,7 +58,7 @@ export default function LandingPage() {
             { text: "Start a Project", 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"
+          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="Automation Dashboard Interface"
           imagePosition="right"
           mediaAnimation="slide-up"
@@ -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" }
               ]
             }
           ]}
@@ -133,13 +133,13 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           products={[
             {
-              id: "1",              name: "Automation Dashboard",              price: "Custom",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AndPFbpHqBEtlv0fG4wek8eWPV/screenshot-of-a-sophisticated-automation-1773232936102-44b60f1d.png",              imageAlt: "Automation Dashboard System"
+              id: "1",              name: "Automation Dashboard",              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: "Automation Dashboard System"
             },
             {
-              id: "2",              name: "AI Content Generator",              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",              imageAlt: "AI Content Generation Tool"
+              id: "2",              name: "AI Content Generator",              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 Content Generation Tool"
             },
             {
-              id: "3",              name: "Modern Business Website",              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",              imageAlt: "High-Performance Business Website"
+              id: "3",              name: "Modern Business Website",              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: "High-Performance Business Website"
             }
           ]}
           gridVariant="three-columns-all-equal-width"
@@ -182,8 +182,7 @@ export default function LandingPage() {
           title="Ready to Automate Your Business?"
           description="If you want to automate your operations, streamline workflows, or build a high-performance digital product, let's work together to transform your vision into reality."
           buttons={[
-            { text: "Send Message", href: "mailto:contact@abdulrafay.com" },
+            { text: "Send Message", href: "mailto:your-email@example.com?subject=Let's%20Build%20Something%20Powerful", onClick: () => window.open("https://mail.google.com/mail/u/0/#inbox?compose=CllgCKCJDpcNVLgLjnmzlfjhpdVpzlhHMczkBTgTPMlCJWbKpnvxftQMXCJXsLrmzvsghmMqHjV", "_blank") }
-            { text: "Schedule Call", href: "#" }
           ]}
           buttonAnimation="slide-up"
           background={{ variant: "animated-grid" }}
@@ -200,4 +199,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/portfolio/page.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import HeroSplit from "@/components/sections/hero/HeroSplit";
+import ProductCardOne from "@/components/sections/product/ProductCardOne";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+
+export default function PortfolioPage() {
+  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" },
+            { name: "Portfolio", id: "/portfolio" }
+          ]}
+          button={{
+            text: "Start a Project",            href: "#contact"
+          }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroSplit
+          title="Complete Project Portfolio"
+          description="A showcase of intelligent systems, automation workflows, and high-performance digital products built for businesses across industries."
+          background={{ variant: "glowing-orb" }}
+          tag="Portfolio"
+          tagAnimation="slide-up"
+          buttons={[
+            { text: "Start Your Project", 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=2"
+          imageAlt="Portfolio Showcase"
+          imagePosition="right"
+          mediaAnimation="slide-up"
+        />
+      </div>
+
+      <div id="projects" data-section="projects">
+        <ProductCardOne
+          title="Featured Projects"
+          description="A curated collection of automation systems, AI solutions, and modern web products that deliver measurable business impact."
+          tag="All Projects"
+          tagAnimation="slide-up"
+          products={[
+            {
+              id: "1",              name: "Automation Dashboard",              price: "Custom Enterprise",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AndPFbpHqBEtlv0fG4wek8eWPV/screenshot-of-a-sophisticated-automation-1773232936102-44b60f1d.png?_wi=2",              imageAlt: "Sophisticated Automation Dashboard with real-time analytics and workflow monitoring"
+            },
+            {
+              id: "2",              name: "AI Content Generator",              price: "Custom SaaS",              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=2",              imageAlt: "Modern AI Content Generation Tool with intuitive interface and advanced features"
+            },
+            {
+              id: "3",              name: "Modern Business Website",              price: "Custom Design",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AndPFbpHqBEtlv0fG4wek8eWPV/screenshot-of-a-high-end-modern-business-1773232935942-84f134d4.png?_wi=2",              imageAlt: "High-End Modern Business Website with premium design and optimal user experience"
+            },
+            {
+              id: "4",              name: "Lead Automation System",              price: "Custom Automation",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AndPFbpHqBEtlv0fG4wek8eWPV/screenshot-of-a-sophisticated-automation-1773232936102-44b60f1d.png?_wi=3",              imageAlt: "Lead Management Automation System with intelligent routing and qualification"
+            },
+            {
+              id: "5",              name: "Customer Support Platform",              price: "Custom Platform",              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=3",              imageAlt: "Automated Customer Support Platform powered by AI and machine learning"
+            },
+            {
+              id: "6",              name: "Performance Analytics Suite",              price: "Custom Analytics",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AndPFbpHqBEtlv0fG4wek8eWPV/screenshot-of-a-high-end-modern-business-1773232935942-84f134d4.png?_wi=3",              imageAlt: "Comprehensive Business Analytics Suite with real-time insights and reporting"
+            }
+          ]}
+          gridVariant="bento-grid"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCTA
+          tag="Ready to Build?"
+          tagAnimation="slide-up"
+          title="Transform Your Business with Custom Automation"
+          description="Let's discuss how AI automation and intelligent systems can streamline your operations, reduce costs, and accelerate growth."
+          buttons={[
+            { text: "Schedule Consultation", href: "mailto:contact@abdulrafay.com" },
+            { text: "View Capabilities", href: "/#services" }
+          ]}
+          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/portfolio/web-development/page.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
+import TextAbout from "@/components/sections/about/TextAbout";
+import ProductCardOne from "@/components/sections/product/ProductCardOne";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+
+export default function PortfolioWebDevelopment() {
+  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: "#" },
+            { name: "Services", id: "#" },
+            { name: "About", id: "#" },
+            { name: "Contact", id: "#" }
+          ]}
+          button={{
+            text: "Start a Project",            href: "#contact"
+          }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroSplitKpi
+          title="High-Performance Websites"
+          description="Modern, conversion-focused web solutions built with cutting-edge technology. Every website is optimized for speed, scalability, and user experience to drive business growth."
+          background={{ variant: "glowing-orb" }}
+          kpis={[
+            { value: "100%", label: "Lighthouse Score" },
+            { value: "<2s", label: "Load Time" },
+            { value: "∞", label: "Scalability" }
+          ]}
+          enableKpiAnimation={true}
+          tag="Portfolio"
+          tagAnimation="slide-up"
+          buttons={[
+            { 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 Business Website"
+          imagePosition="right"
+          mediaAnimation="slide-up"
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <TextAbout
+          tag="Our Approach"
+          tagAnimation="slide-up"
+          title="We build websites that don't just look beautiful—they convert. Every pixel is purposeful, every interaction is optimized, and every page is architected for performance and growth."
+          useInvertedBackground={false}
+          buttons={[
+            { text: "Back to Home", href: "/" }
+          ]}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="projects" data-section="projects">
+        <ProductCardOne
+          title="Website Projects"
+          description="A selection of high-performance web solutions that deliver results."
+          tag="Recent Work"
+          tagAnimation="slide-up"
+          products={[
+            {
+              id: "1",              name: "Modern Business Website",              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: "High-Performance Business Website"
+            },
+            {
+              id: "2",              name: "E-Commerce Platform",              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: "E-Commerce Platform"
+            },
+            {
+              id: "3",              name: "SaaS Dashboard",              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: "SaaS Dashboard Interface"
+            }
+          ]}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCTA
+          tag="Ready to Build?"
+          tagAnimation="slide-up"
+          title="Let's Create Your Next Web Success Story"
+          description="Whether you need a stunning portfolio, a high-converting landing page, or a complex web application, let's build something exceptional together."
+          buttons={[
+            { text: "Start a Project", href: "https://mail.google.com/mail/u/0/#inbox?compose=CllgCKCJDpcNVLgLjnmzlfjhpdVpzlhHMczkBTgTPMlCJWbKpnvxftQMXCJXsLrmzvsghmMqHjV", 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/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>
+  );
+}

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>
+  );
+}