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

[DESIGN-001] Update branding colors and focus on WordPress Cloud (feat)
Some checks failed
CD - Build & Deploy / build-and-push (push) Has been cancelled
Details
CD - Build & Deploy / package-helm (push) Has been cancelled
Details
CD - Build & Deploy / deploy-staging (push) Has been cancelled
Details
CD - Build & Deploy / deploy-production (push) Has been cancelled
Details
CD - Build & Deploy / release (push) Has been cancelled
Details
CI / test (3.11) (push) Has been cancelled
Details
CI / test (3.12) (push) Has been cancelled
Details
CI / security (push) Has been cancelled
Details

Browse Source 
- Applied brand colors from logo (Navy Blue, Teal, Cyan)
- Updated all color schemes across the site
- Focused content on WordPress Cloud hosting
- Removed cPanel references
- Updated service cards to highlight WordPress Cloud
- Added company logo to navbar
- Improved messaging and value propositions
This commit is contained in:
Ehsan.Asadi
2025-12-26 16:17:45 +03:30
parent c8c9b7a6eb
commit 167c25c943
7 changed files with 144 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@@ -1,3 +1,7 @@
assets/external/
.states
.web
*.db
# Python
__pycache__/
*.py[cod]

4
Makefile
View File

@@ -42,7 +42,7 @@ install:
pre-commit install
dev:
python -m reflex run
python33 -m reflex run
test:
pytest tests/ -v --cov=src --cov-report=html
@@ -122,5 +122,5 @@ migrate:
alembic upgrade head
seed:
python scripts/seed_database.py
python3 scripts/seed_database.py

6
assets/custom.css
View File

@@ -13,9 +13,9 @@ body {
}
@keyframes glow {
0% { box-shadow: 0 12px 40px rgba(30, 64, 175, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
50% { box-shadow: 0 18px 50px rgba(30, 64, 175, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
100% { box-shadow: 0 12px 40px rgba(30, 64, 175, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
0% { box-shadow: 0 12px 40px rgba(27, 75, 127, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
50% { box-shadow: 0 18px 50px rgba(27, 75, 127, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
100% { box-shadow: 0 12px 40px rgba(27, 75, 127, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
}
@keyframes pulse {

BIN
assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 796 KiB

BIN
logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 796 KiB

6
src/presentation/web/assets/custom.css
View File

@@ -13,9 +13,9 @@ body {
}
@keyframes glow {
0% { box-shadow: 0 12px 40px rgba(30, 64, 175, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
50% { box-shadow: 0 18px 50px rgba(30, 64, 175, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
100% { box-shadow: 0 12px 40px rgba(30, 64, 175, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
0% { box-shadow: 0 12px 40px rgba(27, 75, 127, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
50% { box-shadow: 0 18px 50px rgba(27, 75, 127, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
100% { box-shadow: 0 12px 40px rgba(27, 75, 127, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
}
@keyframes pulse {

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

@@ -11,9 +11,9 @@ def navbar() -> rx.Component:
return rx.box(
rx.hstack(
rx.hstack(
rx.image(src="https://i.imgur.com/YOUR_LOGO.png", width="45px", height="45px"),
rx.image(src="/logo.png", width="50px", height="50px"),
rx.heading("پیکربند", size="7",
background="linear-gradient(135deg, #1e40af, #3b82f6, #06b6d4)",
background="linear-gradient(135deg, #1B4B7F, #4DB8C4, #6DD7E5)",
background_clip="text",
style={"-webkit-background-clip": "text", "-webkit-text-fill-color": "transparent"},
letter_spacing="1px",
@@ -23,11 +23,11 @@ def navbar() -> rx.Component:
),
rx.spacer(),
rx.hstack(
rx.link("خدمات", href="#services", color="#E2E8F0", font_weight="600", font_size="16px", _hover={"color": "#22d3ee", "transform": "translateY(-2px)"}, transition="all 0.2s"),
rx.link("قیمت‌ها", href="#pricing", color="#E2E8F0", font_weight="600", font_size="16px", _hover={"color": "#22d3ee", "transform": "translateY(-2px)"}, transition="all 0.2s"),
rx.link("سرورها", href="#servers", color="#E2E8F0", font_weight="600", font_size="16px", _hover={"color": "#22d3ee", "transform": "translateY(-2px)"}, transition="all 0.2s"),
rx.link("نظرات", href="#testimonials", color="#E2E8F0", font_weight="600", font_size="16px", _hover={"color": "#22d3ee", "transform": "translateY(-2px)"}, transition="all 0.2s"),
rx.link("تماس", href="#contact", color="#E2E8F0", font_weight="600", font_size="16px", _hover={"color": "#22d3ee", "transform": "translateY(-2px)"}, transition="all 0.2s"),
rx.link("خدمات", href="#services", color="#E2E8F0", font_weight="600", font_size="16px", _hover={"color": "#6DD7E5", "transform": "translateY(-2px)"}, transition="all 0.2s"),
rx.link("قیمت‌ها", href="#pricing", color="#E2E8F0", font_weight="600", font_size="16px", _hover={"color": "#6DD7E5", "transform": "translateY(-2px)"}, transition="all 0.2s"),
rx.link("سرورها", href="#servers", color="#E2E8F0", font_weight="600", font_size="16px", _hover={"color": "#6DD7E5", "transform": "translateY(-2px)"}, transition="all 0.2s"),
rx.link("نظرات", href="#testimonials", color="#E2E8F0", font_weight="600", font_size="16px", _hover={"color": "#6DD7E5", "transform": "translateY(-2px)"}, transition="all 0.2s"),
rx.link("تماس", href="#contact", color="#E2E8F0", font_weight="600", font_size="16px", _hover={"color": "#6DD7E5", "transform": "translateY(-2px)"}, transition="all 0.2s"),
rx.button(
rx.hstack(
rx.text("شروع رایگان", font_weight="800"),
@@ -35,15 +35,15 @@ def navbar() -> rx.Component:
spacing="2",
align="center",
),
background="linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #06b6d4 100%)",
background="linear-gradient(135deg, #1B4B7F 0%, #4DB8C4 50%, #6DD7E5 100%)",
color="white",
border_radius="full",
padding="16px 36px",
font_size="16px",
box_shadow="0 12px 35px rgba(59, 130, 246, 0.7), 0 0 60px rgba(6, 182, 212, 0.3)",
box_shadow="0 12px 35px rgba(77, 184, 196, 0.7), 0 0 60px rgba(109, 215, 229, 0.3)",
_hover={
"transform": "translateY(-4px) scale(1.08)",
"box_shadow": "0 18px 50px rgba(6, 182, 212, 0.9), 0 0 80px rgba(6, 182, 212, 0.5)"
"box_shadow": "0 18px 50px rgba(109, 215, 229, 0.9), 0 0 80px rgba(109, 215, 229, 0.5)"
},
transition="all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
style={"animation": "glow 3s ease-in-out infinite"},
@@ -58,7 +58,7 @@ def navbar() -> rx.Component:
width="100%",
backdrop_filter="blur(20px) saturate(180%)",
background="rgba(5, 10, 20, 0.92)",
border_bottom="1px solid rgba(6, 182, 212, 0.3)",
border_bottom="1px solid rgba(109, 215, 229, 0.3)",
padding="20px 8%",
z_index="1000",
box_shadow="0 8px 32px rgba(0, 0, 0, 0.4)",
@@ -87,7 +87,7 @@ def hero() -> rx.Component:
),
# rx.badge(
# rx.hstack(
# rx.icon("sparkles", size=16, color="#06b6d4"),
# rx.icon("sparkles", size=16, color="#6DD7E5"),
# rx.text("هاستینگ، دامین و DevOps", font_weight="600"),
# spacing="2",
# align="center",
@@ -95,16 +95,16 @@ def hero() -> rx.Component:
# variant="outline",
# padding="12px 24px",
# border_radius="full",
# background="linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(6, 182, 212, 0.15))",
# border="2px solid rgba(59, 130, 246, 0.5)",
# background="linear-gradient(135deg, rgba(77, 184, 196, 0.15), rgba(109, 215, 229, 0.15))",
# border="2px solid rgba(77, 184, 196, 0.5)",
# font_size="15px",
# box_shadow="0 8px 24px rgba(59, 130, 246, 0.3)",
# box_shadow="0 8px 24px rgba(77, 184, 196, 0.3)",
# ),
rx.heading(
"میزبانی وب و زیرساخت ابری ",
rx.el.span("حرفه‌ای",
style={
"background": "linear-gradient(135deg, #1e40af, #3b82f6, #06b6d4, #22d3ee)",
"background": "linear-gradient(135deg, #1B4B7F, #4DB8C4, #6DD7E5, #7CE3F2)",
"background-clip": "text",
"-webkit-background-clip": "text",
"-webkit-text-fill-color": "transparent",
@@ -118,8 +118,8 @@ def hero() -> rx.Component:
margin_top="16px",
),
rx.text(
"از هاست وردپرس تا سرورهای اختصاصی، دامین و خدمات DevOps, DataOps و MlOps.",
rx.el.span(" برای حضور قدرتمند شما در اینترنت", style={"color": "#94A3B8"}),
"اولین و تخصصی‌ترین ارائه‌دهنده کلود اختصاصی وردپرس در ایران.",
rx.el.span(" مدیریت پیشرفته و هوشمند سایت‌های وردپرسی شما", style={"color": "#94A3B8"}),
color="#E2E8F0",
font_size="23px",
line_height="1.9",
@@ -137,14 +137,14 @@ def hero() -> rx.Component:
align="center",
),
size="4",
background="linear-gradient(135deg, #1e40af, #3b82f6, #06b6d4)",
background="linear-gradient(135deg, #1B4B7F, #4DB8C4, #6DD7E5)",
color="white",
border_radius="16px",
padding="28px 56px",
box_shadow="0 15px 50px rgba(30, 64, 175, 0.7), 0 0 80px rgba(6, 182, 212, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.3)",
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)",
_hover={
"transform": "translateY(-6px) scale(1.03)",
"box_shadow": "0 25px 70px rgba(30, 64, 175, 0.9), 0 0 120px rgba(6, 182, 212, 0.6)"
"box_shadow": "0 25px 70px rgba(27, 75, 127, 0.9), 0 0 120px rgba(109, 215, 229, 0.6)"
},
transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
style={"animation": "glow 4s ease-in-out infinite"},
@@ -158,18 +158,18 @@ def hero() -> rx.Component:
),
size="4",
variant="outline",
border="3px solid #1e40af",
border="3px solid #1B4B7F",
color="white",
border_radius="16px",
padding="28px 56px",
background="rgba(30, 64, 175, 0.08)",
background="rgba(27, 75, 127, 0.08)",
backdrop_filter="blur(10px)",
box_shadow="0 10px 40px rgba(30, 64, 175, 0.3)",
box_shadow="0 10px 40px rgba(27, 75, 127, 0.3)",
_hover={
"background": "rgba(30, 64, 175, 0.2)",
"background": "rgba(27, 75, 127, 0.2)",
"transform": "translateY(-6px) scale(1.03)",
"border": "3px solid #06b6d4",
"box_shadow": "0 20px 60px rgba(6, 182, 212, 0.5)"
"border": "3px 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)",
),
@@ -207,7 +207,7 @@ def hero() -> rx.Component:
src="https://illustrations.popsy.co/amber/web-design.svg",
width="600px",
height="auto",
filter="drop-shadow(0 20px 60px rgba(30, 64, 175, 0.3))",
filter="drop-shadow(0 20px 60px rgba(27, 75, 127, 0.3))",
),
display=["none", "none", "none", "block"],
),
@@ -260,7 +260,7 @@ def wordpress_cloud_highlight() -> rx.Component:
text_align=["center", "center", "right"],
),
rx.text(
"مدیریت پیشرفته و هوشمند وردپرس بر بستر کلود. با تکنولوژی‌های روز دنیا، سایت شما را به سطح بعدی می‌بریم",
"با کلود اختصاصی وردپرس، سایت شما را با سرعت، امنیت و مدیریت هوشمند تجربه کنید. بدون نگرانی از فنی‌ها، فقط روی کسب‌وکارتان تمرکز کنید",
color="#CBD5E1",
font_size="20px",
line_height="1.8",
@@ -311,10 +311,10 @@ def wordpress_cloud_highlight() -> rx.Component:
),
rx.hstack(
rx.box(
rx.icon("shield", size=24, color="#3b82f6"),
rx.icon("shield", size=24, color="#4DB8C4"),
width="48px",
height="48px",
background="linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(6, 182, 212, 0.2))",
background="linear-gradient(135deg, rgba(77, 184, 196, 0.2), rgba(109, 215, 229, 0.2))",
border_radius="12px",
display="flex",
align_items="center",
@@ -392,12 +392,12 @@ def wordpress_cloud_highlight() -> rx.Component:
spacing="2",
),
rx.vstack(
rx.text("10x", font_size="36px", font_weight="900", color="#3b82f6", line_height="1"),
rx.text("10x", font_size="36px", font_weight="900", color="#4DB8C4", line_height="1"),
rx.text("سریع‌تر", font_size="14px", color="#94A3B8", font_weight="600"),
align="center",
padding="24px",
background="rgba(30, 30, 50, 0.8)",
border="2px solid rgba(59, 130, 246, 0.3)",
border="2px solid rgba(77, 184, 196, 0.3)",
border_radius="20px",
spacing="2",
),
@@ -443,7 +443,7 @@ def about_card(icon: str, title: str, desc: str, gradient: str, glow_color: str)
rx.text(desc, color="#94A3B8", text_align="center", font_size="17px", line_height="1.7", font_weight="500"),
padding="60px 40px",
background="linear-gradient(135deg, rgba(30, 30, 50, 0.9), rgba(20, 20, 40, 0.7))",
border="2px solid rgba(30, 64, 175, 0.3)",
border="2px solid rgba(27, 75, 127, 0.3)",
border_radius="32px",
align="center",
min_height="420px",
@@ -457,9 +457,9 @@ def about_section() -> rx.Component:
rx.vstack(
rx.badge(
"✨ چرا ما؟",
background="linear-gradient(135deg, rgba(30, 64, 175, 0.2), rgba(59, 130, 246, 0.2))",
border="2px solid rgba(30, 64, 175, 0.4)",
color="#3b82f6",
background="linear-gradient(135deg, rgba(27, 75, 127, 0.2), rgba(77, 184, 196, 0.2))",
border="2px solid rgba(27, 75, 127, 0.4)",
color="#4DB8C4",
font_weight="700",
font_size="16px",
padding="10px 24px",
@@ -474,9 +474,9 @@ def about_section() -> rx.Component:
font_weight="500",
),
rx.hstack(
about_card("zap", "سرعت فوق‌العاده", "سرورهای بهینه‌شده با SSD NVMe و CDN جهانی برای بارگذاری آنی", "linear-gradient(135deg, #1e40af, #4F46E5)", "rgba(30, 64, 175, 0.5)"),
about_card("clock", "پشتیبانی 24/7", "تیم پشتیبانی حرفه‌ای و با تجربه، آماده کمک در هر لحظه", "linear-gradient(135deg, #3b82f6, #7C3AED)", "rgba(59, 130, 246, 0.5)"),
about_card("shield-check", "امنیت پیشرفته", "SSL رایگان، بکاپ اتوماتیک روزانه و محافظت DDoS", "linear-gradient(135deg, #06b6d4, #9333EA)", "rgba(6, 182, 212, 0.5)"),
about_card("zap", "سرعت فوق‌العاده", "سرورهای بهینه‌شده با SSD NVMe و CDN جهانی برای بارگذاری آنی", "linear-gradient(135deg, #1B4B7F, #4F46E5)", "rgba(27, 75, 127, 0.5)"),
about_card("clock", "پشتیبانی 24/7", "تیم پشتیبانی حرفه‌ای و با تجربه، آماده کمک در هر لحظه", "linear-gradient(135deg, #4DB8C4, #7C3AED)", "rgba(77, 184, 196, 0.5)"),
about_card("shield-check", "امنیت پیشرفته", "SSL رایگان، بکاپ اتوماتیک روزانه و محافظت DDoS", "linear-gradient(135deg, #6DD7E5, #9333EA)", "rgba(109, 215, 229, 0.5)"),
spacing="9",
width="100%",
),
@@ -515,7 +515,7 @@ def service_card(title: str, desc: str, icon: str, features: list, color: str) -
),
padding="48px 40px",
background="linear-gradient(135deg, rgba(30, 30, 50, 0.95), rgba(20, 20, 40, 0.8))",
border="2px solid rgba(30, 64, 175, 0.25)",
border="2px solid rgba(27, 75, 127, 0.25)",
border_radius="32px",
align="center",
min_height="520px",
@@ -533,9 +533,9 @@ def services_section() -> rx.Component:
rx.vstack(
rx.badge(
"🚀 خدمات ما",
background="linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(6, 182, 212, 0.2))",
border="2px solid rgba(59, 130, 246, 0.4)",
color="#06b6d4",
background="linear-gradient(135deg, rgba(77, 184, 196, 0.2), rgba(109, 215, 229, 0.2))",
border="2px solid rgba(77, 184, 196, 0.4)",
color="#6DD7E5",
font_weight="700",
font_size="16px",
padding="10px 24px",
@@ -550,12 +550,12 @@ def services_section() -> rx.Component:
font_weight="500",
),
rx.grid(
service_card("هاستینگ وردپرس", "میزبانی بهینه‌شده وردپرس با کنترل پنل cPanel", "globe", ["نصب خودکار وردپرس", "SSL رایگان", "بکاپ روزانه", "پشتیبانی فنی"], "#1e40af"),
service_card("فروش دامین", "ثبت دامین‌های بین‌المللی و ایرانی", "tag", [".com, .ir, .net و...", "قیمت‌های رقابتی", "تحویل فوری", "مدیریت DNS"], "#3b82f6"),
service_card("سرور اختصاصی", "VPS و Dedicated Server از بهترین دیتاسنترها", "server", ["DigitalOcean", "Hetzner", "OVH", "Hostinger"], "#06b6d4"),
service_card("DevOps & CI/CD", "اتوماسیون و مدیریت زیرساخت", "code", ["Kubernetes", "Docker", "GitLab/GitHub CI", "Terraform"], "#1e40af"),
service_card("انتقال به کلود", "مهاجرت سایت به محیط ابری", "cloud-upload", ["AWS Migration", "Google Cloud", "Azure", "مشاوره رایگان"], "#3b82f6"),
service_card("مشاوره فنی", "راهنمایی و طراحی معماری", "settings", ["بررسی زیرساخت", "بهینه‌سازی", "امن‌سازی", "پشتیبانی مداوم"], "#06b6d4"),
service_card("وردپرس کلود", "کلود اختصاصی وردپرس با مدیریت هوشمند و پیشرفته", "cloud", ["نصب خودکار وردپرس", "مدیریت چند سایتی", "بکاپ اتوماتیک", "SSL رایگان", "بهینه‌سازی خودکار"], "#1B4B7F"),
service_card("سرورهای ابری", "سرورهای اختصاصی از بهترین دیتاسنترهای دنیا", "server", ["DigitalOcean", "Hetzner", "AWS", "Google Cloud"], "#4DB8C4"),
service_card("مهاجرت به کلود", "انتقال سایت وردپرسی شما به کلود اختصاصی", "cloud-upload", ["مهاجرت بدون توقف", "تست قبل از انتقال", "بهینه‌سازی کامل", "مشاوره رایگان"], "#6DD7E5"),
service_card("DevOps حرفه‌ای", "اتوماسیون و مدیریت زیرساخت کلود", "code", ["Kubernetes", "Docker", "CI/CD Pipeline", "Infrastructure as Code"], "#1B4B7F"),
service_card("فروش دامین", "ثبت دامین‌های بین‌المللی و ایرانی", "tag", [".com, .ir, .net", "قیمت رقابتی", "تحویل فوری", "مدیریت DNS"], "#4DB8C4"),
service_card("پشتیبانی 24/7", "پشتیبانی تخصصی وردپرس و سرور", "headset", ["تیم متخصص", "پاسخگویی سریع", "مشاوره رایگان", "پشتیبانی فارسی"], "#6DD7E5"),
columns="3",
spacing="9",
width="100%",
@@ -568,13 +568,13 @@ def services_section() -> rx.Component:
id="services",
)
def pricing_card(name: str, price: str, features: list, popular: bool = False, badge_color: str = "#1e40af") -> rx.Component:
def pricing_card(name: str, price: str, features: list, popular: bool = False, badge_color: str = "#1B4B7F") -> rx.Component:
return rx.vstack(
rx.cond(
popular,
rx.badge(
"⭐ محبوب‌ترین",
background="linear-gradient(135deg, #1e40af, #3b82f6)",
background="linear-gradient(135deg, #1B4B7F, #4DB8C4)",
color="white",
padding="10px 24px",
border_radius="full",
@@ -582,7 +582,7 @@ def pricing_card(name: str, price: str, features: list, popular: bool = False, b
font_size="15px",
position="absolute",
top="-18px",
box_shadow="0 8px 30px rgba(30, 64, 175, 0.7)",
box_shadow="0 8px 30px rgba(27, 75, 127, 0.7)",
),
rx.box(),
),
@@ -593,7 +593,7 @@ def pricing_card(name: str, price: str, features: list, popular: bool = False, b
align="baseline",
spacing="3",
),
rx.divider(background="rgba(30, 64, 175, 0.3)", margin_y="32px"),
rx.divider(background="rgba(27, 75, 127, 0.3)", margin_y="32px"),
rx.vstack(
*[rx.hstack(
rx.icon("check", size=24, color="#10B981"),
@@ -610,24 +610,24 @@ def pricing_card(name: str, price: str, features: list, popular: bool = False, b
"انتخاب پلن",
width="100%",
padding="20px",
background="linear-gradient(135deg, #1e40af, #3b82f6)" if popular else "transparent",
border="2.5px solid #1e40af" if not popular else "none",
background="linear-gradient(135deg, #1B4B7F, #4DB8C4)" if popular else "transparent",
border="2.5px solid #1B4B7F" if not popular else "none",
color="white",
border_radius="16px",
font_weight="800",
font_size="18px",
box_shadow="0 10px 35px rgba(30, 64, 175, 0.6)" if popular else "none",
_hover={"transform": "translateY(-4px)", "box_shadow": "0 15px 50px rgba(30, 64, 175, 0.8)"},
box_shadow="0 10px 35px rgba(27, 75, 127, 0.6)" if popular else "none",
_hover={"transform": "translateY(-4px)", "box_shadow": "0 15px 50px rgba(27, 75, 127, 0.8)"},
transition="all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
),
padding="56px 48px",
background="linear-gradient(135deg, rgba(30, 64, 175, 0.3), rgba(59, 130, 246, 0.3))" if popular else "linear-gradient(135deg, rgba(30, 30, 50, 0.95), rgba(20, 20, 40, 0.8))",
border=f"3px solid #3b82f6" if popular else "2px solid rgba(30, 64, 175, 0.3)",
background="linear-gradient(135deg, rgba(27, 75, 127, 0.3), rgba(77, 184, 196, 0.3))" if popular else "linear-gradient(135deg, rgba(30, 30, 50, 0.95), rgba(20, 20, 40, 0.8))",
border=f"3px solid #4DB8C4" if popular else "2px solid rgba(27, 75, 127, 0.3)",
border_radius="32px",
position="relative",
min_height="620px",
box_shadow="0 25px 80px rgba(30, 64, 175, 0.5)" if popular else "0 15px 50px rgba(0, 0, 0, 0.4)",
_hover={"transform": "translateY(-16px) scale(1.04)", "box_shadow": "0 35px 100px rgba(30, 64, 175, 0.7)"},
box_shadow="0 25px 80px rgba(27, 75, 127, 0.5)" if popular else "0 15px 50px rgba(0, 0, 0, 0.4)",
_hover={"transform": "translateY(-16px) scale(1.04)", "box_shadow": "0 35px 100px rgba(27, 75, 127, 0.7)"},
transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
align="center",
)
@@ -637,9 +637,9 @@ def pricing_section() -> rx.Component:
rx.vstack(
rx.badge(
"💎 پلن‌های قیمتی",
background="linear-gradient(135deg, rgba(30, 64, 175, 0.2), rgba(59, 130, 246, 0.2))",
border="2px solid rgba(30, 64, 175, 0.4)",
color="#1e40af",
background="linear-gradient(135deg, rgba(27, 75, 127, 0.2), rgba(77, 184, 196, 0.2))",
border="2px solid rgba(27, 75, 127, 0.4)",
color="#1B4B7F",
font_weight="700",
font_size="16px",
padding="10px 24px",
@@ -674,7 +674,7 @@ def server_table_row(provider: str, price: str, cpu: str, ram: str, location: st
align="center",
)
),
rx.table.cell(rx.text(price, color="#3b82f6", font_weight="700", font_size="17px")),
rx.table.cell(rx.text(price, color="#4DB8C4", font_weight="700", font_size="17px")),
rx.table.cell(rx.text(cpu, font_weight="600", font_size="16px")),
rx.table.cell(rx.text(ram, font_weight="600", font_size="16px")),
rx.table.cell(rx.text(location, color="#94A3B8", font_weight="600")),
@@ -682,11 +682,11 @@ def server_table_row(provider: str, price: str, cpu: str, ram: str, location: st
rx.button(
"سفارش",
size="3",
background="linear-gradient(135deg, #1e40af, #3b82f6)",
background="linear-gradient(135deg, #1B4B7F, #4DB8C4)",
color="white",
border_radius="10px",
font_weight="700",
_hover={"transform": "scale(1.08)", "box_shadow": "0 8px 25px rgba(30, 64, 175, 0.6)"},
_hover={"transform": "scale(1.08)", "box_shadow": "0 8px 25px rgba(27, 75, 127, 0.6)"},
transition="all 0.3s",
)
),
@@ -697,9 +697,9 @@ def server_comparison() -> rx.Component:
rx.vstack(
rx.badge(
"🌐 ارائه‌دهندگان",
background="linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(59, 130, 246, 0.2))",
border="2px solid rgba(6, 182, 212, 0.4)",
color="#06b6d4",
background="linear-gradient(135deg, rgba(109, 215, 229, 0.2), rgba(77, 184, 196, 0.2))",
border="2px solid rgba(109, 215, 229, 0.4)",
color="#6DD7E5",
font_weight="700",
font_size="16px",
padding="10px 24px",
@@ -711,12 +711,12 @@ def server_comparison() -> rx.Component:
rx.table.root(
rx.table.header(
rx.table.row(
rx.table.column_header_cell("ارائه‌دهنده", color="#3b82f6", font_weight="800", font_size="17px"),
rx.table.column_header_cell("قیمت", color="#3b82f6", font_weight="800", font_size="17px"),
rx.table.column_header_cell("CPU", color="#3b82f6", font_weight="800", font_size="17px"),
rx.table.column_header_cell("RAM", color="#3b82f6", font_weight="800", font_size="17px"),
rx.table.column_header_cell("مکان", color="#3b82f6", font_weight="800", font_size="17px"),
rx.table.column_header_cell("", color="#3b82f6", font_weight="800"),
rx.table.column_header_cell("ارائه‌دهنده", color="#4DB8C4", font_weight="800", font_size="17px"),
rx.table.column_header_cell("قیمت", color="#4DB8C4", font_weight="800", font_size="17px"),
rx.table.column_header_cell("CPU", color="#4DB8C4", font_weight="800", font_size="17px"),
rx.table.column_header_cell("RAM", color="#4DB8C4", font_weight="800", font_size="17px"),
rx.table.column_header_cell("مکان", color="#4DB8C4", font_weight="800", font_size="17px"),
rx.table.column_header_cell("", color="#4DB8C4", font_weight="800"),
),
),
rx.table.body(
@@ -730,11 +730,11 @@ def server_comparison() -> rx.Component:
width="100%",
),
background="linear-gradient(135deg, rgba(30, 30, 50, 0.9), rgba(20, 20, 40, 0.7))",
border="2px solid rgba(30, 64, 175, 0.3)",
border="2px solid rgba(27, 75, 127, 0.3)",
border_radius="28px",
padding="40px",
box_shadow="0 20px 70px rgba(0, 0, 0, 0.6)",
_hover={"box_shadow": "0 25px 90px rgba(30, 64, 175, 0.3)"},
_hover={"box_shadow": "0 25px 90px rgba(27, 75, 127, 0.3)"},
transition="all 0.4s",
),
max_width="1500px",
@@ -757,7 +757,7 @@ def testimonial_card(name: str, role: str, text: str, initial: str, gradient: st
display="flex",
align_items="center",
justify_content="center",
box_shadow="0 12px 40px rgba(30, 64, 175, 0.6)",
box_shadow="0 12px 40px rgba(27, 75, 127, 0.6)",
),
rx.vstack(
rx.text(name, font_weight="800", color="white", font_size="20px"),
@@ -777,12 +777,12 @@ def testimonial_card(name: str, role: str, text: str, initial: str, gradient: st
rx.text(text, color="#CBD5E1", line_height="1.8", font_size="17px", font_weight="500"),
padding="48px",
background="linear-gradient(135deg, rgba(30, 30, 50, 0.95), rgba(20, 20, 40, 0.8))",
border="2px solid rgba(30, 64, 175, 0.25)",
border="2px solid rgba(27, 75, 127, 0.25)",
border_radius="28px",
align="start",
min_height="320px",
box_shadow="0 15px 50px rgba(0, 0, 0, 0.5)",
_hover={"transform": "translateY(-10px) scale(1.02)", "border": "2px solid #1e40af", "box_shadow": "0 25px 70px rgba(30, 64, 175, 0.5)"},
_hover={"transform": "translateY(-10px) scale(1.02)", "border": "2px solid #1B4B7F", "box_shadow": "0 25px 70px rgba(27, 75, 127, 0.5)"},
transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
)
@@ -791,9 +791,9 @@ def testimonials_section() -> rx.Component:
rx.vstack(
rx.badge(
"💬 نظرات مشتریان",
background="linear-gradient(135deg, rgba(30, 64, 175, 0.2), rgba(59, 130, 246, 0.2))",
border="2px solid rgba(30, 64, 175, 0.4)",
color="#1e40af",
background="linear-gradient(135deg, rgba(27, 75, 127, 0.2), rgba(77, 184, 196, 0.2))",
border="2px solid rgba(27, 75, 127, 0.4)",
color="#1B4B7F",
font_weight="700",
font_size="16px",
padding="10px 24px",
@@ -807,21 +807,21 @@ def testimonials_section() -> rx.Component:
"مدیر فنی شرکت آریا",
"سرویس عالی با پشتیبانی فوق‌العاده. مهاجرت سایتمان به VPS خیلی روان انجام شد. کاملا راضی هستیم.",
"A",
"linear-gradient(135deg, #1e40af, #4F46E5)"
"linear-gradient(135deg, #1B4B7F, #4F46E5)"
),
testimonial_card(
"مریم حسینی",
"مدیر محصول فروشگاه آنلاین",
"هاست وردپرسمون خیلی سریع شد. تیم پشتیبانی هم خیلی دلسوز و حرفه‌ای هستند. پیشنهاد می‌کنم.",
"M",
"linear-gradient(135deg, #3b82f6, #7C3AED)"
"linear-gradient(135deg, #4DB8C4, #7C3AED)"
),
testimonial_card(
"رضا کریمی",
"توسعه‌دهنده نرم‌افزار",
"خدمات DevOps و راه‌اندازی CI/CD عالی بود. تیم خیلی با تجربه و کارشناس هستند. ممنونم.",
"R",
"linear-gradient(135deg, #06b6d4, #9333EA)"
"linear-gradient(135deg, #6DD7E5, #9333EA)"
),
spacing="9",
width="100%",
@@ -840,9 +840,9 @@ def contact_section() -> rx.Component:
rx.vstack(
rx.badge(
"📞 تماس با ما",
background="linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(6, 182, 212, 0.2))",
border="2px solid rgba(59, 130, 246, 0.4)",
color="#3b82f6",
background="linear-gradient(135deg, rgba(77, 184, 196, 0.2), rgba(109, 215, 229, 0.2))",
border="2px solid rgba(77, 184, 196, 0.4)",
color="#4DB8C4",
font_weight="700",
font_size="16px",
padding="10px 24px",
@@ -861,12 +861,12 @@ def contact_section() -> rx.Component:
width="100%",
padding="18px",
background="rgba(30, 30, 50, 0.8)",
border="2px solid rgba(30, 64, 175, 0.3)",
border="2px solid rgba(27, 75, 127, 0.3)",
border_radius="14px",
color="white",
font_size="17px",
font_weight="600",
_focus={"border": "2px solid #1e40af", "box_shadow": "0 0 0 3px rgba(30, 64, 175, 0.2)"},
_focus={"border": "2px solid #1B4B7F", "box_shadow": "0 0 0 3px rgba(27, 75, 127, 0.2)"},
),
rx.input(
placeholder="ایمیل",
@@ -876,12 +876,12 @@ def contact_section() -> rx.Component:
width="100%",
padding="18px",
background="rgba(30, 30, 50, 0.8)",
border="2px solid rgba(30, 64, 175, 0.3)",
border="2px solid rgba(27, 75, 127, 0.3)",
border_radius="14px",
color="white",
font_size="17px",
font_weight="600",
_focus={"border": "2px solid #1e40af", "box_shadow": "0 0 0 3px rgba(30, 64, 175, 0.2)"},
_focus={"border": "2px solid #1B4B7F", "box_shadow": "0 0 0 3px rgba(27, 75, 127, 0.2)"},
),
rx.select(
["هاست وردپرس", "دامین", "سرور اختصاصی", "DevOps", "مشاوره", "سایر"],
@@ -898,12 +898,12 @@ def contact_section() -> rx.Component:
min_height="160px",
padding="18px",
background="rgba(30, 30, 50, 0.8)",
border="2px solid rgba(30, 64, 175, 0.3)",
border="2px solid rgba(27, 75, 127, 0.3)",
border_radius="14px",
color="white",
font_size="17px",
font_weight="600",
_focus={"border": "2px solid #1e40af", "box_shadow": "0 0 0 3px rgba(30, 64, 175, 0.2)"},
_focus={"border": "2px solid #1B4B7F", "box_shadow": "0 0 0 3px rgba(27, 75, 127, 0.2)"},
),
rx.button(
rx.hstack(
@@ -915,11 +915,11 @@ def contact_section() -> rx.Component:
type="submit",
width="100%",
padding="22px",
background="linear-gradient(135deg, #1e40af, #3b82f6)",
background="linear-gradient(135deg, #1B4B7F, #4DB8C4)",
color="white",
border_radius="16px",
box_shadow="0 12px 40px rgba(30, 64, 175, 0.6)",
_hover={"transform": "translateY(-4px)", "box_shadow": "0 18px 60px rgba(30, 64, 175, 0.8)"},
box_shadow="0 12px 40px rgba(27, 75, 127, 0.6)",
_hover={"transform": "translateY(-4px)", "box_shadow": "0 18px 60px rgba(27, 75, 127, 0.8)"},
transition="all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
),
spacing="7",
@@ -936,24 +936,24 @@ def contact_section() -> rx.Component:
rx.icon("mail", size=44, color="white"),
width="80px",
height="80px",
background="linear-gradient(135deg, #1e40af, #4F46E5)",
background="linear-gradient(135deg, #1B4B7F, #4F46E5)",
border_radius="20px",
display="flex",
align_items="center",
justify_content="center",
margin_bottom="24px",
box_shadow="0 12px 40px rgba(30, 64, 175, 0.6)",
box_shadow="0 12px 40px rgba(27, 75, 127, 0.6)",
),
rx.heading("ایمیل", size="6", font_weight="800"),
rx.text("info@peikarband.ir", color="#3b82f6", font_size="18px", font_weight="700"),
rx.text("info@peikarband.ir", color="#4DB8C4", font_size="18px", font_weight="700"),
rx.text("پاسخ در کمتر از ۲ ساعت", font_size="15px", color="#64748B", font_weight="600"),
padding="40px",
background="linear-gradient(135deg, rgba(30, 30, 50, 0.9), rgba(20, 20, 40, 0.7))",
border="2px solid rgba(30, 64, 175, 0.3)",
border="2px solid rgba(27, 75, 127, 0.3)",
border_radius="24px",
align="center",
width="100%",
_hover={"border": "2px solid #1e40af", "transform": "translateY(-8px)", "box_shadow": "0 20px 60px rgba(30, 64, 175, 0.4)"},
_hover={"border": "2px solid #1B4B7F", "transform": "translateY(-8px)", "box_shadow": "0 20px 60px rgba(27, 75, 127, 0.4)"},
transition="all 0.4s",
),
rx.vstack(
@@ -961,24 +961,24 @@ def contact_section() -> rx.Component:
rx.icon("message-circle", size=44, color="white"),
width="80px",
height="80px",
background="linear-gradient(135deg, #3b82f6, #7C3AED)",
background="linear-gradient(135deg, #4DB8C4, #7C3AED)",
border_radius="20px",
display="flex",
align_items="center",
justify_content="center",
margin_bottom="24px",
box_shadow="0 12px 40px rgba(59, 130, 246, 0.6)",
box_shadow="0 12px 40px rgba(77, 184, 196, 0.6)",
),
rx.heading("تلگرام", size="6", font_weight="800"),
rx.text("@peikarband", color="#06b6d4", font_size="18px", font_weight="700"),
rx.text("@peikarband", color="#6DD7E5", font_size="18px", font_weight="700"),
rx.text("پشتیبانی آنلاین", font_size="15px", color="#64748B", font_weight="600"),
padding="40px",
background="linear-gradient(135deg, rgba(30, 30, 50, 0.9), rgba(20, 20, 40, 0.7))",
border="2px solid rgba(59, 130, 246, 0.3)",
border="2px solid rgba(77, 184, 196, 0.3)",
border_radius="24px",
align="center",
width="100%",
_hover={"border": "2px solid #3b82f6", "transform": "translateY(-8px)", "box_shadow": "0 20px 60px rgba(59, 130, 246, 0.4)"},
_hover={"border": "2px solid #4DB8C4", "transform": "translateY(-8px)", "box_shadow": "0 20px 60px rgba(77, 184, 196, 0.4)"},
transition="all 0.4s",
),
rx.vstack(
@@ -986,24 +986,24 @@ def contact_section() -> rx.Component:
rx.icon("phone", size=44, color="white"),
width="80px",
height="80px",
background="linear-gradient(135deg, #06b6d4, #9333EA)",
background="linear-gradient(135deg, #6DD7E5, #9333EA)",
border_radius="20px",
display="flex",
align_items="center",
justify_content="center",
margin_bottom="24px",
box_shadow="0 12px 40px rgba(6, 182, 212, 0.6)",
box_shadow="0 12px 40px rgba(109, 215, 229, 0.6)",
),
rx.heading("تلفن", size="6", font_weight="800"),
rx.text("۰۲۱-۱۲۳۴۵۶۷۸", color="#22d3ee", font_size="18px", font_weight="700"),
rx.text("۰۲۱-۱۲۳۴۵۶۷۸", color="#7CE3F2", font_size="18px", font_weight="700"),
rx.text("شنبه تا پنجشنبه ۹-۱۸", font_size="15px", color="#64748B", font_weight="600"),
padding="40px",
background="linear-gradient(135deg, rgba(30, 30, 50, 0.9), rgba(20, 20, 40, 0.7))",
border="2px solid rgba(6, 182, 212, 0.3)",
border="2px solid rgba(109, 215, 229, 0.3)",
border_radius="24px",
align="center",
width="100%",
_hover={"border": "2px solid #06b6d4", "transform": "translateY(-8px)", "box_shadow": "0 20px 60px rgba(6, 182, 212, 0.4)"},
_hover={"border": "2px solid #6DD7E5", "transform": "translateY(-8px)", "box_shadow": "0 20px 60px rgba(109, 215, 229, 0.4)"},
transition="all 0.4s",
),
spacing="7",
@@ -1023,12 +1023,12 @@ def contact_section() -> rx.Component:
def footer() -> rx.Component:
return rx.box(
rx.vstack(
rx.divider(background="rgba(30, 64, 175, 0.4)", margin_y="10"),
rx.divider(background="rgba(27, 75, 127, 0.4)", margin_y="10"),
rx.hstack(
rx.vstack(
rx.hstack(
rx.icon("cloud", size=32, color="#3b82f6"),
rx.heading("پیکربند", size="7", color="#3b82f6", font_weight="900"),
rx.icon("cloud", size=32, color="#4DB8C4"),
rx.heading("پیکربند", size="7", color="#4DB8C4", font_weight="900"),
spacing="3",
),
rx.text(
@@ -1049,13 +1049,13 @@ def footer() -> rx.Component:
rx.icon("facebook", size=24),
width="52px",
height="52px",
background="rgba(30, 64, 175, 0.15)",
border="2px solid rgba(30, 64, 175, 0.4)",
background="rgba(27, 75, 127, 0.15)",
border="2px solid rgba(27, 75, 127, 0.4)",
border_radius="14px",
display="flex",
align_items="center",
justify_content="center",
_hover={"background": "#1e40af", "border": "2px solid #1e40af", "transform": "translateY(-5px) scale(1.1)"},
_hover={"background": "#1B4B7F", "border": "2px solid #1B4B7F", "transform": "translateY(-5px) scale(1.1)"},
transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
),
href="#",
@@ -1066,13 +1066,13 @@ def footer() -> rx.Component:
rx.icon("twitter", size=24),
width="52px",
height="52px",
background="rgba(59, 130, 246, 0.15)",
border="2px solid rgba(59, 130, 246, 0.4)",
background="rgba(77, 184, 196, 0.15)",
border="2px solid rgba(77, 184, 196, 0.4)",
border_radius="14px",
display="flex",
align_items="center",
justify_content="center",
_hover={"background": "#3b82f6", "border": "2px solid #3b82f6", "transform": "translateY(-5px) scale(1.1)"},
_hover={"background": "#4DB8C4", "border": "2px solid #4DB8C4", "transform": "translateY(-5px) scale(1.1)"},
transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
),
href="#",
@@ -1083,13 +1083,13 @@ def footer() -> rx.Component:
rx.icon("message-circle", size=24),
width="52px",
height="52px",
background="rgba(6, 182, 212, 0.15)",
border="2px solid rgba(6, 182, 212, 0.4)",
background="rgba(109, 215, 229, 0.15)",
border="2px solid rgba(109, 215, 229, 0.4)",
border_radius="14px",
display="flex",
align_items="center",
justify_content="center",
_hover={"background": "#06b6d4", "border": "2px solid #06b6d4", "transform": "translateY(-5px) scale(1.1)"},
_hover={"background": "#6DD7E5", "border": "2px solid #6DD7E5", "transform": "translateY(-5px) scale(1.1)"},
transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
),
href="https://t.me/peikarband",
@@ -1101,7 +1101,7 @@ def footer() -> rx.Component:
align="center",
padding_y="40px",
),
rx.divider(background="rgba(30, 64, 175, 0.3)", margin_y="8"),
rx.divider(background="rgba(27, 75, 127, 0.3)", margin_y="8"),
rx.text(
"© ۱۴۰۳ پیکربند. تمامی حقوق محفوظ است.",
color="#64748B",
@@ -1115,7 +1115,7 @@ def footer() -> rx.Component:
),
width="100%",
background="linear-gradient(180deg, rgba(10, 10, 26, 0.95) 0%, rgba(5, 5, 16, 1) 100%)",
border_top="2px solid rgba(30, 64, 175, 0.4)",
border_top="2px solid rgba(27, 75, 127, 0.4)",
)
def floating_chat() -> rx.Component:
@@ -1124,13 +1124,13 @@ def floating_chat() -> rx.Component:
rx.icon("message-circle", size=40, color="white"),
width="76px",
height="76px",
background="linear-gradient(135deg, #1e40af, #3b82f6)",
background="linear-gradient(135deg, #1B4B7F, #4DB8C4)",
border_radius="full",
display="flex",
align_items="center",
justify_content="center",
box_shadow="0 18px 60px rgba(30, 64, 175, 0.7)",
_hover={"transform": "scale(1.2) rotate(10deg)", "box_shadow": "0 25px 80px rgba(30, 64, 175, 0.9)"},
box_shadow="0 18px 60px rgba(27, 75, 127, 0.7)",
_hover={"transform": "scale(1.2) rotate(10deg)", "box_shadow": "0 25px 80px rgba(27, 75, 127, 0.9)"},
transition="all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
),
href="https://t.me/peikarband",