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.
This commit is contained in:
BIN
src/assets/imgs/card_1.webp
Normal file
BIN
src/assets/imgs/card_1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
src/assets/imgs/card_2.webp
Normal file
BIN
src/assets/imgs/card_2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
src/assets/imgs/card_3.webp
Normal file
BIN
src/assets/imgs/card_3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
src/assets/imgs/card_4.webp
Normal file
BIN
src/assets/imgs/card_4.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
src/assets/imgs/pc_with_graphics.webp
Normal file
BIN
src/assets/imgs/pc_with_graphics.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
@@ -47,42 +47,49 @@ const { pageTitle } = Astro.props;
|
||||
|
||||
<main>
|
||||
<div class="floating-buttons">
|
||||
<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"
|
||||
<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"
|
||||
><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"
|
||||
></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
|
||||
>
|
||||
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="whatsapp-floatingbutton-text">
|
||||
Contactanos por WhatsApp
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<p class="payment-floatingbutton-text">
|
||||
Ir al portal de pagos
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user