[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

@@ -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); }
+}
+

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); }
+}
+

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(
+                # 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.3))",
+                        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",