From 814e5302558007ff3fd5671cbd33659eb156a1c6 Mon Sep 17 00:00:00 2001 From: "Ehsan.Asadi" Date: Fri, 26 Dec 2025 17:33:25 +0330 Subject: [PATCH] feat: Enhanced WordPress cloud section with layered floating design using hero SVGs --- assets/hero-person.svg | 1 + assets/hero-shield.svg | 1 + src/presentation/web/pages/landing/index.py | 135 +++++++++++++------- 3 files changed, 94 insertions(+), 43 deletions(-) diff --git a/assets/hero-person.svg b/assets/hero-person.svg index 1e47b87..587f62b 100644 --- a/assets/hero-person.svg +++ b/assets/hero-person.svg @@ -54,3 +54,4 @@ + diff --git a/assets/hero-shield.svg b/assets/hero-shield.svg index 5217392..05b3484 100644 --- a/assets/hero-shield.svg +++ b/assets/hero-shield.svg @@ -17,3 +17,4 @@ + diff --git a/src/presentation/web/pages/landing/index.py b/src/presentation/web/pages/landing/index.py index f4f6be9..7df6a11 100644 --- a/src/presentation/web/pages/landing/index.py +++ b/src/presentation/web/pages/landing/index.py @@ -505,58 +505,108 @@ def wordpress_cloud_highlight() -> rx.Component: width="100%", ), rx.box( - rx.vstack( + # Layered illustration with floating elements + rx.box( + # Background glow layer rx.box( - rx.image( - src="https://illustrations.popsy.co/violet/cloud-hosting.svg", - width="450px", - height="auto", + width="480px", + height="480px", + background="radial-gradient(circle, rgba(245, 158, 11, 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 left with security icon + rx.box( + rx.vstack( + rx.icon("shield-check", size=28, color="#10B981"), + rx.text("امن", font_size="16px", font_weight="800", color="white"), + spacing="2", + align="center", ), - padding="40px", + position="absolute", + top="-10px", + left="-20px", + padding="16px 20px", + background="linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.1))", + border="2px solid rgba(16, 185, 129, 0.4)", + border_radius="16px", + 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 - right middle with speed icon + rx.box( + rx.vstack( + rx.icon("zap", size=26, color="#F59E0B"), + rx.text("سریع", font_size="15px", font_weight="800", color="white"), + spacing="2", + align="center", + ), + position="absolute", + top="35%", + right="-30px", + padding="15px 18px", background="linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 146, 60, 0.1))", - border="3px solid rgba(245, 158, 11, 0.3)", - border_radius="32px", - box_shadow="0 25px 80px rgba(245, 158, 11, 0.4)", - _hover={"transform": "scale(1.05) rotate(2deg)", "box_shadow": "0 30px 100px rgba(245, 158, 11, 0.6)"}, - transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)", + border="2px solid rgba(245, 158, 11, 0.4)", + border_radius="15px", + backdrop_filter="blur(10px)", + box_shadow="0 10px 40px rgba(245, 158, 11, 0.3)", + style={"animation": "floatSlow 7s ease-in-out infinite reverse"}, ), - rx.hstack( - rx.vstack( - rx.text("99.9%", font_size="36px", font_weight="900", color="#F59E0B", line_height="1"), - rx.text("آپتایم", font_size="14px", color="#94A3B8", font_weight="600"), - align="center", - padding="24px", - background="rgba(30, 30, 50, 0.8)", - border="2px solid rgba(245, 158, 11, 0.3)", - border_radius="20px", + # Floating card 3 - bottom center with cloud icon + rx.box( + rx.hstack( + rx.icon("cloud", size=22, color="#6DD7E5"), + rx.text("کلود اختصاصی", font_size="14px", font_weight="800", color="white"), spacing="2", - ), - rx.vstack( - rx.text("24/7", font_size="36px", font_weight="900", color="#10B981", line_height="1"), - rx.text("پشتیبانی", font_size="14px", color="#94A3B8", font_weight="600"), align="center", - padding="24px", - background="rgba(30, 30, 50, 0.8)", - border="2px solid rgba(16, 185, 129, 0.3)", - border_radius="20px", - spacing="2", ), - rx.vstack( - rx.text("10x", font_size="36px", font_weight="900", color="#4DB8C4", line_height="1"), - rx.text("سریع‌تر", font_size="14px", color="#94A3B8", font_weight="600"), - align="center", - padding="24px", - background="rgba(30, 30, 50, 0.8)", - border="2px solid rgba(77, 184, 196, 0.3)", - border_radius="20px", - spacing="2", - ), - spacing="5", - margin_top="32px", + position="absolute", + bottom="0px", + left="50%", + transform="translateX(-50%)", + padding="14px 24px", + background="linear-gradient(135deg, rgba(109, 215, 229, 0.15), rgba(124, 227, 242, 0.1))", + border="2px solid rgba(109, 215, 229, 0.4)", + border_radius="14px", + backdrop_filter="blur(10px)", + box_shadow="0 10px 40px rgba(109, 215, 229, 0.3)", + style={"animation": "floatSlow 8s ease-in-out 1s infinite"}, ), - spacing="6", + # Main illustration + rx.box( + # Background shield decoration + rx.image( + src="/hero-shield.svg", + width="240px", + height="auto", + position="absolute", + top="-40px", + left="60px", + opacity="0.15", + filter="blur(2px)", + style={"animation": "rotate 40s linear infinite"}, + ), + # Main person image + rx.image( + src="/hero-person.svg", + width="420px", + height="auto", + filter="drop-shadow(0 20px 60px rgba(245, 158, 11, 0.4))", + style={"animation": "scaleFloat 5s ease-in-out infinite"}, + ), + position="relative", + padding="40px", + ), + position="relative", ), display=["none", "none", "none", "block"], + width="50%", ), spacing="9", align="center", @@ -1296,7 +1346,6 @@ def index() -> rx.Component: hero(), wordpress_cloud_highlight(), services_section(), - about_section(), # pricing_section(), # server_comparison(),