feat: Redesign both hero sections with BluisHost-inspired floating elements
Hero 1 (Main): - Added 5 floating tech icons (server, database, cloud, shield, lightning) - BluisHost-style layered composition with central person illustration - Staggered animations with unique timing for each element - Blue brand color scheme maintained Hero 2 (WordPress Cloud): - Redesigned with central WordPress/code icon as focal point - Added 6 floating WordPress ecosystem icons (shield, cloud, zap, package, database, settings) - Repositioned 3 stats cards (99.9%, 10x, 24/7) around edges - Orange/gold theme for clear visual distinction - More organic layout matching Hero 1 style Animations: - Added new CSS keyframes: floatComplex, rotateSubtle, scaleBreath, floatDiagonal, bobFloat - Each element has unique animation timing and duration - GPU-accelerated CSS animations for smooth performance Both sections now have distinct visual identities while maintaining consistent floating element design language
This commit is contained in:
Ehsan.Asadi
@@ -79,3 +79,56 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes floatComplex {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translateY(0px) translateX(0px) rotate(0deg);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateY(-20px) translateX(15px) rotate(5deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-35px) translateX(5px) rotate(-3deg);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translateY(-18px) translateX(-12px) rotate(4deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotateSubtle {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scaleBreath {
|
||||||
|
0%, 100% {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.1);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes floatDiagonal {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translate(-25px, -25px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bobFloat {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translateY(0px) scale(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-25px) scale(1.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -79,3 +79,56 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes floatComplex {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translateY(0px) translateX(0px) rotate(0deg);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateY(-20px) translateX(15px) rotate(5deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-35px) translateX(5px) rotate(-3deg);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translateY(-18px) translateX(-12px) rotate(4deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotateSubtle {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scaleBreath {
|
||||||
|
0%, 100% {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.1);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes floatDiagonal {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translate(-25px, -25px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bobFloat {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translateY(0px) scale(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-25px) scale(1.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -239,78 +239,116 @@ def hero() -> rx.Component:
|
|||||||
rx.box(
|
rx.box(
|
||||||
# Background glow
|
# Background glow
|
||||||
rx.box(
|
rx.box(
|
||||||
width="500px",
|
width="600px",
|
||||||
height="500px",
|
height="600px",
|
||||||
background="radial-gradient(circle, rgba(77, 184, 196, 0.12) 0%, transparent 70%)",
|
background="radial-gradient(circle, rgba(77, 184, 196, 0.15) 0%, transparent 70%)",
|
||||||
position="absolute",
|
position="absolute",
|
||||||
top="50%",
|
top="50%",
|
||||||
left="50%",
|
left="50%",
|
||||||
transform="translate(-50%, -50%)",
|
transform="translate(-50%, -50%)",
|
||||||
border_radius="50%",
|
border_radius="50%",
|
||||||
filter="blur(50px)",
|
filter="blur(60px)",
|
||||||
style={"animation": "pulse 4s ease-in-out infinite"},
|
style={"animation": "pulse 5s ease-in-out infinite"},
|
||||||
|
z_index="0",
|
||||||
),
|
),
|
||||||
# Floating security badge
|
# Main illustration - centered
|
||||||
rx.box(
|
rx.box(
|
||||||
rx.vstack(
|
|
||||||
rx.icon("shield-check", size=24, color="#10B981"),
|
|
||||||
rx.text("امن", font_size="14px", font_weight="800", color="white"),
|
|
||||||
spacing="1",
|
|
||||||
align="center",
|
|
||||||
),
|
|
||||||
position="absolute",
|
|
||||||
top="10%",
|
|
||||||
right="-20px",
|
|
||||||
padding="16px 20px",
|
|
||||||
background="linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.15))",
|
|
||||||
border="2px solid rgba(16, 185, 129, 0.5)",
|
|
||||||
border_radius="16px",
|
|
||||||
backdrop_filter="blur(12px)",
|
|
||||||
box_shadow="0 8px 32px rgba(16, 185, 129, 0.3)",
|
|
||||||
style={"animation": "fadeInScale 0.6s ease-out 0.9s backwards, float 6s ease-in-out 1.5s infinite"},
|
|
||||||
),
|
|
||||||
# Floating speed badge
|
|
||||||
rx.box(
|
|
||||||
rx.vstack(
|
|
||||||
rx.icon("zap", size=24, color="#F59E0B"),
|
|
||||||
rx.text("سریع", font_size="14px", font_weight="800", color="white"),
|
|
||||||
spacing="1",
|
|
||||||
align="center",
|
|
||||||
),
|
|
||||||
position="absolute",
|
|
||||||
bottom="15%",
|
|
||||||
left="-25px",
|
|
||||||
padding="16px 20px",
|
|
||||||
background="linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 146, 60, 0.15))",
|
|
||||||
border="2px solid rgba(245, 158, 11, 0.5)",
|
|
||||||
border_radius="16px",
|
|
||||||
backdrop_filter="blur(12px)",
|
|
||||||
box_shadow="0 8px 32px rgba(245, 158, 11, 0.3)",
|
|
||||||
style={"animation": "fadeInScale 0.6s ease-out 1.1s backwards, float 7s ease-in-out 2s infinite reverse"},
|
|
||||||
),
|
|
||||||
# Main illustration
|
|
||||||
rx.box(
|
|
||||||
rx.image(
|
|
||||||
src="/hero-shield.svg",
|
|
||||||
width="200px",
|
|
||||||
height="auto",
|
|
||||||
position="absolute",
|
|
||||||
top="-40px",
|
|
||||||
right="100px",
|
|
||||||
opacity="0.15",
|
|
||||||
filter="blur(1px)",
|
|
||||||
style={"animation": "rotate 50s linear infinite"},
|
|
||||||
),
|
|
||||||
rx.image(
|
rx.image(
|
||||||
src="/hero-person.svg",
|
src="/hero-person.svg",
|
||||||
width="520px",
|
width="500px",
|
||||||
height="auto",
|
height="auto",
|
||||||
filter="drop-shadow(0 20px 60px rgba(27, 75, 127, 0.4))",
|
filter="drop-shadow(0 25px 70px rgba(27, 75, 127, 0.5))",
|
||||||
style={"animation": "fadeInScale 1s ease-out 0.3s backwards, scaleFloat 6s ease-in-out 1.5s infinite"},
|
style={"animation": "fadeInScale 1s ease-out 0.3s backwards, scaleFloat 7s ease-in-out 1.5s infinite"},
|
||||||
),
|
),
|
||||||
position="relative",
|
position="relative",
|
||||||
|
z_index="2",
|
||||||
|
),
|
||||||
|
# Floating element 1: Server (top-left)
|
||||||
|
rx.box(
|
||||||
|
rx.icon("server", size=70, color="#4DB8C4"),
|
||||||
|
position="absolute",
|
||||||
|
top="5%",
|
||||||
|
left="5%",
|
||||||
|
padding="24px",
|
||||||
|
background="linear-gradient(135deg, rgba(27, 75, 127, 0.25), rgba(77, 184, 196, 0.2))",
|
||||||
|
border="2px solid rgba(77, 184, 196, 0.4)",
|
||||||
|
border_radius="24px",
|
||||||
|
backdrop_filter="blur(12px)",
|
||||||
|
box_shadow="0 12px 40px rgba(27, 75, 127, 0.4)",
|
||||||
|
opacity="0.8",
|
||||||
|
z_index="1",
|
||||||
|
style={"animation": "fadeInScale 0.8s ease-out 0.5s backwards, floatComplex 8s ease-in-out 1.5s infinite"},
|
||||||
|
),
|
||||||
|
# Floating element 2: Database (top-right)
|
||||||
|
rx.box(
|
||||||
|
rx.icon("database", size=65, color="#6DD7E5"),
|
||||||
|
position="absolute",
|
||||||
|
top="8%",
|
||||||
|
right="8%",
|
||||||
|
padding="22px",
|
||||||
|
background="linear-gradient(135deg, rgba(109, 215, 229, 0.25), rgba(77, 184, 196, 0.2))",
|
||||||
|
border="2px solid rgba(109, 215, 229, 0.4)",
|
||||||
|
border_radius="20px",
|
||||||
|
backdrop_filter="blur(12px)",
|
||||||
|
box_shadow="0 10px 35px rgba(109, 215, 229, 0.4)",
|
||||||
|
opacity="0.75",
|
||||||
|
z_index="3",
|
||||||
|
style={"animation": "fadeInScale 0.8s ease-out 0.7s backwards, bobFloat 7s ease-in-out 2s infinite"},
|
||||||
|
),
|
||||||
|
# Floating element 3: Cloud (bottom-left)
|
||||||
|
rx.box(
|
||||||
|
rx.icon("cloud", size=75, color="#7CE3F2"),
|
||||||
|
position="absolute",
|
||||||
|
bottom="12%",
|
||||||
|
left="2%",
|
||||||
|
padding="26px",
|
||||||
|
background="linear-gradient(135deg, rgba(124, 227, 242, 0.25), rgba(109, 215, 229, 0.2))",
|
||||||
|
border="2px solid rgba(124, 227, 242, 0.4)",
|
||||||
|
border_radius="26px",
|
||||||
|
backdrop_filter="blur(12px)",
|
||||||
|
box_shadow="0 14px 45px rgba(124, 227, 242, 0.4)",
|
||||||
|
opacity="0.8",
|
||||||
|
z_index="1",
|
||||||
|
style={"animation": "fadeInScale 0.8s ease-out 0.9s backwards, floatDiagonal 9s ease-in-out 1.8s infinite"},
|
||||||
|
),
|
||||||
|
# Floating element 4: Shield (middle-right)
|
||||||
|
rx.box(
|
||||||
|
rx.icon("shield", size=60, color="#10B981"),
|
||||||
|
position="absolute",
|
||||||
|
top="45%",
|
||||||
|
right="2%",
|
||||||
|
padding="20px",
|
||||||
|
background="linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.2))",
|
||||||
|
border="2px solid rgba(16, 185, 129, 0.4)",
|
||||||
|
border_radius="18px",
|
||||||
|
backdrop_filter="blur(12px)",
|
||||||
|
box_shadow="0 10px 35px rgba(16, 185, 129, 0.4)",
|
||||||
|
opacity="0.75",
|
||||||
|
z_index="3",
|
||||||
|
style={"animation": "fadeInScale 0.8s ease-out 1.1s backwards, scaleBreath 6s ease-in-out 2.2s infinite"},
|
||||||
|
),
|
||||||
|
# Floating element 5: Lightning/Speed (bottom-right)
|
||||||
|
rx.box(
|
||||||
|
rx.icon("zap", size=55, color="#F59E0B"),
|
||||||
|
position="absolute",
|
||||||
|
bottom="10%",
|
||||||
|
right="10%",
|
||||||
|
padding="18px",
|
||||||
|
background="linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(251, 146, 60, 0.2))",
|
||||||
|
border="2px solid rgba(245, 158, 11, 0.4)",
|
||||||
|
border_radius="16px",
|
||||||
|
backdrop_filter="blur(12px)",
|
||||||
|
box_shadow="0 10px 35px rgba(245, 158, 11, 0.4)",
|
||||||
|
opacity="0.7",
|
||||||
|
z_index="1",
|
||||||
|
style={"animation": "fadeInScale 0.8s ease-out 1.3s backwards, float 8s ease-in-out 2.5s infinite reverse"},
|
||||||
),
|
),
|
||||||
position="relative",
|
position="relative",
|
||||||
|
width="600px",
|
||||||
|
height="600px",
|
||||||
|
display="flex",
|
||||||
|
align_items="center",
|
||||||
|
justify_content="center",
|
||||||
),
|
),
|
||||||
display=["none", "none", "none", "block"],
|
display=["none", "none", "none", "block"],
|
||||||
position="relative",
|
position="relative",
|
||||||
@@ -463,90 +501,189 @@ def wordpress_cloud_highlight() -> rx.Component:
|
|||||||
rx.box(
|
rx.box(
|
||||||
# Background glow
|
# Background glow
|
||||||
rx.box(
|
rx.box(
|
||||||
width="450px",
|
width="550px",
|
||||||
height="450px",
|
height="550px",
|
||||||
background="radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 70%)",
|
background="radial-gradient(circle, rgba(245, 158, 11, 0.18) 0%, transparent 70%)",
|
||||||
position="absolute",
|
position="absolute",
|
||||||
top="50%",
|
top="50%",
|
||||||
left="50%",
|
left="50%",
|
||||||
transform="translate(-50%, -50%)",
|
transform="translate(-50%, -50%)",
|
||||||
border_radius="50%",
|
border_radius="50%",
|
||||||
filter="blur(50px)",
|
filter="blur(60px)",
|
||||||
style={"animation": "pulse 5s ease-in-out infinite"},
|
style={"animation": "pulse 6s ease-in-out infinite"},
|
||||||
|
z_index="0",
|
||||||
),
|
),
|
||||||
# Floating stats - Uptime
|
# Central WordPress icon/logo - using code icon as WordPress placeholder
|
||||||
rx.box(
|
rx.box(
|
||||||
rx.vstack(
|
rx.icon("code", size=140, color="#F59E0B"),
|
||||||
rx.text("99.9%", font_size="28px", font_weight="900", color="#F59E0B", line_height="1"),
|
position="relative",
|
||||||
rx.text("آپتایم", font_size="12px", color="#94A3B8", font_weight="700"),
|
padding="40px",
|
||||||
spacing="1",
|
background="linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 146, 60, 0.12))",
|
||||||
align="center",
|
border="3px solid rgba(245, 158, 11, 0.35)",
|
||||||
),
|
border_radius="32px",
|
||||||
|
box_shadow="0 20px 70px rgba(245, 158, 11, 0.5)",
|
||||||
|
z_index="2",
|
||||||
|
style={"animation": "scaleFloat 8s ease-in-out infinite"},
|
||||||
|
),
|
||||||
|
# Floating icon 1: Shield (security - top-left)
|
||||||
|
rx.box(
|
||||||
|
rx.icon("shield-check", size=65, color="#10B981"),
|
||||||
|
position="absolute",
|
||||||
|
top="8%",
|
||||||
|
left="8%",
|
||||||
|
padding="22px",
|
||||||
|
background="linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.2))",
|
||||||
|
border="2px solid rgba(16, 185, 129, 0.45)",
|
||||||
|
border_radius="20px",
|
||||||
|
backdrop_filter="blur(12px)",
|
||||||
|
box_shadow="0 12px 40px rgba(16, 185, 129, 0.4)",
|
||||||
|
opacity="0.85",
|
||||||
|
z_index="3",
|
||||||
|
style={"animation": "fadeInScale 0.8s ease-out 0.4s backwards, bobFloat 8s ease-in-out 1.5s infinite"},
|
||||||
|
),
|
||||||
|
# Floating icon 2: Cloud (cloud hosting - top-right)
|
||||||
|
rx.box(
|
||||||
|
rx.icon("cloud", size=70, color="#6DD7E5"),
|
||||||
position="absolute",
|
position="absolute",
|
||||||
top="5%",
|
top="5%",
|
||||||
left="-10px",
|
right="10%",
|
||||||
padding="18px 24px",
|
padding="24px",
|
||||||
background="rgba(20, 20, 35, 0.9)",
|
background="linear-gradient(135deg, rgba(109, 215, 229, 0.25), rgba(77, 184, 196, 0.2))",
|
||||||
border="2px solid rgba(245, 158, 11, 0.4)",
|
border="2px solid rgba(109, 215, 229, 0.45)",
|
||||||
|
border_radius="22px",
|
||||||
|
backdrop_filter="blur(12px)",
|
||||||
|
box_shadow="0 12px 40px rgba(109, 215, 229, 0.4)",
|
||||||
|
opacity="0.8",
|
||||||
|
z_index="1",
|
||||||
|
style={"animation": "fadeInScale 0.8s ease-out 0.6s backwards, floatDiagonal 9s ease-in-out 2s infinite"},
|
||||||
|
),
|
||||||
|
# Floating icon 3: Zap/Speed (middle-left)
|
||||||
|
rx.box(
|
||||||
|
rx.icon("zap", size=60, color="#FB923C"),
|
||||||
|
position="absolute",
|
||||||
|
top="42%",
|
||||||
|
left="2%",
|
||||||
|
padding="20px",
|
||||||
|
background="linear-gradient(135deg, rgba(251, 146, 60, 0.25), rgba(245, 158, 11, 0.2))",
|
||||||
|
border="2px solid rgba(251, 146, 60, 0.45)",
|
||||||
border_radius="18px",
|
border_radius="18px",
|
||||||
backdrop_filter="blur(12px)",
|
backdrop_filter="blur(12px)",
|
||||||
box_shadow="0 8px 32px rgba(245, 158, 11, 0.3)",
|
box_shadow="0 10px 35px rgba(251, 146, 60, 0.4)",
|
||||||
style={"animation": "float 7s ease-in-out infinite"},
|
opacity="0.85",
|
||||||
|
z_index="3",
|
||||||
|
style={"animation": "fadeInScale 0.8s ease-out 0.8s backwards, float 7s ease-in-out 2.3s infinite reverse"},
|
||||||
),
|
),
|
||||||
# Floating stats - Speed
|
# Floating icon 4: Package/Plugin (middle-right)
|
||||||
rx.box(
|
rx.box(
|
||||||
rx.vstack(
|
rx.icon("package", size=55, color="#A78BFA"),
|
||||||
rx.text("10x", font_size="26px", font_weight="900", color="#10B981", line_height="1"),
|
|
||||||
rx.text("سرعت", font_size="12px", color="#94A3B8", font_weight="700"),
|
|
||||||
spacing="1",
|
|
||||||
align="center",
|
|
||||||
),
|
|
||||||
position="absolute",
|
position="absolute",
|
||||||
top="45%",
|
top="38%",
|
||||||
right="-20px",
|
right="5%",
|
||||||
padding="16px 22px",
|
padding="18px",
|
||||||
background="rgba(20, 20, 35, 0.9)",
|
background="linear-gradient(135deg, rgba(167, 139, 250, 0.25), rgba(139, 92, 246, 0.2))",
|
||||||
border="2px solid rgba(16, 185, 129, 0.4)",
|
border="2px solid rgba(167, 139, 250, 0.45)",
|
||||||
border_radius="16px",
|
border_radius="16px",
|
||||||
backdrop_filter="blur(12px)",
|
backdrop_filter="blur(12px)",
|
||||||
box_shadow="0 8px 32px rgba(16, 185, 129, 0.3)",
|
box_shadow="0 10px 35px rgba(167, 139, 250, 0.4)",
|
||||||
style={"animation": "float 8s ease-in-out 1s infinite reverse"},
|
opacity="0.8",
|
||||||
|
z_index="1",
|
||||||
|
style={"animation": "fadeInScale 0.8s ease-out 1s backwards, scaleBreath 9s ease-in-out 2.5s infinite"},
|
||||||
),
|
),
|
||||||
# Floating stats - Support
|
# Floating icon 5: Database (bottom-left)
|
||||||
|
rx.box(
|
||||||
|
rx.icon("database", size=58, color="#4DB8C4"),
|
||||||
|
position="absolute",
|
||||||
|
bottom="12%",
|
||||||
|
left="12%",
|
||||||
|
padding="19px",
|
||||||
|
background="linear-gradient(135deg, rgba(77, 184, 196, 0.25), rgba(27, 75, 127, 0.2))",
|
||||||
|
border="2px solid rgba(77, 184, 196, 0.45)",
|
||||||
|
border_radius="17px",
|
||||||
|
backdrop_filter="blur(12px)",
|
||||||
|
box_shadow="0 10px 35px rgba(77, 184, 196, 0.4)",
|
||||||
|
opacity="0.85",
|
||||||
|
z_index="3",
|
||||||
|
style={"animation": "fadeInScale 0.8s ease-out 1.2s backwards, floatComplex 10s ease-in-out 2.8s infinite"},
|
||||||
|
),
|
||||||
|
# Floating icon 6: Settings/Gear (bottom-right)
|
||||||
|
rx.box(
|
||||||
|
rx.icon("settings", size=62, color="#F97316"),
|
||||||
|
position="absolute",
|
||||||
|
bottom="10%",
|
||||||
|
right="8%",
|
||||||
|
padding="21px",
|
||||||
|
background="linear-gradient(135deg, rgba(249, 115, 22, 0.25), rgba(245, 158, 11, 0.2))",
|
||||||
|
border="2px solid rgba(249, 115, 22, 0.45)",
|
||||||
|
border_radius="19px",
|
||||||
|
backdrop_filter="blur(12px)",
|
||||||
|
box_shadow="0 12px 40px rgba(249, 115, 22, 0.4)",
|
||||||
|
opacity="0.8",
|
||||||
|
z_index="1",
|
||||||
|
style={"animation": "fadeInScale 0.8s ease-out 1.4s backwards, rotateSubtle 40s linear infinite, bobFloat 8s ease-in-out 3s infinite"},
|
||||||
|
),
|
||||||
|
# Stats card 1: 99.9% Uptime (repositioned - outer left)
|
||||||
rx.box(
|
rx.box(
|
||||||
rx.vstack(
|
rx.vstack(
|
||||||
rx.text("24/7", font_size="24px", font_weight="900", color="#6DD7E5", line_height="1"),
|
rx.text("99.9%", font_size="26px", font_weight="900", color="#F59E0B", line_height="1"),
|
||||||
rx.text("پشتیبانی", font_size="11px", color="#94A3B8", font_weight="700"),
|
rx.text("آپتایم", font_size="11px", color="#94A3B8", font_weight="700"),
|
||||||
spacing="1",
|
spacing="1",
|
||||||
align="center",
|
align="center",
|
||||||
),
|
),
|
||||||
position="absolute",
|
position="absolute",
|
||||||
bottom="8%",
|
top="20%",
|
||||||
left="20%",
|
left="-35px",
|
||||||
padding="14px 20px",
|
padding="16px 22px",
|
||||||
background="rgba(20, 20, 35, 0.9)",
|
background="rgba(20, 20, 35, 0.92)",
|
||||||
border="2px solid rgba(109, 215, 229, 0.4)",
|
border="2px solid rgba(245, 158, 11, 0.5)",
|
||||||
border_radius="14px",
|
border_radius="16px",
|
||||||
backdrop_filter="blur(12px)",
|
backdrop_filter="blur(15px)",
|
||||||
box_shadow="0 8px 32px rgba(109, 215, 229, 0.3)",
|
box_shadow="0 10px 40px rgba(245, 158, 11, 0.35)",
|
||||||
style={"animation": "float 6s ease-in-out 0.5s infinite"},
|
z_index="4",
|
||||||
|
style={"animation": "fadeInScale 0.8s ease-out 1.6s backwards, float 7s ease-in-out 3.2s infinite"},
|
||||||
),
|
),
|
||||||
# Main shield illustration
|
# Stats card 2: 10x Speed (repositioned - outer right)
|
||||||
rx.box(
|
rx.box(
|
||||||
rx.image(
|
rx.vstack(
|
||||||
src="/hero-shield.svg",
|
rx.text("10x", font_size="24px", font_weight="900", color="#10B981", line_height="1"),
|
||||||
width="380px",
|
rx.text("سرعت", font_size="11px", color="#94A3B8", font_weight="700"),
|
||||||
height="auto",
|
spacing="1",
|
||||||
filter="drop-shadow(0 20px 60px rgba(245, 158, 11, 0.5))",
|
align="center",
|
||||||
style={"animation": "scaleFloat 7s ease-in-out infinite"},
|
|
||||||
),
|
),
|
||||||
padding="50px",
|
position="absolute",
|
||||||
background="linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(251, 146, 60, 0.08))",
|
top="60%",
|
||||||
border="3px solid rgba(245, 158, 11, 0.3)",
|
right="-30px",
|
||||||
border_radius="32px",
|
padding="14px 20px",
|
||||||
box_shadow="0 25px 80px rgba(245, 158, 11, 0.4)",
|
background="rgba(20, 20, 35, 0.92)",
|
||||||
|
border="2px solid rgba(16, 185, 129, 0.5)",
|
||||||
|
border_radius="14px",
|
||||||
|
backdrop_filter="blur(15px)",
|
||||||
|
box_shadow="0 10px 40px rgba(16, 185, 129, 0.35)",
|
||||||
|
z_index="4",
|
||||||
|
style={"animation": "fadeInScale 0.8s ease-out 1.8s backwards, float 8s ease-in-out 3.5s infinite reverse"},
|
||||||
|
),
|
||||||
|
# Stats card 3: 24/7 Support (repositioned - bottom center)
|
||||||
|
rx.box(
|
||||||
|
rx.vstack(
|
||||||
|
rx.text("24/7", font_size="22px", font_weight="900", color="#6DD7E5", line_height="1"),
|
||||||
|
rx.text("پشتیبانی", font_size="10px", color="#94A3B8", font_weight="700"),
|
||||||
|
spacing="1",
|
||||||
|
align="center",
|
||||||
|
),
|
||||||
|
position="absolute",
|
||||||
|
bottom="-20px",
|
||||||
|
left="35%",
|
||||||
|
padding="13px 18px",
|
||||||
|
background="rgba(20, 20, 35, 0.92)",
|
||||||
|
border="2px solid rgba(109, 215, 229, 0.5)",
|
||||||
|
border_radius="13px",
|
||||||
|
backdrop_filter="blur(15px)",
|
||||||
|
box_shadow="0 10px 40px rgba(109, 215, 229, 0.35)",
|
||||||
|
z_index="4",
|
||||||
|
style={"animation": "fadeInScale 0.8s ease-out 2s backwards, float 6s ease-in-out 3.8s infinite"},
|
||||||
),
|
),
|
||||||
position="relative",
|
position="relative",
|
||||||
|
width="600px",
|
||||||
|
height="600px",
|
||||||
display="flex",
|
display="flex",
|
||||||
align_items="center",
|
align_items="center",
|
||||||
justify_content="center",
|
justify_content="center",
|
||||||
|
|||||||
Reference in New Issue
Block a user