ehsan-minadd/peikarband
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: Add BluisHost-style isometric servers to hero section

Browse Source 
- Created hero-servers.svg with isometric 3D server design
- Matches BluisHost reference with cyan/blue color scheme
- Replaced person illustration with server infrastructure visual
This commit is contained in:
Ehsan.Asadi
2025-12-26 18:44:02 +03:30
parent c152cda75e
commit 4d4dea9844
3 changed files with 173 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/presentation/web/assets/hero-servers.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

6
src/presentation/web/pages/landing/index.py
View File

@@ -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"},