diff --git a/src/presentation/web/pages/landing/index.py b/src/presentation/web/pages/landing/index.py index 90cff3b..1b3adcb 100644 --- a/src/presentation/web/pages/landing/index.py +++ b/src/presentation/web/pages/landing/index.py @@ -128,21 +128,6 @@ def hero() -> rx.Component: font_size="17px", style={"animation": "fadeInUp 0.8s ease-out 0.2s backwards"}, ), - # rx.badge( - # rx.hstack( - # rx.icon("sparkles", size=16, color="#6DD7E5"), - # rx.text("هاستینگ، دامین و DevOps", font_weight="600"), - # spacing="2", - # align="center", - # ), - # variant="outline", - # padding="12px 24px", - # border_radius="full", - # background="linear-gradient(135deg, rgba(77, 184, 196, 0.15), rgba(109, 215, 229, 0.15))", - # border="2px solid rgba(77, 184, 196, 0.5)", - # font_size="15px", - # box_shadow="0 8px 24px rgba(77, 184, 196, 0.3)", - # ), rx.heading( "میزبانی وب و زیرساخت ابری ", rx.el.span("حرفه‌ای", @@ -251,107 +236,77 @@ def hero() -> rx.Component: z_index="1", ), rx.box( - # Main illustration with layered effects rx.box( - # Background glow layer + # Background glow rx.box( - width="550px", - height="550px", - 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)", + filter="blur(50px)", style={"animation": "pulse 4s ease-in-out infinite"}, ), - # Floating card 1 - top right with shield + # Floating security badge rx.box( rx.vstack( - rx.image(src="/hero-shield.svg", width="50px", height="auto"), - rx.text("99.9%", font_size="24px", font_weight="900", color="white"), - rx.text("امنیت", font_size="13px", color="#94A3B8", font_weight="600"), - spacing="2", + 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="-20px", - right="-30px", - padding="20px 28px", - 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="20px", - backdrop_filter="blur(10px)", - box_shadow="0 10px 40px rgba(245, 158, 11, 0.3)", - style={"animation": "fadeInScale 0.6s ease-out 0.9s backwards, floatSlow 6s ease-in-out 1.5s 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": "fadeInScale 0.6s ease-out 1.1s backwards, floatSlow 7s ease-in-out 1.7s 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)", + 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(10px)", - box_shadow="0 10px 40px rgba(109, 215, 229, 0.3)", - style={"animation": "fadeInScale 0.6s ease-out 1.3s backwards, floatSlow 8s ease-in-out 1.9s infinite"}, + 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"}, ), - # Main illustration - person with laptop + # 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( - # Background shield decoration rx.image( src="/hero-shield.svg", - width="280px", + width="200px", height="auto", position="absolute", - top="-60px", - right="80px", - opacity="0.2", - filter="blur(2px)", - style={"animation": "rotate 40s linear infinite"}, + top="-40px", + right="100px", + opacity="0.15", + filter="blur(1px)", + style={"animation": "rotate 50s linear infinite"}, ), - # Main person image rx.image( src="/hero-person.svg", - width="550px", + width="520px", height="auto", filter="drop-shadow(0 20px 60px rgba(27, 75, 127, 0.4))", - style={"animation": "fadeInScale 1s ease-out 0.3s backwards, scaleFloat 5s ease-in-out 1.3s infinite"}, + style={"animation": "fadeInScale 1s ease-out 0.3s backwards, scaleFloat 6s ease-in-out 1.5s infinite"}, ), position="relative", ), @@ -505,23 +460,96 @@ def wordpress_cloud_highlight() -> rx.Component: width="100%", ), rx.box( - rx.vstack( + rx.box( + # Background glow + rx.box( + width="450px", + height="450px", + 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(50px)", + style={"animation": "pulse 5s ease-in-out infinite"}, + ), + # Floating stats - Uptime + 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", + ), + 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)", + 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"}, + ), + # Floating stats - Speed + 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", + ), + 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)", + 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"}, + ), + # Floating stats - Support + 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"), + 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"}, + ), + # Main shield illustration rx.box( rx.image( - src="/hero-person.svg", - width="450px", + src="/hero-shield.svg", + width="380px", height="auto", - style={"animation": "float 6s ease-in-out infinite"}, + filter="drop-shadow(0 20px 60px rgba(245, 158, 11, 0.5))", + style={"animation": "scaleFloat 7s ease-in-out infinite"}, ), - padding="40px", - background="linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 146, 60, 0.1))", + 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)", - _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)", ), - spacing="6", + position="relative", + display="flex", + align_items="center", + justify_content="center", ), display=["none", "none", "none", "block"], width="50%",