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

[DESIGN-003] Add layered hero section with floating elements (feat)
Some checks failed
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
CD - Build & Deploy / release (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 animated background gradient layers (3 floating blobs)
- Created floating stats cards around main illustration
- Implemented smooth animations (floatSlow, scaleFloat)
- Added depth and parallax effects
- Improved visual hierarchy with z-index layering
- Enhanced dark theme compatibility
- All animations are smooth and GPU-accelerated

Inspired by modern cloud hosting landing pages
This commit is contained in:
Ehsan.Asadi
2025-12-26 16:31:14 +03:30
parent 975eddfcc7
commit 9ad6ba6449
3 changed files with 169 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
assets/custom.css
View File

@@ -29,3 +29,20 @@ body {
50% { transform: translateY(-20px); }
}
@keyframes floatSlow {
0%, 100% { transform: translateY(0px) translateX(0px); }
25% { transform: translateY(-15px) translateX(10px); }
50% { transform: translateY(-30px) translateX(0px); }
75% { transform: translateY(-15px) translateX(-10px); }
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes scaleFloat {
0%, 100% { transform: scale(1) translateY(0px); }
50% { transform: scale(1.05) translateY(-15px); }
}

17
src/presentation/web/assets/custom.css
View File

@@ -29,3 +29,20 @@ body {
50% { transform: translateY(-20px); }
}
@keyframes floatSlow {
0%, 100% { transform: translateY(0px) translateX(0px); }
25% { transform: translateY(-15px) translateX(10px); }
50% { transform: translateY(-30px) translateX(0px); }
75% { transform: translateY(-15px) translateX(-10px); }
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes scaleFloat {
0%, 100% { transform: scale(1) translateY(0px); }
50% { transform: scale(1.05) translateY(-15px); }
}

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

@@ -66,6 +66,48 @@ def navbar() -> rx.Component:
def hero() -> rx.Component:
return rx.box(
# Background decorative layers
rx.box(
rx.box(
width="600px",
height="600px",
background="radial-gradient(circle, rgba(27, 75, 127, 0.3) 0%, transparent 70%)",
position="absolute",
top="-200px",
left="-100px",
border_radius="50%",
filter="blur(100px)",
style={"animation": "floatSlow 20s ease-in-out infinite"},
),
rx.box(
width="500px",
height="500px",
background="radial-gradient(circle, rgba(77, 184, 196, 0.25) 0%, transparent 70%)",
position="absolute",
top="100px",
right="-150px",
border_radius="50%",
filter="blur(80px)",
style={"animation": "floatSlow 18s ease-in-out infinite reverse"},
),
rx.box(
width="400px",
height="400px",
background="radial-gradient(circle, rgba(109, 215, 229, 0.2) 0%, transparent 70%)",
position="absolute",
bottom="-100px",
right="20%",
border_radius="50%",
filter="blur(90px)",
style={"animation": "floatSlow 22s ease-in-out infinite"},
),
position="absolute",
width="100%",
height="100%",
overflow="hidden",
z_index="0",
),
# Main content with floating cards
rx.hstack(
rx.vstack(
rx.badge(
@@ -201,15 +243,103 @@ def hero() -> rx.Component:
spacing="8",
align="start",
width="100%",
position="relative",
z_index="1",
),
rx.box(
# Main illustration with layered effects
rx.box(
# Background glow layer
rx.box(
width="550px",
height="550px",
background="radial-gradient(circle, rgba(77, 184, 196, 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 right
rx.box(
rx.vstack(
rx.icon("shield-check", size=28, color="#10B981"),
rx.text("99.9%", font_size="24px", font_weight="900", color="white"),
rx.text("Uptime", font_size="13px", color="#94A3B8", font_weight="600"),
spacing="2",
align="center",
),
position="absolute",
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)",
border_radius="20px",
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 - 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": "floatSlow 7s ease-in-out 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",
backdrop_filter="blur(10px)",
box_shadow="0 10px 40px rgba(109, 215, 229, 0.3)",
style={"animation": "floatSlow 8s ease-in-out 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.3))",
filter="drop-shadow(0 20px 60px rgba(27, 75, 127, 0.4))",
style={"animation": "scaleFloat 5s ease-in-out infinite"},
),
position="relative",
),
display=["none", "none", "none", "block"],
position="relative",
z_index="1",
),
spacing="9",
align="center",