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

refactor: Clean and optimize both hero sections with unique visuals

Browse Source 
- Hero 1: Simplified with hero-person + 2 clean floating badges
- Hero 2: Changed to hero-shield focus + 3 floating stats (no person duplicate)
- Removed commented code
- Both sections now have distinct visual identity
This commit is contained in:
Ehsan.Asadi
2025-12-26 17:52:50 +03:30
parent c6a7e81582
commit c9de09bc9a
1 changed files with 127 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -128,21 +128,6 @@ def hero() -> rx.Component:
font_size="17px", font_size="17px",
style={"animation": "fadeInUp 0.8s ease-out 0.2s backwards"}, style={"animation": "fadeInUp 0.8s ease-out 0.2s backwards"},
), ),
# rx.badge(
# rx.hstack(
# rx.icon("sparkles", size=16, color="#6DD7E5"),
# rx.text("هاستینگ، دامین و DevOps", font_weight="600"),
# spacing="2",
# align="center",
# ),
# variant="outline",
# padding="12px 24px",
# border_radius="full",
# background="linear-gradient(135deg, rgba(77, 184, 196, 0.15), rgba(109, 215, 229, 0.15))",
# border="2px solid rgba(77, 184, 196, 0.5)",
# font_size="15px",
# box_shadow="0 8px 24px rgba(77, 184, 196, 0.3)",
# ),
rx.heading( rx.heading(
"میزبانی وب و زیرساخت ابری ", "میزبانی وب و زیرساخت ابری ",
rx.el.span("حرفه‌ای", rx.el.span("حرفه‌ای",
@@ -251,107 +236,77 @@ def hero() -> rx.Component:
z_index="1", z_index="1",
), ),
rx.box( rx.box(
# Main illustration with layered effects
rx.box( rx.box(
# Background glow layer # Background glow
rx.box( rx.box(
width="550px", width="500px",
height="550px", height="500px",
background="radial-gradient(circle, rgba(77, 184, 196, 0.15) 0%, transparent 70%)", background="radial-gradient(circle, rgba(77, 184, 196, 0.12) 0%, transparent 70%)",
position="absolute", position="absolute",
top="50%", top="50%",
left="50%", left="50%",
transform="translate(-50%, -50%)", transform="translate(-50%, -50%)",
border_radius="50%", border_radius="50%",
filter="blur(60px)", filter="blur(50px)",
style={"animation": "pulse 4s ease-in-out infinite"}, style={"animation": "pulse 4s ease-in-out infinite"},
), ),
# Floating card 1 - top right with shield # Floating security badge
rx.box( rx.box(
rx.vstack( rx.vstack(
rx.image(src="/hero-shield.svg", width="50px", height="auto"), rx.icon("shield-check", size=24, color="#10B981"),
rx.text("99.9%", font_size="24px", font_weight="900", color="white"), rx.text("امن", font_size="14px", font_weight="800", color="white"),
rx.text("امنیت", font_size="13px", color="#94A3B8", font_weight="600"), spacing="1",
spacing="2",
align="center", align="center",
), ),
position="absolute", position="absolute",
top="-20px", top="10%",
right="-30px", right="-20px",
padding="20px 28px", padding="16px 20px",
background="linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 146, 60, 0.1))", background="linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.15))",
border="2px solid rgba(245, 158, 11, 0.3)", border="2px solid rgba(16, 185, 129, 0.5)",
border_radius="20px",
backdrop_filter="blur(10px)",
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
rx.box(
rx.vstack(
rx.icon("zap", size=26, color="#F59E0B"),
rx.text("10x", font_size="22px", font_weight="900", color="white"),
rx.text("سریع‌تر", font_size="12px", color="#94A3B8", font_weight="600"),
spacing="2",
align="center",
),
position="absolute",
top="40%",
left="-40px",
padding="18px 24px",
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="18px",
backdrop_filter="blur(10px)",
box_shadow="0 10px 40px rgba(245, 158, 11, 0.3)",
style={"animation": "fadeInScale 0.6s ease-out 1.1s backwards, floatSlow 7s ease-in-out 1.7s infinite reverse"},
),
# Floating card 3 - bottom center
rx.box(
rx.hstack(
rx.icon("users", size=24, color="#6DD7E5"),
rx.vstack(
rx.text("1000+", font_size="20px", font_weight="900", color="white"),
rx.text("مشتری راضی", font_size="11px", color="#94A3B8", font_weight="600"),
spacing="0",
align="start",
),
spacing="3",
align="center",
),
position="absolute",
bottom="-10px",
left="50%",
transform="translateX(-50%)",
padding="16px 28px",
background="linear-gradient(135deg, rgba(109, 215, 229, 0.15), rgba(124, 227, 242, 0.1))",
border="2px solid rgba(109, 215, 229, 0.3)",
border_radius="16px", border_radius="16px",
backdrop_filter="blur(10px)", backdrop_filter="blur(12px)",
box_shadow="0 10px 40px rgba(109, 215, 229, 0.3)", box_shadow="0 8px 32px rgba(16, 185, 129, 0.3)",
style={"animation": "fadeInScale 0.6s ease-out 1.3s backwards, floatSlow 8s ease-in-out 1.9s infinite"}, style={"animation": "fadeInScale 0.6s ease-out 0.9s backwards, float 6s ease-in-out 1.5s infinite"},
), ),
# Main illustration - person with laptop # Floating speed badge
rx.box(
rx.vstack(
rx.icon("zap", size=24, color="#F59E0B"),
rx.text("سریع", font_size="14px", font_weight="800", color="white"),
spacing="1",
align="center",
),
position="absolute",
bottom="15%",
left="-25px",
padding="16px 20px",
background="linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 146, 60, 0.15))",
border="2px solid rgba(245, 158, 11, 0.5)",
border_radius="16px",
backdrop_filter="blur(12px)",
box_shadow="0 8px 32px rgba(245, 158, 11, 0.3)",
style={"animation": "fadeInScale 0.6s ease-out 1.1s backwards, float 7s ease-in-out 2s infinite reverse"},
),
# Main illustration
rx.box( rx.box(
# Background shield decoration
rx.image( rx.image(
src="/hero-shield.svg", src="/hero-shield.svg",
width="280px", width="200px",
height="auto", height="auto",
position="absolute", position="absolute",
top="-60px", top="-40px",
right="80px", right="100px",
opacity="0.2", opacity="0.15",
filter="blur(2px)", filter="blur(1px)",
style={"animation": "rotate 40s linear infinite"}, style={"animation": "rotate 50s linear infinite"},
), ),
# Main person image
rx.image( rx.image(
src="/hero-person.svg", src="/hero-person.svg",
width="550px", width="520px",
height="auto", height="auto",
filter="drop-shadow(0 20px 60px rgba(27, 75, 127, 0.4))", 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"}, style={"animation": "fadeInScale 1s ease-out 0.3s backwards, scaleFloat 6s ease-in-out 1.5s infinite"},
), ),
position="relative", position="relative",
), ),
@@ -504,24 +459,97 @@ def wordpress_cloud_highlight() -> rx.Component:
align="start", align="start",
width="100%", width="100%",
), ),
rx.box(
rx.box(
# Background glow
rx.box(
width="450px",
height="450px",
background="radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 70%)",
position="absolute",
top="50%",
left="50%",
transform="translate(-50%, -50%)",
border_radius="50%",
filter="blur(50px)",
style={"animation": "pulse 5s ease-in-out infinite"},
),
# Floating stats - Uptime
rx.box( rx.box(
rx.vstack( rx.vstack(
rx.text("99.9%", font_size="28px", font_weight="900", color="#F59E0B", line_height="1"),
rx.text("آپتایم", font_size="12px", color="#94A3B8", font_weight="700"),
spacing="1",
align="center",
),
position="absolute",
top="5%",
left="-10px",
padding="18px 24px",
background="rgba(20, 20, 35, 0.9)",
border="2px solid rgba(245, 158, 11, 0.4)",
border_radius="18px",
backdrop_filter="blur(12px)",
box_shadow="0 8px 32px rgba(245, 158, 11, 0.3)",
style={"animation": "float 7s ease-in-out infinite"},
),
# Floating stats - Speed
rx.box(
rx.vstack(
rx.text("10x", font_size="26px", font_weight="900", color="#10B981", line_height="1"),
rx.text("سرعت", font_size="12px", color="#94A3B8", font_weight="700"),
spacing="1",
align="center",
),
position="absolute",
top="45%",
right="-20px",
padding="16px 22px",
background="rgba(20, 20, 35, 0.9)",
border="2px solid rgba(16, 185, 129, 0.4)",
border_radius="16px",
backdrop_filter="blur(12px)",
box_shadow="0 8px 32px rgba(16, 185, 129, 0.3)",
style={"animation": "float 8s ease-in-out 1s infinite reverse"},
),
# Floating stats - Support
rx.box(
rx.vstack(
rx.text("24/7", font_size="24px", font_weight="900", color="#6DD7E5", line_height="1"),
rx.text("پشتیبانی", font_size="11px", color="#94A3B8", font_weight="700"),
spacing="1",
align="center",
),
position="absolute",
bottom="8%",
left="20%",
padding="14px 20px",
background="rgba(20, 20, 35, 0.9)",
border="2px solid rgba(109, 215, 229, 0.4)",
border_radius="14px",
backdrop_filter="blur(12px)",
box_shadow="0 8px 32px rgba(109, 215, 229, 0.3)",
style={"animation": "float 6s ease-in-out 0.5s infinite"},
),
# Main shield illustration
rx.box( rx.box(
rx.image( rx.image(
src="/hero-person.svg", src="/hero-shield.svg",
width="450px", width="380px",
height="auto", height="auto",
style={"animation": "float 6s ease-in-out infinite"}, filter="drop-shadow(0 20px 60px rgba(245, 158, 11, 0.5))",
style={"animation": "scaleFloat 7s ease-in-out infinite"},
), ),
padding="40px", padding="50px",
background="linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 146, 60, 0.1))", background="linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(251, 146, 60, 0.08))",
border="3px solid rgba(245, 158, 11, 0.3)", border="3px solid rgba(245, 158, 11, 0.3)",
border_radius="32px", border_radius="32px",
box_shadow="0 25px 80px rgba(245, 158, 11, 0.4)", box_shadow="0 25px 80px rgba(245, 158, 11, 0.4)",
_hover={"transform": "scale(1.05) rotate(2deg)", "box_shadow": "0 30px 100px rgba(245, 158, 11, 0.6)"},
transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
), ),
spacing="6", position="relative",
display="flex",
align_items="center",
justify_content="center",
), ),
display=["none", "none", "none", "block"], display=["none", "none", "none", "block"],
width="50%", width="50%",