feat: Add BluisHost-inspired domain search and WordPress features
- Added domain search box to hero section with popular TLDs (.ir, .com, .net, etc.) - Added feature cards grid to WordPress Cloud section (SSD Servers, 10x Speed, 24/7 Support) - Updated styling to match BluisHost V4 design language - Improved hover effects and transitions on feature cards
This commit is contained in:
Ehsan.Asadi
@@ -207,6 +207,112 @@ def hero() -> rx.Component:
|
|||||||
spacing="6",
|
spacing="6",
|
||||||
margin_top="56px",
|
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.hstack(
|
rx.hstack(
|
||||||
rx.icon("check", size=18, color="#10B981"),
|
rx.icon("check", size=18, color="#10B981"),
|
||||||
@@ -389,22 +495,154 @@ def wordpress_cloud_highlight() -> rx.Component:
|
|||||||
align="start",
|
align="start",
|
||||||
width="100%",
|
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.button(
|
||||||
rx.hstack(
|
rx.hstack(
|
||||||
rx.icon("external-link", size=22),
|
rx.icon("external-link", size=20),
|
||||||
rx.text("بیشتر بدانید", font_weight="700", font_size="18px"),
|
rx.text("بیشتر بدانید", font_weight="700", font_size="17px"),
|
||||||
spacing="2",
|
spacing="2",
|
||||||
align="center",
|
align="center",
|
||||||
),
|
),
|
||||||
size="4",
|
size="4",
|
||||||
background="linear-gradient(135deg, #F59E0B, #FB923C)",
|
background="linear-gradient(135deg, #F59E0B, #FB923C)",
|
||||||
color="white",
|
color="white",
|
||||||
border_radius="14px",
|
border_radius="12px",
|
||||||
padding="24px 48px",
|
padding="22px 44px",
|
||||||
box_shadow="0 12px 40px rgba(245, 158, 11, 0.6)",
|
box_shadow="0 10px 35px rgba(245, 158, 11, 0.5)",
|
||||||
_hover={"transform": "translateY(-4px) scale(1.05)", "box_shadow": "0 20px 60px rgba(245, 158, 11, 0.8)"},
|
_hover={"transform": "translateY(-4px)", "box_shadow": "0 15px 50px rgba(245, 158, 11, 0.7)"},
|
||||||
transition="all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
|
transition="all 0.3s ease",
|
||||||
margin_top="48px",
|
margin_top="40px",
|
||||||
),
|
),
|
||||||
spacing="8",
|
spacing="8",
|
||||||
align="start",
|
align="start",
|
||||||
|
|||||||
Reference in New Issue
Block a user