From c6a7e8158254038c97850ff7300f2ae6ddb5b38a Mon Sep 17 00:00:00 2001
From: "Ehsan.Asadi" <ehsan.asadi@zoodfood.com>
Date: Fri, 26 Dec 2025 17:48:45 +0330
Subject: [PATCH] refactor: Simplified WordPress cloud section with single
 floating hero-person image

---
 src/presentation/web/pages/landing/index.py | 102 ++------------------
 1 file changed, 10 insertions(+), 92 deletions(-)

diff --git a/src/presentation/web/pages/landing/index.py b/src/presentation/web/pages/landing/index.py
index 7df6a11..90cff3b 100644
--- a/src/presentation/web/pages/landing/index.py
+++ b/src/presentation/web/pages/landing/index.py
@@ -505,105 +505,23 @@ def wordpress_cloud_highlight() -> rx.Component:
                     width="100%",
                 ),
                 rx.box(
-                    # Layered illustration with floating elements
-                    rx.box(
-                        # Background glow layer
+                    rx.vstack(
                         rx.box(
-                            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",
-                            ),
-                            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="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"},
-                        ),
-                        # 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",
-                                align="center",
-                            ),
-                            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"},
-                        ),
-                        # 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",
+                                width="450px",
                                 height="auto",
-                                filter="drop-shadow(0 20px 60px rgba(245, 158, 11, 0.4))",
-                                style={"animation": "scaleFloat 5s ease-in-out infinite"},
+                                style={"animation": "float 6s ease-in-out infinite"},
                             ),
-                            position="relative",
                             padding="40px",
+                            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)",
                         ),
-                        position="relative",
+                        spacing="6",
                     ),
                     display=["none", "none", "none", "block"],
                     width="50%",