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

fix: Correct hero sections based on user feedback

Browse Source 
- Hero 1: Removed floating icons, kept simple BluisHost-style with central person image
- Hero 2 (WordPress): Changed code icon to actual WordPress logo SVG
- Both sections now match user requirements exactly
This commit is contained in:
Ehsan.Asadi
2025-12-26 18:39:41 +03:30
parent f2a669f295
commit c152cda75e
1 changed files with 11 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -239,116 +239,29 @@ def hero() -> rx.Component:
rx.box(
# Background glow
rx.box(
width="600px",
height="600px",
background="radial-gradient(circle, rgba(77, 184, 196, 0.15) 0%, transparent 70%)",
width="500px",
height="500px",
background="radial-gradient(circle, rgba(77, 184, 196, 0.12) 0%, transparent 70%)",
position="absolute",
top="50%",
left="50%",
transform="translate(-50%, -50%)",
border_radius="50%",
filter="blur(60px)",
style={"animation": "pulse 5s ease-in-out infinite"},
z_index="0",
filter="blur(50px)",
style={"animation": "pulse 4s ease-in-out infinite"},
),
# Main illustration - centered
# Main illustration - BluisHost style with person
rx.box(
rx.image(
src="/hero-person.svg",
width="500px",
width="520px",
height="auto",
filter="drop-shadow(0 25px 70px rgba(27, 75, 127, 0.5))",
style={"animation": "fadeInScale 1s ease-out 0.3s backwards, scaleFloat 7s ease-in-out 1.5s infinite"},
filter="drop-shadow(0 20px 60px rgba(27, 75, 127, 0.4))",
style={"animation": "fadeInScale 1s ease-out 0.3s backwards, scaleFloat 6s ease-in-out 1.5s infinite"},
),
position="relative",
z_index="2",
),
# Floating element 1: Server (top-left)
rx.box(
rx.icon("server", size=70, color="#4DB8C4"),
position="absolute",
top="5%",
left="5%",
padding="24px",
background="linear-gradient(135deg, rgba(27, 75, 127, 0.25), rgba(77, 184, 196, 0.2))",
border="2px solid rgba(77, 184, 196, 0.4)",
border_radius="24px",
backdrop_filter="blur(12px)",
box_shadow="0 12px 40px rgba(27, 75, 127, 0.4)",
opacity="0.8",
z_index="1",
style={"animation": "fadeInScale 0.8s ease-out 0.5s backwards, floatComplex 8s ease-in-out 1.5s infinite"},
),
# Floating element 2: Database (top-right)
rx.box(
rx.icon("database", size=65, color="#6DD7E5"),
position="absolute",
top="8%",
right="8%",
padding="22px",
background="linear-gradient(135deg, rgba(109, 215, 229, 0.25), rgba(77, 184, 196, 0.2))",
border="2px solid rgba(109, 215, 229, 0.4)",
border_radius="20px",
backdrop_filter="blur(12px)",
box_shadow="0 10px 35px rgba(109, 215, 229, 0.4)",
opacity="0.75",
z_index="3",
style={"animation": "fadeInScale 0.8s ease-out 0.7s backwards, bobFloat 7s ease-in-out 2s infinite"},
),
# Floating element 3: Cloud (bottom-left)
rx.box(
rx.icon("cloud", size=75, color="#7CE3F2"),
position="absolute",
bottom="12%",
left="2%",
padding="26px",
background="linear-gradient(135deg, rgba(124, 227, 242, 0.25), rgba(109, 215, 229, 0.2))",
border="2px solid rgba(124, 227, 242, 0.4)",
border_radius="26px",
backdrop_filter="blur(12px)",
box_shadow="0 14px 45px rgba(124, 227, 242, 0.4)",
opacity="0.8",
z_index="1",
style={"animation": "fadeInScale 0.8s ease-out 0.9s backwards, floatDiagonal 9s ease-in-out 1.8s infinite"},
),
# Floating element 4: Shield (middle-right)
rx.box(
rx.icon("shield", size=60, color="#10B981"),
position="absolute",
top="45%",
right="2%",
padding="20px",
background="linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.2))",
border="2px solid rgba(16, 185, 129, 0.4)",
border_radius="18px",
backdrop_filter="blur(12px)",
box_shadow="0 10px 35px rgba(16, 185, 129, 0.4)",
opacity="0.75",
z_index="3",
style={"animation": "fadeInScale 0.8s ease-out 1.1s backwards, scaleBreath 6s ease-in-out 2.2s infinite"},
),
# Floating element 5: Lightning/Speed (bottom-right)
rx.box(
rx.icon("zap", size=55, color="#F59E0B"),
position="absolute",
bottom="10%",
right="10%",
padding="18px",
background="linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(251, 146, 60, 0.2))",
border="2px solid rgba(245, 158, 11, 0.4)",
border_radius="16px",
backdrop_filter="blur(12px)",
box_shadow="0 10px 35px rgba(245, 158, 11, 0.4)",
opacity="0.7",
z_index="1",
style={"animation": "fadeInScale 0.8s ease-out 1.3s backwards, float 8s ease-in-out 2.5s infinite reverse"},
),
position="relative",
width="600px",
height="600px",
display="flex",
align_items="center",
justify_content="center",
),
display=["none", "none", "none", "block"],
position="relative",
@@ -513,9 +426,9 @@ def wordpress_cloud_highlight() -> rx.Component:
style={"animation": "pulse 6s ease-in-out infinite"},
z_index="0",
),
# Central WordPress icon/logo - using code icon as WordPress placeholder
# Central WordPress icon
rx.box(
rx.icon("code", size=140, color="#F59E0B"),
rx.html("<svg viewBox='0 0 24 24' width='140' height='140' fill='#F59E0B'><path d='M12.158 12.786L9.46 20.625 12.158 12.786z M3.648 12c0 3.162 1.75 5.92 4.342 7.358L4.285 8.87C3.858 9.826 3.648 10.887 3.648 12z M20.352 12c0-.936-.18-1.81-.504-2.598-.308-.788-.672-1.454-1.092-1.958-.42-.504-.756-.84-.924-1.008-.168-.168-.252-.336-.252-.504 0-.168.084-.336.252-.504.168-.168.42-.252.756-.252h.084c-1.344-1.26-3.15-2.016-5.124-2.016-2.646 0-4.956 1.344-6.3 3.36.336-.024.672-.036 1.008-.036.672 0 1.722.084 1.722.084.336.024.378.504.042.546 0 0-.336.042-.714.06l2.268 6.762 1.362-4.086-1.008-2.676c-.336-.018-.672-.06-.672-.06-.336-.024-.294-.57.042-.546 0 0 1.074.084 1.722.084.672 0 1.722-.084 1.722-.084.336-.024.378.504.042.546 0 0-.336.042-.714.06l2.25 6.702.63-2.1c.252-.84.42-1.428.42-1.932z M12.252 13.032l-1.866 5.418c.546.168 1.134.252 1.722.252.714 0 1.386-.126 2.016-.336-.018-.024-.03-.054-.042-.084l-1.83-5.25z M20.352 12c0 .42-.042.84-.126 1.26-.084.42-.21.882-.378 1.386l-1.89 5.46c1.89-1.092 3.168-3.15 3.168-5.502 0-1.092-.294-2.142-.774-3.024.336.672.546 1.428.546 2.22z M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2z'/></svg>"),
position="relative",
padding="40px",
background="linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 146, 60, 0.12))",