diff --git a/src/presentation/web/pages/landing/index.py b/src/presentation/web/pages/landing/index.py index ed501a3..e8491db 100644 --- a/src/presentation/web/pages/landing/index.py +++ b/src/presentation/web/pages/landing/index.py @@ -207,6 +207,112 @@ def hero() -> rx.Component: spacing="6", margin_top="56px", ), + # Domain Search Box - BluisHost inspired + rx.box( + rx.vstack( + rx.text( + "دامنه خود را جستجو کنید", + font_size="20px", + font_weight="700", + color="#FFFFFF", + margin_bottom="16px", + ), + rx.box( + rx.hstack( + rx.input( + placeholder="نام دامنه خود را وارد کنید...", + size="3", + width="100%", + border="none", + background="transparent", + color="#FFFFFF", + font_size="16px", + padding="24px", + _placeholder={"color": "rgba(255, 255, 255, 0.5)"}, + _focus={"outline": "none"}, + ), + rx.button( + rx.hstack( + rx.icon("search", size=20), + rx.text("جستجو", font_weight="700"), + spacing="2", + ), + size="3", + background="linear-gradient(135deg, #4DB8C4, #6DD7E5)", + color="#FFFFFF", + padding="24px 36px", + border_radius="10px", + _hover={"transform": "scale(1.05)"}, + transition="all 0.3s ease", + ), + spacing="0", + width="100%", + align="center", + ), + background="rgba(27, 75, 127, 0.15)", + backdrop_filter="blur(20px)", + border="1px solid rgba(77, 184, 196, 0.3)", + border_radius="14px", + padding="8px", + box_shadow="0 8px 32px rgba(0, 0, 0, 0.3)", + ), + # Domain extensions + rx.hstack( + rx.box( + rx.text(".ir", font_weight="600", color="#6DD7E5"), + padding="8px 16px", + background="rgba(77, 184, 196, 0.1)", + border="1px solid rgba(77, 184, 196, 0.3)", + border_radius="8px", + _hover={"background": "rgba(77, 184, 196, 0.2)", "cursor": "pointer"}, + transition="all 0.3s ease", + ), + rx.box( + rx.text(".com", font_weight="600", color="#6DD7E5"), + padding="8px 16px", + background="rgba(77, 184, 196, 0.1)", + border="1px solid rgba(77, 184, 196, 0.3)", + border_radius="8px", + _hover={"background": "rgba(77, 184, 196, 0.2)", "cursor": "pointer"}, + transition="all 0.3s ease", + ), + rx.box( + rx.text(".net", font_weight="600", color="#6DD7E5"), + padding="8px 16px", + background="rgba(77, 184, 196, 0.1)", + border="1px solid rgba(77, 184, 196, 0.3)", + border_radius="8px", + _hover={"background": "rgba(77, 184, 196, 0.2)", "cursor": "pointer"}, + transition="all 0.3s ease", + ), + rx.box( + rx.text(".org", font_weight="600", color="#6DD7E5"), + padding="8px 16px", + background="rgba(77, 184, 196, 0.1)", + border="1px solid rgba(77, 184, 196, 0.3)", + border_radius="8px", + _hover={"background": "rgba(77, 184, 196, 0.2)", "cursor": "pointer"}, + transition="all 0.3s ease", + ), + rx.box( + rx.text(".io", font_weight="600", color="#6DD7E5"), + padding="8px 16px", + background="rgba(77, 184, 196, 0.1)", + border="1px solid rgba(77, 184, 196, 0.3)", + border_radius="8px", + _hover={"background": "rgba(77, 184, 196, 0.2)", "cursor": "pointer"}, + transition="all 0.3s ease", + ), + spacing="4", + margin_top="16px", + wrap="wrap", + ), + align="center", + ), + max_width="700px", + margin_top="48px", + style={"animation": "fadeInUp 0.8s ease-out 1.2s backwards"}, + ), rx.hstack( rx.hstack( rx.icon("check", size=18, color="#10B981"), @@ -389,22 +495,154 @@ def wordpress_cloud_highlight() -> rx.Component: align="start", width="100%", ), + # Features Grid + rx.box( + rx.hstack( + # Feature 1 + rx.box( + rx.vstack( + rx.box( + rx.icon("server", size=32, color="#4DB8C4"), + width="64px", + height="64px", + background="linear-gradient(135deg, rgba(77, 184, 196, 0.15), rgba(109, 215, 229, 0.1))", + border_radius="16px", + display="flex", + align_items="center", + justify_content="center", + border="1px solid rgba(77, 184, 196, 0.3)", + ), + rx.text( + "سرورهای SSD", + font_weight="700", + font_size="16px", + color="#FFFFFF", + ), + rx.text( + "سرعت بالا با NVMe", + font_size="13px", + color="#8B9EB8", + ), + spacing="3", + align="center", + ), + background="rgba(27, 75, 127, 0.1)", + backdrop_filter="blur(10px)", + border="1px solid rgba(77, 184, 196, 0.2)", + border_radius="14px", + padding="24px", + _hover={ + "background": "rgba(27, 75, 127, 0.18)", + "border": "1px solid rgba(77, 184, 196, 0.4)", + "transform": "translateY(-4px)", + }, + transition="all 0.3s ease", + flex="1", + ), + # Feature 2 + rx.box( + rx.vstack( + rx.box( + rx.icon("rocket", size=32, color="#F59E0B"), + width="64px", + height="64px", + background="linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 146, 60, 0.1))", + border_radius="16px", + display="flex", + align_items="center", + justify_content="center", + border="1px solid rgba(245, 158, 11, 0.3)", + ), + rx.text( + "سرعت 10 برابر", + font_weight="700", + font_size="16px", + color="#FFFFFF", + ), + rx.text( + "با کش پیشرفته", + font_size="13px", + color="#8B9EB8", + ), + spacing="3", + align="center", + ), + background="rgba(27, 75, 127, 0.1)", + backdrop_filter="blur(10px)", + border="1px solid rgba(245, 158, 11, 0.2)", + border_radius="14px", + padding="24px", + _hover={ + "background": "rgba(27, 75, 127, 0.18)", + "border": "1px solid rgba(245, 158, 11, 0.4)", + "transform": "translateY(-4px)", + }, + transition="all 0.3s ease", + flex="1", + ), + # Feature 3 + rx.box( + rx.vstack( + rx.box( + rx.icon("headphones", size=32, color="#10B981"), + width="64px", + height="64px", + background="linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.1))", + border_radius="16px", + display="flex", + align_items="center", + justify_content="center", + border="1px solid rgba(16, 185, 129, 0.3)", + ), + rx.text( + "پشتیبانی 24/7", + font_weight="700", + font_size="16px", + color="#FFFFFF", + ), + rx.text( + "همیشه کنارتان", + font_size="13px", + color="#8B9EB8", + ), + spacing="3", + align="center", + ), + background="rgba(27, 75, 127, 0.1)", + backdrop_filter="blur(10px)", + border="1px solid rgba(16, 185, 129, 0.2)", + border_radius="14px", + padding="24px", + _hover={ + "background": "rgba(27, 75, 127, 0.18)", + "border": "1px solid rgba(16, 185, 129, 0.4)", + "transform": "translateY(-4px)", + }, + transition="all 0.3s ease", + flex="1", + ), + spacing="5", + width="100%", + wrap="wrap", + ), + margin_top="40px", + ), rx.button( rx.hstack( - rx.icon("external-link", size=22), - rx.text("بیشتر بدانید", font_weight="700", font_size="18px"), + rx.icon("external-link", size=20), + rx.text("بیشتر بدانید", font_weight="700", font_size="17px"), spacing="2", align="center", ), size="4", background="linear-gradient(135deg, #F59E0B, #FB923C)", color="white", - border_radius="14px", - padding="24px 48px", - box_shadow="0 12px 40px rgba(245, 158, 11, 0.6)", - _hover={"transform": "translateY(-4px) scale(1.05)", "box_shadow": "0 20px 60px rgba(245, 158, 11, 0.8)"}, - transition="all 0.4s cubic-bezier(0.4, 0, 0.2, 1)", - margin_top="48px", + border_radius="12px", + padding="22px 44px", + box_shadow="0 10px 35px rgba(245, 158, 11, 0.5)", + _hover={"transform": "translateY(-4px)", "box_shadow": "0 15px 50px rgba(245, 158, 11, 0.7)"}, + transition="all 0.3s ease", + margin_top="40px", ), spacing="8", align="start",