ehsan-minadd/peikarband
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: Redesign with BluisHost-inspired styling

Browse Source 
- 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
2025-12-26 18:47:28 +03:30
parent 4d4dea9844
commit 26b19e2db0
2 changed files with 45 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
banner-3.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

90
src/presentation/web/pages/landing/index.py
View File

@@ -132,7 +132,7 @@ def hero() -> rx.Component:
"میزبانی وب و زیرساخت ابری ", "میزبانی وب و زیرساخت ابری ",
rx.el.span("حرفه‌ای", rx.el.span("حرفه‌ای",
style={ style={
"background": "linear-gradient(135deg, #1B4B7F, #4DB8C4, #6DD7E5, #7CE3F2)", "background": "linear-gradient(135deg, #4DB8C4, #6DD7E5, #7CE3F2)",
"background-clip": "text", "background-clip": "text",
"-webkit-background-clip": "text", "-webkit-background-clip": "text",
"-webkit-text-fill-color": "transparent", "-webkit-text-fill-color": "transparent",
@@ -141,67 +141,67 @@ def hero() -> rx.Component:
}), }),
size="9", size="9",
font_weight="900", font_weight="900",
line_height="1.15", line_height="1.2",
letter_spacing="-0.04em", letter_spacing="-0.02em",
margin_top="16px", margin_top="24px",
color="#FFFFFF",
style={"animation": "fadeInUp 0.8s ease-out 0.4s backwards"}, style={"animation": "fadeInUp 0.8s ease-out 0.4s backwards"},
), ),
rx.text( rx.text(
"اولین و تخصصی‌ترین ارائه‌دهنده کلود اختصاصی وردپرس در ایران.", "اولین و تخصصی‌ترین ارائه‌دهنده کلود اختصاصی وردپرس در ایران.",
rx.el.span(" مدیریت پیشرفته و هوشمند سایت‌های وردپرسی شما", style={"color": "#94A3B8"}), rx.el.span(" مدیریت پیشرفته و هوشمند سایت‌های وردپرسی شما", style={"color": "#8B9EB8"}),
color="#E2E8F0", color="#C7D2E8",
font_size="23px", font_size="20px",
line_height="1.9", line_height="1.8",
max_width="720px", max_width="650px",
font_weight="500", font_weight="400",
margin_top="24px", margin_top="28px",
margin_bottom="8px", margin_bottom="16px",
opacity="0.95",
style={"animation": "fadeInUp 0.8s ease-out 0.6s backwards"}, style={"animation": "fadeInUp 0.8s ease-out 0.6s backwards"},
), ),
rx.hstack( rx.hstack(
rx.button( rx.button(
rx.hstack( rx.hstack(
rx.icon("message-circle", size=22), rx.icon("message-circle", size=20),
rx.text("مشاوره رایگان", font_weight="800", font_size="18px"), rx.text("مشاوره رایگان", font_weight="700", font_size="17px"),
spacing="3", spacing="2",
align="center", align="center",
), ),
size="4", size="4",
background="linear-gradient(135deg, #1B4B7F, #4DB8C4, #6DD7E5)", background="linear-gradient(135deg, #4DB8C4, #6DD7E5)",
color="white", color="#FFFFFF",
border_radius="16px", border_radius="12px",
padding="28px 56px", padding="24px 48px",
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)", box_shadow="0 10px 35px rgba(77, 184, 196, 0.5), 0 0 50px rgba(109, 215, 229, 0.3)",
_hover={ _hover={
"transform": "translateY(-6px) scale(1.03)", "transform": "translateY(-4px)",
"box_shadow": "0 25px 70px rgba(27, 75, 127, 0.9), 0 0 120px rgba(109, 215, 229, 0.6)" "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)", transition="all 0.3s ease",
style={"animation": "glow 4s ease-in-out infinite, fadeInUp 0.8s ease-out 0.8s backwards"}, style={"animation": "fadeInUp 0.8s ease-out 0.8s backwards"},
), ),
rx.button( rx.button(
rx.hstack( rx.hstack(
rx.icon("zap", size=22), rx.icon("play", size=18),
rx.text("مشاهده قیمت‌ها", font_weight="800", font_size="18px"), rx.text("مشاهده ویدیو", font_weight="700", font_size="17px"),
spacing="3", spacing="2",
align="center", align="center",
), ),
size="4", size="4",
variant="outline", variant="outline",
border="3px solid #1B4B7F", border="2px solid rgba(77, 184, 196, 0.5)",
color="white", color="#6DD7E5",
border_radius="16px", border_radius="12px",
padding="28px 56px", padding="24px 48px",
background="rgba(27, 75, 127, 0.08)", background="rgba(77, 184, 196, 0.05)",
backdrop_filter="blur(10px)", backdrop_filter="blur(10px)",
box_shadow="0 10px 40px rgba(27, 75, 127, 0.3)",
_hover={ _hover={
"background": "rgba(27, 75, 127, 0.2)", "background": "rgba(77, 184, 196, 0.15)",
"transform": "translateY(-6px) scale(1.03)", "transform": "translateY(-4px)",
"border": "3px solid #6DD7E5", "border": "2px solid #6DD7E5"
"box_shadow": "0 20px 60px rgba(109, 215, 229, 0.5)"
}, },
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"}, style={"animation": "fadeInUp 0.8s ease-out 1s backwards"},
), ),
spacing="6", spacing="6",
@@ -275,7 +275,7 @@ def hero() -> rx.Component:
padding="200px 8% 160px", padding="200px 8% 160px",
), ),
width="100%", 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", position="relative",
overflow="hidden", overflow="hidden",
) )
@@ -613,9 +613,9 @@ def wordpress_cloud_highlight() -> rx.Component:
padding="120px 8%", padding="120px 8%",
), ),
width="100%", width="100%",
background="linear-gradient(135deg, rgba(30, 30, 50, 0.6) 0%, rgba(20, 20, 40, 0.8) 100%)", background="linear-gradient(135deg, rgba(15, 25, 45, 0.9) 0%, rgba(10, 18, 35, 0.95) 100%)",
border_top="2px solid rgba(245, 158, 11, 0.2)", border_top="1px solid rgba(77, 184, 196, 0.15)",
border_bottom="2px solid rgba(245, 158, 11, 0.2)", border_bottom="1px solid rgba(77, 184, 196, 0.15)",
position="relative", position="relative",
) )
@@ -1310,8 +1310,8 @@ def footer() -> rx.Component:
padding="60px 8% 40px", padding="60px 8% 40px",
), ),
width="100%", width="100%",
background="linear-gradient(180deg, rgba(10, 10, 26, 0.95) 0%, rgba(5, 5, 16, 1) 100%)", background="linear-gradient(180deg, rgba(10, 18, 35, 0.98) 0%, rgba(5, 10, 20, 1) 100%)",
border_top="2px solid rgba(27, 75, 127, 0.4)", border_top="1px solid rgba(77, 184, 196, 0.2)",
) )
def floating_chat() -> rx.Component: def floating_chat() -> rx.Component:
@@ -1349,7 +1349,7 @@ def index() -> rx.Component:
# contact_section(), # contact_section(),
footer(), footer(),
# floating_chat(), # 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", min_height="100vh",
width="100%", width="100%",
direction="rtl", direction="rtl",