diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
new file mode 100644
index 0000000..0dcee73
--- /dev/null
+++ b/src/app/services/page.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import HeroSplit from "@/components/sections/hero/HeroSplit";
+import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
+import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { Monitor, Code, Search, Sparkles, DollarSign, Wrench, CheckCircle } from "lucide-react";
+
+export default function ServicesPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="metallic"
+      secondaryButtonStyle="glass"
+      headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <NavbarLayoutFloatingOverlay
+          brandName="Webild"
+          navItems={[
+            { name: "Work", href: "/work" },
+            { name: "Services", href: "/services" },
+            { name: "About", href: "/#about" },
+            { name: "Contact", href: "/#contact" }
+          ]}
+          button={{ text: "Get Started", href: "/#contact" }}
+        />
+        <HeroSplit
+          title="Comprehensive Web Design & Development Services"
+          description="From stunning visuals to robust functionality, we build digital solutions that drive growth and connect with your audience."
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-1.webp"
+          imageAlt="Web design services illustration"
+          background={{ variant: "plain" }}
+          buttons={[
+            { text: "Get a Quote", href: "#contact-form" },
+            { text: "View Portfolio", href: "/work" },
+          ]}
+          buttonAnimation="slide-up"
+          mediaAnimation="slide-up"
+          useInvertedBackground={false}
+        />
+        <div id="our-services" data-section="our-services">
+          <FeatureHoverPattern
+            title="Our Core Expertise"
+            description="We cover every aspect of your online presence, ensuring a cohesive and high-performing digital ecosystem."
+            animationType="slide-up"
+            useInvertedBackground={false}
+            features={[
+              { icon: Monitor, title: "Custom Web Design", description: "Crafting intuitive and aesthetically pleasing user interfaces (UI) and engaging user experiences (UX) tailored to your brand." },
+              { icon: Code, title: "Full-Stack Web Development", description: "Building robust, scalable, and secure websites using the latest technologies for both front-end and back-end." },
+              { icon: Search, title: "SEO Strategy & Optimization", description: "Improving your search engine rankings to drive organic traffic and increase online visibility." },
+              { icon: Sparkles, title: "Brand Identity & Strategy", description: "Developing a strong and consistent brand image that resonates with your target audience and stands out." },
+              { icon: DollarSign, title: "E-commerce Solutions", description: "Creating powerful online stores with seamless shopping experiences to maximize your sales and conversions." },
+              { icon: Wrench, title: "Website Maintenance & Support", description: "Ensuring your website remains secure, updated, and performs optimally with ongoing support and maintenance plans." },
+            ]}
+          />
+        </div>
+        <div id="pricing" data-section="pricing">
+          <PricingCardTwo
+            title="Transparent Pricing Plans"
+            description="Find the perfect package to match your project needs and budget."
+            animationType="slide-up"
+            useInvertedBackground={false}
+            plans={[
+              {
+                id: "basic",                badge: "Basic",                badgeIcon: CheckCircle,
+                price: "$1,500+",                subtitle: "Starter Website",                buttons: [{ text: "Get Started", href: "#contact-form" }],
+                features: [
+                  "5-Page Custom Design",                  "Responsive Development",                  "Basic SEO Setup",                  "1-Month Support"
+                ],
+              },
+              {
+                id: "standard",                badge: "Standard",                badgeIcon: CheckCircle,
+                price: "$3,500+",                subtitle: "Business Growth",                buttons: [{ text: "Choose Plan", href: "#contact-form" }],
+                features: [
+                  "10-Page Custom Design",                  "Advanced SEO Strategy",                  "CRM Integration",                  "3-Months Support & Analytics",                  "Content Management System"
+                ],
+              },
+              {
+                id: "premium",                badge: "Premium",                badgeIcon: CheckCircle,
+                price: "$7,000+",                subtitle: "Enterprise Solution",                buttons: [{ text: "Contact Us", href: "#contact-form" }],
+                features: [
+                  "Unlimited Pages",                  "E-commerce / Advanced Features",                  "Dedicated Project Manager",                  "6-Months Priority Support",                  "Custom Integrations & APIs"
+                ],
+              },
+            ]}
+          />
+        </div>
+        <div id="contact-form" data-section="contact-form">
+          <ContactSplitForm
+            title="Ready to Start Your Project?"
+            description="Let's discuss your vision and how we can bring it to life. Fill out the form below to get a custom quote."
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-9.webp"
+            imageAlt="Contact us for web design services"
+            useInvertedBackground={false}
+            inputs={[
+              { name: "name", type: "text", placeholder: "Your Name", required: true },
+              { name: "email", type: "email", placeholder: "Your Email", required: true },
+            ]}
+            textarea={{ name: "message", placeholder: "Tell us about your project", rows: 5, required: true }}
+            buttonText="Send Message"
+            mediaAnimation="slide-up"
+          />
+        </div>
+        <FooterBase
+          logoText="Webild"
+          copyrightText="© 2026 | Webild"
+          columns={[
+            {
+              title: "Company",              items: [
+                { label: "About", href: "/#about" },
+                { label: "Services", href: "/services" },
+                { label: "Work", href: "/work" },
+                { label: "Contact", href: "/#contact" },
+              ],
+            },
+            {
+              title: "Services",              items: [
+                { label: "Web Development", href: "/services" },
+                { label: "SEO", href: "/services" },
+                { label: "Branding", href: "/services" },
+                { label: "UI/UX Design", href: "/services" },
+              ],
+            },
+            {
+              title: "Connect",              items: [
+                { label: "Twitter", href: "#" },
+                { label: "LinkedIn", href: "#" },
+                { label: "Instagram", href: "#" },
+                { label: "Dribbble", href: "#" },
+              ],
+            },
+          ]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}