7618 lines
261 KiB
PHP
7618 lines
261 KiB
PHP
<div>
|
|
<style>
|
|
/* ============================================
|
|
LUCENTUI HOMEPAGE - Professional Theme
|
|
Uses theme CSS variables for consistency
|
|
Enhanced with accessibility & performance
|
|
============================================ */
|
|
|
|
#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);
|
|
|
|
/* Focus states for accessibility */
|
|
--lucent-focus-ring: 0 0 0 3px hsl(var(--color-primary) / 0.4);
|
|
--lucent-focus-ring-offset: 0 0 0 2px hsl(var(--color-background));
|
|
}
|
|
|
|
/* Skip to content link for accessibility */
|
|
.lucent-skip-link {
|
|
position: absolute;
|
|
top: -100px;
|
|
left: 1rem;
|
|
z-index: 10000;
|
|
padding: 0.75rem 1.5rem;
|
|
background: var(--lucent-primary);
|
|
color: white;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
border-radius: var(--lucent-radius-md);
|
|
transition: top 0.3s ease;
|
|
}
|
|
|
|
.lucent-skip-link:focus {
|
|
top: 1rem;
|
|
outline: none;
|
|
box-shadow: var(--lucent-focus-ring), var(--lucent-focus-ring-offset);
|
|
}
|
|
|
|
/* Screen reader only content */
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
|
|
/* Enhanced focus states for all interactive elements */
|
|
a:focus-visible,
|
|
button:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--lucent-focus-ring), var(--lucent-focus-ring-offset);
|
|
}
|
|
|
|
/* 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;
|
|
will-change: transform;
|
|
transform: translateZ(0); /* GPU acceleration */
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.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;
|
|
will-change: transform, opacity;
|
|
transform: translateZ(0); /* GPU acceleration */
|
|
}
|
|
|
|
.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 Video Background */
|
|
.lucent-hero-video {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
opacity: 0.15;
|
|
z-index: 0;
|
|
}
|
|
|
|
.lucent-hero-video-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.85) 100%);
|
|
z-index: 1;
|
|
}
|
|
|
|
/* 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;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* 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;
|
|
will-change: transform;
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
.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;
|
|
will-change: transform, box-shadow;
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* ============================================
|
|
TRUST INDICATORS SECTION
|
|
============================================ */
|
|
|
|
.lucent-trust-section {
|
|
padding: clamp(2rem, 6vw, 3.5rem) 0;
|
|
background: linear-gradient(180deg, transparent 0%, rgba(59, 130, 246, 0.02) 50%, transparent 100%);
|
|
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.lucent-trust-header {
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.lucent-trust-label {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
opacity: 0.6;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.lucent-trust-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 2rem;
|
|
align-items: center;
|
|
justify-items: center;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.lucent-trust-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1.5rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.lucent-trust-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 1rem;
|
|
}
|
|
}
|
|
|
|
.lucent-trust-badge {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 1.25rem;
|
|
background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
border-radius: var(--lucent-radius-lg);
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lucent-trust-badge::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, var(--lucent-primary), transparent);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.lucent-trust-badge:hover {
|
|
transform: translateY(-4px);
|
|
border-color: rgba(59, 130, 246, 0.3);
|
|
background: linear-gradient(145deg, rgba(59, 130, 246, 0.05) 0%, rgba(59, 130, 246, 0.02) 100%);
|
|
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.1);
|
|
}
|
|
|
|
.lucent-trust-badge:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.lucent-trust-icon {
|
|
font-size: 2rem;
|
|
color: var(--lucent-primary);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.lucent-trust-badge:hover .lucent-trust-icon {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.lucent-trust-text {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
opacity: 0.8;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.lucent-trust-badge:hover .lucent-trust-text {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ============================================
|
|
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;
|
|
}
|
|
|
|
/* ============================================
|
|
TESTIMONIALS CAROUSEL
|
|
============================================ */
|
|
|
|
.lucent-testimonials-section {
|
|
padding: clamp(3rem, 8vw, 5rem) 0;
|
|
background: linear-gradient(135deg, var(--lucent-dark-base) 0%, var(--lucent-dark-secondary) 50%, var(--lucent-dark-base) 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lucent-testimonials-section::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background:
|
|
radial-gradient(ellipse 70% 50% at 50% 0%, rgba(139, 92, 246, 0.12) 0%, transparent 50%),
|
|
radial-gradient(ellipse 60% 40% at 0% 100%, rgba(59, 130, 246, 0.08) 0%, transparent 50%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.lucent-testimonials-carousel {
|
|
position: relative;
|
|
max-width: 56rem;
|
|
margin: 0 auto;
|
|
padding: 2rem 3rem;
|
|
}
|
|
|
|
.lucent-testimonials-track {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: var(--lucent-radius-2xl);
|
|
}
|
|
|
|
.lucent-testimonial-slide {
|
|
display: none;
|
|
opacity: 0;
|
|
transition: opacity 0.6s ease-in-out;
|
|
padding: 2.5rem;
|
|
background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: var(--lucent-radius-2xl);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lucent-testimonial-slide::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, var(--lucent-primary), var(--lucent-secondary), var(--lucent-accent));
|
|
}
|
|
|
|
.lucent-testimonial-slide.active {
|
|
display: block;
|
|
opacity: 1;
|
|
}
|
|
|
|
.lucent-testimonial-quote-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-bottom: 1.5rem;
|
|
color: var(--lucent-primary);
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.lucent-testimonial-text {
|
|
font-size: 1.25rem;
|
|
line-height: 1.8;
|
|
font-weight: 400;
|
|
color: #e2e8f0;
|
|
margin-bottom: 2rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
.lucent-testimonial-author {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.lucent-testimonial-avatar {
|
|
width: 56px;
|
|
height: 56px;
|
|
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: 1.125rem;
|
|
border: 3px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.lucent-testimonial-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.lucent-testimonial-name {
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
color: #f8fafc;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.lucent-testimonial-role {
|
|
font-size: 0.875rem;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.lucent-testimonial-company {
|
|
font-size: 0.875rem;
|
|
color: var(--lucent-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.lucent-testimonial-rating {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
color: #fbbf24;
|
|
}
|
|
|
|
.lucent-carousel-controls {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.lucent-carousel-dots {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.lucent-carousel-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border: none;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.lucent-carousel-dot:hover {
|
|
background: rgba(255, 255, 255, 0.5);
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.lucent-carousel-dot.active {
|
|
width: 32px;
|
|
border-radius: 999px;
|
|
background: var(--lucent-primary);
|
|
}
|
|
|
|
.lucent-carousel-btn {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.lucent-carousel-btn:hover {
|
|
background: var(--lucent-primary);
|
|
border-color: var(--lucent-primary);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.lucent-carousel-btn:disabled {
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* ============================================
|
|
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;
|
|
}
|
|
|
|
/* ============================================
|
|
FAQ SECTION
|
|
============================================ */
|
|
|
|
.lucent-faq-section {
|
|
padding: clamp(3rem, 8vw, 5rem) 0;
|
|
position: relative;
|
|
}
|
|
|
|
.lucent-faq-container {
|
|
max-width: 56rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.lucent-faq-item {
|
|
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);
|
|
margin-bottom: 1rem;
|
|
overflow: hidden;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.lucent-faq-item:hover {
|
|
border-color: rgba(59, 130, 246, 0.3);
|
|
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.08);
|
|
}
|
|
|
|
.lucent-faq-question {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding: 1.5rem;
|
|
background: transparent;
|
|
border: none;
|
|
color: inherit;
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.lucent-faq-question:hover {
|
|
color: var(--lucent-primary);
|
|
}
|
|
|
|
.lucent-faq-question:focus-visible {
|
|
outline: none;
|
|
box-shadow: inset var(--lucent-focus-ring);
|
|
}
|
|
|
|
.lucent-faq-icon {
|
|
flex-shrink: 0;
|
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
color: var(--lucent-primary);
|
|
}
|
|
|
|
.lucent-faq-item.active .lucent-faq-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.lucent-faq-answer {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
|
|
padding: 0 1.5rem;
|
|
}
|
|
|
|
.lucent-faq-item.active .lucent-faq-answer {
|
|
max-height: 500px;
|
|
padding: 0 1.5rem 1.5rem;
|
|
}
|
|
|
|
.lucent-faq-answer-content {
|
|
font-size: 0.9375rem;
|
|
line-height: 1.7;
|
|
opacity: 0.85;
|
|
padding-top: 0.5rem;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.lucent-faq-answer-content p {
|
|
margin: 0 0 0.75rem 0;
|
|
}
|
|
|
|
.lucent-faq-answer-content p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.lucent-faq-answer-content ul {
|
|
margin: 0.5rem 0;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.lucent-faq-answer-content li {
|
|
margin-bottom: 0.375rem;
|
|
}
|
|
|
|
/* ============================================
|
|
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;
|
|
}
|
|
|
|
/* ============================================
|
|
PRICING COMPARISON TABLE
|
|
============================================ */
|
|
|
|
.lucent-pricing-section {
|
|
padding: clamp(3rem, 8vw, 5rem) 0;
|
|
}
|
|
|
|
.lucent-pricing-toggle {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.lucent-pricing-switch {
|
|
position: relative;
|
|
width: 60px;
|
|
height: 32px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.lucent-pricing-switch-slider {
|
|
position: absolute;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
top: 3px;
|
|
left: 4px;
|
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.lucent-pricing-switch.active {
|
|
background: var(--lucent-primary);
|
|
}
|
|
|
|
.lucent-pricing-switch.active .lucent-pricing-switch-slider {
|
|
transform: translateX(28px);
|
|
}
|
|
|
|
.lucent-pricing-label {
|
|
font-weight: 600;
|
|
opacity: 0.6;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.lucent-pricing-label.active {
|
|
opacity: 1;
|
|
color: var(--lucent-primary);
|
|
}
|
|
|
|
.lucent-pricing-badge {
|
|
display: inline-block;
|
|
padding: 0.25rem 0.75rem;
|
|
background: linear-gradient(135deg, var(--lucent-success), #059669);
|
|
color: white;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
border-radius: 999px;
|
|
margin-left: 0.5rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.lucent-pricing-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.lucent-pricing-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 1.25rem;
|
|
}
|
|
}
|
|
|
|
.lucent-pricing-card {
|
|
background: linear-gradient(145deg, var(--background-secondary, #1e293b) 0%, rgba(30, 41, 59, 0.5) 100%);
|
|
border: 2px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: var(--lucent-radius-2xl);
|
|
padding: 2rem;
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lucent-pricing-card.featured {
|
|
border-color: var(--lucent-primary);
|
|
transform: scale(1.05);
|
|
box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
.lucent-pricing-card.featured::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-pricing-card:hover {
|
|
transform: translateY(-8px);
|
|
border-color: rgba(59, 130, 246, 0.4);
|
|
box-shadow: 0 16px 32px rgba(59, 130, 246, 0.15);
|
|
}
|
|
|
|
.lucent-pricing-header {
|
|
text-align: center;
|
|
margin-bottom: 1.5rem;
|
|
padding-bottom: 1.5rem;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.lucent-pricing-name {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.lucent-pricing-price {
|
|
font-size: 3rem;
|
|
font-weight: 800;
|
|
color: var(--lucent-primary);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.lucent-pricing-price-currency {
|
|
font-size: 1.5rem;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.lucent-pricing-period {
|
|
font-size: 0.875rem;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.lucent-pricing-features {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.875rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.lucent-pricing-feature {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
font-size: 0.9375rem;
|
|
}
|
|
|
|
.lucent-pricing-feature-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: rgba(16, 185, 129, 0.15);
|
|
color: var(--lucent-success);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.lucent-pricing-cta {
|
|
width: 100%;
|
|
padding: 1rem;
|
|
background: var(--lucent-primary);
|
|
color: white;
|
|
border: none;
|
|
border-radius: var(--lucent-radius-lg);
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
text-decoration: none;
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
|
|
.lucent-pricing-cta:hover {
|
|
background: var(--lucent-primary-dark);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
|
|
}
|
|
|
|
.lucent-pricing-card.featured .lucent-pricing-cta {
|
|
background: linear-gradient(135deg, var(--lucent-primary), var(--lucent-secondary));
|
|
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
/* ============================================
|
|
SECURITY SHOWCASE SECTION
|
|
============================================ */
|
|
|
|
.lucent-security-section {
|
|
padding: clamp(3rem, 8vw, 5rem) 0;
|
|
background: linear-gradient(135deg, var(--lucent-dark-elevated), var(--lucent-dark-base));
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lucent-security-section::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background:
|
|
radial-gradient(ellipse 70% 50% at 30% 30%, rgba(239, 68, 68, 0.08) 0%, transparent 50%),
|
|
radial-gradient(ellipse 60% 40% at 70% 70%, rgba(245, 158, 11, 0.06) 0%, transparent 50%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.lucent-security-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 1.5rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.lucent-security-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.lucent-security-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.lucent-security-card {
|
|
background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
|
|
border: 1px solid rgba(239, 68, 68, 0.2);
|
|
border-radius: var(--lucent-radius-xl);
|
|
padding: 1.75rem;
|
|
text-align: center;
|
|
transition: all 0.4s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.lucent-security-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.lucent-security-card:hover {
|
|
border-color: rgba(239, 68, 68, 0.4);
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 12px 32px rgba(239, 68, 68, 0.15);
|
|
}
|
|
|
|
.lucent-security-card:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.lucent-security-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
margin: 0 auto 1.25rem;
|
|
border-radius: var(--lucent-radius-lg);
|
|
background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(245, 158, 11, 0.1));
|
|
color: #ef4444;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.lucent-security-card:hover .lucent-security-icon {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.lucent-security-title {
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.75rem;
|
|
color: #f8fafc;
|
|
}
|
|
|
|
.lucent-security-desc {
|
|
font-size: 0.875rem;
|
|
line-height: 1.6;
|
|
opacity: 0.75;
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
/* ============================================
|
|
PERFORMANCE METRICS VISUALIZATION
|
|
============================================ */
|
|
|
|
.lucent-performance-section {
|
|
padding: clamp(3rem, 8vw, 5rem) 0;
|
|
background: linear-gradient(135deg, #0c4a6e 0%, #075985 50%, #0c4a6e 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lucent-performance-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.lucent-performance-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.lucent-performance-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.lucent-metric-card {
|
|
background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
border-radius: var(--lucent-radius-xl);
|
|
padding: 1.75rem;
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.4s ease;
|
|
}
|
|
|
|
.lucent-metric-card:hover {
|
|
transform: translateY(-6px);
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
box-shadow: 0 12px 32px rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
.lucent-metric-value {
|
|
font-size: 2.5rem;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, #60a5fa, #a78bfa);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.lucent-metric-label {
|
|
font-size: 0.875rem;
|
|
color: #cbd5e1;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.lucent-metric-sublabel {
|
|
font-size: 0.75rem;
|
|
color: #94a3b8;
|
|
opacity: 0.7;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
/* ============================================
|
|
COUNTDOWN TIMER FOR OFFERS
|
|
============================================ */
|
|
|
|
.lucent-offer-banner {
|
|
position: relative;
|
|
background: linear-gradient(135deg, #7c2d12, #b91c1c, #7c2d12);
|
|
color: white;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
border-bottom: 3px solid #dc2626;
|
|
animation: lucent-offer-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes lucent-offer-pulse {
|
|
0%, 100% {
|
|
background: linear-gradient(135deg, #7c2d12, #b91c1c, #7c2d12);
|
|
}
|
|
50% {
|
|
background: linear-gradient(135deg, #991b1b, #dc2626, #991b1b);
|
|
}
|
|
}
|
|
|
|
.lucent-countdown {
|
|
display: inline-flex;
|
|
gap: 1rem;
|
|
margin: 0 1rem;
|
|
}
|
|
|
|
.lucent-countdown-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.lucent-countdown-value {
|
|
font-size: 1.5rem;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, #fef3c7, #fbbf24);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
min-width: 2.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.lucent-countdown-label {
|
|
font-size: 0.625rem;
|
|
text-transform: uppercase;
|
|
opacity: 0.8;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* ============================================
|
|
DEVELOPER API SHOWCASE
|
|
============================================ */
|
|
|
|
.lucent-api-section {
|
|
padding: clamp(3rem, 8vw, 5rem) 0;
|
|
}
|
|
|
|
.lucent-api-content {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 3rem;
|
|
align-items: center;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.lucent-api-content {
|
|
grid-template-columns: 1fr;
|
|
gap: 2rem;
|
|
}
|
|
}
|
|
|
|
.lucent-api-info h3 {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--lucent-primary);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.lucent-api-info h2 {
|
|
font-size: clamp(2rem, 4vw, 2.5rem);
|
|
font-weight: 800;
|
|
margin-bottom: 1.5rem;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.lucent-api-info p {
|
|
font-size: 1.125rem;
|
|
line-height: 1.8;
|
|
opacity: 0.85;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.lucent-api-features {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.lucent-api-feature {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.875rem 1rem;
|
|
background: linear-gradient(145deg, var(--background-secondary, #1e293b), rgba(30, 41, 59, 0.5));
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: var(--lucent-radius-md);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.lucent-api-feature:hover {
|
|
border-color: rgba(59, 130, 246, 0.3);
|
|
transform: translateX(8px);
|
|
}
|
|
|
|
.lucent-api-feature-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: var(--lucent-radius-sm);
|
|
background: rgba(59, 130, 246, 0.15);
|
|
color: var(--lucent-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.lucent-code-preview {
|
|
background: var(--lucent-dark-elevated);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: var(--lucent-radius-xl);
|
|
padding: 1.5rem;
|
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
font-size: 0.875rem;
|
|
overflow-x: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.lucent-code-preview::before {
|
|
content: 'API';
|
|
position: absolute;
|
|
top: 0.75rem;
|
|
right: 0.75rem;
|
|
padding: 0.25rem 0.625rem;
|
|
background: rgba(59, 130, 246, 0.2);
|
|
color: var(--lucent-primary);
|
|
font-size: 0.625rem;
|
|
font-weight: 700;
|
|
border-radius: 0.25rem;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.lucent-code-preview pre {
|
|
margin: 0;
|
|
color: #e2e8f0;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.lucent-code-keyword {
|
|
color: #c678dd;
|
|
}
|
|
|
|
.lucent-code-string {
|
|
color: #98c379;
|
|
}
|
|
|
|
.lucent-code-function {
|
|
color: #61afef;
|
|
}
|
|
|
|
.lucent-code-comment {
|
|
color: #5c6370;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ============================================
|
|
HOW IT WORKS - TIMELINE/PROCESS SECTION
|
|
============================================ */
|
|
|
|
.lucent-process-section {
|
|
padding: clamp(3rem, 8vw, 5rem) 0;
|
|
position: relative;
|
|
}
|
|
|
|
.lucent-process-timeline {
|
|
position: relative;
|
|
max-width: 56rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.lucent-process-line {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 2px;
|
|
background: linear-gradient(180deg, var(--lucent-primary), var(--lucent-secondary), var(--lucent-accent));
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.lucent-process-line {
|
|
left: 2rem;
|
|
}
|
|
}
|
|
|
|
.lucent-process-step {
|
|
display: flex;
|
|
gap: 2rem;
|
|
margin-bottom: 3rem;
|
|
position: relative;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.lucent-process-step {
|
|
flex-direction: row;
|
|
gap: 1.5rem;
|
|
}
|
|
}
|
|
|
|
.lucent-process-step:nth-child(even) {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.lucent-process-step:nth-child(even) {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
.lucent-process-content {
|
|
flex: 1;
|
|
background: linear-gradient(145deg, var(--background-secondary, #1e293b), rgba(30, 41, 59, 0.5));
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: var(--lucent-radius-xl);
|
|
padding: 1.75rem;
|
|
position: relative;
|
|
transition: all 0.4s ease;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.lucent-process-step:nth-child(even) .lucent-process-content,
|
|
.lucent-process-step:nth-child(odd) .lucent-process-content {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.lucent-process-content::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 2rem;
|
|
width: 20px;
|
|
height: 2px;
|
|
background: rgba(59, 130, 246, 0.4);
|
|
}
|
|
|
|
.lucent-process-step:nth-child(odd) .lucent-process-content::before {
|
|
right: -22px;
|
|
}
|
|
|
|
.lucent-process-step:nth-child(even) .lucent-process-content::before {
|
|
left: -22px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.lucent-process-step:nth-child(even) .lucent-process-content::before,
|
|
.lucent-process-step:nth-child(odd) .lucent-process-content::before {
|
|
left: -22px;
|
|
}
|
|
}
|
|
|
|
.lucent-process-content:hover {
|
|
border-color: rgba(59, 130, 246, 0.4);
|
|
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.12);
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.lucent-process-number {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, var(--lucent-primary), var(--lucent-secondary));
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 800;
|
|
font-size: 1.25rem;
|
|
border: 4px solid var(--background, #0f172a);
|
|
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
|
|
z-index: 2;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.lucent-process-number {
|
|
left: 2rem;
|
|
}
|
|
}
|
|
|
|
.lucent-process-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: var(--lucent-radius-lg);
|
|
background: rgba(59, 130, 246, 0.1);
|
|
color: var(--lucent-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.lucent-process-title {
|
|
font-size: 1.375rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.lucent-process-desc {
|
|
font-size: 0.9375rem;
|
|
line-height: 1.7;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
/* ============================================
|
|
FEATURE COMPARISON MATRIX
|
|
============================================ */
|
|
|
|
.lucent-comparison-section {
|
|
padding: clamp(3rem, 8vw, 5rem) 0;
|
|
}
|
|
|
|
.lucent-comparison-table-wrapper {
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.lucent-comparison-table {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
background: linear-gradient(145deg, var(--background-secondary, #1e293b) 0%, rgba(30, 41, 59, 0.5) 100%);
|
|
border-radius: var(--lucent-radius-xl);
|
|
overflow: hidden;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.lucent-comparison-table thead {
|
|
background: linear-gradient(135deg, var(--lucent-dark-base), var(--lucent-dark-secondary));
|
|
}
|
|
|
|
.lucent-comparison-table th {
|
|
padding: 1.25rem 1.5rem;
|
|
text-align: left;
|
|
font-weight: 700;
|
|
font-size: 1rem;
|
|
color: #f8fafc;
|
|
border-bottom: 2px solid rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.lucent-comparison-table th:not(:first-child) {
|
|
text-align: center;
|
|
}
|
|
|
|
.lucent-comparison-table tbody tr {
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.lucent-comparison-table tbody tr:hover {
|
|
background: rgba(59, 130, 246, 0.05);
|
|
}
|
|
|
|
.lucent-comparison-table td {
|
|
padding: 1rem 1.5rem;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.lucent-comparison-table td:not(:first-child) {
|
|
text-align: center;
|
|
}
|
|
|
|
.lucent-comparison-check {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
background: rgba(16, 185, 129, 0.15);
|
|
color: var(--lucent-success);
|
|
}
|
|
|
|
.lucent-comparison-cross {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
background: rgba(239, 68, 68, 0.15);
|
|
color: var(--lucent-danger);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* ============================================
|
|
CUSTOMER LOGOS CAROUSEL
|
|
============================================ */
|
|
|
|
.lucent-customers-section {
|
|
padding: clamp(2rem, 5vw, 3.5rem) 0;
|
|
background: linear-gradient(180deg, rgba(59, 130, 246, 0.02) 0%, transparent 100%);
|
|
}
|
|
|
|
.lucent-customers-label {
|
|
text-align: center;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
opacity: 0.5;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.lucent-logos-carousel {
|
|
overflow: hidden;
|
|
position: relative;
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
.lucent-logos-track {
|
|
display: flex;
|
|
gap: 3rem;
|
|
animation: lucent-scroll-logos 30s linear infinite;
|
|
will-change: transform;
|
|
}
|
|
|
|
.lucent-logos-track:hover {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
@keyframes lucent-scroll-logos {
|
|
0% { transform: translateX(0); }
|
|
100% { transform: translateX(-50%); }
|
|
}
|
|
|
|
.lucent-customer-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 140px;
|
|
height: 60px;
|
|
opacity: 0.4;
|
|
filter: grayscale(1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.lucent-customer-logo:hover {
|
|
opacity: 0.9;
|
|
filter: grayscale(0);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* ============================================
|
|
INTERACTIVE DEMO/TOUR LAUNCHER
|
|
============================================ */
|
|
|
|
.lucent-demo-launcher {
|
|
position: fixed;
|
|
bottom: 2rem;
|
|
left: 2rem;
|
|
z-index: 999;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.lucent-demo-launcher {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.lucent-demo-button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.875rem 1.5rem;
|
|
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
|
|
color: white;
|
|
border: none;
|
|
border-radius: var(--lucent-radius-lg);
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.lucent-demo-button:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 32px rgba(139, 92, 246, 0.5);
|
|
}
|
|
|
|
.lucent-demo-badge {
|
|
padding: 0.25rem 0.5rem;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 999px;
|
|
font-size: 0.625rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* ============================================
|
|
ANIMATED SVG ILLUSTRATIONS
|
|
============================================ */
|
|
|
|
.lucent-svg-illustration {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.lucent-svg-illustration path {
|
|
animation: lucent-svg-draw 2s ease-in-out forwards;
|
|
}
|
|
|
|
@keyframes lucent-svg-draw {
|
|
from {
|
|
stroke-dashoffset: 1000;
|
|
}
|
|
to {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
|
|
.lucent-svg-pulse {
|
|
animation: lucent-svg-pulse-anim 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes lucent-svg-pulse-anim {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
/* Parallax container */
|
|
.lucent-parallax {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lucent-parallax-layer {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
will-change: transform;
|
|
}
|
|
|
|
.lucent-parallax-bg {
|
|
transform: translateZ(-1px) scale(2);
|
|
}
|
|
|
|
.lucent-parallax-mid {
|
|
transform: translateZ(-0.5px) scale(1.5);
|
|
}
|
|
|
|
.lucent-parallax-fg {
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
/* ============================================
|
|
LIVE ACTIVITY FEED
|
|
============================================ */
|
|
|
|
.lucent-activity-section {
|
|
position: fixed;
|
|
bottom: 8rem;
|
|
left: 2rem;
|
|
z-index: 998;
|
|
max-width: 320px;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.lucent-activity-section {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.lucent-activity-feed {
|
|
background: linear-gradient(145deg, var(--lucent-dark-secondary), var(--lucent-dark-base));
|
|
border: 1px solid rgba(59, 130, 246, 0.3);
|
|
border-radius: var(--lucent-radius-xl);
|
|
padding: 1.25rem;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
|
backdrop-filter: blur(20px);
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.lucent-activity-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 0.75rem;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.lucent-activity-title {
|
|
font-size: 0.875rem;
|
|
font-weight: 700;
|
|
color: #f8fafc;
|
|
}
|
|
|
|
.lucent-activity-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem 0;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
animation: lucent-activity-slide-in 0.4s ease-out;
|
|
}
|
|
|
|
.lucent-activity-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
@keyframes lucent-activity-slide-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.lucent-activity-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
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.75rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.lucent-activity-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.lucent-activity-text {
|
|
font-size: 0.8125rem;
|
|
color: #cbd5e1;
|
|
margin-bottom: 0.25rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.lucent-activity-text strong {
|
|
color: #f8fafc;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.lucent-activity-time {
|
|
font-size: 0.6875rem;
|
|
color: #64748b;
|
|
}
|
|
|
|
.lucent-activity-location {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
font-size: 0.6875rem;
|
|
color: var(--lucent-primary);
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
/* ============================================
|
|
SECTION DIVIDERS & DECORATIVE ELEMENTS
|
|
============================================ */
|
|
|
|
.lucent-section-divider {
|
|
position: relative;
|
|
height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lucent-section-divider::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.4), transparent);
|
|
}
|
|
|
|
.lucent-section-divider-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(145deg, var(--background-secondary, #1e293b), var(--background, #0f172a));
|
|
border: 2px solid rgba(59, 130, 246, 0.3);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--lucent-primary);
|
|
position: relative;
|
|
z-index: 1;
|
|
box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
.lucent-section-divider-icon::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -4px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, var(--lucent-primary), var(--lucent-secondary));
|
|
opacity: 0.2;
|
|
filter: blur(8px);
|
|
}
|
|
|
|
/* Wave dividers */
|
|
.lucent-wave-divider {
|
|
width: 100%;
|
|
height: 60px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lucent-wave-divider svg {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Animated gradient line */
|
|
.lucent-gradient-line {
|
|
height: 2px;
|
|
background: linear-gradient(90deg,
|
|
transparent,
|
|
var(--lucent-primary),
|
|
var(--lucent-secondary),
|
|
var(--lucent-accent),
|
|
var(--lucent-secondary),
|
|
var(--lucent-primary),
|
|
transparent);
|
|
background-size: 200% 100%;
|
|
animation: lucent-gradient-flow 8s linear infinite;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
/* Floating badges for features */
|
|
.lucent-floating-badge {
|
|
position: absolute;
|
|
padding: 0.5rem 1rem;
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(139, 92, 246, 0.9));
|
|
color: white;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
border-radius: 999px;
|
|
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
|
|
animation: lucent-float-anim 4s ease-in-out infinite;
|
|
z-index: 10;
|
|
}
|
|
|
|
.lucent-floating-badge-1 {
|
|
top: 10%;
|
|
right: 5%;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.lucent-floating-badge-2 {
|
|
top: 30%;
|
|
left: 5%;
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
.lucent-floating-badge-3 {
|
|
bottom: 20%;
|
|
right: 10%;
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
/* ============================================
|
|
STICKY NAVIGATION & SECTION INDICATOR
|
|
============================================ */
|
|
|
|
.lucent-section-nav {
|
|
position: fixed;
|
|
right: 2rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
z-index: 100;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.lucent-section-nav.visible {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.lucent-section-nav {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.lucent-section-nav-item {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border: 2px solid transparent;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.lucent-section-nav-item::before {
|
|
content: attr(data-section);
|
|
position: absolute;
|
|
right: calc(100% + 1rem);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
padding: 0.5rem 0.75rem;
|
|
background: var(--lucent-dark-secondary);
|
|
color: #f8fafc;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
border-radius: var(--lucent-radius-sm);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.2s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.lucent-section-nav-item:hover::before {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(-50%) translateX(-4px);
|
|
}
|
|
|
|
.lucent-section-nav-item:hover {
|
|
background: rgba(255, 255, 255, 0.5);
|
|
transform: scale(1.3);
|
|
}
|
|
|
|
.lucent-section-nav-item.active {
|
|
background: var(--lucent-primary);
|
|
border-color: rgba(59, 130, 246, 0.3);
|
|
width: 14px;
|
|
height: 14px;
|
|
box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
|
|
}
|
|
|
|
/* Scroll progress ring for section nav */
|
|
.lucent-section-nav-item svg {
|
|
position: absolute;
|
|
top: -4px;
|
|
left: -4px;
|
|
width: 20px;
|
|
height: 20px;
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.lucent-section-nav-item circle {
|
|
fill: none;
|
|
stroke: var(--lucent-primary);
|
|
stroke-width: 2;
|
|
stroke-dasharray: 60;
|
|
stroke-dashoffset: 60;
|
|
transition: stroke-dashoffset 0.3s ease;
|
|
}
|
|
|
|
.lucent-section-nav-item.active circle {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
|
|
/* ============================================
|
|
COOKIE CONSENT BANNER
|
|
============================================ */
|
|
|
|
.lucent-cookie-banner {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 9998;
|
|
background: linear-gradient(145deg, var(--lucent-dark-secondary), var(--lucent-dark-base));
|
|
border-top: 2px solid rgba(59, 130, 246, 0.3);
|
|
padding: 1.5rem;
|
|
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
|
|
transform: translateY(100%);
|
|
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.lucent-cookie-banner.visible {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.lucent-cookie-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 2rem;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.lucent-cookie-content {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
}
|
|
|
|
.lucent-cookie-text {
|
|
flex: 1;
|
|
color: #cbd5e1;
|
|
font-size: 0.9375rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.lucent-cookie-text a {
|
|
color: var(--lucent-primary);
|
|
text-decoration: underline;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.lucent-cookie-text a:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.lucent-cookie-actions {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.lucent-cookie-btn {
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: var(--lucent-radius-md);
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
white-space: nowrap;
|
|
border: none;
|
|
}
|
|
|
|
.lucent-cookie-btn-accept {
|
|
background: var(--lucent-primary);
|
|
color: white;
|
|
}
|
|
|
|
.lucent-cookie-btn-accept:hover {
|
|
background: var(--lucent-primary-dark);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.lucent-cookie-btn-decline {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: #cbd5e1;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.lucent-cookie-btn-decline:hover {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.lucent-cookie-btn-settings {
|
|
background: transparent;
|
|
color: var(--lucent-primary);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.lucent-cookie-btn-settings:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* ============================================
|
|
LIVE CHAT WIDGET
|
|
============================================ */
|
|
|
|
.lucent-chat-widget {
|
|
position: fixed;
|
|
bottom: 2rem;
|
|
right: 6rem;
|
|
z-index: 999;
|
|
}
|
|
|
|
.lucent-chat-button {
|
|
width: 60px;
|
|
height: 60px;
|
|
background: linear-gradient(135deg, var(--lucent-primary), var(--lucent-secondary));
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
cursor: pointer;
|
|
box-shadow:
|
|
0 4px 20px rgba(59, 130, 246, 0.4),
|
|
0 0 0 0 rgba(59, 130, 246, 0.4);
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
border: none;
|
|
animation: lucent-chat-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes lucent-chat-pulse {
|
|
0%, 100% {
|
|
box-shadow:
|
|
0 4px 20px rgba(59, 130, 246, 0.4),
|
|
0 0 0 0 rgba(59, 130, 246, 0.4);
|
|
}
|
|
50% {
|
|
box-shadow:
|
|
0 4px 20px rgba(59, 130, 246, 0.4),
|
|
0 0 0 12px rgba(59, 130, 246, 0);
|
|
}
|
|
}
|
|
|
|
.lucent-chat-button:hover {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 8px 32px rgba(59, 130, 246, 0.5);
|
|
}
|
|
|
|
.lucent-chat-badge {
|
|
position: absolute;
|
|
top: -4px;
|
|
right: -4px;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: var(--lucent-danger);
|
|
border: 2px solid var(--lucent-dark-base);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.625rem;
|
|
font-weight: 700;
|
|
animation: lucent-badge-pop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
}
|
|
|
|
@keyframes lucent-badge-pop {
|
|
0% { transform: scale(0); }
|
|
50% { transform: scale(1.2); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
.lucent-chat-tooltip {
|
|
position: absolute;
|
|
right: calc(100% + 12px);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
padding: 0.625rem 1rem;
|
|
background: var(--lucent-dark-secondary);
|
|
color: #f8fafc;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
border-radius: var(--lucent-radius-md);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.3s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.lucent-chat-button:hover .lucent-chat-tooltip {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(-50%) translateX(-8px);
|
|
}
|
|
|
|
/* ============================================
|
|
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);
|
|
}
|
|
|
|
/* ============================================
|
|
LOADING STATES & SKELETON SCREENS
|
|
============================================ */
|
|
|
|
.lucent-skeleton {
|
|
background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75%);
|
|
background-size: 200% 100%;
|
|
animation: lucent-skeleton-loading 1.5s ease-in-out infinite;
|
|
border-radius: var(--lucent-radius-md);
|
|
}
|
|
|
|
@keyframes lucent-skeleton-loading {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
|
|
.lucent-skeleton-text {
|
|
height: 1rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.lucent-skeleton-title {
|
|
height: 2rem;
|
|
width: 60%;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.lucent-skeleton-card {
|
|
height: 200px;
|
|
}
|
|
|
|
/* Loading spinner */
|
|
.lucent-spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 4px solid rgba(255, 255, 255, 0.1);
|
|
border-top-color: var(--lucent-primary);
|
|
border-radius: 50%;
|
|
animation: lucent-spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes lucent-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* ============================================
|
|
PARTNERS/INTEGRATIONS SHOWCASE
|
|
============================================ */
|
|
|
|
.lucent-partners-section {
|
|
padding: clamp(2.5rem, 6vw, 4rem) 0;
|
|
background: linear-gradient(180deg, var(--background, #0f172a) 0%, var(--background-secondary, #1e293b) 100%);
|
|
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.lucent-partners-label {
|
|
text-align: center;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
opacity: 0.5;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.lucent-partners-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: 2rem;
|
|
align-items: center;
|
|
justify-items: center;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.lucent-partners-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1.5rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.lucent-partners-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 1rem;
|
|
}
|
|
}
|
|
|
|
.lucent-partner-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
opacity: 0.4;
|
|
transition: all 0.3s ease;
|
|
filter: grayscale(1);
|
|
}
|
|
|
|
.lucent-partner-logo:hover {
|
|
opacity: 0.9;
|
|
filter: grayscale(0);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.lucent-partner-logo svg,
|
|
.lucent-partner-logo img {
|
|
max-width: 120px;
|
|
max-height: 40px;
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
/* ============================================
|
|
SOCIAL PROOF INDICATORS
|
|
============================================ */
|
|
|
|
.lucent-social-proof {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 2rem;
|
|
padding: 1.5rem;
|
|
background: rgba(59, 130, 246, 0.05);
|
|
border-radius: var(--lucent-radius-lg);
|
|
margin-top: 2rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.lucent-social-proof-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.lucent-social-proof-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--lucent-primary);
|
|
}
|
|
|
|
.lucent-social-proof-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.lucent-social-proof-value {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
color: var(--lucent-primary);
|
|
}
|
|
|
|
.lucent-social-proof-label {
|
|
font-size: 0.75rem;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* ============================================
|
|
MOBILE ENHANCEMENTS & TOUCH INTERACTIONS
|
|
============================================ */
|
|
|
|
/* Improve touch targets for mobile */
|
|
@media (max-width: 768px) {
|
|
.lucent-btn-primary,
|
|
.lucent-btn-secondary,
|
|
.lucent-action-card,
|
|
.lucent-pricing-cta,
|
|
.lucent-faq-question {
|
|
min-height: 44px; /* WCAG AA compliant touch target */
|
|
}
|
|
|
|
.lucent-hero {
|
|
padding: 3rem 0 4rem;
|
|
}
|
|
|
|
.lucent-hero-title {
|
|
font-size: 2.25rem;
|
|
}
|
|
|
|
.lucent-hero-desc {
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.lucent-hero-cta {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
.lucent-btn-primary,
|
|
.lucent-btn-secondary {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.lucent-hero-highlights {
|
|
grid-template-columns: 1fr;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.lucent-stats-grid {
|
|
gap: 1rem;
|
|
}
|
|
|
|
.lucent-stat-card {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.lucent-chat-widget {
|
|
bottom: 1rem;
|
|
right: 1rem;
|
|
}
|
|
|
|
.lucent-scroll-top {
|
|
bottom: 5rem;
|
|
right: 1rem;
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
}
|
|
|
|
/* Improved scrolling on mobile */
|
|
@media (max-width: 768px) {
|
|
* {
|
|
-webkit-overflow-scrolling: touch;
|
|
scroll-behavior: smooth;
|
|
}
|
|
}
|
|
|
|
/* Touch feedback */
|
|
@media (hover: none) {
|
|
.lucent-btn-primary:active,
|
|
.lucent-btn-secondary:active,
|
|
.lucent-action-card:active {
|
|
transform: scale(0.97);
|
|
}
|
|
|
|
.lucent-stat-card:active,
|
|
.lucent-feature-card:active,
|
|
.lucent-service-card:active {
|
|
transform: scale(0.98);
|
|
}
|
|
}
|
|
|
|
/* Prevent text selection on interactive elements */
|
|
.lucent-btn-primary,
|
|
.lucent-btn-secondary,
|
|
.lucent-action-card,
|
|
.lucent-carousel-btn,
|
|
.lucent-faq-question,
|
|
.lucent-pricing-switch {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* ============================================
|
|
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);
|
|
}
|
|
|
|
/* ============================================
|
|
NEWSLETTER SECTION
|
|
============================================ */
|
|
|
|
.lucent-newsletter-section {
|
|
padding: clamp(3rem, 8vw, 5rem) 0;
|
|
background: linear-gradient(135deg, var(--lucent-dark-base) 0%, var(--lucent-dark-secondary) 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lucent-newsletter-section::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background:
|
|
radial-gradient(ellipse 60% 40% at 30% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
|
|
radial-gradient(ellipse 60% 40% at 70% 50%, rgba(139, 92, 246, 0.08) 0%, transparent 50%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.lucent-newsletter-container {
|
|
max-width: 48rem;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.lucent-newsletter-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
margin: 0 auto 1.5rem;
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
|
|
border: 2px solid rgba(59, 130, 246, 0.4);
|
|
border-radius: var(--lucent-radius-xl);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--lucent-primary);
|
|
}
|
|
|
|
.lucent-newsletter-title {
|
|
font-size: clamp(1.75rem, 4vw, 2.25rem);
|
|
font-weight: 800;
|
|
margin: 0 0 1rem 0;
|
|
color: #f8fafc;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.lucent-newsletter-desc {
|
|
font-size: clamp(1rem, 2vw, 1.125rem);
|
|
line-height: 1.7;
|
|
opacity: 0.85;
|
|
margin: 0 0 2rem 0;
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
.lucent-newsletter-form {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
max-width: 32rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.lucent-newsletter-form {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.lucent-newsletter-input {
|
|
flex: 1;
|
|
padding: 1rem 1.5rem;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border: 2px solid rgba(255, 255, 255, 0.15);
|
|
border-radius: var(--lucent-radius-lg);
|
|
color: #f8fafc;
|
|
font-size: 1rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.lucent-newsletter-input::placeholder {
|
|
color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.lucent-newsletter-input:focus {
|
|
outline: none;
|
|
background: rgba(255, 255, 255, 0.12);
|
|
border-color: var(--lucent-primary);
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
.lucent-newsletter-input:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
.lucent-newsletter-button {
|
|
padding: 1rem 2rem;
|
|
background: linear-gradient(135deg, var(--lucent-primary), var(--lucent-secondary));
|
|
color: white;
|
|
border: none;
|
|
border-radius: var(--lucent-radius-lg);
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
white-space: nowrap;
|
|
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
|
|
}
|
|
|
|
.lucent-newsletter-button:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.5);
|
|
}
|
|
|
|
.lucent-newsletter-button:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.lucent-newsletter-button:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
.lucent-newsletter-privacy {
|
|
margin-top: 1rem;
|
|
font-size: 0.75rem;
|
|
opacity: 0.6;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.lucent-newsletter-privacy a {
|
|
color: var(--lucent-primary);
|
|
text-decoration: underline;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.lucent-newsletter-privacy a:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.lucent-newsletter-message {
|
|
margin-top: 1rem;
|
|
padding: 0.75rem 1rem;
|
|
border-radius: var(--lucent-radius-md);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
display: none;
|
|
}
|
|
|
|
.lucent-newsletter-message.success {
|
|
display: block;
|
|
background: rgba(16, 185, 129, 0.15);
|
|
color: var(--lucent-success);
|
|
border: 1px solid rgba(16, 185, 129, 0.3);
|
|
}
|
|
|
|
.lucent-newsletter-message.error {
|
|
display: block;
|
|
background: rgba(239, 68, 68, 0.15);
|
|
color: var(--lucent-danger);
|
|
border: 1px solid rgba(239, 68, 68, 0.3);
|
|
}
|
|
|
|
/* ============================================
|
|
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">
|
|
<!-- Skip to main content link for accessibility -->
|
|
<a href="#main-content" class="lucent-skip-link">Skip to main content</a>
|
|
|
|
<!-- Limited Time Offer Banner -->
|
|
@if(theme('offer_banner_enabled', false))
|
|
<div class="lucent-offer-banner" role="banner" aria-label="Special offer notification">
|
|
<span>{{ theme('offer_text', '🔥 Limited Time: Get 50% OFF on all Annual Plans!') }}</span>
|
|
<div class="lucent-countdown" id="offerCountdown" aria-label="Offer expires in">
|
|
<div class="lucent-countdown-item">
|
|
<span class="lucent-countdown-value" id="countdown-days">00</span>
|
|
<span class="lucent-countdown-label">Days</span>
|
|
</div>
|
|
<div class="lucent-countdown-item">
|
|
<span class="lucent-countdown-value" id="countdown-hours">00</span>
|
|
<span class="lucent-countdown-label">Hours</span>
|
|
</div>
|
|
<div class="lucent-countdown-item">
|
|
<span class="lucent-countdown-value" id="countdown-mins">00</span>
|
|
<span class="lucent-countdown-label">Mins</span>
|
|
</div>
|
|
<div class="lucent-countdown-item">
|
|
<span class="lucent-countdown-value" id="countdown-secs">00</span>
|
|
<span class="lucent-countdown-label">Secs</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- 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" role="banner" aria-label="Homepage hero section">
|
|
<!-- Optional Video Background -->
|
|
@if(theme('hero_video_enabled', false) && theme('hero_video_url'))
|
|
<video class="lucent-hero-video" autoplay muted loop playsinline aria-hidden="true">
|
|
<source src="{{ theme('hero_video_url') }}" type="video/mp4">
|
|
</video>
|
|
<div class="lucent-hero-video-overlay" aria-hidden="true"></div>
|
|
@endif
|
|
|
|
<!-- Grid Background -->
|
|
<div class="lucent-hero-grid" aria-hidden="true"></div>
|
|
|
|
<!-- Animated Orbs -->
|
|
<div class="lucent-orb lucent-orb-1" aria-hidden="true"></div>
|
|
<div class="lucent-orb lucent-orb-2" aria-hidden="true"></div>
|
|
<div class="lucent-orb lucent-orb-3" aria-hidden="true"></div>
|
|
|
|
<!-- Floating Particles -->
|
|
<div class="lucent-particles" aria-hidden="true">
|
|
<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" role="status" aria-label="Technology badge">
|
|
<span class="lucent-live-indicator" aria-label="Live status indicator">
|
|
<span class="lucent-live-dot" aria-hidden="true"></span>
|
|
</span>
|
|
<x-ri-server-line class="size-4" aria-hidden="true" />
|
|
<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" aria-label="highlighted text">
|
|
{{ 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 id="main-content" class="lucent-stats-section" role="region" aria-labelledby="stats-heading">
|
|
<div class="container mx-auto px-4">
|
|
<h2 id="stats-heading" class="sr-only">Platform Statistics</h2>
|
|
<div class="lucent-stats-grid">
|
|
<article class="lucent-stat-card lucent-fade-in" data-color="success" role="article" aria-label="Uptime SLA statistic">
|
|
<div class="lucent-stat-icon" aria-hidden="true">
|
|
<x-ri-timer-line class="size-8" />
|
|
</div>
|
|
<div class="lucent-stat-value" aria-live="polite">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>
|
|
</article>
|
|
|
|
<article class="lucent-stat-card lucent-fade-in lucent-fade-in-delay-1" data-color="primary" role="article" aria-label="Technical support availability">
|
|
<div class="lucent-stat-icon" aria-hidden="true">
|
|
<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>
|
|
</article>
|
|
|
|
<article class="lucent-stat-card lucent-fade-in lucent-fade-in-delay-2" data-color="purple" role="article" aria-label="Active users count">
|
|
<div class="lucent-stat-icon" aria-hidden="true">
|
|
<x-ri-user-3-line class="size-8" />
|
|
</div>
|
|
<div class="lucent-stat-value" aria-live="polite">{{ 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>
|
|
</article>
|
|
|
|
<article class="lucent-stat-card lucent-fade-in lucent-fade-in-delay-3" data-color="orange" role="article" aria-label="VPS instances deployed">
|
|
<div class="lucent-stat-icon" aria-hidden="true">
|
|
<x-ri-server-line class="size-8" />
|
|
</div>
|
|
<div class="lucent-stat-value" aria-live="polite">{{ 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>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Customer Logos Carousel -->
|
|
@if(theme('customer_logos_enabled', true))
|
|
<section class="lucent-customers-section" role="region" aria-label="Our customers">
|
|
<div class="container mx-auto px-4">
|
|
<div class="lucent-customers-label text-color-muted">
|
|
{{ theme('customers_label', 'Trusted by Developers & Businesses Worldwide') }}
|
|
</div>
|
|
<div class="lucent-logos-carousel">
|
|
<div class="lucent-logos-track">
|
|
@for($i = 0; $i < 2; $i++)
|
|
<div class="lucent-customer-logo text-color-base">
|
|
<svg width="140" height="60" viewBox="0 0 140 60" fill="currentColor">
|
|
<text x="20" y="35" font-family="Arial" font-size="18" font-weight="700">TechCorp</text>
|
|
</svg>
|
|
</div>
|
|
<div class="lucent-customer-logo text-color-base">
|
|
<svg width="140" height="60" viewBox="0 0 140 60" fill="currentColor">
|
|
<text x="15" y="35" font-family="Arial" font-size="18" font-weight="700">DataFlow</text>
|
|
</svg>
|
|
</div>
|
|
<div class="lucent-customer-logo text-color-base">
|
|
<svg width="140" height="60" viewBox="0 0 140 60" fill="currentColor">
|
|
<text x="10" y="35" font-family="Arial" font-size="18" font-weight="700">CloudScale</text>
|
|
</svg>
|
|
</div>
|
|
<div class="lucent-customer-logo text-color-base">
|
|
<svg width="140" height="60" viewBox="0 0 140 60" fill="currentColor">
|
|
<text x="15" y="35" font-family="Arial" font-size="18" font-weight="700">DevStart</text>
|
|
</svg>
|
|
</div>
|
|
<div class="lucent-customer-logo text-color-base">
|
|
<svg width="140" height="60" viewBox="0 0 140 60" fill="currentColor">
|
|
<text x="10" y="35" font-family="Arial" font-size="18" font-weight="700">AppStream</text>
|
|
</svg>
|
|
</div>
|
|
<div class="lucent-customer-logo text-color-base">
|
|
<svg width="140" height="60" viewBox="0 0 140 60" fill="currentColor">
|
|
<text x="12" y="35" font-family="Arial" font-size="18" font-weight="700">GameHost</text>
|
|
</svg>
|
|
</div>
|
|
@endfor
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endif
|
|
|
|
<!-- Social Proof Section -->
|
|
@if(theme('social_proof_enabled', true))
|
|
<section class="lucent-stats-section" style="padding: clamp(2rem, 5vw, 3rem) 0;">
|
|
<div class="container mx-auto px-4">
|
|
<div class="lucent-social-proof">
|
|
<div class="lucent-social-proof-item">
|
|
<div class="lucent-social-proof-icon" aria-hidden="true">
|
|
<x-ri-star-fill class="size-5" />
|
|
</div>
|
|
<div class="lucent-social-proof-text text-color-base">
|
|
<div class="lucent-social-proof-value">4.9/5</div>
|
|
<div class="lucent-social-proof-label text-color-muted">Trustpilot Rating</div>
|
|
</div>
|
|
</div>
|
|
<div class="lucent-social-proof-item">
|
|
<div class="lucent-social-proof-icon" aria-hidden="true">
|
|
<x-ri-thumb-up-fill class="size-5" />
|
|
</div>
|
|
<div class="lucent-social-proof-text text-color-base">
|
|
<div class="lucent-social-proof-value">98%</div>
|
|
<div class="lucent-social-proof-label text-color-muted">Customer Satisfaction</div>
|
|
</div>
|
|
</div>
|
|
<div class="lucent-social-proof-item">
|
|
<div class="lucent-social-proof-icon" aria-hidden="true">
|
|
<x-ri-award-fill class="size-5" />
|
|
</div>
|
|
<div class="lucent-social-proof-text text-color-base">
|
|
<div class="lucent-social-proof-value">ISO 27001</div>
|
|
<div class="lucent-social-proof-label text-color-muted">Security Certified</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endif
|
|
|
|
<!-- Trust Indicators Section -->
|
|
<section class="lucent-trust-section" role="region" aria-label="Trust and security indicators">
|
|
<div class="container mx-auto px-4">
|
|
<div class="lucent-trust-header">
|
|
<div class="lucent-trust-label text-color-muted">{{ theme('trust_label', 'Trusted & Certified') }}</div>
|
|
</div>
|
|
<div class="lucent-trust-grid">
|
|
<div class="lucent-trust-badge" role="img" aria-label="ISO 27001 certified">
|
|
<div class="lucent-trust-icon">
|
|
<x-ri-shield-check-fill class="size-10" />
|
|
</div>
|
|
<div class="lucent-trust-text text-color-base">ISO 27001<br>Certified</div>
|
|
</div>
|
|
<div class="lucent-trust-badge" role="img" aria-label="GDPR compliant">
|
|
<div class="lucent-trust-icon">
|
|
<x-ri-lock-password-fill class="size-10" />
|
|
</div>
|
|
<div class="lucent-trust-text text-color-base">GDPR<br>Compliant</div>
|
|
</div>
|
|
<div class="lucent-trust-badge" role="img" aria-label="99.9 percent uptime SLA">
|
|
<div class="lucent-trust-icon">
|
|
<x-ri-time-fill class="size-10" />
|
|
</div>
|
|
<div class="lucent-trust-text text-color-base">99.9% Uptime<br>SLA</div>
|
|
</div>
|
|
<div class="lucent-trust-badge" role="img" aria-label="24/7 support available">
|
|
<div class="lucent-trust-icon">
|
|
<x-ri-customer-service-2-fill class="size-10" />
|
|
</div>
|
|
<div class="lucent-trust-text text-color-base">24/7<br>Support</div>
|
|
</div>
|
|
<div class="lucent-trust-badge" role="img" aria-label="DDoS protected network">
|
|
<div class="lucent-trust-icon">
|
|
<x-ri-shield-flash-fill class="size-10" />
|
|
</div>
|
|
<div class="lucent-trust-text text-color-base">DDoS<br>Protected</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Partners & Integrations Section -->
|
|
@if(theme('partners_enabled', true))
|
|
<section class="lucent-partners-section" role="region" aria-label="Technology partners and integrations">
|
|
<div class="container mx-auto px-4">
|
|
<div class="lucent-partners-label text-color-muted">
|
|
{{ theme('partners_label', 'Powered by Industry-Leading Technology') }}
|
|
</div>
|
|
<div class="lucent-partners-grid">
|
|
<div class="lucent-partner-logo text-color-base" role="img" aria-label="KVM Hypervisor">
|
|
<svg width="120" height="40" viewBox="0 0 120 40" fill="currentColor" opacity="0.6">
|
|
<text x="10" y="28" font-family="Arial, sans-serif" font-size="24" font-weight="700">KVM</text>
|
|
</svg>
|
|
</div>
|
|
<div class="lucent-partner-logo text-color-base" role="img" aria-label="Proxmox">
|
|
<svg width="120" height="40" viewBox="0 0 120 40" fill="currentColor" opacity="0.6">
|
|
<text x="5" y="28" font-family="Arial, sans-serif" font-size="20" font-weight="600">Proxmox</text>
|
|
</svg>
|
|
</div>
|
|
<div class="lucent-partner-logo text-color-base" role="img" aria-label="Linux">
|
|
<svg width="120" height="40" viewBox="0 0 120 40" fill="currentColor" opacity="0.6">
|
|
<text x="15" y="28" font-family="Arial, sans-serif" font-size="24" font-weight="700">Linux</text>
|
|
</svg>
|
|
</div>
|
|
<div class="lucent-partner-logo text-color-base" role="img" aria-label="NVMe">
|
|
<svg width="120" height="40" viewBox="0 0 120 40" fill="currentColor" opacity="0.6">
|
|
<text x="10" y="28" font-family="Arial, sans-serif" font-size="24" font-weight="700">NVMe</text>
|
|
</svg>
|
|
</div>
|
|
<div class="lucent-partner-logo text-color-base" role="img" aria-label="AMD EPYC">
|
|
<svg width="120" height="40" viewBox="0 0 120 40" fill="currentColor" opacity="0.6">
|
|
<text x="5" y="28" font-family="Arial, sans-serif" font-size="18" font-weight="700">AMD EPYC</text>
|
|
</svg>
|
|
</div>
|
|
<div class="lucent-partner-logo text-color-base" role="img" aria-label="Intel Xeon">
|
|
<svg width="120" height="40" viewBox="0 0 120 40" fill="currentColor" opacity="0.6">
|
|
<text x="0" y="28" font-family="Arial, sans-serif" font-size="16" font-weight="700">Intel Xeon</text>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endif
|
|
|
|
<!-- Decorative Divider -->
|
|
<div class="lucent-section-divider">
|
|
<div class="lucent-section-divider-icon" aria-hidden="true">
|
|
<x-ri-server-line class="size-5" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Node Status Section - KVM Infrastructure -->
|
|
<section class="lucent-nodes-section" role="region" aria-labelledby="nodes-heading">
|
|
<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>
|
|
|
|
<!-- How It Works - Process Timeline -->
|
|
@if(theme('process_timeline_enabled', true))
|
|
<section class="lucent-process-section" role="region" aria-labelledby="process-heading">
|
|
<div class="container mx-auto px-4">
|
|
<div class="lucent-section-header">
|
|
<h2 id="process-heading" class="lucent-section-title text-color-base">
|
|
{{ theme('process_title', 'How It Works') }}
|
|
</h2>
|
|
<p class="lucent-section-subtitle text-color-muted">
|
|
{{ theme('process_subtitle', 'Get your VPS up and running in minutes with our streamlined deployment process') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="lucent-process-timeline">
|
|
<div class="lucent-process-line" aria-hidden="true"></div>
|
|
|
|
<div class="lucent-process-step lucent-fade-in">
|
|
<div class="lucent-process-number" aria-hidden="true">1</div>
|
|
<div class="lucent-process-content">
|
|
<div class="lucent-process-icon" aria-hidden="true">
|
|
<x-ri-user-add-line class="size-6" />
|
|
</div>
|
|
<h3 class="lucent-process-title text-color-base">{{ theme('process_1_title', 'Create Account') }}</h3>
|
|
<p class="lucent-process-desc text-color-muted">{{ theme('process_1_desc', 'Sign up in seconds with your email. No credit card required for browsing plans. Verify your email and gain instant access to the control panel.') }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lucent-process-step lucent-fade-in">
|
|
<div class="lucent-process-number" aria-hidden="true">2</div>
|
|
<div class="lucent-process-content">
|
|
<div class="lucent-process-icon" aria-hidden="true">
|
|
<x-ri-shopping-cart-line class="size-6" />
|
|
</div>
|
|
<h3 class="lucent-process-title text-color-base">{{ theme('process_2_title', 'Choose Your Plan') }}</h3>
|
|
<p class="lucent-process-desc text-color-muted">{{ theme('process_2_desc', 'Select from our range of VPS plans based on your CPU, RAM, and storage needs. Configure your server location, OS template, and any add-ons.') }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lucent-process-step lucent-fade-in">
|
|
<div class="lucent-process-number" aria-hidden="true">3</div>
|
|
<div class="lucent-process-content">
|
|
<div class="lucent-process-icon" aria-hidden="true">
|
|
<x-ri-settings-3-line class="size-6" />
|
|
</div>
|
|
<h3 class="lucent-process-title text-color-base">{{ theme('process_3_title', 'Configure & Deploy') }}</h3>
|
|
<p class="lucent-process-desc text-color-muted">{{ theme('process_3_desc', 'Choose your operating system, set hostname, configure SSH keys, and click deploy. Your VPS provisions automatically within 2-5 minutes.') }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lucent-process-step lucent-fade-in">
|
|
<div class="lucent-process-number" aria-hidden="true">4</div>
|
|
<div class="lucent-process-content">
|
|
<div class="lucent-process-icon" aria-hidden="true">
|
|
<x-ri-rocket-line class="size-6" />
|
|
</div>
|
|
<h3 class="lucent-process-title text-color-base">{{ theme('process_4_title', 'Launch & Manage') }}</h3>
|
|
<p class="lucent-process-desc text-color-muted">{{ theme('process_4_desc', 'Access your VPS via SSH or VNC console, configure firewall rules, monitor real-time metrics, and scale resources as needed—all from your browser.') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endif
|
|
|
|
<!-- Security Features Showcase -->
|
|
@if(theme('security_showcase_enabled', true))
|
|
<section class="lucent-security-section" role="region" aria-labelledby="security-heading">
|
|
<div class="container mx-auto px-4">
|
|
<div class="lucent-section-header">
|
|
<h2 id="security-heading" class="lucent-section-title" style="color: #f8fafc;">
|
|
{{ theme('security_title', 'Enterprise Security') }}
|
|
</h2>
|
|
<p class="lucent-section-subtitle" style="color: #94a3b8;">
|
|
{{ theme('security_subtitle', 'Multi-layered security protecting your infrastructure 24/7') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="lucent-security-grid">
|
|
<div class="lucent-security-card lucent-fade-in">
|
|
<div class="lucent-security-icon" aria-hidden="true">
|
|
<x-ri-shield-keyhole-fill class="size-8" />
|
|
</div>
|
|
<h3 class="lucent-security-title">DDoS Protection</h3>
|
|
<p class="lucent-security-desc">{{ theme('security_1_desc', 'Always-on DDoS mitigation with 10Tbps+ scrubbing capacity') }}</p>
|
|
</div>
|
|
<div class="lucent-security-card lucent-fade-in lucent-fade-in-delay-1">
|
|
<div class="lucent-security-icon" aria-hidden="true">
|
|
<x-ri-lock-password-fill class="size-8" />
|
|
</div>
|
|
<h3 class="lucent-security-title">Data Encryption</h3>
|
|
<p class="lucent-security-desc">{{ theme('security_2_desc', 'AES-256 encryption for data at rest and TLS 1.3 in transit') }}</p>
|
|
</div>
|
|
<div class="lucent-security-card lucent-fade-in lucent-fade-in-delay-2">
|
|
<div class="lucent-security-icon" aria-hidden="true">
|
|
<x-ri-eye-off-fill class="size-8" />
|
|
</div>
|
|
<h3 class="lucent-security-title">Private Network</h3>
|
|
<p class="lucent-security-desc">{{ theme('security_3_desc', 'Isolated VLANs for secure inter-VPS communication') }}</p>
|
|
</div>
|
|
<div class="lucent-security-card lucent-fade-in lucent-fade-in-delay-3">
|
|
<div class="lucent-security-icon" aria-hidden="true">
|
|
<x-ri-file-shield-2-fill class="size-8" />
|
|
</div>
|
|
<h3 class="lucent-security-title">Compliance</h3>
|
|
<p class="lucent-security-desc">{{ theme('security_4_desc', 'ISO 27001, GDPR, SOC 2 Type II certified infrastructure') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endif
|
|
|
|
<!-- Decorative Divider -->
|
|
<div class="lucent-section-divider">
|
|
<div class="lucent-section-divider-icon" aria-hidden="true">
|
|
<x-ri-box-3-line class="size-5" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- Pricing Comparison Section -->
|
|
@if(theme('pricing_comparison_enabled', true))
|
|
<section class="lucent-pricing-section" role="region" aria-labelledby="pricing-heading">
|
|
<div class="container mx-auto px-4">
|
|
<div class="lucent-section-header">
|
|
<h2 id="pricing-heading" class="lucent-section-title text-color-base">
|
|
{{ theme('pricing_title', 'Transparent Pricing') }}
|
|
</h2>
|
|
<p class="lucent-section-subtitle text-color-muted">
|
|
{{ theme('pricing_subtitle', 'Choose the perfect plan for your needs. All plans include full KVM virtualization and 24/7 support.') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="lucent-pricing-toggle">
|
|
<span class="lucent-pricing-label active text-color-base" data-period="monthly">Monthly</span>
|
|
<button class="lucent-pricing-switch" id="pricingToggle" role="switch" aria-checked="false" aria-label="Toggle between monthly and annual pricing">
|
|
<span class="lucent-pricing-switch-slider"></span>
|
|
</button>
|
|
<span class="lucent-pricing-label text-color-base" data-period="annual">
|
|
Annual
|
|
<span class="lucent-pricing-badge">Save 20%</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="lucent-pricing-grid lucent-fade-in">
|
|
<!-- Starter Plan -->
|
|
<article class="lucent-pricing-card" role="article">
|
|
<div class="lucent-pricing-header">
|
|
<h3 class="lucent-pricing-name text-color-base">{{ theme('plan_1_name', 'Starter') }}</h3>
|
|
<div class="lucent-pricing-price">
|
|
<span class="lucent-pricing-price-currency">$</span><span data-monthly="12" data-annual="10">12</span>
|
|
</div>
|
|
<div class="lucent-pricing-period text-color-muted">per month</div>
|
|
</div>
|
|
<ul class="lucent-pricing-features">
|
|
<li class="lucent-pricing-feature text-color-muted">
|
|
<span class="lucent-pricing-feature-icon"><x-ri-check-line class="size-3" /></span>
|
|
<span>2 vCPU Cores</span>
|
|
</li>
|
|
<li class="lucent-pricing-feature text-color-muted">
|
|
<span class="lucent-pricing-feature-icon"><x-ri-check-line class="size-3" /></span>
|
|
<span>4 GB RAM</span>
|
|
</li>
|
|
<li class="lucent-pricing-feature text-color-muted">
|
|
<span class="lucent-pricing-feature-icon"><x-ri-check-line class="size-3" /></span>
|
|
<span>80 GB NVMe SSD</span>
|
|
</li>
|
|
<li class="lucent-pricing-feature text-color-muted">
|
|
<span class="lucent-pricing-feature-icon"><x-ri-check-line class="size-3" /></span>
|
|
<span>4 TB Transfer</span>
|
|
</li>
|
|
<li class="lucent-pricing-feature text-color-muted">
|
|
<span class="lucent-pricing-feature-icon"><x-ri-check-line class="size-3" /></span>
|
|
<span>1 IPv4 & /64 IPv6</span>
|
|
</li>
|
|
</ul>
|
|
<a href="{{ route('products.index') }}" class="lucent-pricing-cta" wire:navigate>Get Started</a>
|
|
</article>
|
|
|
|
<!-- Professional Plan (Featured) -->
|
|
<article class="lucent-pricing-card featured" role="article">
|
|
<div class="lucent-pricing-header">
|
|
<h3 class="lucent-pricing-name text-color-base">{{ theme('plan_2_name', 'Professional') }}</h3>
|
|
<div class="lucent-pricing-price">
|
|
<span class="lucent-pricing-price-currency">$</span><span data-monthly="24" data-annual="19">24</span>
|
|
</div>
|
|
<div class="lucent-pricing-period text-color-muted">per month</div>
|
|
</div>
|
|
<ul class="lucent-pricing-features">
|
|
<li class="lucent-pricing-feature text-color-muted">
|
|
<span class="lucent-pricing-feature-icon"><x-ri-check-line class="size-3" /></span>
|
|
<span>4 vCPU Cores</span>
|
|
</li>
|
|
<li class="lucent-pricing-feature text-color-muted">
|
|
<span class="lucent-pricing-feature-icon"><x-ri-check-line class="size-3" /></span>
|
|
<span>8 GB RAM</span>
|
|
</li>
|
|
<li class="lucent-pricing-feature text-color-muted">
|
|
<span class="lucent-pricing-feature-icon"><x-ri-check-line class="size-3" /></span>
|
|
<span>160 GB NVMe SSD</span>
|
|
</li>
|
|
<li class="lucent-pricing-feature text-color-muted">
|
|
<span class="lucent-pricing-feature-icon"><x-ri-check-line class="size-3" /></span>
|
|
<span>8 TB Transfer</span>
|
|
</li>
|
|
<li class="lucent-pricing-feature text-color-muted">
|
|
<span class="lucent-pricing-feature-icon"><x-ri-check-line class="size-3" /></span>
|
|
<span>2 IPv4 & /64 IPv6</span>
|
|
</li>
|
|
<li class="lucent-pricing-feature text-color-muted">
|
|
<span class="lucent-pricing-feature-icon"><x-ri-check-line class="size-3" /></span>
|
|
<span>Priority Support</span>
|
|
</li>
|
|
</ul>
|
|
<a href="{{ route('products.index') }}" class="lucent-pricing-cta" wire:navigate>Get Started</a>
|
|
</article>
|
|
|
|
<!-- Enterprise Plan -->
|
|
<article class="lucent-pricing-card" role="article">
|
|
<div class="lucent-pricing-header">
|
|
<h3 class="lucent-pricing-name text-color-base">{{ theme('plan_3_name', 'Enterprise') }}</h3>
|
|
<div class="lucent-pricing-price">
|
|
<span class="lucent-pricing-price-currency">$</span><span data-monthly="48" data-annual="38">48</span>
|
|
</div>
|
|
<div class="lucent-pricing-period text-color-muted">per month</div>
|
|
</div>
|
|
<ul class="lucent-pricing-features">
|
|
<li class="lucent-pricing-feature text-color-muted">
|
|
<span class="lucent-pricing-feature-icon"><x-ri-check-line class="size-3" /></span>
|
|
<span>8 vCPU Cores</span>
|
|
</li>
|
|
<li class="lucent-pricing-feature text-color-muted">
|
|
<span class="lucent-pricing-feature-icon"><x-ri-check-line class="size-3" /></span>
|
|
<span>16 GB RAM</span>
|
|
</li>
|
|
<li class="lucent-pricing-feature text-color-muted">
|
|
<span class="lucent-pricing-feature-icon"><x-ri-check-line class="size-3" /></span>
|
|
<span>320 GB NVMe SSD</span>
|
|
</li>
|
|
<li class="lucent-pricing-feature text-color-muted">
|
|
<span class="lucent-pricing-feature-icon"><x-ri-check-line class="size-3" /></span>
|
|
<span>16 TB Transfer</span>
|
|
</li>
|
|
<li class="lucent-pricing-feature text-color-muted">
|
|
<span class="lucent-pricing-feature-icon"><x-ri-check-line class="size-3" /></span>
|
|
<span>4 IPv4 & /56 IPv6</span>
|
|
</li>
|
|
<li class="lucent-pricing-feature text-color-muted">
|
|
<span class="lucent-pricing-feature-icon"><x-ri-check-line class="size-3" /></span>
|
|
<span>Dedicated Support</span>
|
|
</li>
|
|
</ul>
|
|
<a href="{{ route('products.index') }}" class="lucent-pricing-cta" wire:navigate>Get Started</a>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endif
|
|
|
|
<!-- Feature Comparison Matrix -->
|
|
@if(theme('comparison_matrix_enabled', true))
|
|
<section class="lucent-comparison-section" role="region" aria-labelledby="comparison-heading">
|
|
<div class="container mx-auto px-4">
|
|
<div class="lucent-section-header">
|
|
<h2 id="comparison-heading" class="lucent-section-title text-color-base">
|
|
{{ theme('comparison_title', 'Plan Comparison') }}
|
|
</h2>
|
|
<p class="lucent-section-subtitle text-color-muted">
|
|
{{ theme('comparison_subtitle', 'Compare features across all VPS hosting plans') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="lucent-comparison-table-wrapper lucent-fade-in">
|
|
<table class="lucent-comparison-table" role="table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Feature</th>
|
|
<th scope="col">Starter</th>
|
|
<th scope="col">Professional</th>
|
|
<th scope="col">Enterprise</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="text-color-base font-semibold">vCPU Cores</td>
|
|
<td class="text-color-muted">2 Cores</td>
|
|
<td class="text-color-muted">4 Cores</td>
|
|
<td class="text-color-muted">8 Cores</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-color-base font-semibold">RAM</td>
|
|
<td class="text-color-muted">4 GB</td>
|
|
<td class="text-color-muted">8 GB</td>
|
|
<td class="text-color-muted">16 GB</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-color-base font-semibold">NVMe Storage</td>
|
|
<td class="text-color-muted">80 GB</td>
|
|
<td class="text-color-muted">160 GB</td>
|
|
<td class="text-color-muted">320 GB</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-color-base font-semibold">Bandwidth</td>
|
|
<td class="text-color-muted">4 TB</td>
|
|
<td class="text-color-muted">8 TB</td>
|
|
<td class="text-color-muted">16 TB</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-color-base font-semibold">Full Root Access</td>
|
|
<td><span class="lucent-comparison-check"><x-ri-check-line class="size-4" /></span></td>
|
|
<td><span class="lucent-comparison-check"><x-ri-check-line class="size-4" /></span></td>
|
|
<td><span class="lucent-comparison-check"><x-ri-check-line class="size-4" /></span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-color-base font-semibold">VNC Console</td>
|
|
<td><span class="lucent-comparison-check"><x-ri-check-line class="size-4" /></span></td>
|
|
<td><span class="lucent-comparison-check"><x-ri-check-line class="size-4" /></span></td>
|
|
<td><span class="lucent-comparison-check"><x-ri-check-line class="size-4" /></span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-color-base font-semibold">Firewall Control</td>
|
|
<td><span class="lucent-comparison-check"><x-ri-check-line class="size-4" /></span></td>
|
|
<td><span class="lucent-comparison-check"><x-ri-check-line class="size-4" /></span></td>
|
|
<td><span class="lucent-comparison-check"><x-ri-check-line class="size-4" /></span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-color-base font-semibold">Snapshots</td>
|
|
<td class="text-color-muted">2 per month</td>
|
|
<td class="text-color-muted">10 per month</td>
|
|
<td class="text-color-muted">Unlimited</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-color-base font-semibold">Automated Backups</td>
|
|
<td><span class="lucent-comparison-cross"><x-ri-close-line class="size-4" /></span></td>
|
|
<td><span class="lucent-comparison-check"><x-ri-check-line class="size-4" /></span></td>
|
|
<td><span class="lucent-comparison-check"><x-ri-check-line class="size-4" /></span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-color-base font-semibold">IPv4 Addresses</td>
|
|
<td class="text-color-muted">1</td>
|
|
<td class="text-color-muted">2</td>
|
|
<td class="text-color-muted">4</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-color-base font-semibold">Support Priority</td>
|
|
<td class="text-color-muted">Standard</td>
|
|
<td class="text-color-muted">Priority</td>
|
|
<td class="text-color-muted">Dedicated</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-color-base font-semibold">SLA Uptime</td>
|
|
<td class="text-color-muted">99.5%</td>
|
|
<td class="text-color-muted">99.9%</td>
|
|
<td class="text-color-muted">99.99%</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endif
|
|
|
|
<!-- Community Section -->
|
|
<section class="lucent-community-section" role="region" aria-labelledby="community-heading">
|
|
<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>
|
|
|
|
<!-- Performance Metrics Visualization -->
|
|
@if(theme('performance_metrics_enabled', true))
|
|
<section class="lucent-performance-section" role="region" aria-labelledby="performance-heading">
|
|
<div class="container mx-auto px-4">
|
|
<div class="lucent-section-header">
|
|
<h2 id="performance-heading" class="lucent-section-title" style="color: #f8fafc;">
|
|
{{ theme('performance_title', 'Blazing Fast Performance') }}
|
|
</h2>
|
|
<p class="lucent-section-subtitle" style="color: #cbd5e1;">
|
|
{{ theme('performance_subtitle', 'Optimized infrastructure delivering exceptional speed and reliability') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="lucent-performance-grid">
|
|
<div class="lucent-metric-card lucent-fade-in">
|
|
<div class="lucent-metric-value" data-metric-target="7000">0</div>
|
|
<div class="lucent-metric-label">MB/s Read Speed</div>
|
|
<div class="lucent-metric-sublabel">NVMe SSD Performance</div>
|
|
</div>
|
|
<div class="lucent-metric-card lucent-fade-in lucent-fade-in-delay-1">
|
|
<div class="lucent-metric-value" data-metric-target="10">0</div>
|
|
<div class="lucent-metric-label">Gbps Network</div>
|
|
<div class="lucent-metric-sublabel">Dedicated Bandwidth</div>
|
|
</div>
|
|
<div class="lucent-metric-card lucent-fade-in lucent-fade-in-delay-2">
|
|
<div class="lucent-metric-value" data-metric-target="3"><1</div>
|
|
<div class="lucent-metric-label">ms Latency</div>
|
|
<div class="lucent-metric-sublabel">Local Network Ping</div>
|
|
</div>
|
|
<div class="lucent-metric-card lucent-fade-in lucent-fade-in-delay-3">
|
|
<div class="lucent-metric-value" data-metric-target="120">0</div>
|
|
<div class="lucent-metric-label">Seconds Deploy</div>
|
|
<div class="lucent-metric-sublabel">Average Provision Time</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endif
|
|
|
|
<!-- Testimonials Carousel -->
|
|
@if(theme('testimonials_enabled', true))
|
|
<section class="lucent-testimonials-section" role="region" aria-labelledby="testimonials-heading">
|
|
<div class="container mx-auto px-4">
|
|
<div class="lucent-section-header">
|
|
<h2 id="testimonials-heading" class="lucent-section-title" style="color: #f8fafc;">
|
|
{{ theme('testimonials_title', 'What Our Clients Say') }}
|
|
</h2>
|
|
<p class="lucent-section-subtitle" style="color: #94a3b8;">
|
|
{{ theme('testimonials_subtitle', 'Join thousands of satisfied developers and businesses') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="lucent-testimonials-carousel">
|
|
<div class="lucent-testimonials-track" role="region" aria-live="polite" aria-atomic="true">
|
|
<div class="lucent-testimonial-slide active" data-slide="0">
|
|
<x-ri-double-quotes-l class="lucent-testimonial-quote-icon" aria-hidden="true" />
|
|
<blockquote class="lucent-testimonial-text">
|
|
"{{ theme('testimonial_1_text', 'Migrated our entire infrastructure to their KVM-based VPS platform. The performance improvement was immediate—page load times dropped by 40%. The control panel is intuitive, and the firewall features give us enterprise-grade security without the complexity.') }}"
|
|
</blockquote>
|
|
<div class="lucent-testimonial-author">
|
|
<div class="lucent-testimonial-avatar" aria-hidden="true">DM</div>
|
|
<div class="lucent-testimonial-info">
|
|
<div class="lucent-testimonial-name">David Morrison</div>
|
|
<div class="lucent-testimonial-role">CTO</div>
|
|
<div class="lucent-testimonial-company">TechStart Inc.</div>
|
|
</div>
|
|
<div class="lucent-testimonial-rating" aria-label="5 star rating">
|
|
<x-ri-star-fill class="size-5" />
|
|
<x-ri-star-fill class="size-5" />
|
|
<x-ri-star-fill class="size-5" />
|
|
<x-ri-star-fill class="size-5" />
|
|
<x-ri-star-fill class="size-5" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lucent-testimonial-slide" data-slide="1">
|
|
<x-ri-double-quotes-l class="lucent-testimonial-quote-icon" aria-hidden="true" />
|
|
<blockquote class="lucent-testimonial-text">
|
|
"{{ theme('testimonial_2_text', 'The snapshot feature has saved our business multiple times. Being able to test major updates in a cloned environment and rollback instantly gave us the confidence to innovate faster. Support team is incredibly knowledgeable—responses within minutes.') }}"
|
|
</blockquote>
|
|
<div class="lucent-testimonial-author">
|
|
<div class="lucent-testimonial-avatar" style="background: linear-gradient(135deg, #10b981, #059669);" aria-hidden="true">AL</div>
|
|
<div class="lucent-testimonial-info">
|
|
<div class="lucent-testimonial-name">Amanda Lee</div>
|
|
<div class="lucent-testimonial-role">DevOps Lead</div>
|
|
<div class="lucent-testimonial-company">CloudScale Solutions</div>
|
|
</div>
|
|
<div class="lucent-testimonial-rating" aria-label="5 star rating">
|
|
<x-ri-star-fill class="size-5" />
|
|
<x-ri-star-fill class="size-5" />
|
|
<x-ri-star-fill class="size-5" />
|
|
<x-ri-star-fill class="size-5" />
|
|
<x-ri-star-fill class="size-5" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lucent-testimonial-slide" data-slide="2">
|
|
<x-ri-double-quotes-l class="lucent-testimonial-quote-icon" aria-hidden="true" />
|
|
<blockquote class="lucent-testimonial-text">
|
|
"{{ theme('testimonial_3_text', 'As a solo developer, I needed affordable hosting without compromising on performance. The VNC console access has been invaluable for recovery situations. Scaling from 1 to 12 VPS instances was seamless. Best price-to-performance ratio I have found.') }}"
|
|
</blockquote>
|
|
<div class="lucent-testimonial-author">
|
|
<div class="lucent-testimonial-avatar" style="background: linear-gradient(135deg, #f59e0b, #d97706);" aria-hidden="true">RC</div>
|
|
<div class="lucent-testimonial-info">
|
|
<div class="lucent-testimonial-name">Roberto Chen</div>
|
|
<div class="lucent-testimonial-role">Full-Stack Developer</div>
|
|
<div class="lucent-testimonial-company">Independent</div>
|
|
</div>
|
|
<div class="lucent-testimonial-rating" aria-label="5 star rating">
|
|
<x-ri-star-fill class="size-5" />
|
|
<x-ri-star-fill class="size-5" />
|
|
<x-ri-star-fill class="size-5" />
|
|
<x-ri-star-fill class="size-5" />
|
|
<x-ri-star-fill class="size-5" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lucent-carousel-controls">
|
|
<button class="lucent-carousel-btn" id="testimonialPrev" aria-label="Previous testimonial">
|
|
<x-ri-arrow-left-s-line class="size-5" />
|
|
</button>
|
|
<div class="lucent-carousel-dots" role="tablist" aria-label="Testimonial navigation">
|
|
<button class="lucent-carousel-dot active" data-slide="0" role="tab" aria-label="Testimonial 1" aria-selected="true"></button>
|
|
<button class="lucent-carousel-dot" data-slide="1" role="tab" aria-label="Testimonial 2" aria-selected="false"></button>
|
|
<button class="lucent-carousel-dot" data-slide="2" role="tab" aria-label="Testimonial 3" aria-selected="false"></button>
|
|
</div>
|
|
<button class="lucent-carousel-btn" id="testimonialNext" aria-label="Next testimonial">
|
|
<x-ri-arrow-right-s-line class="size-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endif
|
|
|
|
<!-- Platform Capabilities - KVM Hypervisor Features -->
|
|
<section class="lucent-capabilities-section" role="region" aria-labelledby="capabilities-heading">
|
|
<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>
|
|
|
|
<!-- Developer API Showcase -->
|
|
@if(theme('api_showcase_enabled', true))
|
|
<section class="lucent-api-section" role="region" aria-labelledby="api-heading">
|
|
<div class="container mx-auto px-4">
|
|
<div class="lucent-api-content lucent-fade-in">
|
|
<div class="lucent-api-info">
|
|
<h3>DEVELOPERS</h3>
|
|
<h2 class="text-color-base">{{ theme('api_title', 'Full REST API Access') }}</h2>
|
|
<p class="text-color-muted">
|
|
{{ theme('api_desc', 'Automate your entire infrastructure with our comprehensive RESTful API. Deploy, manage, monitor, and scale VPS instances programmatically using the language of your choice.') }}
|
|
</p>
|
|
<div class="lucent-api-features">
|
|
<div class="lucent-api-feature">
|
|
<div class="lucent-api-feature-icon" aria-hidden="true">
|
|
<x-ri-code-s-slash-line class="size-4" />
|
|
</div>
|
|
<span class="text-color-base">RESTful endpoints with JSON responses</span>
|
|
</div>
|
|
<div class="lucent-api-feature">
|
|
<div class="lucent-api-feature-icon" aria-hidden="true">
|
|
<x-ri-lock-line class="size-4" />
|
|
</div>
|
|
<span class="text-color-base">OAuth 2.0 & API key authentication</span>
|
|
</div>
|
|
<div class="lucent-api-feature">
|
|
<div class="lucent-api-feature-icon" aria-hidden="true">
|
|
<x-ri-book-open-line class="size-4" />
|
|
</div>
|
|
<span class="text-color-base">Comprehensive documentation & SDKs</span>
|
|
</div>
|
|
<div class="lucent-api-feature">
|
|
<div class="lucent-api-feature-icon" aria-hidden="true">
|
|
<x-ri-webhook-line class="size-4" />
|
|
</div>
|
|
<span class="text-color-base">Webhooks for real-time notifications</span>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 2rem;">
|
|
<a href="{{ theme('api_docs_url', '/docs/api') }}" class="lucent-btn-primary" style="text-decoration: none;">
|
|
<x-ri-book-line class="size-5" />
|
|
<span>View API Documentation</span>
|
|
<x-ri-arrow-right-line class="size-5" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lucent-code-preview">
|
|
<pre><code><span class="lucent-code-comment">// Deploy a new VPS instance</span>
|
|
<span class="lucent-code-keyword">const</span> response = <span class="lucent-code-keyword">await</span> <span class="lucent-code-function">fetch</span>(<span class="lucent-code-string">'https://api.{{ config('app.domain', 'example.com') }}/v1/vps'</span>, {
|
|
<span class="lucent-code-keyword">method</span>: <span class="lucent-code-string">'POST'</span>,
|
|
<span class="lucent-code-keyword">headers</span>: {
|
|
<span class="lucent-code-string">'Authorization'</span>: <span class="lucent-code-string">'Bearer YOUR_API_KEY'</span>,
|
|
<span class="lucent-code-string">'Content-Type'</span>: <span class="lucent-code-string">'application/json'</span>
|
|
},
|
|
<span class="lucent-code-keyword">body</span>: JSON.<span class="lucent-code-function">stringify</span>({
|
|
<span class="lucent-code-keyword">plan</span>: <span class="lucent-code-string">'professional'</span>,
|
|
<span class="lucent-code-keyword">region</span>: <span class="lucent-code-string">'us-east'</span>,
|
|
<span class="lucent-code-keyword">os_template</span>: <span class="lucent-code-string">'ubuntu-22.04'</span>,
|
|
<span class="lucent-code-keyword">hostname</span>: <span class="lucent-code-string">'web-server-01'</span>
|
|
})
|
|
});
|
|
|
|
<span class="lucent-code-keyword">const</span> vps = <span class="lucent-code-keyword">await</span> response.<span class="lucent-code-function">json</span>();
|
|
console.<span class="lucent-code-function">log</span>(<span class="lucent-code-string">'VPS deployed:'</span>, vps.id);</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endif
|
|
|
|
<!-- FAQ Section -->
|
|
<section class="lucent-faq-section" role="region" aria-labelledby="faq-heading">
|
|
<div class="container mx-auto px-4">
|
|
<div class="lucent-section-header">
|
|
<h2 id="faq-heading" class="lucent-section-title text-color-base">
|
|
{{ theme('faq_title', 'Frequently Asked Questions') }}
|
|
</h2>
|
|
<p class="lucent-section-subtitle text-color-muted">
|
|
{{ theme('faq_subtitle', 'Everything you need to know about our VPS hosting platform') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="lucent-faq-container lucent-fade-in">
|
|
<div class="lucent-faq-item" data-faq-item>
|
|
<button class="lucent-faq-question" aria-expanded="false" aria-controls="faq-answer-1">
|
|
<span>{{ theme('faq_1_question', 'What is KVM virtualization and why does it matter?') }}</span>
|
|
<x-ri-arrow-down-s-line class="lucent-faq-icon size-6" aria-hidden="true" />
|
|
</button>
|
|
<div id="faq-answer-1" class="lucent-faq-answer" role="region">
|
|
<div class="lucent-faq-answer-content text-color-muted">
|
|
<p>{{ theme('faq_1_answer', 'KVM (Kernel-based Virtual Machine) is true hardware virtualization technology that provides dedicated CPU cores, guaranteed RAM, and complete resource isolation. Unlike container-based hosting, KVM gives you full root access and the ability to run any operating system or kernel, making it ideal for production workloads.') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lucent-faq-item" data-faq-item>
|
|
<button class="lucent-faq-question" aria-expanded="false" aria-controls="faq-answer-2">
|
|
<span>{{ theme('faq_2_question', 'How quickly can I deploy a VPS?') }}</span>
|
|
<x-ri-arrow-down-s-line class="lucent-faq-icon size-6" aria-hidden="true" />
|
|
</button>
|
|
<div id="faq-answer-2" class="lucent-faq-answer" role="region">
|
|
<div class="lucent-faq-answer-content text-color-muted">
|
|
<p>{{ theme('faq_2_answer', 'Most VPS instances are provisioned within 2-5 minutes of order completion. You will receive instant access to your control panel where you can monitor the deployment progress in real-time, configure network settings, and access the VNC console.') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lucent-faq-item" data-faq-item>
|
|
<button class="lucent-faq-question" aria-expanded="false" aria-controls="faq-answer-3">
|
|
<span>{{ theme('faq_3_question', 'What operating systems are supported?') }}</span>
|
|
<x-ri-arrow-down-s-line class="lucent-faq-icon size-6" aria-hidden="true" />
|
|
</button>
|
|
<div id="faq-answer-3" class="lucent-faq-answer" role="region">
|
|
<div class="lucent-faq-answer-content text-color-muted">
|
|
<p>{{ theme('faq_3_answer', 'We support all major Linux distributions including Ubuntu, Debian, CentOS, AlmaLinux, Rocky Linux, Fedora, and Arch Linux. Windows Server editions are available on select plans. You can also upload custom ISO images for specialized deployments.') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lucent-faq-item" data-faq-item>
|
|
<button class="lucent-faq-question" aria-expanded="false" aria-controls="faq-answer-4">
|
|
<span>{{ theme('faq_4_question', 'Do you provide managed services or backups?') }}</span>
|
|
<x-ri-arrow-down-s-line class="lucent-faq-icon size-6" aria-hidden="true" />
|
|
</button>
|
|
<div id="faq-answer-4" class="lucent-faq-answer" role="region">
|
|
<div class="lucent-faq-answer-content text-color-muted">
|
|
<p>{{ theme('faq_4_answer', 'Our VPS plans are unmanaged, giving you full control. However, you can create instant snapshots from the control panel and schedule automated daily or weekly backups. Managed services with OS updates, security patches, and application support are available as add-ons.') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lucent-faq-item" data-faq-item>
|
|
<button class="lucent-faq-question" aria-expanded="false" aria-controls="faq-answer-5">
|
|
<span>{{ theme('faq_5_question', 'What payment methods do you accept?') }}</span>
|
|
<x-ri-arrow-down-s-line class="lucent-faq-icon size-6" aria-hidden="true" />
|
|
</button>
|
|
<div id="faq-answer-5" class="lucent-faq-answer" role="region">
|
|
<div class="lucent-faq-answer-content text-color-muted">
|
|
<p>{{ theme('faq_5_answer', 'We accept all major credit cards (Visa, Mastercard, American Express), PayPal, cryptocurrency (Bitcoin, Ethereum), and bank transfers for enterprise accounts. Billing is monthly by default, with discounts available for quarterly and annual prepayments.') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="lucent-cta-section" role="region" aria-labelledby="cta-heading">
|
|
<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;" role="status" aria-label="Infrastructure status">
|
|
<span class="lucent-live-dot" aria-hidden="true"></span>
|
|
<span style="font-size: 0.875rem; font-weight: 600; opacity: 0.8;">Infrastructure Available</span>
|
|
</div>
|
|
<h2 id="cta-heading" 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>
|
|
|
|
<!-- Newsletter Section -->
|
|
@if(theme('newsletter_enabled', true))
|
|
<section class="lucent-newsletter-section" role="region" aria-labelledby="newsletter-heading">
|
|
<div class="container mx-auto px-4">
|
|
<div class="lucent-newsletter-container lucent-fade-in">
|
|
<div class="lucent-newsletter-icon" aria-hidden="true">
|
|
<x-ri-mail-send-fill class="size-8" />
|
|
</div>
|
|
<h2 id="newsletter-heading" class="lucent-newsletter-title">
|
|
{{ theme('newsletter_title', 'Stay Updated') }}
|
|
</h2>
|
|
<p class="lucent-newsletter-desc">
|
|
{{ theme('newsletter_desc', 'Subscribe to receive platform updates, maintenance notifications, new features, and exclusive hosting tips delivered to your inbox monthly.') }}
|
|
</p>
|
|
<form class="lucent-newsletter-form" id="lucentNewsletterForm" aria-label="Newsletter subscription form">
|
|
<input
|
|
type="email"
|
|
class="lucent-newsletter-input"
|
|
placeholder="{{ theme('newsletter_placeholder', 'Enter your email address') }}"
|
|
aria-label="Email address"
|
|
required
|
|
id="newsletterEmail"
|
|
/>
|
|
<button type="submit" class="lucent-newsletter-button" aria-label="Subscribe to newsletter">
|
|
<span>{{ theme('newsletter_button', 'Subscribe') }}</span>
|
|
</button>
|
|
</form>
|
|
<div class="lucent-newsletter-message" id="newsletterMessage" role="alert" aria-live="polite"></div>
|
|
<p class="lucent-newsletter-privacy">
|
|
{{ theme('newsletter_privacy', 'We respect your privacy. Unsubscribe anytime.') }}
|
|
@if(theme('privacy_policy_url'))
|
|
<a href="{{ theme('privacy_policy_url') }}" target="_blank">Privacy Policy</a>
|
|
@endif
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endif
|
|
|
|
<!-- Announcements Section -->
|
|
@php($announcements = \App\Models\Announcement::latest()->take(3)->get())
|
|
@if($announcements->count())
|
|
<section class="lucent-announcements-section" role="region" aria-labelledby="announcements-heading">
|
|
<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>
|
|
|
|
<!-- Structured Data for SEO -->
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "WebSite",
|
|
"name": "{{ config('app.name', 'Paymenter') }}",
|
|
"url": "{{ url('/') }}",
|
|
"description": "{{ theme('homepage_hero_desc', 'Enterprise VPS hosting powered by KVM hypervisor technology') }}",
|
|
"potentialAction": {
|
|
"@type": "SearchAction",
|
|
"target": "{{ url('/products') }}?search={search_term_string}",
|
|
"query-input": "required name=search_term_string"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Organization",
|
|
"name": "{{ config('app.name', 'Paymenter') }}",
|
|
"url": "{{ url('/') }}",
|
|
"logo": "{{ asset('assets/logo.png') }}",
|
|
"description": "{{ theme('homepage_hero_desc', 'Enterprise VPS hosting platform') }}",
|
|
"aggregateRating": {
|
|
"@type": "AggregateRating",
|
|
"ratingValue": "4.9",
|
|
"ratingCount": "{{ \App\Models\User::count() + 150 }}",
|
|
"bestRating": "5",
|
|
"worstRating": "1"
|
|
},
|
|
"contactPoint": {
|
|
"@type": "ContactPoint",
|
|
"telephone": "{{ theme('contact_phone', '+1-555-0123') }}",
|
|
"contactType": "Customer Service",
|
|
"availableLanguage": ["en"],
|
|
"areaServed": "Worldwide"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Product",
|
|
"name": "{{ theme('homepage_hero_title1', 'Enterprise') }} {{ theme('homepage_hero_title2', 'VPS Hosting') }}",
|
|
"description": "{{ theme('homepage_hero_desc', 'KVM-based virtual private servers with dedicated resources') }}",
|
|
"brand": {
|
|
"@type": "Brand",
|
|
"name": "{{ config('app.name', 'Paymenter') }}"
|
|
},
|
|
"offers": {
|
|
"@type": "AggregateOffer",
|
|
"lowPrice": "12",
|
|
"highPrice": "48",
|
|
"priceCurrency": "USD",
|
|
"availability": "https://schema.org/InStock"
|
|
},
|
|
"aggregateRating": {
|
|
"@type": "AggregateRating",
|
|
"ratingValue": "4.9",
|
|
"reviewCount": "{{ \App\Models\User::count() + 75 }}"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- Interactive Demo Launcher -->
|
|
@if(theme('demo_launcher_enabled', true))
|
|
<aside class="lucent-demo-launcher" role="complementary">
|
|
<button class="lucent-demo-button" id="demoLauncher" aria-label="Launch interactive demo">
|
|
<x-ri-play-circle-fill class="size-5" />
|
|
<span>Take a Tour</span>
|
|
<span class="lucent-demo-badge">Interactive</span>
|
|
</button>
|
|
</aside>
|
|
@endif
|
|
|
|
<!-- Live Activity Feed -->
|
|
@if(theme('activity_feed_enabled', true))
|
|
<aside class="lucent-activity-section" role="complementary" aria-label="Live deployment activity">
|
|
<div class="lucent-activity-feed" id="lucentActivityFeed">
|
|
<div class="lucent-activity-header">
|
|
<span class="lucent-live-dot" aria-hidden="true"></span>
|
|
<h3 class="lucent-activity-title">Live Activity</h3>
|
|
</div>
|
|
<div id="activityItems">
|
|
<!-- Activity items will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
@endif
|
|
|
|
<!-- Live Chat Widget -->
|
|
@if(theme('chat_widget_enabled', true))
|
|
<aside class="lucent-chat-widget" role="complementary" aria-label="Live chat support">
|
|
<button class="lucent-chat-button" id="lucentChatButton" aria-label="Open live chat" aria-haspopup="dialog">
|
|
<x-ri-customer-service-2-fill class="size-7" />
|
|
@if(theme('chat_show_badge', true))
|
|
<span class="lucent-chat-badge" aria-label="1 unread message">1</span>
|
|
@endif
|
|
<span class="lucent-chat-tooltip">Need help? Chat with us!</span>
|
|
</button>
|
|
</aside>
|
|
@endif
|
|
|
|
<!-- Section Navigation -->
|
|
<nav class="lucent-section-nav" id="sectionNav" aria-label="Page sections navigation">
|
|
<button class="lucent-section-nav-item" data-section="Hero" data-target="#lucent-home" aria-label="Navigate to hero section">
|
|
<svg><circle cx="10" cy="10" r="8"/></svg>
|
|
</button>
|
|
<button class="lucent-section-nav-item" data-section="Stats" data-target="#main-content" aria-label="Navigate to statistics section">
|
|
<svg><circle cx="10" cy="10" r="8"/></svg>
|
|
</button>
|
|
<button class="lucent-section-nav-item" data-section="Services" data-target="#services" aria-label="Navigate to services section">
|
|
<svg><circle cx="10" cy="10" r="8"/></svg>
|
|
</button>
|
|
<button class="lucent-section-nav-item" data-section="Features" data-target="#features" aria-label="Navigate to features section">
|
|
<svg><circle cx="10" cy="10" r="8"/></svg>
|
|
</button>
|
|
<button class="lucent-section-nav-item" data-section="FAQ" data-target=".lucent-faq-section" aria-label="Navigate to FAQ section">
|
|
<svg><circle cx="10" cy="10" r="8"/></svg>
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- 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" aria-hidden="true">
|
|
<polyline points="18 15 12 9 6 15"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Cookie Consent Banner -->
|
|
@if(theme('cookie_banner_enabled', true))
|
|
<aside class="lucent-cookie-banner" id="lucentCookieBanner" role="dialog" aria-labelledby="cookie-banner-title" aria-describedby="cookie-banner-desc">
|
|
<div class="lucent-cookie-content">
|
|
<div class="lucent-cookie-text">
|
|
<strong id="cookie-banner-title">{{ theme('cookie_banner_title', 'We value your privacy') }}</strong>
|
|
<p id="cookie-banner-desc" style="margin: 0.5rem 0 0 0;">
|
|
{{ theme('cookie_banner_text', 'We use cookies to enhance your browsing experience, analyze site traffic, and personalize content.') }}
|
|
@if(theme('privacy_policy_url'))
|
|
<a href="{{ theme('privacy_policy_url') }}" target="_blank">Learn more</a>
|
|
@endif
|
|
</p>
|
|
</div>
|
|
<div class="lucent-cookie-actions">
|
|
<button class="lucent-cookie-btn lucent-cookie-btn-accept" id="acceptCookies" aria-label="Accept all cookies">
|
|
Accept All
|
|
</button>
|
|
<button class="lucent-cookie-btn lucent-cookie-btn-decline" id="declineCookies" aria-label="Decline optional cookies">
|
|
Essential Only
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
@endif
|
|
</div><!-- /#lucent-home -->
|
|
|
|
<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 + '%';
|
|
});
|
|
|
|
// ============================================
|
|
// Testimonials Carousel
|
|
// ============================================
|
|
const testimonialSlides = document.querySelectorAll('.lucent-testimonial-slide');
|
|
const testimonialDots = document.querySelectorAll('.lucent-carousel-dot');
|
|
const prevBtn = document.getElementById('testimonialPrev');
|
|
const nextBtn = document.getElementById('testimonialNext');
|
|
let currentSlide = 0;
|
|
let autoRotateInterval;
|
|
|
|
function showSlide(index) {
|
|
// Remove active class from all slides and dots
|
|
testimonialSlides.forEach(function(slide) {
|
|
slide.classList.remove('active');
|
|
});
|
|
testimonialDots.forEach(function(dot) {
|
|
dot.classList.remove('active');
|
|
dot.setAttribute('aria-selected', 'false');
|
|
});
|
|
|
|
// Add active class to current slide and dot
|
|
if (testimonialSlides[index]) {
|
|
testimonialSlides[index].classList.add('active');
|
|
testimonialDots[index].classList.add('active');
|
|
testimonialDots[index].setAttribute('aria-selected', 'true');
|
|
currentSlide = index;
|
|
}
|
|
}
|
|
|
|
function nextSlide() {
|
|
const next = (currentSlide + 1) % testimonialSlides.length;
|
|
showSlide(next);
|
|
}
|
|
|
|
function prevSlide() {
|
|
const prev = (currentSlide - 1 + testimonialSlides.length) % testimonialSlides.length;
|
|
showSlide(prev);
|
|
}
|
|
|
|
function startAutoRotate() {
|
|
autoRotateInterval = setInterval(nextSlide, 6000); // Change slide every 6 seconds
|
|
}
|
|
|
|
function stopAutoRotate() {
|
|
clearInterval(autoRotateInterval);
|
|
}
|
|
|
|
if (nextBtn && prevBtn && testimonialSlides.length > 0) {
|
|
// Next/Previous button handlers
|
|
nextBtn.addEventListener('click', function() {
|
|
stopAutoRotate();
|
|
nextSlide();
|
|
startAutoRotate();
|
|
});
|
|
|
|
prevBtn.addEventListener('click', function() {
|
|
stopAutoRotate();
|
|
prevSlide();
|
|
startAutoRotate();
|
|
});
|
|
|
|
// Dot navigation
|
|
testimonialDots.forEach(function(dot) {
|
|
dot.addEventListener('click', function() {
|
|
stopAutoRotate();
|
|
const slideIndex = parseInt(this.getAttribute('data-slide'));
|
|
showSlide(slideIndex);
|
|
startAutoRotate();
|
|
});
|
|
});
|
|
|
|
// Pause on hover
|
|
const carouselContainer = document.querySelector('.lucent-testimonials-carousel');
|
|
if (carouselContainer) {
|
|
carouselContainer.addEventListener('mouseenter', stopAutoRotate);
|
|
carouselContainer.addEventListener('mouseleave', startAutoRotate);
|
|
}
|
|
|
|
// Start auto-rotation
|
|
startAutoRotate();
|
|
|
|
// Keyboard navigation for carousel
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.target.closest('.lucent-carousel-dot')) {
|
|
if (e.key === 'ArrowLeft') {
|
|
prevSlide();
|
|
} else if (e.key === 'ArrowRight') {
|
|
nextSlide();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// ============================================
|
|
// FAQ Accordion
|
|
// ============================================
|
|
const faqItems = document.querySelectorAll('[data-faq-item]');
|
|
|
|
faqItems.forEach(function(item) {
|
|
const question = item.querySelector('.lucent-faq-question');
|
|
const answer = item.querySelector('.lucent-faq-answer');
|
|
|
|
question.addEventListener('click', function() {
|
|
const isActive = item.classList.contains('active');
|
|
|
|
// Close all other FAQ items
|
|
faqItems.forEach(function(otherItem) {
|
|
if (otherItem !== item && otherItem.classList.contains('active')) {
|
|
otherItem.classList.remove('active');
|
|
const otherQuestion = otherItem.querySelector('.lucent-faq-question');
|
|
const otherAnswer = otherItem.querySelector('.lucent-faq-answer');
|
|
otherQuestion.setAttribute('aria-expanded', 'false');
|
|
otherAnswer.style.maxHeight = null;
|
|
}
|
|
});
|
|
|
|
// Toggle current item
|
|
if (isActive) {
|
|
item.classList.remove('active');
|
|
question.setAttribute('aria-expanded', 'false');
|
|
answer.style.maxHeight = null;
|
|
} else {
|
|
item.classList.add('active');
|
|
question.setAttribute('aria-expanded', 'true');
|
|
answer.style.maxHeight = answer.scrollHeight + 'px';
|
|
}
|
|
});
|
|
|
|
// Keyboard support for accordion
|
|
question.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
question.click();
|
|
}
|
|
});
|
|
});
|
|
|
|
// ============================================
|
|
// 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' });
|
|
}
|
|
});
|
|
|
|
// ============================================
|
|
// Pricing Toggle (Monthly/Annual)
|
|
// ============================================
|
|
const pricingToggle = document.getElementById('pricingToggle');
|
|
if (pricingToggle) {
|
|
const monthlyLabel = document.querySelector('[data-period="monthly"]');
|
|
const annualLabel = document.querySelector('[data-period="annual"]');
|
|
const priceElements = document.querySelectorAll('.lucent-pricing-price span[data-monthly]');
|
|
|
|
pricingToggle.addEventListener('click', function() {
|
|
const isAnnual = pricingToggle.classList.toggle('active');
|
|
pricingToggle.setAttribute('aria-checked', isAnnual);
|
|
|
|
if (isAnnual) {
|
|
monthlyLabel.classList.remove('active');
|
|
annualLabel.classList.add('active');
|
|
priceElements.forEach(function(el) {
|
|
el.textContent = el.getAttribute('data-annual');
|
|
});
|
|
} else {
|
|
monthlyLabel.classList.add('active');
|
|
annualLabel.classList.remove('active');
|
|
priceElements.forEach(function(el) {
|
|
el.textContent = el.getAttribute('data-monthly');
|
|
});
|
|
}
|
|
});
|
|
|
|
// Keyboard support
|
|
pricingToggle.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
pricingToggle.click();
|
|
}
|
|
});
|
|
}
|
|
|
|
// ============================================
|
|
// Interactive Demo/Tour Launcher
|
|
// ============================================
|
|
const demoLauncher = document.getElementById('demoLauncher');
|
|
if (demoLauncher) {
|
|
demoLauncher.addEventListener('click', function() {
|
|
// Integrate with a tour library like intro.js, shepherd.js, or driver.js
|
|
// For now, show an alert as placeholder
|
|
const features = [
|
|
'1. Browse our VPS plans and compare features',
|
|
'2. View live node status and performance metrics',
|
|
'3. Explore our control panel preview',
|
|
'4. Check out customer testimonials',
|
|
'5. Read the FAQ section for common questions'
|
|
];
|
|
|
|
alert('Interactive Demo:\n\n' + features.join('\n') + '\n\nReplace this with intro.js, shepherd.js, or driver.js for a full interactive tour experience.');
|
|
|
|
// Example integration with Shepherd.js:
|
|
// const tour = new Shepherd.Tour({
|
|
// useModalOverlay: true,
|
|
// defaultStepOptions: {
|
|
// cancelIcon: { enabled: true },
|
|
// classes: 'shepherd-theme-custom',
|
|
// scrollTo: { behavior: 'smooth', block: 'center' }
|
|
// }
|
|
// });
|
|
// tour.addStep({ ... });
|
|
// tour.start();
|
|
});
|
|
}
|
|
|
|
// ============================================
|
|
// Enhanced Parallax Effects
|
|
// ============================================
|
|
const parallaxLayers = document.querySelectorAll('.lucent-parallax-layer');
|
|
if (parallaxLayers.length > 0) {
|
|
let parallaxTicking = false;
|
|
|
|
window.addEventListener('scroll', function() {
|
|
if (!parallaxTicking) {
|
|
window.requestAnimationFrame(function() {
|
|
const scrollY = window.scrollY;
|
|
|
|
parallaxLayers.forEach(function(layer, index) {
|
|
const depth = layer.getAttribute('data-depth') || (index + 1);
|
|
const movement = -(scrollY * depth * 0.05);
|
|
layer.style.transform = `translateY(${movement}px)`;
|
|
});
|
|
|
|
parallaxTicking = false;
|
|
});
|
|
|
|
parallaxTicking = true;
|
|
}
|
|
});
|
|
}
|
|
|
|
// ============================================
|
|
// Live Activity Feed
|
|
// ============================================
|
|
const activityFeed = document.getElementById('activityItems');
|
|
if (activityFeed) {
|
|
const locations = ['US-East', 'EU-West', 'APAC-SG', 'US-West', 'EU-North'];
|
|
const names = ['Alex', 'Maria', 'John', 'Sarah', 'David', 'Emma', 'Michael', 'Lisa'];
|
|
const actions = [
|
|
'deployed a VPS',
|
|
'created a snapshot',
|
|
'upgraded to Professional',
|
|
'deployed Ubuntu 22.04',
|
|
'configured firewall rules',
|
|
'started a backup'
|
|
];
|
|
|
|
function generateActivity() {
|
|
const name = names[Math.floor(Math.random() * names.length)];
|
|
const action = actions[Math.floor(Math.random() * actions.length)];
|
|
const location = locations[Math.floor(Math.random() * locations.length)];
|
|
const avatar = name.substring(0, 2).toUpperCase();
|
|
const timeAgo = Math.floor(Math.random() * 5) + 1;
|
|
|
|
return {
|
|
avatar: avatar,
|
|
name: name,
|
|
action: action,
|
|
location: location,
|
|
time: timeAgo + 'm ago'
|
|
};
|
|
}
|
|
|
|
function addActivityItem(activity) {
|
|
const item = document.createElement('div');
|
|
item.className = 'lucent-activity-item';
|
|
item.innerHTML = `
|
|
<div class="lucent-activity-avatar">${activity.avatar}</div>
|
|
<div class="lucent-activity-content">
|
|
<div class="lucent-activity-text">
|
|
<strong>${activity.name}</strong> ${activity.action}
|
|
<span class="lucent-activity-location">
|
|
<svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/></svg>
|
|
${activity.location}
|
|
</span>
|
|
</div>
|
|
<div class="lucent-activity-time">${activity.time}</div>
|
|
</div>
|
|
`;
|
|
|
|
activityFeed.insertBefore(item, activityFeed.firstChild);
|
|
|
|
// Keep only last 5 items
|
|
while (activityFeed.children.length > 5) {
|
|
activityFeed.removeChild(activityFeed.lastChild);
|
|
}
|
|
}
|
|
|
|
// Initialize with 3 activities
|
|
for (let i = 0; i < 3; i++) {
|
|
setTimeout(function() {
|
|
addActivityItem(generateActivity());
|
|
}, i * 500);
|
|
}
|
|
|
|
// Add new activity every 10-15 seconds
|
|
setInterval(function() {
|
|
addActivityItem(generateActivity());
|
|
}, (Math.random() * 5000) + 10000);
|
|
}
|
|
|
|
// ============================================
|
|
// Live Chat Widget Interaction
|
|
// ============================================
|
|
const chatButton = document.getElementById('lucentChatButton');
|
|
if (chatButton) {
|
|
chatButton.addEventListener('click', function() {
|
|
// Remove badge on click
|
|
const badge = chatButton.querySelector('.lucent-chat-badge');
|
|
if (badge) {
|
|
badge.style.animation = 'lucent-scale-in-anim 0.3s ease-out reverse';
|
|
setTimeout(function() {
|
|
badge.remove();
|
|
}, 300);
|
|
}
|
|
|
|
// Replace with actual chat integration:
|
|
// Example: window.Tawk_API.toggle();
|
|
// Or: window.$crisp.push(['do', 'chat:open']);
|
|
// For now, show a simple alert
|
|
alert('Live chat integration placeholder. Replace with Tawk.to, Crisp, or Intercom integration.');
|
|
});
|
|
}
|
|
|
|
// ============================================
|
|
// Newsletter Form Validation & Submission
|
|
// ============================================
|
|
const newsletterForm = document.getElementById('lucentNewsletterForm');
|
|
if (newsletterForm) {
|
|
newsletterForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const emailInput = document.getElementById('newsletterEmail');
|
|
const submitButton = newsletterForm.querySelector('.lucent-newsletter-button');
|
|
const messageDiv = document.getElementById('newsletterMessage');
|
|
const email = emailInput.value.trim();
|
|
|
|
// Email validation
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
if (!emailRegex.test(email)) {
|
|
messageDiv.className = 'lucent-newsletter-message error';
|
|
messageDiv.textContent = 'Please enter a valid email address.';
|
|
return;
|
|
}
|
|
|
|
// Disable button during submission
|
|
submitButton.disabled = true;
|
|
submitButton.innerHTML = '<span>Subscribing...</span>';
|
|
|
|
// Simulate API call (replace with actual endpoint)
|
|
setTimeout(function() {
|
|
// Success state
|
|
messageDiv.className = 'lucent-newsletter-message success';
|
|
messageDiv.textContent = 'Thanks for subscribing! Check your email to confirm.';
|
|
emailInput.value = '';
|
|
submitButton.disabled = false;
|
|
submitButton.innerHTML = '<span>Subscribe</span>';
|
|
|
|
// You can replace this with actual API integration:
|
|
// fetch('/api/newsletter/subscribe', {
|
|
// method: 'POST',
|
|
// headers: { 'Content-Type': 'application/json' },
|
|
// body: JSON.stringify({ email: email })
|
|
// }).then(response => response.json())
|
|
// .then(data => { /* handle success */ })
|
|
// .catch(error => { /* handle error */ });
|
|
}, 1500);
|
|
});
|
|
}
|
|
|
|
// ============================================
|
|
// Sticky Section Navigation
|
|
// ============================================
|
|
const sectionNav = document.getElementById('sectionNav');
|
|
if (sectionNav) {
|
|
const navItems = sectionNav.querySelectorAll('.lucent-section-nav-item');
|
|
|
|
// Show/hide section nav on scroll
|
|
window.addEventListener('scroll', function() {
|
|
if (window.scrollY > 800) {
|
|
sectionNav.classList.add('visible');
|
|
} else {
|
|
sectionNav.classList.remove('visible');
|
|
}
|
|
|
|
// Highlight active section
|
|
navItems.forEach(function(item) {
|
|
const target = document.querySelector(item.getAttribute('data-target'));
|
|
if (target) {
|
|
const rect = target.getBoundingClientRect();
|
|
const isInView = rect.top <= window.innerHeight / 2 && rect.bottom >= window.innerHeight / 2;
|
|
|
|
if (isInView) {
|
|
navItems.forEach(function(i) { i.classList.remove('active'); });
|
|
item.classList.add('active');
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// Click to navigate
|
|
navItems.forEach(function(item) {
|
|
item.addEventListener('click', function() {
|
|
const targetSelector = this.getAttribute('data-target');
|
|
const target = document.querySelector(targetSelector);
|
|
if (target) {
|
|
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// ============================================
|
|
// Cookie Consent Banner
|
|
// ============================================
|
|
const cookieBanner = document.getElementById('lucentCookieBanner');
|
|
if (cookieBanner) {
|
|
const acceptBtn = document.getElementById('acceptCookies');
|
|
const declineBtn = document.getElementById('declineCookies');
|
|
|
|
// Check if user has already made a choice
|
|
const cookieConsent = localStorage.getItem('lucent_cookie_consent');
|
|
if (!cookieConsent) {
|
|
setTimeout(function() {
|
|
cookieBanner.classList.add('visible');
|
|
}, 2000); // Show banner after 2 seconds
|
|
}
|
|
|
|
acceptBtn.addEventListener('click', function() {
|
|
localStorage.setItem('lucent_cookie_consent', 'accepted');
|
|
cookieBanner.classList.remove('visible');
|
|
|
|
// Enable analytics/tracking here
|
|
// Example: gtag('consent', 'update', { 'analytics_storage': 'granted' });
|
|
});
|
|
|
|
declineBtn.addEventListener('click', function() {
|
|
localStorage.setItem('lucent_cookie_consent', 'essential');
|
|
cookieBanner.classList.remove('visible');
|
|
});
|
|
}
|
|
|
|
// ============================================
|
|
// Image Lazy Loading with Blur-Up Effect
|
|
// ============================================
|
|
if ('loading' in HTMLImageElement.prototype) {
|
|
const lazyImages = document.querySelectorAll('img[loading="lazy"]');
|
|
lazyImages.forEach(function(img) {
|
|
img.addEventListener('load', function() {
|
|
img.style.filter = 'blur(0)';
|
|
});
|
|
});
|
|
} else {
|
|
// Fallback for browsers that don't support lazy loading
|
|
const script = document.createElement('script');
|
|
script.src = 'https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js';
|
|
document.body.appendChild(script);
|
|
}
|
|
|
|
// ============================================
|
|
// Enhanced Stats Counter with Odometer Effect
|
|
// ============================================
|
|
function animateValue(element, start, end, duration, suffix = '') {
|
|
const range = end - start;
|
|
const increment = range / (duration / 16); // 60fps
|
|
let current = start;
|
|
const timer = setInterval(function() {
|
|
current += increment;
|
|
if ((increment > 0 && current >= end) || (increment < 0 && current <= end)) {
|
|
clearInterval(timer);
|
|
current = end;
|
|
}
|
|
element.textContent = Math.floor(current).toLocaleString() + suffix;
|
|
}, 16);
|
|
}
|
|
|
|
// Animate performance metrics when visible
|
|
const metricElements = document.querySelectorAll('[data-metric-target]');
|
|
const metricsObserver = new IntersectionObserver(function(entries) {
|
|
entries.forEach(function(entry) {
|
|
if (entry.isIntersecting) {
|
|
const element = entry.target;
|
|
const target = parseInt(element.getAttribute('data-metric-target'));
|
|
const currentText = element.textContent;
|
|
|
|
if (currentText.includes('<')) {
|
|
element.textContent = '<' + target;
|
|
} else {
|
|
animateValue(element, 0, target, 2000);
|
|
}
|
|
|
|
metricsObserver.unobserve(element);
|
|
}
|
|
});
|
|
}, { threshold: 0.5 });
|
|
|
|
metricElements.forEach(function(element) {
|
|
metricsObserver.observe(element);
|
|
});
|
|
|
|
// ============================================
|
|
// Countdown Timer for Special Offers
|
|
// ============================================
|
|
const offerCountdown = document.getElementById('offerCountdown');
|
|
if (offerCountdown) {
|
|
const endDate = new Date();
|
|
endDate.setDate(endDate.getDate() + 7); // Offer ends in 7 days
|
|
|
|
function updateCountdown() {
|
|
const now = new Date().getTime();
|
|
const distance = endDate - now;
|
|
|
|
if (distance < 0) {
|
|
document.querySelector('.lucent-offer-banner').style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
|
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
|
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
|
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
|
|
|
document.getElementById('countdown-days').textContent = String(days).padStart(2, '0');
|
|
document.getElementById('countdown-hours').textContent = String(hours).padStart(2, '0');
|
|
document.getElementById('countdown-mins').textContent = String(minutes).padStart(2, '0');
|
|
document.getElementById('countdown-secs').textContent = String(seconds).padStart(2, '0');
|
|
}
|
|
|
|
updateCountdown();
|
|
setInterval(updateCountdown, 1000);
|
|
}
|
|
|
|
// ============================================
|
|
// 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';
|
|
});
|
|
}
|
|
|
|
// ============================================
|
|
// Performance Monitoring (Optional)
|
|
// ============================================
|
|
if ('PerformanceObserver' in window) {
|
|
const perfObserver = new PerformanceObserver(function(list) {
|
|
list.getEntries().forEach(function(entry) {
|
|
if (entry.entryType === 'largest-contentful-paint') {
|
|
console.log('LCP:', entry.renderTime || entry.loadTime);
|
|
}
|
|
});
|
|
});
|
|
|
|
try {
|
|
perfObserver.observe({ entryTypes: ['largest-contentful-paint'] });
|
|
} catch (e) {
|
|
// LCP not supported
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</div>
|