feat: refresh site pages and styling assets

- update contact, documentation, and home pages - refine global and page-specific CSS styles - add reusable global animations stylesheet - add pink Naliia background image asset
2026-02-20 12:44:56 -05:00
parent f6bf1dc29b
commit 50b396704b
20 changed files with 695 additions and 294 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,8 @@
      "name": "naliia-website",
      "version": "0.0.1",
      "dependencies": {
-        "astro": "^5.17.1"
+        "astro": "^5.17.1",
+        "lenis": "^1.3.17"
      }
    },
    "node_modules/@astrojs/compiler": {
@@ -2127,9 +2128,9 @@
      }
    },
    "node_modules/devalue": {
-      "version": "5.6.2",
-      "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.6.2.tgz",
-      "integrity": "sha512-nPRkjWzzDQlsejL1WVifk5rvcFi/y1onBRxjaFMjZeR9mFpqu2gmAZ9xUB9/IEanEP/vBtGeGganC/GO1fmufg==",
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.6.3.tgz",
+      "integrity": "sha512-nc7XjUU/2Lb+SvEFVGcWLiKkzfw8+qHI7zn8WYXKkLMgfGSHbgCEaR6bJpev8Cm6Rmrb19Gfd/tZvGqx9is3wg==",
      "license": "MIT"
    },
    "node_modules/devlop": {
@@ -2738,6 +2739,32 @@
        "node": ">=6"
      }
    },
+    "node_modules/lenis": {
+      "version": "1.3.17",
+      "resolved": "https://registry.npmjs.org/lenis/-/lenis-1.3.17.tgz",
+      "integrity": "sha512-k9T9rgcxne49ggJOvXCraWn5dt7u2mO+BNkhyu6yxuEnm9c092kAW5Bus5SO211zUvx7aCCEtzy9UWr0RB+oJw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/darkroomengineering"
+      },
+      "peerDependencies": {
+        "@nuxt/kit": ">=3.0.0",
+        "react": ">=17.0.0",
+        "vue": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/longest-streak": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
    "astro": "astro"
  },
  "dependencies": {
-    "astro": "^5.17.1"
+    "astro": "^5.17.1",
+    "lenis": "^1.3.17"
  }
-}
+}
--- a/src/assets/imgs/img-preview.svg
+++ b/src/assets/imgs/img-preview.svg
@@ -1,27 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="Capa_2" data-name="Capa 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 450 200">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #fff;
-      }
-
-      .cls-2 {
-        fill: url(#Degradado_sin_nombre_66);
-      }
-    </style>
-    <linearGradient id="Degradado_sin_nombre_66" data-name="Degradado sin nombre 66" x1="225" y1="200" x2="225" y2="0" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#ff4b77"/>
-      <stop offset=".33" stop-color="#ff7875"/>
-      <stop offset=".67" stop-color="#ff9e84"/>
-      <stop offset="1" stop-color="#ffb86f"/>
-    </linearGradient>
-  </defs>
-  <g id="Capa_1-2" data-name="Capa 1">
-    <rect class="cls-2" width="450" height="200"/>
-    <g>
-      <circle class="cls-1" cx="253.2" cy="66.67" r="10.25"/>
-      <path class="cls-1" d="M272.93,111.02c-.79-1.9-2.02-3.13-3.72-4.83l-5.71-5.71c-4.69-4.69-7.28-7.28-10.98-8.39-2.91-.88-5.98-.88-8.89,0-3.7,1.12-6.29,3.7-10.98,8.39-1.27,1.27-2.57,2.57-3.32,3.18-.47-.84-1.19-2.51-1.89-4.15l-.63-1.48c-4.49-10.47-6.96-16.23-12.73-18.63-1.5-.62-3.07-1-4.7-1.13-6.24-.48-11.05,3.53-19.8,10.82l-7.75,6.46c-2.08,1.74-3.59,2.99-4.56,5.05v.03c-.97,2.06-.97,4.03-.97,6.74v10.58c0,5.11,0,8.8.42,11.94.34,2.53,1.14,6.25,4.08,9.19,2.95,2.95,6.66,3.74,9.19,4.09,3.13.42,6.82.42,11.94.42h46.15c5.11,0,8.8,0,11.94-.42,2.53-.34,6.25-1.14,9.19-4.08,2.95-2.95,3.74-6.66,4.09-9.19.42-3.13.42-6.82.42-11.94v-.88c0-2.42,0-4.17-.78-6.05Z"/>
-    </g>
-  </g>
-</svg>
--- a/src/assets/imgs/n-naliia-rosada-fondo.webp
+++ b/src/assets/imgs/n-naliia-rosada-fondo.webp
--- a/src/components/InitialSection.astro
+++ b/src/components/InitialSection.astro
@@ -57,9 +57,11 @@ const {
            {
                buttonText && (
                    <div class="button-container">
-                        <button class="button call-to-action-button">
-                            {buttonText}
-                        </button>
+                        <a href="#">
+                            <button class="button call-to-action-button importantButton-hover-animation">
+                                {buttonText}
+                            </button>
+                        </a>
                    </div>
                )
            }
@@ -70,6 +72,32 @@ const {
 </section>

 <style>
+    @starting-style {
+        .logo-naliia-full {
+            translate: -100px 0;
+            opacity: 0;
+        }
+
+        .main-title {
+            translate: -100px 0;
+            opacity: 0;
+        }
+
+        .subtitle {
+            translate: -100px 0;
+            opacity: 0;
+        }
+
+        .call-to-action-button {
+            translate: -100px 0;
+            opacity: 0;
+        }
+
+        .main-img {
+            opacity: 0;
+        }
+    }
+
    .section-1 {
        position: relative;
        background-color: transparent;
@@ -112,6 +140,8 @@ const {
        z-index: -1;
        pointer-events: none;

+        transition: opacity 1s ease-in-out;
+
        @media (max-width: 1023px) {
            display: none;
        }
@@ -136,6 +166,10 @@ const {
        height: 82px;
        width: auto;

+        transition:
+            translate 1s ease-in-out,
+            opacity 1s ease-in-out;
+
        @media (max-width: 767px) {
            height: 50px;
        }
@@ -162,6 +196,10 @@ const {
        font-size: 80px;
        line-height: calc(80px * 1.2);

+        transition:
+            translate 1s ease-in-out,
+            opacity 1s ease-in-out;
+
        @media (max-width: 767px) {
            font-size: var(--font-mobile-h1);
            line-height: var(--line-height-mobile-h1);
@@ -170,6 +208,10 @@ const {
    .subtitle {
        max-width: 630px;

+        transition:
+            translate 1s ease-in-out,
+            opacity 1s ease-in-out;
+
        @media (max-width: 767px) {
            width: 100%;
        }
@@ -191,6 +233,10 @@ const {
        color: white;
        cursor: pointer;

+        transition:
+            translate 1s ease-in-out,
+            opacity 1s ease-in-out;
+
        @media (max-width: 1023px) {
            padding: var(--padding-sm-8px) var(--padding-lg-24px);
        }
@@ -202,4 +248,8 @@ const {
            padding: var(--padding-sm-8px) var(--padding-lg-24px);
        }
    }
+
+    .call-to-action-button:hover {
+        animation: heartBeat 1.2s infinite;
+    }
 </style>
--- a/src/components/PlanDetailsTable.astro
+++ b/src/components/PlanDetailsTable.astro
@@ -1,5 +1,11 @@
 ---
+// imports

+// types
+
+// props
+
+// logic, variables, functions, etc.
 ---

 <table border="1" cellpadding="8" cellspacing="0">
@@ -195,6 +201,10 @@
        border-spacing: 0;
        border-collapse: collapse;

+        animation: fadeIn both;
+        animation-timeline: view();
+        animation-range: 0% 30%;
+
        @media (max-width: 1023px) {
            display: block;
            overflow-x: auto;
--- a/src/components/PricingCard.astro
+++ b/src/components/PricingCard.astro
@@ -47,7 +47,9 @@ const {
        </div>
    </div>

-    <button class="button call-to-action-button">{buttonText}</button>
+    <button class="button call-to-action-button button-hover-effect"
+        >{buttonText}</button
+    >
 </div>

 <style>
@@ -69,8 +71,8 @@ const {
        justify-content: space-between;

        border-radius: var(--space-lg-24px);
-        background-color: var(--pricingcard-secundarybgcolor);
-        box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
+        background: var(--convexCard-bgcolor);
+        box-shadow: var(--convex-shadowbox);

        padding: var(--space-3xl-64px) var(--space-xl-32px);
        box-sizing: border-box;
@@ -116,8 +118,6 @@ const {
    .features {
        display: flex;
        flex-direction: column;
-        border-top: 1px solid var(--main-pink-500);
-        border-bottom: 1px solid var(--main-pink-500);
        padding: var(--padding-lg-24px) 0;
        gap: var(--space-lg-24px);

--- a/src/components/footer/Footer.astro
+++ b/src/components/footer/Footer.astro
@@ -132,25 +132,33 @@ import "./footer.css";

    <div class="social-media">
        <div class="icons-social-media">
-            <a href="#" class="social-media-link">
+            <a href="#" class="social-media-link whatsapp-link">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
-                    width="34"
-                    height="34"
-                    viewBox="0 0 24 24"
-                    ><path
+                    width="28"
+                    height="28"
+                    viewBox="-2 -2 24 24"
+                    class="whatsapp-icon"
+                    ><g
                        fill="var(--main-icon-color)"
-                        d="M17.6 6.32A7.85 7.85 0 0 0 12 4a7.94 7.94 0 0 0-6.88 11.89L4 20l4.2-1.1a7.9 7.9 0 0 0 3.79 1a8 8 0 0 0 8-7.93a8 8 0 0 0-2.39-5.65M12 18.53a6.6 6.6 0 0 1-3.36-.92l-.24-.15l-2.49.66l.66-2.43l-.16-.25a6.6 6.6 0 0 1 10.25-8.17a6.65 6.65 0 0 1 2 4.66a6.66 6.66 0 0 1-6.66 6.6m3.61-4.94c-.2-.1-1.17-.58-1.35-.64s-.32-.1-.45.1a9 9 0 0 1-.63.77c-.11.14-.23.15-.43 0a5.33 5.33 0 0 1-2.69-2.35c-.21-.35.2-.33.58-1.08a.38.38 0 0 0 0-.35c0-.1-.45-1.08-.61-1.47s-.32-.33-.45-.34h-.39a.7.7 0 0 0-.53.25A2.2 2.2 0 0 0 8 10.17a3.8 3.8 0 0 0 .81 2.05a8.9 8.9 0 0 0 3.39 3a3.85 3.85 0 0 0 2.38.5a2 2 0 0 0 1.33-.94a1.6 1.6 0 0 0 .12-.94c-.09-.1-.22-.15-.42-.25"
-                    ></path></svg
+                        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
                >
            </a>

-            <a href="" class="social-media-link">
+            <a href="" class="social-media-link instagram-link">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="28"
                    height="28"
                    viewBox="0 0 24 24"
+                    class="instagram-icon"
                    ><path
                        fill="var(--main-icon-color)"
                        d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
@@ -158,12 +166,13 @@ import "./footer.css";
                >
            </a>

-            <a href="#" class="social-media-link">
+            <a href="#" class="social-media-link email-link">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="28"
                    height="28"
                    viewBox="0 0 24 24"
+                    class="email-icon"
                    ><path
                        fill="var(--main-icon-color)"
                        d="M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm3.519 0L12 11.671L18.481 6zM20 7.329l-7.341 6.424a1 1 0 0 1-1.318 0L4 7.329V18h16z"
--- a/src/components/navbar/Navbar.astro
+++ b/src/components/navbar/Navbar.astro
@@ -44,16 +44,25 @@ const currentPath: string = Astro.url.pathname;
    >

    <div class="pageslinks-container">
-        <a href="/pricing" class={currentPath === "/pricing" ? "active" : ""}>
+        <a
+            href="/pricing"
+            id="page-link"
+            class={currentPath === "/pricing" ? "active" : ""}
+        >
            Precios y membresías
        </a>

-        <a href="/contact" class={currentPath === "/contact" ? "active" : ""}>
+        <a
+            href="/contact"
+            id="page-link"
+            class={currentPath === "/contact" ? "active" : ""}
+        >
            Contacto
        </a>

        <a
            href="/documentation"
+            id="page-link"
            class={currentPath === "/documentation" ? "active" : ""}
        >
            Documentación
--- a/src/components/navbar/navbar.css
+++ b/src/components/navbar/navbar.css
@@ -35,6 +35,15 @@
    }
 }

+#page-link {
+    transition: all 0.1s ease-in-out;
+
+    &:hover {
+        transform: translateY(-2px);
+        color: var(--main-pink-500);
+    }
+}
+
 /* Mostrar el menú cuando tenga la clase 'menu-open' */
 .nav-container.menu-open .pageslinks-container {
    @media (max-width: 767px) {
@@ -128,15 +137,33 @@ a.active::after {
 /* Toggle de iconos del tema */
 .theme-toggle {
    position: relative;
+
+    transition: all 0.1s ease-in-out;
+
+    &:hover {
+        background-color: rgba(68, 68, 68, 0.2);
+        box-shadow: 0px 0px 0px 12px rgba(68, 68, 68, 0.2);
+        border-radius: 100%;
+    }
 }

 /* Por defecto (modo claro): mostrar luna, ocultar sol */
 .light-icon {
    display: none;
+    transition: all 0.1s ease-in-out;
+
+    &:hover {
+        transform: scale(1.05);
+    }
 }

 .dark-icon {
    display: block;
+    transition: all 0.1s ease-in-out;
+
+    &:hover {
+        transform: scale(1.05);
+    }
 }

 /* En modo oscuro: mostrar sol, ocultar luna */
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -3,6 +3,7 @@
 import Navbar from "../components/navbar/Navbar.astro";
 import Footer from "../components/footer/Footer.astro";
 import "../styles/global.css";
+import "../styles/globalAnimations.css";

 // types
 export interface Props {
@@ -26,20 +27,6 @@ const { pageTitle } = Astro.props;
    </head>

    <body>
-        <svg
-            class="bg-svg"
-            aria-hidden="true"
-            width="1400"
-            height="1400"
-            viewBox="0 0 124.94 128.36"
-            style="color: var(--naliia-n-bg-color);"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <path
-                d="M113.28,48.43c3.79-5.22,6.69-9.77,8.63-13.53,2.02-3.91,3.04-7.93,3.04-11.93,0-1.59-.46-3.51-1.39-5.89-.9-2.27-1.94-4.24-3.09-5.86-.91-1.26-2.32-2.94-4.13-2.94-2.58,0-6.29,1.7-11.34,5.2-4.78,3.31-10.7,8.29-17.61,14.8-6.89,6.49-15.08,15.03-24.35,25.38-5.28,5.89-10.88,12.39-16.76,19.45l9.4-15.83c3.78-6.36,7.54-12.88,11.17-19.38,3.66-6.54,6.49-12.19,8.41-16.78,2.01-4.8,2.99-8.41,2.99-11.04,0-3.27-1.23-5.82-3.65-7.58-2.27-1.65-5.35-2.49-9.15-2.49-4.19,0-9.25,1.28-15.04,3.81-4.52,1.97-11.16,5.12-19.8,9.39.69-.61,1.44-1.22,2.24-1.83,2.09-1.57,2.7-2.3,2.7-3.26,0-1.27-.69-1.83-1.1-2.05-1.22-.66-2.53.16-3.07.5-9.46,5.43-17.11,11.85-22.73,19.09C2.82,33.13,0,39.02,0,43.64s3.07,4.95,4.01,4.95c.65,0,1.63,0,10.24-4.91,5.47-3.12,9.81-5.54,12.9-7.2,3.07-1.65,8.03-3.91,14.72-6.72,10.44-4.35,13.46-5,14.32-5,.5,0,.92.16,1.3.51.35.32.5.69.5,1.2,0,1.61-1.28,5.97-7.37,17.57-5,9.51-12.66,22.74-22.8,39.33h0c-1.92,3.24-4.48,7.27-7.6,11.99-4.41,6.68-5.01,8.73-5.01,9.86,0,1.53,1.17,3.38,3.8,6.01,2.6,2.6,4.67,3.8,6.52,3.8s3.68-1.32,5.81-4.13c3.76-4.9,7.46-9.72,11.1-14.48,3.64-4.75,6.93-9.04,9.86-12.85,2.91-3.78,5.79-7.4,8.59-10.76,2.8-3.37,4.79-5.69,5.9-6.92,23.14-25.91,30.9-29.78,33.47-29.78.12,0,.2,0,.25.02,0,.04,0,.09,0,.16,0,.77-.7,3.57-7.22,12.9-5.13,7.24-9.79,14.28-13.85,20.93-4.08,6.67-7.55,12.95-10.32,18.67-2.79,5.74-4.89,10.89-6.24,15.31-1.38,4.49-2.08,8.4-2.08,11.62,0,3.69,1.04,6.74,3.1,9.06,2.11,2.37,4.91,3.57,8.34,3.57,2.29,0,4.95-.75,7.9-2.22,2.81-1.41,6.02-3.5,9.54-6.23,3.47-2.69,7.19-5.87,11.08-9.44,3.87-3.56,8.32-7.9,13.22-12.92l.48-.49-.28-11.03-2.65,2.56c-3.43,3.32-6.88,6.43-10.25,9.23-3.32,2.77-6.2,4.84-8.55,6.15-2.19,1.22-4.08,1.85-5.62,1.85-3.1,0-4.36-1.19-4.36-4.11,0-4.75,2.41-11.23,7.16-19.25,4.87-8.22,12.73-19.67,23.36-34.04Z"
-                fill="currentColor"></path>
-        </svg>
-
        <header class="header">
            <Navbar />
        </header>
@@ -112,3 +99,239 @@ const { pageTitle } = Astro.props;
        localStorage.setItem("theme", "light");
    }
 </script>
+
+<script>
+    import Lenis from "lenis";
+
+    // Inicialización de Lenis
+    const lenis = new Lenis({
+        duration: 1.2,
+        easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
+        direction: "vertical",
+        gestureDirection: "vertical",
+        smoothHover: true,
+        // En móviles a veces es mejor dejarlo en false para no interferir con el scroll nativo
+        smoothTouch: false,
+    });
+
+    // Función de actualización (Raf)
+    function raf(time: number) {
+        lenis.raf(time);
+        requestAnimationFrame(raf);
+    }
+
+    requestAnimationFrame(raf);
+</script>
+
+<style>
+    /* Estilos base para Lenis */
+    html.lenis {
+        height: auto;
+    }
+
+    .lenis.lenis-smooth {
+        scroll-behavior: auto !important;
+    }
+
+    .lenis.lenis-smooth [data-lenis-prevent] {
+        overscroll-behavior: contain;
+    }
+
+    .lenis.lenis-stopped {
+        overflow: hidden;
+    }
+
+    /* Estilos globales */
+    html {
+        margin: 0;
+        width: 100%;
+        overflow-x: clip;
+    }
+
+    body {
+        margin: 0;
+        width: 100%;
+        min-height: 100vh;
+        background-color: var(--main-bg-color);
+        font-family: var(--font-family-primary), sans-serif, Arial;
+
+        position: relative;
+        z-index: 0;
+
+        display: flex;
+        flex-direction: column;
+        overflow-x: clip;
+
+        /* background-image: url("/src/assets/imgs/n-naliia-rosada-fondo.webp");
+        background-repeat: no-repeat;
+        background-position: top right; */
+    }
+
+    body::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background-image: url("/src/assets/imgs/n-naliia-rosada-fondo.webp");
+        background-repeat: no-repeat;
+        background-position: top right;
+        opacity: 0.05;
+        pointer-events: none;
+        z-index: -1;
+
+        @media (max-width: 1023px) {
+            background-position: calc(100% + 500px) top;
+        }
+    }
+
+    main {
+        flex: 1;
+    }
+
+    .bg-svg {
+        position: absolute;
+        top: -180px;
+        right: 0px;
+        width: 1400px;
+        height: 1400px;
+        z-index: -1;
+        pointer-events: none;
+        opacity: 0.05;
+        transform: translateX(8%);
+    }
+
+    .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: var(--convex-shadowbox);
+
+        &:hover {
+            scale: 1.1;
+            transition: scale 0.4s ease;
+        }
+
+        @media (max-width: 767px) {
+            width: 56px;
+            height: 56px;
+
+            & .whatsapp-icon {
+                width: 40px;
+                height: 40px;
+            }
+
+            & .payment-icon {
+                width: 40px;
+                height: 40px;
+            }
+        }
+    }
+
+    .whatsapp-floatingbutton {
+        background: linear-gradient(145deg, #28e26d, #21be5c);
+
+        & .whatsapp-floatingbutton-text {
+            width: max-content;
+            height: 40px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            background: linear-gradient(145deg, #28e26d, #21be5c);
+            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;
+        }
+
+        @media (max-width: 767px) {
+            & .whatsapp-floatingbutton-text {
+                font-size: var(--font-mobile-sm);
+                padding: var(--padding-sm-8px) var(--padding-md-16px);
+            }
+
+            &:hover .whatsapp-floatingbutton-text {
+                right: 70px;
+            }
+        }
+    }
+
+    .payment-floatingbutton {
+        background: linear-gradient(145deg, #f5517d, #ce4469);
+
+        & .payment-floatingbutton-text {
+            width: max-content;
+            height: 40px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            background: linear-gradient(145deg, #f5517d, #ce4469);
+            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;
+        }
+
+        @media (max-width: 767px) {
+            & .payment-floatingbutton-text {
+                font-size: var(--font-mobile-sm);
+                padding: var(--padding-sm-8px) var(--padding-md-16px);
+            }
+
+            &:hover .payment-floatingbutton-text {
+                right: 70px;
+            }
+        }
+    }
+</style>
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -40,12 +40,13 @@ import "../styles/contactpage.css";
                        </div>

                        <div class="socialmedia-icons">
-                            <a href="#" class="social-media-link">
+                            <a href="#" class="social-media-link whatsapp-link">
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="48"
                                    height="48"
                                    viewBox="-2 -2 24 24"
+                                    class="whatsapp-icon"
                                    ><g
                                        fill="var(--main-icon-color)"
                                        fill-rule="evenodd"
@@ -59,12 +60,13 @@ import "../styles/contactpage.css";
                                >
                            </a>

-                            <a href="" class="social-media-link">
+                            <a href="" class="social-media-link instagram-link">
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="48"
                                    height="48"
                                    viewBox="0 0 24 24"
+                                    class="instagram-icon"
                                    ><path
                                        fill="var(--main-icon-color)"
                                        d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
@@ -72,12 +74,13 @@ import "../styles/contactpage.css";
                                >
                            </a>

-                            <a href="#" class="social-media-link">
+                            <a href="#" class="social-media-link email-link">
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="48"
                                    height="48"
                                    viewBox="0 0 24 24"
+                                    class="email-icon"
                                    ><path
                                        fill="var(--main-icon-color)"
                                        d="M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm3.519 0L12 11.671L18.481 6zM20 7.329l-7.341 6.424a1 1 0 0 1-1.318 0L4 7.329V18h16z"
@@ -156,7 +159,7 @@ import "../styles/contactpage.css";
                            <div>
                                <button
                                    form="contact-form"
-                                    class="submit-button"
+                                    class="submit-button button-hover-effect"
                                    >Enviar información</button
                                >
                            </div>
--- a/src/pages/documentation.astro
+++ b/src/pages/documentation.astro
@@ -29,7 +29,7 @@ const videosList = Object.keys(videoFiles).map((key) => {

 <Layout pageTitle="Documentación">
    <section class="videos-displayer">
-        <h3>
+        <h3 class="doc-section-title">
            Aprende cómo funciona Naliia y resuelve cualquier duda que tengas
        </h3>

@@ -43,27 +43,6 @@ const videosList = Object.keys(videoFiles).map((key) => {
                    class="search-input"
                    required
                />
-
-                <button
-                    type="submit"
-                    aria-label="Ejecutar búsqueda"
-                    class="search-button"
-                >
-                    <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="32"
-                        height="32"
-                        viewBox="0 0 24 24"
-                        ><g
-                            fill="none"
-                            stroke="var(--main-icon-color)"
-                            stroke-width="2"
-                            ><circle cx="11" cy="11" r="7"></circle><path
-                                stroke-linecap="round"
-                                d="m20 20l-3-3"></path></g
-                        ></svg
-                    >
-                </button>
            </div>
        </form>

@@ -82,7 +61,7 @@ const videosList = Object.keys(videoFiles).map((key) => {
                        </a>

                        <a href={`/video_player/${video.id}`}>
-                            <button class="play-button">
+                            <button class="play-button button-hover-effect">
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="32"
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -27,9 +27,9 @@ import "../styles/index.css";
        <!-- ----- What we offer section ----- -->
        <section class="offer-section second-sect-container sections">
            <div class="title-and-phrase">
-                <h4>¿Qué ofrecemos?</h4>
+                <h4 class="what-we-offer-title">¿Qué ofrecemos?</h4>

-                <p class="sections-subtitle">
+                <p class="sections-subtitle what-we-offer-phrase">
                    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.
@@ -95,9 +95,9 @@ import "../styles/index.css";
        <!-- ----- Pricing section ----- -->
        <section class="pricing-container">
            <div class="title-and-phrase">
-                <h4>Elige tu plan</h4>
+                <h4 class="pricing-title">Elige tu plan</h4>

-                <p class="sections-subtitle">
+                <p class="sections-subtitle pricing-phrase">
                    Nuestros planes están diseñados para adaptarse a las
                    necesidades de tu negocio, ofreciendo flexibilidad y
                    escalabilidad a medida que creces.
@@ -260,8 +260,10 @@ import "../styles/index.css";
                </div>
            </div>

-            <button class="calltoaction-button"
-                >Quiero obtener uno de los planes</button
+            <button
+                class="calltoaction-button button-hover-effect importantButton-hover-animation"
+            >
+                Quiero obtener uno de los planes</button
            >

            <p class="important-information">
--- a/src/styles/contactpage.css
+++ b/src/styles/contactpage.css
@@ -1,3 +1,10 @@
+@starting-style {
+    .contact-methods {
+        translate: -100px 0;
+        opacity: 0;
+    }
+}
+
 .contact-page {
    display: flex;
    overflow-x: hidden;
@@ -18,6 +25,10 @@
    flex-direction: column;
    gap: var(--space-xl-32px);

+    transition:
+        translate 1s ease-in-out,
+        opacity 1s ease-in-out;
+
    & .title-and-text {
        display: flex;
        flex-direction: column;
@@ -50,8 +61,8 @@
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl-48px);
-    background-color: var(--main-bg-color);
-    box-shadow: var(--main-boxshadow);
+    background: var(--contactform-convexbgcolor);
+    box-shadow: var(--convex-shadowbox);
    padding: 140px;
    border: var(--main-border);
    border-radius: var(--space-lg-24px);
--- a/src/styles/documentation.css
+++ b/src/styles/documentation.css
@@ -1,3 +1,12 @@
+@starting-style {
+    .doc-section-title,
+    .search-bar,
+    .videos-container {
+        translate: -100px 0;
+        opacity: 0;
+    }
+}
+
 .videos-displayer {
    padding: var(--space-2xl-48px) 350px;
    display: flex;
@@ -13,6 +22,13 @@
    }
 }

+.doc-section-title,
+.search-bar {
+    transition:
+        translate 1s ease-in-out,
+        opacity 1s ease-in-out;
+}
+
 .input-container {
    position: relative;
    width: 100%;
@@ -35,20 +51,11 @@
        color: var(--main-text-color);
        opacity: 0.7;
    }
-}

-.search-button {
-    position: absolute;
-    right: 24px;
-    top: 50%;
-    transform: translateY(-50%);
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 4px;
+    &:focus {
+        outline: none;
+        border: 2px solid var(--main-pink-500);
+    }
 }

 .videos-container {
@@ -58,6 +65,10 @@
    display: flex;
    flex-direction: column;
    gap: var(--space-lg-24px);
+
+    transition:
+        translate 1s ease-in-out,
+        opacity 1s ease-in-out;
 }

 .video-item {
@@ -76,6 +87,12 @@
        max-height 0.3s ease,
        margin 0.3s ease,
        padding 0.3s ease;
+
+    @media (max-width: 767px) {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--space-sm-8px);
+    }
 }

 .video-item.hidden {
@@ -95,7 +112,16 @@
    font-size: var(--font-desktop-base);
    font-weight: bold;
    color: var(--main-text-color);
-    text-decoration: underline;
+    transition:
+        color 0.2s ease,
+        transform 0.2s ease,
+        text-decoration 2s ease;
+
+    &:hover {
+        color: var(--main-pink-500);
+        transform: scale(1.01);
+        text-decoration: underline;
+    }
 }

 .play-button {
@@ -116,7 +142,6 @@
    font-size: var(--font-desktop-base);
    font-weight: bold;

-    box-sizing: border-box;
    cursor: pointer;
 }

--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -153,6 +153,12 @@
    --main-border: 1px solid rgba(68, 68, 68, 0.2);
    --primarybutton-bgcolor: var(--main-pink-500);
    --primarybutton-txtcolor: var(--base-white);
+    --convexCard-bgcolor: linear-gradient(145deg, #fff2df, #dccbbb);
+    --convex-shadowbox:
+        5px 5px 12px rgba(179, 179, 179, 0.5),
+        -5px -5px 12px rgba(255, 255, 255, 0.6);
+
+    --offercard-bgcolor: var(--base-white);

    --pricingcard-bgcolor: var(--dark-gray);
    --pricingcard-secundarybgcolor: var(--main-mistyRose-500);
@@ -170,6 +176,7 @@
    --detailstable-primarytxtcolor: var(--light-gray);
    --detailstable-primaryborder: 1px solid rgba(68, 68, 68, 0.2);

+    --contactform-convexbgcolor: linear-gradient(145deg, #ffffff, #e6e6e6);
    --input-txtcolor: var(--light-gray);

    --documentation-input-bgcolor: transparent;
@@ -270,6 +277,11 @@
    --main-border: 1px solid rgba(255, 255, 255, 0.2);
    --primarybutton-bgcolor: var(--main-pink-500);
    --primarybutton-txtcolor: var(--base-white);
+    --convexCard-bgcolor: linear-gradient(145deg, #494949, #3d3d3d);
+    --convex-shadowbox:
+        6px 6px 16px rgba(32, 32, 32, 0.8), -6px -6px 16px rgba(42, 42, 42, 0.7);
+
+    --offercard-bgcolor: var(--dark-gray);

    --pricingcard-bgcolor: var(--darker-gray);
    --pricingcard-secundarybgcolor: var(--light-gray);
@@ -286,6 +298,7 @@
    --detailstable-primarytxtcolor: var(--base-white);
    --detailstable-primaryborder: 1px solid rgba(255, 255, 255, 0.2);

+    --contactform-convexbgcolor: linear-gradient(145deg, #282828, #212121);
    --input-txtcolor: var(--light-gray);

    --documentation-input-bgcolor: var(--light-gray);
@@ -298,33 +311,6 @@
    box-sizing: border-box;
 }

-html {
-    margin: 0;
-    width: 100%;
-    overflow-x: hidden;
-}
-
-body {
-    margin: 0;
-    width: 100%;
-    min-height: 100vh;
-    background-color: var(--main-bg-color);
-    font-family: var(--font-family-primary), sans-serif, Arial;
-
-    position: relative;
-    z-index: 0;
-    overflow: hidden;
-
-    display: flex;
-    flex-direction: column;
-
-    & main {
-        flex: 1 0 auto;
-        overflow-y: auto;
-        overflow-x: hidden;
-    }
-}
-
 p {
    font-size: var(--font-desktop-base);
    line-height: var(--line-height-desktop-base);
@@ -444,151 +430,44 @@ summary {
    }
 }

-.bg-svg {
-    position: absolute;
-    top: -180px;
-    right: 0px;
-    width: 1400px;
-    height: 1400px;
-    z-index: -1;
-    pointer-events: none;
-    opacity: 0.05;
-    transform: translateX(8%);
+.whatsapp-link,
+.instagram-link,
+.email-link {
+    transition: all 0.1s ease-in-out;
 }

-.floating-buttons {
-    position: fixed;
+.whatsapp-link:hover {
+    transform: scale(1.1);

-    bottom: 124px;
-    right: 24px;
-    z-index: 1000;
-
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
+    & .whatsapp-icon path {
+        fill: #25d366;
+    }
 }

-.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);
+.instagram-link:hover {
+    transform: scale(1.1);
+
+    & .instagram-icon path {
+        fill: #d6249f;
+    }
+}
+
+.email-link:hover {
+    transform: scale(1.1);
+
+    & .email-icon path {
+        fill: var(--main-pink-500);
+    }
+}
+
+.button-hover-effect {
+    transition: all 0.1s ease;

    &:hover {
-        scale: 1.1;
-        transition: scale 0.4s ease;
-    }
-
-    @media (max-width: 767px) {
-        width: 56px;
-        height: 56px;
-
-        & .whatsapp-icon {
-            width: 40px;
-            height: 40px;
-        }
-
-        & .payment-icon {
-            width: 40px;
-            height: 40px;
-        }
+        scale: 1.03;
    }
 }

-.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;
-    }
-
-    @media (max-width: 767px) {
-        & .whatsapp-floatingbutton-text {
-            font-size: var(--font-mobile-sm);
-            padding: var(--padding-sm-8px) var(--padding-md-16px);
-        }
-
-        &:hover .whatsapp-floatingbutton-text {
-            right: 70px;
-        }
-    }
-}
-
-.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;
-    }
-
-    @media (max-width: 767px) {
-        & .payment-floatingbutton-text {
-            font-size: var(--font-mobile-sm);
-            padding: var(--padding-sm-8px) var(--padding-md-16px);
-        }
-
-        &:hover .payment-floatingbutton-text {
-            right: 70px;
-        }
-    }
+.importantButton-hover-animation:hover {
+    animation: heartBeat 1.2s infinite;
 }
--- a/src/styles/globalAnimations.css
+++ b/src/styles/globalAnimations.css
@@ -0,0 +1,78 @@
+@keyframes heartBeat {
+    0% {
+        transform: scale(1);
+    }
+    25% {
+        transform: scale(1.06);
+    }
+    50% {
+        transform: scale(1.05);
+    }
+    75% {
+        transform: scale(1.06);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadeAndMoveFromLeft {
+    from {
+        opacity: 0;
+        transform: translateX(-100px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes fadeAndMoveFromRight {
+    from {
+        opacity: 0;
+        transform: translateX(100px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes fadeAndMoveFromBottom {
+    from {
+        opacity: 0;
+        transform: translateY(100px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes pinkBorderAroundContainer {
+    0% {
+        border: 2px solid var(--main-pink-200);
+    }
+
+    50% {
+        border: 2px solid var(--main-pink-500);
+    }
+
+    100% {
+        border: 2px solid var(--main-yellow-500);
+    }
+}
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,13 +1,11 @@
 .homepage {
    display: flex;
-    overflow-x: hidden;
-    overflow-y: hidden;
    flex-direction: column;
    gap: 120px;
    background-color: transparent;

    @media (max-width: 1023px) {
-        overflow-y: hidden;
+        overflow-y: visible;
    }

    @media (max-width: 767px) {
@@ -63,6 +61,8 @@
 .offer-card {
    border: var(--main-border);
    border-radius: var(--space-lg-24px);
+    background-color: var(--offercard-bgcolor);
+    box-shadow: 4px 4px 8px rgba(68, 68, 68, 0.3);

    height: 300px;
    padding: var(--padding-3xl-64px);
@@ -71,6 +71,15 @@
    overflow: hidden;
    position: relative;

+    transition:
+        transform 0.3s ease-in-out,
+        scale 0.3s ease-in-out;
+
+    &:hover {
+        transform: translateY(-10px);
+        scale: 1.02;
+    }
+
    @media (max-width: 1023px) {
        height: auto;
        padding: var(--padding-2xl-48px);
@@ -559,3 +568,37 @@
    border: 2px solid red;
    border-radius: var(--space-md-16px);
 }
+
+/* ----- Animations ----- */
+
+.what-we-offer-title,
+.what-we-offer-phrase,
+.pricing-title,
+.pricing-phrase {
+    animation: fadeIn both;
+    animation-timeline: view(50% 20%);
+}
+
+.card-1,
+.card-2,
+.card-3,
+.card-4 {
+    animation: fadeAndMoveFromLeft both;
+    animation-timeline: view();
+    animation-range: 25% 50%;
+}
+
+.best-plan-card {
+    animation: fadeAndMoveFromBottom both;
+    animation-timeline: view(70% 30%);
+}
+
+.mid-plan {
+    animation: fadeAndMoveFromLeft both;
+    animation-timeline: view(70% 30%);
+}
+
+.basic-plan {
+    animation: fadeAndMoveFromRight both;
+    animation-timeline: view(70% 30%);
+}
--- a/src/styles/pricingPage.css
+++ b/src/styles/pricingPage.css
@@ -1,6 +1,5 @@
 .pricing-page {
    display: flex;
-    overflow-x: hidden;
    flex-direction: column;
    gap: 140px;
    background-color: transparent;
@@ -33,6 +32,9 @@
    flex-direction: column;
    gap: var(--space-sm-8px);
    align-items: flex-start;
+
+    animation: fadeAndMoveFromLeft both;
+    animation-timeline: view(50% 20%);
 }

 .pricingcards {
@@ -40,23 +42,73 @@
    align-items: center;
    width: 100%;
    gap: var(--space-lg-24px);
-}

-@media (max-width: 1023px) {
-    .pricingcards {
+    @media (max-width: 1023px) {
        flex-direction: column;
        gap: var(--space-lg-24px);
    }
+}

-    .pricingcards .advanced-plan {
-        order: 1;
+.basic-plan {
+    animation: fadeAndMoveFromLeft 1.2s ease;
+    animation-timeline: view(100% 20%);
+
+    transition: scale 0.3s ease;
+
+    &:hover {
+        scale: 1.06;
+        cursor: pointer;
+
+        animation: pinkBorderAroundContainer 4s ease infinite alternate;
    }

-    .pricingcards .intermediate-plan {
-        order: 2;
-    }
-
-    .pricingcards .basic-plan {
+    @media (max-width: 1023px) {
        order: 3;
+
+        animation-timeline: view(100% 0%);
+    }
+}
+
+.intermediate-plan {
+    animation: fadeAndMoveFromRight 1.2s ease;
+    animation-timeline: view(100% 20%);
+
+    transition: scale 0.3s ease;
+
+    &:hover {
+        scale: 1.06;
+        cursor: pointer;
+
+        animation: pinkBorderAroundContainer 4s ease infinite alternate;
+    }
+
+    @media (max-width: 1023px) {
+        order: 2;
+
+        animation-timeline: view(100% 0%);
+    }
+}
+
+.advanced-plan {
+    animation: fadeIn 1.2s ease;
+    animation-timeline: view(100% 22%);
+
+    transition: scale 0.3s ease;
+
+    &:hover {
+        scale: 1.06;
+        cursor: pointer;
+
+        animation: pinkBorderAroundContainer 4s ease infinite;
+    }
+
+    @media (max-width: 1023px) {
+        order: 1;
+
+        animation-timeline: view(100% 20%);
+    }
+
+    @media (max-width: 767px) {
+        animation-timeline: view(100% 25%);
    }
 }