Update src/app/servicios/page.tsx

This commit is contained in:
2026-06-01 19:06:42 +00:00
parent b60adc4199
commit 6c05c9afa5

View File

@@ -3,10 +3,10 @@
import ReactLenis from "lenis/react"; import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay"; 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() { export default function ServiciosPage() {
return ( return (
@@ -23,79 +23,121 @@ export default function ServiciosPage() {
headingFontWeight="medium" headingFontWeight="medium"
> >
<ReactLenis root> <ReactLenis root>
<NavbarLayoutFloatingOverlay <div id="nav" data-section="nav">
brandName="Webild" <NavbarLayoutFloatingOverlay
navItems={[ brandName="Webild"
{ name: "Trabajo", id: "work" }, navItems={[
{ name: "Servicios", id: "/servicios" }, { name: "Inicio", id: "/" },
{ name: "Nosotros", id: "/nosotros" }, { name: "Portafolio", id: "/portafolio" },
{ name: "Contacto", id: "contact" }, { name: "Servicios", id: "/servicios" },
]} { name: "Nosotros", id: "/nosotros" },
button={{ text: "Empezar", href: "#contact" }} { name: "Contacto", id: "/contacto" },
/> ]}
button={{ text: "Empezar", href: "#contact" }}
/>
</div>
<FeatureCardTwentyOne <div id="servicios" data-section="servicios">
tag="Soluciones Digitales Integrales" <FeatureCardTwentyOne
title="Nuestros Servicios" tag="NUESTROS SERVICIOS"
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." title="Soluciones Digitales Integrales para su Éxito"
textboxLayout="default" description="Ofrecemos un espectro completo de servicios para potenciar su presencia online y alcanzar sus metas de negocio."
useInvertedBackground={false} useInvertedBackground={false}
mediaAnimation="slide-up" 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" mediaPosition="left"
accordionItems={[ 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={[
]} {
buttonAnimation="slide-up" id: "1", badge: "Básico", price: "$500", subtitle: "Ideal para empezar", features: [
useInvertedBackground={false} "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"],
},
]}
/>
</div>
<FooterBase <div id="faqs" data-section="faqs">
logoText="Webild" <FaqSplitMedia
copyrightText="© 2026 | Webild" title="Preguntas Frecuentes"
columns={[ 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"
title: "Empresa", items: [ imageAlt="FAQs"
{ label: "Nosotros", href: "/nosotros" }, mediaPosition="right"
{ label: "Servicios", href: "/servicios" }, mediaAnimation="slide-up"
{ label: "Trabajo", href: "#work" }, faqsAnimation="slide-up"
{ label: "Contacto", href: "#contact" }, textboxLayout="default"
], useInvertedBackground={false}
}, faqs={[
{ {
title: "Servicios", items: [ 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."},
{ label: "Desarrollo Web", href: "/servicios" }, {
{ label: "SEO", href: "/servicios" }, 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."},
{ label: "Branding", href: "/servicios" }, {
{ label: "Diseño UI/UX", href: "/servicios" }, 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>
title: "Conectar", items: [
{ label: "Twitter", href: "#" }, <div id="footer" data-section="footer">
{ label: "LinkedIn", href: "#" }, <FooterBaseReveal
{ label: "Instagram", href: "#" }, logoText="Webild"
{ label: "Dribbble", href: "#" }, copyrightText="© 2026 | Webild"
], columns={[
}, {
]} title: "Empresa", items: [
/> { label: "Inicio", href: "/" },
{ label: "Portafolio", href: "/portafolio" },
{ label: "Servicios", href: "/servicios" },
{ label: "Nosotros", href: "/nosotros" },
{ label: "Contacto", href: "/contacto" },
],
},
{
title: "Servicios", items: [
{ label: "Diseño Web", href: "/servicios" },
{ label: "Desarrollo", href: "/servicios" },
{ label: "SEO", href: "/servicios" },
{ label: "Branding", href: "/servicios" },
],
},
{
title: "Conectar", items: [
{ label: "Twitter", href: "#" },
{ label: "LinkedIn", href: "#" },
{ label: "Instagram", href: "#" },
],
},
]}
/>
</div>
</ReactLenis> </ReactLenis>
</ThemeProvider> </ThemeProvider>
); );