From c152cda75e326831968361b566a09ed611878686 Mon Sep 17 00:00:00 2001 From: "Ehsan.Asadi" Date: Fri, 26 Dec 2025 18:39:41 +0330 Subject: [PATCH] fix: Correct hero sections based on user feedback - 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 --- src/presentation/web/pages/landing/index.py | 109 ++------------------ 1 file changed, 11 insertions(+), 98 deletions(-) diff --git a/src/presentation/web/pages/landing/index.py b/src/presentation/web/pages/landing/index.py index 1740a46..80415de 100644 --- a/src/presentation/web/pages/landing/index.py +++ b/src/presentation/web/pages/landing/index.py @@ -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(""), position="relative", padding="40px", background="linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 146, 60, 0.12))",