From fb61a7ed13422a7baa94e6d87edaad063c1b5073 Mon Sep 17 00:00:00 2001
From: Santiago Montoya <santiago.mordz@gmail.com>
Date: Wed, 25 Jun 2025 17:19:42 +0000
Subject: [PATCH] build(services): responsive cards and elements section

---
 src/front/components/Footer.jsx            |  6 ++---
 src/front/components/Services/Card.jsx     |  2 +-
 src/front/components/Services/Services.jsx | 27 ++++++++++++++++------
 src/front/index.css                        | 15 +++++++++++-
 src/front/utils/servicesContent.jsx        | 20 ++++++++++++++++
 5 files changed, 58 insertions(+), 12 deletions(-)

diff --git a/src/front/components/Footer.jsx b/src/front/components/Footer.jsx
index e15e32753d..7fe08c8e62 100644
--- a/src/front/components/Footer.jsx
+++ b/src/front/components/Footer.jsx
@@ -7,12 +7,12 @@ import { faYoutube } from '@fortawesome/free-brands-svg-icons'
 import { Link } from "react-router-dom";
 
 export const Footer = () => (
-	<footer className="footer mt-auto py-3 mx-5">
-		<div className="container-fluid">
+	<footer className="footer mt-auto py-3 mx-3">
+		<div className="container">
 			<div className="row">
 				<div className="col text-center text-sm-start">
 					<img src={logoFooter} alt="clooudTech logo" className="mb-3" />
-					<p className="text-white mb-3 d-none d-sm-block">Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam mauris sed ma.</p>
+					<p className="text-white mb-3 w-50 d-none d-sm-block mb-4">Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam mauris sed ma.</p>
 					<div className="fs-2 d-flex gap-3 text-white justify-content-center justify-content-sm-start">
 						<FontAwesomeIcon icon={faFacebookSquare} />
 						<FontAwesomeIcon icon={faInstagram} />
diff --git a/src/front/components/Services/Card.jsx b/src/front/components/Services/Card.jsx
index f9a5ae1c6d..f269b32126 100644
--- a/src/front/components/Services/Card.jsx
+++ b/src/front/components/Services/Card.jsx
@@ -1,6 +1,6 @@
 export const Card = ({ title, description }) => {
     return (
-        <div className="card card-background rounded-5 p-3" style={{ minHeight: '300px' }}>
+        <div className="card card-background rounded-5 p-3" style={{ minHeight: '220px' }}>
             <div className="card-body text-start ">
                 <h5 className="card-title text-ct-secondary">{title}</h5>
                 <p className="card-text text-white">{description}</p>
diff --git a/src/front/components/Services/Services.jsx b/src/front/components/Services/Services.jsx
index 588c3bdae5..055832beb1 100644
--- a/src/front/components/Services/Services.jsx
+++ b/src/front/components/Services/Services.jsx
@@ -4,17 +4,30 @@ import serviceBg from "../../assets/img/servicesBackground.png"
 
 export const Services = () => {
     return (
-        <section className="container mx-5 py-5 position-relative">
-            <img src={serviceBg} alt="" className="ct-services-bg position-absolute top-0 start-0 w-100 h-100 object-fit-cover" />
-            <div className="">
+        <section className="d-flex justify-content-center mx-3 position-relative">
+            <img src={serviceBg} alt="" className="mx-auto ct-services-bg position-absolute w-100 h-100 object-fit-cover d-none d-sm-block" />
+
+            <div className="container py-5">
                 <div className="d-flex flex-column text-center justify-content-center">
-                    <h2 className="section-title ">Conoce nuestros servicios</h2>
-                    <p className="text-white mb-5 w-50 mx-auto">Lorem ipsum dolor sit amet consectetur adipiscing elit semper dalar elementum tempus hac tellus libero accumsan. </p>
+                    <h2 className="section-title">Conoce nuestros servicios</h2>
+                    <p className="text-white ct-description-p">Lorem ipsum dolor sit amet consectetur adipiscing elit semper dalar elementum tempus hac tellus libero accumsan. </p>
                 </div>
 
-                <div className="row">
+                <div className="row my-3">
                     <h3 className="section-title mb-4">Desarrollo Web</h3>
-                    {servicesContent.map(service => (
+                    {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}
+                                description={service.description}
+                            />
+                        </div>
+                    ))
+                    }
+                </div>
+                <div className="row">
+                    <h3 className="section-title mb-4">Comunicación</h3>
+                    {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}
diff --git a/src/front/index.css b/src/front/index.css
index 27f3966cb8..2ab0bda063 100644
--- a/src/front/index.css
+++ b/src/front/index.css
@@ -15,11 +15,24 @@ body {
 }
 
 .card-background {
-  background-color: rgba(255, 255, 255, 0.3);
+  background-color: rgba(255, 255, 255, 16%);
   backdrop-filter: blur(3px);
   border: 0.15rem solid rgb(229, 229, 229, 0.25);
+  box-shadow: 1px 2px 6px rgb(0, 0, 0, 0.29);
 }
 
 .ct-services-bg {
   mix-blend-mode: soft-light;
+  opacity: 50%;
+}
+
+.ct-description-p {
+  width: 100%;
+}
+
+@media (min-width: 1200px) {
+  .ct-description-p {
+    width: 40%;
+    margin: auto;
+  }
 }
diff --git a/src/front/utils/servicesContent.jsx b/src/front/utils/servicesContent.jsx
index 295c004f56..4d1c3ebe8c 100644
--- a/src/front/utils/servicesContent.jsx
+++ b/src/front/utils/servicesContent.jsx
@@ -18,5 +18,25 @@ export const servicesContent = [
         id: 4,
         title: "WebFlow",
         description: "Lorem ipsum dolor sit amet consecte tur adipiscing elit semper dalaracc lacus vel facilisis volutpat est velitolm."
+    },
+    {
+        id: 5,
+        title: "Manejo de redes",
+        description: "Lorem ipsum dolor sit amet consecte tur adipiscing elit semper dalaracc lacus vel facilisis volutpat est velitolm."
+    },
+    {
+        id: 6,
+        title: "Copywriting",
+        description: "Lorem ipsum dolor sit amet consecte tur adipiscing elit semper dalaracc lacus vel facilisis volutpat est velitolm."
+    },
+    {
+        id: 7,
+        title: "Producción de contenido",
+        description: "Lorem ipsum dolor sit amet consecte tur adipiscing elit semper dalaracc lacus vel facilisis volutpat est velitolm."
+    },
+    {
+        id: 8,
+        title: "Estrategia de comunicación",
+        description: "Lorem ipsum dolor sit amet consecte tur adipiscing elit semper dalaracc lacus vel facilisis volutpat est velitolm."
     }
 ];
\ No newline at end of file