Update src/app/services/page.tsx

Merge version_2 into main

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?_wi=1"
+          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?_wi=1", 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?_wi=1", 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?_wi=1", 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="HoB Media"
+          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?_wi=1"
+          imageAlt="Contact Us"
+          mediaPosition="right"
+          useInvertedBackground={false}
+          mediaAnimation="slide-up"
+        />
+        <FooterBase
+          logoText="HoB Media"
+          copyrightText="© 2026 | HoB Media"
+          columns={FOOTER_COLUMNS}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/layout.tsx

@@ -19,8 +19,8 @@ const inter = Inter({
 });
 
 export const metadata: Metadata = {
-  title: 'PixelPerfect Agency | Web Design & Development',
-  description: 'Transform your online presence with PixelPerfect Agency. We craft stunning, high-performing websites tailored to your brand\'s unique vision and goals.',
+  title: 'HoB Media | Web Design & Development',
+  description: 'Transform your online presence with HoB Media. We craft stunning, high-performing websites tailored to your brand\'s unique vision and goals.',
 };
 
 export default function RootLayout({

src/app/page.tsx

@@ -31,39 +31,40 @@ export default function WebAgency2Page() {
     >
       <ReactLenis root>
         <NavbarLayoutFloatingOverlay
-          brandName="Webild"
+          brandName="HoB Media"
           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"
+          title="HoB Media: Digital Experiences"
           description="Transform your brand with cutting-edge web design and development. We craft stunning websites that convert visitors into customers."
           tag="Award-Winning Agency"
           tagIcon={Sparkles}
           tagAnimation="slide-up"
           background={{ variant: "canvas-reveal" }}
           buttons={[
-            { text: "Start Project", href: "#contact" },
-            { text: "View Work", href: "#work" },
+            { text: "Start Project", href: "/contact" },
+            { text: "View Work", href: "/portfolio" },
           ]}
           buttonAnimation="slide-up"
           carouselPosition="right"
           leftCarouselItems={[
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", imageAlt: "UI UX Design - Daily Life app" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp", imageAlt: "UI UX Design - SaaS platform" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp", imageAlt: "UI UX Design - Luminé skincare" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-7.webp", imageAlt: "UI UX Design - Online courses" },
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp?_wi=2", imageAlt: "UI UX Design - Daily Life app" },
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp?_wi=1", imageAlt: "UI UX Design - SaaS platform" },
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp?_wi=1", imageAlt: "UI UX Design - Luminé skincare" },
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-7.webp?_wi=2", imageAlt: "UI UX Design - Online courses" },
             { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-9.webp", imageAlt: "UI UX Design - Business coach" },
           ]}
           rightCarouselItems={[
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp", imageAlt: "UI UX Design - Luxuria travel" },
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp?_wi=1", imageAlt: "UI UX Design - Luxuria travel" },
             { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-5.webp", imageAlt: "UI UX Design - Dental practice" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-3.webp", imageAlt: "UI UX Design - AI product builder" },
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-3.webp?_wi=1", imageAlt: "UI UX Design - AI product builder" },
             { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-8.webp", imageAlt: "UI UX Design - AI automation" },
           ]}
           carouselItemClassName="!aspect-[4/5]"
@@ -78,31 +79,21 @@ export default function WebAgency2Page() {
           buttonAnimation="slide-up"
           features={[
             {
-              title: "SEO",
-              description: "We optimize your website to rank higher on search engines and drive organic traffic.",
-              bentoComponent: "marquee",
-              centerIcon: Search,
-              variant: "text",
-              texts: ["Keywords", "Backlinks", "Meta Tags", "Organic Traffic", "Rankings", "Analytics", "SERP", "Indexing"],
+              title: "SEO",              description: "We optimize your website to rank higher on search engines and drive organic traffic.",              bentoComponent: "marquee",              centerIcon: Search,
+              variant: "text",              texts: ["Keywords", "Backlinks", "Meta Tags", "Organic Traffic", "Rankings", "Analytics", "SERP", "Indexing"],
             },
             {
-              title: "Web Development",
-              description: "Custom-built websites that are fast, responsive, and designed to convert.",
-              bentoComponent: "media-stack",
-              items: [
+              title: "Web Development",              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-1.webp?_wi=1", 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",
-              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" },
+              title: "Branding",              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?_wi=3", imageAlt: "Brand project 1" },
+                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp?_wi=2", imageAlt: "Brand project 2" },
+                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp?_wi=2", 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",
-              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,
-              buttonHref: "#",
-            },
+              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?_wi=1",              imageAlt: "Umbra Skincare website",              buttonIcon: ArrowUpRight,
+              buttonHref: "/portfolio"},
             {
-              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,
-              buttonHref: "#",
-            },
+              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?_wi=1",              imageAlt: "Luxuria Travel website",              buttonIcon: ArrowUpRight,
+              buttonHref: "/portfolio"},
             {
-              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,
-              buttonHref: "#",
-            },
+              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?_wi=1",              imageAlt: "Luxury Dental Care website",              buttonIcon: ArrowUpRight,
+              buttonHref: "/portfolio"},
             {
-              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,
-              buttonHref: "#",
-            },
+              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,
+              buttonHref: "/portfolio"},
             {
-              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,
-              buttonHref: "#",
-            },
+              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,
+              buttonHref: "/portfolio"},
           ]}
         />
         <FeatureBento
@@ -166,14 +132,9 @@ export default function WebAgency2Page() {
           animationType="slide-up"
           features={[
             {
-              title: "All Devices Optimization",
-              description: "Pixel-perfect websites that look stunning on every screen size and device.",
-              bentoComponent: "phone",
-              statusIcon: Lock,
+              title: "All Devices Optimization",              description: "Pixel-perfect websites that look stunning on every screen size and device.",              bentoComponent: "phone",              statusIcon: Lock,
               alertIcon: Monitor,
-              alertTitle: "Responsive check",
-              alertMessage: "All breakpoints passed",
-              apps: [
+              alertTitle: "Responsive check",              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",
-              description: "Enterprise-grade security and 99.9% uptime for your website.",
-              bentoComponent: "reveal-icon",
-              icon: Shield,
+              title: "Secure Hosting",              description: "Enterprise-grade security and 99.9% uptime for your website.",              bentoComponent: "reveal-icon",              icon: Shield,
             },
             {
-              title: "Fast Turnaround",
-              description: "From concept to launch in record time without sacrificing quality.",
-              bentoComponent: "timeline",
-              heading: "Project Launch",
-              subheading: "Week 1",
-              items: [
+              title: "Fast Turnaround",              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",
-              description: "Connect with the tools you already use — CRMs, analytics, payments, and more.",
-              bentoComponent: "orbiting-icons",
-              centerIcon: Puzzle,
+              title: "Seamless Integrations",              description: "Connect with the tools you already use — CRMs, analytics, payments, and more.",              bentoComponent: "orbiting-icons",              centerIcon: Puzzle,
               items: [
                 { icon: Shield },
                 { icon: Monitor },
@@ -216,14 +165,11 @@ export default function WebAgency2Page() {
               ],
             },
             {
-              title: "Growth Trends",
-              description: "Data-driven insights to optimize your search presence and drive traffic.",
-              bentoComponent: "line-chart",
-            },
+              title: "Growth Trends",              description: "Data-driven insights to optimize your search presence and drive traffic.",              bentoComponent: "line-chart"},
           ]}
         />
         <TestimonialCardFifteen
-          testimonial="Webild completely transformed our online presence. The team delivered a stunning website that exceeded our expectations and doubled our conversion rate."
+          testimonial="HoB Media completely transformed our online presence. The team delivered a stunning website that exceeded our expectations and doubled our conversion rate."
           rating={5}
           author="— Maria Santos, CEO at Luxuria Travel"
           avatars={[
@@ -247,28 +193,18 @@ export default function WebAgency2Page() {
           ]}
         />
         <FeatureCardSixteen
-          title="Why Choose Webild"
+          title="Why Choose HoB Media"
           description="See the difference a professional web agency makes."
           textboxLayout="default"
           useInvertedBackground={false}
           animationType="slide-up"
           negativeCard={{
             items: [
-              "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",
-            ],
+              "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"],
           }}
           positiveCard={{
             items: [
-              "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",
-            ],
+              "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"],
           }}
         />
         <TeamCardFive
@@ -279,9 +215,9 @@ export default function WebAgency2Page() {
           animationType="slide-up"
           mediaClassName="object-[65%_center]"
           team={[
-            { id: "1", name: "Sarah Miller", role: "Lead Developer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp", imageAlt: "Sarah Miller" },
-            { id: "2", name: "Valentina Reyes", role: "Creative Director", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp", imageAlt: "Valentina Reyes" },
-            { id: "3", name: "Carlos Mendoza", role: "UX Designer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp", imageAlt: "Carlos Mendoza" },
+            { id: "1", name: "Sarah Miller", role: "Lead Developer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp?_wi=2", imageAlt: "Sarah Miller" },
+            { id: "2", name: "Valentina Reyes", role: "Creative Director", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp?_wi=2", imageAlt: "Valentina Reyes" },
+            { id: "3", name: "Carlos Mendoza", role: "UX Designer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp?_wi=2", imageAlt: "Carlos Mendoza" },
           ]}
         />
         <FaqBase
@@ -304,28 +240,26 @@ 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: "View Our Work", href: "#work" },
+            { text: "Start Your Project", href: "/contact" },
+            { text: "View Our Work", href: "/portfolio" },
           ]}
           buttonAnimation="slide-up"
           useInvertedBackground={false}
         />
         <FooterBase
-          logoText="Webild"
-          copyrightText="© 2026 | Webild"
+          logoText="HoB Media"
+          copyrightText="© 2026 | HoB Media"
           columns={[
             {
-              title: "Company",
-              items: [
+              title: "Company",              items: [
                 { label: "About", href: "#about" },
                 { label: "Services", href: "#services" },
-                { label: "Work", href: "#work" },
-                { label: "Contact", href: "#contact" },
+                { label: "Work", href: "/portfolio" },
+                { label: "Contact", href: "/contact" },
               ],
             },
             {
-              title: "Services",
-              items: [
+              title: "Services",              items: [
                 { label: "Web Development", href: "#" },
                 { label: "SEO", href: "#" },
                 { label: "Branding", href: "#" },
@@ -333,8 +267,7 @@ export default function WebAgency2Page() {
               ],
             },
             {
-              title: "Connect",
-              items: [
+              title: "Connect",              items: [
                 { label: "Twitter", href: "#" },
                 { label: "LinkedIn", href: "#" },
                 { label: "Instagram", href: "#" },

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?_wi=4",    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?_wi=3",    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?_wi=2",    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="HoB Media"
+            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="HoB Media"
+            copyrightText="© 2026 | HoB Media"
+            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?_wi=2", 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?_wi=3", 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?_wi=2", 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?_wi=2"
+            },
+            {
+              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?_wi=2"
+            },
+            {
+              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?_wi=2"
+            },
+          ]}
+          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?_wi=3"
+          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>
+  );
+}