3635 lines
125 KiB
PHP
3635 lines
125 KiB
PHP
<style>
|
|
/* ============================================
|
|
LUCENTUI HOMEPAGE - Professional Theme
|
|
Uses theme CSS variables for consistency
|
|
============================================ */
|
|
|
|
#lucent-home {
|
|
/* Map to theme colors using HSL variables */
|
|
--lucent-primary: hsl(var(--color-primary));
|
|
--lucent-primary-light: hsl(var(--color-primary) / 0.8);
|
|
--lucent-primary-dark: hsl(var(--color-primary) / 1.1);
|
|
--lucent-secondary: hsl(var(--color-secondary));
|
|
--lucent-secondary-light: hsl(var(--color-secondary) / 0.8);
|
|
--lucent-accent: hsl(var(--color-info));
|
|
--lucent-accent-light: hsl(var(--color-info) / 0.8);
|
|
--lucent-success: hsl(var(--color-success));
|
|
--lucent-success-light: hsl(var(--color-success) / 0.8);
|
|
--lucent-warning: hsl(var(--color-warning));
|
|
--lucent-warning-light: hsl(var(--color-warning) / 0.8);
|
|
--lucent-danger: hsl(var(--color-error));
|
|
--lucent-danger-light: hsl(var(--color-error) / 0.8);
|
|
--lucent-info: hsl(var(--color-info));
|
|
|
|
/* Background colors from theme */
|
|
--lucent-bg: hsl(var(--color-background));
|
|
--lucent-bg-secondary: hsl(var(--color-background-secondary));
|
|
--lucent-text: hsl(var(--color-base));
|
|
--lucent-text-muted: hsl(var(--color-muted));
|
|
--lucent-border: hsl(var(--color-neutral));
|
|
|
|
/* Dark section backgrounds */
|
|
--lucent-dark-base: hsl(221 39% 11%);
|
|
--lucent-dark-secondary: hsl(217 33% 17%);
|
|
--lucent-dark-tertiary: hsl(215 25% 27%);
|
|
--lucent-dark-elevated: hsl(222 47% 8%);
|
|
|
|
/* Consistent border radius matching theme */
|
|
--lucent-radius-sm: 0.5rem;
|
|
--lucent-radius-md: 0.75rem;
|
|
--lucent-radius-lg: 1rem;
|
|
--lucent-radius-xl: 1.25rem;
|
|
--lucent-radius-2xl: 1.5rem;
|
|
--lucent-radius-3xl: 2rem;
|
|
|
|
/* Transitions */
|
|
--lucent-transition: 0.2s ease;
|
|
--lucent-transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
--lucent-transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
|
|
/* Shadows using theme primary */
|
|
--lucent-shadow-glow: 0 0 30px hsl(var(--color-primary) / 0.15);
|
|
--lucent-shadow-glow-strong: 0 0 50px hsl(var(--color-primary) / 0.25);
|
|
}
|
|
|
|
/* Base Reset for Homepage */
|
|
#lucent-home {
|
|
min-height: 100vh;
|
|
position: relative;
|
|
}
|
|
|
|
#lucent-home * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* ============================================
|
|
HERO SECTION - Dark Theme with Effects
|
|
============================================ */
|
|
|
|
.lucent-hero {
|
|
position: relative;
|
|
padding: clamp(4rem, 10vw, 7rem) 0 clamp(5rem, 12vw, 9rem);
|
|
background: linear-gradient(135deg, var(--lucent-dark-base) 0%, var(--lucent-dark-secondary) 40%, var(--lucent-dark-base) 100%);
|
|
overflow: hidden;
|
|
border-bottom: 1px solid rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.lucent-hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background:
|
|
radial-gradient(ellipse 80% 50% at 50% -20%, rgba(59, 130, 246, 0.25) 0%, transparent 50%),
|
|
radial-gradient(ellipse 60% 40% at 100% 50%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
|
|
radial-gradient(ellipse 60% 40% at 0% 50%, rgba(6, 182, 212, 0.12) 0%, transparent 50%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Grid Pattern */
|
|
.lucent-hero-grid {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-image:
|
|
linear-gradient(rgba(59, 130, 246, 0.04) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(59, 130, 246, 0.04) 1px, transparent 1px);
|
|
background-size: 60px 60px;
|
|
mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 40%, transparent 100%);
|
|
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 40%, transparent 100%);
|
|
}
|
|
|
|
/* Animated Glowing Orbs */
|
|
.lucent-orb {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(80px);
|
|
pointer-events: none;
|
|
animation: lucent-orb-float 20s ease-in-out infinite;
|
|
}
|
|
|
|
.lucent-orb-1 {
|
|
width: 450px;
|
|
height: 450px;
|
|
background: rgba(59, 130, 246, 0.35);
|
|
top: -120px;
|
|
right: 5%;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.lucent-orb-2 {
|
|
width: 350px;
|
|
height: 350px;
|
|
background: rgba(139, 92, 246, 0.25);
|
|
bottom: -80px;
|
|
left: 5%;
|
|
animation-delay: -7s;
|
|
}
|
|
|
|
.lucent-orb-3 {
|
|
width: 280px;
|
|
height: 280px;
|
|
background: rgba(6, 182, 212, 0.2);
|
|
top: 35%;
|
|
left: 25%;
|
|
animation-delay: -14s;
|
|
}
|
|
|
|
@keyframes lucent-orb-float {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
25% { transform: translate(40px, -40px) scale(1.1); }
|
|
50% { transform: translate(-30px, 30px) scale(0.95); }
|
|
75% { transform: translate(30px, 40px) scale(1.05); }
|
|
}
|
|
|
|
/* Floating Particles */
|
|
.lucent-particles {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.lucent-particle {
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: rgba(255, 255, 255, 0.12);
|
|
border-radius: 50%;
|
|
animation: lucent-particle-float linear infinite;
|
|
}
|
|
|
|
.lucent-particle:nth-child(1) { left: 10%; animation-duration: 22s; animation-delay: 0s; width: 8px; height: 8px; }
|
|
.lucent-particle:nth-child(2) { left: 25%; animation-duration: 28s; animation-delay: -5s; width: 12px; height: 12px; }
|
|
.lucent-particle:nth-child(3) { left: 35%; animation-duration: 20s; animation-delay: -2s; width: 6px; height: 6px; }
|
|
.lucent-particle:nth-child(4) { left: 45%; animation-duration: 25s; animation-delay: -8s; width: 10px; height: 10px; }
|
|
.lucent-particle:nth-child(5) { left: 55%; animation-duration: 30s; animation-delay: -3s; width: 14px; height: 14px; }
|
|
.lucent-particle:nth-child(6) { left: 65%; animation-duration: 21s; animation-delay: -10s; width: 8px; height: 8px; }
|
|
.lucent-particle:nth-child(7) { left: 75%; animation-duration: 26s; animation-delay: -4s; width: 11px; height: 11px; }
|
|
.lucent-particle:nth-child(8) { left: 85%; animation-duration: 23s; animation-delay: -7s; width: 7px; height: 7px; }
|
|
|
|
@keyframes lucent-particle-float {
|
|
0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
|
|
10% { opacity: 0.8; }
|
|
90% { opacity: 0.8; }
|
|
100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
|
|
}
|
|
|
|
/* Hero Bottom Fade */
|
|
.lucent-hero::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 180px;
|
|
background: linear-gradient(to bottom, transparent, var(--background, #0f172a));
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Hero Content */
|
|
.lucent-hero-content {
|
|
position: relative;
|
|
z-index: 10;
|
|
text-align: center;
|
|
color: #f8fafc;
|
|
}
|
|
|
|
/* Hero Badge */
|
|
.lucent-hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
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-weight: 600;
|
|
margin-bottom: 1.5rem;
|
|
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: lucent-badge-float 4s ease-in-out infinite;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.lucent-hero-badge:hover {
|
|
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);
|
|
}
|
|
|
|
@keyframes lucent-badge-float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-6px); }
|
|
}
|
|
|
|
/* Hero Title */
|
|
.lucent-hero-title {
|
|
font-size: clamp(2.5rem, 7vw, 5rem);
|
|
font-weight: 800;
|
|
line-height: 1.1;
|
|
margin: 0 0 1.5rem 0;
|
|
letter-spacing: -0.03em;
|
|
text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
|
|
animation: lucent-title-fade 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;
|
|
}
|
|
|
|
.lucent-hero-title-highlight {
|
|
display: inline-block;
|
|
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #06b6d4 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
position: relative;
|
|
}
|
|
|
|
.lucent-hero-title-highlight::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, var(--lucent-primary), var(--lucent-secondary), var(--lucent-accent));
|
|
border-radius: 999px;
|
|
transform: scaleX(0);
|
|
transform-origin: left;
|
|
animation: lucent-underline-reveal 0.8s ease-out 0.8s forwards;
|
|
}
|
|
|
|
@keyframes lucent-underline-reveal {
|
|
to { transform: scaleX(1); }
|
|
}
|
|
|
|
@keyframes lucent-title-fade {
|
|
from { opacity: 0; transform: translateY(30px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* Hero Description */
|
|
.lucent-hero-desc {
|
|
font-size: clamp(1.125rem, 2.5vw, 1.35rem);
|
|
line-height: 1.7;
|
|
margin: 0 auto 2.5rem auto;
|
|
max-width: 52rem;
|
|
opacity: 0.92;
|
|
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
|
|
animation: lucent-desc-fade 0.8s ease-out 0.2s both;
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
@keyframes lucent-desc-fade {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 0.92; transform: translateY(0); }
|
|
}
|
|
|
|
/* Hero CTAs */
|
|
.lucent-hero-cta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
.lucent-btn-primary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
padding: 1rem 2rem;
|
|
background: linear-gradient(135deg, var(--lucent-primary) 0%, var(--lucent-secondary) 100%);
|
|
color: white;
|
|
border-radius: var(--lucent-radius-lg);
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
text-decoration: none;
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
border: none;
|
|
box-shadow:
|
|
0 4px 15px rgba(59, 130, 246, 0.4),
|
|
0 0 0 1px rgba(255, 255, 255, 0.1) inset;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lucent-btn-primary::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
|
|
transition: 0.5s;
|
|
}
|
|
|
|
.lucent-btn-primary:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.lucent-btn-primary:hover {
|
|
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%);
|
|
}
|
|
|
|
.lucent-btn-secondary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
padding: 1rem 2rem;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
color: white;
|
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: var(--lucent-radius-lg);
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
text-decoration: none;
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
}
|
|
|
|
.lucent-btn-secondary:hover {
|
|
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 Highlights */
|
|
.lucent-hero-highlights {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 0.75rem;
|
|
max-width: 56rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.lucent-hero-highlights {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
.lucent-highlight-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: var(--lucent-radius-md);
|
|
padding: 0.875rem 1rem;
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.lucent-highlight-item:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.lucent-highlight-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: var(--lucent-radius-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.lucent-highlight-text {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: #f1f5f9;
|
|
}
|
|
|
|
/* ============================================
|
|
STATS SECTION
|
|
============================================ */
|
|
|
|
.lucent-stats-section {
|
|
padding: clamp(3rem, 8vw, 5rem) 0;
|
|
position: relative;
|
|
background: linear-gradient(180deg, transparent 0%, rgba(59, 130, 246, 0.02) 50%, transparent 100%);
|
|
}
|
|
|
|
.lucent-stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.lucent-stats-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.lucent-stats-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.lucent-stat-card {
|
|
background: linear-gradient(145deg, var(--background-secondary, #1e293b) 0%, rgba(30, 41, 59, 0.5) 100%);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: var(--lucent-radius-xl);
|
|
padding: 2rem;
|
|
text-align: center;
|
|
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lucent-stat-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: var(--stat-color, var(--lucent-primary));
|
|
opacity: 0.8;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.lucent-stat-card::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 50px;
|
|
background: linear-gradient(180deg, var(--stat-color-alpha, rgba(59, 130, 246, 0.1)) 0%, transparent 100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.lucent-stat-card:hover {
|
|
transform: translateY(-8px) scale(1.02);
|
|
border-color: var(--stat-color, var(--lucent-primary));
|
|
box-shadow:
|
|
0 25px 50px var(--stat-shadow, rgba(59, 130, 246, 0.2)),
|
|
0 10px 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.lucent-stat-card:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.lucent-stat-card[data-color="success"] {
|
|
--stat-color: var(--lucent-success);
|
|
--stat-color-alpha: rgba(16, 185, 129, 0.1);
|
|
--stat-shadow: rgba(16, 185, 129, 0.2);
|
|
}
|
|
|
|
.lucent-stat-card[data-color="primary"] {
|
|
--stat-color: var(--lucent-primary);
|
|
--stat-color-alpha: rgba(59, 130, 246, 0.1);
|
|
--stat-shadow: rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
.lucent-stat-card[data-color="purple"] {
|
|
--stat-color: var(--lucent-secondary);
|
|
--stat-color-alpha: rgba(139, 92, 246, 0.1);
|
|
--stat-shadow: rgba(139, 92, 246, 0.2);
|
|
}
|
|
|
|
.lucent-stat-card[data-color="orange"] {
|
|
--stat-color: #f97316;
|
|
--stat-color-alpha: rgba(249, 115, 22, 0.1);
|
|
--stat-shadow: rgba(249, 115, 22, 0.2);
|
|
}
|
|
|
|
.lucent-stat-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 1.25rem auto;
|
|
background: var(--stat-color-alpha, rgba(59, 130, 246, 0.15));
|
|
color: var(--stat-color, var(--lucent-primary));
|
|
transition: transform 0.4s ease;
|
|
}
|
|
|
|
.lucent-stat-card:hover .lucent-stat-icon {
|
|
transform: scale(1.1) rotate(5deg);
|
|
}
|
|
|
|
.lucent-stat-value {
|
|
font-size: 2.75rem;
|
|
font-weight: 800;
|
|
color: var(--stat-color, var(--lucent-primary));
|
|
margin-bottom: 0.5rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.lucent-stat-title {
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.lucent-stat-subtitle {
|
|
font-size: 0.875rem;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* ============================================
|
|
NODE STATUS SECTION - Proxmox Style
|
|
============================================ */
|
|
|
|
.lucent-nodes-section {
|
|
padding: clamp(3rem, 8vw, 5rem) 0;
|
|
background: linear-gradient(180deg, var(--background-secondary, #1e293b) 0%, var(--background, #0f172a) 50%, var(--background-secondary, #1e293b) 100%);
|
|
position: relative;
|
|
}
|
|
|
|
.lucent-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;
|
|
}
|
|
|
|
.lucent-nodes-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1.5rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.lucent-nodes-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.lucent-nodes-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.lucent-node-card {
|
|
background: linear-gradient(180deg, var(--background, #0f172a) 0%, var(--background-secondary, #1e293b) 100%);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: var(--lucent-radius-xl);
|
|
padding: 1.5rem;
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lucent-node-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, var(--lucent-success), var(--lucent-success-light), var(--lucent-accent));
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.lucent-node-card::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 50px;
|
|
background: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, transparent 100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.lucent-node-card:hover {
|
|
transform: translateY(-6px);
|
|
box-shadow:
|
|
0 20px 40px rgba(16, 185, 129, 0.12),
|
|
0 8px 16px rgba(0, 0, 0, 0.1);
|
|
border-color: rgba(16, 185, 129, 0.3);
|
|
}
|
|
|
|
.lucent-node-card:hover::before {
|
|
opacity: 1;
|
|
background: linear-gradient(90deg, var(--lucent-success), var(--lucent-primary), var(--lucent-secondary));
|
|
}
|
|
|
|
.lucent-node-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 1.25rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.lucent-node-title {
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
}
|
|
|
|
.lucent-node-status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.375rem 0.875rem;
|
|
border-radius: 999px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
background: rgba(16, 185, 129, 0.15);
|
|
color: var(--lucent-success);
|
|
border: 1px solid rgba(16, 185, 129, 0.3);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.lucent-node-card:hover .lucent-node-status {
|
|
background: rgba(16, 185, 129, 0.25);
|
|
border-color: rgba(16, 185, 129, 0.5);
|
|
}
|
|
|
|
.lucent-node-status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
position: relative;
|
|
animation: lucent-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
.lucent-node-status-dot::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -2px;
|
|
left: -2px;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
border-radius: 50%;
|
|
border: 2px solid currentColor;
|
|
animation: lucent-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
|
|
}
|
|
|
|
@keyframes lucent-pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.7; }
|
|
}
|
|
|
|
@keyframes lucent-ping {
|
|
0% { transform: scale(1); opacity: 1; }
|
|
75%, 100% { transform: scale(1.8); opacity: 0; }
|
|
}
|
|
|
|
.lucent-node-stats {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.lucent-node-stat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.lucent-node-stat-label {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 0.875rem;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.lucent-node-stat-value {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.lucent-progress-bar {
|
|
height: 8px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.lucent-progress-bar::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 50%;
|
|
background: linear-gradient(to bottom, rgba(255,255,255,0.15), transparent);
|
|
border-radius: 999px 999px 0 0;
|
|
}
|
|
|
|
.lucent-progress-fill {
|
|
height: 100%;
|
|
border-radius: 999px;
|
|
transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lucent-progress-fill::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
|
animation: lucent-shimmer 2s infinite;
|
|
}
|
|
|
|
@keyframes lucent-shimmer {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
|
|
.lucent-progress-fill-primary {
|
|
background: linear-gradient(90deg, var(--lucent-primary), var(--lucent-primary-light));
|
|
}
|
|
|
|
.lucent-progress-fill-success {
|
|
background: linear-gradient(90deg, var(--lucent-success), var(--lucent-success-light));
|
|
}
|
|
|
|
.lucent-progress-fill-warning {
|
|
background: linear-gradient(90deg, var(--lucent-warning), var(--lucent-warning-light));
|
|
}
|
|
|
|
.lucent-mini-chart {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 3px;
|
|
height: 32px;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.lucent-mini-chart-bar {
|
|
flex: 1;
|
|
background: linear-gradient(to top, var(--lucent-primary), var(--lucent-primary-light));
|
|
border-radius: 3px 3px 0 0;
|
|
transition: height 0.3s ease;
|
|
min-height: 4px;
|
|
animation: lucent-chart-grow 0.8s ease-out forwards;
|
|
transform-origin: bottom;
|
|
}
|
|
|
|
@keyframes lucent-chart-grow {
|
|
from { transform: scaleY(0); }
|
|
to { transform: scaleY(1); }
|
|
}
|
|
|
|
.lucent-mini-chart-bar:nth-child(1) { animation-delay: 0.1s; }
|
|
.lucent-mini-chart-bar:nth-child(2) { animation-delay: 0.15s; }
|
|
.lucent-mini-chart-bar:nth-child(3) { animation-delay: 0.2s; }
|
|
.lucent-mini-chart-bar:nth-child(4) { animation-delay: 0.25s; }
|
|
.lucent-mini-chart-bar:nth-child(5) { animation-delay: 0.3s; }
|
|
.lucent-mini-chart-bar:nth-child(6) { animation-delay: 0.35s; }
|
|
.lucent-mini-chart-bar:nth-child(7) { animation-delay: 0.4s; }
|
|
.lucent-mini-chart-bar:nth-child(8) { animation-delay: 0.45s; }
|
|
|
|
/* ============================================
|
|
QUICK ACTIONS SECTION
|
|
============================================ */
|
|
|
|
.lucent-actions-section {
|
|
padding: clamp(3rem, 8vw, 5rem) 0;
|
|
}
|
|
|
|
.lucent-section-header {
|
|
text-align: center;
|
|
margin-bottom: 3rem;
|
|
position: relative;
|
|
}
|
|
|
|
.lucent-section-header::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--border, rgba(255,255,255,0.1)), transparent);
|
|
z-index: 0;
|
|
}
|
|
|
|
.lucent-section-title {
|
|
font-size: clamp(2rem, 5vw, 2.75rem);
|
|
font-weight: 800;
|
|
margin: 0 0 1rem 0;
|
|
position: relative;
|
|
display: inline-block;
|
|
padding: 0 1.5rem;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.lucent-section-title::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -12px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 80px;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, var(--lucent-primary), var(--lucent-secondary), var(--lucent-accent));
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.lucent-section-subtitle {
|
|
font-size: clamp(1.125rem, 2vw, 1.25rem);
|
|
opacity: 0.7;
|
|
margin: 1.5rem auto 0 auto;
|
|
max-width: 48rem;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.lucent-actions-container {
|
|
background: linear-gradient(145deg, var(--background-secondary, #1e293b) 0%, rgba(30, 41, 59, 0.5) 100%);
|
|
border: 2px solid rgba(59, 130, 246, 0.3);
|
|
border-radius: var(--lucent-radius-2xl);
|
|
padding: clamp(1.5rem, 4vw, 3rem);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lucent-actions-container::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, var(--lucent-primary), var(--lucent-secondary), var(--lucent-accent));
|
|
}
|
|
|
|
.lucent-actions-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.lucent-actions-header-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: var(--lucent-radius-lg);
|
|
background: rgba(59, 130, 246, 0.15);
|
|
color: var(--lucent-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.lucent-actions-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.lucent-actions-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.lucent-actions-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.lucent-action-card {
|
|
padding: 1.5rem;
|
|
border-radius: var(--lucent-radius-lg);
|
|
color: white;
|
|
text-decoration: none;
|
|
display: block;
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lucent-action-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
|
transition: 0.5s;
|
|
}
|
|
|
|
.lucent-action-card:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.lucent-action-card:hover {
|
|
transform: translateY(-6px) scale(1.02);
|
|
}
|
|
|
|
.lucent-action-card[data-color="primary"] {
|
|
background: linear-gradient(135deg, var(--lucent-primary) 0%, var(--lucent-primary-dark) 100%);
|
|
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.lucent-action-card[data-color="primary"]:hover {
|
|
box-shadow: 0 16px 40px rgba(59, 130, 246, 0.4);
|
|
}
|
|
|
|
.lucent-action-card[data-color="purple"] {
|
|
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
|
|
box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
|
|
}
|
|
|
|
.lucent-action-card[data-color="purple"]:hover {
|
|
box-shadow: 0 16px 40px rgba(139, 92, 246, 0.4);
|
|
}
|
|
|
|
.lucent-action-card[data-color="blue"] {
|
|
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
|
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.lucent-action-card[data-color="blue"]:hover {
|
|
box-shadow: 0 16px 40px rgba(59, 130, 246, 0.4);
|
|
}
|
|
|
|
.lucent-action-card[data-color="emerald"] {
|
|
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
|
|
}
|
|
|
|
.lucent-action-card[data-color="emerald"]:hover {
|
|
box-shadow: 0 16px 40px rgba(16, 185, 129, 0.4);
|
|
}
|
|
|
|
.lucent-action-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.lucent-action-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: var(--lucent-radius-md);
|
|
background: rgba(255, 255, 255, 0.2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.lucent-action-card:hover .lucent-action-icon {
|
|
transform: scale(1.1) rotate(-5deg);
|
|
}
|
|
|
|
.lucent-action-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
}
|
|
|
|
.lucent-action-subtitle {
|
|
font-size: 0.875rem;
|
|
opacity: 0.85;
|
|
margin: 0;
|
|
}
|
|
|
|
.lucent-action-desc {
|
|
font-size: 0.875rem;
|
|
opacity: 0.75;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ============================================
|
|
SERVICES SECTION - Dark Theme
|
|
============================================ */
|
|
|
|
.lucent-services-section {
|
|
padding: clamp(4rem, 10vw, 6rem) 0;
|
|
background: linear-gradient(135deg, var(--lucent-dark-base) 0%, var(--lucent-dark-secondary) 50%, var(--lucent-dark-base) 100%);
|
|
position: relative;
|
|
color: #f8fafc;
|
|
}
|
|
|
|
.lucent-services-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.12) 0%, transparent 50%),
|
|
radial-gradient(ellipse 60% 40% at 80% 80%, rgba(139, 92, 246, 0.08) 0%, transparent 50%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.lucent-services-section .lucent-section-title {
|
|
color: #f8fafc;
|
|
}
|
|
|
|
.lucent-services-section .lucent-section-subtitle {
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.lucent-services-section .lucent-section-header::before {
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
|
|
}
|
|
|
|
.lucent-services-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 1.5rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.lucent-services-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.lucent-services-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.lucent-service-card {
|
|
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: var(--lucent-radius-xl);
|
|
padding: 1.75rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
color: var(--lucent-dark-base);
|
|
}
|
|
|
|
.lucent-service-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, var(--lucent-primary), var(--lucent-secondary), var(--lucent-accent));
|
|
transform: scaleX(0);
|
|
transform-origin: left;
|
|
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.lucent-service-card:hover {
|
|
transform: translateY(-12px) scale(1.02);
|
|
box-shadow:
|
|
0 30px 60px rgba(59, 130, 246, 0.2),
|
|
0 15px 30px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.lucent-service-card:hover::before {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.lucent-service-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
margin: 0 0 0.75rem 0;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.lucent-service-card:hover .lucent-service-title {
|
|
color: var(--lucent-primary);
|
|
}
|
|
|
|
.lucent-service-desc {
|
|
flex: 1;
|
|
font-size: 0.9375rem;
|
|
line-height: 1.6;
|
|
opacity: 0.8;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.lucent-service-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
align-self: flex-end;
|
|
gap: 0.5rem;
|
|
padding: 0.625rem 1.25rem;
|
|
background: rgba(59, 130, 246, 0.1);
|
|
color: var(--lucent-primary);
|
|
border-radius: var(--lucent-radius-md);
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.lucent-service-link:hover {
|
|
background: var(--lucent-primary);
|
|
color: white;
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
/* ============================================
|
|
FEATURES SECTION
|
|
============================================ */
|
|
|
|
.lucent-features-section {
|
|
padding: clamp(3rem, 8vw, 5rem) 0;
|
|
position: relative;
|
|
}
|
|
|
|
.lucent-features-section::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--border, rgba(255,255,255,0.1)), transparent);
|
|
}
|
|
|
|
.lucent-features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.lucent-features-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.lucent-features-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.lucent-feature-card {
|
|
background: linear-gradient(145deg, var(--background-secondary, #1e293b) 0%, rgba(30, 41, 59, 0.5) 100%);
|
|
border: 2px solid var(--feature-border, rgba(59, 130, 246, 0.2));
|
|
border-radius: var(--lucent-radius-xl);
|
|
padding: 1.5rem;
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
}
|
|
|
|
.lucent-feature-card:hover {
|
|
transform: translateY(-8px) scale(1.02);
|
|
border-color: var(--feature-border-hover, rgba(59, 130, 246, 0.5));
|
|
box-shadow:
|
|
0 20px 40px var(--feature-shadow, rgba(59, 130, 246, 0.15)),
|
|
0 0 0 2px var(--feature-border-hover, rgba(59, 130, 246, 0.3)),
|
|
0 0 30px var(--feature-glow, rgba(59, 130, 246, 0.1));
|
|
}
|
|
|
|
.lucent-feature-card[data-color="primary"] {
|
|
--feature-border: rgba(59, 130, 246, 0.2);
|
|
--feature-border-hover: rgba(59, 130, 246, 0.5);
|
|
--feature-shadow: rgba(59, 130, 246, 0.15);
|
|
--feature-glow: rgba(59, 130, 246, 0.1);
|
|
--feature-color: var(--lucent-primary);
|
|
}
|
|
|
|
.lucent-feature-card[data-color="secondary"] {
|
|
--feature-border: rgba(139, 92, 246, 0.2);
|
|
--feature-border-hover: rgba(139, 92, 246, 0.5);
|
|
--feature-shadow: rgba(139, 92, 246, 0.15);
|
|
--feature-glow: rgba(139, 92, 246, 0.1);
|
|
--feature-color: var(--lucent-secondary);
|
|
}
|
|
|
|
.lucent-feature-card[data-color="success"] {
|
|
--feature-border: rgba(16, 185, 129, 0.2);
|
|
--feature-border-hover: rgba(16, 185, 129, 0.5);
|
|
--feature-shadow: rgba(16, 185, 129, 0.15);
|
|
--feature-glow: rgba(16, 185, 129, 0.1);
|
|
--feature-color: var(--lucent-success);
|
|
}
|
|
|
|
.lucent-feature-card[data-color="warning"] {
|
|
--feature-border: rgba(245, 158, 11, 0.2);
|
|
--feature-border-hover: rgba(245, 158, 11, 0.5);
|
|
--feature-shadow: rgba(245, 158, 11, 0.15);
|
|
--feature-glow: rgba(245, 158, 11, 0.1);
|
|
--feature-color: var(--lucent-warning);
|
|
}
|
|
|
|
.lucent-feature-card[data-color="info"] {
|
|
--feature-border: rgba(6, 182, 212, 0.2);
|
|
--feature-border-hover: rgba(6, 182, 212, 0.5);
|
|
--feature-shadow: rgba(6, 182, 212, 0.15);
|
|
--feature-glow: rgba(6, 182, 212, 0.1);
|
|
--feature-color: var(--lucent-info);
|
|
}
|
|
|
|
.lucent-feature-card[data-color="danger"] {
|
|
--feature-border: rgba(239, 68, 68, 0.2);
|
|
--feature-border-hover: rgba(239, 68, 68, 0.5);
|
|
--feature-shadow: rgba(239, 68, 68, 0.15);
|
|
--feature-glow: rgba(239, 68, 68, 0.1);
|
|
--feature-color: var(--lucent-danger);
|
|
}
|
|
|
|
.lucent-feature-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.lucent-feature-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: var(--lucent-radius-lg);
|
|
background: linear-gradient(135deg, rgba(var(--feature-color-rgb, 59, 130, 246), 0.15) 0%, rgba(var(--feature-color-rgb, 59, 130, 246), 0.08) 100%);
|
|
color: var(--feature-color, var(--lucent-primary));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.4s ease;
|
|
}
|
|
|
|
.lucent-feature-card:hover .lucent-feature-icon {
|
|
transform: scale(1.1) rotate(-5deg);
|
|
box-shadow: 0 8px 24px var(--feature-shadow, rgba(59, 130, 246, 0.2));
|
|
}
|
|
|
|
.lucent-feature-title {
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
}
|
|
|
|
.lucent-feature-desc {
|
|
font-size: 0.9375rem;
|
|
line-height: 1.6;
|
|
opacity: 0.75;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ============================================
|
|
COMMUNITY SECTION
|
|
============================================ */
|
|
|
|
.lucent-community-section {
|
|
padding: clamp(4rem, 10vw, 6rem) 0;
|
|
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.lucent-community-section {
|
|
background: linear-gradient(135deg, #0c4a6e 0%, #075985 100%);
|
|
}
|
|
}
|
|
|
|
.lucent-community-section::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
right: -10%;
|
|
width: 60%;
|
|
height: 200%;
|
|
background: radial-gradient(ellipse, rgba(6, 182, 212, 0.15) 0%, transparent 60%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.lucent-community-content {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 4rem;
|
|
align-items: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.lucent-community-content {
|
|
grid-template-columns: 1fr;
|
|
gap: 2rem;
|
|
}
|
|
}
|
|
|
|
.lucent-community-text h2 {
|
|
font-size: clamp(2rem, 5vw, 2.75rem);
|
|
font-weight: 800;
|
|
margin: 0 0 1.5rem 0;
|
|
letter-spacing: -0.02em;
|
|
color: var(--lucent-dark-base);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.lucent-community-text h2 {
|
|
color: #f8fafc;
|
|
}
|
|
}
|
|
|
|
.lucent-community-text h2 span {
|
|
background: linear-gradient(135deg, var(--lucent-primary) 0%, var(--lucent-secondary) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.lucent-community-text p {
|
|
font-size: 1.125rem;
|
|
line-height: 1.8;
|
|
opacity: 0.85;
|
|
margin: 0 0 2rem 0;
|
|
color: var(--lucent-dark-secondary);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.lucent-community-text p {
|
|
color: #cbd5e1;
|
|
}
|
|
}
|
|
|
|
.lucent-community-features {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.lucent-community-feature {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.lucent-community-check {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, var(--lucent-success), #059669);
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.lucent-community-visual {
|
|
position: relative;
|
|
}
|
|
|
|
.lucent-community-card-stack {
|
|
position: relative;
|
|
height: 400px;
|
|
}
|
|
|
|
.lucent-community-card {
|
|
position: absolute;
|
|
background: white;
|
|
border-radius: var(--lucent-radius-xl);
|
|
padding: 1.5rem;
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.4s ease;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.lucent-community-card {
|
|
background: var(--lucent-dark-secondary);
|
|
}
|
|
}
|
|
|
|
.lucent-community-card:nth-child(1) {
|
|
top: 0;
|
|
right: 20%;
|
|
z-index: 3;
|
|
animation: lucent-card-float 6s ease-in-out infinite;
|
|
}
|
|
|
|
.lucent-community-card:nth-child(2) {
|
|
top: 80px;
|
|
right: 5%;
|
|
z-index: 2;
|
|
animation: lucent-card-float 6s ease-in-out infinite 1s;
|
|
}
|
|
|
|
.lucent-community-card:nth-child(3) {
|
|
top: 160px;
|
|
right: 15%;
|
|
z-index: 1;
|
|
animation: lucent-card-float 6s ease-in-out infinite 2s;
|
|
}
|
|
|
|
@keyframes lucent-card-float {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
|
|
.lucent-community-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.lucent-community-card-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, var(--lucent-primary), var(--lucent-secondary));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: 700;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.lucent-community-card-name {
|
|
font-weight: 600;
|
|
font-size: 0.9375rem;
|
|
}
|
|
|
|
.lucent-community-card-role {
|
|
font-size: 0.75rem;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.lucent-community-card-text {
|
|
font-size: 0.875rem;
|
|
line-height: 1.6;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
/* ============================================
|
|
PLATFORM CAPABILITIES - KVM Hypervisor
|
|
============================================ */
|
|
|
|
.lucent-capabilities-section {
|
|
padding: clamp(4rem, 10vw, 6rem) 0;
|
|
background: linear-gradient(180deg, hsl(var(--color-background-secondary)) 0%, hsl(var(--color-background)) 100%);
|
|
position: relative;
|
|
}
|
|
|
|
.lucent-capabilities-section::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, hsl(var(--color-neutral) / 0.3), transparent);
|
|
}
|
|
|
|
.lucent-capabilities-intro {
|
|
text-align: center;
|
|
max-width: 48rem;
|
|
margin: 0 auto 3rem auto;
|
|
}
|
|
|
|
.lucent-capabilities-intro p {
|
|
font-size: 1.125rem;
|
|
line-height: 1.8;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.lucent-capabilities-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 2rem;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.lucent-capabilities-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 1.5rem;
|
|
}
|
|
}
|
|
|
|
.lucent-capability-card {
|
|
background: hsl(var(--color-background));
|
|
border: 1px solid hsl(var(--color-neutral) / 0.3);
|
|
border-radius: var(--lucent-radius-xl);
|
|
padding: 2rem;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lucent-capability-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 4px;
|
|
height: 100%;
|
|
background: linear-gradient(180deg, hsl(var(--color-primary)), hsl(var(--color-secondary)));
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.lucent-capability-card:hover {
|
|
border-color: hsl(var(--color-primary) / 0.3);
|
|
box-shadow: 0 10px 30px hsl(var(--color-primary) / 0.08);
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.lucent-capability-card:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.lucent-capability-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.lucent-capability-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: var(--lucent-radius-md);
|
|
background: hsl(var(--color-primary) / 0.1);
|
|
color: hsl(var(--color-primary));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.lucent-capability-card:hover .lucent-capability-icon {
|
|
background: hsl(var(--color-primary));
|
|
color: white;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.lucent-capability-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
margin: 0 0 0.25rem 0;
|
|
}
|
|
|
|
.lucent-capability-subtitle {
|
|
font-size: 0.875rem;
|
|
opacity: 0.6;
|
|
margin: 0;
|
|
}
|
|
|
|
.lucent-capability-desc {
|
|
font-size: 0.9375rem;
|
|
line-height: 1.7;
|
|
opacity: 0.8;
|
|
margin: 0 0 1.25rem 0;
|
|
}
|
|
|
|
.lucent-capability-features {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.lucent-capability-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.375rem 0.75rem;
|
|
background: hsl(var(--color-background-secondary));
|
|
border: 1px solid hsl(var(--color-neutral) / 0.2);
|
|
border-radius: 999px;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.lucent-capability-tag:hover {
|
|
background: hsl(var(--color-primary) / 0.1);
|
|
border-color: hsl(var(--color-primary) / 0.3);
|
|
color: hsl(var(--color-primary));
|
|
}
|
|
|
|
.lucent-capability-tag svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Control Panel Preview */
|
|
.lucent-panel-preview {
|
|
background: var(--lucent-dark-base);
|
|
border-radius: var(--lucent-radius-xl);
|
|
overflow: hidden;
|
|
margin-top: 3rem;
|
|
border: 1px solid hsl(var(--color-neutral) / 0.2);
|
|
}
|
|
|
|
.lucent-panel-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 1rem 1.5rem;
|
|
background: var(--lucent-dark-secondary);
|
|
border-bottom: 1px solid hsl(var(--color-neutral) / 0.15);
|
|
}
|
|
|
|
.lucent-panel-dots {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.lucent-panel-dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.lucent-panel-dot:nth-child(1) { background: #ef4444; }
|
|
.lucent-panel-dot:nth-child(2) { background: #f59e0b; }
|
|
.lucent-panel-dot:nth-child(3) { background: #10b981; }
|
|
|
|
.lucent-panel-title {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.lucent-panel-content {
|
|
display: grid;
|
|
grid-template-columns: 200px 1fr;
|
|
min-height: 300px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.lucent-panel-content {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.lucent-panel-sidebar {
|
|
background: var(--lucent-dark-secondary);
|
|
padding: 1rem;
|
|
border-right: 1px solid hsl(var(--color-neutral) / 0.1);
|
|
}
|
|
|
|
.lucent-panel-nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem 1rem;
|
|
border-radius: var(--lucent-radius-md);
|
|
color: #94a3b8;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.lucent-panel-nav-item:hover,
|
|
.lucent-panel-nav-item.active {
|
|
background: hsl(var(--color-primary) / 0.1);
|
|
color: hsl(var(--color-primary));
|
|
}
|
|
|
|
.lucent-panel-nav-item.active {
|
|
background: hsl(var(--color-primary) / 0.15);
|
|
}
|
|
|
|
.lucent-panel-main {
|
|
padding: 1.5rem;
|
|
color: #e2e8f0;
|
|
}
|
|
|
|
.lucent-panel-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.lucent-panel-stats {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.lucent-panel-stat {
|
|
background: var(--lucent-dark-secondary);
|
|
border-radius: var(--lucent-radius-md);
|
|
padding: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.lucent-panel-stat-value {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: hsl(var(--color-primary));
|
|
}
|
|
|
|
.lucent-panel-stat-label {
|
|
font-size: 0.75rem;
|
|
opacity: 0.6;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.lucent-panel-chart {
|
|
background: var(--lucent-dark-secondary);
|
|
border-radius: var(--lucent-radius-md);
|
|
padding: 1rem;
|
|
height: 120px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 4px;
|
|
}
|
|
|
|
.lucent-panel-chart-bar {
|
|
flex: 1;
|
|
background: linear-gradient(to top, hsl(var(--color-primary)), hsl(var(--color-primary) / 0.5));
|
|
border-radius: 4px 4px 0 0;
|
|
animation: lucent-chart-grow 1s ease-out forwards;
|
|
transform-origin: bottom;
|
|
}
|
|
|
|
/* ============================================
|
|
CTA SECTION
|
|
============================================ */
|
|
|
|
.lucent-cta-section {
|
|
padding: clamp(3rem, 8vw, 5rem) 0;
|
|
}
|
|
|
|
.lucent-cta-container {
|
|
background: linear-gradient(145deg, var(--background-secondary, #1e293b) 0%, rgba(30, 41, 59, 0.5) 100%);
|
|
border-radius: var(--lucent-radius-2xl);
|
|
padding: clamp(2rem, 5vw, 4rem);
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lucent-cta-container::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, var(--lucent-primary), var(--lucent-secondary), var(--lucent-accent), var(--lucent-secondary), var(--lucent-primary));
|
|
background-size: 200% 100%;
|
|
animation: lucent-gradient-flow 8s linear infinite;
|
|
}
|
|
|
|
@keyframes lucent-gradient-flow {
|
|
0% { background-position: 0% 50%; }
|
|
100% { background-position: 200% 50%; }
|
|
}
|
|
|
|
.lucent-cta-title {
|
|
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
|
font-weight: 800;
|
|
margin: 0 0 1rem 0;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.lucent-cta-subtitle {
|
|
font-size: clamp(1rem, 2vw, 1.25rem);
|
|
opacity: 0.75;
|
|
margin: 0 auto 2rem auto;
|
|
max-width: 40rem;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.lucent-cta-buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* ============================================
|
|
SCROLL TO TOP BUTTON
|
|
============================================ */
|
|
|
|
.lucent-scroll-top {
|
|
position: fixed;
|
|
bottom: 2rem;
|
|
right: 2rem;
|
|
width: 56px;
|
|
height: 56px;
|
|
background: linear-gradient(135deg, var(--lucent-primary) 0%, var(--lucent-secondary) 100%);
|
|
color: white;
|
|
border-radius: var(--lucent-radius-lg);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
z-index: 1000;
|
|
box-shadow:
|
|
0 4px 15px rgba(59, 130, 246, 0.4),
|
|
0 0 0 0 rgba(59, 130, 246, 0.2);
|
|
border: none;
|
|
}
|
|
|
|
.lucent-scroll-top.visible {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.lucent-scroll-top:hover {
|
|
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);
|
|
}
|
|
|
|
/* ============================================
|
|
ANIMATIONS
|
|
============================================ */
|
|
|
|
.lucent-fade-in {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.lucent-fade-in.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.lucent-fade-in-delay-1 { transition-delay: 0.1s; }
|
|
.lucent-fade-in-delay-2 { transition-delay: 0.2s; }
|
|
.lucent-fade-in-delay-3 { transition-delay: 0.3s; }
|
|
.lucent-fade-in-delay-4 { transition-delay: 0.4s; }
|
|
.lucent-fade-in-delay-5 { transition-delay: 0.5s; }
|
|
|
|
/* ============================================
|
|
ENHANCED HOVER EFFECTS
|
|
============================================ */
|
|
|
|
.lucent-glow-effect {
|
|
position: relative;
|
|
}
|
|
|
|
.lucent-glow-effect::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -2px;
|
|
background: linear-gradient(135deg, var(--lucent-primary), var(--lucent-secondary), var(--lucent-accent));
|
|
border-radius: inherit;
|
|
z-index: -1;
|
|
opacity: 0;
|
|
transition: opacity 0.4s ease;
|
|
}
|
|
|
|
.lucent-glow-effect:hover::before {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Magnetic Button Effect */
|
|
.lucent-magnetic {
|
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Tilt Card Effect */
|
|
.lucent-tilt {
|
|
transform-style: preserve-3d;
|
|
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Ripple Effect */
|
|
.lucent-ripple {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lucent-ripple::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 100px;
|
|
background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
transform: scale(0);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.lucent-ripple.rippling::after {
|
|
animation: lucent-ripple-anim 0.6s ease-out;
|
|
}
|
|
|
|
@keyframes lucent-ripple-anim {
|
|
0% { transform: scale(0); opacity: 1; }
|
|
100% { transform: scale(4); opacity: 0; }
|
|
}
|
|
|
|
/* Typing Animation */
|
|
.lucent-typing {
|
|
overflow: hidden;
|
|
border-right: 3px solid var(--lucent-primary);
|
|
white-space: nowrap;
|
|
animation:
|
|
lucent-typing 3.5s steps(40, end),
|
|
lucent-blink-caret 0.75s step-end infinite;
|
|
}
|
|
|
|
@keyframes lucent-typing {
|
|
from { width: 0; }
|
|
to { width: 100%; }
|
|
}
|
|
|
|
@keyframes lucent-blink-caret {
|
|
from, to { border-color: transparent; }
|
|
50% { border-color: var(--lucent-primary); }
|
|
}
|
|
|
|
/* Gradient Text Animation */
|
|
.lucent-gradient-text-animated {
|
|
background: linear-gradient(270deg, var(--lucent-primary), var(--lucent-secondary), var(--lucent-accent), var(--lucent-secondary), var(--lucent-primary));
|
|
background-size: 400% 400%;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
animation: lucent-gradient-shift 8s ease infinite;
|
|
}
|
|
|
|
@keyframes lucent-gradient-shift {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
/* Floating Animation */
|
|
.lucent-float {
|
|
animation: lucent-float-anim 6s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes lucent-float-anim {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-15px); }
|
|
}
|
|
|
|
/* Pulse Glow Animation */
|
|
.lucent-pulse-glow {
|
|
animation: lucent-pulse-glow-anim 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes lucent-pulse-glow-anim {
|
|
0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); }
|
|
50% { box-shadow: 0 0 40px rgba(59, 130, 246, 0.6); }
|
|
}
|
|
|
|
/* Scale In Animation */
|
|
.lucent-scale-in {
|
|
animation: lucent-scale-in-anim 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
}
|
|
|
|
@keyframes lucent-scale-in-anim {
|
|
from { transform: scale(0.9); opacity: 0; }
|
|
to { transform: scale(1); opacity: 1; }
|
|
}
|
|
|
|
/* Shake Animation for Attention */
|
|
.lucent-shake {
|
|
animation: lucent-shake-anim 0.5s ease-in-out;
|
|
}
|
|
|
|
@keyframes lucent-shake-anim {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-5px); }
|
|
75% { transform: translateX(5px); }
|
|
}
|
|
|
|
/* Live Indicator */
|
|
.lucent-live-indicator {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.lucent-live-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
background: var(--lucent-success);
|
|
border-radius: 50%;
|
|
position: relative;
|
|
}
|
|
|
|
.lucent-live-dot::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: inherit;
|
|
border-radius: 50%;
|
|
animation: lucent-live-pulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes lucent-live-pulse {
|
|
0% { transform: scale(1); opacity: 1; }
|
|
100% { transform: scale(2.5); opacity: 0; }
|
|
}
|
|
|
|
/* Connection Line */
|
|
.lucent-connection-line {
|
|
position: relative;
|
|
height: 2px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lucent-connection-line::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -30%;
|
|
width: 30%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, var(--lucent-primary), transparent);
|
|
animation: lucent-connection-flow 2s linear infinite;
|
|
}
|
|
|
|
@keyframes lucent-connection-flow {
|
|
0% { left: -30%; }
|
|
100% { left: 100%; }
|
|
}
|
|
|
|
/* Spotlight Effect */
|
|
.lucent-spotlight {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lucent-spotlight::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(59, 130, 246, 0.1) 0%, transparent 50%);
|
|
pointer-events: none;
|
|
transition: opacity 0.3s ease;
|
|
opacity: 0;
|
|
}
|
|
|
|
.lucent-spotlight:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Border Gradient Animation */
|
|
.lucent-border-gradient {
|
|
position: relative;
|
|
background: var(--background, #0f172a);
|
|
}
|
|
|
|
.lucent-border-gradient::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
padding: 2px;
|
|
background: linear-gradient(135deg, var(--lucent-primary), var(--lucent-secondary), var(--lucent-accent));
|
|
-webkit-mask:
|
|
linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
mask:
|
|
linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
border-radius: inherit;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Activity Dots */
|
|
.lucent-activity-dots {
|
|
display: flex;
|
|
gap: 4px;
|
|
align-items: center;
|
|
}
|
|
|
|
.lucent-activity-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
background: var(--lucent-success);
|
|
border-radius: 50%;
|
|
animation: lucent-activity-blink 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.lucent-activity-dot:nth-child(1) { animation-delay: 0s; }
|
|
.lucent-activity-dot:nth-child(2) { animation-delay: 0.3s; }
|
|
.lucent-activity-dot:nth-child(3) { animation-delay: 0.6s; }
|
|
|
|
@keyframes lucent-activity-blink {
|
|
0%, 100% { opacity: 0.3; transform: scale(0.8); }
|
|
50% { opacity: 1; transform: scale(1); }
|
|
}
|
|
|
|
/* Tooltip */
|
|
[data-lucent-tooltip] {
|
|
position: relative;
|
|
cursor: help;
|
|
}
|
|
|
|
[data-lucent-tooltip]::after {
|
|
content: attr(data-lucent-tooltip);
|
|
position: absolute;
|
|
bottom: calc(100% + 8px);
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(5px);
|
|
padding: 0.5rem 0.75rem;
|
|
background: var(--lucent-dark-secondary);
|
|
color: #f8fafc;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
border-radius: var(--lucent-radius-sm);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.2s ease;
|
|
z-index: 1000;
|
|
}
|
|
|
|
[data-lucent-tooltip]:hover::after {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
|
|
/* ============================================
|
|
ANNOUNCEMENTS SECTION
|
|
============================================ */
|
|
|
|
.lucent-announcements-section {
|
|
padding: clamp(3rem, 8vw, 5rem) 0;
|
|
}
|
|
|
|
.lucent-announcements-card {
|
|
background: linear-gradient(145deg, var(--background-secondary, #1e293b) 0%, rgba(30, 41, 59, 0.5) 100%);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: var(--lucent-radius-2xl);
|
|
padding: clamp(1.5rem, 4vw, 2.5rem);
|
|
max-width: 56rem;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lucent-announcements-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, var(--lucent-warning), var(--lucent-primary), var(--lucent-accent));
|
|
}
|
|
|
|
.lucent-announcements-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.lucent-announcements-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: var(--lucent-radius-lg);
|
|
background: rgba(245, 158, 11, 0.15);
|
|
color: var(--lucent-warning);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.lucent-announcements-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
}
|
|
|
|
.lucent-announcement-item {
|
|
padding: 1rem 0;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.lucent-announcement-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.lucent-announcement-item:hover {
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
.lucent-announcement-item-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.lucent-announcement-item-title {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.lucent-announcement-item:hover .lucent-announcement-item-title {
|
|
color: var(--lucent-primary);
|
|
}
|
|
|
|
.lucent-announcement-item-date {
|
|
font-size: 0.75rem;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.lucent-announcement-item-excerpt {
|
|
font-size: 0.9375rem;
|
|
line-height: 1.6;
|
|
opacity: 0.75;
|
|
margin: 0;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lucent-announcement-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-top: 1.5rem;
|
|
padding: 0.75rem 1.5rem;
|
|
background: rgba(59, 130, 246, 0.1);
|
|
color: var(--lucent-primary);
|
|
border-radius: var(--lucent-radius-md);
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.lucent-announcement-link:hover {
|
|
background: var(--lucent-primary);
|
|
color: white;
|
|
transform: translateX(4px);
|
|
}
|
|
</style>
|
|
|
|
<div id="lucent-home" class="min-h-screen">
|
|
<!-- Homepage-specific custom HTML -->
|
|
@if(theme('custom_homepage_html'))
|
|
<div class="custom-homepage-content">
|
|
{!! theme('custom_homepage_html') !!}
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Hero Section -->
|
|
<header class="lucent-hero">
|
|
<!-- Grid Background -->
|
|
<div class="lucent-hero-grid"></div>
|
|
|
|
<!-- Animated Orbs -->
|
|
<div class="lucent-orb lucent-orb-1"></div>
|
|
<div class="lucent-orb lucent-orb-2"></div>
|
|
<div class="lucent-orb lucent-orb-3"></div>
|
|
|
|
<!-- Floating Particles -->
|
|
<div class="lucent-particles">
|
|
<div class="lucent-particle"></div>
|
|
<div class="lucent-particle"></div>
|
|
<div class="lucent-particle"></div>
|
|
<div class="lucent-particle"></div>
|
|
<div class="lucent-particle"></div>
|
|
<div class="lucent-particle"></div>
|
|
<div class="lucent-particle"></div>
|
|
<div class="lucent-particle"></div>
|
|
</div>
|
|
|
|
<div class="container mx-auto px-4 relative z-10">
|
|
<div class="lucent-hero-content max-w-5xl mx-auto">
|
|
<!-- Hero Badge -->
|
|
<div class="lucent-hero-badge">
|
|
<span class="lucent-live-indicator">
|
|
<span class="lucent-live-dot"></span>
|
|
</span>
|
|
<x-ri-server-line class="size-4" />
|
|
<span>{{ theme('homepage_badge', 'KVM Hypervisor Technology') }}</span>
|
|
</div>
|
|
|
|
<!-- Hero Title -->
|
|
<h1 class="lucent-hero-title">
|
|
{{ theme('homepage_hero_title1', 'Enterprise') }}
|
|
<span class="lucent-hero-title-highlight">
|
|
{{ theme('homepage_hero_title2', 'VPS Hosting') }}
|
|
</span>
|
|
</h1>
|
|
|
|
<!-- Hero Description -->
|
|
<p class="lucent-hero-desc">
|
|
{{ theme('homepage_hero_desc', 'Deploy high-performance Virtual Private Servers powered by KVM hypervisor technology. Full root access, dedicated resources, hardware-level firewall, real-time monitoring, and complete control over your infrastructure — all from a modern web-based control panel.') }}
|
|
</p>
|
|
|
|
<!-- CTA Buttons -->
|
|
<div class="lucent-hero-cta">
|
|
<a href="#services" class="lucent-btn-primary">
|
|
<x-ri-server-line class="size-5" />
|
|
<span>{{ theme('hero_cta_primary_text', 'Deploy Now') }}</span>
|
|
<x-ri-arrow-right-line class="size-5" />
|
|
</a>
|
|
<a href="#features" class="lucent-btn-secondary">
|
|
<x-ri-information-line class="size-5" />
|
|
<span>{{ theme('hero_cta_secondary_text', 'Learn More') }}</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Hero Highlights -->
|
|
<div class="lucent-hero-highlights">
|
|
<div class="lucent-highlight-item" data-lucent-tooltip="True hardware virtualization">
|
|
<span class="lucent-highlight-icon" style="background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1)); border: 1px solid rgba(16, 185, 129, 0.3);">
|
|
<x-ri-server-line class="size-[18px]" style="color: #10b981;" />
|
|
</span>
|
|
<span class="lucent-highlight-text">KVM Virtualization</span>
|
|
</div>
|
|
<div class="lucent-highlight-item" data-lucent-tooltip="Public IPv4 & IPv6 addresses">
|
|
<span class="lucent-highlight-icon" style="background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1)); border: 1px solid rgba(59, 130, 246, 0.3);">
|
|
<x-ri-global-line class="size-[18px]" style="color: #3b82f6;" />
|
|
</span>
|
|
<span class="lucent-highlight-text">IPv4 & IPv6</span>
|
|
</div>
|
|
<div class="lucent-highlight-item" data-lucent-tooltip="VNC/noVNC console access">
|
|
<span class="lucent-highlight-icon" style="background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.1)); border: 1px solid rgba(245, 158, 11, 0.3);">
|
|
<x-ri-terminal-box-line class="size-[18px]" style="color: #f59e0b;" />
|
|
</span>
|
|
<span class="lucent-highlight-text">VNC Console</span>
|
|
</div>
|
|
<div class="lucent-highlight-item" data-lucent-tooltip="Hardware-level security">
|
|
<span class="lucent-highlight-icon" style="background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(6, 182, 212, 0.1)); border: 1px solid rgba(6, 182, 212, 0.3);">
|
|
<x-ri-shield-check-line class="size-[18px]" style="color: #06b6d4;" />
|
|
</span>
|
|
<span class="lucent-highlight-text">Firewall Control</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Stats Section -->
|
|
<section class="lucent-stats-section">
|
|
<div class="container mx-auto px-4">
|
|
<div class="lucent-stats-grid">
|
|
<div class="lucent-stat-card lucent-fade-in" data-color="success">
|
|
<div class="lucent-stat-icon">
|
|
<x-ri-timer-line class="size-8" />
|
|
</div>
|
|
<div class="lucent-stat-value">99.9%</div>
|
|
<div class="lucent-stat-title">{{ theme('stats_uptime_title', 'Uptime SLA') }}</div>
|
|
<div class="lucent-stat-subtitle">{{ theme('stats_uptime_subtitle', 'Enterprise-grade reliability') }}</div>
|
|
</div>
|
|
|
|
<div class="lucent-stat-card lucent-fade-in lucent-fade-in-delay-1" data-color="primary">
|
|
<div class="lucent-stat-icon">
|
|
<x-ri-headphone-line class="size-8" />
|
|
</div>
|
|
<div class="lucent-stat-value">24/7</div>
|
|
<div class="lucent-stat-title">{{ theme('stats_support_title', 'Technical Support') }}</div>
|
|
<div class="lucent-stat-subtitle">{{ theme('stats_support_subtitle', 'Expert assistance available') }}</div>
|
|
</div>
|
|
|
|
<div class="lucent-stat-card lucent-fade-in lucent-fade-in-delay-2" data-color="purple">
|
|
<div class="lucent-stat-icon">
|
|
<x-ri-user-3-line class="size-8" />
|
|
</div>
|
|
<div class="lucent-stat-value">{{ number_format(\App\Models\User::count()+1439) }}+</div>
|
|
<div class="lucent-stat-title">{{ theme('stats_users_title', 'Active Users') }}</div>
|
|
<div class="lucent-stat-subtitle">{{ theme('stats_users_subtitle', 'Developers & businesses') }}</div>
|
|
</div>
|
|
|
|
<div class="lucent-stat-card lucent-fade-in lucent-fade-in-delay-3" data-color="orange">
|
|
<div class="lucent-stat-icon">
|
|
<x-ri-server-line class="size-8" />
|
|
</div>
|
|
<div class="lucent-stat-value">{{ number_format(\App\Models\Service::count()+2560) }}+</div>
|
|
<div class="lucent-stat-title">{{ theme('stats_servers_title', 'VPS Instances') }}</div>
|
|
<div class="lucent-stat-subtitle">{{ theme('stats_servers_subtitle', 'Powering production workloads') }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Node Status Section - KVM Infrastructure -->
|
|
<section class="lucent-nodes-section">
|
|
<div class="container mx-auto px-4">
|
|
<div class="lucent-section-header">
|
|
<h2 class="lucent-section-title text-color-base">
|
|
{{ theme('nodes_title', 'Hypervisor Status') }}
|
|
</h2>
|
|
<p class="lucent-section-subtitle text-color-muted">
|
|
{{ theme('nodes_subtitle', 'Live status of our KVM compute nodes') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="lucent-nodes-grid">
|
|
<!-- Node 1: US East -->
|
|
<div class="lucent-node-card lucent-fade-in lucent-spotlight">
|
|
<div class="lucent-node-header">
|
|
<h3 class="lucent-node-title text-color-base">
|
|
<x-ri-server-line class="size-5 inline mr-2 opacity-70" />
|
|
US-East-01
|
|
<span class="lucent-activity-dots ml-2">
|
|
<span class="lucent-activity-dot"></span>
|
|
<span class="lucent-activity-dot"></span>
|
|
<span class="lucent-activity-dot"></span>
|
|
</span>
|
|
</h3>
|
|
<span class="lucent-node-status">
|
|
<span class="lucent-node-status-dot"></span>
|
|
Online
|
|
</span>
|
|
</div>
|
|
<div class="lucent-node-stats">
|
|
<div class="lucent-node-stat">
|
|
<div class="lucent-node-stat-label text-color-muted">
|
|
<span>CPU Usage</span>
|
|
<span class="lucent-node-stat-value text-color-base">42%</span>
|
|
</div>
|
|
<div class="lucent-progress-bar">
|
|
<div class="lucent-progress-fill lucent-progress-fill-success" style="width: 42%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="lucent-node-stat">
|
|
<div class="lucent-node-stat-label text-color-muted">
|
|
<span>Memory</span>
|
|
<span class="lucent-node-stat-value text-color-base">67%</span>
|
|
</div>
|
|
<div class="lucent-progress-bar">
|
|
<div class="lucent-progress-fill lucent-progress-fill-primary" style="width: 67%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="lucent-node-stat">
|
|
<div class="lucent-node-stat-label text-color-muted">
|
|
<span>Network I/O</span>
|
|
</div>
|
|
<div class="lucent-mini-chart">
|
|
<div class="lucent-mini-chart-bar" style="height: 45%;"></div>
|
|
<div class="lucent-mini-chart-bar" style="height: 60%;"></div>
|
|
<div class="lucent-mini-chart-bar" style="height: 35%;"></div>
|
|
<div class="lucent-mini-chart-bar" style="height: 80%;"></div>
|
|
<div class="lucent-mini-chart-bar" style="height: 55%;"></div>
|
|
<div class="lucent-mini-chart-bar" style="height: 70%;"></div>
|
|
<div class="lucent-mini-chart-bar" style="height: 40%;"></div>
|
|
<div class="lucent-mini-chart-bar" style="height: 65%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Node 2: EU West -->
|
|
<div class="lucent-node-card lucent-fade-in lucent-fade-in-delay-1 lucent-spotlight">
|
|
<div class="lucent-node-header">
|
|
<h3 class="lucent-node-title text-color-base">
|
|
<x-ri-server-line class="size-5 inline mr-2 opacity-70" />
|
|
EU-West-01
|
|
<span class="lucent-activity-dots ml-2">
|
|
<span class="lucent-activity-dot"></span>
|
|
<span class="lucent-activity-dot"></span>
|
|
<span class="lucent-activity-dot"></span>
|
|
</span>
|
|
</h3>
|
|
<span class="lucent-node-status">
|
|
<span class="lucent-node-status-dot"></span>
|
|
Online
|
|
</span>
|
|
</div>
|
|
<div class="lucent-node-stats">
|
|
<div class="lucent-node-stat">
|
|
<div class="lucent-node-stat-label text-color-muted">
|
|
<span>CPU Usage</span>
|
|
<span class="lucent-node-stat-value text-color-base">58%</span>
|
|
</div>
|
|
<div class="lucent-progress-bar">
|
|
<div class="lucent-progress-fill lucent-progress-fill-primary" style="width: 58%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="lucent-node-stat">
|
|
<div class="lucent-node-stat-label text-color-muted">
|
|
<span>Memory</span>
|
|
<span class="lucent-node-stat-value text-color-base">73%</span>
|
|
</div>
|
|
<div class="lucent-progress-bar">
|
|
<div class="lucent-progress-fill lucent-progress-fill-warning" style="width: 73%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="lucent-node-stat">
|
|
<div class="lucent-node-stat-label text-color-muted">
|
|
<span>Network I/O</span>
|
|
</div>
|
|
<div class="lucent-mini-chart">
|
|
<div class="lucent-mini-chart-bar" style="height: 70%;"></div>
|
|
<div class="lucent-mini-chart-bar" style="height: 55%;"></div>
|
|
<div class="lucent-mini-chart-bar" style="height: 85%;"></div>
|
|
<div class="lucent-mini-chart-bar" style="height: 45%;"></div>
|
|
<div class="lucent-mini-chart-bar" style="height: 60%;"></div>
|
|
<div class="lucent-mini-chart-bar" style="height: 75%;"></div>
|
|
<div class="lucent-mini-chart-bar" style="height: 50%;"></div>
|
|
<div class="lucent-mini-chart-bar" style="height: 80%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Node 3: APAC -->
|
|
<div class="lucent-node-card lucent-fade-in lucent-fade-in-delay-2 lucent-spotlight">
|
|
<div class="lucent-node-header">
|
|
<h3 class="lucent-node-title text-color-base">
|
|
<x-ri-server-line class="size-5 inline mr-2 opacity-70" />
|
|
APAC-SG-01
|
|
<span class="lucent-activity-dots ml-2">
|
|
<span class="lucent-activity-dot"></span>
|
|
<span class="lucent-activity-dot"></span>
|
|
<span class="lucent-activity-dot"></span>
|
|
</span>
|
|
</h3>
|
|
<span class="lucent-node-status">
|
|
<span class="lucent-node-status-dot"></span>
|
|
Online
|
|
</span>
|
|
</div>
|
|
<div class="lucent-node-stats">
|
|
<div class="lucent-node-stat">
|
|
<div class="lucent-node-stat-label text-color-muted">
|
|
<span>CPU Usage</span>
|
|
<span class="lucent-node-stat-value text-color-base">35%</span>
|
|
</div>
|
|
<div class="lucent-progress-bar">
|
|
<div class="lucent-progress-fill lucent-progress-fill-success" style="width: 35%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="lucent-node-stat">
|
|
<div class="lucent-node-stat-label text-color-muted">
|
|
<span>Memory</span>
|
|
<span class="lucent-node-stat-value text-color-base">52%</span>
|
|
</div>
|
|
<div class="lucent-progress-bar">
|
|
<div class="lucent-progress-fill lucent-progress-fill-success" style="width: 52%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="lucent-node-stat">
|
|
<div class="lucent-node-stat-label text-color-muted">
|
|
<span>Network I/O</span>
|
|
</div>
|
|
<div class="lucent-mini-chart">
|
|
<div class="lucent-mini-chart-bar" style="height: 30%;"></div>
|
|
<div class="lucent-mini-chart-bar" style="height: 45%;"></div>
|
|
<div class="lucent-mini-chart-bar" style="height: 55%;"></div>
|
|
<div class="lucent-mini-chart-bar" style="height: 40%;"></div>
|
|
<div class="lucent-mini-chart-bar" style="height: 65%;"></div>
|
|
<div class="lucent-mini-chart-bar" style="height: 50%;"></div>
|
|
<div class="lucent-mini-chart-bar" style="height: 35%;"></div>
|
|
<div class="lucent-mini-chart-bar" style="height: 45%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Quick Actions Section -->
|
|
<section class="lucent-actions-section">
|
|
<div class="container mx-auto px-4">
|
|
<div class="lucent-section-header">
|
|
<h2 class="lucent-section-title text-color-base">
|
|
{{ theme('quick_actions_title', 'Get Started') }}
|
|
</h2>
|
|
<p class="lucent-section-subtitle text-color-muted">
|
|
{{ theme('quick_actions_subtitle', 'Quick access to essential platform features') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="lucent-actions-container lucent-fade-in">
|
|
<div class="lucent-actions-header text-color-base">
|
|
<div class="lucent-actions-header-icon">
|
|
<x-ri-apps-line class="size-6" />
|
|
</div>
|
|
{{ theme('quick_actions_header', 'Quick Actions') }}
|
|
</div>
|
|
|
|
<div class="lucent-actions-grid">
|
|
<!-- Deploy VPS -->
|
|
<a href="{{ route('products.index') }}" class="lucent-action-card" data-color="primary">
|
|
<div class="lucent-action-header">
|
|
<div class="lucent-action-icon">
|
|
<x-ri-add-circle-fill class="size-6" />
|
|
</div>
|
|
<div>
|
|
<h3 class="lucent-action-title">{{ theme('buy_server_title', 'Deploy VPS') }}</h3>
|
|
<p class="lucent-action-subtitle">{{ theme('buy_server_subtitle', 'Virtual Private Servers') }}</p>
|
|
</div>
|
|
</div>
|
|
<p class="lucent-action-desc">{{ theme('buy_server_description', 'Provision a new KVM virtual private server') }}</p>
|
|
</a>
|
|
|
|
<!-- Support -->
|
|
<a href="{{ theme('help_link', 'https://help.yourserver.com') }}" target="_blank" class="lucent-action-card" data-color="purple">
|
|
<div class="lucent-action-header">
|
|
<div class="lucent-action-icon">
|
|
<x-ri-customer-service-2-fill class="size-6" />
|
|
</div>
|
|
<div>
|
|
<h3 class="lucent-action-title">{{ theme('help_title', 'Support') }}</h3>
|
|
<p class="lucent-action-subtitle">{{ theme('help_subtitle', '24/7 Available') }}</p>
|
|
</div>
|
|
</div>
|
|
<p class="lucent-action-desc">Technical support and community assistance</p>
|
|
</a>
|
|
|
|
<!-- Login/Dashboard -->
|
|
@guest
|
|
<a href="{{ route('login') }}" class="lucent-action-card" data-color="blue">
|
|
<div class="lucent-action-header">
|
|
<div class="lucent-action-icon">
|
|
<x-ri-login-box-fill class="size-6" />
|
|
</div>
|
|
<div>
|
|
<h3 class="lucent-action-title">{{ theme('login_title', 'Sign In') }}</h3>
|
|
<p class="lucent-action-subtitle">{{ theme('login_subtitle', 'Client Portal') }}</p>
|
|
</div>
|
|
</div>
|
|
<p class="lucent-action-desc">{{ theme('login_description', 'Access your control panel and services') }}</p>
|
|
</a>
|
|
@else
|
|
<a href="{{ route('dashboard') }}" class="lucent-action-card" data-color="blue">
|
|
<div class="lucent-action-header">
|
|
<div class="lucent-action-icon">
|
|
<x-ri-dashboard-fill class="size-6" />
|
|
</div>
|
|
<div>
|
|
<h3 class="lucent-action-title">{{ theme('dashboard_title', 'Dashboard') }}</h3>
|
|
<p class="lucent-action-subtitle">{{ theme('dashboard_subtitle', 'Control Panel') }}</p>
|
|
</div>
|
|
</div>
|
|
<p class="lucent-action-desc">{{ theme('dashboard_description', 'Manage your VPS instances and services') }}</p>
|
|
</a>
|
|
@endguest
|
|
|
|
<!-- Documentation -->
|
|
<a href="{{ theme('docs_link', 'https://docs.yourserver.com') }}" target="_blank" class="lucent-action-card" data-color="emerald">
|
|
<div class="lucent-action-header">
|
|
<div class="lucent-action-icon">
|
|
<x-ri-file-text-fill class="size-6" />
|
|
</div>
|
|
<div>
|
|
<h3 class="lucent-action-title">{{ theme('docs_title', 'Documentation') }}</h3>
|
|
<p class="lucent-action-subtitle">{{ theme('docs_subtitle', 'Knowledge Base') }}</p>
|
|
</div>
|
|
</div>
|
|
<p class="lucent-action-desc">{{ theme('docs_description', 'API reference, guides, and tutorials') }}</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services/Categories Section -->
|
|
<section id="services" class="lucent-services-section">
|
|
<div class="container mx-auto px-4">
|
|
<div class="lucent-section-header">
|
|
<h2 class="lucent-section-title">
|
|
{{ theme('services_title', 'Our Services') }}
|
|
</h2>
|
|
<p class="lucent-section-subtitle">
|
|
{{ theme('services_subtitle', 'Choose from our comprehensive range of server hosting solutions') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="lucent-services-grid">
|
|
@foreach ($categories as $category)
|
|
<div class="lucent-service-card lucent-fade-in">
|
|
<h3 class="lucent-service-title">{{ $category->name }}</h3>
|
|
@if(theme('show_category_description', true))
|
|
<div class="lucent-service-desc">
|
|
{!! strip_tags($category->description) !!}
|
|
</div>
|
|
@endif
|
|
<a href="{{ route('category.show', ['category' => $category->slug]) }}" wire:navigate class="lucent-service-link">
|
|
<span>{{ __('general.view') }}</span>
|
|
<x-ri-arrow-right-line class="size-4" />
|
|
</a>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section id="features" class="lucent-features-section">
|
|
<div class="container mx-auto px-4">
|
|
<div class="lucent-section-header">
|
|
<h2 class="lucent-section-title text-color-base">
|
|
{{ theme('features_title', 'Why Choose Our Platform?') }}
|
|
</h2>
|
|
<p class="lucent-section-subtitle text-color-muted">
|
|
{{ theme('features_subtitle', 'Enterprise-grade infrastructure with KVM virtualization technology delivering unmatched performance and control') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="lucent-features-grid">
|
|
<!-- True Virtualization -->
|
|
<div class="lucent-feature-card lucent-fade-in" data-color="primary">
|
|
<div class="lucent-feature-header">
|
|
<div class="lucent-feature-icon">
|
|
<x-ri-server-line class="size-6" />
|
|
</div>
|
|
<h3 class="lucent-feature-title text-color-base">{{ theme('feature_1_title', 'KVM-Based VPS') }}</h3>
|
|
</div>
|
|
<p class="lucent-feature-desc text-color-muted">{{ theme('feature_1_desc', 'True hardware virtualization with dedicated CPU cores, guaranteed RAM, and fully isolated resources. Full root access with VNC console for complete control over your Virtual Private Server.') }}</p>
|
|
</div>
|
|
|
|
<!-- Network Control -->
|
|
<div class="lucent-feature-card lucent-fade-in lucent-fade-in-delay-1" data-color="secondary">
|
|
<div class="lucent-feature-header">
|
|
<div class="lucent-feature-icon">
|
|
<x-ri-global-line class="size-6" />
|
|
</div>
|
|
<h3 class="lucent-feature-title text-color-base">{{ theme('feature_2_title', 'Advanced Networking') }}</h3>
|
|
</div>
|
|
<p class="lucent-feature-desc text-color-muted">{{ theme('feature_2_desc', 'Dedicated public IPv4 and IPv6 addresses with each VPS. Configure reverse DNS for email deliverability, monitor real-time bandwidth, and access detailed traffic statistics from your control panel.') }}</p>
|
|
</div>
|
|
|
|
<!-- Firewall -->
|
|
<div class="lucent-feature-card lucent-fade-in lucent-fade-in-delay-2" data-color="success">
|
|
<div class="lucent-feature-header">
|
|
<div class="lucent-feature-icon">
|
|
<x-ri-shield-check-line class="size-6" />
|
|
</div>
|
|
<h3 class="lucent-feature-title text-color-base">{{ theme('feature_3_title', 'Hypervisor-Level Firewall') }}</h3>
|
|
</div>
|
|
<p class="lucent-feature-desc text-color-muted">{{ theme('feature_3_desc', 'Configure inbound/outbound firewall rules at the hypervisor level with integrated DDoS protection. Define custom security groups and IP whitelists—all without impacting your VPS performance.') }}</p>
|
|
</div>
|
|
|
|
<!-- Performance -->
|
|
<div class="lucent-feature-card lucent-fade-in lucent-fade-in-delay-3" data-color="warning">
|
|
<div class="lucent-feature-header">
|
|
<div class="lucent-feature-icon">
|
|
<x-ri-cpu-line class="size-6" />
|
|
</div>
|
|
<h3 class="lucent-feature-title text-color-base">{{ theme('feature_4_title', 'NVMe & High-Frequency CPUs') }}</h3>
|
|
</div>
|
|
<p class="lucent-feature-desc text-color-muted">{{ theme('feature_4_desc', 'Enterprise NVMe SSD storage delivering up to 7000MB/s read speeds. AMD EPYC and Intel Xeon processors running at 3.5GHz+ with 10Gbps network connectivity for maximum throughput.') }}</p>
|
|
</div>
|
|
|
|
<!-- Backups -->
|
|
<div class="lucent-feature-card lucent-fade-in lucent-fade-in-delay-4" data-color="info">
|
|
<div class="lucent-feature-header">
|
|
<div class="lucent-feature-icon">
|
|
<x-ri-history-line class="size-6" />
|
|
</div>
|
|
<h3 class="lucent-feature-title text-color-base">{{ theme('feature_5_title', 'Snapshots & Backups') }}</h3>
|
|
</div>
|
|
<p class="lucent-feature-desc text-color-muted">{{ theme('feature_5_desc', 'Create instant VPS snapshots with one click. Schedule automated daily or weekly backups, restore to any point in time, and clone your entire environment for testing or scaling.') }}</p>
|
|
</div>
|
|
|
|
<!-- Monitoring -->
|
|
<div class="lucent-feature-card lucent-fade-in lucent-fade-in-delay-5" data-color="danger">
|
|
<div class="lucent-feature-header">
|
|
<div class="lucent-feature-icon">
|
|
<x-ri-line-chart-line class="size-6" />
|
|
</div>
|
|
<h3 class="lucent-feature-title text-color-base">{{ theme('feature_6_title', 'Real-Time Monitoring') }}</h3>
|
|
</div>
|
|
<p class="lucent-feature-desc text-color-muted">{{ theme('feature_6_desc', 'Live CPU, memory, disk I/O, and network graphs with historical data retention. Monitor resource usage trends, identify bottlenecks early, and optimize your VPS performance from anywhere.') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Community Section -->
|
|
<section class="lucent-community-section">
|
|
<div class="container mx-auto px-4">
|
|
<div class="lucent-community-content">
|
|
<div class="lucent-community-text">
|
|
<h2>
|
|
<span>Developer-Friendly</span><br>
|
|
Infrastructure
|
|
</h2>
|
|
<p>
|
|
Our platform is designed with developers in mind. Whether you're a student learning cloud computing, a startup scaling your first product, or an enterprise running mission-critical workloads, our KVM-based VPS infrastructure provides the flexibility, performance, and control you need.
|
|
</p>
|
|
<div class="lucent-community-features">
|
|
<div class="lucent-community-feature">
|
|
<span class="lucent-community-check">
|
|
<x-ri-check-line class="size-4" />
|
|
</span>
|
|
<span>Full root access with complete control</span>
|
|
</div>
|
|
<div class="lucent-community-feature">
|
|
<span class="lucent-community-check">
|
|
<x-ri-check-line class="size-4" />
|
|
</span>
|
|
<span>RESTful API for automation</span>
|
|
</div>
|
|
<div class="lucent-community-feature">
|
|
<span class="lucent-community-check">
|
|
<x-ri-check-line class="size-4" />
|
|
</span>
|
|
<span>Technical documentation & guides</span>
|
|
</div>
|
|
<div class="lucent-community-feature">
|
|
<span class="lucent-community-check">
|
|
<x-ri-check-line class="size-4" />
|
|
</span>
|
|
<span>Community support & knowledge base</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="lucent-community-visual">
|
|
<div class="lucent-community-card-stack">
|
|
<div class="lucent-community-card">
|
|
<div class="lucent-community-card-header">
|
|
<div class="lucent-community-card-avatar">JD</div>
|
|
<div>
|
|
<div class="lucent-community-card-name text-color-base">James Davidson</div>
|
|
<div class="lucent-community-card-role text-color-muted">DevOps Engineer</div>
|
|
</div>
|
|
</div>
|
|
<p class="lucent-community-card-text text-color-muted">"The control panel gives me everything I need to manage our VPS infrastructure. Browser-based VNC console access has been a lifesaver during emergencies."</p>
|
|
</div>
|
|
<div class="lucent-community-card">
|
|
<div class="lucent-community-card-header">
|
|
<div class="lucent-community-card-avatar" style="background: linear-gradient(135deg, #10b981, #059669);">SK</div>
|
|
<div>
|
|
<div class="lucent-community-card-name text-color-base">Sarah Kim</div>
|
|
<div class="lucent-community-card-role text-color-muted">Startup Founder</div>
|
|
</div>
|
|
</div>
|
|
<p class="lucent-community-card-text text-color-muted">"Scaled from a single VPS to a full production cluster. The snapshot and clone features saved us countless hours during our infrastructure migration."</p>
|
|
</div>
|
|
<div class="lucent-community-card">
|
|
<div class="lucent-community-card-header">
|
|
<div class="lucent-community-card-avatar" style="background: linear-gradient(135deg, #f59e0b, #d97706);">MP</div>
|
|
<div>
|
|
<div class="lucent-community-card-name text-color-base">Michael Patel</div>
|
|
<div class="lucent-community-card-role text-color-muted">CS Student</div>
|
|
</div>
|
|
</div>
|
|
<p class="lucent-community-card-text text-color-muted">"Started learning Linux and server administration here. The affordable VPS plans made it possible to experiment and build real projects without breaking the bank."</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Platform Capabilities - KVM Hypervisor Features -->
|
|
<section class="lucent-capabilities-section">
|
|
<div class="container mx-auto px-4">
|
|
<div class="lucent-section-header">
|
|
<h2 class="lucent-section-title text-color-base">
|
|
{{ theme('capabilities_title', 'Enterprise-Grade Control Panel') }}
|
|
</h2>
|
|
<p class="lucent-section-subtitle text-color-muted">
|
|
{{ theme('capabilities_subtitle', 'Full virtualization control powered by KVM Hypervisor technology') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="lucent-capabilities-intro lucent-fade-in">
|
|
<p class="text-color-muted">
|
|
Our platform leverages industry-standard KVM hypervisor technology to deliver
|
|
true hardware virtualization. Each Virtual Private Server operates with dedicated resources,
|
|
ensuring consistent performance, complete tenant isolation, and enterprise-grade reliability.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="lucent-capabilities-grid">
|
|
<!-- Network Management -->
|
|
<div class="lucent-capability-card lucent-fade-in">
|
|
<div class="lucent-capability-header">
|
|
<div class="lucent-capability-icon">
|
|
<x-ri-global-line class="size-6" />
|
|
</div>
|
|
<div>
|
|
<h3 class="lucent-capability-title text-color-base">Network Configuration</h3>
|
|
<p class="lucent-capability-subtitle">Full IPv4 & IPv6 Management</p>
|
|
</div>
|
|
</div>
|
|
<p class="lucent-capability-desc text-color-muted">
|
|
Configure public IPv4 and IPv6 addresses directly from your control panel. Set up custom
|
|
DNS records, manage reverse DNS (rDNS) for email deliverability, and monitor real-time
|
|
network statistics including bandwidth usage, traffic patterns, and throughput metrics.
|
|
</p>
|
|
<div class="lucent-capability-features">
|
|
<span class="lucent-capability-tag text-color-muted">
|
|
<x-ri-check-line class="size-3" /> Public IPv4
|
|
</span>
|
|
<span class="lucent-capability-tag text-color-muted">
|
|
<x-ri-check-line class="size-3" /> IPv6 Subnet
|
|
</span>
|
|
<span class="lucent-capability-tag text-color-muted">
|
|
<x-ri-check-line class="size-3" /> rDNS
|
|
</span>
|
|
<span class="lucent-capability-tag text-color-muted">
|
|
<x-ri-check-line class="size-3" /> Traffic Stats
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Firewall Control -->
|
|
<div class="lucent-capability-card lucent-fade-in lucent-fade-in-delay-1">
|
|
<div class="lucent-capability-header">
|
|
<div class="lucent-capability-icon">
|
|
<x-ri-shield-check-line class="size-6" />
|
|
</div>
|
|
<div>
|
|
<h3 class="lucent-capability-title text-color-base">Firewall Rules</h3>
|
|
<p class="lucent-capability-subtitle">Hardware-Level Protection</p>
|
|
</div>
|
|
</div>
|
|
<p class="lucent-capability-desc text-color-muted">
|
|
Configure inbound and outbound firewall rules at the hypervisor level. Create custom security
|
|
groups, define port ranges, and manage IP whitelists. Rules are applied at the network stack
|
|
before reaching your VPS, providing hardware-level DDoS mitigation and maximum protection.
|
|
</p>
|
|
<div class="lucent-capability-features">
|
|
<span class="lucent-capability-tag text-color-muted">
|
|
<x-ri-check-line class="size-3" /> Inbound Rules
|
|
</span>
|
|
<span class="lucent-capability-tag text-color-muted">
|
|
<x-ri-check-line class="size-3" /> Outbound Rules
|
|
</span>
|
|
<span class="lucent-capability-tag text-color-muted">
|
|
<x-ri-check-line class="size-3" /> Port Ranges
|
|
</span>
|
|
<span class="lucent-capability-tag text-color-muted">
|
|
<x-ri-check-line class="size-3" /> IP Whitelists
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Resource Monitoring -->
|
|
<div class="lucent-capability-card lucent-fade-in lucent-fade-in-delay-2">
|
|
<div class="lucent-capability-header">
|
|
<div class="lucent-capability-icon">
|
|
<x-ri-line-chart-line class="size-6" />
|
|
</div>
|
|
<div>
|
|
<h3 class="lucent-capability-title text-color-base">Real-Time Monitoring</h3>
|
|
<p class="lucent-capability-subtitle">Live Resource Graphs</p>
|
|
</div>
|
|
</div>
|
|
<p class="lucent-capability-desc text-color-muted">
|
|
Monitor CPU, memory, disk I/O, and network throughput in real-time with detailed graphs.
|
|
Track historical usage patterns over days or weeks, configure resource alerts, and proactively
|
|
identify performance bottlenecks before they impact your applications.
|
|
</p>
|
|
<div class="lucent-capability-features">
|
|
<span class="lucent-capability-tag text-color-muted">
|
|
<x-ri-check-line class="size-3" /> CPU Metrics
|
|
</span>
|
|
<span class="lucent-capability-tag text-color-muted">
|
|
<x-ri-check-line class="size-3" /> Memory Usage
|
|
</span>
|
|
<span class="lucent-capability-tag text-color-muted">
|
|
<x-ri-check-line class="size-3" /> Disk I/O
|
|
</span>
|
|
<span class="lucent-capability-tag text-color-muted">
|
|
<x-ri-check-line class="size-3" /> Network Stats
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VPS Controls -->
|
|
<div class="lucent-capability-card lucent-fade-in lucent-fade-in-delay-3">
|
|
<div class="lucent-capability-header">
|
|
<div class="lucent-capability-icon">
|
|
<x-ri-server-line class="size-6" />
|
|
</div>
|
|
<div>
|
|
<h3 class="lucent-capability-title text-color-base">VPS Power Controls</h3>
|
|
<p class="lucent-capability-subtitle">Full Lifecycle Management</p>
|
|
</div>
|
|
</div>
|
|
<p class="lucent-capability-desc text-color-muted">
|
|
Complete control over your VPS lifecycle. Start, stop, restart, and graceful shutdown
|
|
operations are available instantly. Access the console directly via browser-based VNC/noVNC
|
|
for troubleshooting—even when SSH is unavailable or misconfigured.
|
|
</p>
|
|
<div class="lucent-capability-features">
|
|
<span class="lucent-capability-tag text-color-muted">
|
|
<x-ri-check-line class="size-3" /> Start/Stop
|
|
</span>
|
|
<span class="lucent-capability-tag text-color-muted">
|
|
<x-ri-check-line class="size-3" /> VNC Console
|
|
</span>
|
|
<span class="lucent-capability-tag text-color-muted">
|
|
<x-ri-check-line class="size-3" /> Power Cycle
|
|
</span>
|
|
<span class="lucent-capability-tag text-color-muted">
|
|
<x-ri-check-line class="size-3" /> Reset
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Backup & Snapshots -->
|
|
<div class="lucent-capability-card lucent-fade-in lucent-fade-in-delay-4">
|
|
<div class="lucent-capability-header">
|
|
<div class="lucent-capability-icon">
|
|
<x-ri-history-line class="size-6" />
|
|
</div>
|
|
<div>
|
|
<h3 class="lucent-capability-title text-color-base">Backups & Snapshots</h3>
|
|
<p class="lucent-capability-subtitle">Point-in-Time Recovery</p>
|
|
</div>
|
|
</div>
|
|
<p class="lucent-capability-desc text-color-muted">
|
|
Create instant snapshots of your entire VPS state including disk and memory. Schedule
|
|
automated daily or weekly backups, restore to any previous point in time with one click,
|
|
and clone your VPS for testing or horizontal scaling—all without downtime.
|
|
</p>
|
|
<div class="lucent-capability-features">
|
|
<span class="lucent-capability-tag text-color-muted">
|
|
<x-ri-check-line class="size-3" /> Snapshots
|
|
</span>
|
|
<span class="lucent-capability-tag text-color-muted">
|
|
<x-ri-check-line class="size-3" /> Scheduled Backups
|
|
</span>
|
|
<span class="lucent-capability-tag text-color-muted">
|
|
<x-ri-check-line class="size-3" /> Restore
|
|
</span>
|
|
<span class="lucent-capability-tag text-color-muted">
|
|
<x-ri-check-line class="size-3" /> Clone VPS
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- OS Templates -->
|
|
<div class="lucent-capability-card lucent-fade-in lucent-fade-in-delay-5">
|
|
<div class="lucent-capability-header">
|
|
<div class="lucent-capability-icon">
|
|
<x-ri-stack-line class="size-6" />
|
|
</div>
|
|
<div>
|
|
<h3 class="lucent-capability-title text-color-base">OS Templates</h3>
|
|
<p class="lucent-capability-subtitle">One-Click Deployments</p>
|
|
</div>
|
|
</div>
|
|
<p class="lucent-capability-desc text-color-muted">
|
|
Deploy from a library of pre-configured OS templates including Ubuntu, Debian, CentOS,
|
|
AlmaLinux, Rocky Linux, Windows Server, and more. Upload custom ISOs for specialized
|
|
deployments. Reinstall or change your OS in minutes without reprovisioning hardware.
|
|
</p>
|
|
<div class="lucent-capability-features">
|
|
<span class="lucent-capability-tag text-color-muted">
|
|
<x-ri-check-line class="size-3" /> Linux Distros
|
|
</span>
|
|
<span class="lucent-capability-tag text-color-muted">
|
|
<x-ri-check-line class="size-3" /> Windows
|
|
</span>
|
|
<span class="lucent-capability-tag text-color-muted">
|
|
<x-ri-check-line class="size-3" /> Custom ISO
|
|
</span>
|
|
<span class="lucent-capability-tag text-color-muted">
|
|
<x-ri-check-line class="size-3" /> Reinstall
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Control Panel Preview -->
|
|
<div class="lucent-panel-preview lucent-fade-in" style="margin-top: 3rem;">
|
|
<div class="lucent-panel-header">
|
|
<div class="lucent-panel-dots">
|
|
<span class="lucent-panel-dot"></span>
|
|
<span class="lucent-panel-dot"></span>
|
|
<span class="lucent-panel-dot"></span>
|
|
</div>
|
|
<span class="lucent-panel-title">KVM Control Panel — vm-prod-01.{{ config('app.domain', 'example.com') }}</span>
|
|
</div>
|
|
<div class="lucent-panel-content">
|
|
<div class="lucent-panel-sidebar">
|
|
<div class="lucent-panel-nav-item active">
|
|
<x-ri-dashboard-line class="size-4" />
|
|
<span>Overview</span>
|
|
</div>
|
|
<div class="lucent-panel-nav-item">
|
|
<x-ri-terminal-box-line class="size-4" />
|
|
<span>Console</span>
|
|
</div>
|
|
<div class="lucent-panel-nav-item">
|
|
<x-ri-global-line class="size-4" />
|
|
<span>Network</span>
|
|
</div>
|
|
<div class="lucent-panel-nav-item">
|
|
<x-ri-shield-line class="size-4" />
|
|
<span>Firewall</span>
|
|
</div>
|
|
<div class="lucent-panel-nav-item">
|
|
<x-ri-history-line class="size-4" />
|
|
<span>Backups</span>
|
|
</div>
|
|
<div class="lucent-panel-nav-item">
|
|
<x-ri-settings-3-line class="size-4" />
|
|
<span>Settings</span>
|
|
</div>
|
|
</div>
|
|
<div class="lucent-panel-main">
|
|
<div class="lucent-panel-stats">
|
|
<div class="lucent-panel-stat">
|
|
<div class="lucent-panel-stat-value">23%</div>
|
|
<div class="lucent-panel-stat-label">CPU Usage</div>
|
|
</div>
|
|
<div class="lucent-panel-stat">
|
|
<div class="lucent-panel-stat-value">4.2 GB</div>
|
|
<div class="lucent-panel-stat-label">Memory Used</div>
|
|
</div>
|
|
<div class="lucent-panel-stat">
|
|
<div class="lucent-panel-stat-value">47 GB</div>
|
|
<div class="lucent-panel-stat-label">Disk Used</div>
|
|
</div>
|
|
</div>
|
|
<div class="lucent-panel-chart">
|
|
<div class="lucent-panel-chart-bar" style="height: 35%;"></div>
|
|
<div class="lucent-panel-chart-bar" style="height: 42%;"></div>
|
|
<div class="lucent-panel-chart-bar" style="height: 28%;"></div>
|
|
<div class="lucent-panel-chart-bar" style="height: 55%;"></div>
|
|
<div class="lucent-panel-chart-bar" style="height: 48%;"></div>
|
|
<div class="lucent-panel-chart-bar" style="height: 62%;"></div>
|
|
<div class="lucent-panel-chart-bar" style="height: 45%;"></div>
|
|
<div class="lucent-panel-chart-bar" style="height: 38%;"></div>
|
|
<div class="lucent-panel-chart-bar" style="height: 52%;"></div>
|
|
<div class="lucent-panel-chart-bar" style="height: 23%;"></div>
|
|
<div class="lucent-panel-chart-bar" style="height: 33%;"></div>
|
|
<div class="lucent-panel-chart-bar" style="height: 41%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="lucent-cta-section">
|
|
<div class="container mx-auto px-4">
|
|
<div class="lucent-cta-container lucent-fade-in" style="border-radius: var(--lucent-radius-2xl);">
|
|
<div class="lucent-live-indicator" style="justify-content: center; margin-bottom: 1.5rem;">
|
|
<span class="lucent-live-dot"></span>
|
|
<span style="font-size: 0.875rem; font-weight: 600; opacity: 0.8;">Infrastructure Available</span>
|
|
</div>
|
|
<h2 class="lucent-cta-title text-color-base">
|
|
{{ theme('cta_title', 'Ready to Deploy?') }}
|
|
</h2>
|
|
<p class="lucent-cta-subtitle text-color-muted">
|
|
{{ theme('cta_subtitle', 'Join thousands of developers and businesses who trust our KVM-based VPS infrastructure for their production workloads') }}
|
|
</p>
|
|
<div class="lucent-cta-buttons">
|
|
<a href="#services" class="lucent-btn-primary">
|
|
<x-ri-server-line class="size-5" />
|
|
<span>{{ theme('cta_primary_text', 'View Plans') }}</span>
|
|
<x-ri-arrow-right-line class="size-5" />
|
|
</a>
|
|
<a href="{{ theme('help_link', 'https://help.yourserver.com') }}" class="lucent-btn-secondary" style="color: var(--color-base, #f8fafc);">
|
|
<x-ri-customer-service-line class="size-5" />
|
|
<span>{{ theme('cta_secondary_text', 'Contact Sales') }}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Announcements Section -->
|
|
@php($announcements = \App\Models\Announcement::latest()->take(3)->get())
|
|
@if($announcements->count())
|
|
<section class="lucent-announcements-section">
|
|
<div class="container mx-auto px-4">
|
|
<div class="lucent-announcements-card lucent-fade-in">
|
|
<div class="lucent-announcements-header">
|
|
<div class="lucent-announcements-icon">
|
|
<x-ri-megaphone-fill class="size-6" />
|
|
</div>
|
|
<h2 class="lucent-announcements-title text-color-base">Latest Announcements</h2>
|
|
</div>
|
|
|
|
@foreach($announcements as $announcement)
|
|
<div class="lucent-announcement-item">
|
|
<div class="lucent-announcement-item-header">
|
|
<h3 class="lucent-announcement-item-title text-color-base">{{ $announcement->title }}</h3>
|
|
<span class="lucent-announcement-item-date text-color-muted">{{ $announcement->created_at->diffForHumans() }}</span>
|
|
</div>
|
|
<p class="lucent-announcement-item-excerpt text-color-muted">{!! strip_tags($announcement->announcement) !!}</p>
|
|
</div>
|
|
@endforeach
|
|
|
|
<a href="{{ route('announcements.index') }}" class="lucent-announcement-link">
|
|
<span>View All Announcements</span>
|
|
<x-ri-arrow-right-line class="size-4" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endif
|
|
|
|
<!-- Hook for extensions -->
|
|
<div class="container mx-auto px-4 py-8">
|
|
{!! hook('pages.home') !!}
|
|
</div>
|
|
|
|
<!-- Scroll to Top Button -->
|
|
<button class="lucent-scroll-top" id="lucentScrollTop" aria-label="Scroll to top">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="18 15 12 9 6 15"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// ============================================
|
|
// Scroll to Top Button
|
|
// ============================================
|
|
const scrollTopBtn = document.getElementById('lucentScrollTop');
|
|
|
|
function toggleScrollTopBtn() {
|
|
if (window.scrollY > 500) {
|
|
scrollTopBtn.classList.add('visible');
|
|
} else {
|
|
scrollTopBtn.classList.remove('visible');
|
|
}
|
|
}
|
|
|
|
window.addEventListener('scroll', toggleScrollTopBtn);
|
|
toggleScrollTopBtn();
|
|
|
|
scrollTopBtn.addEventListener('click', function() {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
});
|
|
|
|
// ============================================
|
|
// Intersection Observer for Fade-in Animations
|
|
// ============================================
|
|
const fadeElements = document.querySelectorAll('.lucent-fade-in');
|
|
|
|
const observerOptions = {
|
|
root: null,
|
|
rootMargin: '0px 0px -100px 0px',
|
|
threshold: 0.1
|
|
};
|
|
|
|
const fadeObserver = new IntersectionObserver(function(entries) {
|
|
entries.forEach(function(entry) {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
fadeObserver.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
fadeElements.forEach(function(element) {
|
|
fadeObserver.observe(element);
|
|
});
|
|
|
|
// ============================================
|
|
// Smooth Scroll for Anchor Links
|
|
// ============================================
|
|
document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
|
|
anchor.addEventListener('click', function(e) {
|
|
const href = this.getAttribute('href');
|
|
if (href !== '#') {
|
|
e.preventDefault();
|
|
const target = document.querySelector(href);
|
|
if (target) {
|
|
target.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// ============================================
|
|
// Parallax Effect for Orbs
|
|
// ============================================
|
|
let ticking = false;
|
|
|
|
window.addEventListener('scroll', function() {
|
|
if (!ticking) {
|
|
window.requestAnimationFrame(function() {
|
|
const scrollY = window.scrollY;
|
|
const orbs = document.querySelectorAll('.lucent-orb');
|
|
|
|
orbs.forEach(function(orb, index) {
|
|
const speed = 0.05 + (index * 0.02);
|
|
orb.style.transform = `translateY(${scrollY * speed}px)`;
|
|
});
|
|
|
|
ticking = false;
|
|
});
|
|
|
|
ticking = true;
|
|
}
|
|
});
|
|
|
|
// ============================================
|
|
// Stats Counter Animation
|
|
// ============================================
|
|
const statValues = document.querySelectorAll('.lucent-stat-value');
|
|
|
|
const statsObserver = new IntersectionObserver(function(entries) {
|
|
entries.forEach(function(entry) {
|
|
if (entry.isIntersecting) {
|
|
const target = entry.target;
|
|
const text = target.textContent;
|
|
const match = text.match(/[\d,]+/);
|
|
|
|
if (match) {
|
|
const finalValue = parseInt(match[0].replace(/,/g, ''));
|
|
const duration = 2000;
|
|
const startTime = performance.now();
|
|
|
|
function animate(currentTime) {
|
|
const elapsed = currentTime - startTime;
|
|
const progress = Math.min(elapsed / duration, 1);
|
|
const easeProgress = 1 - Math.pow(1 - progress, 3);
|
|
const currentValue = Math.floor(easeProgress * finalValue);
|
|
|
|
target.textContent = text.replace(match[0], currentValue.toLocaleString());
|
|
|
|
if (progress < 1) {
|
|
requestAnimationFrame(animate);
|
|
} else {
|
|
target.textContent = text;
|
|
}
|
|
}
|
|
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
statsObserver.unobserve(target);
|
|
}
|
|
});
|
|
}, { threshold: 0.5 });
|
|
|
|
statValues.forEach(function(stat) {
|
|
statsObserver.observe(stat);
|
|
});
|
|
|
|
// ============================================
|
|
// Spotlight Effect for Cards
|
|
// ============================================
|
|
const spotlightElements = document.querySelectorAll('.lucent-spotlight, .lucent-node-card, .lucent-feature-card, .lucent-stat-card');
|
|
|
|
spotlightElements.forEach(function(element) {
|
|
element.addEventListener('mousemove', function(e) {
|
|
const rect = element.getBoundingClientRect();
|
|
const x = ((e.clientX - rect.left) / rect.width) * 100;
|
|
const y = ((e.clientY - rect.top) / rect.height) * 100;
|
|
element.style.setProperty('--mouse-x', x + '%');
|
|
element.style.setProperty('--mouse-y', y + '%');
|
|
});
|
|
});
|
|
|
|
// ============================================
|
|
// Ripple Effect for Buttons
|
|
// ============================================
|
|
const rippleElements = document.querySelectorAll('.lucent-btn-primary, .lucent-btn-secondary, .lucent-action-card');
|
|
|
|
rippleElements.forEach(function(element) {
|
|
element.addEventListener('click', function(e) {
|
|
const rect = element.getBoundingClientRect();
|
|
const ripple = element.querySelector('.lucent-ripple-effect') || document.createElement('span');
|
|
|
|
if (!ripple.classList.contains('lucent-ripple-effect')) {
|
|
ripple.classList.add('lucent-ripple-effect');
|
|
ripple.style.cssText = `
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 100px;
|
|
background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
transform: scale(0);
|
|
pointer-events: none;
|
|
`;
|
|
element.style.position = 'relative';
|
|
element.style.overflow = 'hidden';
|
|
element.appendChild(ripple);
|
|
}
|
|
|
|
ripple.style.left = (e.clientX - rect.left - 50) + 'px';
|
|
ripple.style.top = (e.clientY - rect.top - 50) + 'px';
|
|
ripple.style.animation = 'none';
|
|
ripple.offsetHeight; // Trigger reflow
|
|
ripple.style.animation = 'lucent-ripple-anim 0.6s ease-out forwards';
|
|
});
|
|
});
|
|
|
|
// ============================================
|
|
// Live Node Chart Updates (Simulated)
|
|
// ============================================
|
|
const miniCharts = document.querySelectorAll('.lucent-mini-chart');
|
|
|
|
function updateCharts() {
|
|
miniCharts.forEach(function(chart) {
|
|
const bars = chart.querySelectorAll('.lucent-mini-chart-bar');
|
|
bars.forEach(function(bar) {
|
|
const newHeight = Math.floor(Math.random() * 60) + 20;
|
|
bar.style.height = newHeight + '%';
|
|
});
|
|
});
|
|
}
|
|
|
|
// Update charts every 3 seconds
|
|
setInterval(updateCharts, 3000);
|
|
|
|
// ============================================
|
|
// Progress Bar Animation on Scroll
|
|
// ============================================
|
|
const progressBars = document.querySelectorAll('.lucent-progress-fill');
|
|
|
|
const progressObserver = new IntersectionObserver(function(entries) {
|
|
entries.forEach(function(entry) {
|
|
if (entry.isIntersecting) {
|
|
const bar = entry.target;
|
|
const targetWidth = bar.style.width;
|
|
bar.style.width = '0%';
|
|
setTimeout(function() {
|
|
bar.style.width = targetWidth;
|
|
}, 100);
|
|
progressObserver.unobserve(bar);
|
|
}
|
|
});
|
|
}, { threshold: 0.3 });
|
|
|
|
progressBars.forEach(function(bar) {
|
|
progressObserver.observe(bar);
|
|
});
|
|
|
|
// ============================================
|
|
// Card Tilt Effect
|
|
// ============================================
|
|
const tiltCards = document.querySelectorAll('.lucent-node-card, .lucent-service-card');
|
|
|
|
tiltCards.forEach(function(card) {
|
|
card.addEventListener('mousemove', function(e) {
|
|
const rect = card.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
const centerX = rect.width / 2;
|
|
const centerY = rect.height / 2;
|
|
const rotateX = (y - centerY) / 20;
|
|
const rotateY = (centerX - x) / 20;
|
|
|
|
card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(10px)`;
|
|
});
|
|
|
|
card.addEventListener('mouseleave', function() {
|
|
card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateZ(0)';
|
|
});
|
|
});
|
|
|
|
// ============================================
|
|
// Hero Badge Pulse Effect
|
|
// ============================================
|
|
const heroBadge = document.querySelector('.lucent-hero-badge');
|
|
if (heroBadge) {
|
|
setInterval(function() {
|
|
heroBadge.style.boxShadow = '0 8px 30px rgba(59, 130, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2)';
|
|
setTimeout(function() {
|
|
heroBadge.style.boxShadow = '0 4px 20px rgba(59, 130, 246, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1)';
|
|
}, 1000);
|
|
}, 2000);
|
|
}
|
|
|
|
// ============================================
|
|
// Magnetic Button Effect
|
|
// ============================================
|
|
const magneticButtons = document.querySelectorAll('.lucent-btn-primary, .lucent-btn-secondary');
|
|
|
|
magneticButtons.forEach(function(btn) {
|
|
btn.addEventListener('mousemove', function(e) {
|
|
const rect = btn.getBoundingClientRect();
|
|
const x = e.clientX - rect.left - rect.width / 2;
|
|
const y = e.clientY - rect.top - rect.height / 2;
|
|
|
|
btn.style.transform = `translate(${x * 0.1}px, ${y * 0.1}px)`;
|
|
});
|
|
|
|
btn.addEventListener('mouseleave', function() {
|
|
btn.style.transform = 'translate(0, 0)';
|
|
});
|
|
});
|
|
|
|
// ============================================
|
|
// Scroll Progress Indicator
|
|
// ============================================
|
|
const progressIndicator = document.createElement('div');
|
|
progressIndicator.style.cssText = `
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, var(--lucent-primary, #3b82f6), var(--lucent-secondary, #8b5cf6), var(--lucent-accent, #06b6d4));
|
|
z-index: 9999;
|
|
transition: width 0.1s ease;
|
|
width: 0%;
|
|
`;
|
|
document.body.appendChild(progressIndicator);
|
|
|
|
window.addEventListener('scroll', function() {
|
|
const scrollTop = window.scrollY;
|
|
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
|
|
const scrollPercent = (scrollTop / docHeight) * 100;
|
|
progressIndicator.style.width = scrollPercent + '%';
|
|
});
|
|
|
|
// ============================================
|
|
// Keyboard Navigation
|
|
// ============================================
|
|
document.addEventListener('keydown', function(e) {
|
|
// Press 'Home' to scroll to top
|
|
if (e.key === 'Home') {
|
|
e.preventDefault();
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}
|
|
// Press 'End' to scroll to bottom
|
|
if (e.key === 'End') {
|
|
e.preventDefault();
|
|
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
|
|
}
|
|
});
|
|
|
|
// ============================================
|
|
// Prefers Reduced Motion
|
|
// ============================================
|
|
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
|
|
|
|
if (prefersReducedMotion.matches) {
|
|
// Disable animations for users who prefer reduced motion
|
|
document.querySelectorAll('.lucent-orb, .lucent-particle').forEach(function(el) {
|
|
el.style.animation = 'none';
|
|
});
|
|
}
|
|
});
|
|
</script>
|