Update src/app/portfolio/page.tsx

src/app/about/page.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
+import TeamCardEleven from "@/components/sections/team/TeamCardEleven";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { Sparkles, ArrowUpRight, Users, Trophy } from "lucide-react";
+
+const NAV_ITEMS = [
+  { name: "Home", id: "/" },
+  { name: "Work", id: "work" },
+  { name: "Services", id: "/services" },
+  { name: "About", id: "/about" },
+  { name: "Contact", id: "contact" }
+];
+
+const FOOTER_COLUMNS = [
+  {
+    title: "Company",    items: [
+      { label: "Home", href: "/" },
+      { 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: "#" },
+    ],
+  },
+];
+
+export default function AboutPage() {
+  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="HoB Media"
+          navItems={NAV_ITEMS}
+          button={{ text: "Get Started", href: "/#contact" }}
+        />
+        <MetricSplitMediaAbout
+          title="About HoB Media"
+          description="HoB Media is a full-service digital agency dedicated to crafting compelling online experiences. We partner with businesses to build impactful brands, drive growth, and achieve measurable results through innovative web design, development, and marketing strategies."
+          metrics={[
+            { value: "10+", title: "Years Experience" },
+            { value: "200+", title: "Projects Completed" },
+            { value: "95%", title: "Client Retention" },
+          ]}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp"
+          imageAlt="HoB Media team working"
+          mediaAnimation="slide-up"
+          useInvertedBackground={false}
+          tag="Our Story"
+          tagIcon={Sparkles}
+        />
+        <TeamCardEleven
+          title="Meet Our Team"
+          description="Our diverse team of experts brings passion, creativity, and technical prowess to every project."
+          groups={[
+            {
+              id: "leadership",              groupTitle: "Leadership",              members: [
+                { id: "1", title: "Maria Santos", subtitle: "CEO & Founder", detail: "Visionary leader driving innovation.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp", imageAlt: "Maria Santos" },
+                { id: "2", title: "John Doe", subtitle: "Creative Director", detail: "Crafting stunning visual narratives.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp", imageAlt: "John Doe" },
+              ],
+            },
+            {
+              id: "development",              groupTitle: "Development & Marketing",              members: [
+                { id: "3", title: "Sarah Lee", subtitle: "Lead Developer", detail: "Building robust and scalable solutions.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp", imageAlt: "Sarah Lee" },
+                { id: "4", title: "Michael Chen", subtitle: "SEO Specialist", detail: "Boosting online visibility and traffic.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-4.webp", imageAlt: "Michael Chen" },
+              ],
+            },
+          ]}
+          animationType="slide-up"
+          useInvertedBackground={true}
+          textboxLayout="default"
+          tag="Our People"
+          tagIcon={Users}
+        />
+        <FooterBase
+          logoText="HoB Media"
+          copyrightText="© 2026 | HoB Media"
+          columns={FOOTER_COLUMNS}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { Mail, Phone, MapPin, Sparkles } from "lucide-react";
+
+const NAV_ITEMS = [
+  { name: "Home", id: "/" },
+  { name: "Portfolio", id: "/portfolio" },
+  { name: "Services", id: "/services" },
+  { name: "About", id: "/about" },
+  { name: "Contact", id: "/contact" }
+];
+
+const FOOTER_COLUMNS = [
+  {
+    title: "Company",    items: [
+      { label: "About", href: "/about" },
+      { label: "Services", href: "/services" },
+      { label: "Work", href: "/portfolio" },
+      { 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: "#" }
+    ]
+  }
+];
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <NavbarLayoutFloatingOverlay
+          brandName="Webild"
+          navItems={NAV_ITEMS}
+          button={{ text: "Get Started", href: "/contact" }}
+        />
+        <ContactSplitForm
+          title="Get in Touch"
+          description="We'd love to hear from you! Fill out the form below or reach out directly."
+          inputs={[
+            { name: "name", type: "text", placeholder: "Your Name", required: true },
+            { name: "email", type: "email", placeholder: "Your Email", required: true },
+            { name: "subject", type: "text", placeholder: "Subject" }
+          ]}
+          textarea={{ name: "message", placeholder: "Your Message", rows: 5, required: true }}
+          buttonText="Send Message"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-7.webp"
+          imageAlt="Contact Us"
+          mediaPosition="right"
+          useInvertedBackground={false}
+          mediaAnimation="slide-up"
+        />
+        <FooterBase
+          logoText="Webild"
+          copyrightText="© 2026 | Webild"
+          columns={FOOTER_COLUMNS}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -33,12 +33,13 @@ export default function WebAgency2Page() {
         <NavbarLayoutFloatingOverlay
           brandName="Webild"
           navItems={[
-            { name: "Work", id: "work" },
+            { name: "Home", id: "/" },
+            { name: "Portfolio", id: "/portfolio" },
             { name: "Services", id: "services" },
             { name: "About", id: "about" },
-            { name: "Contact", id: "contact" },
+            { name: "Contact", id: "/contact" }
           ]}
-          button={{ text: "Get Started", href: "#contact" }}
+          button={{ text: "Get Started", href: "/contact" }}
         />
         <HeroSplitDoubleCarousel
           title="We Build Digital Experiences"
@@ -48,8 +49,8 @@ export default function WebAgency2Page() {
           tagAnimation="slide-up"
           background={{ variant: "canvas-reveal" }}
           buttons={[
-            { text: "Start Project", href: "#contact" },
+            { text: "Start Project", href: "/contact" },
-            { text: "View Work", href: "#work" },
+            { text: "View Work", href: "/portfolio" },
           ]}
           buttonAnimation="slide-up"
           carouselPosition="right"
@@ -78,28 +79,18 @@ export default function WebAgency2Page() {
           buttonAnimation="slide-up"
           features={[
             {
-              title: "SEO",
+              title: "SEO",              description: "We optimize your website to rank higher on search engines and drive organic traffic.",              bentoComponent: "marquee",              centerIcon: Search,
-              description: "We optimize your website to rank higher on search engines and drive organic traffic.",
+              variant: "text",              texts: ["Keywords", "Backlinks", "Meta Tags", "Organic Traffic", "Rankings", "Analytics", "SERP", "Indexing"],
-              bentoComponent: "marquee",
-              centerIcon: Search,
-              variant: "text",
-              texts: ["Keywords", "Backlinks", "Meta Tags", "Organic Traffic", "Rankings", "Analytics", "SERP", "Indexing"],
             },
             {
-              title: "Web Development",
+              title: "Web Development",              description: "Custom-built websites that are fast, responsive, and designed to convert.",              bentoComponent: "media-stack",              items: [
-              description: "Custom-built websites that are fast, responsive, and designed to convert.",
-              bentoComponent: "media-stack",
-              items: [
                 { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-2.webp", imageAlt: "Web project - AgentFlow AI platform" },
                 { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-1.webp", imageAlt: "Web project - Architecture studio" },
                 { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-3.webp", imageAlt: "Web project - Summit Roofing" },
               ],
             },
             {
-              title: "Branding",
+              title: "Branding",              description: "Build a memorable brand identity that resonates with your audience.",              bentoComponent: "media-stack",              items: [
-              description: "Build a memorable brand identity that resonates with your audience.",
-              bentoComponent: "media-stack",
-              items: [
                 { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", imageAlt: "Brand project 1" },
                 { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp", imageAlt: "Brand project 2" },
                 { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp", imageAlt: "Brand project 3" },
@@ -112,50 +103,25 @@ export default function WebAgency2Page() {
           description="A selection of projects we've crafted for clients across industries."
           textboxLayout="default"
           useInvertedBackground={false}
-          buttons={[{ text: "View All Work", href: "#work" }]}
+          buttons={[{ text: "View All Work", href: "/portfolio" }]}
           buttonAnimation="slide-up"
           cardClassName="!h-auto aspect-video"
           features={[
             {
-              title: "Umbra Skincare",
+              title: "Umbra Skincare",              description: "Luxury fragrance e-commerce",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-1.webp",              imageAlt: "Umbra Skincare website",              buttonIcon: ArrowUpRight,
-              description: "Luxury fragrance e-commerce",
+              buttonHref: "/portfolio"},
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-1.webp",
-              imageAlt: "Umbra Skincare website",
-              buttonIcon: ArrowUpRight,
-              buttonHref: "#",
-            },
             {
-              title: "Luxuria Travel",
+              title: "Luxuria Travel",              description: "Bespoke luxury travel experiences",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-2.webp",              imageAlt: "Luxuria Travel website",              buttonIcon: ArrowUpRight,
-              description: "Bespoke luxury travel experiences",
+              buttonHref: "/portfolio"},
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-2.webp",
-              imageAlt: "Luxuria Travel website",
-              buttonIcon: ArrowUpRight,
-              buttonHref: "#",
-            },
             {
-              title: "Dental Care",
+              title: "Dental Care",              description: "Premier dental practice",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-3.webp",              imageAlt: "Luxury Dental Care website",              buttonIcon: ArrowUpRight,
-              description: "Premier dental practice",
+              buttonHref: "/portfolio"},
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-3.webp",
-              imageAlt: "Luxury Dental Care website",
-              buttonIcon: ArrowUpRight,
-              buttonHref: "#",
-            },
             {
-              title: "Summit Roofing",
+              title: "Summit Roofing",              description: "Professional roofing services",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-4.webp",              imageAlt: "Summit Roofing website",              buttonIcon: ArrowUpRight,
-              description: "Professional roofing services",
+              buttonHref: "/portfolio"},
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-4.webp",
-              imageAlt: "Summit Roofing website",
-              buttonIcon: ArrowUpRight,
-              buttonHref: "#",
-            },
             {
-              title: "Dubai Real Estate",
+              title: "Dubai Real Estate",              description: "Luxury property listings",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-5.webp",              imageAlt: "Dubai Real Estate website",              buttonIcon: ArrowUpRight,
-              description: "Luxury property listings",
+              buttonHref: "/portfolio"},
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-5.webp",
-              imageAlt: "Dubai Real Estate website",
-              buttonIcon: ArrowUpRight,
-              buttonHref: "#",
-            },
           ]}
         />
         <FeatureBento
@@ -166,14 +132,9 @@ export default function WebAgency2Page() {
           animationType="slide-up"
           features={[
             {
-              title: "All Devices Optimization",
+              title: "All Devices Optimization",              description: "Pixel-perfect websites that look stunning on every screen size and device.",              bentoComponent: "phone",              statusIcon: Lock,
-              description: "Pixel-perfect websites that look stunning on every screen size and device.",
-              bentoComponent: "phone",
-              statusIcon: Lock,
               alertIcon: Monitor,
-              alertTitle: "Responsive check",
+              alertTitle: "Responsive check",              alertMessage: "All breakpoints passed",              apps: [
-              alertMessage: "All breakpoints passed",
-              apps: [
                 { name: "Phone", icon: Phone },
                 { name: "SMS", icon: MessageCircle },
                 { name: "Books", icon: BookOpen },
@@ -185,29 +146,17 @@ export default function WebAgency2Page() {
               ],
             },
             {
-              title: "Secure Hosting",
+              title: "Secure Hosting",              description: "Enterprise-grade security and 99.9% uptime for your website.",              bentoComponent: "reveal-icon",              icon: Shield,
-              description: "Enterprise-grade security and 99.9% uptime for your website.",
-              bentoComponent: "reveal-icon",
-              icon: Shield,
             },
             {
-              title: "Fast Turnaround",
+              title: "Fast Turnaround",              description: "From concept to launch in record time without sacrificing quality.",              bentoComponent: "timeline",              heading: "Project Launch",              subheading: "Week 1",              items: [
-              description: "From concept to launch in record time without sacrificing quality.",
-              bentoComponent: "timeline",
-              heading: "Project Launch",
-              subheading: "Week 1",
-              items: [
                 { label: "Discovery & wireframes", detail: "Day 1-3" },
                 { label: "Design & development", detail: "Day 4-10" },
                 { label: "Testing & deployment", detail: "Day 11-14" },
               ],
-              completedLabel: "Live",
+              completedLabel: "Live"},
-            },
             {
-              title: "Seamless Integrations",
+              title: "Seamless Integrations",              description: "Connect with the tools you already use — CRMs, analytics, payments, and more.",              bentoComponent: "orbiting-icons",              centerIcon: Puzzle,
-              description: "Connect with the tools you already use — CRMs, analytics, payments, and more.",
-              bentoComponent: "orbiting-icons",
-              centerIcon: Puzzle,
               items: [
                 { icon: Shield },
                 { icon: Monitor },
@@ -216,10 +165,7 @@ export default function WebAgency2Page() {
               ],
             },
             {
-              title: "Growth Trends",
+              title: "Growth Trends",              description: "Data-driven insights to optimize your search presence and drive traffic.",              bentoComponent: "line-chart"},
-              description: "Data-driven insights to optimize your search presence and drive traffic.",
-              bentoComponent: "line-chart",
-            },
           ]}
         />
         <TestimonialCardFifteen
@@ -254,21 +200,11 @@ export default function WebAgency2Page() {
           animationType="slide-up"
           negativeCard={{
             items: [
-              "Generic templates with no personality",
+              "Generic templates with no personality",              "Slow load times and poor performance",              "No SEO strategy or search visibility",              "Outdated design that hurts credibility",              "No ongoing support after launch"],
-              "Slow load times and poor performance",
-              "No SEO strategy or search visibility",
-              "Outdated design that hurts credibility",
-              "No ongoing support after launch",
-            ],
           }}
           positiveCard={{
             items: [
-              "Custom designs tailored to your brand",
+              "Custom designs tailored to your brand",              "Lightning-fast performance on all devices",              "Built-in SEO to drive organic traffic",              "Modern design that builds trust",              "Dedicated support and maintenance"],
-              "Lightning-fast performance on all devices",
-              "Built-in SEO to drive organic traffic",
-              "Modern design that builds trust",
-              "Dedicated support and maintenance",
-            ],
           }}
         />
         <TeamCardFive
@@ -304,8 +240,8 @@ export default function WebAgency2Page() {
           description="Let's build something extraordinary together. Get in touch and let's discuss your next project."
           background={{ variant: "rotated-rays-animated" }}
           buttons={[
-            { text: "Start Your Project", href: "#contact" },
+            { text: "Start Your Project", href: "/contact" },
-            { text: "View Our Work", href: "#work" },
+            { text: "View Our Work", href: "/portfolio" },
           ]}
           buttonAnimation="slide-up"
           useInvertedBackground={false}
@@ -315,17 +251,15 @@ export default function WebAgency2Page() {
           copyrightText="© 2026 | Webild"
           columns={[
             {
-              title: "Company",
+              title: "Company",              items: [
-              items: [
                 { label: "About", href: "#about" },
                 { label: "Services", href: "#services" },
-                { label: "Work", href: "#work" },
+                { label: "Work", href: "/portfolio" },
-                { label: "Contact", href: "#contact" },
+                { label: "Contact", href: "/contact" },
               ],
             },
             {
-              title: "Services",
+              title: "Services",              items: [
-              items: [
                 { label: "Web Development", href: "#" },
                 { label: "SEO", href: "#" },
                 { label: "Branding", href: "#" },
@@ -333,8 +267,7 @@ export default function WebAgency2Page() {
               ],
             },
             {
-              title: "Connect",
+              title: "Connect",              items: [
-              items: [
                 { label: "Twitter", href: "#" },
                 { label: "LinkedIn", href: "#" },
                 { label: "Instagram", href: "#" },
@@ -346,4 +279,4 @@ export default function WebAgency2Page() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/portfolio/page.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { Sparkles } from "lucide-react"; // Keep Sparkles as an example, add others if needed by sections
+
+const NAV_ITEMS = [
+  { name: "Home", id: "/" },
+  { name: "Portfolio", id: "/portfolio" },
+  { name: "Services", id: "/services" },
+  { name: "About", id: "/about" },
+  { name: "Contact", id: "/contact" }
+];
+
+const FOOTER_COLUMNS = [
+  {
+    title: "Company", items: [
+      { label: "About", href: "/about" },
+      { label: "Services", href: "/services" },
+      { label: "Work", href: "/portfolio" },
+      { 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: "#" }
+    ]
+  }
+];
+
+const PORTFOLIO_FEATURES = [
+  {
+    id: "project-one",    title: "E-commerce Redesign",    author: "Client A",    description: "A complete overhaul of an existing e-commerce platform, focusing on user experience and conversion optimization.",    tags: ["Web Development", "UI/UX", "E-commerce"],
+    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp",    imageAlt: "E-commerce Redesign project"
+  },
+  {
+    id: "project-two",    title: "Brand Identity Launch",    author: "Client B",    description: "Developing a new brand identity from scratch, including logo design, color palette, and brand guidelines.",    tags: ["Branding", "Graphic Design"],
+    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp",    imageAlt: "Brand Identity Launch project"
+  },
+  {
+    id: "project-three",    title: "SEO Strategy & Implementation",    author: "Client C",    description: "Comprehensive SEO strategy leading to significant organic traffic growth for a SaaS company.",    tags: ["SEO", "Digital Marketing"],
+    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-3.webp",    imageAlt: "SEO Strategy project"
+  }
+];
+
+export default function PortfolioPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="Webild"
+            navItems={NAV_ITEMS}
+            button={{ text: "Get Started", href: "/contact" }}
+          />
+        </div>
+        <div id="portfolio-features" data-section="portfolio-features">
+          <FeatureCardTwentyFour
+            title="Our Portfolio"
+            description="Explore our latest projects and client success stories."
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            features={PORTFOLIO_FEATURES}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBase
+            logoText="Webild"
+            copyrightText="© 2026 | Webild"
+            columns={FOOTER_COLUMNS}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/services/page.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
+import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
+import ContactSplit from "@/components/sections/contact/ContactSplit";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { Sparkles, Monitor, Rocket, Paintbrush, Check, LayoutDashboard, Code, Megaphone, Palette, Handshake, Users } from "lucide-react";
+
+const NAV_ITEMS = [
+  { name: "Home", id: "/" },
+  { name: "Work", id: "work" },
+  { name: "Services", id: "/services" },
+  { name: "About", id: "/about" },
+  { name: "Contact", id: "contact" }
+];
+
+const FOOTER_COLUMNS = [
+  {
+    title: "Company",    items: [
+      { label: "Home", href: "/" },
+      { 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: "#" },
+    ],
+  },
+];
+
+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="HoB Media"
+          navItems={NAV_ITEMS}
+          button={{ text: "Get Started", href: "/#contact" }}
+        />
+        <FeatureCardTen
+          title="Our Core Services"
+          description="We offer a comprehensive suite of digital solutions to help your business thrive online."
+          features={[
+            {
+              title: "Web Design & Development",              description: "Crafting modern, responsive websites and web applications tailored to your business goals. From engaging user interfaces to robust backend systems, we build digital platforms that perform.",              media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-1.webp", imageAlt: "Web Design & Development" },
+              items: [
+                { icon: LayoutDashboard, text: "Custom Website Design" },
+                { icon: Code, text: "Front-end & Back-end Development" },
+                { icon: Monitor, text: "Responsive & Mobile-First" },
+              ],
+              reverse: false,
+            },
+            {
+              title: "SEO & Digital Marketing",              description: "Elevate your online presence with strategic SEO, content marketing, and paid advertising campaigns. Drive organic traffic, increase conversions, and achieve measurable ROI.",              media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp", imageAlt: "SEO & Digital Marketing" },
+              items: [
+                { icon: Rocket, text: "Search Engine Optimization" },
+                { icon: Megaphone, text: "Social Media & Content Strategy" },
+                { icon: Handshake, text: "PPC & Ad Campaign Management" },
+              ],
+              reverse: true,
+            },
+            {
+              title: "Branding & UI/UX Design",              description: "Develop a memorable brand identity and create intuitive, engaging user experiences. We ensure your brand communicates effectively and resonates with your target audience.",              media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp", imageAlt: "Branding & UI/UX Design" },
+              items: [
+                { icon: Palette, text: "Brand Strategy & Identity" },
+                { icon: LayoutDashboard, text: "User Interface (UI) Design" },
+                { icon: Users, text: "User Experience (UX) Design" },
+              ],
+              reverse: false,
+            },
+          ]}
+          animationType="slide-up"
+          useInvertedBackground={false}
+          textboxLayout="default"
+          tag="What We Do"
+          tagIcon={Sparkles}
+        />
+        <PricingCardNine
+          title="Flexible Service Packages"
+          description="Choose a plan that fits your business needs and budget, designed to deliver maximum value and impact."
+          plans={[
+            {
+              id: "basic",              title: "Starter",              price: "$999",              period: "One-time project",              features: [
+                "5 Page Custom Website",                "Basic SEO Optimization",                "Mobile Responsive Design",                "2 Revisions",                "Standard Support"
+              ],
+              button: { text: "Get Started", href: "/#contact" },
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-1.webp"
+            },
+            {
+              id: "pro",              title: "Professional",              price: "$2499",              period: "One-time project",              features: [
+                "10 Page Custom Website",                "Advanced SEO Strategy",                "E-commerce Integration",                "Unlimited Revisions",                "Priority Support",                "Basic Content Creation"
+              ],
+              button: { text: "Choose Plan", href: "/#contact" },
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-2.webp"
+            },
+            {
+              id: "enterprise",              title: "Enterprise",              price: "Custom",              period: "Tailored solutions",              features: [
+                "Unlimited Pages",                "Full Digital Marketing",                "Custom Web Application",                "Dedicated Account Manager",                "Advanced Analytics",                "Ongoing Maintenance"
+              ],
+              button: { text: "Contact Us", href: "/#contact" },
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-3.webp"
+            },
+          ]}
+          animationType="slide-up"
+          useInvertedBackground={true}
+          textboxLayout="default"
+          tag="Pricing"
+          tagIcon={Check}
+        />
+        <ContactSplit
+          tag="Ready to Start?"
+          title="Let's Discuss Your Project"
+          description="Reach out to us for a free consultation and quote. We're excited to hear about your vision."
+          background={{ variant: "rotated-rays-animated" }}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-7.webp"
+          imageAlt="Contact Us"
+          mediaPosition="right"
+          inputPlaceholder="Your email address"
+          buttonText="Send Inquiry"
+          termsText="By sending an inquiry, you agree to our Terms and Conditions."
+          useInvertedBackground={false}
+          mediaAnimation="slide-up"
+        />
+        <FooterBase
+          logoText="HoB Media"
+          copyrightText="© 2026 | HoB Media"
+          columns={FOOTER_COLUMNS}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}