ehsan-minadd/peikarband
1
0
Fork 0
Code Issues Pull Requests Actions 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

47
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,13 +331,29 @@ 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
rx.image(
src="https://illustrations.popsy.co/violet/web-design.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 5s ease-in-out 1.3s infinite"},
# Main illustration - person with laptop
rx.box(
# Background shield decoration
rx.image(
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",
),
@@ -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(),