From 6aa0871ad40886d1c1909c5b6d91d767c4e852cf Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 19 Mar 2026 20:22:17 +0000
Subject: [PATCH] Update src/app/services/page.tsx

---
 src/app/services/page.tsx | 202 +++++++++++++-------------------------
 1 file changed, 66 insertions(+), 136 deletions(-)

diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index c278d86..95044a3 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -1,161 +1,91 @@
-"use client";
+'use client';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
-import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import TextAnimation from '@/components/text/TextAnimation';
-import { LayoutDashboard, Rocket, Palette } from 'lucide-react';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import TextNumberCount from '@/components/text/TextNumberCount';
+import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
+import { Target, Lightbulb, TrendingUp, Handshake } from 'lucide-react';
 
 export default function ServicesPage() {
-  const navbarNavItems = [
-    { name: 'Home', id: '/' },
-    { name: 'Services', id: '/services' }
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "About", id: "/about" },
+    { name: "Services", id: "/services" },
+    { name: "Portfolio", id: "/portfolio" },
+    { name: "Case Studies", id: "/case-studies" },
+    { name: "Contact", id: "/contact" }
   ];
-  const footerColumns = [
+
+  const features = [
     {
-      title: 'Product',
-      items: [
-        { label: 'Features', href: '#' },
-        { label: 'Pricing', href: '/pricing' }
+      title: 'Business Strategy',
+      description: 'Crafting clear strategies for growth and market leadership through in-depth analysis and visionary planning.',
+      icon: Target,
+      mediaItems: [
+        { imageSrc: 'https://placehold.co/400x300/png?text=Strategy+Meeting', imageAlt: 'Strategy meeting in progress' },
+        { imageSrc: 'https://placehold.co/400x300/png?text=Data+Analysis', imageAlt: 'Data analysis charts' }
       ]
     },
     {
-      title: 'Company',
-      items: [
-        { label: 'About', href: '/about' },
-        { label: 'Contact', href: '/contact' }
+      title: 'Innovative Solutions',
+      description: 'Developing cutting-edge solutions that leverage the latest technology to solve complex business challenges.',
+      icon: Lightbulb,
+      mediaItems: [
+        { imageSrc: 'https://placehold.co/400x300/png?text=Innovation+Concept', imageAlt: 'Lightbulb representing innovation' },
+        { imageSrc: 'https://placehold.co/400x300/png?text=Software+Development', imageAlt: 'Code on a computer screen' }
+      ]
+    },
+    {
+      title: 'Growth Marketing',
+      description: 'Implementing data-driven marketing campaigns designed to maximize reach, engagement, and conversion rates.',
+      icon: TrendingUp,
+      mediaItems: [
+        { imageSrc: 'https://placehold.co/400x300/png?text=Marketing+Analytics', imageAlt: 'Marketing analytics dashboard' },
+        { imageSrc: 'https://placehold.co/400x300/png?text=Digital+Campaign', imageAlt: 'Digital marketing campaign on mobile' }
+      ]
+    },
+    {
+      title: 'Client Partnership',
+      description: 'Building strong, collaborative relationships with our clients, ensuring shared success and long-term value.',
+      icon: Handshake,
+      mediaItems: [
+        { imageSrc: 'https://placehold.co/400x300/png?text=Client+Meeting', imageAlt: 'Client meeting discussion' },
+        { imageSrc: 'https://placehold.co/400x300/png?text=Team+Collaboration', imageAlt: 'Team collaborating on project' }
       ]
     }
   ];
 
   return (
     <ThemeProvider
-      defaultButtonVariant="hover-magnetic"
+      defaultButtonVariant="text-stagger"
       defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
-      contentWidth="medium"
-      sizing="medium"
-      background="none"
       cardStyle="solid"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="bold"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      headingFontWeight="normal"
     >
-      <NavbarStyleCentered
-        navItems={navbarNavItems}
-        button={{ text: 'Get Started', href: '/contact' }}
-        brandName="Webild"
-      />
-      <div id="services-hero" data-section="services-hero">
-        <div className="relative isolate flex h-svh flex-col items-center justify-center p-8 text-center">
-          <TextAnimation
-            className="flex flex-col items-center justify-center space-y-4"
-            titleClassName="text-5xl font-bold"
-            descriptionClassName="mt-4 text-lg text-foreground/70"
-            description="Explore our comprehensive offerings designed to meet your unique business needs."
-          >
-            Our Services
-          </TextAnimation>
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple navItems={navItems} brandName="Webild" />
+      </div>
+      <div id="services" data-section="services" className="py-12 md:py-20 lg:py-24">
+        <TextNumberCount
+          value={1234}
+          className="max-w-4xl mx-auto text-center"
+        />
+        <div className="mt-12 md:mt-20 lg:mt-24">
+          <FeatureCardTwentyFive
+            features={features}
+            animationType="depth-3d"
+            title="Our Core Services"
+            description="We offer a comprehensive suite of digital services to empower your business."
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
         </div>
       </div>
-      <div id="detailed-offerings" data-section="detailed-offerings">
-        <FeatureCardTwentyFour
-          animationType="slide-up"
-          title="What We Offer"
-          description="From concept to launch, we provide end-to-end solutions."
-          tag="Offerings"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          features={[
-            {
-              id: 'web-dev',
-              title: 'Web Development',
-              author: 'Our Expert Team',
-              description: 'Building responsive, high-performance websites tailored to your business goals.',
-              tags: ['Frontend', 'Backend', 'CMS'],
-              imageSrc: 'https://images.unsplash.com/photo-1549692520-acc6669e2fde?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-              imageAlt: 'Web development code on screen'
-            },
-            {
-              id: 'mobile-dev',
-              title: 'Mobile App Development',
-              author: 'Our Expert Team',
-              description: 'Crafting intuitive and engaging mobile applications for iOS and Android platforms.',
-              tags: ['iOS', 'Android', 'Cross-Platform'],
-              imageSrc: 'https://images.unsplash.com/photo-1590492211244-77a827419846?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-              imageAlt: 'Mobile app development UI screens'
-            },
-            {
-              id: 'ui-ux-design',
-              title: 'UI/UX Design',
-              author: 'Our Expert Team',
-              description: 'Creating stunning and user-friendly interfaces that enhance user experience.',
-              tags: ['Wireframing', 'Prototyping', 'User Research'],
-              imageSrc: 'https://images.unsplash.com/photo-1531297484643-982d6174164b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-              imageAlt: 'UI/UX design mockups'
-            }
-          ]}
-        />
-      </div>
-      <div id="service-plans" data-section="service-plans">
-        <PricingCardEight
-          animationType="slide-up"
-          title="Our Service Plans"
-          description="Find the perfect package for your project needs, from startups to enterprises."
-          tag="Pricing"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          plans={[
-            {
-              id: 'basic',
-              badge: 'Starter',
-              badgeIcon: Rocket,
-              price: '$999',
-              subtitle: 'Ideal for small projects & MVPs',
-              buttons: [{ text: 'Get Started', href: '/contact' }],
-              features: [
-                'Basic Web Development',
-                'Responsive Design',
-                '1 Month Support',
-                'SEO Fundamentals'
-              ]
-            },
-            {
-              id: 'standard',
-              badge: 'Popular',
-              badgeIcon: LayoutDashboard,
-              price: '$2499',
-              subtitle: 'Perfect for growing businesses',
-              buttons: [{ text: 'Choose Plan', href: '/contact' }],
-              features: [
-                'Custom Web Development',
-                'Mobile App Integration',
-                '3 Months Support',
-                'Advanced SEO',
-                'Analytics Setup'
-              ]
-            },
-            {
-              id: 'premium',
-              badge: 'Enterprise',
-              badgeIcon: Palette,
-              price: '$4999+',
-              subtitle: 'For large-scale, custom solutions',
-              buttons: [{ text: 'Contact Sales', href: '/contact' }],
-              features: [
-                'Enterprise-grade Solutions',
-                'Dedicated Team',
-                '6 Months Priority Support',
-                'Full Stack Development',
-                'Custom Integrations',
-                'Advanced Security'
-              ]
-            }
-          ]}
-        />
-      </div>
-      <FooterBaseReveal columns={footerColumns} copyrightText="© 2025 Webild" />
     </ThemeProvider>
   );
 }
\ No newline at end of file