diff --git a/src/presentation/web/pages/landing/index.py b/src/presentation/web/pages/landing/index.py
index 1c813c5..203b8a2 100644
--- a/src/presentation/web/pages/landing/index.py
+++ b/src/presentation/web/pages/landing/index.py
@@ -2,10 +2,15 @@ import reflex as rx
 
 class State(rx.State):
     form_submitted: bool = False
+    domain_query: str = ""
     
     def handle_submit(self):
         self.form_submitted = True
         return rx.toast.success("پیام شما با موفقیت ارسال شد!")
+    
+    def search_domain(self):
+        if self.domain_query:
+            return rx.toast.info(f"جستجوی دامنه: {self.domain_query}")
 
 def navbar() -> rx.Component:
     return rx.box(
@@ -24,10 +29,6 @@ def navbar() -> rx.Component:
             rx.spacer(),
             rx.hstack(
                 rx.link("خدمات", href="#services", color="#E2E8F0", font_weight="600", font_size="16px", _hover={"color": "#6DD7E5", "transform": "translateY(-2px)"}, transition="all 0.2s"),
-                # rx.link("قیمت‌ها", href="#pricing", color="#E2E8F0", font_weight="600", font_size="16px", _hover={"color": "#6DD7E5", "transform": "translateY(-2px)"}, transition="all 0.2s"),
-                # rx.link("سرورها", href="#servers", color="#E2E8F0", font_weight="600", font_size="16px", _hover={"color": "#6DD7E5", "transform": "translateY(-2px)"}, transition="all 0.2s"),
-                # rx.link("نظرات", href="#testimonials", color="#E2E8F0", font_weight="600", font_size="16px", _hover={"color": "#6DD7E5", "transform": "translateY(-2px)"}, transition="all 0.2s"),
-                # rx.link("تماس", href="#contact", color="#E2E8F0", font_weight="600", font_size="16px", _hover={"color": "#6DD7E5", "transform": "translateY(-2px)"}, transition="all 0.2s"),
                 rx.button(
                     rx.hstack(
                         rx.text("شروع رایگان", font_weight="800"),
@@ -64,10 +65,181 @@ def navbar() -> rx.Component:
         box_shadow="0 8px 32px rgba(0, 0, 0, 0.4)",
     )
 
+def domain_search() -> rx.Component:
+    return rx.box(
+        rx.vstack(
+            rx.text(
+                "دامنه خود را جستجو کنید",
+                font_size="20px",
+                font_weight="700",
+                color="#FFFFFF",
+                margin_bottom="16px",
+            ),
+            rx.box(
+                rx.hstack(
+                    rx.input(
+                        placeholder="نام دامنه خود را وارد کنید...",
+                        value=State.domain_query,
+                        on_change=State.set_domain_query,
+                        size="3",
+                        width="100%",
+                        border="none",
+                        background="transparent",
+                        color="#FFFFFF",
+                        font_size="16px",
+                        padding="20px",
+                        _placeholder={"color": "rgba(255, 255, 255, 0.5)"},
+                        _focus={"outline": "none"},
+                    ),
+                    rx.button(
+                        rx.hstack(
+                            rx.icon("search", size=20),
+                            rx.text("جستجو", font_weight="700", font_size="16px"),
+                            spacing="2",
+                        ),
+                        on_click=State.search_domain,
+                        size="3",
+                        background="linear-gradient(135deg, #4DB8C4, #6DD7E5)",
+                        color="#FFFFFF",
+                        padding="20px 32px",
+                        border_radius="12px",
+                        _hover={"transform": "scale(1.05)", "cursor": "pointer"},
+                        transition="all 0.3s ease",
+                    ),
+                    spacing="4",
+                    width="100%",
+                    align="center",
+                ),
+                background="rgba(27, 75, 127, 0.15)",
+                backdrop_filter="blur(20px)",
+                border="1px solid rgba(77, 184, 196, 0.3)",
+                border_radius="16px",
+                padding="8px",
+                box_shadow="0 8px 32px rgba(0, 0, 0, 0.3)",
+                width="100%",
+                max_width="550px",
+            ),
+            rx.hstack(
+                rx.box(
+                    rx.text(".ir", font_weight="600", color="#6DD7E5", font_size="14px"),
+                    padding="8px 16px",
+                    background="rgba(77, 184, 196, 0.1)",
+                    border="1px solid rgba(77, 184, 196, 0.3)",
+                    border_radius="10px",
+                    _hover={"background": "rgba(77, 184, 196, 0.2)", "cursor": "pointer"},
+                    transition="all 0.3s ease",
+                ),
+                rx.box(
+                    rx.text(".com", font_weight="600", color="#6DD7E5", font_size="14px"),
+                    padding="8px 16px",
+                    background="rgba(77, 184, 196, 0.1)",
+                    border="1px solid rgba(77, 184, 196, 0.3)",
+                    border_radius="10px",
+                    _hover={"background": "rgba(77, 184, 196, 0.2)", "cursor": "pointer"},
+                    transition="all 0.3s ease",
+                ),
+                rx.box(
+                    rx.text(".net", font_weight="600", color="#6DD7E5", font_size="14px"),
+                    padding="8px 16px",
+                    background="rgba(77, 184, 196, 0.1)",
+                    border="1px solid rgba(77, 184, 196, 0.3)",
+                    border_radius="10px",
+                    _hover={"background": "rgba(77, 184, 196, 0.2)", "cursor": "pointer"},
+                    transition="all 0.3s ease",
+                ),
+                rx.box(
+                    rx.text(".org", font_weight="600", color="#6DD7E5", font_size="14px"),
+                    padding="8px 16px",
+                    background="rgba(77, 184, 196, 0.1)",
+                    border="1px solid rgba(77, 184, 196, 0.3)",
+                    border_radius="10px",
+                    _hover={"background": "rgba(77, 184, 196, 0.2)", "cursor": "pointer"},
+                    transition="all 0.3s ease",
+                ),
+                rx.box(
+                    rx.text(".io", font_weight="600", color="#6DD7E5", font_size="14px"),
+                    padding="8px 16px",
+                    background="rgba(77, 184, 196, 0.1)",
+                    border="1px solid rgba(77, 184, 196, 0.3)",
+                    border_radius="10px",
+                    _hover={"background": "rgba(77, 184, 196, 0.2)", "cursor": "pointer"},
+                    transition="all 0.3s ease",
+                ),
+                spacing="4",
+                margin_top="16px",
+                wrap="wrap",
+                justify="start",
+            ),
+            align="start",
+            width="100%",
+        ),
+        width="100%",
+        max_width="550px",
+        margin_top="32px",
+        style={"animation": "fadeInUp 0.8s ease-out 1.2s backwards"},
+    )
+
+binary_rain_script = """
+(function() {
+    function initBinaryRain() {
+        const canvas = document.getElementById('binary-rain-canvas');
+        if (!canvas) {
+            setTimeout(initBinaryRain, 100);
+            return;
+        }
+        
+        const ctx = canvas.getContext('2d');
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+
+        const fontSize = 14;
+        const columns = canvas.width / fontSize;
+        const drops = [];
+
+        for (let i = 0; i < columns; i++) {
+            drops[i] = 1;
+        }
+
+        function draw() {
+            ctx.fillStyle = 'rgba(10, 18, 35, 0.1)'; 
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            ctx.font = fontSize + 'px monospace';
+
+            for (let i = 0; i < drops.length; i++) {
+                const text = Math.random() > 0.5 ? '1' : '0';
+                ctx.fillStyle = Math.random() > 0.95 ? '#4DB8C4' : '#1B4B7F'; 
+                ctx.fillText(text, i * fontSize, drops[i] * fontSize);
+
+                if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
+                    drops[i] = 0;
+                }
+                drops[i]++;
+            }
+        }
+
+        setInterval(draw, 50);
+
+        window.addEventListener('resize', () => {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        });
+    }
+    
+    initBinaryRain();
+})();
+"""
+
+# No canvas script - using static elements instead
+
 def hero() -> rx.Component:
     return rx.box(
+        rx.script(binary_rain_script),
         # Background decorative layers
         rx.box(
+            rx.html(
+                '<canvas id="binary-rain-canvas" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.5; z-index: 0; pointer-events: none;"></canvas>'
+            ),
             rx.box(
                 width="600px",
                 height="600px",
@@ -108,270 +280,99 @@ def hero() -> rx.Component:
             z_index="0",
         ),
         # Main content with floating cards
-        rx.hstack(
-            rx.vstack(
-                rx.badge(
-                    rx.hstack(
-                        rx.icon("clock", size=20, color="#fbbf24"),
-                        rx.text("بزودی کنار شما خواهیم بود", font_weight="800", font_size="16px"),
-                        rx.icon("zap", size=20, color="#fbbf24"),
-                        spacing="3",
-                        align="center",
-                    ),
-                    variant="outline",
-                    padding="18px 42px",
-                    border_radius="full",
-                    background="linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(245, 158, 11, 0.2))",
-                    border="3px solid rgba(251, 191, 36, 0.7)",
-                    box_shadow="0 12px 50px rgba(251, 191, 36, 0.6), 0 0 80px rgba(251, 191, 36, 0.3)",
-                    margin_bottom="32px",
-                    font_size="17px",
-                    style={"animation": "fadeInUp 0.8s ease-out 0.2s backwards"},
-                ),
-                rx.heading(
-                    "میزبانی وب و زیرساخت ابری ",
-                    rx.el.span("حرفه‌ای", 
-                           style={
-                               "background": "linear-gradient(135deg, #4DB8C4, #6DD7E5, #7CE3F2)",
-                               "background-clip": "text",
-                               "-webkit-background-clip": "text", 
-                               "-webkit-text-fill-color": "transparent",
-                               "animation": "gradientShift 4s ease infinite",
-                               "background-size": "200% auto",
-                           }),
-                    size="9",
-                    font_weight="900",
-                    line_height="1.2",
-                    letter_spacing="-0.02em",
-                    margin_top="24px",
-                    color="#FFFFFF",
-                    style={"animation": "fadeInUp 0.8s ease-out 0.4s backwards"},
-                ),
-                rx.text(
-                    "اولین و تخصصی‌ترین ارائه‌دهنده کلود اختصاصی وردپرس در ایران.",
-                    rx.el.span(" مدیریت پیشرفته و هوشمند سایت‌های وردپرسی شما", style={"color": "#8B9EB8"}),
-                    color="#C7D2E8",
-                    font_size="20px",
-                    line_height="1.8",
-                    max_width="650px",
-                    font_weight="400",
-                    margin_top="28px",
-                    margin_bottom="16px",
-                    opacity="0.95",
-                    style={"animation": "fadeInUp 0.8s ease-out 0.6s backwards"},
-                ),
-                rx.hstack(
-                    rx.button(
+        rx.vstack(
+            rx.hstack(
+                rx.vstack(
+                    rx.badge(
                         rx.hstack(
-                            rx.icon("message-circle", size=20),
-                            rx.text("مشاوره رایگان", font_weight="700", font_size="17px"),
+                            rx.icon("clock", size=18, color="#fbbf24"),
+                            rx.text("بزودی کنار شما خواهیم بود", font_weight="700", font_size="15px"),
+                            rx.icon("zap", size=18, color="#fbbf24"),
                             spacing="2",
                             align="center",
                         ),
-                        size="4",
-                        background="linear-gradient(135deg, #4DB8C4, #6DD7E5)",
-                        color="#FFFFFF",
-                        border_radius="12px",
-                        padding="24px 48px",
-                        box_shadow="0 10px 35px rgba(77, 184, 196, 0.5), 0 0 50px rgba(109, 215, 229, 0.3)",
-                        _hover={
-                            "transform": "translateY(-4px)", 
-                            "box_shadow": "0 15px 50px rgba(77, 184, 196, 0.7), 0 0 70px rgba(109, 215, 229, 0.5)"
-                        },
-                        transition="all 0.3s ease",
-                        style={"animation": "fadeInUp 0.8s ease-out 0.8s backwards"},
-                    ),
-                    rx.button(
-                        rx.hstack(
-                            rx.icon("play", size=18),
-                            rx.text("مشاهده ویدیو", font_weight="700", font_size="17px"),
-                            spacing="2",
-                            align="center",
-                        ),
-                        size="4",
                         variant="outline",
-                        border="2px solid rgba(77, 184, 196, 0.5)",
-                        color="#6DD7E5",
-                        border_radius="12px",
-                        padding="24px 48px",
-                        background="rgba(77, 184, 196, 0.05)",
-                        backdrop_filter="blur(10px)",
-                        _hover={
-                            "background": "rgba(77, 184, 196, 0.15)", 
-                            "transform": "translateY(-4px)", 
-                            "border": "2px solid #6DD7E5"
-                        },
-                        transition="all 0.3s ease",
-                        style={"animation": "fadeInUp 0.8s ease-out 1s backwards"},
+                        padding="10px 24px",
+                        border_radius="full",
+                        background="linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(245, 158, 11, 0.25))",
+                        border="2px solid rgba(251, 191, 36, 0.8)",
+                        box_shadow="0 10px 40px rgba(251, 191, 36, 0.6), 0 0 60px rgba(251, 191, 36, 0.3)",
+                        margin_bottom="20px",
+                        style={"animation": "fadeInUp 0.8s ease-out 0.2s backwards, pulse 3s ease-in-out 1s infinite"},
                     ),
-                    spacing="6",
-                    margin_top="56px",
-                ),
-                # Domain Search Box - BluisHost inspired
-                rx.box(
-                    rx.vstack(
-                        rx.text(
-                            "دامنه خود را جستجو کنید",
-                            font_size="20px",
-                            font_weight="700",
-                            color="#FFFFFF",
-                            margin_bottom="16px",
-                        ),
-                        rx.box(
-                            rx.hstack(
-                                rx.input(
-                                    placeholder="نام دامنه خود را وارد کنید...",
-                                    size="3",
-                                    width="100%",
-                                    border="none",
-                                    background="transparent",
-                                    color="#FFFFFF",
-                                    font_size="16px",
-                                    padding="24px",
-                                    _placeholder={"color": "rgba(255, 255, 255, 0.5)"},
-                                    _focus={"outline": "none"},
-                                ),
-                                rx.button(
-                                    rx.hstack(
-                                        rx.icon("search", size=20),
-                                        rx.text("جستجو", font_weight="700"),
-                                        spacing="2",
-                                    ),
-                                    size="3",
-                                    background="linear-gradient(135deg, #4DB8C4, #6DD7E5)",
-                                    color="#FFFFFF",
-                                    padding="24px 36px",
-                                    border_radius="10px",
-                                    _hover={"transform": "scale(1.05)"},
-                                    transition="all 0.3s ease",
-                                ),
-                                spacing="0",
-                                width="100%",
-                                align="center",
-                            ),
-                            background="rgba(27, 75, 127, 0.15)",
-                            backdrop_filter="blur(20px)",
-                            border="1px solid rgba(77, 184, 196, 0.3)",
-                            border_radius="14px",
-                            padding="8px",
-                            box_shadow="0 8px 32px rgba(0, 0, 0, 0.3)",
-                        ),
-                        # Domain extensions
-                        rx.hstack(
-                            rx.box(
-                                rx.text(".ir", font_weight="600", color="#6DD7E5"),
-                                padding="8px 16px",
-                                background="rgba(77, 184, 196, 0.1)",
-                                border="1px solid rgba(77, 184, 196, 0.3)",
-                                border_radius="8px",
-                                _hover={"background": "rgba(77, 184, 196, 0.2)", "cursor": "pointer"},
-                                transition="all 0.3s ease",
-                            ),
-                            rx.box(
-                                rx.text(".com", font_weight="600", color="#6DD7E5"),
-                                padding="8px 16px",
-                                background="rgba(77, 184, 196, 0.1)",
-                                border="1px solid rgba(77, 184, 196, 0.3)",
-                                border_radius="8px",
-                                _hover={"background": "rgba(77, 184, 196, 0.2)", "cursor": "pointer"},
-                                transition="all 0.3s ease",
-                            ),
-                            rx.box(
-                                rx.text(".net", font_weight="600", color="#6DD7E5"),
-                                padding="8px 16px",
-                                background="rgba(77, 184, 196, 0.1)",
-                                border="1px solid rgba(77, 184, 196, 0.3)",
-                                border_radius="8px",
-                                _hover={"background": "rgba(77, 184, 196, 0.2)", "cursor": "pointer"},
-                                transition="all 0.3s ease",
-                            ),
-                            rx.box(
-                                rx.text(".org", font_weight="600", color="#6DD7E5"),
-                                padding="8px 16px",
-                                background="rgba(77, 184, 196, 0.1)",
-                                border="1px solid rgba(77, 184, 196, 0.3)",
-                                border_radius="8px",
-                                _hover={"background": "rgba(77, 184, 196, 0.2)", "cursor": "pointer"},
-                                transition="all 0.3s ease",
-                            ),
-                            rx.box(
-                                rx.text(".io", font_weight="600", color="#6DD7E5"),
-                                padding="8px 16px",
-                                background="rgba(77, 184, 196, 0.1)",
-                                border="1px solid rgba(77, 184, 196, 0.3)",
-                                border_radius="8px",
-                                _hover={"background": "rgba(77, 184, 196, 0.2)", "cursor": "pointer"},
-                                transition="all 0.3s ease",
-                            ),
-                            spacing="4",
-                            margin_top="16px",
-                            wrap="wrap",
-                        ),
-                        align="center",
+                    rx.heading(
+                        "میزبانی وب و زیرساخت ابری ",
+                        rx.el.span("حرفه‌ای", 
+                               style={
+                                   "background": "linear-gradient(135deg, #4DB8C4, #6DD7E5, #7CE3F2)",
+                                   "background-clip": "text",
+                                   "-webkit-background-clip": "text", 
+                                   "-webkit-text-fill-color": "transparent",
+                                   "animation": "gradientShift 4s ease infinite",
+                                   "background-size": "200% auto",
+                               }),
+                        size="8",
+                        font_weight="900",
+                        line_height="1.2",
+                        letter_spacing="-0.02em",
+                        color="#FFFFFF",
+                        style={"animation": "fadeInUp 0.8s ease-out 0.4s backwards"},
                     ),
-                    max_width="700px",
-                    margin_top="48px",
-                    style={"animation": "fadeInUp 0.8s ease-out 1.2s backwards"},
-                ),
-                rx.hstack(
-                    rx.hstack(
-                        rx.icon("check", size=18, color="#10B981"),
-                        rx.text("پشتیبانی 24/7", color="#CBD5E1", font_size="15px", font_weight="600"),
-                        spacing="2",
-                        align="center",
-                    ),
-                    rx.hstack(
-                        rx.icon("check", size=18, color="#10B981"),
-                        rx.text("امنیت بالا", color="#CBD5E1", font_size="15px", font_weight="600"),
-                        spacing="2",
-                        align="center",
-                    ),
-                    rx.hstack(
-                        rx.icon("check", size=18, color="#10B981"),
-                        rx.text("سرعت فوق‌العاده", color="#CBD5E1", font_size="15px", font_weight="600"),
-                        spacing="2",
-                        align="center",
+                    rx.text(
+                        "اولین و تخصصی‌ترین ارائه‌دهنده کلود اختصاصی وردپرس در ایران.",
+                        rx.el.span(" مدیریت پیشرفته و هوشمند سایت‌های وردپرسی شما", style={"color": "#8B9EB8"}),
+                        color="#C7D2E8",
+                        font_size="18px",
+                        line_height="1.8",
+                        max_width="650px",
+                        font_weight="400",
+                        margin_top="28px",
+                        margin_bottom="16px",
+                        opacity="0.95",
+                        style={"animation": "fadeInUp 0.8s ease-out 0.6s backwards"},
                     ),
+                    domain_search(),
                     spacing="8",
-                    margin_top="40px",
+                    align="start",
+                    width="100%",
+                    position="relative",
+                    z_index="1",
                 ),
-                spacing="8",
-                align="start",
-                width="100%",
-                position="relative",
-                z_index="1",
-            ),
-            rx.box(
                 rx.box(
-                    # Background glow
                     rx.box(
-                        width="500px",
-                        height="500px",
-                        background="radial-gradient(circle, rgba(77, 184, 196, 0.12) 0%, transparent 70%)",
-                        position="absolute",
-                        top="50%",
-                        left="50%",
-                        transform="translate(-50%, -50%)",
-                        border_radius="50%",
-                        filter="blur(50px)",
-                        style={"animation": "pulse 4s ease-in-out infinite"},
-                    ),
-                    # Main illustration - Server infrastructure GIF
-                    rx.box(
-                        rx.image(
-                            src="/banner-3.gif",
-                            width="600px",
-                            height="auto",
-                            filter="drop-shadow(0 20px 60px rgba(27, 75, 127, 0.4))",
-                            style={"animation": "fadeInScale 1s ease-out 0.3s backwards, scaleFloat 6s ease-in-out 1.5s infinite"},
+                        # Background glow
+                        rx.box(
+                            width="650px",
+                            height="650px",
+                            background="radial-gradient(circle, rgba(77, 184, 196, 0.12) 0%, transparent 70%)",
+                            position="absolute",
+                            top="50%",
+                            left="50%",
+                            transform="translate(-50%, -50%)",
+                            border_radius="50%",
+                            filter="blur(50px)",
+                            style={"animation": "pulse 4s ease-in-out infinite"},
+                        ),
+                        # Main illustration - Server infrastructure GIF
+                        rx.box(
+                            rx.image(
+                                src="/banner-3.gif",
+                                width="780px",
+                                height="auto",
+                                filter="drop-shadow(0 20px 60px rgba(27, 75, 127, 0.4))",
+                                style={"animation": "fadeInRight 1s ease-out 0.3s backwards, scaleFloat 6s ease-in-out 1.5s infinite"},
+                            ),
+                            position="relative",
                         ),
                         position="relative",
                     ),
+                    display=["none", "none", "none", "block"],
                     position="relative",
+                    z_index="1",
                 ),
-                display=["none", "none", "none", "block"],
-                position="relative",
-                z_index="1",
+                spacing="9",
+                align="center",
+                width="100%",
             ),
             spacing="9",
             align="center",
@@ -379,6 +380,7 @@ def hero() -> rx.Component:
             max_width="1500px",
             margin="0 auto",
             padding="200px 8% 160px",
+            position="relative",
         ),
         width="100%",
         background="linear-gradient(135deg, #0a1e3d 0%, #091428 30%, #050a14 60%, #020509 100%)",
@@ -388,6 +390,7 @@ def hero() -> rx.Component:
 
 def wordpress_cloud_highlight() -> rx.Component:
     return rx.box(
+        # Remove script call
         rx.vstack(
             rx.hstack(
                 rx.vstack(
@@ -415,7 +418,7 @@ def wordpress_cloud_highlight() -> rx.Component:
                                    "-webkit-text-fill-color": "transparent"
                                }),
                         " در ایران",
-                        size="9",
+                        size="8",
                         font_weight="900",
                         line_height="1.2",
                         letter_spacing="-0.03em",
@@ -430,26 +433,50 @@ def wordpress_cloud_highlight() -> rx.Component:
                         max_width="600px",
                         text_align=["center", "center", "right"],
                     ),
-                    rx.vstack(
+                     rx.vstack(
                         rx.hstack(
                             rx.box(
-                                rx.icon("check", size=24, color="#10B981"),
+                                rx.icon("database", size=24, color="#6DD7E5"),
                                 width="48px",
                                 height="48px",
-                                background="linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2))",
+                                background="linear-gradient(135deg, rgba(109, 215, 229, 0.2), rgba(77, 184, 196, 0.2))",
                                 border_radius="12px",
                                 display="flex",
                                 align_items="center",
                                 justify_content="center",
+                                style={"animation": "fadeInScale 0.8s ease-out 0.4s backwards"},
                             ),
                             rx.vstack(
-                                rx.text("مدیریت خودکار", font_weight="800", font_size="18px", color="white"),
-                                rx.text("بروزرسانی، بکاپ و امنیت به صورت کاملا اتوماتیک", color="#94A3B8", font_size="15px"),
+                                rx.text("وردپرس کلود و دیتابیس کلاستر شده در چند سرور", font_weight="800", font_size="18px", color="white"),
+                                rx.text("قابلیت افزارش ریسورس و کاهش ریسورس خودکار در مواقع پرترافیک و کم‌ترافیک", color="#94A3B8", font_size="15px"),
                                 spacing="1",
                                 align="start",
                             ),
                             spacing="4",
                             align="start",
+                            style={"animation": "fadeInUp 0.8s ease-out 0.5s backwards"},
+                        ),
+                        rx.hstack(
+                            rx.box(
+                                rx.icon("layout-grid", size=24, color="#A78BFA"),
+                                width="48px",
+                                height="48px",
+                                background="linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(139, 92, 246, 0.2))",
+                                border_radius="12px",
+                                display="flex",
+                                align_items="center",
+                                justify_content="center",
+                                style={"animation": "fadeInScale 0.8s ease-out 0.6s backwards"},
+                            ),
+                            rx.vstack(
+                                rx.text("مدیریت چندین سایت وردپرس در یک پنل", font_weight="800", font_size="18px", color="white"),
+                                rx.text("بروزرسانی، بکاپ و تغییرات و مانیترینگ جامع", color="#94A3B8", font_size="15px"),
+                                spacing="1",
+                                align="start",
+                            ),
+                            spacing="4",
+                            align="start",
+                            style={"animation": "fadeInUp 0.8s ease-out 0.7s backwards"},
                         ),
                         rx.hstack(
                             rx.box(
@@ -461,6 +488,7 @@ def wordpress_cloud_highlight() -> rx.Component:
                                 display="flex",
                                 align_items="center",
                                 justify_content="center",
+                                style={"animation": "fadeInScale 0.8s ease-out 0.8s backwards"},
                             ),
                             rx.vstack(
                                 rx.text("بهینه‌سازی حرفه‌ای", font_weight="800", font_size="18px", color="white"),
@@ -470,17 +498,19 @@ def wordpress_cloud_highlight() -> rx.Component:
                             ),
                             spacing="4",
                             align="start",
+                            style={"animation": "fadeInUp 0.8s ease-out 0.9s backwards"},
                         ),
                         rx.hstack(
                             rx.box(
-                                rx.icon("shield", size=24, color="#4DB8C4"),
+                                rx.icon("shield", size=24, color="#10B981"),
                                 width="48px",
                                 height="48px",
-                                background="linear-gradient(135deg, rgba(77, 184, 196, 0.2), rgba(109, 215, 229, 0.2))",
+                                background="linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2))",
                                 border_radius="12px",
                                 display="flex",
                                 align_items="center",
                                 justify_content="center",
+                                style={"animation": "fadeInScale 0.8s ease-out 1s backwards"},
                             ),
                             rx.vstack(
                                 rx.text("امنیت پیشرفته", font_weight="800", font_size="18px", color="white"),
@@ -490,143 +520,144 @@ def wordpress_cloud_highlight() -> rx.Component:
                             ),
                             spacing="4",
                             align="start",
+                            style={"animation": "fadeInUp 0.8s ease-out 1.1s backwards"},
                         ),
                         spacing="6",
                         align="start",
                         width="100%",
                     ),
-                    # Features Grid
-                    rx.box(
-                        rx.hstack(
-                            # Feature 1
-                            rx.box(
-                                rx.vstack(
-                                    rx.box(
-                                        rx.icon("server", size=32, color="#4DB8C4"),
-                                        width="64px",
-                                        height="64px",
-                                        background="linear-gradient(135deg, rgba(77, 184, 196, 0.15), rgba(109, 215, 229, 0.1))",
-                                        border_radius="16px",
-                                        display="flex",
-                                        align_items="center",
-                                        justify_content="center",
-                                        border="1px solid rgba(77, 184, 196, 0.3)",
-                                    ),
-                                    rx.text(
-                                        "سرورهای SSD",
-                                        font_weight="700",
-                                        font_size="16px",
-                                        color="#FFFFFF",
-                                    ),
-                                    rx.text(
-                                        "سرعت بالا با NVMe",
-                                        font_size="13px",
-                                        color="#8B9EB8",
-                                    ),
-                                    spacing="3",
-                                    align="center",
-                                ),
-                                background="rgba(27, 75, 127, 0.1)",
-                                backdrop_filter="blur(10px)",
-                                border="1px solid rgba(77, 184, 196, 0.2)",
-                                border_radius="14px",
-                                padding="24px",
-                                _hover={
-                                    "background": "rgba(27, 75, 127, 0.18)",
-                                    "border": "1px solid rgba(77, 184, 196, 0.4)",
-                                    "transform": "translateY(-4px)",
-                                },
-                                transition="all 0.3s ease",
-                                flex="1",
-                            ),
-                            # Feature 2
-                            rx.box(
-                                rx.vstack(
-                                    rx.box(
-                                        rx.icon("rocket", size=32, color="#F59E0B"),
-                                        width="64px",
-                                        height="64px",
-                                        background="linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 146, 60, 0.1))",
-                                        border_radius="16px",
-                                        display="flex",
-                                        align_items="center",
-                                        justify_content="center",
-                                        border="1px solid rgba(245, 158, 11, 0.3)",
-                                    ),
-                                    rx.text(
-                                        "سرعت 10 برابر",
-                                        font_weight="700",
-                                        font_size="16px",
-                                        color="#FFFFFF",
-                                    ),
-                                    rx.text(
-                                        "با کش پیشرفته",
-                                        font_size="13px",
-                                        color="#8B9EB8",
-                                    ),
-                                    spacing="3",
-                                    align="center",
-                                ),
-                                background="rgba(27, 75, 127, 0.1)",
-                                backdrop_filter="blur(10px)",
-                                border="1px solid rgba(245, 158, 11, 0.2)",
-                                border_radius="14px",
-                                padding="24px",
-                                _hover={
-                                    "background": "rgba(27, 75, 127, 0.18)",
-                                    "border": "1px solid rgba(245, 158, 11, 0.4)",
-                                    "transform": "translateY(-4px)",
-                                },
-                                transition="all 0.3s ease",
-                                flex="1",
-                            ),
-                            # Feature 3
-                            rx.box(
-                                rx.vstack(
-                                    rx.box(
-                                        rx.icon("headphones", size=32, color="#10B981"),
-                                        width="64px",
-                                        height="64px",
-                                        background="linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.1))",
-                                        border_radius="16px",
-                                        display="flex",
-                                        align_items="center",
-                                        justify_content="center",
-                                        border="1px solid rgba(16, 185, 129, 0.3)",
-                                    ),
-                                    rx.text(
-                                        "پشتیبانی 24/7",
-                                        font_weight="700",
-                                        font_size="16px",
-                                        color="#FFFFFF",
-                                    ),
-                                    rx.text(
-                                        "همیشه کنارتان",
-                                        font_size="13px",
-                                        color="#8B9EB8",
-                                    ),
-                                    spacing="3",
-                                    align="center",
-                                ),
-                                background="rgba(27, 75, 127, 0.1)",
-                                backdrop_filter="blur(10px)",
-                                border="1px solid rgba(16, 185, 129, 0.2)",
-                                border_radius="14px",
-                                padding="24px",
-                                _hover={
-                                    "background": "rgba(27, 75, 127, 0.18)",
-                                    "border": "1px solid rgba(16, 185, 129, 0.4)",
-                                    "transform": "translateY(-4px)",
-                                },
-                                transition="all 0.3s ease",
-                                flex="1",
-                            ),
-                            spacing="5",
-                            width="100%",
-                            wrap="wrap",
-                        ),
-                        margin_top="40px",
-                    ),
+                    # # Features Grid
+                    # rx.box(
+                    #     rx.hstack(
+                    #         # Feature 1
+                    #         rx.box(
+                    #             rx.vstack(
+                    #                 rx.box(
+                    #                     rx.icon("server", size=32, color="#4DB8C4"),
+                    #                     width="64px",
+                    #                     height="64px",
+                    #                     background="linear-gradient(135deg, rgba(77, 184, 196, 0.15), rgba(109, 215, 229, 0.1))",
+                    #                     border_radius="16px",
+                    #                     display="flex",
+                    #                     align_items="center",
+                    #                     justify_content="center",
+                    #                     border="1px solid rgba(77, 184, 196, 0.3)",
+                    #                 ),
+                    #                 rx.text(
+                    #                     "سرورهای SSD",
+                    #                     font_weight="700",
+                    #                     font_size="16px",
+                    #                     color="#FFFFFF",
+                    #                 ),
+                    #                 rx.text(
+                    #                     "سرعت بالا با NVMe",
+                    #                     font_size="13px",
+                    #                     color="#8B9EB8",
+                    #                 ),
+                    #                 spacing="3",
+                    #                 align="center",
+                    #             ),
+                    #             background="rgba(27, 75, 127, 0.1)",
+                    #             backdrop_filter="blur(10px)",
+                    #             border="1px solid rgba(77, 184, 196, 0.2)",
+                    #             border_radius="14px",
+                    #             padding="24px",
+                    #             _hover={
+                    #                 "background": "rgba(27, 75, 127, 0.18)",
+                    #                 "border": "1px solid rgba(77, 184, 196, 0.4)",
+                    #                 "transform": "translateY(-4px)",
+                    #             },
+                    #             transition="all 0.3s ease",
+                    #             flex="1",
+                    #         ),
+                    #         # Feature 2
+                    #         rx.box(
+                    #             rx.vstack(
+                    #                 rx.box(
+                    #                     rx.icon("rocket", size=32, color="#F59E0B"),
+                    #                     width="64px",
+                    #                     height="64px",
+                    #                     background="linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 146, 60, 0.1))",
+                    #                     border_radius="16px",
+                    #                     display="flex",
+                    #                     align_items="center",
+                    #                     justify_content="center",
+                    #                     border="1px solid rgba(245, 158, 11, 0.3)",
+                    #                 ),
+                    #                 rx.text(
+                    #                     "سرعت 10 برابر",
+                    #                     font_weight="700",
+                    #                     font_size="16px",
+                    #                     color="#FFFFFF",
+                    #                 ),
+                    #                 rx.text(
+                    #                     "با کش پیشرفته",
+                    #                     font_size="13px",
+                    #                     color="#8B9EB8",
+                    #                 ),
+                    #                 spacing="3",
+                    #                 align="center",
+                    #             ),
+                    #             background="rgba(27, 75, 127, 0.1)",
+                    #             backdrop_filter="blur(10px)",
+                    #             border="1px solid rgba(245, 158, 11, 0.2)",
+                    #             border_radius="14px",
+                    #             padding="24px",
+                    #             _hover={
+                    #                 "background": "rgba(27, 75, 127, 0.18)",
+                    #                 "border": "1px solid rgba(245, 158, 11, 0.4)",
+                    #                 "transform": "translateY(-4px)",
+                    #             },
+                    #             transition="all 0.3s ease",
+                    #             flex="1",
+                    #         ),
+                    #         # Feature 3
+                    #         rx.box(
+                    #             rx.vstack(
+                    #                 rx.box(
+                    #                     rx.icon("headphones", size=32, color="#10B981"),
+                    #                     width="64px",
+                    #                     height="64px",
+                    #                     background="linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.1))",
+                    #                     border_radius="16px",
+                    #                     display="flex",
+                    #                     align_items="center",
+                    #                     justify_content="center",
+                    #                     border="1px solid rgba(16, 185, 129, 0.3)",
+                    #                 ),
+                    #                 rx.text(
+                    #                     "پشتیبانی 24/7",
+                    #                     font_weight="700",
+                    #                     font_size="16px",
+                    #                     color="#FFFFFF",
+                    #                 ),
+                    #                 rx.text(
+                    #                     "همیشه کنارتان",
+                    #                     font_size="13px",
+                    #                     color="#8B9EB8",
+                    #                 ),
+                    #                 spacing="3",
+                    #                 align="center",
+                    #             ),
+                    #             background="rgba(27, 75, 127, 0.1)",
+                    #             backdrop_filter="blur(10px)",
+                    #             border="1px solid rgba(16, 185, 129, 0.2)",
+                    #             border_radius="14px",
+                    #             padding="24px",
+                    #             _hover={
+                    #                 "background": "rgba(27, 75, 127, 0.18)",
+                    #                 "border": "1px solid rgba(16, 185, 129, 0.4)",
+                    #                 "transform": "translateY(-4px)",
+                    #             },
+                    #             transition="all 0.3s ease",
+                    #             flex="1",
+                    #         ),
+                    #         spacing="5",
+                    #         width="100%",
+                    #         wrap="wrap",
+                    #     ),
+                    #     margin_top="40px",
+                    # ),
                     rx.button(
                         rx.hstack(
                             rx.icon("external-link", size=20),
@@ -664,17 +695,218 @@ def wordpress_cloud_highlight() -> rx.Component:
                             style={"animation": "pulse 6s ease-in-out infinite"},
                             z_index="0",
                         ),
-                        # Central WordPress icon
+                        # Central Cloud Infrastructure Visual - Enhanced
                         rx.box(
-                            rx.html("<svg viewBox='0 0 24 24' width='140' height='140' fill='#F59E0B'><path d='M12.158 12.786L9.46 20.625 12.158 12.786z M3.648 12c0 3.162 1.75 5.92 4.342 7.358L4.285 8.87C3.858 9.826 3.648 10.887 3.648 12z M20.352 12c0-.936-.18-1.81-.504-2.598-.308-.788-.672-1.454-1.092-1.958-.42-.504-.756-.84-.924-1.008-.168-.168-.252-.336-.252-.504 0-.168.084-.336.252-.504.168-.168.42-.252.756-.252h.084c-1.344-1.26-3.15-2.016-5.124-2.016-2.646 0-4.956 1.344-6.3 3.36.336-.024.672-.036 1.008-.036.672 0 1.722.084 1.722.084.336.024.378.504.042.546 0 0-.336.042-.714.06l2.268 6.762 1.362-4.086-1.008-2.676c-.336-.018-.672-.06-.672-.06-.336-.024-.294-.57.042-.546 0 0 1.074.084 1.722.084.672 0 1.722-.084 1.722-.084.336-.024.378.504.042.546 0 0-.336.042-.714.06l2.25 6.702.63-2.1c.252-.84.42-1.428.42-1.932z M12.252 13.032l-1.866 5.418c.546.168 1.134.252 1.722.252.714 0 1.386-.126 2.016-.336-.018-.024-.03-.054-.042-.084l-1.83-5.25z M20.352 12c0 .42-.042.84-.126 1.26-.084.42-.21.882-.378 1.386l-1.89 5.46c1.89-1.092 3.168-3.15 3.168-5.502 0-1.092-.294-2.142-.774-3.024.336.672.546 1.428.546 2.22z M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2z'/></svg>"),
+                            rx.html("""
+                                <svg viewBox="0 0 320 320" style="width: 400px; height: 400px;">
+                                    <defs>
+                                        <!-- Enhanced Gradients -->
+                                        <linearGradient id="cloud-grad" x1="0%" y1="0%" x2="0%" y2="100%">
+                                            <stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:0.95"/>
+                                            <stop offset="40%" style="stop-color:#B8E5F0;stop-opacity:0.85"/>
+                                            <stop offset="100%" style="stop-color:#6DD1E5;stop-opacity:0.75"/>
+                                        </linearGradient>
+                                        <radialGradient id="cloud-glow" cx="50%" cy="40%" r="60%">
+                                            <stop offset="0%" style="stop-color:#6DD1E5;stop-opacity:0.6"/>
+                                            <stop offset="70%" style="stop-color:#4DB8C4;stop-opacity:0.3"/>
+                                            <stop offset="100%" style="stop-color:transparent;stop-opacity:0"/>
+                                        </radialGradient>
+                                        <linearGradient id="server-grad" x1="0%" y1="0%" x2="0%" y2="100%">
+                                            <stop offset="0%" style="stop-color:#374151"/>
+                                            <stop offset="50%" style="stop-color:#1F2937"/>
+                                            <stop offset="100%" style="stop-color:#111827"/>
+                                        </linearGradient>
+                                        <linearGradient id="data-stream" x1="0%" y1="0%" x2="100%" y2="100%">
+                                            <stop offset="0%" style="stop-color:#6DD1E5;stop-opacity:0"/>
+                                            <stop offset="30%" style="stop-color:#4DB8C4;stop-opacity:1"/>
+                                            <stop offset="70%" style="stop-color:#3B9FAD;stop-opacity:1"/>
+                                            <stop offset="100%" style="stop-color:#2A5F7F;stop-opacity:0"/>
+                                        </linearGradient>
+                                        <!-- Filters -->
+                                        <filter id="strong-glow" x="-50%" y="-50%" width="200%" height="200%">
+                                            <feGaussianBlur stdDeviation="6" result="blur"/>
+                                            <feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+                                        </filter>
+                                        <filter id="soft-glow" x="-30%" y="-30%" width="160%" height="160%">
+                                            <feGaussianBlur stdDeviation="3" result="blur"/>
+                                            <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+                                        </filter>
+                                    </defs>
+                                    
+                                    <!-- Background glow circle -->
+                                    <circle cx="160" cy="140" r="120" fill="url(#cloud-glow)" class="pulse-glow"/>
+                                    
+                                    <!-- Data Stream Lines (thicker, animated) -->
+                                    <g opacity="0.85">
+                                        <line x1="160" y1="180" x2="85" y2="225" stroke="url(#data-stream)" stroke-width="4" stroke-linecap="round" class="data-flow" style="animation-delay: 0s"/>
+                                        <line x1="160" y1="180" x2="160" y2="235" stroke="url(#data-stream)" stroke-width="4" stroke-linecap="round" class="data-flow" style="animation-delay: 0.3s"/>
+                                        <line x1="160" y1="180" x2="235" y2="225" stroke="url(#data-stream)" stroke-width="4" stroke-linecap="round" class="data-flow" style="animation-delay: 0.6s"/>
+                                    </g>
+                                    
+                                    <!-- Realistic Cloud Shape - Simple & Clean -->
+                                    <g filter="url(#strong-glow)">
+                                        <!-- Main cloud structure with simple circles -->
+                                        <circle cx="100" cy="140" r="38" fill="url(#cloud-grad)" opacity="0.95"/>
+                                        <circle cx="140" cy="125" r="45" fill="url(#cloud-grad)" opacity="0.95"/>
+                                        <circle cx="180" cy="125" r="42" fill="url(#cloud-grad)" opacity="0.95"/>
+                                        <circle cx="215" cy="140" r="35" fill="url(#cloud-grad)" opacity="0.95"/>
+                                        <!-- Bottom fill -->
+                                        <ellipse cx="160" cy="148" rx="80" ry="35" fill="url(#cloud-grad)" opacity="0.95"/>
+                                        
+                                        <!-- Subtle highlights on top -->
+                                        <ellipse cx="150" cy="115" rx="50" ry="25" fill="rgba(255,255,255,0.4)"/>
+                                        <ellipse cx="185" cy="118" rx="40" ry="20" fill="rgba(255,255,255,0.3)"/>
+                                    </g>
+                                    
+                                    
+                                    <!-- Professional Server Racks with Details -->
+                                    <!-- Server 1 - Left -->
+                                    <g class="server-node">
+                                        <!-- Main chassis -->
+                                        <rect x="55" y="220" width="60" height="75" rx="4" fill="url(#server-grad)" filter="url(#strong-glow)" stroke="#4B5563" stroke-width="2"/>
+                                        
+                                        <!-- Top panel with brand strip -->
+                                        <rect x="59" y="224" width="52" height="10" rx="2" fill="#F59E0B" opacity="0.9"/>
+                                        <text x="85" y="230" text-anchor="middle" font-size="6" fill="#1F2937" font-weight="bold">SERVER-01</text>
+                                        
+                                        <!-- Drive bays with details -->
+                                        <rect x="62" y="238" width="46" height="7" rx="2" fill="#111827" stroke="rgba(96,165,250,0.4)" stroke-width="0.5"/>
+                                        <rect x="62" y="248" width="46" height="7" rx="2" fill="#111827" stroke="rgba(96,165,250,0.4)" stroke-width="0.5"/>
+                                        <rect x="62" y="258" width="46" height="7" rx="2" fill="#111827" stroke="rgba(96,165,250,0.4)" stroke-width="0.5"/>
+                                        <rect x="62" y="268" width="46" height="7" rx="2" fill="#111827" stroke="rgba(96,165,250,0.4)" stroke-width="0.5"/>
+                                        
+                                        <!-- Drive activity indicators -->
+                                        <circle cx="67" cy="241.5" r="1.5" fill="#3B82F6" class="blink" filter="url(#soft-glow)"/>
+                                        <circle cx="67" cy="251.5" r="1.5" fill="#10B981" class="blink" filter="url(#soft-glow)" style="animation-delay: 0.2s"/>
+                                        <circle cx="67" cy="261.5" r="1.5" fill="#10B981" class="blink" filter="url(#soft-glow)" style="animation-delay: 0.4s"/>
+                                        <circle cx="67" cy="271.5" r="1.5" fill="#3B82F6" class="blink" filter="url(#soft-glow)" style="animation-delay: 0.1s"/>
+                                        
+                                        <!-- Ventilation grilles -->
+                                        <line x1="64" y1="281" x2="106" y2="281" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
+                                        <line x1="64" y1="284" x2="106" y2="284" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
+                                        <line x1="64" y1="287" x2="106" y2="287" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
+                                        
+                                        <!-- Status LEDs -->
+                                        <circle cx="100" cy="288" r="2.5" fill="#10B981" class="blink-slow" filter="url(#soft-glow)"/>
+                                        <circle cx="106" cy="288" r="2" fill="#F59E0B" opacity="0.8"/>
+                                    </g>
+                                    
+                                    <!-- Server 2 - Center -->
+                                    <g class="server-node">
+                                        <rect x="130" y="230" width="60" height="75" rx="4" fill="url(#server-grad)" filter="url(#strong-glow)" stroke="#4B5563" stroke-width="2"/>
+                                        <rect x="134" y="234" width="52" height="10" rx="2" fill="#F59E0B" opacity="0.9"/>
+                                        <text x="160" y="240" text-anchor="middle" font-size="6" fill="#1F2937" font-weight="bold">SERVER-02</text>
+                                        
+                                        <rect x="137" y="248" width="46" height="7" rx="2" fill="#111827" stroke="rgba(96,165,250,0.4)" stroke-width="0.5"/>
+                                        <rect x="137" y="258" width="46" height="7" rx="2" fill="#111827" stroke="rgba(96,165,250,0.4)" stroke-width="0.5"/>
+                                        <rect x="137" y="268" width="46" height="7" rx="2" fill="#111827" stroke="rgba(96,165,250,0.4)" stroke-width="0.5"/>
+                                        <rect x="137" y="278" width="46" height="7" rx="2" fill="#111827" stroke="rgba(96,165,250,0.4)" stroke-width="0.5"/>
+                                        
+                                        <circle cx="142" cy="251.5" r="1.5" fill="#10B981" class="blink" filter="url(#soft-glow)"/>
+                                        <circle cx="142" cy="261.5" r="1.5" fill="#10B981" class="blink" filter="url(#soft-glow)" style="animation-delay: 0.3s"/>
+                                        <circle cx="142" cy="271.5" r="1.5" fill="#3B82F6" class="blink" filter="url(#soft-glow)" style="animation-delay: 0.1s"/>
+                                        <circle cx="142" cy="281.5" r="1.5" fill="#10B981" class="blink" filter="url(#soft-glow)" style="animation-delay: 0.5s"/>
+                                        
+                                        <line x1="139" y1="291" x2="181" y2="291" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
+                                        <line x1="139" y1="294" x2="181" y2="294" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
+                                        <line x1="139" y1="297" x2="181" y2="297" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
+                                        
+                                        <circle cx="175" cy="298" r="2.5" fill="#10B981" class="blink-slow" filter="url(#soft-glow)"/>
+                                        <circle cx="181" cy="298" r="2" fill="#F59E0B" opacity="0.8"/>
+                                    </g>
+                                    
+                                    <!-- Server 3 - Right -->
+                                    <g class="server-node">
+                                        <rect x="205" y="220" width="60" height="75" rx="4" fill="url(#server-grad)" filter="url(#strong-glow)" stroke="#4B5563" stroke-width="2"/>
+                                        <rect x="209" y="224" width="52" height="10" rx="2" fill="#F59E0B" opacity="0.9"/>
+                                        <text x="235" y="230" text-anchor="middle" font-size="6" fill="#1F2937" font-weight="bold">SERVER-03</text>
+                                        
+                                        <rect x="212" y="238" width="46" height="7" rx="2" fill="#111827" stroke="rgba(96,165,250,0.4)" stroke-width="0.5"/>
+                                        <rect x="212" y="248" width="46" height="7" rx="2" fill="#111827" stroke="rgba(96,165,250,0.4)" stroke-width="0.5"/>
+                                        <rect x="212" y="258" width="46" height="7" rx="2" fill="#111827" stroke="rgba(96,165,250,0.4)" stroke-width="0.5"/>
+                                        <rect x="212" y="268" width="46" height="7" rx="2" fill="#111827" stroke="rgba(96,165,250,0.4)" stroke-width="0.5"/>
+                                        
+                                        <circle cx="217" cy="241.5" r="1.5" fill="#10B981" class="blink" filter="url(#soft-glow)" style="animation-delay: 0.2s"/>
+                                        <circle cx="217" cy="251.5" r="1.5" fill="#3B82F6" class="blink" filter="url(#soft-glow)"/>
+                                        <circle cx="217" cy="261.5" r="1.5" fill="#10B981" class="blink" filter="url(#soft-glow)" style="animation-delay: 0.4s"/>
+                                        <circle cx="217" cy="271.5" r="1.5" fill="#10B981" class="blink" filter="url(#soft-glow)" style="animation-delay: 0.1s"/>
+                                        
+                                        <line x1="214" y1="281" x2="256" y2="281" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
+                                        <line x1="214" y1="284" x2="256" y2="284" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
+                                        <line x1="214" y1="287" x2="256" y2="287" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
+                                        
+                                        <circle cx="250" cy="288" r="2.5" fill="#10B981" class="blink-slow" filter="url(#soft-glow)"/>
+                                        <circle cx="256" cy="288" r="2" fill="#F59E0B" opacity="0.8"/>
+                                    </g>
+                                    
+                                    <!-- Data Packets - Enhanced Animation -->
+                                    <circle r="5" fill="#6DD1E5" class="data-packet" filter="url(#strong-glow)">
+                                        <animateMotion dur="2s" repeatCount="indefinite" path="M160,180 Q120,200 85,225"/>
+                                    </circle>
+                                    <circle r="5" fill="#4DB8C4" class="data-packet" filter="url(#strong-glow)">
+                                        <animateMotion dur="2s" repeatCount="indefinite" begin="0.7s" path="M160,180 Q120,200 85,225"/>
+                                    </circle>
+                                    
+                                    <circle r="5" fill="#6DD1E5" class="data-packet" filter="url(#strong-glow)">
+                                        <animateMotion dur="1.8s" repeatCount="indefinite" path="M160,180 L160,235"/>
+                                    </circle>
+                                    <circle r="5" fill="#4DB8C4" class="data-packet" filter="url(#strong-glow)">
+                                        <animateMotion dur="1.8s" repeatCount="indefinite" begin="0.6s" path="M160,180 L160,235"/>
+                                    </circle>
+                                    
+                                    <circle r="5" fill="#6DD1E5" class="data-packet" filter="url(#strong-glow)">
+                                        <animateMotion dur="2.1s" repeatCount="indefinite" path="M160,180 Q200,200 235,225"/>
+                                    </circle>
+                                    <circle r="5" fill="#4DB8C4" class="data-packet" filter="url(#strong-glow)">
+                                        <animateMotion dur="2.1s" repeatCount="indefinite" begin="0.8s" path="M160,180 Q200,200 235,225"/>
+                                    </circle>
+                                    
+                                    <style>
+                                        .blink { animation: blink 1.5s ease-in-out infinite; }
+                                        @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }
+                                        
+                                        .blink-slow { animation: blinkSlow 3s ease-in-out infinite; }
+                                        @keyframes blinkSlow { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
+                                        
+                                        .data-flow { 
+                                            animation: dataFlow 2s ease-in-out infinite; 
+                                            stroke-dasharray: 10 5;
+                                        }
+                                        @keyframes dataFlow { 
+                                            0% { stroke-dashoffset: 0; opacity: 0.5; } 
+                                            50% { opacity: 1; }
+                                            100% { stroke-dashoffset: 30; opacity: 0.5; } 
+                                        }
+                                        
+                                        .pulse-glow { animation: pulseGlow 4s ease-in-out infinite; }
+                                        @keyframes pulseGlow { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.05); } }
+                                        
+                                        .data-packet { opacity: 0.9; }
+                                        
+                                        .server-node { animation: serverPulse 5s ease-in-out infinite; }
+                                        @keyframes serverPulse { 0%, 100% { opacity: 0.95; } 50% { opacity: 1; } }
+                                    </style>
+                                </svg>
+                            """),
                             position="relative",
-                            padding="40px",
-                            background="linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 146, 60, 0.12))",
-                            border="3px solid rgba(245, 158, 11, 0.35)",
-                            border_radius="32px",
-                            box_shadow="0 20px 70px rgba(245, 158, 11, 0.5)",
+                            width="420px",
+                            height="420px",
                             z_index="2",
-                            style={"animation": "scaleFloat 8s ease-in-out infinite"},
+                            display="flex",
+                            align_items="center",
+                            justify_content="center",
+                        ),
+                        # WordPress Logo GIF overlay
+                        rx.image(
+                            src="/wordpress-logo.gif",
+                            width="100px",
+                            height="100px",
+                            position="absolute",
+                            top="2%",
+                            left="50%",
+                            transform="translate(-50%, -50%)",
+                            z_index="3",
+                            filter="drop-shadow(0 0 20px rgba(75, 179, 253, 0.6))",
                         ),
                         # Floating icon 1: Shield (security - top-left)
                         rx.box(
@@ -690,7 +922,7 @@ def wordpress_cloud_highlight() -> rx.Component:
                             box_shadow="0 12px 40px rgba(16, 185, 129, 0.4)",
                             opacity="0.85",
                             z_index="3",
-                            style={"animation": "fadeInScale 0.8s ease-out 0.4s backwards, bobFloat 8s ease-in-out 1.5s infinite"},
+                            class_name="wp-icon-1",
                         ),
                         # Floating icon 2: Cloud (cloud hosting - top-right)
                         rx.box(
@@ -706,7 +938,7 @@ def wordpress_cloud_highlight() -> rx.Component:
                             box_shadow="0 12px 40px rgba(109, 215, 229, 0.4)",
                             opacity="0.8",
                             z_index="1",
-                            style={"animation": "fadeInScale 0.8s ease-out 0.6s backwards, floatDiagonal 9s ease-in-out 2s infinite"},
+                            class_name="wp-icon-2",
                         ),
                         # Floating icon 3: Zap/Speed (middle-left)
                         rx.box(
@@ -722,7 +954,7 @@ def wordpress_cloud_highlight() -> rx.Component:
                             box_shadow="0 10px 35px rgba(251, 146, 60, 0.4)",
                             opacity="0.85",
                             z_index="3",
-                            style={"animation": "fadeInScale 0.8s ease-out 0.8s backwards, float 7s ease-in-out 2.3s infinite reverse"},
+                            class_name="wp-icon-3",
                         ),
                         # Floating icon 4: Package/Plugin (middle-right)
                         rx.box(
@@ -738,7 +970,7 @@ def wordpress_cloud_highlight() -> rx.Component:
                             box_shadow="0 10px 35px rgba(167, 139, 250, 0.4)",
                             opacity="0.8",
                             z_index="1",
-                            style={"animation": "fadeInScale 0.8s ease-out 1s backwards, scaleBreath 9s ease-in-out 2.5s infinite"},
+                            class_name="wp-icon-4",
                         ),
                         # Floating icon 5: Database (bottom-left)
                         rx.box(
@@ -754,7 +986,7 @@ def wordpress_cloud_highlight() -> rx.Component:
                             box_shadow="0 10px 35px rgba(77, 184, 196, 0.4)",
                             opacity="0.85",
                             z_index="3",
-                            style={"animation": "fadeInScale 0.8s ease-out 1.2s backwards, floatComplex 10s ease-in-out 2.8s infinite"},
+                            class_name="wp-icon-5",
                         ),
                         # Floating icon 6: Settings/Gear (bottom-right)
                         rx.box(
@@ -770,13 +1002,13 @@ def wordpress_cloud_highlight() -> rx.Component:
                             box_shadow="0 12px 40px rgba(249, 115, 22, 0.4)",
                             opacity="0.8",
                             z_index="1",
-                            style={"animation": "fadeInScale 0.8s ease-out 1.4s backwards, rotateSubtle 40s linear infinite, bobFloat 8s ease-in-out 3s infinite"},
+                            class_name="wp-icon-6",
                         ),
-                        # Stats card 1: 99.9% Uptime (repositioned - outer left)
+                        # Stats card 1: SSD Servers (Updated)
                         rx.box(
                             rx.vstack(
-                                rx.text("99.9%", font_size="26px", font_weight="900", color="#F59E0B", line_height="1"),
-                                rx.text("آپتایم", font_size="11px", color="#94A3B8", font_weight="700"),
+                                rx.text("سرورهای SSD", font_size="16px", font_weight="900", color="#F59E0B", line_height="1.2"),
+                                rx.text("سرعت بالا با NVMe", font_size="12px", color="#94A3B8", font_weight="700"),
                                 spacing="1",
                                 align="center",
                             ),
@@ -790,13 +1022,13 @@ def wordpress_cloud_highlight() -> rx.Component:
                             backdrop_filter="blur(15px)",
                             box_shadow="0 10px 40px rgba(245, 158, 11, 0.35)",
                             z_index="4",
-                            style={"animation": "fadeInScale 0.8s ease-out 1.6s backwards, float 7s ease-in-out 3.2s infinite"},
+                            class_name="wp-card-1",
                         ),
-                        # Stats card 2: 10x Speed (repositioned - outer right)
+                        # Stats card 2: 10x Speed (Updated)
                         rx.box(
                             rx.vstack(
-                                rx.text("10x", font_size="24px", font_weight="900", color="#10B981", line_height="1"),
-                                rx.text("سرعت", font_size="11px", color="#94A3B8", font_weight="700"),
+                                rx.text("سرعت 10 برابر", font_size="16px", font_weight="900", color="#10B981", line_height="1.2"),
+                                rx.text("با کش پیشرفته", font_size="12px", color="#94A3B8", font_weight="700"),
                                 spacing="1",
                                 align="center",
                             ),
@@ -810,13 +1042,13 @@ def wordpress_cloud_highlight() -> rx.Component:
                             backdrop_filter="blur(15px)",
                             box_shadow="0 10px 40px rgba(16, 185, 129, 0.35)",
                             z_index="4",
-                            style={"animation": "fadeInScale 0.8s ease-out 1.8s backwards, float 8s ease-in-out 3.5s infinite reverse"},
+                            class_name="wp-card-2",
                         ),
-                        # Stats card 3: 24/7 Support (repositioned - bottom center)
+                        # Stats card 3: 24/7 Support (Updated)
                         rx.box(
                             rx.vstack(
-                                rx.text("24/7", font_size="22px", font_weight="900", color="#6DD7E5", line_height="1"),
-                                rx.text("پشتیبانی", font_size="10px", color="#94A3B8", font_weight="700"),
+                                rx.text("پشتیبانی 24/7", font_size="16px", font_weight="900", color="#6DD7E5", line_height="1.2"),
+                                rx.text("همیشه کنارتان", font_size="12px", color="#94A3B8", font_weight="700"),
                                 spacing="1",
                                 align="center",
                             ),
@@ -830,7 +1062,7 @@ def wordpress_cloud_highlight() -> rx.Component:
                             backdrop_filter="blur(15px)",
                             box_shadow="0 10px 40px rgba(109, 215, 229, 0.35)",
                             z_index="4",
-                            style={"animation": "fadeInScale 0.8s ease-out 2s backwards, float 6s ease-in-out 3.8s infinite"},
+                            class_name="wp-card-3",
                         ),
                         position="relative",
                         width="600px",
@@ -1576,6 +1808,56 @@ def floating_chat() -> rx.Component:
 
 def index() -> rx.Component:
     return rx.box(
+        # Inject CSS animations directly into page
+        rx.el.style("""
+            @keyframes fadeInScale {
+                from { opacity: 0; transform: scale(0.5); }
+                to { opacity: 1; transform: scale(1); }
+            }
+            @keyframes float {
+                0%, 100% { transform: translateY(0px); }
+                50% { transform: translateY(-20px); }
+            }
+            @keyframes bobFloat {
+                0%, 100% { transform: translateY(0px) translateX(0px); }
+                25% { transform: translateY(-15px) translateX(10px); }
+                50% { transform: translateY(0px) translateX(15px); }
+                75% { transform: translateY(15px) translateX(5px); }
+            }
+            @keyframes floatDiagonal {
+                0%, 100% { transform: translate(0, 0); }
+                25% { transform: translate(15px, -15px); }
+                50% { transform: translate(25px, 0); }
+                75% { transform: translate(10px, 15px); }
+            }
+            @keyframes scaleBreath {
+                0%, 100% { transform: scale(1); }
+                50% { transform: scale(1.05); }
+            }
+            @keyframes floatComplex {
+                0%, 100% { transform: translate(0, 0) rotate(0deg); }
+                25% { transform: translate(-15px, -20px) rotate(2deg); }
+                50% { transform: translate(-25px, 0) rotate(0deg); }
+                75% { transform: translate(-10px, 20px) rotate(-2deg); }
+            }
+            @keyframes rotateSubtle {
+                from { transform: rotate(0deg); }
+                to { transform: rotate(360deg); }
+            }
+            .wp-icon-1 { animation: fadeInScale 1s ease-out 0.5s backwards, bobFloat 8s ease-in-out 2s infinite !important; }
+            .wp-icon-2 { animation: fadeInScale 1s ease-out 1s backwards, floatDiagonal 9s ease-in-out 2.5s infinite !important; }
+            .wp-icon-3 { animation: fadeInScale 1s ease-out 1.5s backwards, float 7s ease-in-out 3s infinite reverse !important; }
+            .wp-icon-4 { animation: fadeInScale 1s ease-out 2s backwards, floatDiagonal 8s ease-in-out 3.5s infinite reverse !important; }
+            .wp-icon-5 { animation: fadeInScale 1s ease-out 2.5s backwards, floatComplex 10s ease-in-out 4s infinite !important; }
+            .wp-icon-6 { animation: fadeInScale 1s ease-out 3s backwards, rotateSubtle 40s linear 4s infinite, bobFloat 8s ease-in-out 4.5s infinite !important; }
+            .wp-card-1 { animation: fadeInScale 1s ease-out 3.5s backwards, float 7s ease-in-out 5s infinite !important; }
+            .wp-card-2 { animation: fadeInScale 1s ease-out 4s backwards, float 8s ease-in-out 5.5s infinite reverse !important; }
+            .wp-card-3 { animation: fadeInScale 1s ease-out 4.5s backwards, float 6s ease-in-out 6s infinite !important; }
+            @keyframes rotateGearCW { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+            @keyframes rotateGearCCW { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
+            @keyframes glowPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
+            @keyframes fireRing { 0%, 100% { stroke-dashoffset: 0; } 50% { stroke-dashoffset: 50; } }
+        """),
         navbar(),
         hero(),
         wordpress_cloud_highlight(),
@@ -1602,6 +1884,131 @@ app = rx.App(
     style={
         "font_family": "'Vazirmatn', 'Inter', sans-serif",
     },
+    head_components=[
+        rx.html("""
+<style>
+/* WordPress Section Floating Icons Animations */
+.wp-icon-1 {
+    animation: fadeInScale 1s ease-out 0.5s backwards, bobFloat 8s ease-in-out 2s infinite !important;
+}
+
+.wp-icon-2 {
+    animation: fadeInScale 1s ease-out 1s backwards, floatDiagonal 9s ease-in-out 2.5s infinite !important;
+}
+
+.wp-icon-3 {
+    animation: fadeInScale 1s ease-out 1.5s backwards, float 7s ease-in-out 3s infinite reverse !important;
+}
+
+.wp-icon-4 {
+    animation: fadeInScale 1s ease-out 2s backwards, scaleBreath 9s ease-in-out 3.5s infinite !important;
+}
+
+.wp-icon-5 {
+    animation: fadeInScale 1s ease-out 2.5s backwards, floatComplex 10s ease-in-out 4s infinite !important;
+}
+
+.wp-icon-6 {
+    animation: fadeInScale 1s ease-out 3s backwards, rotateSubtle 40s linear 4s infinite, bobFloat 8s ease-in-out 4.5s infinite !important;
+}
+
+.wp-card-1 {
+    animation: fadeInScale 1s ease-out 3.5s backwards, float 7s ease-in-out 5s infinite !important;
+}
+
+.wp-card-2 {
+    animation: fadeInScale 1s ease-out 4s backwards, float 8s ease-in-out 5.5s infinite reverse !important;
+}
+
+.wp-card-3 {
+    animation: fadeInScale 1s ease-out 4.5s backwards, float 6s ease-in-out 6s infinite !important;
+}
+
+@keyframes fadeInScale {
+    from {
+        opacity: 0;
+        transform: scale(0.5);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0px);
+    }
+    50% {
+        transform: translateY(-20px);
+    }
+}
+
+@keyframes bobFloat {
+    0%, 100% {
+        transform: translateY(0px) translateX(0px);
+    }
+    25% {
+        transform: translateY(-15px) translateX(10px);
+    }
+    50% {
+        transform: translateY(0px) translateX(15px);
+    }
+    75% {
+        transform: translateY(15px) translateX(5px);
+    }
+}
+
+@keyframes floatDiagonal {
+    0%, 100% {
+        transform: translate(0, 0);
+    }
+    25% {
+        transform: translate(15px, -15px);
+    }
+    50% {
+        transform: translate(25px, 0);
+    }
+    75% {
+        transform: translate(10px, 15px);
+    }
+}
+
+@keyframes scaleBreath {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.05);
+    }
+}
+
+@keyframes floatComplex {
+    0%, 100% {
+        transform: translate(0, 0) rotate(0deg);
+    }
+    25% {
+        transform: translate(-15px, -20px) rotate(2deg);
+    }
+    50% {
+        transform: translate(-25px, 0) rotate(0deg);
+    }
+    75% {
+        transform: translate(-10px, 20px) rotate(-2deg);
+    }
+}
+
+@keyframes rotateSubtle {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+</style>
+"""),
+    ],
 )
 app.add_page(
     index,
diff --git a/wired-flat-2579-logo-wordpress-hover-pinch.gif b/wired-flat-2579-logo-wordpress-hover-pinch.gif
new file mode 100644
index 0000000..e1141bd
Binary files /dev/null and b/wired-flat-2579-logo-wordpress-hover-pinch.gif differ