feat: Redesign with BluisHost-inspired styling
- Changed background to darker blue gradient matching BluisHost - Updated hero heading colors to brighter cyan/turquoise - Refined button styles with cleaner shadows and borders - Improved text opacity and spacing for better readability - Updated section backgrounds to darker tones - Changed second button to 'Watch Video' style like BluisHost
This commit is contained in:
Ehsan.Asadi
BIN
banner-3.gif
Normal file
BIN
banner-3.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user