feat: Enhanced WordPress cloud section with layered floating design using hero SVGs

assets/hero-person.svg

@@ -54,3 +54,4 @@
   <!-- Background circle -->
   <circle cx="450" cy="200" r="100" fill="#D1FAE5" opacity="0.3"/>
 </svg>
+

assets/hero-shield.svg

@@ -17,3 +17,4 @@
   <path d="M90 130 L110 160 L165 100" 
         stroke="#10B981" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
 </svg>
+

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(
+                            width="480px",
-                                src="https://illustrations.popsy.co/violet/cloud-hosting.svg",
+                            height="480px",
-                                width="450px",
+                            background="radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 70%)",
-                                height="auto",
+                            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="2px solid rgba(245, 158, 11, 0.4)",
-                            border_radius="32px",
+                            border_radius="15px",
-                            box_shadow="0 25px 80px rgba(245, 158, 11, 0.4)",
+                            backdrop_filter="blur(10px)",
-                            _hover={"transform": "scale(1.05) rotate(2deg)", "box_shadow": "0 30px 100px rgba(245, 158, 11, 0.6)"},
+                            box_shadow="0 10px 40px rgba(245, 158, 11, 0.3)",
-                            transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
+                            style={"animation": "floatSlow 7s ease-in-out infinite reverse"},
                         ),
-                        rx.hstack(
+                        # Floating card 3 - bottom center with cloud icon
-                            rx.vstack(
+                        rx.box(
-                                rx.text("99.9%", font_size="36px", font_weight="900", color="#F59E0B", line_height="1"),
+                            rx.hstack(
-                                rx.text("آپتایم", font_size="14px", color="#94A3B8", font_weight="600"),
+                                rx.icon("cloud", size=22, color="#6DD7E5"),
-                                align="center",
+                                rx.text("کلود اختصاصی", font_size="14px", font_weight="800", color="white"),
-                                padding="24px",
-                                background="rgba(30, 30, 50, 0.8)",
-                                border="2px solid rgba(245, 158, 11, 0.3)",
-                                border_radius="20px",
                                 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(
+                            position="absolute",
-                                rx.text("10x", font_size="36px", font_weight="900", color="#4DB8C4", line_height="1"),
+                            bottom="0px",
-                                rx.text("سریع‌تر", font_size="14px", color="#94A3B8", font_weight="600"),
+                            left="50%",
-                                align="center",
+                            transform="translateX(-50%)",
-                                padding="24px",
+                            padding="14px 24px",
-                                background="rgba(30, 30, 50, 0.8)",
+                            background="linear-gradient(135deg, rgba(109, 215, 229, 0.15), rgba(124, 227, 242, 0.1))",
-                                border="2px solid rgba(77, 184, 196, 0.3)",
+                            border="2px solid rgba(109, 215, 229, 0.4)",
-                                border_radius="20px",
+                            border_radius="14px",
-                                spacing="2",
+                            backdrop_filter="blur(10px)",
-                            ),
+                            box_shadow="0 10px 40px rgba(109, 215, 229, 0.3)",
-                            spacing="5",
+                            style={"animation": "floatSlow 8s ease-in-out 1s infinite"},
-                            margin_top="32px",
                         ),
-                        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(),