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,42 +47,49 @@ const { pageTitle } = Astro.props;
 
         <main>
             <div class="floating-buttons">
-                <div class="floating-button whatsapp-floatingbutton">
+                <a href="#">
-                    <svg
+                    <div class="floating-button whatsapp-floatingbutton">
-                        xmlns="http://www.w3.org/2000/svg"
+                        <svg
-                        width="48"
+                            xmlns="http://www.w3.org/2000/svg"
-                        height="48"
+                            width="48"
-                        viewBox="-2 -2 24 24"
+                            height="48"
-                        ><g fill="white" fill-rule="evenodd" clip-rule="evenodd"
+                            viewBox="-2 -2 24 24"
+                            ><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
+                                    d="m14.842 12.045l-1.931-.55a.72.72 0 0 0-.713.186l-.472.478a.71.71 0 0 1-.765.16c-.913-.367-2.835-2.063-3.326-2.912a.69.69 0 0 1 .056-.774l.412-.53a.71.71 0 0 0 .089-.726L7.38 5.553a.723.723 0 0 0-1.125-.256c-.539.453-1.179 1.14-1.256 1.903c-.137 1.343.443 3.036 2.637 5.07c2.535 2.349 4.566 2.66 5.887 2.341c.75-.18 1.35-.903 1.727-1.494a.713.713 0 0 0-.408-1.072"
+                                ></path></g
+                            ></svg
+                        >
+
+                        <p class="whatsapp-floatingbutton-text">
+                            Contactanos por WhatsApp
+                        </p>
+                    </div>
+                </a>
+
+                <a href="#">
+                    <div class="floating-button payment-floatingbutton">
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="48"
+                            height="48"
+                            viewBox="0 0 32 32"
                             ><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"
+                                fill="var(--base-white)"
-                            ></path><path
+                                d="M2 9.5A4.5 4.5 0 0 1 6.5 5h19A4.5 4.5 0 0 1 30 9.5v13a4.5 4.5 0 0 1-4.5 4.5h-19A4.5 4.5 0 0 1 2 22.5zM6.5 7A2.5 2.5 0 0 0 4 9.5V11h24V9.5A2.5 2.5 0 0 0 25.5 7zM4 22.5A2.5 2.5 0 0 0 6.5 25h19a2.5 2.5 0 0 0 2.5-2.5V13H4zM21 19h3a1 1 0 1 1 0 2h-3a1 1 0 1 1 0-2"
-                                d="m14.842 12.045l-1.931-.55a.72.72 0 0 0-.713.186l-.472.478a.71.71 0 0 1-.765.16c-.913-.367-2.835-2.063-3.326-2.912a.69.69 0 0 1 .056-.774l.412-.53a.71.71 0 0 0 .089-.726L7.38 5.553a.723.723 0 0 0-1.125-.256c-.539.453-1.179 1.14-1.256 1.903c-.137 1.343.443 3.036 2.637 5.07c2.535 2.349 4.566 2.66 5.887 2.341c.75-.18 1.35-.903 1.727-1.494a.713.713 0 0 0-.408-1.072"
+                            ></path></svg
-                            ></path></g
+                        >
-                        ></svg
-                    >
 
-                    <p class="whatsapp-floatingbutton-text">
+                        <p class="payment-floatingbutton-text">
-                        Contactanos por WhatsApp
+                            Ir al portal de pagos
-                    </p>
+                        </p>
-                </div>
+                    </div>
-
+                </a>
-                <div class="floating-button payment-floatingbutton">
-                    <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="48"
-                        height="48"
-                        viewBox="0 0 32 32"
-                        ><path
-                            fill="var(--base-white)"
-                            d="M2 9.5A4.5 4.5 0 0 1 6.5 5h19A4.5 4.5 0 0 1 30 9.5v13a4.5 4.5 0 0 1-4.5 4.5h-19A4.5 4.5 0 0 1 2 22.5zM6.5 7A2.5 2.5 0 0 0 4 9.5V11h24V9.5A2.5 2.5 0 0 0 25.5 7zM4 22.5A2.5 2.5 0 0 0 6.5 25h19a2.5 2.5 0 0 0 2.5-2.5V13H4zM21 19h3a1 1 0 1 1 0 2h-3a1 1 0 1 1 0-2"
-                        ></path></svg
-                    >
-
-                    <p class="payment-floatingbutton-text">
-                        Ir al portal de pagos
-                    </p>
-                </div>
             </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.
+                    En Naliia te ofrecemos una solución diseñada para
-                    Sint, saepe quisquam deleniti mollitia tempore, laborum
+                    simplificar la operación de tu negocio, mejorar la gestión
-                    neque commodi ipsam nobis placeat.
+                    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
+                            Centraliza la información y los procesos clave de tu
-                            elit. Provident ut quisquam corrupti minus, in ab
+                            negocio en una sola plataforma. Administra clientes,
-                            labore ratione aperiam ducimus cumque.
+                            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
+                            Pon a tu equipo en sintonía con una aplicación web
-                            elit. Provident necessitatibus et non quia
+                            intuitiva que les permite ver sus servicios
-                            voluptates aperiam eligendi ut in error vero.
+                            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
+                            Optimiza la comunicación y la atención al cliente
-                            elit. Provident necessitatibus et non quia
+                            con agentes de inteligencia artificial que
-                            voluptates aperiam eligendi ut in error vero.
+                            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
+                            Accede a reportes claros y actualizados sobre la
-                            elit. Provident necessitatibus et non quia
+                            operación, el desempeño del equipo y los resultados
-                            voluptates aperiam eligendi ut in error vero.
+                            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;
-
+    overflow: hidden;
-    background-image: url("../assets/imgs/img-preview.svg");
+    position: relative;
-    background-repeat: no-repeat;
-    background-position: right;
-    background-size: contain;
 }
 
 .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 {