From 4d4dea9844ce2c1b442dccecb4dbc32f5dbdfeeb Mon Sep 17 00:00:00 2001
From: "Ehsan.Asadi" <ehsan.asadi@zoodfood.com>
Date: Fri, 26 Dec 2025 18:44:02 +0330
Subject: [PATCH] feat: Add BluisHost-style isometric servers to hero section

- Created hero-servers.svg with isometric 3D server design
- Matches BluisHost reference with cyan/blue color scheme
- Replaced person illustration with server infrastructure visual
---
 assets/hero-servers.svg                      | 85 ++++++++++++++++++++
 src/presentation/web/assets/hero-servers.svg | 85 ++++++++++++++++++++
 src/presentation/web/pages/landing/index.py  |  6 +-
 3 files changed, 173 insertions(+), 3 deletions(-)
 create mode 100644 assets/hero-servers.svg
 create mode 100644 src/presentation/web/assets/hero-servers.svg

diff --git a/assets/hero-servers.svg b/assets/hero-servers.svg
new file mode 100644
index 0000000..afc848e
--- /dev/null
+++ b/assets/hero-servers.svg
@@ -0,0 +1,85 @@
+<svg width="600" height="500" viewBox="0 0 600 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background elements -->
+  <circle cx="100" cy="80" r="30" fill="#1B4B7F" opacity="0.1"/>
+  <circle cx="520" cy="120" r="25" fill="#4DB8C4" opacity="0.15"/>
+  <circle cx="480" cy="420" r="35" fill="#6DD7E5" opacity="0.1"/>
+  
+  <!-- Server 1 (Top Left) -->
+  <g transform="translate(80, 60)">
+    <!-- Server top face -->
+    <path d="M50 0 L100 25 L50 50 L0 25 Z" fill="#4DB8C4" opacity="0.9"/>
+    <!-- Server front face -->
+    <path d="M0 25 L0 85 L50 110 L50 50 Z" fill="#1B4B7F" opacity="0.95"/>
+    <!-- Server right face -->
+    <path d="M50 50 L50 110 L100 85 L100 25 Z" fill="#6DD7E5" opacity="0.85"/>
+    <!-- Server lines -->
+    <line x1="10" y1="35" x2="40" y2="52" stroke="#7CE3F2" stroke-width="2" opacity="0.6"/>
+    <line x1="10" y1="45" x2="40" y2="62" stroke="#7CE3F2" stroke-width="2" opacity="0.6"/>
+    <line x1="10" y1="55" x2="40" y2="72" stroke="#7CE3F2" stroke-width="2" opacity="0.6"/>
+  </g>
+  
+  <!-- Server 2 (Top Right) -->
+  <g transform="translate(420, 40)">
+    <path d="M50 0 L100 25 L50 50 L0 25 Z" fill="#4DB8C4" opacity="0.9"/>
+    <path d="M0 25 L0 85 L50 110 L50 50 Z" fill="#1B4B7F" opacity="0.95"/>
+    <path d="M50 50 L50 110 L100 85 L100 25 Z" fill="#6DD7E5" opacity="0.85"/>
+    <line x1="10" y1="35" x2="40" y2="52" stroke="#7CE3F2" stroke-width="2" opacity="0.6"/>
+    <line x1="10" y1="45" x2="40" y2="62" stroke="#7CE3F2" stroke-width="2" opacity="0.6"/>
+    <line x1="10" y1="55" x2="40" y2="72" stroke="#7CE3F2" stroke-width="2" opacity="0.6"/>
+  </g>
+  
+  <!-- Server 3 (Center) - Main/Larger -->
+  <g transform="translate(230, 80)">
+    <path d="M70 0 L140 35 L70 70 L0 35 Z" fill="#4DB8C4" opacity="0.95"/>
+    <path d="M0 35 L0 115 L70 150 L70 70 Z" fill="#1B4B7F"/>
+    <path d="M70 70 L70 150 L140 115 L140 35 Z" fill="#6DD7E5" opacity="0.9"/>
+    <line x1="15" y1="50" x2="55" y2="72" stroke="#7CE3F2" stroke-width="2.5" opacity="0.7"/>
+    <line x1="15" y1="65" x2="55" y2="87" stroke="#7CE3F2" stroke-width="2.5" opacity="0.7"/>
+    <line x1="15" y1="80" x2="55" y2="102" stroke="#7CE3F2" stroke-width="2.5" opacity="0.7"/>
+    <line x1="15" y1="95" x2="55" y2="117" stroke="#7CE3F2" stroke-width="2.5" opacity="0.7"/>
+  </g>
+  
+  <!-- Platform base -->
+  <g transform="translate(120, 280)">
+    <!-- Platform top -->
+    <path d="M0 30 L180 -20 L360 30 L180 80 Z" fill="#1B4B7F" opacity="0.4"/>
+    <path d="M180 80 L180 120 L360 70 L360 30 Z" fill="#0a1628" opacity="0.6"/>
+    <path d="M0 30 L0 70 L180 120 L180 80 Z" fill="#050a14" opacity="0.7"/>
+    
+    <!-- Network nodes on platform -->
+    <g transform="translate(70, 50)">
+      <rect x="0" y="0" width="30" height="20" rx="4" fill="#4DB8C4" opacity="0.7"/>
+      <rect x="3" y="5" width="24" height="10" fill="#6DD7E5" opacity="0.5"/>
+    </g>
+    <g transform="translate(165, 20)">
+      <rect x="0" y="0" width="30" height="20" rx="4" fill="#4DB8C4" opacity="0.7"/>
+      <rect x="3" y="5" width="24" height="10" fill="#6DD7E5" opacity="0.5"/>
+    </g>
+    <g transform="translate(260, 50)">
+      <rect x="0" y="0" width="30" height="20" rx="4" fill="#4DB8C4" opacity="0.7"/>
+      <rect x="3" y="5" width="24" height="10" fill="#6DD7E5" opacity="0.5"/>
+    </g>
+  </g>
+  
+  <!-- Connection lines -->
+  <line x1="130" y1="170" x2="190" y2="310" stroke="#6DD7E5" stroke-width="1.5" opacity="0.3" stroke-dasharray="5,5"/>
+  <line x1="300" y1="230" x2="285" y2="300" stroke="#6DD7E5" stroke-width="1.5" opacity="0.3" stroke-dasharray="5,5"/>
+  <line x1="470" y1="150" x2="380" y2="310" stroke="#6DD7E5" stroke-width="1.5" opacity="0.3" stroke-dasharray="5,5"/>
+  
+  <!-- Shield icon (bottom right) -->
+  <g transform="translate(480, 320)">
+    <path d="M40 10 L40 35 C40 50 30 60 20 65 C10 60 0 50 0 35 L0 10 L20 0 Z" fill="#10B981" opacity="0.7"/>
+    <path d="M10 25 L17 32 L30 19" stroke="white" stroke-width="2" fill="none" stroke-linecap="round"/>
+  </g>
+  
+  <!-- Small dots decoration -->
+  <circle cx="450" cy="200" r="3" fill="#6DD7E5" opacity="0.4"/>
+  <circle cx="470" cy="210" r="2" fill="#4DB8C4" opacity="0.4"/>
+  <circle cx="460" cy="225" r="2.5" fill="#7CE3F2" opacity="0.4"/>
+  
+  <!-- Left side dots -->
+  <circle cx="150" cy="300" r="3" fill="#6DD7E5" opacity="0.4"/>
+  <circle cx="130" cy="310" r="2" fill="#4DB8C4" opacity="0.4"/>
+  <circle cx="140" cy="325" r="2.5" fill="#7CE3F2" opacity="0.4"/>
+</svg>
+
diff --git a/src/presentation/web/assets/hero-servers.svg b/src/presentation/web/assets/hero-servers.svg
new file mode 100644
index 0000000..afc848e
--- /dev/null
+++ b/src/presentation/web/assets/hero-servers.svg
@@ -0,0 +1,85 @@
+<svg width="600" height="500" viewBox="0 0 600 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background elements -->
+  <circle cx="100" cy="80" r="30" fill="#1B4B7F" opacity="0.1"/>
+  <circle cx="520" cy="120" r="25" fill="#4DB8C4" opacity="0.15"/>
+  <circle cx="480" cy="420" r="35" fill="#6DD7E5" opacity="0.1"/>
+  
+  <!-- Server 1 (Top Left) -->
+  <g transform="translate(80, 60)">
+    <!-- Server top face -->
+    <path d="M50 0 L100 25 L50 50 L0 25 Z" fill="#4DB8C4" opacity="0.9"/>
+    <!-- Server front face -->
+    <path d="M0 25 L0 85 L50 110 L50 50 Z" fill="#1B4B7F" opacity="0.95"/>
+    <!-- Server right face -->
+    <path d="M50 50 L50 110 L100 85 L100 25 Z" fill="#6DD7E5" opacity="0.85"/>
+    <!-- Server lines -->
+    <line x1="10" y1="35" x2="40" y2="52" stroke="#7CE3F2" stroke-width="2" opacity="0.6"/>
+    <line x1="10" y1="45" x2="40" y2="62" stroke="#7CE3F2" stroke-width="2" opacity="0.6"/>
+    <line x1="10" y1="55" x2="40" y2="72" stroke="#7CE3F2" stroke-width="2" opacity="0.6"/>
+  </g>
+  
+  <!-- Server 2 (Top Right) -->
+  <g transform="translate(420, 40)">
+    <path d="M50 0 L100 25 L50 50 L0 25 Z" fill="#4DB8C4" opacity="0.9"/>
+    <path d="M0 25 L0 85 L50 110 L50 50 Z" fill="#1B4B7F" opacity="0.95"/>
+    <path d="M50 50 L50 110 L100 85 L100 25 Z" fill="#6DD7E5" opacity="0.85"/>
+    <line x1="10" y1="35" x2="40" y2="52" stroke="#7CE3F2" stroke-width="2" opacity="0.6"/>
+    <line x1="10" y1="45" x2="40" y2="62" stroke="#7CE3F2" stroke-width="2" opacity="0.6"/>
+    <line x1="10" y1="55" x2="40" y2="72" stroke="#7CE3F2" stroke-width="2" opacity="0.6"/>
+  </g>
+  
+  <!-- Server 3 (Center) - Main/Larger -->
+  <g transform="translate(230, 80)">
+    <path d="M70 0 L140 35 L70 70 L0 35 Z" fill="#4DB8C4" opacity="0.95"/>
+    <path d="M0 35 L0 115 L70 150 L70 70 Z" fill="#1B4B7F"/>
+    <path d="M70 70 L70 150 L140 115 L140 35 Z" fill="#6DD7E5" opacity="0.9"/>
+    <line x1="15" y1="50" x2="55" y2="72" stroke="#7CE3F2" stroke-width="2.5" opacity="0.7"/>
+    <line x1="15" y1="65" x2="55" y2="87" stroke="#7CE3F2" stroke-width="2.5" opacity="0.7"/>
+    <line x1="15" y1="80" x2="55" y2="102" stroke="#7CE3F2" stroke-width="2.5" opacity="0.7"/>
+    <line x1="15" y1="95" x2="55" y2="117" stroke="#7CE3F2" stroke-width="2.5" opacity="0.7"/>
+  </g>
+  
+  <!-- Platform base -->
+  <g transform="translate(120, 280)">
+    <!-- Platform top -->
+    <path d="M0 30 L180 -20 L360 30 L180 80 Z" fill="#1B4B7F" opacity="0.4"/>
+    <path d="M180 80 L180 120 L360 70 L360 30 Z" fill="#0a1628" opacity="0.6"/>
+    <path d="M0 30 L0 70 L180 120 L180 80 Z" fill="#050a14" opacity="0.7"/>
+    
+    <!-- Network nodes on platform -->
+    <g transform="translate(70, 50)">
+      <rect x="0" y="0" width="30" height="20" rx="4" fill="#4DB8C4" opacity="0.7"/>
+      <rect x="3" y="5" width="24" height="10" fill="#6DD7E5" opacity="0.5"/>
+    </g>
+    <g transform="translate(165, 20)">
+      <rect x="0" y="0" width="30" height="20" rx="4" fill="#4DB8C4" opacity="0.7"/>
+      <rect x="3" y="5" width="24" height="10" fill="#6DD7E5" opacity="0.5"/>
+    </g>
+    <g transform="translate(260, 50)">
+      <rect x="0" y="0" width="30" height="20" rx="4" fill="#4DB8C4" opacity="0.7"/>
+      <rect x="3" y="5" width="24" height="10" fill="#6DD7E5" opacity="0.5"/>
+    </g>
+  </g>
+  
+  <!-- Connection lines -->
+  <line x1="130" y1="170" x2="190" y2="310" stroke="#6DD7E5" stroke-width="1.5" opacity="0.3" stroke-dasharray="5,5"/>
+  <line x1="300" y1="230" x2="285" y2="300" stroke="#6DD7E5" stroke-width="1.5" opacity="0.3" stroke-dasharray="5,5"/>
+  <line x1="470" y1="150" x2="380" y2="310" stroke="#6DD7E5" stroke-width="1.5" opacity="0.3" stroke-dasharray="5,5"/>
+  
+  <!-- Shield icon (bottom right) -->
+  <g transform="translate(480, 320)">
+    <path d="M40 10 L40 35 C40 50 30 60 20 65 C10 60 0 50 0 35 L0 10 L20 0 Z" fill="#10B981" opacity="0.7"/>
+    <path d="M10 25 L17 32 L30 19" stroke="white" stroke-width="2" fill="none" stroke-linecap="round"/>
+  </g>
+  
+  <!-- Small dots decoration -->
+  <circle cx="450" cy="200" r="3" fill="#6DD7E5" opacity="0.4"/>
+  <circle cx="470" cy="210" r="2" fill="#4DB8C4" opacity="0.4"/>
+  <circle cx="460" cy="225" r="2.5" fill="#7CE3F2" opacity="0.4"/>
+  
+  <!-- Left side dots -->
+  <circle cx="150" cy="300" r="3" fill="#6DD7E5" opacity="0.4"/>
+  <circle cx="130" cy="310" r="2" fill="#4DB8C4" opacity="0.4"/>
+  <circle cx="140" cy="325" r="2.5" fill="#7CE3F2" opacity="0.4"/>
+</svg>
+
diff --git a/src/presentation/web/pages/landing/index.py b/src/presentation/web/pages/landing/index.py
index 80415de..3b16450 100644
--- a/src/presentation/web/pages/landing/index.py
+++ b/src/presentation/web/pages/landing/index.py
@@ -250,11 +250,11 @@ def hero() -> rx.Component:
                         filter="blur(50px)",
                         style={"animation": "pulse 4s ease-in-out infinite"},
                     ),
-                    # Main illustration - BluisHost style with person
+                    # Main illustration - BluisHost style isometric servers
                     rx.box(
                         rx.image(
-                            src="/hero-person.svg",
-                            width="520px",
+                            src="/hero-servers.svg",
+                            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"},