feat(services): code optimization and new category

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 (
         <section className="d-flex justify-content-center mx-3 position-relative">
             <img src={serviceBg} alt="CloudTech services background image" className="mx-auto ct-services-bg position-absolute w-100 h-100 object-fit-cover d-none d-sm-block" />
@@ -13,36 +27,23 @@ export const Services = () => {
                     <p className="text-white ct-description-p">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. </p>
                 </div>
 
-                <div className="row my-3">
-                    <h3 className="section-title mb-0">Desarrollo Web</h3>
-                    <h5 className="text-white mb-4 fw-normal fst-italic">Construyendo tu universo digital</h5>
-                    {servicesContent.filter(service => service.id < 5).map(service => (
-                        <div key={service.id} className="col-md-6 col-lg-4 col-xl-3 mb-4">
-                            <Card
-                                title={service.title}
-                                icon={service.icon}
-                                description={service.description}
-                                link={service.link}
-                            />
-                        </div>
-                    ))
-                    }
-                </div>
-                <div className="row">
-                    <h3 className="section-title mb-0">Comunicación</h3>
-                    <h5 className="text-white mb-4 fw-normal fst-italic">Reunimos tus audiencias</h5>
-                    {servicesContent.filter(service => service.id > 4).map(service => (
-                        <div key={service.id} className="col-md-6 col-lg-4 col-xl-3 mb-4">
-                            <Card
-                                title={service.title}
-                                icon={service.icon}
-                                description={service.description}
-                                link={service.link}
-                            />
-                        </div>
-                    ))
-                    }
-                </div>
+                {sections.map(section => (
+                    <div className="row my-3" key={section.id}>
+                        <h3 className="section-title mb-0">{section.title}</h3>
+                        <h5 className="text-white mb-4 fw-normal fst-italic">{section.subtitle}</h5>
+                        {groupedServices[section.id] && groupedServices[section.id].map(service => (
+                            <div key={service.id} className="col-md-6 col-lg-4 col-xl-3 mb-4">
+                                <Card
+                                    title={service.title}
+                                    icon={service.icon}
+                                    description={service.description}
+                                    link={service.link}
+                                />
+                            </div>
+                        ))
+                        }
+                    </div>
+                ))}
             </div>
         </section>
     )

src/front/components/Testimonial/Card.jsx

@@ -1,8 +1,8 @@
 export const Card = ({ name, position, review, profilePicture, logo }) => {
     return (
         <div className="d-flex flex-column card bg-transparent border-0 px-4 py-3 h-100">
-            <div className="card-body ct-description-p mb-4 flex-grow-1">
-                <p className="card-text text-center text-white">{review}</p>
+            <div className="card-body ct-reviews mb-4 flex-grow-1">
+                <p className="card-text px-5 text-center text-white">{review}</p>
             </div>
             <div className="container mt-auto flex-shrink-1">
                 <div className="row d-flex align-items-center gap-3">

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;
   }
 }

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: <FontAwesomeIcon icon={faWordpressSimple} />,
         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: <FontAwesomeIcon icon={faCode} />,
         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: <FontAwesomeIcon icon={faCartShopping} />,
         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: <FontAwesomeIcon icon={faWebflow} />,
         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: <FontAwesomeIcon icon={faHexagonNodes} />,
         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: <FontAwesomeIcon icon={faPenNib} />,
         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: <FontAwesomeIcon icon={faComments} />,
         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: <FontAwesomeIcon icon={faChessBishop} />,
         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: <FontAwesomeIcon icon={faPenRuler} />,
+        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: <FontAwesomeIcon icon={faCube} />,
+        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"
     }
 ];