diff --git a/banner-3.gif b/banner-3.gif new file mode 100644 index 0000000..93c2f3f Binary files /dev/null and b/banner-3.gif differ diff --git a/src/presentation/web/pages/landing/index.py b/src/presentation/web/pages/landing/index.py index 3b16450..b394c20 100644 --- a/src/presentation/web/pages/landing/index.py +++ b/src/presentation/web/pages/landing/index.py @@ -132,7 +132,7 @@ def hero() -> rx.Component: "میزبانی وب و زیرساخت ابری ", rx.el.span("حرفه‌ای", style={ - "background": "linear-gradient(135deg, #1B4B7F, #4DB8C4, #6DD7E5, #7CE3F2)", + "background": "linear-gradient(135deg, #4DB8C4, #6DD7E5, #7CE3F2)", "background-clip": "text", "-webkit-background-clip": "text", "-webkit-text-fill-color": "transparent", @@ -141,67 +141,67 @@ def hero() -> rx.Component: }), size="9", font_weight="900", - line_height="1.15", - letter_spacing="-0.04em", - margin_top="16px", + line_height="1.2", + letter_spacing="-0.02em", + margin_top="24px", + color="#FFFFFF", style={"animation": "fadeInUp 0.8s ease-out 0.4s backwards"}, ), rx.text( "اولین و تخصصی‌ترین ارائه‌دهنده کلود اختصاصی وردپرس در ایران.", - rx.el.span(" مدیریت پیشرفته و هوشمند سایت‌های وردپرسی شما", style={"color": "#94A3B8"}), - color="#E2E8F0", - font_size="23px", - line_height="1.9", - max_width="720px", - font_weight="500", - margin_top="24px", - margin_bottom="8px", + rx.el.span(" مدیریت پیشرفته و هوشمند سایت‌های وردپرسی شما", style={"color": "#8B9EB8"}), + color="#C7D2E8", + font_size="20px", + line_height="1.8", + max_width="650px", + font_weight="400", + margin_top="28px", + margin_bottom="16px", + opacity="0.95", style={"animation": "fadeInUp 0.8s ease-out 0.6s backwards"}, ), rx.hstack( rx.button( rx.hstack( - rx.icon("message-circle", size=22), - rx.text("مشاوره رایگان", font_weight="800", font_size="18px"), - spacing="3", + rx.icon("message-circle", size=20), + rx.text("مشاوره رایگان", font_weight="700", font_size="17px"), + spacing="2", align="center", ), size="4", - background="linear-gradient(135deg, #1B4B7F, #4DB8C4, #6DD7E5)", - color="white", - border_radius="16px", - padding="28px 56px", - box_shadow="0 15px 50px rgba(27, 75, 127, 0.7), 0 0 80px rgba(109, 215, 229, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.3)", + background="linear-gradient(135deg, #4DB8C4, #6DD7E5)", + color="#FFFFFF", + border_radius="12px", + padding="24px 48px", + box_shadow="0 10px 35px rgba(77, 184, 196, 0.5), 0 0 50px rgba(109, 215, 229, 0.3)", _hover={ - "transform": "translateY(-6px) scale(1.03)", - "box_shadow": "0 25px 70px rgba(27, 75, 127, 0.9), 0 0 120px rgba(109, 215, 229, 0.6)" + "transform": "translateY(-4px)", + "box_shadow": "0 15px 50px rgba(77, 184, 196, 0.7), 0 0 70px rgba(109, 215, 229, 0.5)" }, - transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)", - style={"animation": "glow 4s ease-in-out infinite, fadeInUp 0.8s ease-out 0.8s backwards"}, + transition="all 0.3s ease", + style={"animation": "fadeInUp 0.8s ease-out 0.8s backwards"}, ), rx.button( rx.hstack( - rx.icon("zap", size=22), - rx.text("مشاهده قیمت‌ها", font_weight="800", font_size="18px"), - spacing="3", + rx.icon("play", size=18), + rx.text("مشاهده ویدیو", font_weight="700", font_size="17px"), + spacing="2", align="center", ), size="4", variant="outline", - border="3px solid #1B4B7F", - color="white", - border_radius="16px", - padding="28px 56px", - background="rgba(27, 75, 127, 0.08)", + border="2px solid rgba(77, 184, 196, 0.5)", + color="#6DD7E5", + border_radius="12px", + padding="24px 48px", + background="rgba(77, 184, 196, 0.05)", backdrop_filter="blur(10px)", - box_shadow="0 10px 40px rgba(27, 75, 127, 0.3)", _hover={ - "background": "rgba(27, 75, 127, 0.2)", - "transform": "translateY(-6px) scale(1.03)", - "border": "3px solid #6DD7E5", - "box_shadow": "0 20px 60px rgba(109, 215, 229, 0.5)" + "background": "rgba(77, 184, 196, 0.15)", + "transform": "translateY(-4px)", + "border": "2px solid #6DD7E5" }, - transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)", + transition="all 0.3s ease", style={"animation": "fadeInUp 0.8s ease-out 1s backwards"}, ), spacing="6", @@ -275,7 +275,7 @@ def hero() -> rx.Component: padding="200px 8% 160px", ), width="100%", - background="radial-gradient(ellipse at top, #0c2340 0%, #0a1628 40%, #050510 70%)", + background="linear-gradient(135deg, #0a1e3d 0%, #091428 30%, #050a14 60%, #020509 100%)", position="relative", overflow="hidden", ) @@ -613,9 +613,9 @@ def wordpress_cloud_highlight() -> rx.Component: padding="120px 8%", ), width="100%", - background="linear-gradient(135deg, rgba(30, 30, 50, 0.6) 0%, rgba(20, 20, 40, 0.8) 100%)", - border_top="2px solid rgba(245, 158, 11, 0.2)", - border_bottom="2px solid rgba(245, 158, 11, 0.2)", + background="linear-gradient(135deg, rgba(15, 25, 45, 0.9) 0%, rgba(10, 18, 35, 0.95) 100%)", + border_top="1px solid rgba(77, 184, 196, 0.15)", + border_bottom="1px solid rgba(77, 184, 196, 0.15)", position="relative", ) @@ -1310,8 +1310,8 @@ def footer() -> rx.Component: padding="60px 8% 40px", ), width="100%", - background="linear-gradient(180deg, rgba(10, 10, 26, 0.95) 0%, rgba(5, 5, 16, 1) 100%)", - border_top="2px solid rgba(27, 75, 127, 0.4)", + background="linear-gradient(180deg, rgba(10, 18, 35, 0.98) 0%, rgba(5, 10, 20, 1) 100%)", + border_top="1px solid rgba(77, 184, 196, 0.2)", ) def floating_chat() -> rx.Component: @@ -1349,7 +1349,7 @@ def index() -> rx.Component: # contact_section(), footer(), # floating_chat(), - background="linear-gradient(180deg, #050510 0%, #0a0a1a 30%, #0f0f23 60%, #050510 100%)", + background="linear-gradient(180deg, #020509 0%, #0a1428 20%, #091428 40%, #0a1e3d 70%, #020509 100%)", min_height="100vh", width="100%", direction="rtl",