feat: added content to 'what do we offer' section of index page.

- Added texts and imgs to section about what Naliia offers.
- Wrapped icons of whatsapp and payment of layout with <a> element so it turns into a link.

src/layouts/Layout.astro

@@ -47,13 +47,17 @@ const { pageTitle } = Astro.props;
 
         <main>
             <div class="floating-buttons">
+                <a href="#">
                     <div class="floating-button whatsapp-floatingbutton">
                         <svg
                             xmlns="http://www.w3.org/2000/svg"
                             width="48"
                             height="48"
                             viewBox="-2 -2 24 24"
-                        ><g fill="white" fill-rule="evenodd" clip-rule="evenodd"
+                            ><g
+                                fill="white"
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
                                 ><path
                                     d="M9.516.012C4.206.262.017 4.652.033 9.929a9.8 9.8 0 0 0 1.085 4.465L.06 19.495a.387.387 0 0 0 .47.453l5.034-1.184a10 10 0 0 0 4.284 1.032c5.427.083 9.951-4.195 10.12-9.58C20.15 4.441 15.351-.265 9.516.011zm6.007 15.367a7.78 7.78 0 0 1-5.52 2.27a7.8 7.8 0 0 1-3.474-.808l-.701-.347l-3.087.726l.65-3.131l-.346-.672A7.6 7.6 0 0 1 2.197 9.9c0-2.07.812-4.017 2.286-5.48a7.85 7.85 0 0 1 5.52-2.271c2.086 0 4.046.806 5.52 2.27a7.67 7.67 0 0 1 2.287 5.48c0 2.052-.825 4.03-2.287 5.481z"
                                 ></path><path
@@ -66,7 +70,9 @@ const { pageTitle } = Astro.props;
                             Contactanos por WhatsApp
                         </p>
                     </div>
+                </a>
 
+                <a href="#">
                     <div class="floating-button payment-floatingbutton">
                         <svg
                             xmlns="http://www.w3.org/2000/svg"
@@ -83,6 +89,7 @@ const { pageTitle } = Astro.props;
                             Ir al portal de pagos
                         </p>
                     </div>
+                </a>
             </div>
             <slot />
         </main>

src/pages/index.astro

@@ -21,53 +21,62 @@ import "../styles/index.css";
                 <h4>¿Qué ofrecemos?</h4>
 
                 <p class="sections-subtitle">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                    Sint, saepe quisquam deleniti mollitia tempore, laborum
-                    neque commodi ipsam nobis placeat.
+                    En Naliia te ofrecemos una solución diseñada para
+                    simplificar la operación de tu negocio, mejorar la gestión
+                    diaria y automatizar procesos clave.
                 </p>
             </div>
 
             <div class="cards-container">
-                <div class="offer-card">
+                <div class="offer-card card-1">
                     <div class="card-content">
-                        <h5>Título tarjeta</h5>
+                        <h5>🧩 Gestión integral del negocio</h5>
                         <p>
-                            Lorem ipsum dolor sit amet, consectetur adipisicing
-                            elit. Provident ut quisquam corrupti minus, in ab
-                            labore ratione aperiam ducimus cumque.
+                            Centraliza la información y los procesos clave de tu
+                            negocio en una sola plataforma. Administra clientes,
+                            ventas, inventarios, agenda y contabilidad de forma
+                            ordenada, reduciendo errores y ahorrando tiempo
+                            operativo.
                         </p>
                     </div>
                 </div>
 
-                <div class="offer-card">
+                <div class="offer-card card-2">
                     <div class="card-content">
-                        <h5>Título tarjeta</h5>
+                        <h5>👥 Herramientas para tu equipo</h5>
                         <p>
-                            Lorem ipsum dolor sit amet, consectetur adipisicing
-                            elit. Provident necessitatibus et non quia
-                            voluptates aperiam eligendi ut in error vero.
+                            Pon a tu equipo en sintonía con una aplicación web
+                            intuitiva que les permite ver sus servicios
+                            agendados, registrar avances, añadir observaciones y
+                            evidencias, y trabajar conectados en tiempo real con
+                            la administración.
                         </p>
                     </div>
                 </div>
 
-                <div class="offer-card">
+                <div class="offer-card card-3">
                     <div class="card-content">
-                        <h5>Título tarjeta</h5>
+                        <h5>
+                            🤖 Automatización con<br />inteligencia artificial
+                        </h5>
                         <p>
-                            Lorem ipsum dolor sit amet, consectetur adipisicing
-                            elit. Provident necessitatibus et non quia
-                            voluptates aperiam eligendi ut in error vero.
+                            Optimiza la comunicación y la atención al cliente
+                            con agentes de inteligencia artificial que
+                            automatizan el agendamiento de citas, confirmaciones
+                            y mensajes por WhatsApp y otros canales, sin
+                            intervención manual.
                         </p>
                     </div>
                 </div>
 
-                <div class="offer-card">
+                <div class="offer-card card-4">
                     <div class="card-content">
-                        <h5>Título tarjeta</h5>
+                        <h5>📊 Control y toma de decisiones</h5>
                         <p>
-                            Lorem ipsum dolor sit amet, consectetur adipisicing
-                            elit. Provident necessitatibus et non quia
-                            voluptates aperiam eligendi ut in error vero.
+                            Accede a reportes claros y actualizados sobre la
+                            operación, el desempeño del equipo y los resultados
+                            del negocio, para tomar decisiones informadas y
+                            planificar el crecimiento con mayor seguridad.
                         </p>
                     </div>
                 </div>

src/styles/index.css

@@ -43,13 +43,9 @@
 
     height: 200px;
     padding: var(--space-3xl-64px);
-
     display: flex;
-
-    background-image: url("../assets/imgs/img-preview.svg");
-    background-repeat: no-repeat;
-    background-position: right;
-    background-size: contain;
+    overflow: hidden;
+    position: relative;
 }
 
 .card-content {
@@ -58,6 +54,30 @@
     flex-direction: column;
     gap: var(--space-md-16px);
 }
+.card-1 {
+    background-image: url("../assets/imgs/card_1.webp");
+    background-size: auto 136%;
+    background-position: right center;
+    background-repeat: no-repeat;
+}
+.card-2 {
+    background-image: url("../assets/imgs/card_2.webp");
+    background-size: auto 136%;
+    background-position: right center;
+    background-repeat: no-repeat;
+}
+.card-3 {
+    background-image: url("../assets/imgs/card_3.webp");
+    background-size: auto 136%;
+    background-position: right center;
+    background-repeat: no-repeat;
+}
+.card-4 {
+    background-image: url("../assets/imgs/card_4.webp");
+    background-size: auto 136%;
+    background-position: right center;
+    background-repeat: no-repeat;
+}
 
 /* ----- Pricing section styles ----- */
 .pricing-container {