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

[DESIGN-005] Replace illustrations with custom hero images (feat)
Some checks failed
CD - Build & Deploy / release (push) Has been cancelled
Details
CD - Build & Deploy / build-and-push (push) Has been cancelled
Details
CD - Build & Deploy / package-helm (push) Has been cancelled
Details
CD - Build & Deploy / deploy-staging (push) Has been cancelled
Details
CD - Build & Deploy / deploy-production (push) Has been cancelled
Details
CI / test (3.11) (push) Has been cancelled
Details
CI / test (3.12) (push) Has been cancelled
Details
CI / security (push) Has been cancelled
Details

Browse Source 
- Added custom SVG illustrations (shield and person with laptop)
- Replaced generic illustration with branded hero image
- Shield decoration in background with rotation animation
- Updated floating card to use shield icon
- Changed colors to match new illustrations (gold/orange shield)
- Person with laptop matches brand identity
- All images stored in assets/ for local control
This commit is contained in:
Ehsan.Asadi
2025-12-26 17:06:52 +03:30
parent 1dab36d4ef
commit cf82b9d3f4
3 changed files with 107 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
assets/hero-person.svg Normal file
View File

@@ -0,0 +1,56 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 600">
<!-- Person with laptop -->
<defs>
<linearGradient id="laptopGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
<stop offset="100%" style="stop-color:#1e40af;stop-opacity:1" />
</linearGradient>
</defs>
<!-- Table/Desk -->
<rect x="0" y="350" width="540" height="20" fill="#F59E0B" rx="5"/>
<rect x="520" y="350" width="20" height="250" fill="#9CA3AF" rx="3"/>
<!-- Laptop -->
<rect x="80" y="250" width="200" height="120" fill="url(#laptopGrad)" rx="8" stroke="#1e40af" stroke-width="3"/>
<rect x="95" y="270" width="170" height="80" fill="#1e3a8a" rx="4"/>
<!-- Login box -->
<rect x="110" y="285" width="140" height="50" fill="#374151" rx="6"/>
<circle cx="125" cy="300" r="3" fill="#10B981"/>
<circle cx="145" cy="300" r="3" fill="#10B981"/>
<circle cx="165" cy="300" r="3" fill="#10B981"/>
<circle cx="185" cy="300" r="3" fill="#10B981"/>
<circle cx="205" cy="300" r="3" fill="#10B981"/>
<rect x="115" y="315" width="120" height="12" fill="#10B981" rx="6"/>
<!-- Browser dots -->
<circle cx="225" cy="265" r="3" fill="#EF4444"/>
<circle cx="240" cy="265" r="3" fill="#F59E0B"/>
<circle cx="255" cy="265" r="3" fill="#10B981"/>
<!-- Person -->
<!-- Head -->
<circle cx="400" cy="80" r="40" fill="#FCA5A5"/>
<!-- Hair -->
<path d="M360 70 Q370 40, 400 35 Q430 40, 440 70 Q440 90, 420 95 L380 95 Q360 90, 360 70 Z" fill="#1e3a8a"/>
<!-- Body (Green shirt) -->
<rect x="350" y="120" width="100" height="150" fill="#10B981" rx="10"/>
<path d="M350 130 Q400 140, 450 130" stroke="#059669" stroke-width="3" fill="none"/>
<!-- Arms -->
<rect x="320" y="150" width="30" height="80" fill="#FCA5A5" rx="8"/>
<rect x="450" y="150" width="30" height="80" fill="#FCA5A5" rx="8"/>
<!-- Hands on laptop -->
<ellipse cx="280" cy="260" rx="20" ry="12" fill="#FCA5A5"/>
<ellipse cx="380" cy="280" rx="20" ry="12" fill="#FCA5A5"/>
<!-- Legs (Blue pants) -->
<rect x="360" y="270" width="35" height="150" fill="#3b82f6" rx="8"/>
<rect x="405" y="270" width="35" height="150" fill="#2563eb" rx="8"/>
<!-- Background circle -->
<circle cx="450" cy="200" r="100" fill="#D1FAE5" opacity="0.3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

19
assets/hero-shield.svg Normal file
View File

@@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 300">
<!-- Shield gradient -->
<defs>
<linearGradient id="shieldGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#F59E0B;stop-opacity:1" />
<stop offset="50%" style="stop-color:#B8860B;stop-opacity:1" />
<stop offset="100%" style="stop-color:#1e3a8a;stop-opacity:1" />
</linearGradient>
</defs>
<!-- Outer shield -->
<path d="M125 10 C80 10, 40 20, 20 40 C20 120, 40 220, 125 280 C210 220, 230 120, 230 40 C210 20, 170 10, 125 10 Z"
fill="url(#shieldGrad)" stroke="#D97706" stroke-width="3"/>
<!-- Inner shield -->
<path d="M125 40 C95 40, 70 47, 55 60 C55 120, 70 200, 125 250 C180 200, 195 120, 195 60 C180 47, 155 40, 125 40 Z"
fill="#4B5563" opacity="0.8"/>
<!-- Check mark -->
<path d="M90 130 L110 160 L165 100"
stroke="#10B981" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 977 B

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

@@ -266,12 +266,12 @@ def hero() -> rx.Component:
filter="blur(60px)",
style={"animation": "pulse 4s ease-in-out infinite"},
),
# Floating card 1 - top right
# Floating card 1 - top right with shield
rx.box(
rx.vstack(
rx.icon("shield-check", size=28, color="#10B981"),
rx.image(src="/hero-shield.svg", width="50px", height="auto"),
rx.text("99.9%", font_size="24px", font_weight="900", color="white"),
rx.text("Uptime", font_size="13px", color="#94A3B8", font_weight="600"),
rx.text("امنیت", font_size="13px", color="#94A3B8", font_weight="600"),
spacing="2",
align="center",
),
@@ -279,11 +279,11 @@ def hero() -> rx.Component:
top="-20px",
right="-30px",
padding="20px 28px",
background="linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.1))",
border="2px solid rgba(16, 185, 129, 0.3)",
background="linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 146, 60, 0.1))",
border="2px solid rgba(245, 158, 11, 0.3)",
border_radius="20px",
backdrop_filter="blur(10px)",
box_shadow="0 10px 40px rgba(16, 185, 129, 0.3)",
box_shadow="0 10px 40px rgba(245, 158, 11, 0.3)",
style={"animation": "fadeInScale 0.6s ease-out 0.9s backwards, floatSlow 6s ease-in-out 1.5s infinite"},
),
# Floating card 2 - left middle
@@ -331,16 +331,32 @@ def hero() -> rx.Component:
box_shadow="0 10px 40px rgba(109, 215, 229, 0.3)",
style={"animation": "fadeInScale 0.6s ease-out 1.3s backwards, floatSlow 8s ease-in-out 1.9s infinite"},
),
# Main image
# Main illustration - person with laptop
rx.box(
# Background shield decoration
rx.image(
src="https://illustrations.popsy.co/violet/web-design.svg",
width="600px",
src="/hero-shield.svg",
width="280px",
height="auto",
position="absolute",
top="-60px",
right="80px",
opacity="0.2",
filter="blur(2px)",
style={"animation": "rotate 40s linear infinite"},
),
# Main person image
rx.image(
src="/hero-person.svg",
width="550px",
height="auto",
filter="drop-shadow(0 20px 60px rgba(27, 75, 127, 0.4))",
style={"animation": "fadeInScale 1s ease-out 0.3s backwards, scaleFloat 5s ease-in-out 1.3s infinite"},
),
position="relative",
),
position="relative",
),
display=["none", "none", "none", "block"],
position="relative",
z_index="1",
@@ -599,7 +615,7 @@ def about_section() -> rx.Component:
padding="10px 24px",
border_radius="full",
),
rx.heading("مزایای انتخاب پیکربند", size="9", color="white", font_weight="900", letter_spacing="-0.03em", margin_top="16px"),
rx.heading("زایای انتخاب پیکربند", size="9", color="white", font_weight="900", letter_spacing="-0.03em", margin_top="16px"),
rx.text(
"ارائه‌دهنده معتبر خدمات هاستینگ و زیرساخت ابری در ایران",
color="#94A3B8",
@@ -1279,8 +1295,9 @@ def index() -> rx.Component:
navbar(),
hero(),
wordpress_cloud_highlight(),
about_section(),
services_section(),
about_section(),
# pricing_section(),
# server_comparison(),
# testimonials_section(),