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

@@ -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>
 

src/pages/contact.astro

@@ -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>

src/styles/contactpage.css

@@ -102,7 +102,7 @@
 }
 
 .submit-button {
-    height: 44px;
+    height: 56px;
 
     background-color: var(--primarybutton-bgcolor);
     color: var(--primarybutton-txtcolor);

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;
+    }
+}