Add src/app/portfolio/web-development/page.tsx

Merge version_4 into main

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"
@@ -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: "Schedule Call", href: "#" }
+            { 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") }
           ]}
           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>
+  );
+}