From 7d0282ccfad47a29ca2ca6cc43c4e755ff5249e7 Mon Sep 17 00:00:00 2001 From: Juan Diego Moreno Upegui Date: Mon, 9 Feb 2026 16:17:53 -0500 Subject: [PATCH] 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. --- src/layouts/Layout.astro | 38 ++++++++++++++ src/pages/contact.astro | 4 ++ src/styles/contactpage.css | 2 +- src/styles/global.css | 100 +++++++++++++++++++++++++++++++++++++ 4 files changed, 143 insertions(+), 1 deletion(-) diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index b691032..c31a8fa 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -46,6 +46,44 @@ const { pageTitle } = Astro.props;
+
+
+ + +

+ Contactanos por WhatsApp +

+
+ +
+ + +

+ Ir al portal de pagos +

+
+
diff --git a/src/pages/contact.astro b/src/pages/contact.astro index 026d4f1..f70ec17 100644 --- a/src/pages/contact.astro +++ b/src/pages/contact.astro @@ -108,6 +108,7 @@ import "../styles/contactpage.css"; type="text" class="form-input" placeholder="Juan Carlos Garcia Velez" + required /> @@ -120,6 +121,7 @@ import "../styles/contactpage.css"; type="text" class="form-input" placeholder="Empresa XYZ S.A.S" + required /> @@ -132,6 +134,7 @@ import "../styles/contactpage.css"; type="tel" class="form-input" placeholder="3104567890" + required /> @@ -144,6 +147,7 @@ import "../styles/contactpage.css"; type="email" class="form-input" placeholder="correoejemplo@gmail.com" + required /> diff --git a/src/styles/contactpage.css b/src/styles/contactpage.css index 1779afd..20e2074 100644 --- a/src/styles/contactpage.css +++ b/src/styles/contactpage.css @@ -102,7 +102,7 @@ } .submit-button { - height: 44px; + height: 56px; background-color: var(--primarybutton-bgcolor); color: var(--primarybutton-txtcolor); diff --git a/src/styles/global.css b/src/styles/global.css index 0e301a0..b07b2e4 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -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; + } +}