Update src/app/servicios/page.tsx

src/app/servicios/page.tsx

@@ -3,10 +3,10 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
+import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
-import ContactCTA from "@/components/sections/contact/ContactCTA";
+import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
-import FooterBase from "@/components/sections/footer/FooterBase";
+import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
-import { Sparkles, Monitor, Code, Search, Share2, Palette } from "lucide-react";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 
 export default function ServiciosPage() {
   return (
@@ -23,67 +23,109 @@ export default function ServiciosPage() {
       headingFontWeight="medium"
     >
       <ReactLenis root>
+        <div id="nav" data-section="nav">
           <NavbarLayoutFloatingOverlay
             brandName="Webild"
             navItems={[
-            { name: "Trabajo", id: "work" },
+              { name: "Inicio", id: "/" },
+              { name: "Portafolio", id: "/portafolio" },
               { name: "Servicios", id: "/servicios" },
               { name: "Nosotros", id: "/nosotros" },
-            { name: "Contacto", id: "contact" },
+              { name: "Contacto", id: "/contacto" },
             ]}
             button={{ text: "Empezar", href: "#contact" }}
           />
+        </div>
 
+        <div id="servicios" data-section="servicios">
           <FeatureCardTwentyOne
-          tag="Soluciones Digitales Integrales"
+            tag="NUESTROS SERVICIOS"
-          title="Nuestros Servicios"
+            title="Soluciones Digitales Integrales para su Éxito"
-          description="En MGL, ofrecemos una suite completa de servicios digitales diseñada para impulsar su negocio, fortalecer su presencia en línea y conectar con su audiencia de manera efectiva."
+            description="Ofrecemos un espectro completo de servicios para potenciar su presencia online y alcanzar sus metas de negocio."
-          textboxLayout="default"
             useInvertedBackground={false}
             mediaAnimation="slide-up"
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-1.webp"
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/services-1.webp"
-          imageAlt="Digital Services Overview"
+            imageAlt="Servicios Integrales"
             mediaPosition="left"
             accordionItems={[
-            { id: "1", title: "Diseño Web y UX/UI", content: "Creamos experiencias de usuario intuitivas y diseños web visualmente atractivos que cautivan a sus visitantes y los convierten en clientes." },
+              {
-            { id: "2", title: "Desarrollo Web Personalizado", content: "Desde sitios web informativos hasta plataformas de comercio electrónico robustas, construimos soluciones a medida, rápidas, seguras y escalables." },
+                id: "1",                title: "Diseño Web Personalizado",                content: "Creamos sitios web atractivos, funcionales y optimizados para cualquier dispositivo, reflejando la identidad de su marca."},
-            { id: "3", title: "SEO y Marketing Digital", content: "Mejoramos su visibilidad en los motores de búsqueda y desarrollamos estrategias de marketing digital para atraer tráfico cualificado y aumentar sus ventas." },
+              {
-            { id: "4", title: "Gestión de Redes Sociales", content: "Creamos y ejecutamos estrategias de contenido atractivas para construir su comunidad en línea y fortalecer la lealtad de sus clientes." },
+                id: "2",                title: "Desarrollo de Aplicaciones",                content: "Construimos aplicaciones web y móviles robustas y escalables, adaptadas a sus necesidades específicas."},
-            { id: "5", title: "Branding e Identidad Visual", content: "Desarrollamos una identidad de marca coherente y memorable que resuena con su audiencia y lo diferencia de la competencia." }
+              {
+                id: "3",                title: "Optimización SEO y Marketing Digital",                content: "Mejoramos su visibilidad en buscadores y desarrollamos estrategias de marketing digital para atraer a su público objetivo."},
+              {
+                id: "4",                title: "Consultoría Estratégica",                content: "Ofrecemos asesoramiento experto para guiar su estrategia digital y maximizar el retorno de su inversión."},
             ]}
           />
+        </div>
 
-        <ContactCTA
+        <div id="precios" data-section="precios">
-          tag="Contáctenos"
+          <PricingCardOne
-          title="¿Listo para Transformar su Presencia Digital?"
+            title="Planes Flexibles para Cada Necesidad"
-          description="Construyamos algo extraordinario juntos. Póngase en contacto y hablemos de su próximo proyecto."
+            description="Elija el plan que mejor se adapte a sus objetivos y presupuesto."
-          background={{ variant: "rotated-rays-animated" }}
+            textboxLayout="default"
-          buttons={[
+            useInvertedBackground={true}
-            { text: "Iniciar Proyecto", href: "#contact" },
+            animationType="slide-up"
-            { text: "Ver Nuestro Trabajo", href: "#work" },
+            plans={[
+              {
+                id: "1",                badge: "Básico",                price: "$500",                subtitle: "Ideal para empezar",                features: [
+                  "Diseño responsivo",                  "Integración de redes sociales",                  "Formulario de contacto",                  "Soporte básico"],
+              },
+              {
+                id: "2",                badge: "Estándar",                price: "$1,200",                subtitle: "Para crecer su negocio",                features: [
+                  "Todo lo básico",                  "Blog integrado",                  "Optimización SEO inicial",                  "Galería de imágenes",                  "Soporte prioritario"],
+              },
+              {
+                id: "3",                badge: "Premium",                price: "$2,500",                subtitle: "Soluciones a medida",                features: [
+                  "Todo lo estándar",                  "Desarrollo personalizado",                  "Integración de e-commerce",                  "Analítica avanzada",                  "Consultoría estratégica",                  "Soporte 24/7"],
+              },
             ]}
-          buttonAnimation="slide-up"
+          />
+        </div>
+
+        <div id="faqs" data-section="faqs">
+          <FaqSplitMedia
+            title="Preguntas Frecuentes"
+            description="Respuestas a las dudas más comunes sobre nuestros servicios y procesos."
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/faq-1.webp"
+            imageAlt="FAQs"
+            mediaPosition="right"
+            mediaAnimation="slide-up"
+            faqsAnimation="slide-up"
+            textboxLayout="default"
             useInvertedBackground={false}
+            faqs={[
+              {
+                id: "1",                title: "¿Cuánto tiempo toma desarrollar un sitio web?",                content: "El tiempo varía según la complejidad del proyecto, pero generalmente un sitio web básico puede tomar de 4 a 6 semanas."},
+              {
+                id: "2",                title: "¿Ofrecen servicios de mantenimiento post-lanzamiento?",                content: "Sí, ofrecemos planes de mantenimiento y soporte para asegurar que su sitio web funcione sin problemas y esté siempre actualizado."},
+              {
+                id: "3",                title: "¿Cómo se maneja el proceso de diseño y aprobación?",                content: "Trabajamos en fases: investigación, diseño conceptual, desarrollo, revisiones y aprobación final. Le mantenemos informado en cada paso."},
+            ]}
           />
+        </div>
 
-        <FooterBase
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
             logoText="Webild"
             copyrightText="© 2026 | Webild"
             columns={[
               {
                 title: "Empresa",                items: [
-                { label: "Nosotros", href: "/nosotros" },
+                  { label: "Inicio", href: "/" },
+                  { label: "Portafolio", href: "/portafolio" },
                   { label: "Servicios", href: "/servicios" },
-                { label: "Trabajo", href: "#work" },
+                  { label: "Nosotros", href: "/nosotros" },
-                { label: "Contacto", href: "#contact" },
+                  { label: "Contacto", href: "/contacto" },
                 ],
               },
               {
                 title: "Servicios",                items: [
-                { label: "Desarrollo Web", href: "/servicios" },
+                  { label: "Diseño Web", href: "/servicios" },
+                  { label: "Desarrollo", href: "/servicios" },
                   { label: "SEO", href: "/servicios" },
                   { label: "Branding", href: "/servicios" },
-                { label: "Diseño UI/UX", href: "/servicios" },
                 ],
               },
               {
@@ -91,11 +133,11 @@ export default function ServiciosPage() {
                   { label: "Twitter", href: "#" },
                   { label: "LinkedIn", href: "#" },
                   { label: "Instagram", href: "#" },
-                { label: "Dribbble", href: "#" },
                 ],
               },
             ]}
           />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );