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

feat: Enhanced WordPress cloud section with layered floating design using hero SVGs

Browse Source
This commit is contained in:
Ehsan.Asadi
2025-12-26 17:33:25 +03:30
parent cf82b9d3f4
commit 814e530255
3 changed files with 94 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/hero-person.svg
View File

@@ -54,3 +54,4 @@
<!-- Background circle -->
<circle cx="450" cy="200" r="100" fill="#D1FAE5" opacity="0.3"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

1
assets/hero-shield.svg
View File

@@ -17,3 +17,4 @@
<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 Swipe Overlay

Before

Width:  |  Height:  |  Size: 977 B

After

Width:  |  Height:  |  Size: 978 B

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

@@ -505,58 +505,108 @@ def wordpress_cloud_highlight() -> rx.Component:
width="100%",
),
rx.box(
rx.vstack(
# Layered illustration with floating elements
rx.box(
rx.image(
src="https://illustrations.popsy.co/violet/cloud-hosting.svg",
width="450px",
height="auto",
# 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"},
),
padding="40px",
# 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="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)",
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.vstack(
rx.text("99.9%", font_size="36px", font_weight="900", color="#F59E0B", line_height="1"),
rx.text("آپتایم", font_size="14px", color="#94A3B8", font_weight="600"),
align="center",
padding="24px",
background="rgba(30, 30, 50, 0.8)",
border="2px solid rgba(245, 158, 11, 0.3)",
border_radius="20px",
rx.icon("cloud", size=22, color="#6DD7E5"),
rx.text("کلود اختصاصی", font_size="14px", font_weight="800", color="white"),
spacing="2",
),
rx.vstack(
rx.text("24/7", font_size="36px", font_weight="900", color="#10B981", line_height="1"),
rx.text("پشتیبانی", font_size="14px", color="#94A3B8", font_weight="600"),
align="center",
padding="24px",
background="rgba(30, 30, 50, 0.8)",
border="2px solid rgba(16, 185, 129, 0.3)",
border_radius="20px",
spacing="2",
),
rx.vstack(
rx.text("10x", font_size="36px", font_weight="900", color="#4DB8C4", line_height="1"),
rx.text("سریع‌تر", font_size="14px", color="#94A3B8", font_weight="600"),
align="center",
padding="24px",
background="rgba(30, 30, 50, 0.8)",
border="2px solid rgba(77, 184, 196, 0.3)",
border_radius="20px",
spacing="2",
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"},
),
spacing="5",
margin_top="32px",
# 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"},
),
spacing="6",
# Main person image
rx.image(
src="/hero-person.svg",
width="420px",
height="auto",
filter="drop-shadow(0 20px 60px rgba(245, 158, 11, 0.4))",
style={"animation": "scaleFloat 5s ease-in-out infinite"},
),
position="relative",
padding="40px",
),
position="relative",
),
display=["none", "none", "none", "block"],
width="50%",
),
spacing="9",
align="center",
@@ -1296,7 +1346,6 @@ def index() -> rx.Component:
hero(),
wordpress_cloud_highlight(),
services_section(),
about_section(),
# pricing_section(),
# server_comparison(),