From 9ad6ba6449b5169a5870ef317c0cd23cc17c76c5 Mon Sep 17 00:00:00 2001 From: "Ehsan.Asadi" Date: Fri, 26 Dec 2025 16:31:14 +0330 Subject: [PATCH] [DESIGN-003] Add layered hero section with floating elements (feat) - Added animated background gradient layers (3 floating blobs) - Created floating stats cards around main illustration - Implemented smooth animations (floatSlow, scaleFloat) - Added depth and parallax effects - Improved visual hierarchy with z-index layering - Enhanced dark theme compatibility - All animations are smooth and GPU-accelerated Inspired by modern cloud hosting landing pages --- assets/custom.css | 17 +++ src/presentation/web/assets/custom.css | 17 +++ src/presentation/web/pages/landing/index.py | 140 +++++++++++++++++++- 3 files changed, 169 insertions(+), 5 deletions(-) diff --git a/assets/custom.css b/assets/custom.css index 41585a3..16396e5 100644 --- a/assets/custom.css +++ b/assets/custom.css @@ -29,3 +29,20 @@ body { 50% { transform: translateY(-20px); } } +@keyframes floatSlow { + 0%, 100% { transform: translateY(0px) translateX(0px); } + 25% { transform: translateY(-15px) translateX(10px); } + 50% { transform: translateY(-30px) translateX(0px); } + 75% { transform: translateY(-15px) translateX(-10px); } +} + +@keyframes rotate { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +@keyframes scaleFloat { + 0%, 100% { transform: scale(1) translateY(0px); } + 50% { transform: scale(1.05) translateY(-15px); } +} + diff --git a/src/presentation/web/assets/custom.css b/src/presentation/web/assets/custom.css index 41585a3..16396e5 100644 --- a/src/presentation/web/assets/custom.css +++ b/src/presentation/web/assets/custom.css @@ -29,3 +29,20 @@ body { 50% { transform: translateY(-20px); } } +@keyframes floatSlow { + 0%, 100% { transform: translateY(0px) translateX(0px); } + 25% { transform: translateY(-15px) translateX(10px); } + 50% { transform: translateY(-30px) translateX(0px); } + 75% { transform: translateY(-15px) translateX(-10px); } +} + +@keyframes rotate { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +@keyframes scaleFloat { + 0%, 100% { transform: scale(1) translateY(0px); } + 50% { transform: scale(1.05) translateY(-15px); } +} + diff --git a/src/presentation/web/pages/landing/index.py b/src/presentation/web/pages/landing/index.py index bd78924..1ca2ba5 100644 --- a/src/presentation/web/pages/landing/index.py +++ b/src/presentation/web/pages/landing/index.py @@ -66,6 +66,48 @@ def navbar() -> rx.Component: def hero() -> rx.Component: return rx.box( + # Background decorative layers + rx.box( + rx.box( + width="600px", + height="600px", + background="radial-gradient(circle, rgba(27, 75, 127, 0.3) 0%, transparent 70%)", + position="absolute", + top="-200px", + left="-100px", + border_radius="50%", + filter="blur(100px)", + style={"animation": "floatSlow 20s ease-in-out infinite"}, + ), + rx.box( + width="500px", + height="500px", + background="radial-gradient(circle, rgba(77, 184, 196, 0.25) 0%, transparent 70%)", + position="absolute", + top="100px", + right="-150px", + border_radius="50%", + filter="blur(80px)", + style={"animation": "floatSlow 18s ease-in-out infinite reverse"}, + ), + rx.box( + width="400px", + height="400px", + background="radial-gradient(circle, rgba(109, 215, 229, 0.2) 0%, transparent 70%)", + position="absolute", + bottom="-100px", + right="20%", + border_radius="50%", + filter="blur(90px)", + style={"animation": "floatSlow 22s ease-in-out infinite"}, + ), + position="absolute", + width="100%", + height="100%", + overflow="hidden", + z_index="0", + ), + # Main content with floating cards rx.hstack( rx.vstack( rx.badge( @@ -201,15 +243,103 @@ def hero() -> rx.Component: spacing="8", align="start", width="100%", + position="relative", + z_index="1", ), rx.box( - rx.image( - src="https://illustrations.popsy.co/violet/web-design.svg", - width="600px", - height="auto", - filter="drop-shadow(0 20px 60px rgba(27, 75, 127, 0.3))", + # Main illustration with layered effects + rx.box( + # Background glow layer + rx.box( + width="550px", + height="550px", + background="radial-gradient(circle, rgba(77, 184, 196, 0.15) 0%, transparent 70%)", + position="absolute", + top="50%", + left="50%", + transform="translate(-50%, -50%)", + border_radius="50%", + filter="blur(60px)", + style={"animation": "pulse 4s ease-in-out infinite"}, + ), + # Floating card 1 - top right + rx.box( + rx.vstack( + rx.icon("shield-check", size=28, color="#10B981"), + rx.text("99.9%", font_size="24px", font_weight="900", color="white"), + rx.text("Uptime", font_size="13px", color="#94A3B8", font_weight="600"), + spacing="2", + align="center", + ), + position="absolute", + top="-20px", + right="-30px", + padding="20px 28px", + background="linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.1))", + border="2px solid rgba(16, 185, 129, 0.3)", + 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"}, + ), + # Floating card 2 - left middle + rx.box( + rx.vstack( + rx.icon("zap", size=26, color="#F59E0B"), + rx.text("10x", font_size="22px", font_weight="900", color="white"), + rx.text("سریع‌تر", font_size="12px", color="#94A3B8", font_weight="600"), + spacing="2", + align="center", + ), + position="absolute", + top="40%", + left="-40px", + padding="18px 24px", + background="linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 146, 60, 0.1))", + border="2px solid rgba(245, 158, 11, 0.3)", + 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"}, + ), + # Floating card 3 - bottom center + rx.box( + rx.hstack( + rx.icon("users", size=24, color="#6DD7E5"), + rx.vstack( + rx.text("1000+", font_size="20px", font_weight="900", color="white"), + rx.text("مشتری راضی", font_size="11px", color="#94A3B8", font_weight="600"), + spacing="0", + align="start", + ), + spacing="3", + align="center", + ), + position="absolute", + bottom="-10px", + left="50%", + transform="translateX(-50%)", + padding="16px 28px", + background="linear-gradient(135deg, rgba(109, 215, 229, 0.15), rgba(124, 227, 242, 0.1))", + border="2px solid rgba(109, 215, 229, 0.3)", + 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"}, + ), + # Main image + rx.image( + src="https://illustrations.popsy.co/violet/web-design.svg", + width="600px", + height="auto", + filter="drop-shadow(0 20px 60px rgba(27, 75, 127, 0.4))", + style={"animation": "scaleFloat 5s ease-in-out infinite"}, + ), + position="relative", ), display=["none", "none", "none", "block"], + position="relative", + z_index="1", ), spacing="9", align="center",