diff --git a/src/front/components/Services/Services.jsx b/src/front/components/Services/Services.jsx index 5e47b08a95..7f5a262041 100644 --- a/src/front/components/Services/Services.jsx +++ b/src/front/components/Services/Services.jsx @@ -3,6 +3,20 @@ import { servicesContent } from "../../utils/servicesContent" import serviceBg from "../../assets/img/servicesBackground.png" export const Services = () => { + const groupedServices = servicesContent.reduce((acc, service) => { + if (!acc[service.id]) { + acc[service.id] = []; + } + acc[service.id].push(service); + return acc; + }, {}) + + const sections = [ + { id: 'web', title: 'Desarrollo Web', subtitle: 'Construyendo tu universo digital' }, + { id: 'communication', title: 'Comunicación', subtitle: 'Reunimos tus audiencias' }, + { id: 'software', title: 'Soluciones de software', subtitle: 'Potenciamos tus capacidades' } + ] + return (
CloudTech services background image @@ -13,36 +27,23 @@ export const Services = () => {

Cada uno de nuestros servicios está diseñado para construir y amplificar tu presencia digital, convirtiendo tus ideas en productos y resultados medibles. Explora cómo podemos dar forma a tu universo online.

-
-

Desarrollo Web

-
Construyendo tu universo digital
- {servicesContent.filter(service => service.id < 5).map(service => ( -
- -
- )) - } -
-
-

Comunicación

-
Reunimos tus audiencias
- {servicesContent.filter(service => service.id > 4).map(service => ( -
- -
- )) - } -
+ {sections.map(section => ( +
+

{section.title}

+
{section.subtitle}
+ {groupedServices[section.id] && groupedServices[section.id].map(service => ( +
+ +
+ )) + } +
+ ))}
) diff --git a/src/front/components/Testimonial/Card.jsx b/src/front/components/Testimonial/Card.jsx index c655f04fc9..9faa3c0125 100644 --- a/src/front/components/Testimonial/Card.jsx +++ b/src/front/components/Testimonial/Card.jsx @@ -1,8 +1,8 @@ export const Card = ({ name, position, review, profilePicture, logo }) => { return (
-
-

{review}

+
+

{review}

diff --git a/src/front/index.css b/src/front/index.css index d6814c11ee..267cf8af64 100644 --- a/src/front/index.css +++ b/src/front/index.css @@ -81,7 +81,7 @@ h6 { .ct-paragraph { font-size: 16pt; - line-height: 180%; + line-height: 170%; } /* Cat transition effect */ @@ -151,11 +151,40 @@ h6 { .ct-description-p { width: 100%; + font-size: 16pt; + line-height: 170%; +} + +@media (min-width: 800px) { + .ct-description-p { + width: 80%; + margin: auto; + } } @media (min-width: 1200px) { .ct-description-p { - width: 40%; + width: 50%; + margin: auto; + } +} + +.ct-reviews { + width: 100%; + font-size: 16pt; + line-height: 170%; +} + +@media (min-width: 800px) { + .ct-reviews { + width: 80%; + margin: auto; + } +} + +@media (min-width: 1200px) { + .ct-reviews { + width: 70%; margin: auto; } } diff --git a/src/front/utils/servicesContent.jsx b/src/front/utils/servicesContent.jsx index bab6e44ded..5f48ee0088 100644 --- a/src/front/utils/servicesContent.jsx +++ b/src/front/utils/servicesContent.jsx @@ -7,62 +7,78 @@ import { faHexagonNodes } from "@fortawesome/free-solid-svg-icons"; import { faPenNib } from "@fortawesome/free-solid-svg-icons"; import { faComments } from "@fortawesome/free-solid-svg-icons"; import { faChessBishop } from "@fortawesome/free-solid-svg-icons"; +import { faPenRuler } from "@fortawesome/free-solid-svg-icons"; +import { faCube } from "@fortawesome/free-solid-svg-icons"; export const servicesContent = [ { - id: 1, + id: web, icon: , title: "Wordpress", description: "Potencia tu presencia con la plataforma CMS más versátil y popular. Diseñamos y desarrollamos sitios WordPress a medida, fáciles de gestionar y optimizados para el crecimiento de tu marca.", link: "Tu web con WordPress" }, { - id: 2, + id: web, icon: , title: "Web Dev", description: "Para soluciones únicas y necesidades específicas. Construimos desarrollos web personalizados con las últimas tecnologías, garantizando funcionalidad, escalabilidad y rendimiento excepcional.", link: "Explora el desarrollo a medida" }, { - id: 3, + id: web, icon: , title: "E-commerce", description: "Lanza y comienza a vender con tu tienda online gracias a un diseño intuitivo y funcionalidades avanzadas. Creamos experiencias de compra que convierten visitantes en clientes fieles y aumentan tus ventas.", link: "Impulsa tu E-commerce" }, { - id: 4, + id: web, icon: , title: "WebFlow", description: "Diseñamos sitios web visualmente impresionantes y altamente funcionales sin código complejo. Ideal para proyectos que demandan diseño de vanguardia y autonomía en la gestión.", link: "Descubre Webflow" }, { - id: 5, + id: communication, icon: , title: "Manejo de redes", description: "Gestionamos tus plataformas sociales con estrategia y creatividad. Construimos comunidades, aumentamos el engagement y fortalecemos la presencia de tu marca e interacción con tu público.", link: "Impulsa tu marca en redes" }, { - id: 6, + id: communication, icon: , title: "Copywriting", description: "Creamos textos persuasivos y optimizados para web, blogs, redes sociales y campañas que captan la atención, transmiten un mensaje claro y convierten visitantes y seguidores en clientes.", link: "Escríbenos" }, { - id: 7, + id: communication, icon: , title: "Producción de contenido", description: "Contamos tu historia con videos, post de redes sociales, artículos de blog y más. Generamos contenido de valor que posiciona tu marca como referente en tu sector.", link: "Crea con nosotros" }, { - id: 8, + id: communication, icon: , title: "Estrategia de comunicación", description: "Planificamos la hoja de ruta de tu comunicación digital. Investigamos, definimos tu voz y creamos un plan integral que reúne todo tu universo digital para cumplir tus objetivos.", link: "Descubre tu potencial" + }, + { + id: software, + icon: , + title: "AutoCAD LT", + description: "Transforma tus ideas en planos precisos con el software de dibujo 2D líder en la industria. Crea, edita y documenta tus diseños con eficiencia, optimizando tu flujo de trabajo y entrega tus proyectos en tiempo récord.", + link: "Potencia tu diseño 2D" + }, + { + id: software, + icon: , + title: "AutoCAD IST", + description: "Diseña sin límites en 2D y 3D con la herramienta más completa para arquitectos e ingenieros. Acelera tus flujos de trabajo y crea diseños impactantes con potentes funciones de modelado, visualización y automatización.", + link: "Adquirir licencia completa" } ]; \ No newline at end of file