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
This commit is contained in:
35
package-lock.json
generated
35
package-lock.json
generated
@@ -8,7 +8,8 @@
|
|||||||
"name": "naliia-website",
|
"name": "naliia-website",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"astro": "^5.17.1"
|
"astro": "^5.17.1",
|
||||||
|
"lenis": "^1.3.17"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@astrojs/compiler": {
|
"node_modules/@astrojs/compiler": {
|
||||||
@@ -2127,9 +2128,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/devalue": {
|
"node_modules/devalue": {
|
||||||
"version": "5.6.2",
|
"version": "5.6.3",
|
||||||
"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.6.2.tgz",
|
"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.6.3.tgz",
|
||||||
"integrity": "sha512-nPRkjWzzDQlsejL1WVifk5rvcFi/y1onBRxjaFMjZeR9mFpqu2gmAZ9xUB9/IEanEP/vBtGeGganC/GO1fmufg==",
|
"integrity": "sha512-nc7XjUU/2Lb+SvEFVGcWLiKkzfw8+qHI7zn8WYXKkLMgfGSHbgCEaR6bJpev8Cm6Rmrb19Gfd/tZvGqx9is3wg==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/devlop": {
|
"node_modules/devlop": {
|
||||||
@@ -2738,6 +2739,32 @@
|
|||||||
"node": ">=6"
|
"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": {
|
"node_modules/longest-streak": {
|
||||||
"version": "3.1.0",
|
"version": "3.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
|
||||||
|
|||||||
@@ -9,6 +9,7 @@
|
|||||||
"astro": "astro"
|
"astro": "astro"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"astro": "^5.17.1"
|
"astro": "^5.17.1",
|
||||||
|
"lenis": "^1.3.17"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -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>
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/imgs/n-naliia-rosada-fondo.webp
Normal file
BIN
src/assets/imgs/n-naliia-rosada-fondo.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
@@ -57,9 +57,11 @@ const {
|
|||||||
{
|
{
|
||||||
buttonText && (
|
buttonText && (
|
||||||
<div class="button-container">
|
<div class="button-container">
|
||||||
<button class="button call-to-action-button">
|
<a href="#">
|
||||||
|
<button class="button call-to-action-button importantButton-hover-animation">
|
||||||
{buttonText}
|
{buttonText}
|
||||||
</button>
|
</button>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -70,6 +72,32 @@ const {
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<style>
|
<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 {
|
.section-1 {
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
@@ -112,6 +140,8 @@ const {
|
|||||||
z-index: -1;
|
z-index: -1;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
|
transition: opacity 1s ease-in-out;
|
||||||
|
|
||||||
@media (max-width: 1023px) {
|
@media (max-width: 1023px) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@@ -136,6 +166,10 @@ const {
|
|||||||
height: 82px;
|
height: 82px;
|
||||||
width: auto;
|
width: auto;
|
||||||
|
|
||||||
|
transition:
|
||||||
|
translate 1s ease-in-out,
|
||||||
|
opacity 1s ease-in-out;
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
@@ -162,6 +196,10 @@ const {
|
|||||||
font-size: 80px;
|
font-size: 80px;
|
||||||
line-height: calc(80px * 1.2);
|
line-height: calc(80px * 1.2);
|
||||||
|
|
||||||
|
transition:
|
||||||
|
translate 1s ease-in-out,
|
||||||
|
opacity 1s ease-in-out;
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
font-size: var(--font-mobile-h1);
|
font-size: var(--font-mobile-h1);
|
||||||
line-height: var(--line-height-mobile-h1);
|
line-height: var(--line-height-mobile-h1);
|
||||||
@@ -170,6 +208,10 @@ const {
|
|||||||
.subtitle {
|
.subtitle {
|
||||||
max-width: 630px;
|
max-width: 630px;
|
||||||
|
|
||||||
|
transition:
|
||||||
|
translate 1s ease-in-out,
|
||||||
|
opacity 1s ease-in-out;
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
@@ -191,6 +233,10 @@ const {
|
|||||||
color: white;
|
color: white;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
transition:
|
||||||
|
translate 1s ease-in-out,
|
||||||
|
opacity 1s ease-in-out;
|
||||||
|
|
||||||
@media (max-width: 1023px) {
|
@media (max-width: 1023px) {
|
||||||
padding: var(--padding-sm-8px) var(--padding-lg-24px);
|
padding: var(--padding-sm-8px) var(--padding-lg-24px);
|
||||||
}
|
}
|
||||||
@@ -202,4 +248,8 @@ const {
|
|||||||
padding: var(--padding-sm-8px) var(--padding-lg-24px);
|
padding: var(--padding-sm-8px) var(--padding-lg-24px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.call-to-action-button:hover {
|
||||||
|
animation: heartBeat 1.2s infinite;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,5 +1,11 @@
|
|||||||
---
|
---
|
||||||
|
// imports
|
||||||
|
|
||||||
|
// types
|
||||||
|
|
||||||
|
// props
|
||||||
|
|
||||||
|
// logic, variables, functions, etc.
|
||||||
---
|
---
|
||||||
|
|
||||||
<table border="1" cellpadding="8" cellspacing="0">
|
<table border="1" cellpadding="8" cellspacing="0">
|
||||||
@@ -195,6 +201,10 @@
|
|||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
|
|
||||||
|
animation: fadeIn both;
|
||||||
|
animation-timeline: view();
|
||||||
|
animation-range: 0% 30%;
|
||||||
|
|
||||||
@media (max-width: 1023px) {
|
@media (max-width: 1023px) {
|
||||||
display: block;
|
display: block;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
|
|||||||
@@ -47,7 +47,9 @@ const {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button class="button call-to-action-button">{buttonText}</button>
|
<button class="button call-to-action-button button-hover-effect"
|
||||||
|
>{buttonText}</button
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@@ -69,8 +71,8 @@ const {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
border-radius: var(--space-lg-24px);
|
border-radius: var(--space-lg-24px);
|
||||||
background-color: var(--pricingcard-secundarybgcolor);
|
background: var(--convexCard-bgcolor);
|
||||||
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
|
box-shadow: var(--convex-shadowbox);
|
||||||
|
|
||||||
padding: var(--space-3xl-64px) var(--space-xl-32px);
|
padding: var(--space-3xl-64px) var(--space-xl-32px);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@@ -116,8 +118,6 @@ const {
|
|||||||
.features {
|
.features {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
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;
|
padding: var(--padding-lg-24px) 0;
|
||||||
gap: var(--space-lg-24px);
|
gap: var(--space-lg-24px);
|
||||||
|
|
||||||
|
|||||||
@@ -132,25 +132,33 @@ import "./footer.css";
|
|||||||
|
|
||||||
<div class="social-media">
|
<div class="social-media">
|
||||||
<div class="icons-social-media">
|
<div class="icons-social-media">
|
||||||
<a href="#" class="social-media-link">
|
<a href="#" class="social-media-link whatsapp-link">
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="34"
|
width="28"
|
||||||
height="34"
|
height="28"
|
||||||
viewBox="0 0 24 24"
|
viewBox="-2 -2 24 24"
|
||||||
><path
|
class="whatsapp-icon"
|
||||||
|
><g
|
||||||
fill="var(--main-icon-color)"
|
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"
|
fill-rule="evenodd"
|
||||||
></path></svg
|
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>
|
||||||
|
|
||||||
<a href="" class="social-media-link">
|
<a href="" class="social-media-link instagram-link">
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="28"
|
width="28"
|
||||||
height="28"
|
height="28"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
|
class="instagram-icon"
|
||||||
><path
|
><path
|
||||||
fill="var(--main-icon-color)"
|
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"
|
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>
|
||||||
|
|
||||||
<a href="#" class="social-media-link">
|
<a href="#" class="social-media-link email-link">
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="28"
|
width="28"
|
||||||
height="28"
|
height="28"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
|
class="email-icon"
|
||||||
><path
|
><path
|
||||||
fill="var(--main-icon-color)"
|
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"
|
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"
|
||||||
|
|||||||
@@ -44,16 +44,25 @@ const currentPath: string = Astro.url.pathname;
|
|||||||
>
|
>
|
||||||
|
|
||||||
<div class="pageslinks-container">
|
<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
|
Precios y membresías
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="/contact" class={currentPath === "/contact" ? "active" : ""}>
|
<a
|
||||||
|
href="/contact"
|
||||||
|
id="page-link"
|
||||||
|
class={currentPath === "/contact" ? "active" : ""}
|
||||||
|
>
|
||||||
Contacto
|
Contacto
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a
|
<a
|
||||||
href="/documentation"
|
href="/documentation"
|
||||||
|
id="page-link"
|
||||||
class={currentPath === "/documentation" ? "active" : ""}
|
class={currentPath === "/documentation" ? "active" : ""}
|
||||||
>
|
>
|
||||||
Documentación
|
Documentación
|
||||||
|
|||||||
@@ -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' */
|
/* Mostrar el menú cuando tenga la clase 'menu-open' */
|
||||||
.nav-container.menu-open .pageslinks-container {
|
.nav-container.menu-open .pageslinks-container {
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
@@ -128,15 +137,33 @@ a.active::after {
|
|||||||
/* Toggle de iconos del tema */
|
/* Toggle de iconos del tema */
|
||||||
.theme-toggle {
|
.theme-toggle {
|
||||||
position: relative;
|
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 */
|
/* Por defecto (modo claro): mostrar luna, ocultar sol */
|
||||||
.light-icon {
|
.light-icon {
|
||||||
display: none;
|
display: none;
|
||||||
|
transition: all 0.1s ease-in-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark-icon {
|
.dark-icon {
|
||||||
display: block;
|
display: block;
|
||||||
|
transition: all 0.1s ease-in-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* En modo oscuro: mostrar sol, ocultar luna */
|
/* En modo oscuro: mostrar sol, ocultar luna */
|
||||||
|
|||||||
@@ -3,6 +3,7 @@
|
|||||||
import Navbar from "../components/navbar/Navbar.astro";
|
import Navbar from "../components/navbar/Navbar.astro";
|
||||||
import Footer from "../components/footer/Footer.astro";
|
import Footer from "../components/footer/Footer.astro";
|
||||||
import "../styles/global.css";
|
import "../styles/global.css";
|
||||||
|
import "../styles/globalAnimations.css";
|
||||||
|
|
||||||
// types
|
// types
|
||||||
export interface Props {
|
export interface Props {
|
||||||
@@ -26,20 +27,6 @@ const { pageTitle } = Astro.props;
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<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">
|
<header class="header">
|
||||||
<Navbar />
|
<Navbar />
|
||||||
</header>
|
</header>
|
||||||
@@ -112,3 +99,239 @@ const { pageTitle } = Astro.props;
|
|||||||
localStorage.setItem("theme", "light");
|
localStorage.setItem("theme", "light");
|
||||||
}
|
}
|
||||||
</script>
|
</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>
|
||||||
|
|||||||
@@ -40,12 +40,13 @@ import "../styles/contactpage.css";
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="socialmedia-icons">
|
<div class="socialmedia-icons">
|
||||||
<a href="#" class="social-media-link">
|
<a href="#" class="social-media-link whatsapp-link">
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="48"
|
width="48"
|
||||||
height="48"
|
height="48"
|
||||||
viewBox="-2 -2 24 24"
|
viewBox="-2 -2 24 24"
|
||||||
|
class="whatsapp-icon"
|
||||||
><g
|
><g
|
||||||
fill="var(--main-icon-color)"
|
fill="var(--main-icon-color)"
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
@@ -59,12 +60,13 @@ import "../styles/contactpage.css";
|
|||||||
>
|
>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="" class="social-media-link">
|
<a href="" class="social-media-link instagram-link">
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="48"
|
width="48"
|
||||||
height="48"
|
height="48"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
|
class="instagram-icon"
|
||||||
><path
|
><path
|
||||||
fill="var(--main-icon-color)"
|
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"
|
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>
|
||||||
|
|
||||||
<a href="#" class="social-media-link">
|
<a href="#" class="social-media-link email-link">
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="48"
|
width="48"
|
||||||
height="48"
|
height="48"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
|
class="email-icon"
|
||||||
><path
|
><path
|
||||||
fill="var(--main-icon-color)"
|
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"
|
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>
|
<div>
|
||||||
<button
|
<button
|
||||||
form="contact-form"
|
form="contact-form"
|
||||||
class="submit-button"
|
class="submit-button button-hover-effect"
|
||||||
>Enviar información</button
|
>Enviar información</button
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -29,7 +29,7 @@ const videosList = Object.keys(videoFiles).map((key) => {
|
|||||||
|
|
||||||
<Layout pageTitle="Documentación">
|
<Layout pageTitle="Documentación">
|
||||||
<section class="videos-displayer">
|
<section class="videos-displayer">
|
||||||
<h3>
|
<h3 class="doc-section-title">
|
||||||
Aprende cómo funciona Naliia y resuelve cualquier duda que tengas
|
Aprende cómo funciona Naliia y resuelve cualquier duda que tengas
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
@@ -43,27 +43,6 @@ const videosList = Object.keys(videoFiles).map((key) => {
|
|||||||
class="search-input"
|
class="search-input"
|
||||||
required
|
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>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
@@ -82,7 +61,7 @@ const videosList = Object.keys(videoFiles).map((key) => {
|
|||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href={`/video_player/${video.id}`}>
|
<a href={`/video_player/${video.id}`}>
|
||||||
<button class="play-button">
|
<button class="play-button button-hover-effect">
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="32"
|
width="32"
|
||||||
|
|||||||
@@ -27,9 +27,9 @@ import "../styles/index.css";
|
|||||||
<!-- ----- What we offer section ----- -->
|
<!-- ----- What we offer section ----- -->
|
||||||
<section class="offer-section second-sect-container sections">
|
<section class="offer-section second-sect-container sections">
|
||||||
<div class="title-and-phrase">
|
<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
|
En Naliia te ofrecemos una solución diseñada para
|
||||||
simplificar la operación de tu negocio, mejorar la gestión
|
simplificar la operación de tu negocio, mejorar la gestión
|
||||||
diaria y automatizar procesos clave.
|
diaria y automatizar procesos clave.
|
||||||
@@ -95,9 +95,9 @@ import "../styles/index.css";
|
|||||||
<!-- ----- Pricing section ----- -->
|
<!-- ----- Pricing section ----- -->
|
||||||
<section class="pricing-container">
|
<section class="pricing-container">
|
||||||
<div class="title-and-phrase">
|
<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
|
Nuestros planes están diseñados para adaptarse a las
|
||||||
necesidades de tu negocio, ofreciendo flexibilidad y
|
necesidades de tu negocio, ofreciendo flexibilidad y
|
||||||
escalabilidad a medida que creces.
|
escalabilidad a medida que creces.
|
||||||
@@ -260,8 +260,10 @@ import "../styles/index.css";
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button class="calltoaction-button"
|
<button
|
||||||
>Quiero obtener uno de los planes</button
|
class="calltoaction-button button-hover-effect importantButton-hover-animation"
|
||||||
|
>
|
||||||
|
Quiero obtener uno de los planes</button
|
||||||
>
|
>
|
||||||
|
|
||||||
<p class="important-information">
|
<p class="important-information">
|
||||||
|
|||||||
@@ -1,3 +1,10 @@
|
|||||||
|
@starting-style {
|
||||||
|
.contact-methods {
|
||||||
|
translate: -100px 0;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.contact-page {
|
.contact-page {
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
@@ -18,6 +25,10 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--space-xl-32px);
|
gap: var(--space-xl-32px);
|
||||||
|
|
||||||
|
transition:
|
||||||
|
translate 1s ease-in-out,
|
||||||
|
opacity 1s ease-in-out;
|
||||||
|
|
||||||
& .title-and-text {
|
& .title-and-text {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -50,8 +61,8 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--space-2xl-48px);
|
gap: var(--space-2xl-48px);
|
||||||
background-color: var(--main-bg-color);
|
background: var(--contactform-convexbgcolor);
|
||||||
box-shadow: var(--main-boxshadow);
|
box-shadow: var(--convex-shadowbox);
|
||||||
padding: 140px;
|
padding: 140px;
|
||||||
border: var(--main-border);
|
border: var(--main-border);
|
||||||
border-radius: var(--space-lg-24px);
|
border-radius: var(--space-lg-24px);
|
||||||
|
|||||||
@@ -1,3 +1,12 @@
|
|||||||
|
@starting-style {
|
||||||
|
.doc-section-title,
|
||||||
|
.search-bar,
|
||||||
|
.videos-container {
|
||||||
|
translate: -100px 0;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.videos-displayer {
|
.videos-displayer {
|
||||||
padding: var(--space-2xl-48px) 350px;
|
padding: var(--space-2xl-48px) 350px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -13,6 +22,13 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.doc-section-title,
|
||||||
|
.search-bar {
|
||||||
|
transition:
|
||||||
|
translate 1s ease-in-out,
|
||||||
|
opacity 1s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
.input-container {
|
.input-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -35,20 +51,11 @@
|
|||||||
color: var(--main-text-color);
|
color: var(--main-text-color);
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.search-button {
|
&:focus {
|
||||||
position: absolute;
|
outline: none;
|
||||||
right: 24px;
|
border: 2px solid var(--main-pink-500);
|
||||||
top: 50%;
|
}
|
||||||
transform: translateY(-50%);
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 4px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.videos-container {
|
.videos-container {
|
||||||
@@ -58,6 +65,10 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--space-lg-24px);
|
gap: var(--space-lg-24px);
|
||||||
|
|
||||||
|
transition:
|
||||||
|
translate 1s ease-in-out,
|
||||||
|
opacity 1s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-item {
|
.video-item {
|
||||||
@@ -76,6 +87,12 @@
|
|||||||
max-height 0.3s ease,
|
max-height 0.3s ease,
|
||||||
margin 0.3s ease,
|
margin 0.3s ease,
|
||||||
padding 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 {
|
.video-item.hidden {
|
||||||
@@ -95,7 +112,16 @@
|
|||||||
font-size: var(--font-desktop-base);
|
font-size: var(--font-desktop-base);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: var(--main-text-color);
|
color: var(--main-text-color);
|
||||||
|
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;
|
text-decoration: underline;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.play-button {
|
.play-button {
|
||||||
@@ -116,7 +142,6 @@
|
|||||||
font-size: var(--font-desktop-base);
|
font-size: var(--font-desktop-base);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
box-sizing: border-box;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -153,6 +153,12 @@
|
|||||||
--main-border: 1px solid rgba(68, 68, 68, 0.2);
|
--main-border: 1px solid rgba(68, 68, 68, 0.2);
|
||||||
--primarybutton-bgcolor: var(--main-pink-500);
|
--primarybutton-bgcolor: var(--main-pink-500);
|
||||||
--primarybutton-txtcolor: var(--base-white);
|
--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-bgcolor: var(--dark-gray);
|
||||||
--pricingcard-secundarybgcolor: var(--main-mistyRose-500);
|
--pricingcard-secundarybgcolor: var(--main-mistyRose-500);
|
||||||
@@ -170,6 +176,7 @@
|
|||||||
--detailstable-primarytxtcolor: var(--light-gray);
|
--detailstable-primarytxtcolor: var(--light-gray);
|
||||||
--detailstable-primaryborder: 1px solid rgba(68, 68, 68, 0.2);
|
--detailstable-primaryborder: 1px solid rgba(68, 68, 68, 0.2);
|
||||||
|
|
||||||
|
--contactform-convexbgcolor: linear-gradient(145deg, #ffffff, #e6e6e6);
|
||||||
--input-txtcolor: var(--light-gray);
|
--input-txtcolor: var(--light-gray);
|
||||||
|
|
||||||
--documentation-input-bgcolor: transparent;
|
--documentation-input-bgcolor: transparent;
|
||||||
@@ -270,6 +277,11 @@
|
|||||||
--main-border: 1px solid rgba(255, 255, 255, 0.2);
|
--main-border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
--primarybutton-bgcolor: var(--main-pink-500);
|
--primarybutton-bgcolor: var(--main-pink-500);
|
||||||
--primarybutton-txtcolor: var(--base-white);
|
--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-bgcolor: var(--darker-gray);
|
||||||
--pricingcard-secundarybgcolor: var(--light-gray);
|
--pricingcard-secundarybgcolor: var(--light-gray);
|
||||||
@@ -286,6 +298,7 @@
|
|||||||
--detailstable-primarytxtcolor: var(--base-white);
|
--detailstable-primarytxtcolor: var(--base-white);
|
||||||
--detailstable-primaryborder: 1px solid rgba(255, 255, 255, 0.2);
|
--detailstable-primaryborder: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
|
||||||
|
--contactform-convexbgcolor: linear-gradient(145deg, #282828, #212121);
|
||||||
--input-txtcolor: var(--light-gray);
|
--input-txtcolor: var(--light-gray);
|
||||||
|
|
||||||
--documentation-input-bgcolor: var(--light-gray);
|
--documentation-input-bgcolor: var(--light-gray);
|
||||||
@@ -298,33 +311,6 @@
|
|||||||
box-sizing: border-box;
|
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 {
|
p {
|
||||||
font-size: var(--font-desktop-base);
|
font-size: var(--font-desktop-base);
|
||||||
line-height: var(--line-height-desktop-base);
|
line-height: var(--line-height-desktop-base);
|
||||||
@@ -444,151 +430,44 @@ summary {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-svg {
|
.whatsapp-link,
|
||||||
position: absolute;
|
.instagram-link,
|
||||||
top: -180px;
|
.email-link {
|
||||||
right: 0px;
|
transition: all 0.1s ease-in-out;
|
||||||
width: 1400px;
|
|
||||||
height: 1400px;
|
|
||||||
z-index: -1;
|
|
||||||
pointer-events: none;
|
|
||||||
opacity: 0.05;
|
|
||||||
transform: translateX(8%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.floating-buttons {
|
.whatsapp-link:hover {
|
||||||
position: fixed;
|
transform: scale(1.1);
|
||||||
|
|
||||||
bottom: 124px;
|
& .whatsapp-icon path {
|
||||||
right: 24px;
|
fill: #25d366;
|
||||||
z-index: 1000;
|
}
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.floating-button {
|
.instagram-link:hover {
|
||||||
position: relative;
|
transform: scale(1.1);
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
& .instagram-icon path {
|
||||||
align-items: center;
|
fill: #d6249f;
|
||||||
width: 68px;
|
}
|
||||||
height: 68px;
|
}
|
||||||
border-radius: 100%;
|
|
||||||
box-shadow: 4px 4px 8px rgba(68, 68, 68, 0.3);
|
.email-link:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
|
||||||
|
& .email-icon path {
|
||||||
|
fill: var(--main-pink-500);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-hover-effect {
|
||||||
|
transition: all 0.1s ease;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
scale: 1.1;
|
scale: 1.03;
|
||||||
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 {
|
.importantButton-hover-animation:hover {
|
||||||
background-color: #25d366;
|
animation: heartBeat 1.2s infinite;
|
||||||
|
|
||||||
& .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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
78
src/styles/globalAnimations.css
Normal file
78
src/styles/globalAnimations.css
Normal file
@@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,13 +1,11 @@
|
|||||||
.homepage {
|
.homepage {
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: hidden;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 120px;
|
gap: 120px;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|
||||||
@media (max-width: 1023px) {
|
@media (max-width: 1023px) {
|
||||||
overflow-y: hidden;
|
overflow-y: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
@@ -63,6 +61,8 @@
|
|||||||
.offer-card {
|
.offer-card {
|
||||||
border: var(--main-border);
|
border: var(--main-border);
|
||||||
border-radius: var(--space-lg-24px);
|
border-radius: var(--space-lg-24px);
|
||||||
|
background-color: var(--offercard-bgcolor);
|
||||||
|
box-shadow: 4px 4px 8px rgba(68, 68, 68, 0.3);
|
||||||
|
|
||||||
height: 300px;
|
height: 300px;
|
||||||
padding: var(--padding-3xl-64px);
|
padding: var(--padding-3xl-64px);
|
||||||
@@ -71,6 +71,15 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
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) {
|
@media (max-width: 1023px) {
|
||||||
height: auto;
|
height: auto;
|
||||||
padding: var(--padding-2xl-48px);
|
padding: var(--padding-2xl-48px);
|
||||||
@@ -559,3 +568,37 @@
|
|||||||
border: 2px solid red;
|
border: 2px solid red;
|
||||||
border-radius: var(--space-md-16px);
|
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%);
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
.pricing-page {
|
.pricing-page {
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow-x: hidden;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 140px;
|
gap: 140px;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
@@ -33,6 +32,9 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--space-sm-8px);
|
gap: var(--space-sm-8px);
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
|
||||||
|
animation: fadeAndMoveFromLeft both;
|
||||||
|
animation-timeline: view(50% 20%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pricingcards {
|
.pricingcards {
|
||||||
@@ -40,23 +42,73 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
gap: var(--space-lg-24px);
|
gap: var(--space-lg-24px);
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1023px) {
|
@media (max-width: 1023px) {
|
||||||
.pricingcards {
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--space-lg-24px);
|
gap: var(--space-lg-24px);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.pricingcards .advanced-plan {
|
.basic-plan {
|
||||||
order: 1;
|
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 {
|
@media (max-width: 1023px) {
|
||||||
order: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricingcards .basic-plan {
|
|
||||||
order: 3;
|
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%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user