Feat: modified global layout and minor changes.
- Added 2 buttons that don't move with scroll, one for whatsapp contact and another for payment site, each one with its own style and animations. - Added 'required' to all inputs in contact page. - Ajusted button height to 56px.
This commit is contained in:
@@ -46,6 +46,44 @@ const { pageTitle } = Astro.props;
|
||||
</header>
|
||||
|
||||
<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"
|
||||
><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>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
@@ -108,6 +108,7 @@ import "../styles/contactpage.css";
|
||||
type="text"
|
||||
class="form-input"
|
||||
placeholder="Juan Carlos Garcia Velez"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -120,6 +121,7 @@ import "../styles/contactpage.css";
|
||||
type="text"
|
||||
class="form-input"
|
||||
placeholder="Empresa XYZ S.A.S"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -132,6 +134,7 @@ import "../styles/contactpage.css";
|
||||
type="tel"
|
||||
class="form-input"
|
||||
placeholder="3104567890"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -144,6 +147,7 @@ import "../styles/contactpage.css";
|
||||
type="email"
|
||||
class="form-input"
|
||||
placeholder="correoejemplo@gmail.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -102,7 +102,7 @@
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
height: 44px;
|
||||
height: 56px;
|
||||
|
||||
background-color: var(--primarybutton-bgcolor);
|
||||
color: var(--primarybutton-txtcolor);
|
||||
|
||||
@@ -397,3 +397,103 @@ summary {
|
||||
main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.floating-buttons {
|
||||
position: fixed;
|
||||
|
||||
bottom: 124px;
|
||||
right: 24px;
|
||||
z-index: 1000;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.floating-button {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
border-radius: 100%;
|
||||
box-shadow: 4px 4px 8px rgba(68, 68, 68, 0.3);
|
||||
|
||||
&:hover {
|
||||
scale: 1.1;
|
||||
transition: scale 0.4s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.whatsapp-floatingbutton {
|
||||
background-color: #25d366;
|
||||
|
||||
& .whatsapp-floatingbutton-text {
|
||||
width: max-content;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
background-color: #25d366;
|
||||
padding: var(--padding-sm-8px) var(--padding-lg-24px);
|
||||
color: var(--dark-gray);
|
||||
font-weight: bold;
|
||||
border-radius: var(--space-md-16px);
|
||||
|
||||
position: absolute;
|
||||
right: 80px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1001;
|
||||
|
||||
/* Estado inicial: invisible y cerca del botón */
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover .whatsapp-floatingbutton-text {
|
||||
/* Estado hover: visible y separado del botón */
|
||||
right: 100px;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-floatingbutton {
|
||||
background-color: var(--main-pink-500);
|
||||
|
||||
& .payment-floatingbutton-text {
|
||||
width: max-content;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
background-color: var(--main-pink-500);
|
||||
padding: var(--padding-sm-8px) var(--padding-lg-24px);
|
||||
color: var(--base-white);
|
||||
font-weight: bold;
|
||||
border-radius: var(--space-md-16px);
|
||||
|
||||
position: absolute;
|
||||
right: 80px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1001;
|
||||
|
||||
/* Estado inicial: invisible y cerca del botón */
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover .payment-floatingbutton-text {
|
||||
/* Estado hover: visible y separado del botón */
|
||||
right: 100px;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user