From 1dab36d4efde9fadfc66026640a5792fe07bcf82 Mon Sep 17 00:00:00 2001 From: "Ehsan.Asadi" Date: Fri, 26 Dec 2025 16:40:08 +0330 Subject: [PATCH] [DESIGN-004] Add staggered layered animations to hero section (feat) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Implemented sequential fade-in animations for all hero elements - Each element appears with timed delay (0.2s → 1.3s) - Added fadeInUp, fadeInScale, slideInRight animations - Main illustration fades in at 0.3s - Floating cards appear sequentially (0.9s, 1.1s, 1.3s) - Text and buttons animate from bottom to top - Smooth professional loading experience - Mimics layered reveal seen in premium themes Animation Timeline: - 0.2s: Coming soon badge - 0.3s: Main illustration - 0.4s: Heading - 0.6s: Description - 0.8s: Primary button - 1.0s: Secondary button - 0.9s-1.3s: Floating stats cards --- assets/custom.css | 33 +++++++++++++++++++++ src/presentation/web/assets/custom.css | 33 +++++++++++++++++++++ src/presentation/web/pages/landing/index.py | 14 +++++---- 3 files changed, 75 insertions(+), 5 deletions(-) diff --git a/assets/custom.css b/assets/custom.css index 16396e5..6907d9c 100644 --- a/assets/custom.css +++ b/assets/custom.css @@ -46,3 +46,36 @@ body { 50% { transform: scale(1.05) translateY(-15px); } } +@keyframes fadeInUp { + 0% { + opacity: 0; + transform: translateY(60px) scale(0.9); + } + 100% { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +@keyframes fadeInScale { + 0% { + opacity: 0; + transform: scale(0.8); + } + 100% { + opacity: 1; + transform: scale(1); + } +} + +@keyframes slideInRight { + 0% { + opacity: 0; + transform: translateX(100px); + } + 100% { + opacity: 1; + transform: translateX(0); + } +} + diff --git a/src/presentation/web/assets/custom.css b/src/presentation/web/assets/custom.css index 16396e5..6907d9c 100644 --- a/src/presentation/web/assets/custom.css +++ b/src/presentation/web/assets/custom.css @@ -46,3 +46,36 @@ body { 50% { transform: scale(1.05) translateY(-15px); } } +@keyframes fadeInUp { + 0% { + opacity: 0; + transform: translateY(60px) scale(0.9); + } + 100% { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +@keyframes fadeInScale { + 0% { + opacity: 0; + transform: scale(0.8); + } + 100% { + opacity: 1; + transform: scale(1); + } +} + +@keyframes slideInRight { + 0% { + opacity: 0; + transform: translateX(100px); + } + 100% { + opacity: 1; + transform: translateX(0); + } +} + diff --git a/src/presentation/web/pages/landing/index.py b/src/presentation/web/pages/landing/index.py index 1ca2ba5..104f2ea 100644 --- a/src/presentation/web/pages/landing/index.py +++ b/src/presentation/web/pages/landing/index.py @@ -126,6 +126,7 @@ def hero() -> rx.Component: box_shadow="0 12px 50px rgba(251, 191, 36, 0.6), 0 0 80px rgba(251, 191, 36, 0.3)", margin_bottom="32px", font_size="17px", + style={"animation": "fadeInUp 0.8s ease-out 0.2s backwards"}, ), # rx.badge( # rx.hstack( @@ -158,6 +159,7 @@ def hero() -> rx.Component: line_height="1.15", letter_spacing="-0.04em", margin_top="16px", + style={"animation": "fadeInUp 0.8s ease-out 0.4s backwards"}, ), rx.text( "اولین و تخصصی‌ترین ارائه‌دهنده کلود اختصاصی وردپرس در ایران.", @@ -169,6 +171,7 @@ def hero() -> rx.Component: font_weight="500", margin_top="24px", margin_bottom="8px", + style={"animation": "fadeInUp 0.8s ease-out 0.6s backwards"}, ), rx.hstack( rx.button( @@ -189,7 +192,7 @@ def hero() -> rx.Component: "box_shadow": "0 25px 70px rgba(27, 75, 127, 0.9), 0 0 120px rgba(109, 215, 229, 0.6)" }, transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)", - style={"animation": "glow 4s ease-in-out infinite"}, + style={"animation": "glow 4s ease-in-out infinite, fadeInUp 0.8s ease-out 0.8s backwards"}, ), rx.button( rx.hstack( @@ -214,6 +217,7 @@ def hero() -> rx.Component: "box_shadow": "0 20px 60px rgba(109, 215, 229, 0.5)" }, transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)", + style={"animation": "fadeInUp 0.8s ease-out 1s backwards"}, ), spacing="6", margin_top="56px", @@ -280,7 +284,7 @@ def hero() -> rx.Component: border_radius="20px", backdrop_filter="blur(10px)", box_shadow="0 10px 40px rgba(16, 185, 129, 0.3)", - style={"animation": "floatSlow 6s ease-in-out infinite"}, + style={"animation": "fadeInScale 0.6s ease-out 0.9s backwards, floatSlow 6s ease-in-out 1.5s infinite"}, ), # Floating card 2 - left middle rx.box( @@ -300,7 +304,7 @@ def hero() -> rx.Component: border_radius="18px", backdrop_filter="blur(10px)", box_shadow="0 10px 40px rgba(245, 158, 11, 0.3)", - style={"animation": "floatSlow 7s ease-in-out infinite reverse"}, + style={"animation": "fadeInScale 0.6s ease-out 1.1s backwards, floatSlow 7s ease-in-out 1.7s infinite reverse"}, ), # Floating card 3 - bottom center rx.box( @@ -325,7 +329,7 @@ def hero() -> rx.Component: border_radius="16px", backdrop_filter="blur(10px)", box_shadow="0 10px 40px rgba(109, 215, 229, 0.3)", - style={"animation": "floatSlow 8s ease-in-out infinite"}, + style={"animation": "fadeInScale 0.6s ease-out 1.3s backwards, floatSlow 8s ease-in-out 1.9s infinite"}, ), # Main image rx.image( @@ -333,7 +337,7 @@ def hero() -> rx.Component: width="600px", height="auto", filter="drop-shadow(0 20px 60px rgba(27, 75, 127, 0.4))", - style={"animation": "scaleFloat 5s ease-in-out infinite"}, + style={"animation": "fadeInScale 1s ease-out 0.3s backwards, scaleFloat 5s ease-in-out 1.3s infinite"}, ), position="relative", ),