diff --git a/src/app/learn-more/integrations/page.tsx b/src/app/learn-more/integrations/page.tsx
new file mode 100644
index 0000000..c238c9e
--- /dev/null
+++ b/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>
+  );
+}
\ No newline at end of file