feat: revamp home page styles with new gradient backgrounds, enhanced hover effects, and improved spacing for a more modern and engaging user experience
This commit is contained in:
@@ -252,17 +252,22 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
padding: var(--spacing-xs) var(--spacing-md);
|
||||
background: rgba(255,255,255,0.2);
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
|
||||
border: 1px solid rgba(59, 130, 246, 0.4);
|
||||
border-radius: 999px;
|
||||
font-size: 0.875rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-md);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
transition: var(--transition-smooth);
|
||||
animation: badge-float 3s ease-in-out infinite;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
box-shadow:
|
||||
0 4px 20px rgba(59, 130, 246, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
animation: badge-float 4s ease-in-out infinite;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
@keyframes badge-float {
|
||||
@@ -271,9 +276,12 @@
|
||||
}
|
||||
|
||||
.hero-badge:hover {
|
||||
transform: scale(1.05);
|
||||
background: rgba(255,255,255,0.3);
|
||||
border-color: rgba(255,255,255,0.5);
|
||||
transform: scale(1.05) translateY(-2px);
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%);
|
||||
border-color: rgba(59, 130, 246, 0.6);
|
||||
box-shadow:
|
||||
0 8px 30px rgba(59, 130, 246, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.hero-badge svg {
|
||||
@@ -286,31 +294,40 @@
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(2rem, 5vw, 3.75rem);
|
||||
font-size: clamp(2.5rem, 6vw, 4.5rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
margin: 0 0 var(--spacing-md) 0;
|
||||
letter-spacing: -0.02em;
|
||||
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
animation: title-fade-in 0.8s ease-out;
|
||||
line-height: 1.1;
|
||||
margin: 0 0 var(--spacing-lg) 0;
|
||||
letter-spacing: -0.03em;
|
||||
text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
|
||||
animation: title-fade-in 1s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 50%, #c7d2fe 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-title-highlight {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #06b6d4 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-title-highlight::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0.1em;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 0.15em;
|
||||
background: linear-gradient(90deg, rgba(255,255,255,0.8), rgba(255,255,255,0.4));
|
||||
border-radius: 2px;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--color-primary), #8b5cf6, var(--color-info));
|
||||
border-radius: 999px;
|
||||
transform: scaleX(0);
|
||||
animation: underline-reveal 0.8s ease-out 0.5s forwards;
|
||||
transform-origin: left;
|
||||
animation: underline-reveal 0.8s ease-out 0.8s forwards;
|
||||
}
|
||||
|
||||
@keyframes underline-reveal {
|
||||
@@ -391,14 +408,20 @@
|
||||
}
|
||||
|
||||
.hero-cta-button-primary {
|
||||
background: white;
|
||||
color: #667eea;
|
||||
box-shadow: 0 4px 15px rgba(255,255,255,0.3);
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, #8b5cf6 100%);
|
||||
color: white;
|
||||
box-shadow:
|
||||
0 4px 15px rgba(59, 130, 246, 0.4),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1) inset;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.hero-cta-button-primary:hover {
|
||||
transform: translateY(-3px) scale(1.02);
|
||||
box-shadow: 0 15px 30px -10px rgba(255,255,255,0.5);
|
||||
transform: translateY(-4px) scale(1.03);
|
||||
box-shadow:
|
||||
0 20px 40px rgba(59, 130, 246, 0.4),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.2) inset;
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
|
||||
}
|
||||
|
||||
.hero-cta-button-primary:active {
|
||||
@@ -406,16 +429,18 @@
|
||||
}
|
||||
|
||||
.hero-cta-button-secondary {
|
||||
background: rgba(255,255,255,0.1);
|
||||
background: rgba(255,255,255,0.05);
|
||||
color: white;
|
||||
border-color: rgba(255,255,255,0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 2px solid rgba(255,255,255,0.2);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.hero-cta-button-secondary:hover {
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-color: rgba(255,255,255,0.6);
|
||||
transform: translateY(-2px);
|
||||
background: rgba(255,255,255,0.15);
|
||||
border-color: rgba(255,255,255,0.5);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.hero-cta-button-secondary:active {
|
||||
@@ -589,48 +614,74 @@
|
||||
|
||||
/* Features Grid */
|
||||
.features-section {
|
||||
padding-top: var(--spacing-2xl);
|
||||
padding-bottom: var(--spacing-2xl);
|
||||
padding-top: var(--spacing-3xl);
|
||||
padding-bottom: var(--spacing-3xl);
|
||||
position: relative;
|
||||
background: var(--color-bg-base);
|
||||
}
|
||||
|
||||
.features-section::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--color-border), transparent);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--color-border), transparent);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: clamp(1.875rem, 4vw, 2.25rem);
|
||||
font-weight: 700;
|
||||
font-size: clamp(2rem, 5vw, 2.75rem);
|
||||
font-weight: 800;
|
||||
margin: 0 0 var(--spacing-sm) 0;
|
||||
color: var(--color-text-base);
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background: var(--color-bg-base);
|
||||
padding: 0 var(--spacing-lg);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
bottom: -12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60px;
|
||||
width: 80px;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
|
||||
border-radius: 2px;
|
||||
background: linear-gradient(90deg, var(--color-primary), #8b5cf6, var(--color-info));
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.section-header .section-title {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 1.125rem;
|
||||
font-size: clamp(1.125rem, 2vw, 1.25rem);
|
||||
color: var(--color-text-muted);
|
||||
margin: var(--spacing-md) 0 0 0;
|
||||
margin: var(--spacing-lg) auto 0 auto;
|
||||
max-width: 48rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
line-height: 1.7;
|
||||
line-height: 1.8;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
@@ -747,9 +798,23 @@
|
||||
|
||||
/* Server Panels (Proxmox-inspired) */
|
||||
.nodes-section {
|
||||
padding-top: var(--spacing-2xl);
|
||||
padding-bottom: var(--spacing-2xl);
|
||||
background: var(--color-bg-secondary);
|
||||
padding-top: var(--spacing-3xl);
|
||||
padding-bottom: var(--spacing-3xl);
|
||||
background: linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg-base) 50%, var(--color-bg-secondary) 100%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nodes-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 100% 50% at 0% 0%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),
|
||||
radial-gradient(ellipse 100% 50% at 100% 100%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nodes-grid {
|
||||
@@ -1033,8 +1098,22 @@
|
||||
|
||||
/* Stats Section */
|
||||
.stats-section {
|
||||
padding-top: var(--spacing-2xl);
|
||||
padding-bottom: var(--spacing-2xl);
|
||||
padding-top: var(--spacing-3xl);
|
||||
padding-bottom: var(--spacing-3xl);
|
||||
position: relative;
|
||||
background: linear-gradient(180deg, var(--color-bg-base) 0%, var(--color-bg-secondary) 100%);
|
||||
}
|
||||
|
||||
.stats-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80%;
|
||||
height: 60%;
|
||||
background: radial-gradient(ellipse, rgba(59, 130, 246, 0.03) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
@@ -1194,28 +1273,60 @@
|
||||
|
||||
/* Plans/Products Section */
|
||||
.plans-section {
|
||||
padding-top: var(--spacing-2xl);
|
||||
padding-bottom: var(--spacing-2xl);
|
||||
background: var(--color-bg-secondary);
|
||||
padding-top: var(--spacing-3xl);
|
||||
padding-bottom: var(--spacing-3xl);
|
||||
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
|
||||
position: relative;
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.plans-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 80% 50% at 20% 20%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
|
||||
radial-gradient(ellipse 60% 40% at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.plans-section .section-title {
|
||||
color: #f8fafc;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.plans-section .section-header::before {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
||||
}
|
||||
|
||||
.plans-section .section-subtitle {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.plans-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: var(--spacing-lg);
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--spacing-xl);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.plan-card {
|
||||
background: var(--color-bg-base);
|
||||
border: 2px solid var(--color-border);
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: var(--transition-smooth);
|
||||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-md);
|
||||
box-shadow:
|
||||
0 4px 6px rgba(0, 0, 0, 0.04),
|
||||
0 10px 20px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.plan-card::before {
|
||||
@@ -1224,33 +1335,38 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 5px;
|
||||
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark), var(--color-primary-light));
|
||||
opacity: 0;
|
||||
transition: var(--transition-smooth);
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--color-primary), #8b5cf6, var(--color-info));
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.plan-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.05), transparent 60%);
|
||||
inset: -2px;
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, #8b5cf6 50%, var(--color-info) 100%);
|
||||
border-radius: var(--radius-xl);
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
transition: var(--transition-smooth);
|
||||
}
|
||||
|
||||
.plan-card:hover {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: var(--shadow-2xl);
|
||||
transform: translateY(-10px) scale(1.01);
|
||||
border-color: transparent;
|
||||
box-shadow:
|
||||
0 30px 60px rgba(59, 130, 246, 0.2),
|
||||
0 15px 30px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-16px) scale(1.02);
|
||||
}
|
||||
|
||||
.plan-card:hover::before {
|
||||
opacity: 1;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.plan-card:hover::after {
|
||||
opacity: 1;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.plan-image {
|
||||
@@ -1564,16 +1680,33 @@
|
||||
|
||||
/* Announcements */
|
||||
.announcements-section {
|
||||
padding-top: var(--spacing-2xl);
|
||||
padding-bottom: var(--spacing-2xl);
|
||||
padding-top: var(--spacing-3xl);
|
||||
padding-bottom: var(--spacing-3xl);
|
||||
background: var(--color-bg-base);
|
||||
}
|
||||
|
||||
.announcements-card {
|
||||
background: var(--color-bg-secondary);
|
||||
background: linear-gradient(135deg, var(--color-bg-base) 0%, var(--color-bg-secondary) 100%);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--spacing-xl);
|
||||
max-width: 56rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
0 4px 20px rgba(0, 0, 0, 0.04),
|
||||
0 10px 40px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.announcements-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--color-warning), var(--color-primary), var(--color-info));
|
||||
}
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
@@ -1678,11 +1811,11 @@
|
||||
|
||||
/* Footer */
|
||||
.home-footer {
|
||||
padding-top: var(--spacing-2xl);
|
||||
padding-bottom: var(--spacing-xl);
|
||||
background: var(--color-bg-tertiary);
|
||||
border-top: 2px solid var(--color-border);
|
||||
padding-top: var(--spacing-3xl);
|
||||
padding-bottom: var(--spacing-2xl);
|
||||
background: linear-gradient(180deg, var(--color-bg-secondary) 0%, #0f172a 100%);
|
||||
position: relative;
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.home-footer::before {
|
||||
@@ -1691,8 +1824,15 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--color-primary), #8b5cf6, var(--color-info), #8b5cf6, var(--color-primary));
|
||||
background-size: 200% 100%;
|
||||
animation: footer-gradient 8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes footer-gradient {
|
||||
0% { background-position: 0% 50%; }
|
||||
100% { background-position: 200% 50%; }
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
@@ -1889,31 +2029,62 @@
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--color-primary);
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, #8b5cf6 100%);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: var(--transition-smooth);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: 1000;
|
||||
box-shadow: var(--shadow-lg);
|
||||
box-shadow:
|
||||
0 4px 15px rgba(59, 130, 246, 0.4),
|
||||
0 0 0 0 rgba(59, 130, 246, 0.2);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.scroll-to-top::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -3px;
|
||||
background: linear-gradient(135deg, var(--color-primary), #8b5cf6, var(--color-info));
|
||||
border-radius: var(--radius-lg);
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
|
||||
.scroll-to-top.visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
animation: scroll-btn-entrance 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
@keyframes scroll-btn-entrance {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px) scale(0.8);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-to-top:hover {
|
||||
transform: translateY(-4px) scale(1.1);
|
||||
box-shadow: var(--shadow-xl);
|
||||
background: var(--color-primary-dark);
|
||||
transform: translateY(-6px) scale(1.1);
|
||||
box-shadow:
|
||||
0 20px 40px rgba(59, 130, 246, 0.4),
|
||||
0 0 0 4px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
.scroll-to-top:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.scroll-to-top:active {
|
||||
|
||||
Reference in New Issue
Block a user