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

refactor: Simplified WordPress cloud section with single floating hero-person image

Browse Source
This commit is contained in:
Ehsan.Asadi
2025-12-26 17:48:45 +03:30
parent 814e530255
commit c6a7e81582
1 changed files with 10 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -504,106 +504,24 @@ def wordpress_cloud_highlight() -> rx.Component:
align="start",
width="100%",
),
rx.box(
# Layered illustration with floating elements
rx.box(
# Background glow layer
rx.box(
width="480px",
height="480px",
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(60px)",
style={"animation": "pulse 4s ease-in-out infinite"},
),
# Floating card 1 - top left with security icon
rx.box(
rx.vstack(
rx.icon("shield-check", size=28, color="#10B981"),
rx.text("امن", font_size="16px", font_weight="800", color="white"),
spacing="2",
align="center",
),
position="absolute",
top="-10px",
left="-20px",
padding="16px 20px",
background="linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.1))",
border="2px solid rgba(16, 185, 129, 0.4)",
border_radius="16px",
backdrop_filter="blur(10px)",
box_shadow="0 10px 40px rgba(16, 185, 129, 0.3)",
style={"animation": "floatSlow 6s ease-in-out infinite"},
),
# Floating card 2 - right middle with speed icon
rx.box(
rx.vstack(
rx.icon("zap", size=26, color="#F59E0B"),
rx.text("سریع", font_size="15px", font_weight="800", color="white"),
spacing="2",
align="center",
),
position="absolute",
top="35%",
right="-30px",
padding="15px 18px",
background="linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 146, 60, 0.1))",
border="2px solid rgba(245, 158, 11, 0.4)",
border_radius="15px",
backdrop_filter="blur(10px)",
box_shadow="0 10px 40px rgba(245, 158, 11, 0.3)",
style={"animation": "floatSlow 7s ease-in-out infinite reverse"},
),
# Floating card 3 - bottom center with cloud icon
rx.box(
rx.hstack(
rx.icon("cloud", size=22, color="#6DD7E5"),
rx.text("کلود اختصاصی", font_size="14px", font_weight="800", color="white"),
spacing="2",
align="center",
),
position="absolute",
bottom="0px",
left="50%",
transform="translateX(-50%)",
padding="14px 24px",
background="linear-gradient(135deg, rgba(109, 215, 229, 0.15), rgba(124, 227, 242, 0.1))",
border="2px solid rgba(109, 215, 229, 0.4)",
border_radius="14px",
backdrop_filter="blur(10px)",
box_shadow="0 10px 40px rgba(109, 215, 229, 0.3)",
style={"animation": "floatSlow 8s ease-in-out 1s infinite"},
),
# Main illustration
rx.box(
# Background shield decoration
rx.image(
src="/hero-shield.svg",
width="240px",
height="auto",
position="absolute",
top="-40px",
left="60px",
opacity="0.15",
filter="blur(2px)",
style={"animation": "rotate 40s linear infinite"},
),
# Main person image
rx.image(
src="/hero-person.svg",
width="420px",
width="450px",
height="auto",
filter="drop-shadow(0 20px 60px rgba(245, 158, 11, 0.4))",
style={"animation": "scaleFloat 5s ease-in-out infinite"},
style={"animation": "float 6s ease-in-out infinite"},
),
position="relative",
padding="40px",
background="linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 146, 60, 0.1))",
border="3px solid rgba(245, 158, 11, 0.3)",
border_radius="32px",
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)",
),
position="relative",
spacing="6",
),
display=["none", "none", "none", "block"],
width="50%",