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(),