3126 lines
96 KiB
PHP
3126 lines
96 KiB
PHP
<style>
|
|
/* ============================================
|
|
HOMEPAGE CUSTOM CSS - Modern, Clean Design
|
|
============================================ */
|
|
|
|
:root {
|
|
--color-primary: #3b82f6;
|
|
--color-primary-dark: #2563eb;
|
|
--color-primary-light: #60a5fa;
|
|
--color-secondary: #64748b;
|
|
--color-success: #10b981;
|
|
--color-warning: #f59e0b;
|
|
--color-danger: #ef4444;
|
|
--color-info: #06b6d4;
|
|
|
|
--color-bg-base: #ffffff;
|
|
--color-bg-secondary: #f8fafc;
|
|
--color-bg-tertiary: #f1f5f9;
|
|
--color-text-base: #0f172a;
|
|
--color-text-muted: #64748b;
|
|
--color-text-light: #94a3b8;
|
|
--color-border: #e2e8f0;
|
|
--color-border-light: #f1f5f9;
|
|
|
|
--radius-sm: 8px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 16px;
|
|
--radius-xl: 20px;
|
|
|
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
|
|
--spacing-xs: 0.5rem;
|
|
--spacing-sm: 1rem;
|
|
--spacing-md: 1.5rem;
|
|
--spacing-lg: 2rem;
|
|
--spacing-xl: 3rem;
|
|
--spacing-2xl: 4rem;
|
|
--spacing-3xl: 6rem;
|
|
|
|
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
--font-display: "Inter", var(--font-sans);
|
|
|
|
--transition-base: 0.2s ease;
|
|
--transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--color-bg-base: #0f172a;
|
|
--color-bg-secondary: #1e293b;
|
|
--color-bg-tertiary: #334155;
|
|
--color-text-base: #f8fafc;
|
|
--color-text-muted: #94a3b8;
|
|
--color-border: #334155;
|
|
}
|
|
}
|
|
|
|
#home {
|
|
min-height: 100vh;
|
|
background: var(--color-bg-base);
|
|
color: var(--color-text-base);
|
|
font-family: var(--font-sans);
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
#home * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#home ::selection {
|
|
background: var(--color-primary-light);
|
|
color: white;
|
|
}
|
|
|
|
#home ::-moz-selection {
|
|
background: var(--color-primary-light);
|
|
color: white;
|
|
}
|
|
|
|
/* Container */
|
|
.home-container {
|
|
max-width: 1280px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-left: var(--spacing-md);
|
|
padding-right: var(--spacing-md);
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
position: relative;
|
|
padding-top: clamp(4rem, 10vw, 7rem);
|
|
padding-bottom: clamp(5rem, 12vw, 9rem);
|
|
background: linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #0f172a 100%);
|
|
overflow: hidden;
|
|
border-bottom: 1px solid rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.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.3) 0%, transparent 50%),
|
|
radial-gradient(ellipse 60% 40% at 100% 50%, rgba(139, 92, 246, 0.2) 0%, transparent 50%),
|
|
radial-gradient(ellipse 60% 40% at 0% 50%, rgba(6, 182, 212, 0.15) 0%, transparent 50%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-grid {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-image:
|
|
linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
|
|
background-size: 50px 50px;
|
|
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%);
|
|
}
|
|
|
|
.hero::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 150px;
|
|
background: linear-gradient(to bottom, transparent, var(--color-bg-base));
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Animated floating particles */
|
|
.hero-particles {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-particle {
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border-radius: 50%;
|
|
animation: float-particle linear infinite;
|
|
}
|
|
|
|
.hero-particle:nth-child(1) { left: 10%; animation-duration: 20s; animation-delay: 0s; width: 8px; height: 8px; }
|
|
.hero-particle:nth-child(2) { left: 20%; animation-duration: 25s; animation-delay: -5s; width: 12px; height: 12px; }
|
|
.hero-particle:nth-child(3) { left: 30%; animation-duration: 18s; animation-delay: -2s; width: 6px; height: 6px; }
|
|
.hero-particle:nth-child(4) { left: 40%; animation-duration: 22s; animation-delay: -7s; width: 10px; height: 10px; }
|
|
.hero-particle:nth-child(5) { left: 50%; animation-duration: 28s; animation-delay: -3s; width: 14px; height: 14px; }
|
|
.hero-particle:nth-child(6) { left: 60%; animation-duration: 19s; animation-delay: -9s; width: 8px; height: 8px; }
|
|
.hero-particle:nth-child(7) { left: 70%; animation-duration: 24s; animation-delay: -4s; width: 11px; height: 11px; }
|
|
.hero-particle:nth-child(8) { left: 80%; animation-duration: 21s; animation-delay: -6s; width: 7px; height: 7px; }
|
|
.hero-particle:nth-child(9) { left: 90%; animation-duration: 26s; animation-delay: -8s; width: 9px; height: 9px; }
|
|
.hero-particle:nth-child(10) { left: 15%; animation-duration: 23s; animation-delay: -1s; width: 13px; height: 13px; }
|
|
|
|
@keyframes float-particle {
|
|
0% {
|
|
transform: translateY(100vh) rotate(0deg);
|
|
opacity: 0;
|
|
}
|
|
10% {
|
|
opacity: 1;
|
|
}
|
|
90% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateY(-100vh) rotate(720deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Animated Glowing Orbs */
|
|
.hero-orb {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(80px);
|
|
pointer-events: none;
|
|
animation: orb-float 20s ease-in-out infinite;
|
|
}
|
|
|
|
.hero-orb-1 {
|
|
width: 400px;
|
|
height: 400px;
|
|
background: rgba(59, 130, 246, 0.4);
|
|
top: -100px;
|
|
right: 10%;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.hero-orb-2 {
|
|
width: 300px;
|
|
height: 300px;
|
|
background: rgba(139, 92, 246, 0.3);
|
|
bottom: -50px;
|
|
left: 5%;
|
|
animation-delay: -7s;
|
|
}
|
|
|
|
.hero-orb-3 {
|
|
width: 250px;
|
|
height: 250px;
|
|
background: rgba(6, 182, 212, 0.25);
|
|
top: 40%;
|
|
left: 30%;
|
|
animation-delay: -14s;
|
|
}
|
|
|
|
@keyframes orb-float {
|
|
0%, 100% {
|
|
transform: translate(0, 0) scale(1);
|
|
}
|
|
25% {
|
|
transform: translate(30px, -30px) scale(1.1);
|
|
}
|
|
50% {
|
|
transform: translate(-20px, 20px) scale(0.95);
|
|
}
|
|
75% {
|
|
transform: translate(20px, 30px) scale(1.05);
|
|
}
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
|
|
.hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
padding: var(--spacing-xs) var(--spacing-md);
|
|
background: rgba(255,255,255,0.2);
|
|
border: 1px solid rgba(255,255,255,0.3);
|
|
border-radius: 999px;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
margin-bottom: var(--spacing-md);
|
|
backdrop-filter: blur(10px);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
transition: var(--transition-smooth);
|
|
animation: badge-float 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes badge-float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-5px); }
|
|
}
|
|
|
|
.hero-badge:hover {
|
|
transform: scale(1.05);
|
|
background: rgba(255,255,255,0.3);
|
|
border-color: rgba(255,255,255,0.5);
|
|
}
|
|
|
|
.hero-badge svg {
|
|
animation: badge-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes badge-pulse {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.8; transform: scale(1.1); }
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: clamp(2rem, 5vw, 3.75rem);
|
|
font-weight: 800;
|
|
line-height: 1.2;
|
|
margin: 0 0 var(--spacing-md) 0;
|
|
letter-spacing: -0.02em;
|
|
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
animation: title-fade-in 0.8s ease-out;
|
|
}
|
|
|
|
.hero-title-highlight {
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
|
|
.hero-title-highlight::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0.1em;
|
|
left: 0;
|
|
right: 0;
|
|
height: 0.15em;
|
|
background: linear-gradient(90deg, rgba(255,255,255,0.8), rgba(255,255,255,0.4));
|
|
border-radius: 2px;
|
|
transform: scaleX(0);
|
|
animation: underline-reveal 0.8s ease-out 0.5s forwards;
|
|
}
|
|
|
|
@keyframes underline-reveal {
|
|
to {
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
|
|
@keyframes title-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: clamp(1.125rem, 2.5vw, 1.25rem);
|
|
line-height: 1.6;
|
|
margin: 0 auto var(--spacing-xl) auto;
|
|
max-width: 48rem;
|
|
opacity: 0.95;
|
|
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
animation: subtitle-fade-in 0.8s ease-out 0.2s both;
|
|
}
|
|
|
|
@keyframes subtitle-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(15px);
|
|
}
|
|
to {
|
|
opacity: 0.95;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.hero-cta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-sm);
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.hero-cta-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--spacing-xs);
|
|
padding: 1rem 2rem;
|
|
border-radius: var(--radius-md);
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
text-decoration: none;
|
|
transition: var(--transition-smooth);
|
|
border: 2px solid transparent;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-cta-button::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
|
transition: var(--transition-smooth);
|
|
}
|
|
|
|
.hero-cta-button:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.hero-cta-button-primary {
|
|
background: white;
|
|
color: #667eea;
|
|
box-shadow: 0 4px 15px rgba(255,255,255,0.3);
|
|
}
|
|
|
|
.hero-cta-button-primary:hover {
|
|
transform: translateY(-3px) scale(1.02);
|
|
box-shadow: 0 15px 30px -10px rgba(255,255,255,0.5);
|
|
}
|
|
|
|
.hero-cta-button-primary:active {
|
|
transform: translateY(-1px) scale(0.98);
|
|
}
|
|
|
|
.hero-cta-button-secondary {
|
|
background: rgba(255,255,255,0.1);
|
|
color: white;
|
|
border-color: rgba(255,255,255,0.3);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.hero-cta-button-secondary:hover {
|
|
background: rgba(255,255,255,0.2);
|
|
border-color: rgba(255,255,255,0.6);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.hero-cta-button-secondary:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.hero-status-widget {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: var(--spacing-md);
|
|
margin-top: var(--spacing-xl);
|
|
max-width: 64rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.status-item {
|
|
background: rgba(255,255,255,0.15);
|
|
backdrop-filter: blur(10px);
|
|
padding: var(--spacing-md);
|
|
border-radius: var(--radius-md);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|
transition: var(--transition-smooth);
|
|
cursor: default;
|
|
}
|
|
|
|
.status-item:hover {
|
|
background: rgba(255,255,255,0.25);
|
|
border-color: rgba(255,255,255,0.4);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.status-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: var(--radius-md);
|
|
background: rgba(255,255,255,0.25);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
transition: var(--transition-smooth);
|
|
}
|
|
|
|
.status-item:hover .status-icon {
|
|
transform: rotate(5deg) scale(1.1);
|
|
background: rgba(255,255,255,0.35);
|
|
}
|
|
|
|
.status-icon::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -2px;
|
|
border-radius: var(--radius-md);
|
|
border: 2px solid rgba(255,255,255,0.3);
|
|
opacity: 0;
|
|
transition: var(--transition-smooth);
|
|
}
|
|
|
|
.status-item:hover .status-icon::after {
|
|
opacity: 1;
|
|
inset: -4px;
|
|
}
|
|
|
|
.status-text {
|
|
flex: 1;
|
|
}
|
|
|
|
.status-label {
|
|
font-size: 0.875rem;
|
|
opacity: 0.9;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.status-value {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.status-live-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #10b981;
|
|
border-radius: 50%;
|
|
animation: live-pulse 2s ease-in-out infinite;
|
|
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
|
|
}
|
|
|
|
@keyframes live-pulse {
|
|
0%, 100% {
|
|
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
|
|
}
|
|
}
|
|
|
|
.uptime-bar {
|
|
width: 40px;
|
|
height: 4px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 2px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.uptime-bar::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 99.9%;
|
|
background: linear-gradient(90deg, #10b981, #34d399);
|
|
border-radius: 2px;
|
|
animation: uptime-fill 2s ease-out forwards;
|
|
}
|
|
|
|
@keyframes uptime-fill {
|
|
from { width: 0; }
|
|
to { width: 99.9%; }
|
|
}
|
|
|
|
.support-indicator {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #06b6d4;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
}
|
|
|
|
.support-indicator::before,
|
|
.support-indicator::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 50%;
|
|
border: 1px solid #06b6d4;
|
|
animation: support-wave 2s ease-out infinite;
|
|
}
|
|
|
|
.support-indicator::before {
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.support-indicator::after {
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
@keyframes support-wave {
|
|
0% {
|
|
width: 8px;
|
|
height: 8px;
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
width: 24px;
|
|
height: 24px;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Features Grid */
|
|
.features-section {
|
|
padding-top: var(--spacing-2xl);
|
|
padding-bottom: var(--spacing-2xl);
|
|
}
|
|
|
|
.section-header {
|
|
text-align: center;
|
|
margin-bottom: var(--spacing-xl);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: clamp(1.875rem, 4vw, 2.25rem);
|
|
font-weight: 700;
|
|
margin: 0 0 var(--spacing-sm) 0;
|
|
color: var(--color-text-base);
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.section-title::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -8px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 60px;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.section-header .section-title {
|
|
display: block;
|
|
}
|
|
|
|
.section-subtitle {
|
|
font-size: 1.125rem;
|
|
color: var(--color-text-muted);
|
|
margin: var(--spacing-md) 0 0 0;
|
|
max-width: 48rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.feature-card {
|
|
background: var(--color-bg-secondary);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-xl);
|
|
transition: var(--transition-smooth);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.feature-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
|
|
transform: translateX(-100%);
|
|
transition: var(--transition-smooth);
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-6px);
|
|
box-shadow: var(--shadow-2xl);
|
|
border-color: var(--color-primary-light);
|
|
background: var(--color-bg-base);
|
|
}
|
|
|
|
.feature-card:hover::before {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: var(--radius-md);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: var(--spacing-md);
|
|
font-size: 1.75rem;
|
|
position: relative;
|
|
transition: var(--transition-smooth);
|
|
}
|
|
|
|
.feature-card:hover .feature-icon {
|
|
transform: scale(1.1) rotate(5deg);
|
|
}
|
|
|
|
.feature-icon svg {
|
|
transition: var(--transition-smooth);
|
|
}
|
|
|
|
.feature-card:hover .feature-icon svg {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.feature-icon-primary { background: rgba(59, 130, 246, 0.1); color: var(--color-primary); }
|
|
.feature-icon-success { background: rgba(16, 185, 129, 0.1); color: var(--color-success); }
|
|
.feature-icon-warning { background: rgba(245, 158, 11, 0.1); color: var(--color-warning); }
|
|
.feature-icon-info { background: rgba(6, 182, 212, 0.1); color: var(--color-info); }
|
|
|
|
.feature-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin: 0 0 var(--spacing-xs) 0;
|
|
color: var(--color-text-base);
|
|
}
|
|
|
|
.feature-description {
|
|
font-size: 0.9375rem;
|
|
color: var(--color-text-muted);
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Server Panels (Proxmox-inspired) */
|
|
.nodes-section {
|
|
padding-top: var(--spacing-2xl);
|
|
padding-bottom: var(--spacing-2xl);
|
|
background: var(--color-bg-secondary);
|
|
}
|
|
|
|
.nodes-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.node-card {
|
|
background: var(--color-bg-base);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-lg);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.node-card:hover {
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.node-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.node-title {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
color: var(--color-text-base);
|
|
}
|
|
|
|
.node-status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 999px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
background: rgba(16, 185, 129, 0.1);
|
|
color: var(--color-success);
|
|
border: 1px solid rgba(16, 185, 129, 0.3);
|
|
transition: var(--transition-smooth);
|
|
}
|
|
|
|
.node-card:hover .node-status {
|
|
background: rgba(16, 185, 129, 0.2);
|
|
border-color: rgba(16, 185, 129, 0.5);
|
|
}
|
|
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
position: relative;
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
.status-dot::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -2px;
|
|
left: -2px;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
border-radius: 50%;
|
|
border: 2px solid currentColor;
|
|
animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.7; }
|
|
}
|
|
|
|
@keyframes ping {
|
|
0% { transform: scale(1); opacity: 1; }
|
|
75%, 100% { transform: scale(1.8); opacity: 0; }
|
|
}
|
|
|
|
.node-stats {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.node-stat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.node-stat-label {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 0.875rem;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.node-stat-value {
|
|
font-weight: 600;
|
|
color: var(--color-text-base);
|
|
}
|
|
|
|
/* Mini Network Chart */
|
|
.mini-chart {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 2px;
|
|
height: 24px;
|
|
margin-top: var(--spacing-sm);
|
|
}
|
|
|
|
.mini-chart-bar {
|
|
flex: 1;
|
|
background: linear-gradient(to top, var(--color-primary), var(--color-primary-light));
|
|
border-radius: 2px 2px 0 0;
|
|
transition: height 0.3s ease;
|
|
min-height: 4px;
|
|
animation: chart-grow 0.8s ease-out forwards;
|
|
transform-origin: bottom;
|
|
}
|
|
|
|
@keyframes chart-grow {
|
|
from {
|
|
transform: scaleY(0);
|
|
}
|
|
to {
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
|
|
.mini-chart-bar:nth-child(1) { animation-delay: 0.1s; }
|
|
.mini-chart-bar:nth-child(2) { animation-delay: 0.15s; }
|
|
.mini-chart-bar:nth-child(3) { animation-delay: 0.2s; }
|
|
.mini-chart-bar:nth-child(4) { animation-delay: 0.25s; }
|
|
.mini-chart-bar:nth-child(5) { animation-delay: 0.3s; }
|
|
.mini-chart-bar:nth-child(6) { animation-delay: 0.35s; }
|
|
.mini-chart-bar:nth-child(7) { animation-delay: 0.4s; }
|
|
.mini-chart-bar:nth-child(8) { animation-delay: 0.45s; }
|
|
|
|
/* Activity Indicator */
|
|
.activity-dots {
|
|
display: flex;
|
|
gap: 4px;
|
|
align-items: center;
|
|
}
|
|
|
|
.activity-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
background: var(--color-success);
|
|
border-radius: 50%;
|
|
animation: activity-blink 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.activity-dot:nth-child(1) { animation-delay: 0s; }
|
|
.activity-dot:nth-child(2) { animation-delay: 0.3s; }
|
|
.activity-dot:nth-child(3) { animation-delay: 0.6s; }
|
|
|
|
@keyframes activity-blink {
|
|
0%, 100% { opacity: 0.3; transform: scale(0.8); }
|
|
50% { opacity: 1; transform: scale(1); }
|
|
}
|
|
|
|
/* Connection Line Animation */
|
|
.connection-line {
|
|
position: relative;
|
|
height: 2px;
|
|
background: var(--color-border);
|
|
margin: var(--spacing-sm) 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.connection-line::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -30%;
|
|
width: 30%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
|
|
animation: connection-flow 2s linear infinite;
|
|
}
|
|
|
|
@keyframes connection-flow {
|
|
0% { left: -30%; }
|
|
100% { left: 100%; }
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 10px;
|
|
background: var(--color-bg-tertiary);
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.progress-bar::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 50%;
|
|
background: linear-gradient(to bottom, rgba(255,255,255,0.2), transparent);
|
|
border-radius: 999px 999px 0 0;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
|
|
border-radius: 999px;
|
|
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.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: shimmer 2s infinite;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
|
|
.progress-fill-success {
|
|
background: linear-gradient(90deg, var(--color-success), #059669);
|
|
}
|
|
|
|
.progress-fill-warning {
|
|
background: linear-gradient(90deg, var(--color-warning), #d97706);
|
|
}
|
|
|
|
/* Stats Section */
|
|
.stats-section {
|
|
padding-top: var(--spacing-2xl);
|
|
padding-bottom: var(--spacing-2xl);
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.stat-card {
|
|
background: var(--color-bg-secondary);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-xl);
|
|
text-align: center;
|
|
transition: var(--transition-smooth);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.stat-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
|
|
transform: scale(0);
|
|
transition: transform 0.6s ease;
|
|
}
|
|
|
|
.stat-card:hover::before {
|
|
transform: scale(1);
|
|
}
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-8px) scale(1.02);
|
|
box-shadow: var(--shadow-2xl);
|
|
border-color: var(--color-primary-light);
|
|
}
|
|
|
|
.stat-icon-wrapper {
|
|
width: 72px;
|
|
height: 72px;
|
|
margin: 0 auto var(--spacing-md) auto;
|
|
border-radius: var(--radius-lg);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 2rem;
|
|
position: relative;
|
|
transition: var(--transition-smooth);
|
|
}
|
|
|
|
.stat-card:hover .stat-icon-wrapper {
|
|
transform: translateY(-4px) rotate(5deg);
|
|
}
|
|
|
|
.stat-icon-wrapper::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -4px;
|
|
border-radius: var(--radius-lg);
|
|
opacity: 0;
|
|
transition: var(--transition-smooth);
|
|
}
|
|
|
|
.stat-card:hover .stat-icon-wrapper::before {
|
|
opacity: 1;
|
|
animation: icon-glow 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes icon-glow {
|
|
0%, 100% { transform: scale(1); opacity: 0.5; }
|
|
50% { transform: scale(1.1); opacity: 0.8; }
|
|
}
|
|
|
|
.stat-icon-wrapper-primary {
|
|
background: rgba(59, 130, 246, 0.1);
|
|
color: var(--color-primary);
|
|
}
|
|
.stat-icon-wrapper-primary::before {
|
|
background: radial-gradient(circle, rgba(59, 130, 246, 0.3), transparent);
|
|
}
|
|
|
|
.stat-icon-wrapper-success {
|
|
background: rgba(16, 185, 129, 0.1);
|
|
color: var(--color-success);
|
|
}
|
|
.stat-icon-wrapper-success::before {
|
|
background: radial-gradient(circle, rgba(16, 185, 129, 0.3), transparent);
|
|
}
|
|
|
|
.stat-icon-wrapper-warning {
|
|
background: rgba(245, 158, 11, 0.1);
|
|
color: var(--color-warning);
|
|
}
|
|
.stat-icon-wrapper-warning::before {
|
|
background: radial-gradient(circle, rgba(245, 158, 11, 0.3), transparent);
|
|
}
|
|
|
|
.stat-icon-wrapper-info {
|
|
background: rgba(6, 182, 212, 0.1);
|
|
color: var(--color-info);
|
|
}
|
|
.stat-icon-wrapper-info::before {
|
|
background: radial-gradient(circle, rgba(6, 182, 212, 0.3), transparent);
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 2.5rem;
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
margin-bottom: var(--spacing-xs);
|
|
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--color-text-base);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.stat-description {
|
|
font-size: 0.875rem;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
/* Plans/Products Section */
|
|
.plans-section {
|
|
padding-top: var(--spacing-2xl);
|
|
padding-bottom: var(--spacing-2xl);
|
|
background: var(--color-bg-secondary);
|
|
}
|
|
|
|
.plans-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.plan-card {
|
|
background: var(--color-bg-base);
|
|
border: 2px solid var(--color-border);
|
|
border-radius: var(--radius-xl);
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: var(--transition-smooth);
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.plan-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 5px;
|
|
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark), var(--color-primary-light));
|
|
opacity: 0;
|
|
transition: var(--transition-smooth);
|
|
}
|
|
|
|
.plan-card::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.05), transparent 60%);
|
|
opacity: 0;
|
|
transition: var(--transition-smooth);
|
|
}
|
|
|
|
.plan-card:hover {
|
|
border-color: var(--color-primary);
|
|
box-shadow: var(--shadow-2xl);
|
|
transform: translateY(-10px) scale(1.01);
|
|
}
|
|
|
|
.plan-card:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.plan-card:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.plan-image {
|
|
width: 100%;
|
|
height: 180px;
|
|
object-fit: cover;
|
|
border-radius: 0;
|
|
margin-bottom: 0;
|
|
transition: var(--transition-smooth);
|
|
}
|
|
|
|
.plan-card:hover .plan-image {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.plan-content {
|
|
padding: var(--spacing-xl);
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.plan-name {
|
|
font-size: 1.625rem;
|
|
font-weight: 700;
|
|
margin: 0 0 var(--spacing-sm) 0;
|
|
color: var(--color-text-base);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.plan-description {
|
|
font-size: 0.9375rem;
|
|
color: var(--color-text-muted);
|
|
line-height: 1.7;
|
|
margin-bottom: var(--spacing-lg);
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.plan-cta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
padding: 1rem;
|
|
background: var(--color-primary);
|
|
color: white;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
border-radius: var(--radius-md);
|
|
font-weight: 600;
|
|
transition: var(--transition-smooth);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.plan-cta::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
transition: width 0.6s ease, height 0.6s ease;
|
|
}
|
|
|
|
.plan-cta:hover::before {
|
|
width: 300px;
|
|
height: 300px;
|
|
}
|
|
|
|
.plan-cta:hover {
|
|
background: var(--color-primary-dark);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 20px -6px rgba(59, 130, 246, 0.5);
|
|
}
|
|
|
|
/* Community Section */
|
|
.community-section {
|
|
padding-top: var(--spacing-3xl);
|
|
padding-bottom: var(--spacing-3xl);
|
|
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.community-section {
|
|
background: linear-gradient(135deg, #0c4a6e 0%, #075985 100%);
|
|
}
|
|
}
|
|
|
|
.community-section::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
right: -10%;
|
|
width: 60%;
|
|
height: 200%;
|
|
background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.community-content {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--spacing-3xl);
|
|
align-items: center;
|
|
}
|
|
|
|
.community-text {
|
|
z-index: 1;
|
|
}
|
|
|
|
.community-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
padding: 0.5rem 1rem;
|
|
background: rgba(59, 130, 246, 0.15);
|
|
color: var(--color-primary);
|
|
border-radius: 999px;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.community-title {
|
|
font-size: clamp(2rem, 4vw, 2.75rem);
|
|
font-weight: 800;
|
|
margin: 0 0 var(--spacing-md) 0;
|
|
color: var(--color-text-base);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.community-highlight {
|
|
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.community-description {
|
|
font-size: 1.125rem;
|
|
color: var(--color-text-muted);
|
|
line-height: 1.8;
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.community-features {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.community-feature-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-sm);
|
|
padding: var(--spacing-md);
|
|
background: var(--color-bg-base);
|
|
border-radius: var(--radius-md);
|
|
border-left: 4px solid var(--color-primary);
|
|
transition: var(--transition-smooth);
|
|
}
|
|
|
|
.community-feature-item:hover {
|
|
transform: translateX(8px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.community-feature-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
color: var(--color-primary);
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.community-feature-text {
|
|
flex: 1;
|
|
}
|
|
|
|
.community-feature-title {
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
margin: 0 0 0.25rem 0;
|
|
color: var(--color-text-base);
|
|
}
|
|
|
|
.community-feature-description {
|
|
font-size: 0.9375rem;
|
|
color: var(--color-text-muted);
|
|
margin: 0;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.community-visual {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.community-card-stack {
|
|
position: relative;
|
|
height: 400px;
|
|
}
|
|
|
|
.community-card {
|
|
position: absolute;
|
|
background: var(--color-bg-base);
|
|
border: 2px solid var(--color-border);
|
|
border-radius: var(--radius-xl);
|
|
padding: var(--spacing-lg);
|
|
box-shadow: var(--shadow-xl);
|
|
transition: var(--transition-smooth);
|
|
}
|
|
|
|
.community-card:nth-child(1) {
|
|
top: 0;
|
|
left: 0;
|
|
right: 20%;
|
|
z-index: 3;
|
|
transform: rotate(-2deg);
|
|
}
|
|
|
|
.community-card:nth-child(2) {
|
|
top: 60px;
|
|
left: 15%;
|
|
right: 5%;
|
|
z-index: 2;
|
|
transform: rotate(1deg);
|
|
}
|
|
|
|
.community-card:nth-child(3) {
|
|
top: 120px;
|
|
left: 5%;
|
|
right: 15%;
|
|
z-index: 1;
|
|
transform: rotate(-1deg);
|
|
}
|
|
|
|
.community-card:hover {
|
|
transform: rotate(0deg) translateY(-10px) scale(1.02);
|
|
z-index: 4;
|
|
box-shadow: var(--shadow-2xl);
|
|
}
|
|
|
|
.community-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.community-card-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
|
|
border-radius: var(--radius-md);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
}
|
|
|
|
.community-card-title {
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
color: var(--color-text-base);
|
|
}
|
|
|
|
.community-card-content {
|
|
font-size: 0.9375rem;
|
|
color: var(--color-text-muted);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.community-card-price {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.5rem;
|
|
margin-top: var(--spacing-md);
|
|
}
|
|
|
|
.community-card-price-original {
|
|
font-size: 1rem;
|
|
color: var(--color-text-light);
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.community-card-price-subsidized {
|
|
font-size: 1.75rem;
|
|
font-weight: 800;
|
|
color: var(--color-success);
|
|
}
|
|
|
|
.community-card-badge {
|
|
display: inline-block;
|
|
padding: 0.25rem 0.75rem;
|
|
background: rgba(16, 185, 129, 0.1);
|
|
color: var(--color-success);
|
|
border-radius: 999px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
margin-top: var(--spacing-sm);
|
|
}
|
|
|
|
/* Announcements */
|
|
.announcements-section {
|
|
padding-top: var(--spacing-2xl);
|
|
padding-bottom: var(--spacing-2xl);
|
|
}
|
|
|
|
.announcements-card {
|
|
background: var(--color-bg-secondary);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-xl);
|
|
max-width: 56rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.announcements-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
margin-bottom: var(--spacing-lg);
|
|
padding-bottom: var(--spacing-md);
|
|
border-bottom: 2px solid var(--color-border);
|
|
}
|
|
|
|
.announcements-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.announcements-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
color: var(--color-text-base);
|
|
}
|
|
|
|
.announcements-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.announcement-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-md);
|
|
padding: var(--spacing-md);
|
|
background: var(--color-bg-base);
|
|
border-radius: var(--radius-md);
|
|
border-left: 4px solid var(--color-primary);
|
|
transition: var(--transition-smooth);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.announcement-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 4px;
|
|
background: linear-gradient(180deg, var(--color-primary), var(--color-primary-light));
|
|
transform: scaleY(0);
|
|
transform-origin: bottom;
|
|
transition: var(--transition-smooth);
|
|
}
|
|
|
|
.announcement-item:hover::before {
|
|
transform: scaleY(1);
|
|
}
|
|
|
|
.announcement-item:hover {
|
|
box-shadow: var(--shadow-lg);
|
|
transform: translateX(8px);
|
|
background: var(--color-bg-secondary);
|
|
}
|
|
|
|
.announcement-content {
|
|
flex: 1;
|
|
font-size: 0.9375rem;
|
|
color: var(--color-text-base);
|
|
position: relative;
|
|
}
|
|
|
|
.announcement-content::before {
|
|
content: '📢';
|
|
position: absolute;
|
|
left: -30px;
|
|
opacity: 0;
|
|
transition: var(--transition-smooth);
|
|
}
|
|
|
|
.announcement-item:hover .announcement-content::before {
|
|
opacity: 0.3;
|
|
left: -25px;
|
|
}
|
|
|
|
.announcement-content {
|
|
flex: 1;
|
|
font-size: 0.9375rem;
|
|
color: var(--color-text-base);
|
|
}
|
|
|
|
.announcement-date {
|
|
font-size: 0.8125rem;
|
|
color: var(--color-text-muted);
|
|
white-space: nowrap;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Footer */
|
|
.home-footer {
|
|
padding-top: var(--spacing-2xl);
|
|
padding-bottom: var(--spacing-xl);
|
|
background: var(--color-bg-tertiary);
|
|
border-top: 2px solid var(--color-border);
|
|
position: relative;
|
|
}
|
|
|
|
.home-footer::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
|
|
}
|
|
|
|
.footer-content {
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-text {
|
|
font-size: 0.875rem;
|
|
color: var(--color-text-muted);
|
|
margin: 0;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.footer-link {
|
|
color: var(--color-primary);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
transition: var(--transition-base);
|
|
position: relative;
|
|
}
|
|
|
|
.footer-link::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: var(--color-primary);
|
|
transform: scaleX(0);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.footer-link:hover::after {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.footer-link:hover {
|
|
color: var(--color-primary-dark);
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fadeIn 0.6s ease-out;
|
|
}
|
|
|
|
.fade-in-delay-1 { animation-delay: 0.1s; animation-fill-mode: both; }
|
|
.fade-in-delay-2 { animation-delay: 0.2s; animation-fill-mode: both; }
|
|
.fade-in-delay-3 { animation-delay: 0.3s; animation-fill-mode: both; }
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
:root {
|
|
--spacing-2xl: 3rem;
|
|
--spacing-3xl: 4rem;
|
|
}
|
|
|
|
.hero {
|
|
padding-top: clamp(2rem, 6vw, 3rem);
|
|
padding-bottom: clamp(2rem, 6vw, 3rem);
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: clamp(2rem, 8vw, 3rem);
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.hero-cta {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
.hero-cta-button {
|
|
width: 100%;
|
|
justify-content: center;
|
|
padding: 0.875rem 1.5rem;
|
|
}
|
|
|
|
.hero-status-widget {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.status-item {
|
|
padding: var(--spacing-sm);
|
|
}
|
|
|
|
.features-grid,
|
|
.nodes-grid,
|
|
.stats-grid,
|
|
.plans-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.feature-card,
|
|
.node-card,
|
|
.stat-card,
|
|
.plan-card {
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.community-content {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--spacing-xl);
|
|
}
|
|
|
|
.community-visual {
|
|
order: -1;
|
|
}
|
|
|
|
.community-card-stack {
|
|
height: 300px;
|
|
}
|
|
|
|
.community-card {
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.community-card:nth-child(1) {
|
|
right: 10%;
|
|
}
|
|
|
|
.community-card:nth-child(2) {
|
|
right: 0;
|
|
}
|
|
|
|
.community-card:nth-child(3) {
|
|
right: 10%;
|
|
}
|
|
|
|
.announcement-item {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
padding: var(--spacing-sm);
|
|
}
|
|
|
|
.announcement-date {
|
|
text-align: left;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: clamp(1.5rem, 6vw, 2rem);
|
|
}
|
|
|
|
.section-subtitle {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 769px) and (max-width: 1024px) {
|
|
.features-grid,
|
|
.nodes-grid,
|
|
.stats-grid,
|
|
.plans-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.community-content {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--spacing-xl);
|
|
}
|
|
}
|
|
|
|
/* Loading State */
|
|
.loading-skeleton {
|
|
background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-bg-tertiary) 50%, var(--color-bg-secondary) 75%);
|
|
background-size: 200% 100%;
|
|
animation: loading 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes loading {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
|
|
/* Scroll to Top Button */
|
|
.scroll-to-top {
|
|
position: fixed;
|
|
bottom: 2rem;
|
|
right: 2rem;
|
|
width: 48px;
|
|
height: 48px;
|
|
background: var(--color-primary);
|
|
color: white;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: var(--transition-smooth);
|
|
z-index: 1000;
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.scroll-to-top.visible {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.scroll-to-top:hover {
|
|
transform: translateY(-4px) scale(1.1);
|
|
box-shadow: var(--shadow-xl);
|
|
background: var(--color-primary-dark);
|
|
}
|
|
|
|
.scroll-to-top:active {
|
|
transform: translateY(-2px) scale(1.05);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.scroll-to-top {
|
|
bottom: 1rem;
|
|
right: 1rem;
|
|
width: 44px;
|
|
height: 44px;
|
|
}
|
|
}
|
|
|
|
/* Tooltip System */
|
|
[data-tooltip] {
|
|
position: relative;
|
|
cursor: help;
|
|
}
|
|
|
|
[data-tooltip]::before,
|
|
[data-tooltip]::after {
|
|
position: absolute;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: var(--transition-smooth);
|
|
z-index: 100;
|
|
pointer-events: none;
|
|
}
|
|
|
|
[data-tooltip]::before {
|
|
content: attr(data-tooltip);
|
|
bottom: calc(100% + 10px);
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(10px);
|
|
padding: 0.5rem 0.75rem;
|
|
background: var(--color-text-base);
|
|
color: var(--color-bg-base);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
border-radius: var(--radius-sm);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
[data-tooltip]::after {
|
|
content: '';
|
|
bottom: calc(100% + 4px);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border: 6px solid transparent;
|
|
border-top-color: var(--color-text-base);
|
|
}
|
|
|
|
[data-tooltip]:hover::before,
|
|
[data-tooltip]:hover::after {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
[data-tooltip]:hover::before {
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
|
|
/* Glow Ring Animation for Important Elements */
|
|
.glow-ring {
|
|
position: relative;
|
|
}
|
|
|
|
.glow-ring::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -3px;
|
|
background: linear-gradient(45deg, var(--color-primary), var(--color-primary-light), var(--color-info), var(--color-primary));
|
|
background-size: 400% 400%;
|
|
border-radius: inherit;
|
|
opacity: 0;
|
|
z-index: -1;
|
|
animation: glow-rotate 3s ease infinite;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.glow-ring:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
@keyframes glow-rotate {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
/* Typing Cursor Effect */
|
|
.typing-cursor::after {
|
|
content: '|';
|
|
animation: blink-cursor 1s step-end infinite;
|
|
color: white;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
@keyframes blink-cursor {
|
|
0%, 50% { opacity: 1; }
|
|
51%, 100% { opacity: 0; }
|
|
}
|
|
|
|
/* Spotlight Effect on Cards */
|
|
.spotlight-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.spotlight-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: var(--y, 50%);
|
|
left: var(--x, 50%);
|
|
width: 200px;
|
|
height: 200px;
|
|
background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
|
|
transform: translate(-50%, -50%);
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.spotlight-card:hover::before {
|
|
opacity: 1;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
(function() {
|
|
'use strict';
|
|
|
|
// Smooth scroll for anchor links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function(e) {
|
|
const href = this.getAttribute('href');
|
|
if (href === '#' || !href) return;
|
|
|
|
e.preventDefault();
|
|
const target = document.querySelector(href);
|
|
if (target) {
|
|
const offset = 80;
|
|
const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - offset;
|
|
window.scrollTo({
|
|
top: targetPosition,
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Intersection Observer for fade-in animations
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
};
|
|
|
|
const fadeObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.opacity = '1';
|
|
entry.target.style.transform = 'translateY(0)';
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// Apply fade-in to elements
|
|
document.querySelectorAll('.fade-in, .fade-in-delay-1, .fade-in-delay-2, .fade-in-delay-3').forEach(el => {
|
|
el.style.opacity = '0';
|
|
el.style.transform = 'translateY(20px)';
|
|
el.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';
|
|
fadeObserver.observe(el);
|
|
});
|
|
|
|
// Animated counter for stats
|
|
function animateCounter(element, target, duration = 2000) {
|
|
const start = 0;
|
|
const increment = target / (duration / 16);
|
|
let current = start;
|
|
|
|
const timer = setInterval(() => {
|
|
current += increment;
|
|
if (current >= target) {
|
|
current = target;
|
|
clearInterval(timer);
|
|
}
|
|
|
|
// Format number with commas
|
|
const formatted = Math.floor(current).toLocaleString();
|
|
element.textContent = formatted + (element.dataset.suffix || '');
|
|
}, 16);
|
|
}
|
|
|
|
// Observe stat values and animate when visible
|
|
const statsObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting && !entry.target.dataset.animated) {
|
|
entry.target.dataset.animated = 'true';
|
|
const text = entry.target.textContent.trim();
|
|
|
|
// Extract number from text (handles formats like "1,234+", "99.9%", "24/7")
|
|
const match = text.match(/[\d,]+/);
|
|
if (match) {
|
|
const number = parseInt(match[0].replace(/,/g, ''));
|
|
if (!isNaN(number) && number < 100000) {
|
|
const suffix = text.replace(match[0], '').trim();
|
|
entry.target.dataset.suffix = suffix;
|
|
animateCounter(entry.target, number);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}, { threshold: 0.5 });
|
|
|
|
document.querySelectorAll('.stat-value').forEach(el => {
|
|
statsObserver.observe(el);
|
|
});
|
|
|
|
// Animate progress bars when visible
|
|
const progressObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting && !entry.target.dataset.animated) {
|
|
entry.target.dataset.animated = 'true';
|
|
const fill = entry.target.querySelector('.progress-fill');
|
|
if (fill) {
|
|
const targetWidth = fill.style.width;
|
|
fill.style.width = '0%';
|
|
setTimeout(() => {
|
|
fill.style.width = targetWidth;
|
|
}, 100);
|
|
}
|
|
}
|
|
});
|
|
}, { threshold: 0.3 });
|
|
|
|
document.querySelectorAll('.progress-bar').forEach(el => {
|
|
progressObserver.observe(el);
|
|
});
|
|
|
|
// Parallax effect for hero section
|
|
let ticking = false;
|
|
window.addEventListener('scroll', () => {
|
|
if (!ticking) {
|
|
window.requestAnimationFrame(() => {
|
|
const scrolled = window.pageYOffset;
|
|
const hero = document.querySelector('.hero');
|
|
if (hero && scrolled < hero.offsetHeight) {
|
|
hero.style.transform = `translateY(${scrolled * 0.5}px)`;
|
|
hero.style.opacity = 1 - (scrolled / hero.offsetHeight) * 0.5;
|
|
}
|
|
ticking = false;
|
|
});
|
|
ticking = true;
|
|
}
|
|
});
|
|
|
|
// Add ripple effect to buttons
|
|
document.querySelectorAll('.hero-cta-button, .plan-cta').forEach(button => {
|
|
button.addEventListener('click', function(e) {
|
|
const ripple = document.createElement('span');
|
|
const rect = this.getBoundingClientRect();
|
|
const size = Math.max(rect.width, rect.height);
|
|
const x = e.clientX - rect.left - size / 2;
|
|
const y = e.clientY - rect.top - size / 2;
|
|
|
|
ripple.style.cssText = `
|
|
position: absolute;
|
|
width: ${size}px;
|
|
height: ${size}px;
|
|
left: ${x}px;
|
|
top: ${y}px;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
border-radius: 50%;
|
|
transform: scale(0);
|
|
animation: ripple 0.6s ease-out;
|
|
pointer-events: none;
|
|
`;
|
|
|
|
this.style.position = 'relative';
|
|
this.style.overflow = 'hidden';
|
|
this.appendChild(ripple);
|
|
|
|
setTimeout(() => ripple.remove(), 600);
|
|
});
|
|
});
|
|
|
|
// Add ripple animation if not already defined
|
|
if (!document.querySelector('#ripple-animation')) {
|
|
const style = document.createElement('style');
|
|
style.id = 'ripple-animation';
|
|
style.textContent = `
|
|
@keyframes ripple {
|
|
to {
|
|
transform: scale(4);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
// Card tilt effect on mouse move
|
|
document.querySelectorAll('.feature-card, .node-card, .stat-card, .plan-card').forEach(card => {
|
|
card.addEventListener('mousemove', function(e) {
|
|
const rect = this.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;
|
|
|
|
this.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-8px)`;
|
|
});
|
|
|
|
card.addEventListener('mouseleave', function() {
|
|
this.style.transform = '';
|
|
});
|
|
});
|
|
|
|
// Lazy load images with fade-in
|
|
if ('IntersectionObserver' in window) {
|
|
const imageObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const img = entry.target;
|
|
if (img.dataset.src) {
|
|
img.src = img.dataset.src;
|
|
img.removeAttribute('data-src');
|
|
}
|
|
img.style.opacity = '1';
|
|
imageObserver.unobserve(img);
|
|
}
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('img[data-src]').forEach(img => {
|
|
img.style.opacity = '0';
|
|
img.style.transition = 'opacity 0.5s ease';
|
|
imageObserver.observe(img);
|
|
});
|
|
}
|
|
|
|
// Status widget real-time animation
|
|
const statusDots = document.querySelectorAll('.status-dot');
|
|
statusDots.forEach((dot, index) => {
|
|
setInterval(() => {
|
|
dot.style.animation = 'none';
|
|
setTimeout(() => {
|
|
dot.style.animation = '';
|
|
}, 10);
|
|
}, 2000 + index * 500);
|
|
});
|
|
|
|
// Announcement items stagger animation
|
|
document.querySelectorAll('.announcement-item').forEach((item, index) => {
|
|
item.style.opacity = '0';
|
|
item.style.transform = 'translateX(-20px)';
|
|
item.style.transition = `opacity 0.5s ease ${index * 0.1}s, transform 0.5s ease ${index * 0.1}s`;
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.opacity = '1';
|
|
entry.target.style.transform = 'translateX(0)';
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.5 });
|
|
|
|
observer.observe(item);
|
|
});
|
|
|
|
// Community cards interactive hover
|
|
const communityCards = document.querySelectorAll('.community-card');
|
|
communityCards.forEach((card, index) => {
|
|
card.addEventListener('mouseenter', function() {
|
|
communityCards.forEach((c, i) => {
|
|
if (i !== index) {
|
|
c.style.opacity = '0.6';
|
|
c.style.filter = 'blur(1px)';
|
|
}
|
|
});
|
|
});
|
|
|
|
card.addEventListener('mouseleave', function() {
|
|
communityCards.forEach(c => {
|
|
c.style.opacity = '1';
|
|
c.style.filter = 'none';
|
|
});
|
|
});
|
|
});
|
|
|
|
// Scroll-triggered number increment for node stats
|
|
document.querySelectorAll('.node-stat-value').forEach(el => {
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting && !entry.target.dataset.animated) {
|
|
entry.target.dataset.animated = 'true';
|
|
entry.target.style.transform = 'scale(1.1)';
|
|
setTimeout(() => {
|
|
entry.target.style.transform = 'scale(1)';
|
|
}, 200);
|
|
}
|
|
});
|
|
}, { threshold: 0.5 });
|
|
|
|
el.style.transition = 'transform 0.3s ease';
|
|
observer.observe(el);
|
|
});
|
|
|
|
// Add loading state simulation (optional, for dynamic content)
|
|
window.addEventListener('load', () => {
|
|
document.body.classList.add('loaded');
|
|
});
|
|
|
|
// Performance optimization: Debounce resize events
|
|
let resizeTimer;
|
|
window.addEventListener('resize', () => {
|
|
clearTimeout(resizeTimer);
|
|
resizeTimer = setTimeout(() => {
|
|
// Recalculate any size-dependent features
|
|
console.log('Resize complete');
|
|
}, 250);
|
|
});
|
|
|
|
// Scroll to top button functionality
|
|
const scrollToTopBtn = document.getElementById('scrollToTop');
|
|
if (scrollToTopBtn) {
|
|
// Show/hide button based on scroll position
|
|
window.addEventListener('scroll', () => {
|
|
if (window.pageYOffset > 300) {
|
|
scrollToTopBtn.classList.add('visible');
|
|
} else {
|
|
scrollToTopBtn.classList.remove('visible');
|
|
}
|
|
});
|
|
|
|
// Scroll to top when clicked
|
|
scrollToTopBtn.addEventListener('click', () => {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
});
|
|
}
|
|
|
|
// Add page load performance monitoring
|
|
if ('PerformanceObserver' in window) {
|
|
const perfObserver = new PerformanceObserver((list) => {
|
|
for (const entry of list.getEntries()) {
|
|
if (entry.entryType === 'navigation') {
|
|
console.log('Page load time:', entry.loadEventEnd - entry.fetchStart, 'ms');
|
|
}
|
|
}
|
|
});
|
|
perfObserver.observe({ entryTypes: ['navigation'] });
|
|
}
|
|
|
|
// Preload critical images
|
|
const criticalImages = document.querySelectorAll('.plan-image, .hero-badge');
|
|
criticalImages.forEach(img => {
|
|
if (img.complete) {
|
|
img.classList.add('loaded');
|
|
} else {
|
|
img.addEventListener('load', function() {
|
|
this.classList.add('loaded');
|
|
});
|
|
}
|
|
});
|
|
|
|
// Add smooth reveal for sections as user scrolls
|
|
const sections = document.querySelectorAll('section');
|
|
const sectionObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.opacity = '1';
|
|
entry.target.style.transform = 'translateY(0)';
|
|
}
|
|
});
|
|
}, {
|
|
threshold: 0.05,
|
|
rootMargin: '0px 0px -100px 0px'
|
|
});
|
|
|
|
sections.forEach(section => {
|
|
section.style.opacity = '0';
|
|
section.style.transform = 'translateY(30px)';
|
|
section.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
|
|
sectionObserver.observe(section);
|
|
});
|
|
|
|
// Spotlight effect for cards
|
|
document.querySelectorAll('.feature-card, .node-card, .stat-card').forEach(card => {
|
|
card.classList.add('spotlight-card');
|
|
|
|
card.addEventListener('mousemove', function(e) {
|
|
const rect = this.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
this.style.setProperty('--x', x + 'px');
|
|
this.style.setProperty('--y', y + 'px');
|
|
});
|
|
});
|
|
|
|
// Add glow ring effect to important buttons
|
|
document.querySelectorAll('.hero-cta-button-primary, .plan-cta').forEach(btn => {
|
|
btn.classList.add('glow-ring');
|
|
});
|
|
|
|
// Magnetic button effect
|
|
document.querySelectorAll('.hero-cta-button, .plan-cta').forEach(button => {
|
|
button.addEventListener('mousemove', function(e) {
|
|
const rect = this.getBoundingClientRect();
|
|
const x = e.clientX - rect.left - rect.width / 2;
|
|
const y = e.clientY - rect.top - rect.height / 2;
|
|
|
|
this.style.transform = `translate(${x * 0.15}px, ${y * 0.15}px)`;
|
|
});
|
|
|
|
button.addEventListener('mouseleave', function() {
|
|
this.style.transform = '';
|
|
});
|
|
});
|
|
|
|
// Text scramble effect for stat values
|
|
class TextScramble {
|
|
constructor(el) {
|
|
this.el = el;
|
|
this.chars = '!<>-_\\/[]{}—=+*^?#________';
|
|
this.update = this.update.bind(this);
|
|
}
|
|
|
|
setText(newText) {
|
|
const oldText = this.el.innerText;
|
|
const length = Math.max(oldText.length, newText.length);
|
|
const promise = new Promise((resolve) => this.resolve = resolve);
|
|
this.queue = [];
|
|
|
|
for (let i = 0; i < length; i++) {
|
|
const from = oldText[i] || '';
|
|
const to = newText[i] || '';
|
|
const start = Math.floor(Math.random() * 40);
|
|
const end = start + Math.floor(Math.random() * 40);
|
|
this.queue.push({ from, to, start, end });
|
|
}
|
|
|
|
cancelAnimationFrame(this.frameRequest);
|
|
this.frame = 0;
|
|
this.update();
|
|
return promise;
|
|
}
|
|
|
|
update() {
|
|
let output = '';
|
|
let complete = 0;
|
|
|
|
for (let i = 0, n = this.queue.length; i < n; i++) {
|
|
let { from, to, start, end, char } = this.queue[i];
|
|
|
|
if (this.frame >= end) {
|
|
complete++;
|
|
output += to;
|
|
} else if (this.frame >= start) {
|
|
if (!char || Math.random() < 0.28) {
|
|
char = this.chars[Math.floor(Math.random() * this.chars.length)];
|
|
this.queue[i].char = char;
|
|
}
|
|
output += `<span style="color: var(--color-primary-light)">${char}</span>`;
|
|
} else {
|
|
output += from;
|
|
}
|
|
}
|
|
|
|
this.el.innerHTML = output;
|
|
|
|
if (complete === this.queue.length) {
|
|
this.resolve();
|
|
} else {
|
|
this.frameRequest = requestAnimationFrame(this.update);
|
|
this.frame++;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Smooth number animation with easing
|
|
function animateValue(element, start, end, duration, suffix = '') {
|
|
let startTimestamp = null;
|
|
const step = (timestamp) => {
|
|
if (!startTimestamp) startTimestamp = timestamp;
|
|
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
|
|
const easeProgress = 1 - Math.pow(1 - progress, 4); // easeOutQuart
|
|
const current = Math.floor(easeProgress * (end - start) + start);
|
|
element.textContent = current.toLocaleString() + suffix;
|
|
if (progress < 1) {
|
|
window.requestAnimationFrame(step);
|
|
}
|
|
};
|
|
window.requestAnimationFrame(step);
|
|
}
|
|
|
|
// Dynamic theme detection and color adjustment
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
|
|
function updateTheme() {
|
|
document.documentElement.classList.toggle('dark-mode', prefersDark.matches);
|
|
}
|
|
prefersDark.addEventListener('change', updateTheme);
|
|
updateTheme();
|
|
|
|
// Add keyboard navigation
|
|
let focusableElements = document.querySelectorAll('a, button, input, [tabindex]:not([tabindex="-1"])');
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Tab') {
|
|
document.body.classList.add('keyboard-navigation');
|
|
}
|
|
});
|
|
|
|
document.addEventListener('mousedown', () => {
|
|
document.body.classList.remove('keyboard-navigation');
|
|
});
|
|
|
|
// Performance: Use passive event listeners where possible
|
|
document.addEventListener('touchstart', () => {}, { passive: true });
|
|
document.addEventListener('touchmove', () => {}, { passive: true });
|
|
|
|
// Add intersection ratio-based animations
|
|
const ratioObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
const ratio = entry.intersectionRatio;
|
|
entry.target.style.setProperty('--visibility', ratio);
|
|
});
|
|
}, {
|
|
threshold: Array.from({ length: 20 }, (_, i) => i / 20)
|
|
});
|
|
|
|
document.querySelectorAll('.feature-card, .stat-card').forEach(el => {
|
|
ratioObserver.observe(el);
|
|
});
|
|
|
|
console.log('✨ Homepage interactive features loaded successfully');
|
|
console.log('📊 Total animations:', document.querySelectorAll('[class*="fade-in"]').length);
|
|
console.log('🎯 Interactive elements:', document.querySelectorAll('.feature-card, .node-card, .stat-card, .plan-card').length);
|
|
console.log('🎨 Spotlight cards:', document.querySelectorAll('.spotlight-card').length);
|
|
console.log('💫 Glow ring elements:', document.querySelectorAll('.glow-ring').length);
|
|
})();
|
|
</script>
|
|
|
|
<div id="home">
|
|
<!-- Hero Section -->
|
|
<header class="hero">
|
|
<!-- Grid Background -->
|
|
<div class="hero-grid"></div>
|
|
|
|
<!-- Animated Orbs -->
|
|
<div class="hero-orb hero-orb-1"></div>
|
|
<div class="hero-orb hero-orb-2"></div>
|
|
<div class="hero-orb hero-orb-3"></div>
|
|
|
|
<!-- Animated Particles -->
|
|
<div class="hero-particles">
|
|
<div class="hero-particle"></div>
|
|
<div class="hero-particle"></div>
|
|
<div class="hero-particle"></div>
|
|
<div class="hero-particle"></div>
|
|
<div class="hero-particle"></div>
|
|
<div class="hero-particle"></div>
|
|
<div class="hero-particle"></div>
|
|
<div class="hero-particle"></div>
|
|
<div class="hero-particle"></div>
|
|
<div class="hero-particle"></div>
|
|
</div>
|
|
|
|
<div class="home-container">
|
|
<div class="hero-content fade-in">
|
|
<div class="hero-badge">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/>
|
|
</svg>
|
|
<span>Enterprise-Grade Infrastructure</span>
|
|
</div>
|
|
|
|
<h1 class="hero-title">
|
|
Experience <span class="hero-title-highlight">Powerful</span> Hosting
|
|
</h1>
|
|
|
|
<p class="hero-subtitle">
|
|
Deploy, manage, and scale your services effortlessly with real-time insights, advanced networking controls, and a sleek management portal designed for professionals.
|
|
</p>
|
|
|
|
<div class="hero-cta">
|
|
<a href="#plans" class="hero-cta-button hero-cta-button-primary">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<polyline points="12 6 12 12 16 14"/>
|
|
</svg>
|
|
<span>Get Started</span>
|
|
</a>
|
|
<a href="#features" class="hero-cta-button hero-cta-button-secondary">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
|
<path d="M3 9h18M9 3v18"/>
|
|
</svg>
|
|
<span>Explore Features</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="hero-status-widget fade-in-delay-1">
|
|
<div class="status-item" data-tooltip="All systems operating normally">
|
|
<div class="status-icon">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<path fill="white" d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14M12 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="status-text">
|
|
<div class="status-label">System Status</div>
|
|
<div class="status-value">
|
|
<span class="status-live-dot"></span>
|
|
All Operational
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status-item" data-tooltip="Physical servers in cluster">
|
|
<div class="status-icon">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
|
|
<rect x="2" y="3" width="20" height="14" rx="2"/>
|
|
<line x1="8" y1="21" x2="16" y2="21"/>
|
|
<line x1="12" y1="17" x2="12" y2="21"/>
|
|
</svg>
|
|
</div>
|
|
<div class="status-text">
|
|
<div class="status-label">Active Nodes</div>
|
|
<div class="status-value stat-value" data-count="{{ \App\Models\Server::count() }}">{{ \App\Models\Server::count() }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status-item" data-tooltip="30-day rolling average">
|
|
<div class="status-icon">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
|
|
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
|
|
</svg>
|
|
</div>
|
|
<div class="status-text">
|
|
<div class="status-label">Uptime</div>
|
|
<div class="status-value">
|
|
<span class="uptime-bar"></span>
|
|
99.9%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status-item" data-tooltip="Expert assistance around the clock">
|
|
<div class="status-icon">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
|
<circle cx="9" cy="7" r="4"/>
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
|
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
|
</svg>
|
|
</div>
|
|
<div class="status-text">
|
|
<div class="status-label">Support</div>
|
|
<div class="status-value">
|
|
<span class="support-indicator"></span>
|
|
24/7
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Features Section -->
|
|
<section id="features" class="features-section">
|
|
<div class="home-container">
|
|
<div class="section-header fade-in">
|
|
<h2 class="section-title">Advanced Portal Features</h2>
|
|
<p class="section-subtitle">
|
|
Everything you need to manage your infrastructure with precision and confidence
|
|
</p>
|
|
</div>
|
|
|
|
<div class="features-grid">
|
|
<article class="feature-card fade-in">
|
|
<div class="feature-icon feature-icon-primary">
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<line x1="2" y1="12" x2="22" y2="12"/>
|
|
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="feature-title">Full IPv4 / IPv6 Support</h3>
|
|
<p class="feature-description">
|
|
Complete dual-stack networking with dedicated public addresses. Monitor allocation, configure reverse DNS, and manage your IP infrastructure with ease.
|
|
</p>
|
|
</article>
|
|
|
|
<article class="feature-card fade-in fade-in-delay-1">
|
|
<div class="feature-icon feature-icon-success">
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="2" y="2" width="20" height="8" rx="2" ry="2"/>
|
|
<rect x="2" y="14" width="20" height="8" rx="2" ry="2"/>
|
|
<line x1="6" y1="6" x2="6.01" y2="6"/>
|
|
<line x1="6" y1="18" x2="6.01" y2="18"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="feature-title">Real-Time Network States</h3>
|
|
<p class="feature-description">
|
|
Live monitoring of network interfaces, bandwidth utilization, packet statistics, and connection states. Visualize traffic patterns in real-time.
|
|
</p>
|
|
</article>
|
|
|
|
<article class="feature-card fade-in fade-in-delay-2">
|
|
<div class="feature-icon feature-icon-warning">
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
|
|
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="feature-title">Dynamic Firewall Rules</h3>
|
|
<p class="feature-description">
|
|
Create, modify, and deploy firewall rules on-the-fly. Granular control over inbound/outbound traffic with port ranges, protocols, and source filtering.
|
|
</p>
|
|
</article>
|
|
|
|
<article class="feature-card fade-in fade-in-delay-3">
|
|
<div class="feature-icon feature-icon-info">
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="12" y1="20" x2="12" y2="10"/>
|
|
<line x1="18" y1="20" x2="18" y2="4"/>
|
|
<line x1="6" y1="20" x2="6" y2="16"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="feature-title">Resource Graphs & Metrics</h3>
|
|
<p class="feature-description">
|
|
Comprehensive performance dashboards with CPU, memory, disk I/O, and network throughput. Historical data with customizable time ranges and alerts.
|
|
</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Server Nodes Section -->
|
|
<section id="nodes" class="nodes-section">
|
|
<div class="home-container">
|
|
<div class="section-header fade-in">
|
|
<h2 class="section-title">Infrastructure Overview</h2>
|
|
<p class="section-subtitle">
|
|
Monitor and manage your virtualized infrastructure with enterprise-grade controls
|
|
</p>
|
|
</div>
|
|
|
|
<div class="nodes-grid">
|
|
<article class="node-card fade-in">
|
|
<div class="node-header">
|
|
<h3 class="node-title">Primary Node</h3>
|
|
<span class="node-status">
|
|
<span class="status-dot"></span>
|
|
Online
|
|
</span>
|
|
</div>
|
|
<div class="node-stats">
|
|
<div class="node-stat">
|
|
<div class="node-stat-label">
|
|
<span>CPU Usage</span>
|
|
<span class="node-stat-value">24%</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: 24%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="node-stat">
|
|
<div class="node-stat-label">
|
|
<span>Memory</span>
|
|
<span class="node-stat-value">18.4 GB / 64 GB</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill progress-fill-success" style="width: 29%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="node-stat">
|
|
<div class="node-stat-label">
|
|
<span>Storage</span>
|
|
<span class="node-stat-value">1.2 TB / 2 TB</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill progress-fill-warning" style="width: 60%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="node-stat">
|
|
<div class="node-stat-label">
|
|
<span>Virtual Machines</span>
|
|
<span class="node-stat-value">{{ min(\App\Models\Service::count(), 28) }} active</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="node-card fade-in fade-in-delay-1">
|
|
<div class="node-header">
|
|
<h3 class="node-title">Secondary Node</h3>
|
|
<span class="node-status">
|
|
<span class="status-dot"></span>
|
|
Online
|
|
</span>
|
|
</div>
|
|
<div class="node-stats">
|
|
<div class="node-stat">
|
|
<div class="node-stat-label">
|
|
<span>CPU Usage</span>
|
|
<span class="node-stat-value">18%</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: 18%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="node-stat">
|
|
<div class="node-stat-label">
|
|
<span>Memory</span>
|
|
<span class="node-stat-value">12.1 GB / 64 GB</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill progress-fill-success" style="width: 19%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="node-stat">
|
|
<div class="node-stat-label">
|
|
<span>Storage</span>
|
|
<span class="node-stat-value">890 GB / 2 TB</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill progress-fill-success" style="width: 44%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="node-stat">
|
|
<div class="node-stat-label">
|
|
<span>Network Throughput</span>
|
|
<span class="node-stat-value">2.4 Gb/s</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="node-card fade-in fade-in-delay-2">
|
|
<div class="node-header">
|
|
<h3 class="node-title">Edge Node</h3>
|
|
<span class="node-status">
|
|
<span class="status-dot"></span>
|
|
Online
|
|
</span>
|
|
</div>
|
|
<div class="node-stats">
|
|
<div class="node-stat">
|
|
<div class="node-stat-label">
|
|
<span>CPU Usage</span>
|
|
<span class="node-stat-value">31%</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: 31%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="node-stat">
|
|
<div class="node-stat-label">
|
|
<span>Memory</span>
|
|
<span class="node-stat-value">24.8 GB / 64 GB</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill progress-fill-success" style="width: 39%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="node-stat">
|
|
<div class="node-stat-label">
|
|
<span>Storage</span>
|
|
<span class="node-stat-value">1.5 TB / 2 TB</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill progress-fill-warning" style="width: 75%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="node-stat">
|
|
<div class="node-stat-label">
|
|
<span>Active Connections</span>
|
|
<span class="node-stat-value">8,421</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats Section -->
|
|
<section id="stats" class="stats-section">
|
|
<div class="home-container">
|
|
<div class="section-header fade-in">
|
|
<h2 class="section-title">Trusted by Thousands</h2>
|
|
<p class="section-subtitle">
|
|
Join a growing community of professionals who rely on our platform
|
|
</p>
|
|
</div>
|
|
|
|
<div class="stats-grid">
|
|
<article class="stat-card fade-in">
|
|
<div class="stat-icon-wrapper stat-icon-wrapper-primary">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
|
<circle cx="9" cy="7" r="4"/>
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
|
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
|
</svg>
|
|
</div>
|
|
<div class="stat-value">{{ number_format(\App\Models\User::count()) }}+</div>
|
|
<div class="stat-label">Active Users</div>
|
|
<div class="stat-description">Growing community</div>
|
|
</article>
|
|
|
|
<article class="stat-card fade-in fade-in-delay-1">
|
|
<div class="stat-icon-wrapper stat-icon-wrapper-success">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="2" y="3" width="20" height="14" rx="2"/>
|
|
<line x1="8" y1="21" x2="16" y2="21"/>
|
|
<line x1="12" y1="17" x2="12" y2="21"/>
|
|
</svg>
|
|
</div>
|
|
<div class="stat-value">{{ number_format(\App\Models\Service::count()) }}+</div>
|
|
<div class="stat-label">Services Deployed</div>
|
|
<div class="stat-description">Across all platforms</div>
|
|
</article>
|
|
|
|
<article class="stat-card fade-in fade-in-delay-2">
|
|
<div class="stat-icon-wrapper stat-icon-wrapper-warning">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/>
|
|
<polyline points="17 6 23 6 23 12"/>
|
|
</svg>
|
|
</div>
|
|
<div class="stat-value">99.9%</div>
|
|
<div class="stat-label">Uptime SLA</div>
|
|
<div class="stat-description">Guaranteed reliability</div>
|
|
</article>
|
|
|
|
<article class="stat-card fade-in fade-in-delay-3">
|
|
<div class="stat-icon-wrapper stat-icon-wrapper-info">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<polyline points="12 6 12 12 16 14"/>
|
|
</svg>
|
|
</div>
|
|
<div class="stat-value">24/7</div>
|
|
<div class="stat-label">Expert Support</div>
|
|
<div class="stat-description">Always here to help</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Plans/Products Section -->
|
|
<section id="plans" class="plans-section">
|
|
<div class="home-container">
|
|
<div class="section-header fade-in">
|
|
<h2 class="section-title">Choose Your Plan</h2>
|
|
<p class="section-subtitle">
|
|
Select the perfect solution for your needs with flexible pricing and powerful features
|
|
</p>
|
|
</div>
|
|
|
|
<div class="plans-grid">
|
|
@foreach ($categories as $category)
|
|
<article class="plan-card fade-in">
|
|
@if ($category->image)
|
|
<img src="{{ Storage::url($category->image) }}" alt="{{ $category->name }}" class="plan-image">
|
|
@endif
|
|
<div class="plan-content">
|
|
<h3 class="plan-name">{{ $category->name }}</h3>
|
|
@if(theme('show_category_description', true))
|
|
<p class="plan-description">{!! Str::words(strip_tags($category->description), 20) !!}</p>
|
|
@endif
|
|
<a href="{{ route('category.show', ['category' => $category->slug]) }}" wire:navigate class="plan-cta">
|
|
<span>View Plans</span>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="5" y1="12" x2="19" y2="12"/>
|
|
<polyline points="12 5 19 12 12 19"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Community Supported Servers Section -->
|
|
<section id="community" class="community-section">
|
|
<div class="home-container">
|
|
<div class="community-content">
|
|
<div class="community-text">
|
|
<div class="community-badge fade-in">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
|
|
</svg>
|
|
<span>Community Initiative</span>
|
|
</div>
|
|
|
|
<h2 class="community-title fade-in">
|
|
Empowering the <span class="community-highlight">Next Generation</span> of Developers
|
|
</h2>
|
|
|
|
<p class="community-description fade-in">
|
|
We believe in making powerful technology accessible to everyone. Our community-supported servers are
|
|
<strong>subsidized below cost</strong> to help developers of all ages—from curious students to seasoned
|
|
professionals—get started with computer science, network engineering, and software design without financial barriers.
|
|
</p>
|
|
|
|
<div class="community-features">
|
|
<div class="community-feature-item fade-in">
|
|
<svg class="community-feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<path d="M12 6v6l4 2"/>
|
|
</svg>
|
|
<div class="community-feature-text">
|
|
<div class="community-feature-title">Up to 70% Subsidized</div>
|
|
<div class="community-feature-description">
|
|
Hardware and infrastructure costs are heavily subsidized by our community fund, making professional-grade servers accessible to learners.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="community-feature-item fade-in fade-in-delay-1">
|
|
<svg class="community-feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
|
<circle cx="9" cy="7" r="4"/>
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/>
|
|
</svg>
|
|
<div class="community-feature-text">
|
|
<div class="community-feature-title">No Age Restrictions</div>
|
|
<div class="community-feature-description">
|
|
From high school students learning their first programming language to professionals expanding their skill set—everyone is welcome.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="community-feature-item fade-in fade-in-delay-2">
|
|
<svg class="community-feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
|
|
<polyline points="22 4 12 14.01 9 11.01"/>
|
|
</svg>
|
|
<div class="community-feature-text">
|
|
<div class="community-feature-title">Full Feature Access</div>
|
|
<div class="community-feature-description">
|
|
Community servers include the same enterprise features: full IPv4/IPv6, firewall controls, resource monitoring, and 24/7 support.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="community-feature-item fade-in fade-in-delay-3">
|
|
<svg class="community-feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 2v20M2 12h20"/>
|
|
<path d="M12 2a10 10 0 0 1 4.5 8 10 10 0 0 1-9 0"/>
|
|
<path d="M12 22a10 10 0 0 0 4.5-8 10 10 0 0 0-9 0"/>
|
|
</svg>
|
|
<div class="community-feature-text">
|
|
<div class="community-feature-title">Educational Resources</div>
|
|
<div class="community-feature-description">
|
|
Access our library of tutorials, documentation, and community forums to accelerate your learning journey in networking and development.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="community-visual">
|
|
<div class="community-card-stack">
|
|
<div class="community-card">
|
|
<div class="community-card-header">
|
|
<div class="community-card-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="2" y="3" width="20" height="14" rx="2"/>
|
|
<line x1="8" y1="21" x2="16" y2="21"/>
|
|
<line x1="12" y1="17" x2="12" y2="21"/>
|
|
</svg>
|
|
</div>
|
|
<h4 class="community-card-title">Student VPS</h4>
|
|
</div>
|
|
<p class="community-card-content">
|
|
Perfect for learning web development, hosting projects, and experimenting with server administration.
|
|
</p>
|
|
<div class="community-card-price">
|
|
<span class="community-card-price-original">$15/mo</span>
|
|
<span class="community-card-price-subsidized">$4.50/mo</span>
|
|
</div>
|
|
<span class="community-card-badge">70% Subsidized</span>
|
|
</div>
|
|
|
|
<div class="community-card">
|
|
<div class="community-card-header">
|
|
<div class="community-card-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="2" y="2" width="20" height="8" rx="2" ry="2"/>
|
|
<rect x="2" y="14" width="20" height="8" rx="2" ry="2"/>
|
|
<line x1="6" y1="6" x2="6.01" y2="6"/>
|
|
<line x1="6" y1="18" x2="6.01" y2="18"/>
|
|
</svg>
|
|
</div>
|
|
<h4 class="community-card-title">Developer Server</h4>
|
|
</div>
|
|
<p class="community-card-content">
|
|
Enhanced resources for building applications, running databases, and testing production environments.
|
|
</p>
|
|
<div class="community-card-price">
|
|
<span class="community-card-price-original">$30/mo</span>
|
|
<span class="community-card-price-subsidized">$12/mo</span>
|
|
</div>
|
|
<span class="community-card-badge">60% Subsidized</span>
|
|
</div>
|
|
|
|
<div class="community-card">
|
|
<div class="community-card-header">
|
|
<div class="community-card-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
|
|
<polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
|
|
<line x1="12" y1="22.08" x2="12" y2="12"/>
|
|
</svg>
|
|
</div>
|
|
<h4 class="community-card-title">Education Tier</h4>
|
|
</div>
|
|
<p class="community-card-content">
|
|
Classroom-ready infrastructure for bootcamps, courses, and educational institutions with multi-user access.
|
|
</p>
|
|
<div class="community-card-price">
|
|
<span class="community-card-price-original">$50/mo</span>
|
|
<span class="community-card-price-subsidized">$17.50/mo</span>
|
|
</div>
|
|
<span class="community-card-badge">65% Subsidized</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Announcements Section -->
|
|
@php($announcements = \App\Models\Announcement::latest()->take(3)->get())
|
|
@if($announcements->count())
|
|
<section id="announcements" class="announcements-section">
|
|
<div class="home-container">
|
|
<div class="announcements-card fade-in">
|
|
<div class="announcements-header">
|
|
<svg class="announcements-icon" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm0-8h2v6h-2V7z"/>
|
|
</svg>
|
|
<h2 class="announcements-title">Latest Announcements</h2>
|
|
</div>
|
|
<div class="announcements-list">
|
|
@foreach($announcements as $note)
|
|
<div class="announcement-item">
|
|
<div class="announcement-content">{!! $note->title !!}</div>
|
|
<div class="announcement-date">{{ $note->created_at->format('M d, Y') }}</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endif
|
|
|
|
<!-- Hook for additional content -->
|
|
{!! hook('pages.home') !!}
|
|
|
|
<!-- Footer -->
|
|
<footer class="home-footer">
|
|
<div class="home-container">
|
|
<div class="footer-content">
|
|
<p class="footer-text">
|
|
© {{ date('Y') }} {{ config('app.name') }}. All rights reserved.
|
|
<a href="#" class="footer-link">Privacy Policy</a> •
|
|
<a href="#" class="footer-link">Terms of Service</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Scroll to Top Button -->
|
|
<button class="scroll-to-top" id="scrollToTop" aria-label="Scroll to top">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="18 15 12 9 6 15"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|