From f2a669f29525fc3b7e21bd623e549cf296e789b8 Mon Sep 17 00:00:00 2001 From: "Ehsan.Asadi" Date: Fri, 26 Dec 2025 18:35:53 +0330 Subject: [PATCH] feat: Redesign both hero sections with BluisHost-inspired floating elements Hero 1 (Main): - Added 5 floating tech icons (server, database, cloud, shield, lightning) - BluisHost-style layered composition with central person illustration - Staggered animations with unique timing for each element - Blue brand color scheme maintained Hero 2 (WordPress Cloud): - Redesigned with central WordPress/code icon as focal point - Added 6 floating WordPress ecosystem icons (shield, cloud, zap, package, database, settings) - Repositioned 3 stats cards (99.9%, 10x, 24/7) around edges - Orange/gold theme for clear visual distinction - More organic layout matching Hero 1 style Animations: - Added new CSS keyframes: floatComplex, rotateSubtle, scaleBreath, floatDiagonal, bobFloat - Each element has unique animation timing and duration - GPU-accelerated CSS animations for smooth performance Both sections now have distinct visual identities while maintaining consistent floating element design language --- assets/custom.css | 53 +++ src/presentation/web/assets/custom.css | 53 +++ src/presentation/web/pages/landing/index.py | 365 ++++++++++++++------ 3 files changed, 357 insertions(+), 114 deletions(-) diff --git a/assets/custom.css b/assets/custom.css index 6907d9c..2080416 100644 --- a/assets/custom.css +++ b/assets/custom.css @@ -79,3 +79,56 @@ body { } } +@keyframes floatComplex { + 0%, 100% { + transform: translateY(0px) translateX(0px) rotate(0deg); + } + 25% { + transform: translateY(-20px) translateX(15px) rotate(5deg); + } + 50% { + transform: translateY(-35px) translateX(5px) rotate(-3deg); + } + 75% { + transform: translateY(-18px) translateX(-12px) rotate(4deg); + } +} + +@keyframes rotateSubtle { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +@keyframes scaleBreath { + 0%, 100% { + transform: scale(1); + opacity: 0.7; + } + 50% { + transform: scale(1.1); + opacity: 0.9; + } +} + +@keyframes floatDiagonal { + 0%, 100% { + transform: translate(0, 0); + } + 50% { + transform: translate(-25px, -25px); + } +} + +@keyframes bobFloat { + 0%, 100% { + transform: translateY(0px) scale(1); + } + 50% { + transform: translateY(-25px) scale(1.05); + } +} + diff --git a/src/presentation/web/assets/custom.css b/src/presentation/web/assets/custom.css index 6907d9c..2080416 100644 --- a/src/presentation/web/assets/custom.css +++ b/src/presentation/web/assets/custom.css @@ -79,3 +79,56 @@ body { } } +@keyframes floatComplex { + 0%, 100% { + transform: translateY(0px) translateX(0px) rotate(0deg); + } + 25% { + transform: translateY(-20px) translateX(15px) rotate(5deg); + } + 50% { + transform: translateY(-35px) translateX(5px) rotate(-3deg); + } + 75% { + transform: translateY(-18px) translateX(-12px) rotate(4deg); + } +} + +@keyframes rotateSubtle { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +@keyframes scaleBreath { + 0%, 100% { + transform: scale(1); + opacity: 0.7; + } + 50% { + transform: scale(1.1); + opacity: 0.9; + } +} + +@keyframes floatDiagonal { + 0%, 100% { + transform: translate(0, 0); + } + 50% { + transform: translate(-25px, -25px); + } +} + +@keyframes bobFloat { + 0%, 100% { + transform: translateY(0px) scale(1); + } + 50% { + transform: translateY(-25px) scale(1.05); + } +} + diff --git a/src/presentation/web/pages/landing/index.py b/src/presentation/web/pages/landing/index.py index 1b3adcb..1740a46 100644 --- a/src/presentation/web/pages/landing/index.py +++ b/src/presentation/web/pages/landing/index.py @@ -239,78 +239,116 @@ def hero() -> rx.Component: rx.box( # Background glow rx.box( - width="500px", - height="500px", - background="radial-gradient(circle, rgba(77, 184, 196, 0.12) 0%, transparent 70%)", + width="600px", + height="600px", + 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(50px)", - style={"animation": "pulse 4s ease-in-out infinite"}, + filter="blur(60px)", + style={"animation": "pulse 5s ease-in-out infinite"}, + z_index="0", ), - # Floating security badge + # Main illustration - centered rx.box( - rx.vstack( - rx.icon("shield-check", size=24, color="#10B981"), - rx.text("امن", font_size="14px", font_weight="800", color="white"), - spacing="1", - align="center", - ), - position="absolute", - top="10%", - right="-20px", - padding="16px 20px", - background="linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.15))", - border="2px solid rgba(16, 185, 129, 0.5)", - border_radius="16px", - backdrop_filter="blur(12px)", - box_shadow="0 8px 32px rgba(16, 185, 129, 0.3)", - style={"animation": "fadeInScale 0.6s ease-out 0.9s backwards, float 6s ease-in-out 1.5s infinite"}, - ), - # Floating speed badge - rx.box( - rx.vstack( - rx.icon("zap", size=24, color="#F59E0B"), - rx.text("سریع", font_size="14px", font_weight="800", color="white"), - spacing="1", - align="center", - ), - position="absolute", - bottom="15%", - left="-25px", - padding="16px 20px", - background="linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 146, 60, 0.15))", - border="2px solid rgba(245, 158, 11, 0.5)", - border_radius="16px", - backdrop_filter="blur(12px)", - box_shadow="0 8px 32px rgba(245, 158, 11, 0.3)", - style={"animation": "fadeInScale 0.6s ease-out 1.1s backwards, float 7s ease-in-out 2s infinite reverse"}, - ), - # Main illustration - rx.box( - rx.image( - src="/hero-shield.svg", - width="200px", - height="auto", - position="absolute", - top="-40px", - right="100px", - opacity="0.15", - filter="blur(1px)", - style={"animation": "rotate 50s linear infinite"}, - ), rx.image( src="/hero-person.svg", - width="520px", + width="500px", height="auto", - 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"}, + 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"}, ), 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", @@ -463,90 +501,189 @@ def wordpress_cloud_highlight() -> rx.Component: rx.box( # Background glow rx.box( - width="450px", - height="450px", - background="radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 70%)", + width="550px", + height="550px", + background="radial-gradient(circle, rgba(245, 158, 11, 0.18) 0%, transparent 70%)", position="absolute", top="50%", left="50%", transform="translate(-50%, -50%)", border_radius="50%", - filter="blur(50px)", - style={"animation": "pulse 5s ease-in-out infinite"}, + filter="blur(60px)", + style={"animation": "pulse 6s ease-in-out infinite"}, + z_index="0", ), - # Floating stats - Uptime + # Central WordPress icon/logo - using code icon as WordPress placeholder rx.box( - rx.vstack( - rx.text("99.9%", font_size="28px", font_weight="900", color="#F59E0B", line_height="1"), - rx.text("آپتایم", font_size="12px", color="#94A3B8", font_weight="700"), - spacing="1", - align="center", - ), + rx.icon("code", size=140, color="#F59E0B"), + position="relative", + padding="40px", + background="linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 146, 60, 0.12))", + border="3px solid rgba(245, 158, 11, 0.35)", + border_radius="32px", + box_shadow="0 20px 70px rgba(245, 158, 11, 0.5)", + z_index="2", + style={"animation": "scaleFloat 8s ease-in-out infinite"}, + ), + # Floating icon 1: Shield (security - top-left) + rx.box( + rx.icon("shield-check", size=65, color="#10B981"), + position="absolute", + top="8%", + left="8%", + padding="22px", + background="linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.2))", + border="2px solid rgba(16, 185, 129, 0.45)", + border_radius="20px", + backdrop_filter="blur(12px)", + box_shadow="0 12px 40px rgba(16, 185, 129, 0.4)", + opacity="0.85", + z_index="3", + style={"animation": "fadeInScale 0.8s ease-out 0.4s backwards, bobFloat 8s ease-in-out 1.5s infinite"}, + ), + # Floating icon 2: Cloud (cloud hosting - top-right) + rx.box( + rx.icon("cloud", size=70, color="#6DD7E5"), position="absolute", top="5%", - left="-10px", - padding="18px 24px", - background="rgba(20, 20, 35, 0.9)", - border="2px solid rgba(245, 158, 11, 0.4)", + right="10%", + padding="24px", + background="linear-gradient(135deg, rgba(109, 215, 229, 0.25), rgba(77, 184, 196, 0.2))", + border="2px solid rgba(109, 215, 229, 0.45)", + border_radius="22px", + backdrop_filter="blur(12px)", + box_shadow="0 12px 40px rgba(109, 215, 229, 0.4)", + opacity="0.8", + z_index="1", + style={"animation": "fadeInScale 0.8s ease-out 0.6s backwards, floatDiagonal 9s ease-in-out 2s infinite"}, + ), + # Floating icon 3: Zap/Speed (middle-left) + rx.box( + rx.icon("zap", size=60, color="#FB923C"), + position="absolute", + top="42%", + left="2%", + padding="20px", + background="linear-gradient(135deg, rgba(251, 146, 60, 0.25), rgba(245, 158, 11, 0.2))", + border="2px solid rgba(251, 146, 60, 0.45)", border_radius="18px", backdrop_filter="blur(12px)", - box_shadow="0 8px 32px rgba(245, 158, 11, 0.3)", - style={"animation": "float 7s ease-in-out infinite"}, + box_shadow="0 10px 35px rgba(251, 146, 60, 0.4)", + opacity="0.85", + z_index="3", + style={"animation": "fadeInScale 0.8s ease-out 0.8s backwards, float 7s ease-in-out 2.3s infinite reverse"}, ), - # Floating stats - Speed + # Floating icon 4: Package/Plugin (middle-right) rx.box( - rx.vstack( - rx.text("10x", font_size="26px", font_weight="900", color="#10B981", line_height="1"), - rx.text("سرعت", font_size="12px", color="#94A3B8", font_weight="700"), - spacing="1", - align="center", - ), + rx.icon("package", size=55, color="#A78BFA"), position="absolute", - top="45%", - right="-20px", - padding="16px 22px", - background="rgba(20, 20, 35, 0.9)", - border="2px solid rgba(16, 185, 129, 0.4)", + top="38%", + right="5%", + padding="18px", + background="linear-gradient(135deg, rgba(167, 139, 250, 0.25), rgba(139, 92, 246, 0.2))", + border="2px solid rgba(167, 139, 250, 0.45)", border_radius="16px", backdrop_filter="blur(12px)", - box_shadow="0 8px 32px rgba(16, 185, 129, 0.3)", - style={"animation": "float 8s ease-in-out 1s infinite reverse"}, + box_shadow="0 10px 35px rgba(167, 139, 250, 0.4)", + opacity="0.8", + z_index="1", + style={"animation": "fadeInScale 0.8s ease-out 1s backwards, scaleBreath 9s ease-in-out 2.5s infinite"}, ), - # Floating stats - Support + # Floating icon 5: Database (bottom-left) + rx.box( + rx.icon("database", size=58, color="#4DB8C4"), + position="absolute", + bottom="12%", + left="12%", + padding="19px", + background="linear-gradient(135deg, rgba(77, 184, 196, 0.25), rgba(27, 75, 127, 0.2))", + border="2px solid rgba(77, 184, 196, 0.45)", + border_radius="17px", + backdrop_filter="blur(12px)", + box_shadow="0 10px 35px rgba(77, 184, 196, 0.4)", + opacity="0.85", + z_index="3", + style={"animation": "fadeInScale 0.8s ease-out 1.2s backwards, floatComplex 10s ease-in-out 2.8s infinite"}, + ), + # Floating icon 6: Settings/Gear (bottom-right) + rx.box( + rx.icon("settings", size=62, color="#F97316"), + position="absolute", + bottom="10%", + right="8%", + padding="21px", + background="linear-gradient(135deg, rgba(249, 115, 22, 0.25), rgba(245, 158, 11, 0.2))", + border="2px solid rgba(249, 115, 22, 0.45)", + border_radius="19px", + backdrop_filter="blur(12px)", + box_shadow="0 12px 40px rgba(249, 115, 22, 0.4)", + opacity="0.8", + z_index="1", + style={"animation": "fadeInScale 0.8s ease-out 1.4s backwards, rotateSubtle 40s linear infinite, bobFloat 8s ease-in-out 3s infinite"}, + ), + # Stats card 1: 99.9% Uptime (repositioned - outer left) rx.box( rx.vstack( - rx.text("24/7", font_size="24px", font_weight="900", color="#6DD7E5", line_height="1"), - rx.text("پشتیبانی", font_size="11px", color="#94A3B8", font_weight="700"), + rx.text("99.9%", font_size="26px", font_weight="900", color="#F59E0B", line_height="1"), + rx.text("آپتایم", font_size="11px", color="#94A3B8", font_weight="700"), spacing="1", align="center", ), position="absolute", - bottom="8%", - left="20%", - padding="14px 20px", - background="rgba(20, 20, 35, 0.9)", - border="2px solid rgba(109, 215, 229, 0.4)", - border_radius="14px", - backdrop_filter="blur(12px)", - box_shadow="0 8px 32px rgba(109, 215, 229, 0.3)", - style={"animation": "float 6s ease-in-out 0.5s infinite"}, + top="20%", + left="-35px", + padding="16px 22px", + background="rgba(20, 20, 35, 0.92)", + border="2px solid rgba(245, 158, 11, 0.5)", + border_radius="16px", + backdrop_filter="blur(15px)", + box_shadow="0 10px 40px rgba(245, 158, 11, 0.35)", + z_index="4", + style={"animation": "fadeInScale 0.8s ease-out 1.6s backwards, float 7s ease-in-out 3.2s infinite"}, ), - # Main shield illustration + # Stats card 2: 10x Speed (repositioned - outer right) rx.box( - rx.image( - src="/hero-shield.svg", - width="380px", - height="auto", - filter="drop-shadow(0 20px 60px rgba(245, 158, 11, 0.5))", - style={"animation": "scaleFloat 7s ease-in-out infinite"}, + rx.vstack( + rx.text("10x", font_size="24px", font_weight="900", color="#10B981", line_height="1"), + rx.text("سرعت", font_size="11px", color="#94A3B8", font_weight="700"), + spacing="1", + align="center", ), - padding="50px", - background="linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(251, 146, 60, 0.08))", - border="3px solid rgba(245, 158, 11, 0.3)", - border_radius="32px", - box_shadow="0 25px 80px rgba(245, 158, 11, 0.4)", + position="absolute", + top="60%", + right="-30px", + padding="14px 20px", + background="rgba(20, 20, 35, 0.92)", + border="2px solid rgba(16, 185, 129, 0.5)", + border_radius="14px", + backdrop_filter="blur(15px)", + box_shadow="0 10px 40px rgba(16, 185, 129, 0.35)", + z_index="4", + style={"animation": "fadeInScale 0.8s ease-out 1.8s backwards, float 8s ease-in-out 3.5s infinite reverse"}, + ), + # Stats card 3: 24/7 Support (repositioned - bottom center) + rx.box( + rx.vstack( + rx.text("24/7", font_size="22px", font_weight="900", color="#6DD7E5", line_height="1"), + rx.text("پشتیبانی", font_size="10px", color="#94A3B8", font_weight="700"), + spacing="1", + align="center", + ), + position="absolute", + bottom="-20px", + left="35%", + padding="13px 18px", + background="rgba(20, 20, 35, 0.92)", + border="2px solid rgba(109, 215, 229, 0.5)", + border_radius="13px", + backdrop_filter="blur(15px)", + box_shadow="0 10px 40px rgba(109, 215, 229, 0.35)", + z_index="4", + style={"animation": "fadeInScale 0.8s ease-out 2s backwards, float 6s ease-in-out 3.8s infinite"}, ), position="relative", + width="600px", + height="600px", display="flex", align_items="center", justify_content="center",