ehsan-minadd/peikarband
1
0
Fork 0
Code Issues Pull Requests Actions 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("حرفه‌ای",
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",