1dab36d4ef
Some checks failed
CD - Build & Deploy / build-and-push (push) Has been cancelled
CD - Build & Deploy / package-helm (push) Has been cancelled
CD - Build & Deploy / deploy-staging (push) Has been cancelled
CD - Build & Deploy / deploy-production (push) Has been cancelled
CD - Build & Deploy / release (push) Has been cancelled
CI / test (3.11) (push) Has been cancelled
CI / test (3.12) (push) Has been cancelled
CI / security (push) Has been cancelled
- Implemented sequential fade-in animations for all hero elements - Each element appears with timed delay (0.2s → 1.3s) - Added fadeInUp, fadeInScale, slideInRight animations - Main illustration fades in at 0.3s - Floating cards appear sequentially (0.9s, 1.1s, 1.3s) - Text and buttons animate from bottom to top - Smooth professional loading experience - Mimics layered reveal seen in premium themes Animation Timeline: - 0.2s: Coming soon badge - 0.3s: Main illustration - 0.4s: Heading - 0.6s: Description - 0.8s: Primary button - 1.0s: Secondary button - 0.9s-1.3s: Floating stats cards
1311 lines
65 KiB
Python
1311 lines
65 KiB
Python
import reflex as rx
|
||
|
||
class State(rx.State):
|
||
form_submitted: bool = False
|
||
|
||
def handle_submit(self):
|
||
self.form_submitted = True
|
||
return rx.toast.success("پیام شما با موفقیت ارسال شد!")
|
||
|
||
def navbar() -> rx.Component:
|
||
return rx.box(
|
||
rx.hstack(
|
||
rx.hstack(
|
||
rx.image(src="/logo.png", width="50px", height="50px"),
|
||
rx.heading("پیکربند", size="7",
|
||
background="linear-gradient(135deg, #1B4B7F, #4DB8C4, #6DD7E5)",
|
||
background_clip="text",
|
||
style={"-webkit-background-clip": "text", "-webkit-text-fill-color": "transparent"},
|
||
letter_spacing="1px",
|
||
font_weight="900"),
|
||
spacing="3",
|
||
align="center",
|
||
),
|
||
rx.spacer(),
|
||
rx.hstack(
|
||
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"),
|
||
rx.icon("arrow-left", size=18),
|
||
spacing="2",
|
||
align="center",
|
||
),
|
||
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(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(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"},
|
||
),
|
||
spacing="8",
|
||
),
|
||
width="100%",
|
||
align="center",
|
||
),
|
||
position="fixed",
|
||
top="0",
|
||
width="100%",
|
||
backdrop_filter="blur(20px) saturate(180%)",
|
||
background="rgba(5, 10, 20, 0.92)",
|
||
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)",
|
||
)
|
||
|
||
def hero() -> rx.Component:
|
||
return rx.box(
|
||
# Background decorative layers
|
||
rx.box(
|
||
rx.box(
|
||
width="600px",
|
||
height="600px",
|
||
background="radial-gradient(circle, rgba(27, 75, 127, 0.3) 0%, transparent 70%)",
|
||
position="absolute",
|
||
top="-200px",
|
||
left="-100px",
|
||
border_radius="50%",
|
||
filter="blur(100px)",
|
||
style={"animation": "floatSlow 20s ease-in-out infinite"},
|
||
),
|
||
rx.box(
|
||
width="500px",
|
||
height="500px",
|
||
background="radial-gradient(circle, rgba(77, 184, 196, 0.25) 0%, transparent 70%)",
|
||
position="absolute",
|
||
top="100px",
|
||
right="-150px",
|
||
border_radius="50%",
|
||
filter="blur(80px)",
|
||
style={"animation": "floatSlow 18s ease-in-out infinite reverse"},
|
||
),
|
||
rx.box(
|
||
width="400px",
|
||
height="400px",
|
||
background="radial-gradient(circle, rgba(109, 215, 229, 0.2) 0%, transparent 70%)",
|
||
position="absolute",
|
||
bottom="-100px",
|
||
right="20%",
|
||
border_radius="50%",
|
||
filter="blur(90px)",
|
||
style={"animation": "floatSlow 22s ease-in-out infinite"},
|
||
),
|
||
position="absolute",
|
||
width="100%",
|
||
height="100%",
|
||
overflow="hidden",
|
||
z_index="0",
|
||
),
|
||
# Main content with floating cards
|
||
rx.hstack(
|
||
rx.vstack(
|
||
rx.badge(
|
||
rx.hstack(
|
||
rx.icon("clock", size=20, color="#fbbf24"),
|
||
rx.text("بزودی کنار شما خواهیم بود", font_weight="800", font_size="16px"),
|
||
rx.icon("zap", size=20, color="#fbbf24"),
|
||
spacing="3",
|
||
align="center",
|
||
),
|
||
variant="outline",
|
||
padding="18px 42px",
|
||
border_radius="full",
|
||
background="linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(245, 158, 11, 0.2))",
|
||
border="3px solid rgba(251, 191, 36, 0.7)",
|
||
box_shadow="0 12px 50px rgba(251, 191, 36, 0.6), 0 0 80px rgba(251, 191, 36, 0.3)",
|
||
margin_bottom="32px",
|
||
font_size="17px",
|
||
style={"animation": "fadeInUp 0.8s ease-out 0.2s backwards"},
|
||
),
|
||
# rx.badge(
|
||
# rx.hstack(
|
||
# rx.icon("sparkles", size=16, color="#6DD7E5"),
|
||
# rx.text("هاستینگ، دامین و DevOps", font_weight="600"),
|
||
# spacing="2",
|
||
# align="center",
|
||
# ),
|
||
# variant="outline",
|
||
# padding="12px 24px",
|
||
# border_radius="full",
|
||
# 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(77, 184, 196, 0.3)",
|
||
# ),
|
||
rx.heading(
|
||
"میزبانی وب و زیرساخت ابری ",
|
||
rx.el.span("حرفهای",
|
||
style={
|
||
"background": "linear-gradient(135deg, #1B4B7F, #4DB8C4, #6DD7E5, #7CE3F2)",
|
||
"background-clip": "text",
|
||
"-webkit-background-clip": "text",
|
||
"-webkit-text-fill-color": "transparent",
|
||
"animation": "gradientShift 4s ease infinite",
|
||
"background-size": "200% auto",
|
||
}),
|
||
size="9",
|
||
font_weight="900",
|
||
line_height="1.15",
|
||
letter_spacing="-0.04em",
|
||
margin_top="16px",
|
||
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",
|
||
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",
|
||
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)",
|
||
_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)"
|
||
},
|
||
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"},
|
||
),
|
||
rx.button(
|
||
rx.hstack(
|
||
rx.icon("zap", size=22),
|
||
rx.text("مشاهده قیمتها", font_weight="800", font_size="18px"),
|
||
spacing="3",
|
||
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)",
|
||
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)"
|
||
},
|
||
transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
|
||
style={"animation": "fadeInUp 0.8s ease-out 1s backwards"},
|
||
),
|
||
spacing="6",
|
||
margin_top="56px",
|
||
),
|
||
rx.hstack(
|
||
rx.hstack(
|
||
rx.icon("check", size=18, color="#10B981"),
|
||
rx.text("پشتیبانی 24/7", color="#CBD5E1", font_size="15px", font_weight="600"),
|
||
spacing="2",
|
||
align="center",
|
||
),
|
||
rx.hstack(
|
||
rx.icon("check", size=18, color="#10B981"),
|
||
rx.text("امنیت بالا", color="#CBD5E1", font_size="15px", font_weight="600"),
|
||
spacing="2",
|
||
align="center",
|
||
),
|
||
rx.hstack(
|
||
rx.icon("check", size=18, color="#10B981"),
|
||
rx.text("سرعت فوقالعاده", color="#CBD5E1", font_size="15px", font_weight="600"),
|
||
spacing="2",
|
||
align="center",
|
||
),
|
||
spacing="8",
|
||
margin_top="40px",
|
||
),
|
||
spacing="8",
|
||
align="start",
|
||
width="100%",
|
||
position="relative",
|
||
z_index="1",
|
||
),
|
||
rx.box(
|
||
# Main illustration with layered effects
|
||
rx.box(
|
||
# Background glow layer
|
||
rx.box(
|
||
width="550px",
|
||
height="550px",
|
||
background="radial-gradient(circle, rgba(77, 184, 196, 0.15) 0%, transparent 70%)",
|
||
position="absolute",
|
||
top="50%",
|
||
left="50%",
|
||
transform="translate(-50%, -50%)",
|
||
border_radius="50%",
|
||
filter="blur(60px)",
|
||
style={"animation": "pulse 4s ease-in-out infinite"},
|
||
),
|
||
# Floating card 1 - top right
|
||
rx.box(
|
||
rx.vstack(
|
||
rx.icon("shield-check", size=28, color="#10B981"),
|
||
rx.text("99.9%", font_size="24px", font_weight="900", color="white"),
|
||
rx.text("Uptime", font_size="13px", color="#94A3B8", font_weight="600"),
|
||
spacing="2",
|
||
align="center",
|
||
),
|
||
position="absolute",
|
||
top="-20px",
|
||
right="-30px",
|
||
padding="20px 28px",
|
||
background="linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.1))",
|
||
border="2px solid rgba(16, 185, 129, 0.3)",
|
||
border_radius="20px",
|
||
backdrop_filter="blur(10px)",
|
||
box_shadow="0 10px 40px rgba(16, 185, 129, 0.3)",
|
||
style={"animation": "fadeInScale 0.6s ease-out 0.9s backwards, floatSlow 6s ease-in-out 1.5s infinite"},
|
||
),
|
||
# Floating card 2 - left middle
|
||
rx.box(
|
||
rx.vstack(
|
||
rx.icon("zap", size=26, color="#F59E0B"),
|
||
rx.text("10x", font_size="22px", font_weight="900", color="white"),
|
||
rx.text("سریعتر", font_size="12px", color="#94A3B8", font_weight="600"),
|
||
spacing="2",
|
||
align="center",
|
||
),
|
||
position="absolute",
|
||
top="40%",
|
||
left="-40px",
|
||
padding="18px 24px",
|
||
background="linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 146, 60, 0.1))",
|
||
border="2px solid rgba(245, 158, 11, 0.3)",
|
||
border_radius="18px",
|
||
backdrop_filter="blur(10px)",
|
||
box_shadow="0 10px 40px rgba(245, 158, 11, 0.3)",
|
||
style={"animation": "fadeInScale 0.6s ease-out 1.1s backwards, floatSlow 7s ease-in-out 1.7s infinite reverse"},
|
||
),
|
||
# Floating card 3 - bottom center
|
||
rx.box(
|
||
rx.hstack(
|
||
rx.icon("users", size=24, color="#6DD7E5"),
|
||
rx.vstack(
|
||
rx.text("1000+", font_size="20px", font_weight="900", color="white"),
|
||
rx.text("مشتری راضی", font_size="11px", color="#94A3B8", font_weight="600"),
|
||
spacing="0",
|
||
align="start",
|
||
),
|
||
spacing="3",
|
||
align="center",
|
||
),
|
||
position="absolute",
|
||
bottom="-10px",
|
||
left="50%",
|
||
transform="translateX(-50%)",
|
||
padding="16px 28px",
|
||
background="linear-gradient(135deg, rgba(109, 215, 229, 0.15), rgba(124, 227, 242, 0.1))",
|
||
border="2px solid rgba(109, 215, 229, 0.3)",
|
||
border_radius="16px",
|
||
backdrop_filter="blur(10px)",
|
||
box_shadow="0 10px 40px rgba(109, 215, 229, 0.3)",
|
||
style={"animation": "fadeInScale 0.6s ease-out 1.3s backwards, floatSlow 8s ease-in-out 1.9s infinite"},
|
||
),
|
||
# Main image
|
||
rx.image(
|
||
src="https://illustrations.popsy.co/violet/web-design.svg",
|
||
width="600px",
|
||
height="auto",
|
||
filter="drop-shadow(0 20px 60px rgba(27, 75, 127, 0.4))",
|
||
style={"animation": "fadeInScale 1s ease-out 0.3s backwards, scaleFloat 5s ease-in-out 1.3s infinite"},
|
||
),
|
||
position="relative",
|
||
),
|
||
display=["none", "none", "none", "block"],
|
||
position="relative",
|
||
z_index="1",
|
||
),
|
||
spacing="9",
|
||
align="center",
|
||
width="100%",
|
||
max_width="1500px",
|
||
margin="0 auto",
|
||
padding="200px 8% 160px",
|
||
),
|
||
width="100%",
|
||
background="radial-gradient(ellipse at top, #0c2340 0%, #0a1628 40%, #050510 70%)",
|
||
position="relative",
|
||
overflow="hidden",
|
||
)
|
||
|
||
def wordpress_cloud_highlight() -> rx.Component:
|
||
return rx.box(
|
||
rx.vstack(
|
||
rx.hstack(
|
||
rx.vstack(
|
||
rx.badge(
|
||
rx.hstack(
|
||
rx.icon("award", size=20, color="#F59E0B"),
|
||
rx.text("تخصصی و پیشرو", font_weight="700"),
|
||
spacing="2",
|
||
align="center",
|
||
),
|
||
background="linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 146, 60, 0.2))",
|
||
border="2px solid rgba(245, 158, 11, 0.5)",
|
||
padding="12px 28px",
|
||
border_radius="full",
|
||
font_size="16px",
|
||
box_shadow="0 8px 30px rgba(245, 158, 11, 0.4)",
|
||
),
|
||
rx.heading(
|
||
"اولین ارائهدهنده تخصصی ",
|
||
rx.el.span("وردپرس کلود",
|
||
style={
|
||
"background": "linear-gradient(135deg, #F59E0B, #FB923C, #F97316)",
|
||
"background-clip": "text",
|
||
"-webkit-background-clip": "text",
|
||
"-webkit-text-fill-color": "transparent"
|
||
}),
|
||
" در ایران",
|
||
size="9",
|
||
font_weight="900",
|
||
line_height="1.2",
|
||
letter_spacing="-0.03em",
|
||
text_align=["center", "center", "right"],
|
||
),
|
||
rx.text(
|
||
"با کلود اختصاصی وردپرس، سایت شما را با سرعت، امنیت و مدیریت هوشمند تجربه کنید. بدون نگرانی از فنیها، فقط روی کسبوکارتان تمرکز کنید",
|
||
color="#CBD5E1",
|
||
font_size="20px",
|
||
line_height="1.8",
|
||
font_weight="500",
|
||
max_width="600px",
|
||
text_align=["center", "center", "right"],
|
||
),
|
||
rx.vstack(
|
||
rx.hstack(
|
||
rx.box(
|
||
rx.icon("check", size=24, color="#10B981"),
|
||
width="48px",
|
||
height="48px",
|
||
background="linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2))",
|
||
border_radius="12px",
|
||
display="flex",
|
||
align_items="center",
|
||
justify_content="center",
|
||
),
|
||
rx.vstack(
|
||
rx.text("مدیریت خودکار", font_weight="800", font_size="18px", color="white"),
|
||
rx.text("بروزرسانی، بکاپ و امنیت به صورت کاملا اتوماتیک", color="#94A3B8", font_size="15px"),
|
||
spacing="1",
|
||
align="start",
|
||
),
|
||
spacing="4",
|
||
align="start",
|
||
),
|
||
rx.hstack(
|
||
rx.box(
|
||
rx.icon("zap", size=24, color="#F59E0B"),
|
||
width="48px",
|
||
height="48px",
|
||
background="linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 146, 60, 0.2))",
|
||
border_radius="12px",
|
||
display="flex",
|
||
align_items="center",
|
||
justify_content="center",
|
||
),
|
||
rx.vstack(
|
||
rx.text("بهینهسازی حرفهای", font_weight="800", font_size="18px", color="white"),
|
||
rx.text("کش پیشرفته، CDN و بهینهسازی دیتابیس", color="#94A3B8", font_size="15px"),
|
||
spacing="1",
|
||
align="start",
|
||
),
|
||
spacing="4",
|
||
align="start",
|
||
),
|
||
rx.hstack(
|
||
rx.box(
|
||
rx.icon("shield", size=24, color="#4DB8C4"),
|
||
width="48px",
|
||
height="48px",
|
||
background="linear-gradient(135deg, rgba(77, 184, 196, 0.2), rgba(109, 215, 229, 0.2))",
|
||
border_radius="12px",
|
||
display="flex",
|
||
align_items="center",
|
||
justify_content="center",
|
||
),
|
||
rx.vstack(
|
||
rx.text("امنیت پیشرفته", font_weight="800", font_size="18px", color="white"),
|
||
rx.text("فایروال WAF، محافظت از Brute Force و اسکن مداوم", color="#94A3B8", font_size="15px"),
|
||
spacing="1",
|
||
align="start",
|
||
),
|
||
spacing="4",
|
||
align="start",
|
||
),
|
||
spacing="6",
|
||
align="start",
|
||
width="100%",
|
||
),
|
||
rx.button(
|
||
rx.hstack(
|
||
rx.icon("external-link", size=22),
|
||
rx.text("بیشتر بدانید", font_weight="700", font_size="18px"),
|
||
spacing="2",
|
||
align="center",
|
||
),
|
||
size="4",
|
||
background="linear-gradient(135deg, #F59E0B, #FB923C)",
|
||
color="white",
|
||
border_radius="14px",
|
||
padding="24px 48px",
|
||
box_shadow="0 12px 40px rgba(245, 158, 11, 0.6)",
|
||
_hover={"transform": "translateY(-4px) scale(1.05)", "box_shadow": "0 20px 60px rgba(245, 158, 11, 0.8)"},
|
||
transition="all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
|
||
margin_top="48px",
|
||
),
|
||
spacing="8",
|
||
align="start",
|
||
width="100%",
|
||
),
|
||
rx.box(
|
||
rx.vstack(
|
||
rx.box(
|
||
rx.image(
|
||
src="https://illustrations.popsy.co/violet/cloud-hosting.svg",
|
||
width="450px",
|
||
height="auto",
|
||
),
|
||
padding="40px",
|
||
background="linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 146, 60, 0.1))",
|
||
border="3px solid rgba(245, 158, 11, 0.3)",
|
||
border_radius="32px",
|
||
box_shadow="0 25px 80px rgba(245, 158, 11, 0.4)",
|
||
_hover={"transform": "scale(1.05) rotate(2deg)", "box_shadow": "0 30px 100px rgba(245, 158, 11, 0.6)"},
|
||
transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
|
||
),
|
||
rx.hstack(
|
||
rx.vstack(
|
||
rx.text("99.9%", font_size="36px", font_weight="900", color="#F59E0B", 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(245, 158, 11, 0.3)",
|
||
border_radius="20px",
|
||
spacing="2",
|
||
),
|
||
rx.vstack(
|
||
rx.text("24/7", font_size="36px", font_weight="900", color="#10B981", 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(16, 185, 129, 0.3)",
|
||
border_radius="20px",
|
||
spacing="2",
|
||
),
|
||
rx.vstack(
|
||
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(77, 184, 196, 0.3)",
|
||
border_radius="20px",
|
||
spacing="2",
|
||
),
|
||
spacing="5",
|
||
margin_top="32px",
|
||
),
|
||
spacing="6",
|
||
),
|
||
display=["none", "none", "none", "block"],
|
||
),
|
||
spacing="9",
|
||
align="center",
|
||
width="100%",
|
||
),
|
||
max_width="1500px",
|
||
margin="0 auto",
|
||
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)",
|
||
position="relative",
|
||
)
|
||
|
||
def about_card(icon: str, title: str, desc: str, gradient: str, glow_color: str) -> rx.Component:
|
||
return rx.vstack(
|
||
rx.box(
|
||
rx.icon(icon, size=80, color="white"),
|
||
width="120px",
|
||
height="120px",
|
||
background=gradient,
|
||
border_radius="28px",
|
||
display="flex",
|
||
align_items="center",
|
||
justify_content="center",
|
||
margin_bottom="32px",
|
||
box_shadow=f"0 20px 60px {glow_color}",
|
||
_hover={"transform": "scale(1.1) rotate(3deg)", "box_shadow": f"0 25px 80px {glow_color}"},
|
||
transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
|
||
),
|
||
rx.heading(title, size="7", color="white", font_weight="800", margin_bottom="16px"),
|
||
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(27, 75, 127, 0.3)",
|
||
border_radius="32px",
|
||
align="center",
|
||
min_height="420px",
|
||
box_shadow="0 10px 40px rgba(0, 0, 0, 0.4)",
|
||
_hover={"transform": "translateY(-16px) scale(1.05)", "border": f"2px solid {glow_color.split('(')[1].split(',')[0]})", "box_shadow": f"0 30px 80px {glow_color}"},
|
||
transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
|
||
)
|
||
|
||
def about_section() -> rx.Component:
|
||
return rx.box(
|
||
rx.vstack(
|
||
rx.badge(
|
||
"✨ چرا ما؟",
|
||
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",
|
||
border_radius="full",
|
||
),
|
||
rx.heading("مزایای انتخاب پیکربند", size="9", color="white", font_weight="900", letter_spacing="-0.03em", margin_top="16px"),
|
||
rx.text(
|
||
"ارائهدهنده معتبر خدمات هاستینگ و زیرساخت ابری در ایران",
|
||
color="#94A3B8",
|
||
font_size="21px",
|
||
margin_bottom="80px",
|
||
font_weight="500",
|
||
),
|
||
rx.hstack(
|
||
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%",
|
||
),
|
||
max_width="1500px",
|
||
margin="0 auto",
|
||
padding="140px 8%",
|
||
),
|
||
background="linear-gradient(180deg, rgba(15, 15, 35, 0.95) 0%, rgba(5, 5, 16, 1) 100%)",
|
||
width="100%",
|
||
)
|
||
|
||
def service_card(title: str, desc: str, icon: str, features: list, color: str) -> rx.Component:
|
||
return rx.vstack(
|
||
rx.box(
|
||
rx.icon(icon, size=64, color="white"),
|
||
padding="28px",
|
||
background=f"linear-gradient(135deg, {color}, {color}dd)",
|
||
border_radius="24px",
|
||
margin_bottom="32px",
|
||
box_shadow=f"0 15px 50px {color}80",
|
||
_hover={"transform": "rotateY(10deg)", "box_shadow": f"0 20px 70px {color}a0"},
|
||
transition="all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
|
||
),
|
||
rx.heading(title, size="7", color="white", font_weight="800", margin_bottom="20px"),
|
||
rx.text(desc, color="#94A3B8", text_align="center", font_size="17px", line_height="1.7", margin_bottom="28px", font_weight="500"),
|
||
rx.vstack(
|
||
*[rx.hstack(
|
||
rx.icon("check", size=20, color="#10B981"),
|
||
rx.text(feature, color="#CBD5E1", font_size="16px", font_weight="600"),
|
||
spacing="3",
|
||
align="center",
|
||
) for feature in features],
|
||
spacing="4",
|
||
align="start",
|
||
width="100%",
|
||
),
|
||
padding="48px 40px",
|
||
background="linear-gradient(135deg, rgba(30, 30, 50, 0.95), rgba(20, 20, 40, 0.8))",
|
||
border="2px solid rgba(27, 75, 127, 0.25)",
|
||
border_radius="32px",
|
||
align="center",
|
||
min_height="520px",
|
||
box_shadow="0 15px 50px rgba(0, 0, 0, 0.5)",
|
||
_hover={
|
||
"transform": "translateY(-12px) scale(1.03)",
|
||
"border": f"2px solid {color}",
|
||
"box_shadow": f"0 35px 90px {color}70"
|
||
},
|
||
transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
|
||
)
|
||
|
||
def services_section() -> rx.Component:
|
||
return rx.box(
|
||
rx.vstack(
|
||
rx.badge(
|
||
"🚀 خدمات ما",
|
||
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",
|
||
border_radius="full",
|
||
),
|
||
rx.heading("همه چیز برای کسبوکار آنلاین شما", size="9", color="white", font_weight="900", letter_spacing="-0.03em", margin_top="16px"),
|
||
rx.text(
|
||
"از استارتاپ تا شرکتهای بزرگ، راهکار مناسب برای هر کسبوکاری",
|
||
color="#94A3B8",
|
||
font_size="21px",
|
||
margin_bottom="80px",
|
||
font_weight="500",
|
||
),
|
||
rx.grid(
|
||
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%",
|
||
),
|
||
max_width="1500px",
|
||
margin="0 auto",
|
||
padding="160px 8%",
|
||
),
|
||
width="100%",
|
||
id="services",
|
||
)
|
||
|
||
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, #1B4B7F, #4DB8C4)",
|
||
color="white",
|
||
padding="10px 24px",
|
||
border_radius="full",
|
||
font_weight="800",
|
||
font_size="15px",
|
||
position="absolute",
|
||
top="-18px",
|
||
box_shadow="0 8px 30px rgba(27, 75, 127, 0.7)",
|
||
),
|
||
rx.box(),
|
||
),
|
||
rx.heading(name, size="8", color="white", font_weight="900", margin_bottom="20px"),
|
||
rx.hstack(
|
||
rx.heading(price, size="9", color="white", font_weight="900", letter_spacing="-0.04em"),
|
||
rx.text("تومان/ماه", color="#94A3B8", font_size="17px", font_weight="600", margin_top="16px"),
|
||
align="baseline",
|
||
spacing="3",
|
||
),
|
||
rx.divider(background="rgba(27, 75, 127, 0.3)", margin_y="32px"),
|
||
rx.vstack(
|
||
*[rx.hstack(
|
||
rx.icon("check", size=24, color="#10B981"),
|
||
rx.text(feature, color="#CBD5E1", font_size="17px", font_weight="600"),
|
||
spacing="4",
|
||
align="center",
|
||
) for feature in features],
|
||
spacing="5",
|
||
align="start",
|
||
width="100%",
|
||
margin_bottom="48px",
|
||
),
|
||
rx.button(
|
||
"انتخاب پلن",
|
||
width="100%",
|
||
padding="20px",
|
||
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(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(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(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",
|
||
)
|
||
|
||
def pricing_section() -> rx.Component:
|
||
return rx.box(
|
||
rx.vstack(
|
||
rx.badge(
|
||
"💎 پلنهای قیمتی",
|
||
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",
|
||
border_radius="full",
|
||
),
|
||
rx.heading("پکیج مناسب خود را انتخاب کنید", size="9", color="white", font_weight="900", letter_spacing="-0.03em", margin_top="16px"),
|
||
rx.text("شفاف، منصفانه و بدون هزینه پنهان", color="#94A3B8", font_size="21px", margin_bottom="80px", font_weight="500"),
|
||
rx.hstack(
|
||
pricing_card("استارتر", "۱۵۰,۰۰۰", ["دامین رایگان", "۵ گیگ فضا", "ترافیک نامحدود", "SSL رایگان", "پشتیبانی ایمیل"]),
|
||
pricing_card("حرفهای", "۳۵۰,۰۰۰", ["VPS 2 Core", "۴ گیگ RAM", "۵۰ گیگ SSD", "بکاپ هفتگی", "پشتیبانی 24/7"], True),
|
||
pricing_card("کسبوکار", "۷۵۰,۰۰۰", ["سرور اختصاصی", "۸ گیگ RAM", "۱۶۰ گیگ SSD", "راهاندازی DevOps", "مدیریت کامل"]),
|
||
pricing_card("سفارشی", "تماس", ["منابع دلخواه", "معماری سفارشی", "مشاوره تخصصی", "SLA اختصاصی", "پشتیبانی اختصاصی"]),
|
||
spacing="8",
|
||
width="100%",
|
||
),
|
||
max_width="1500px",
|
||
margin="0 auto",
|
||
padding="160px 8%",
|
||
),
|
||
background="linear-gradient(180deg, rgba(15, 15, 35, 0.95) 0%, rgba(5, 5, 16, 1) 100%)",
|
||
width="100%",
|
||
id="pricing",
|
||
)
|
||
|
||
def server_table_row(provider: str, price: str, cpu: str, ram: str, location: str, logo_color: str) -> rx.Component:
|
||
return rx.table.row(
|
||
rx.table.cell(
|
||
rx.hstack(
|
||
rx.box(width="4px", height="40px", background=logo_color, border_radius="4px"),
|
||
rx.text(provider, font_weight="800", font_size="18px"),
|
||
spacing="3",
|
||
align="center",
|
||
)
|
||
),
|
||
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")),
|
||
rx.table.cell(
|
||
rx.button(
|
||
"سفارش",
|
||
size="3",
|
||
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(27, 75, 127, 0.6)"},
|
||
transition="all 0.3s",
|
||
)
|
||
),
|
||
)
|
||
|
||
def server_comparison() -> rx.Component:
|
||
return rx.box(
|
||
rx.vstack(
|
||
rx.badge(
|
||
"🌐 ارائهدهندگان",
|
||
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",
|
||
border_radius="full",
|
||
),
|
||
rx.heading("مقایسه بهترین سرورهای دنیا", size="9", color="white", font_weight="900", letter_spacing="-0.03em", margin_top="16px"),
|
||
rx.text("دسترسی به معتبرترین دیتاسنترهای جهان", color="#94A3B8", font_size="21px", margin_bottom="80px", font_weight="500"),
|
||
rx.box(
|
||
rx.table.root(
|
||
rx.table.header(
|
||
rx.table.row(
|
||
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(
|
||
server_table_row("DigitalOcean", "$4/mo", "1 Core", "512MB", "USA, EU, Asia", "#0080FF"),
|
||
server_table_row("Hetzner", "€3.79/mo", "2 Cores", "2GB", "Germany, Finland", "#D50C2D"),
|
||
server_table_row("OVH", "€3.50/mo", "1 Core", "2GB", "France, Canada", "#123F6D"),
|
||
server_table_row("Hostinger", "$3.99/mo", "1 Core", "1GB", "Global", "#673DE6"),
|
||
),
|
||
variant="surface",
|
||
size="3",
|
||
width="100%",
|
||
),
|
||
background="linear-gradient(135deg, rgba(30, 30, 50, 0.9), rgba(20, 20, 40, 0.7))",
|
||
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(27, 75, 127, 0.3)"},
|
||
transition="all 0.4s",
|
||
),
|
||
max_width="1500px",
|
||
margin="0 auto",
|
||
padding="140px 8%",
|
||
),
|
||
width="100%",
|
||
id="servers",
|
||
)
|
||
|
||
def testimonial_card(name: str, role: str, text: str, initial: str, gradient: str) -> rx.Component:
|
||
return rx.vstack(
|
||
rx.hstack(
|
||
rx.box(
|
||
rx.text(initial, font_size="32px", font_weight="900", color="white"),
|
||
width="72px",
|
||
height="72px",
|
||
background=gradient,
|
||
border_radius="full",
|
||
display="flex",
|
||
align_items="center",
|
||
justify_content="center",
|
||
box_shadow="0 12px 40px rgba(27, 75, 127, 0.6)",
|
||
),
|
||
rx.vstack(
|
||
rx.text(name, font_weight="800", color="white", font_size="20px"),
|
||
rx.text(role, font_size="16px", color="#94A3B8", font_weight="600"),
|
||
spacing="1",
|
||
align="start",
|
||
),
|
||
spacing="5",
|
||
align="center",
|
||
width="100%",
|
||
),
|
||
rx.hstack(
|
||
*[rx.icon("star", size=22, fill="#FBBF24", color="#FBBF24") for _ in range(5)],
|
||
spacing="1",
|
||
margin_y="24px",
|
||
),
|
||
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(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 #1B4B7F", "box_shadow": "0 25px 70px rgba(27, 75, 127, 0.5)"},
|
||
transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
|
||
)
|
||
|
||
def testimonials_section() -> rx.Component:
|
||
return rx.box(
|
||
rx.vstack(
|
||
rx.badge(
|
||
"💬 نظرات مشتریان",
|
||
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",
|
||
border_radius="full",
|
||
),
|
||
rx.heading("تجربه مشتریان راضی ما", size="9", color="white", font_weight="900", letter_spacing="-0.03em", margin_top="16px"),
|
||
rx.text("اعتماد هزاران کسبوکار به پیکربند", color="#94A3B8", font_size="21px", margin_bottom="80px", font_weight="500"),
|
||
rx.hstack(
|
||
testimonial_card(
|
||
"احمد محمدی",
|
||
"مدیر فنی شرکت آریا",
|
||
"سرویس عالی با پشتیبانی فوقالعاده. مهاجرت سایتمان به VPS خیلی روان انجام شد. کاملا راضی هستیم.",
|
||
"A",
|
||
"linear-gradient(135deg, #1B4B7F, #4F46E5)"
|
||
),
|
||
testimonial_card(
|
||
"مریم حسینی",
|
||
"مدیر محصول فروشگاه آنلاین",
|
||
"هاست وردپرسمون خیلی سریع شد. تیم پشتیبانی هم خیلی دلسوز و حرفهای هستند. پیشنهاد میکنم.",
|
||
"M",
|
||
"linear-gradient(135deg, #4DB8C4, #7C3AED)"
|
||
),
|
||
testimonial_card(
|
||
"رضا کریمی",
|
||
"توسعهدهنده نرمافزار",
|
||
"خدمات DevOps و راهاندازی CI/CD عالی بود. تیم خیلی با تجربه و کارشناس هستند. ممنونم.",
|
||
"R",
|
||
"linear-gradient(135deg, #6DD7E5, #9333EA)"
|
||
),
|
||
spacing="9",
|
||
width="100%",
|
||
),
|
||
max_width="1500px",
|
||
margin="0 auto",
|
||
padding="160px 8%",
|
||
),
|
||
background="linear-gradient(180deg, rgba(15, 15, 35, 0.95) 0%, rgba(5, 5, 16, 1) 100%)",
|
||
width="100%",
|
||
id="testimonials",
|
||
)
|
||
|
||
def contact_section() -> rx.Component:
|
||
return rx.box(
|
||
rx.vstack(
|
||
rx.badge(
|
||
"📞 تماس با ما",
|
||
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",
|
||
border_radius="full",
|
||
),
|
||
rx.heading("آماده پاسخگویی به شما هستیم", size="9", color="white", font_weight="900", letter_spacing="-0.03em", margin_top="16px"),
|
||
rx.text("همین الان با ما در تماس باشید", color="#94A3B8", font_size="21px", margin_bottom="80px", font_weight="500"),
|
||
rx.hstack(
|
||
rx.vstack(
|
||
rx.form(
|
||
rx.vstack(
|
||
rx.input(
|
||
placeholder="نام و نام خانوادگی",
|
||
name="name",
|
||
required=True,
|
||
width="100%",
|
||
padding="18px",
|
||
background="rgba(30, 30, 50, 0.8)",
|
||
border="2px solid rgba(27, 75, 127, 0.3)",
|
||
border_radius="14px",
|
||
color="white",
|
||
font_size="17px",
|
||
font_weight="600",
|
||
_focus={"border": "2px solid #1B4B7F", "box_shadow": "0 0 0 3px rgba(27, 75, 127, 0.2)"},
|
||
),
|
||
rx.input(
|
||
placeholder="ایمیل",
|
||
type="email",
|
||
name="email",
|
||
required=True,
|
||
width="100%",
|
||
padding="18px",
|
||
background="rgba(30, 30, 50, 0.8)",
|
||
border="2px solid rgba(27, 75, 127, 0.3)",
|
||
border_radius="14px",
|
||
color="white",
|
||
font_size="17px",
|
||
font_weight="600",
|
||
_focus={"border": "2px solid #1B4B7F", "box_shadow": "0 0 0 3px rgba(27, 75, 127, 0.2)"},
|
||
),
|
||
rx.select(
|
||
["هاست وردپرس", "دامین", "سرور اختصاصی", "DevOps", "مشاوره", "سایر"],
|
||
placeholder="نوع سرویس را انتخاب کنید",
|
||
name="service",
|
||
width="100%",
|
||
size="3",
|
||
),
|
||
rx.text_area(
|
||
placeholder="توضیحات خود را بنویسید...",
|
||
name="message",
|
||
required=True,
|
||
width="100%",
|
||
min_height="160px",
|
||
padding="18px",
|
||
background="rgba(30, 30, 50, 0.8)",
|
||
border="2px solid rgba(27, 75, 127, 0.3)",
|
||
border_radius="14px",
|
||
color="white",
|
||
font_size="17px",
|
||
font_weight="600",
|
||
_focus={"border": "2px solid #1B4B7F", "box_shadow": "0 0 0 3px rgba(27, 75, 127, 0.2)"},
|
||
),
|
||
rx.button(
|
||
rx.hstack(
|
||
rx.icon("send", size=20),
|
||
rx.text("ارسال پیام", font_weight="800", font_size="18px"),
|
||
spacing="2",
|
||
align="center",
|
||
),
|
||
type="submit",
|
||
width="100%",
|
||
padding="22px",
|
||
background="linear-gradient(135deg, #1B4B7F, #4DB8C4)",
|
||
color="white",
|
||
border_radius="16px",
|
||
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",
|
||
width="100%",
|
||
),
|
||
on_submit=State.handle_submit,
|
||
width="100%",
|
||
),
|
||
width="100%",
|
||
),
|
||
rx.vstack(
|
||
rx.vstack(
|
||
rx.box(
|
||
rx.icon("mail", size=44, color="white"),
|
||
width="80px",
|
||
height="80px",
|
||
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(27, 75, 127, 0.6)",
|
||
),
|
||
rx.heading("ایمیل", size="6", font_weight="800"),
|
||
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(27, 75, 127, 0.3)",
|
||
border_radius="24px",
|
||
align="center",
|
||
width="100%",
|
||
_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(
|
||
rx.box(
|
||
rx.icon("message-circle", size=44, color="white"),
|
||
width="80px",
|
||
height="80px",
|
||
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(77, 184, 196, 0.6)",
|
||
),
|
||
rx.heading("تلگرام", size="6", font_weight="800"),
|
||
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(77, 184, 196, 0.3)",
|
||
border_radius="24px",
|
||
align="center",
|
||
width="100%",
|
||
_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(
|
||
rx.box(
|
||
rx.icon("phone", size=44, color="white"),
|
||
width="80px",
|
||
height="80px",
|
||
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(109, 215, 229, 0.6)",
|
||
),
|
||
rx.heading("تلفن", size="6", font_weight="800"),
|
||
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(109, 215, 229, 0.3)",
|
||
border_radius="24px",
|
||
align="center",
|
||
width="100%",
|
||
_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",
|
||
width="100%",
|
||
),
|
||
spacing="9",
|
||
width="100%",
|
||
),
|
||
max_width="1400px",
|
||
margin="0 auto",
|
||
padding="140px 8%",
|
||
),
|
||
width="100%",
|
||
id="contact",
|
||
)
|
||
|
||
def footer() -> rx.Component:
|
||
return rx.box(
|
||
rx.vstack(
|
||
rx.divider(background="rgba(27, 75, 127, 0.4)", margin_y="10"),
|
||
rx.hstack(
|
||
rx.vstack(
|
||
rx.hstack(
|
||
rx.icon("cloud", size=32, color="#4DB8C4"),
|
||
rx.heading("پیکربند", size="7", color="#4DB8C4", font_weight="900"),
|
||
spacing="3",
|
||
),
|
||
rx.text(
|
||
"ارائهدهنده خدمات هاستینگ، دامین و زیرساخت ابری با کیفیت بالا و پشتیبانی 24/7",
|
||
color="#94A3B8",
|
||
font_size="17px",
|
||
line_height="1.7",
|
||
max_width="450px",
|
||
font_weight="500",
|
||
),
|
||
spacing="5",
|
||
align="start",
|
||
),
|
||
rx.spacer(),
|
||
rx.hstack(
|
||
rx.link(
|
||
rx.box(
|
||
rx.icon("facebook", size=24),
|
||
width="52px",
|
||
height="52px",
|
||
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": "#1B4B7F", "border": "2px solid #1B4B7F", "transform": "translateY(-5px) scale(1.1)"},
|
||
transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
||
),
|
||
href="#",
|
||
color="#94A3B8",
|
||
),
|
||
rx.link(
|
||
rx.box(
|
||
rx.icon("twitter", size=24),
|
||
width="52px",
|
||
height="52px",
|
||
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": "#4DB8C4", "border": "2px solid #4DB8C4", "transform": "translateY(-5px) scale(1.1)"},
|
||
transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
||
),
|
||
href="#",
|
||
color="#94A3B8",
|
||
),
|
||
rx.link(
|
||
rx.box(
|
||
rx.icon("message-circle", size=24),
|
||
width="52px",
|
||
height="52px",
|
||
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": "#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",
|
||
color="#94A3B8",
|
||
),
|
||
spacing="6",
|
||
),
|
||
width="100%",
|
||
align="center",
|
||
padding_y="40px",
|
||
),
|
||
rx.divider(background="rgba(27, 75, 127, 0.3)", margin_y="8"),
|
||
rx.text(
|
||
"© ۱۴۰۳ پیکربند. تمامی حقوق محفوظ است.",
|
||
color="#64748B",
|
||
font_size="16px",
|
||
font_weight="600",
|
||
padding_bottom="10",
|
||
),
|
||
max_width="1500px",
|
||
margin="0 auto",
|
||
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)",
|
||
)
|
||
|
||
def floating_chat() -> rx.Component:
|
||
return rx.link(
|
||
rx.box(
|
||
rx.icon("message-circle", size=40, color="white"),
|
||
width="76px",
|
||
height="76px",
|
||
background="linear-gradient(135deg, #1B4B7F, #4DB8C4)",
|
||
border_radius="full",
|
||
display="flex",
|
||
align_items="center",
|
||
justify_content="center",
|
||
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",
|
||
position="fixed",
|
||
bottom="32px",
|
||
left="32px",
|
||
z_index="1000",
|
||
)
|
||
|
||
def index() -> rx.Component:
|
||
return rx.box(
|
||
navbar(),
|
||
hero(),
|
||
wordpress_cloud_highlight(),
|
||
about_section(),
|
||
services_section(),
|
||
# pricing_section(),
|
||
# server_comparison(),
|
||
# testimonials_section(),
|
||
# contact_section(),
|
||
footer(),
|
||
# floating_chat(),
|
||
background="linear-gradient(180deg, #050510 0%, #0a0a1a 30%, #0f0f23 60%, #050510 100%)",
|
||
min_height="100vh",
|
||
width="100%",
|
||
direction="rtl",
|
||
)
|
||
|
||
app = rx.App(
|
||
stylesheets=[
|
||
"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap",
|
||
"https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css",
|
||
"/custom.css",
|
||
],
|
||
style={
|
||
"font_family": "'Vazirmatn', 'Inter', sans-serif",
|
||
},
|
||
)
|
||
app.add_page(
|
||
index,
|
||
title="پیکربند | خدمات هاستینگ، دامین و DevOps حرفهای",
|
||
description="ارائه خدمات هاستینگ وردپرس، فروش دامین، سرور اختصاصی و خدمات DevOps حرفهای. پشتیبانی 24/7، قیمتهای رقابتی و کیفیت بالا.",
|
||
)
|