diff --git a/package-lock.json b/package-lock.json index 3c4cc17..ee22547 100644 --- 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", diff --git a/package.json b/package.json index dbb2b48..b9d8288 100644 --- 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" } -} \ No newline at end of file +} diff --git a/src/assets/imgs/img-preview.svg b/src/assets/imgs/img-preview.svg deleted file mode 100644 index 8d93eaa..0000000 --- a/src/assets/imgs/img-preview.svg +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/assets/imgs/n-naliia-rosada-fondo.webp b/src/assets/imgs/n-naliia-rosada-fondo.webp new file mode 100644 index 0000000..e10e34f Binary files /dev/null and b/src/assets/imgs/n-naliia-rosada-fondo.webp differ diff --git a/src/components/InitialSection.astro b/src/components/InitialSection.astro index a567ee4..d2c8474 100644 --- a/src/components/InitialSection.astro +++ b/src/components/InitialSection.astro @@ -57,9 +57,11 @@ const { { buttonText && (
- + + +
) } @@ -70,6 +72,32 @@ const { diff --git a/src/components/PlanDetailsTable.astro b/src/components/PlanDetailsTable.astro index c8cfb43..4f0106a 100644 --- a/src/components/PlanDetailsTable.astro +++ b/src/components/PlanDetailsTable.astro @@ -1,5 +1,11 @@ --- +// imports +// types + +// props + +// logic, variables, functions, etc. --- @@ -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; diff --git a/src/components/PricingCard.astro b/src/components/PricingCard.astro index 0dea7a5..01dea19 100644 --- a/src/components/PricingCard.astro +++ b/src/components/PricingCard.astro @@ -47,7 +47,9 @@ const { - + diff --git a/src/pages/contact.astro b/src/pages/contact.astro index bf6d29d..0c6e8ee 100644 --- a/src/pages/contact.astro +++ b/src/pages/contact.astro @@ -40,12 +40,13 @@ import "../styles/contactpage.css";
- + - + - +
diff --git a/src/pages/documentation.astro b/src/pages/documentation.astro index e8338fc..c5502f3 100644 --- a/src/pages/documentation.astro +++ b/src/pages/documentation.astro @@ -29,7 +29,7 @@ const videosList = Object.keys(videoFiles).map((key) => {
-

+

Aprende cómo funciona Naliia y resuelve cualquier duda que tengas

@@ -43,27 +43,6 @@ const videosList = Object.keys(videoFiles).map((key) => { class="search-input" required /> - - @@ -82,7 +61,7 @@ const videosList = Object.keys(videoFiles).map((key) => { - + Quiero obtener uno de los planes

diff --git a/src/styles/contactpage.css b/src/styles/contactpage.css index 2812ce7..2698869 100644 --- 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); diff --git a/src/styles/documentation.css b/src/styles/documentation.css index 704f20c..bdbc02c 100644 --- 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; } diff --git a/src/styles/global.css b/src/styles/global.css index e70365c..454485e 100644 --- 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; } diff --git a/src/styles/globalAnimations.css b/src/styles/globalAnimations.css new file mode 100644 index 0000000..8b5e6b1 --- /dev/null +++ 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); + } +} diff --git a/src/styles/index.css b/src/styles/index.css index 85a7b97..13718a1 100644 --- 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%); +} diff --git a/src/styles/pricingPage.css b/src/styles/pricingPage.css index bf68ca0..6a33cf1 100644 --- 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%); } }