build(services): responsive cards and elements section

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

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>

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}

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

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."
     }
 ];