1020 lines
142 KiB
PHP
1020 lines
142 KiB
PHP
<div class="min-h-screen overflow-hidden homepage-wrapper">
|
||
<!-- Homepage-specific custom HTML -->
|
||
@if(theme('custom_homepage_html'))
|
||
<div class="custom-homepage-content">
|
||
{!! theme('custom_homepage_html') !!}
|
||
</div>
|
||
@endif
|
||
|
||
<!-- Hero Section - Asymmetric Modern Design -->
|
||
<section class="relative min-h-[90vh] flex items-center">
|
||
<!-- Ambient Background Effects -->
|
||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||
<div class="absolute -top-40 -right-40 w-96 h-96 bg-primary/20 rounded-full blur-3xl animate-pulse"></div>
|
||
<div class="absolute top-1/2 -left-20 w-72 h-72 bg-secondary/15 rounded-full blur-3xl animate-pulse animation-delay-200"></div>
|
||
<div class="absolute bottom-20 right-1/4 w-64 h-64 bg-info/10 rounded-full blur-3xl animate-pulse animation-delay-400"></div>
|
||
</div>
|
||
|
||
<div class="container mx-auto px-4 relative z-10">
|
||
<div class="flex flex-col lg:flex-row items-center gap-12 lg:gap-20">
|
||
<!-- Left Content -->
|
||
<div class="flex-1 text-center lg:text-left max-w-2xl">
|
||
<!-- Floating Badge -->
|
||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-primary/20 to-secondary/20 border border-primary/30 backdrop-blur-sm mb-8 animate-fade-in-up">
|
||
<span class="relative flex h-2 w-2">
|
||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
|
||
<span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
|
||
</span>
|
||
<span class="text-sm font-medium text-color-base">{{ theme('homepage_badge', 'Enterprise VPS with Complete Control') }}</span>
|
||
</div>
|
||
|
||
<!-- Hero Title with Gradient -->
|
||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-black text-color-base mb-6 leading-[1.1] tracking-tight animate-fade-in-up">
|
||
{{ theme('homepage_hero_title1', 'Powerful') }}
|
||
<span class="bg-gradient-to-r from-primary via-secondary to-primary bg-clip-text text-transparent bg-[length:200%_auto] animate-gradient">
|
||
{{ theme('homepage_hero_title2', 'VPS Hosting') }}
|
||
</span>
|
||
</h1>
|
||
|
||
<!-- Hero Description -->
|
||
<p class="text-lg md:text-xl text-color-muted leading-relaxed mb-10 animate-fade-in-up animation-delay-200">
|
||
{{ theme('homepage_hero_desc', 'Experience enterprise-grade virtual private servers with our powerful control panel. Real-time monitoring, advanced firewall management, automated backups, and full console access.') }}
|
||
</p>
|
||
|
||
<!-- CTA Group -->
|
||
<div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start animate-fade-in-up animation-delay-400">
|
||
<a href="#services" class="group relative inline-flex items-center justify-center gap-3 bg-primary hover:bg-primary/90 text-white px-8 py-4 rounded-2xl font-semibold text-lg transition-all duration-300 shadow-lg shadow-primary/25 hover:shadow-xl hover:shadow-primary/30 hover:-translate-y-0.5">
|
||
<x-ri-rocket-2-fill class="size-5" />
|
||
<span>{{ theme('hero_cta_primary_text', 'Deploy Your VPS') }}</span>
|
||
<x-ri-arrow-right-line class="size-5 group-hover:translate-x-1 transition-transform" />
|
||
</a>
|
||
<a href="#panel-features" class="group inline-flex items-center justify-center gap-3 bg-background-secondary/80 hover:bg-background-secondary border border-neutral/50 hover:border-primary/30 text-color-base px-8 py-4 rounded-2xl font-semibold text-lg transition-all duration-300 backdrop-blur-sm hover:-translate-y-0.5">
|
||
<x-ri-play-circle-line class="size-5" />
|
||
<span>{{ theme('hero_cta_secondary_text', 'See Features') }}</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Side - Feature Preview Cards (Stacked/Floating) -->
|
||
<div class="flex-1 relative w-full max-w-lg lg:max-w-xl animate-fade-in-up animation-delay-300">
|
||
<div class="relative">
|
||
<!-- Main Feature Card -->
|
||
<div class="relative bg-gradient-to-br from-background-secondary/90 to-background-secondary/60 backdrop-blur-xl border border-neutral/30 rounded-3xl p-6 shadow-2xl">
|
||
<div class="flex items-center gap-3 mb-4">
|
||
<div class="w-3 h-3 rounded-full bg-error"></div>
|
||
<div class="w-3 h-3 rounded-full bg-warning"></div>
|
||
<div class="w-3 h-3 rounded-full bg-success"></div>
|
||
<span class="ml-2 text-sm text-color-muted font-mono">control-panel</span>
|
||
</div>
|
||
<!-- Mock Dashboard UI -->
|
||
<div class="space-y-4">
|
||
<div class="flex items-center justify-between p-3 bg-background/50 rounded-xl">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-10 h-10 rounded-lg bg-success/20 flex items-center justify-center">
|
||
<x-ri-server-line class="size-5 text-success" />
|
||
</div>
|
||
<div>
|
||
<div class="font-semibold text-sm">VPS-001</div>
|
||
<div class="text-xs text-color-muted">Running ΓÇó 4 vCPU ΓÇó 8GB RAM</div>
|
||
</div>
|
||
</div>
|
||
<span class="px-2 py-1 bg-success/20 text-success text-xs font-medium rounded-full">Online</span>
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-3">
|
||
<div class="p-3 bg-background/50 rounded-xl">
|
||
<div class="text-xs text-color-muted mb-1">CPU Usage</div>
|
||
<div class="flex items-end gap-2">
|
||
<span class="text-2xl font-bold text-primary">23%</span>
|
||
<div class="flex-1 h-8 flex items-end gap-0.5">
|
||
@for($i = 0; $i < 12; $i++)
|
||
<div class="flex-1 bg-primary/{{ rand(20, 80) }} rounded-t" style="height: {{ rand(30, 100) }}%"></div>
|
||
@endfor
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 bg-background/50 rounded-xl">
|
||
<div class="text-xs text-color-muted mb-1">Memory</div>
|
||
<div class="flex items-end gap-2">
|
||
<span class="text-2xl font-bold text-secondary">4.2GB</span>
|
||
<span class="text-xs text-color-muted mb-1">/ 8GB</span>
|
||
</div>
|
||
<div class="mt-2 h-2 bg-background rounded-full overflow-hidden">
|
||
<div class="h-full w-[52%] bg-gradient-to-r from-secondary to-secondary/70 rounded-full"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Floating Accent Cards -->
|
||
<div class="absolute -top-4 -right-4 bg-gradient-to-br from-primary to-primary/80 text-white p-4 rounded-2xl shadow-lg shadow-primary/30 animate-float">
|
||
<x-ri-shield-check-fill class="size-6" />
|
||
</div>
|
||
<div class="absolute -bottom-4 -left-4 bg-gradient-to-br from-success to-success/80 text-white p-4 rounded-2xl shadow-lg shadow-success/30 animate-float animation-delay-200">
|
||
<x-ri-database-2-fill class="size-6" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section Divider -->
|
||
<div class="container mx-auto px-4 py-16">
|
||
<div class="flex items-center justify-center gap-4">
|
||
<div class="flex-1 h-px bg-gradient-to-r from-transparent via-neutral/30 to-neutral/50"></div>
|
||
<div class="flex items-center gap-2">
|
||
<div class="w-2 h-2 rounded-full bg-primary/50"></div>
|
||
<div class="w-3 h-3 rounded-full bg-primary"></div>
|
||
<div class="w-2 h-2 rounded-full bg-primary/50"></div>
|
||
</div>
|
||
<div class="flex-1 h-px bg-gradient-to-l from-transparent via-neutral/30 to-neutral/50"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Services Section - Card Carousel Style -->
|
||
<section id="services" class="py-12 md:py-16">
|
||
<div class="container mx-auto px-4">
|
||
<div class="bg-gradient-to-b from-background-secondary/50 to-background-secondary/20 rounded-3xl p-8 md:p-12">
|
||
<div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6 mb-12">
|
||
<div class="max-w-xl">
|
||
<p class="text-sm font-medium text-primary uppercase tracking-wider mb-3">What We Offer</p>
|
||
<h2 class="text-3xl md:text-4xl font-bold text-color-base mb-3">
|
||
{{ theme('services_title', 'Our Services') }}
|
||
</h2>
|
||
<p class="text-base text-color-muted leading-relaxed">
|
||
{{ theme('services_subtitle', 'Choose the perfect option for your needs ΓÇö all with full control panel access for all services we offer to give you total control') }}
|
||
</p>
|
||
</div>
|
||
<a href="#services" class="group inline-flex items-center gap-2 text-primary text-sm font-medium hover:gap-3 transition-all">
|
||
<span>View all</span>
|
||
<x-ri-arrow-right-line class="size-4" />
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Services Cards - Horizontal Scroll on Mobile -->
|
||
<div class="flex gap-6 overflow-x-auto pb-4 snap-x snap-mandatory lg:grid lg:grid-cols-4 lg:overflow-visible scrollbar-hide">
|
||
@foreach ($categories as $index => $category)
|
||
<div class="flex-shrink-0 w-80 lg:w-auto snap-center group">
|
||
<div class="h-full bg-background-secondary/80 hover:bg-background-secondary border border-neutral/30 hover:border-primary/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:-translate-y-2">
|
||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||
<x-ri-server-line class="size-7 text-primary" />
|
||
</div>
|
||
<h3 class="text-xl font-bold text-color-base mb-3 group-hover:text-primary transition-colors">
|
||
{{ $category->name }}
|
||
</h3>
|
||
@if(theme('show_category_description', true))
|
||
<div class="text-color-muted text-sm leading-relaxed mb-6 line-clamp-3">
|
||
{!! strip_tags($category->description) !!}
|
||
</div>
|
||
@endif
|
||
<a href="{{ route('category.show', ['category' => $category->slug]) }}" wire:navigate
|
||
class="inline-flex items-center gap-2 text-primary font-semibold text-sm group-hover:gap-3 transition-all">
|
||
<span>{{ __('general.view') }}</span>
|
||
<x-ri-arrow-right-line class="size-4" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section Divider -->
|
||
<div class="container mx-auto px-4 py-16">
|
||
<div class="flex items-center justify-center gap-4">
|
||
<div class="flex-1 h-px bg-gradient-to-r from-transparent via-neutral/30 to-neutral/50"></div>
|
||
<div class="flex items-center gap-2">
|
||
<div class="w-2 h-2 rounded-full bg-primary/50"></div>
|
||
<div class="w-3 h-3 rounded-full bg-primary"></div>
|
||
<div class="w-2 h-2 rounded-full bg-primary/50"></div>
|
||
</div>
|
||
<div class="flex-1 h-px bg-gradient-to-l from-transparent via-neutral/30 to-neutral/50"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Control Panel Features - Modern Bento Layout -->
|
||
<section id="panel-features" class="py-12 md:py-16 relative">
|
||
<div class="container mx-auto px-4">
|
||
<div class="bg-gradient-to-b from-background-secondary/50 to-background-secondary/20 rounded-3xl p-8 md:p-12">
|
||
<!-- Section Header -->
|
||
<div class="text-center max-w-2xl mx-auto mb-12">
|
||
<p class="text-sm font-medium text-primary uppercase tracking-wider mb-3">Control Panel</p>
|
||
<h2 class="text-3xl md:text-4xl font-bold text-color-base mb-4">
|
||
{{ theme('panel_title', 'Complete Server Management') }}
|
||
</h2>
|
||
<p class="text-base text-color-muted leading-relaxed">
|
||
{{ theme('panel_subtitle', 'Take full control of your VPS with our comprehensive management dashboard. Every tool you need, right at your fingertips.') }}
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Bento Grid - Row 1: Live Telemetry + Firewall -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
||
<!-- Live Telemetry -->
|
||
<div class="group relative overflow-hidden bg-gradient-to-br from-primary/5 via-background-secondary to-background-secondary border border-primary/20 hover:border-primary/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:shadow-primary/10">
|
||
<div class="absolute top-0 right-0 w-64 h-64 bg-primary/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-700"></div>
|
||
<div class="relative z-10">
|
||
<div class="flex items-start justify-between mb-5">
|
||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-primary to-primary/70 flex items-center justify-center shadow-lg shadow-primary/30">
|
||
<x-ri-line-chart-line class="size-7 text-white" />
|
||
</div>
|
||
<div class="flex gap-1.5">
|
||
<span class="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">CPU</span>
|
||
<span class="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">RAM</span>
|
||
<span class="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">Network</span>
|
||
</div>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-color-base mb-2">Live Telemetry</h3>
|
||
<p class="text-color-muted text-sm leading-relaxed mb-5">Monitor CPU, memory, network, and disk I/O with interactive charts. Track performance over time.</p>
|
||
<!-- Mock Chart - Animated -->
|
||
<div style="display: flex; align-items: flex-end; gap: 3px; padding: 12px; background: rgba(0,0,0,0.1); border-radius: 12px; height: 80px;">
|
||
<span class="chart-bar" style="--delay: 0s; --h1: 65%; --h2: 40%; --h3: 85%; --h4: 30%;"></span>
|
||
<span class="chart-bar" style="--delay: 0.1s; --h1: 45%; --h2: 70%; --h3: 35%; --h4: 80%;"></span>
|
||
<span class="chart-bar" style="--delay: 0.2s; --h1: 80%; --h2: 50%; --h3: 70%; --h4: 45%;"></span>
|
||
<span class="chart-bar" style="--delay: 0.3s; --h1: 55%; --h2: 85%; --h3: 40%; --h4: 65%;"></span>
|
||
<span class="chart-bar" style="--delay: 0.4s; --h1: 70%; --h2: 35%; --h3: 90%; --h4: 55%;"></span>
|
||
<span class="chart-bar" style="--delay: 0.5s; --h1: 40%; --h2: 75%; --h3: 50%; --h4: 85%;"></span>
|
||
<span class="chart-bar" style="--delay: 0.6s; --h1: 90%; --h2: 45%; --h3: 65%; --h4: 35%;"></span>
|
||
<span class="chart-bar" style="--delay: 0.7s; --h1: 50%; --h2: 80%; --h3: 30%; --h4: 70%;"></span>
|
||
<span class="chart-bar" style="--delay: 0.8s; --h1: 75%; --h2: 40%; --h3: 85%; --h4: 50%;"></span>
|
||
<span class="chart-bar" style="--delay: 0.9s; --h1: 35%; --h2: 65%; --h3: 45%; --h4: 90%;"></span>
|
||
<span class="chart-bar" style="--delay: 1.0s; --h1: 85%; --h2: 55%; --h3: 75%; --h4: 40%;"></span>
|
||
<span class="chart-bar" style="--delay: 1.1s; --h1: 60%; --h2: 90%; --h3: 50%; --h4: 70%;"></span>
|
||
<span class="chart-bar" style="--delay: 0.15s; --h1: 45%; --h2: 70%; --h3: 85%; --h4: 55%;"></span>
|
||
<span class="chart-bar" style="--delay: 0.25s; --h1: 80%; --h2: 35%; --h3: 60%; --h4: 45%;"></span>
|
||
<span class="chart-bar" style="--delay: 0.35s; --h1: 55%; --h2: 85%; --h3: 40%; --h4: 75%;"></span>
|
||
<span class="chart-bar" style="--delay: 0.45s; --h1: 70%; --h2: 50%; --h3: 90%; --h4: 35%;"></span>
|
||
<span class="chart-bar" style="--delay: 0.55s; --h1: 40%; --h2: 75%; --h3: 55%; --h4: 85%;"></span>
|
||
<span class="chart-bar" style="--delay: 0.65s; --h1: 90%; --h2: 60%; --h3: 70%; --h4: 45%;"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- VNC Console -->
|
||
<div class="group relative overflow-hidden bg-gradient-to-br from-info/5 via-background-secondary to-background-secondary border border-info/20 hover:border-info/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:shadow-info/10">
|
||
<div class="absolute bottom-0 right-0 w-48 h-48 bg-info/10 rounded-full blur-3xl translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-700"></div>
|
||
<div class="relative z-10 h-full flex flex-col">
|
||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-info to-info/70 flex items-center justify-center shadow-lg shadow-info/30 mb-5">
|
||
<x-ri-terminal-box-line class="size-7 text-white" />
|
||
</div>
|
||
<h3 class="text-xl font-bold text-color-base mb-2">VNC Console</h3>
|
||
<p class="text-color-muted text-sm leading-relaxed mb-5 flex-1">Direct web-based access to your VPS. Perfect for OS installation and recovery mode.</p>
|
||
<div style="padding: 14px; background: #0d1117; border-radius: 12px; font-family: 'Courier New', monospace; font-size: 13px; border: 1px solid #30363d;">
|
||
<span style="color: #58a6ff; font-weight: 600;">root@vps</span><span style="color: #8b949e;">:</span><span style="color: #7ee787; font-weight: 600;">~</span><span style="color: #8b949e;">$</span> <span id="terminal-text" style="color: #f0f6fc;"></span><span id="terminal-cursor" style="color: #58a6ff;">Γûê</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
(function() {
|
||
const commands = [
|
||
'systemctl status nginx',
|
||
'htop',
|
||
'df -h',
|
||
'free -m',
|
||
'uname -a',
|
||
'ls -la /var/www',
|
||
'tail -f /var/log/syslog',
|
||
'netstat -tulpn',
|
||
'docker ps',
|
||
'cat /etc/os-release',
|
||
'uptime',
|
||
'whoami',
|
||
'pwd',
|
||
'ip addr show'
|
||
];
|
||
|
||
const textEl = document.getElementById('terminal-text');
|
||
const cursorEl = document.getElementById('terminal-cursor');
|
||
let currentText = '';
|
||
let isTyping = true;
|
||
let commandIndex = Math.floor(Math.random() * commands.length);
|
||
let charIndex = 0;
|
||
|
||
// Cursor blink
|
||
setInterval(() => {
|
||
cursorEl.style.opacity = cursorEl.style.opacity === '0' ? '1' : '0';
|
||
}, 530);
|
||
|
||
function type() {
|
||
const command = commands[commandIndex];
|
||
|
||
if (isTyping) {
|
||
if (charIndex < command.length) {
|
||
currentText += command[charIndex];
|
||
textEl.textContent = currentText;
|
||
charIndex++;
|
||
setTimeout(type, 50 + Math.random() * 100);
|
||
} else {
|
||
// Finished typing, wait then delete
|
||
setTimeout(() => {
|
||
isTyping = false;
|
||
type();
|
||
}, 2000 + Math.random() * 1500);
|
||
}
|
||
} else {
|
||
if (currentText.length > 0) {
|
||
currentText = currentText.slice(0, -1);
|
||
textEl.textContent = currentText;
|
||
setTimeout(type, 30 + Math.random() * 40);
|
||
} else {
|
||
// Finished deleting, pick new command
|
||
isTyping = true;
|
||
charIndex = 0;
|
||
let newIndex;
|
||
do {
|
||
newIndex = Math.floor(Math.random() * commands.length);
|
||
} while (newIndex === commandIndex && commands.length > 1);
|
||
commandIndex = newIndex;
|
||
setTimeout(type, 500 + Math.random() * 500);
|
||
}
|
||
}
|
||
}
|
||
|
||
// Start after a short delay
|
||
setTimeout(type, 1000);
|
||
})();
|
||
</script>
|
||
|
||
<!-- Bento Grid - Row 2: Firewall & Backups -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
||
<!-- Firewall Manager -->
|
||
<div class="group relative overflow-hidden bg-gradient-to-br from-warning/5 via-background-secondary to-background-secondary border border-warning/20 hover:border-warning/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-warning/10">
|
||
<div class="absolute top-0 right-0 w-48 h-48 bg-warning/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-700"></div>
|
||
<div class="relative z-10 h-full flex flex-col">
|
||
<div class="flex items-start justify-between mb-4">
|
||
<div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-warning to-warning/70 flex items-center justify-center shadow-lg shadow-warning/30">
|
||
<x-ri-shield-keyhole-line class="size-6 text-white" />
|
||
</div>
|
||
<div class="flex gap-1.5">
|
||
<span class="px-2 py-1 bg-warning/10 text-warning text-xs font-medium rounded-lg">Inbound</span>
|
||
<span class="px-2 py-1 bg-warning/10 text-warning text-xs font-medium rounded-lg">Outbound</span>
|
||
</div>
|
||
</div>
|
||
<h3 class="text-lg font-bold text-color-base mb-2">Firewall Manager</h3>
|
||
<p class="text-color-muted text-sm leading-relaxed mb-4">Create custom rules, manage IP aliases, and monitor real-time traffic logs to protect your server.</p>
|
||
<!-- Mock Firewall Rules -->
|
||
<div class="space-y-2 mt-auto">
|
||
<div class="flex items-center gap-3 p-2.5 bg-background/50 rounded-xl border border-neutral/10">
|
||
<div class="w-2 h-2 rounded-full bg-success"></div>
|
||
<span class="text-xs text-color-muted flex-1">Allow SSH (22/tcp)</span>
|
||
<span class="text-xs text-success font-medium">Active</span>
|
||
</div>
|
||
<div class="flex items-center gap-3 p-2.5 bg-background/50 rounded-xl border border-neutral/10">
|
||
<div class="w-2 h-2 rounded-full bg-success"></div>
|
||
<span class="text-xs text-color-muted flex-1">Allow HTTP/S (80,443)</span>
|
||
<span class="text-xs text-success font-medium">Active</span>
|
||
</div>
|
||
<div class="flex items-center gap-3 p-2.5 bg-background/50 rounded-xl border border-neutral/10">
|
||
<div class="w-2 h-2 rounded-full bg-error"></div>
|
||
<span class="text-xs text-color-muted flex-1">Block 192.168.1.0/24</span>
|
||
<span class="text-xs text-error font-medium">Denied</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Backup & Snapshots -->
|
||
<div class="group relative overflow-hidden bg-gradient-to-br from-success/5 via-background-secondary to-background-secondary border border-success/20 hover:border-success/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-success/10">
|
||
<div class="absolute bottom-0 left-0 w-48 h-48 bg-success/5 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2 group-hover:scale-150 transition-transform duration-700"></div>
|
||
<div class="relative z-10 h-full flex flex-col">
|
||
<div class="flex items-start justify-between mb-4">
|
||
<div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-success to-success/70 flex items-center justify-center shadow-lg shadow-success/30">
|
||
<x-ri-database-2-line class="size-6 text-white" />
|
||
</div>
|
||
<div class="px-2.5 py-1 bg-success/10 rounded-lg border border-success/20">
|
||
<span class="text-xs text-success font-medium">Auto-enabled</span>
|
||
</div>
|
||
</div>
|
||
<h3 class="text-lg font-bold text-color-base mb-2">Backup & Snapshots</h3>
|
||
<p class="text-color-muted text-sm leading-relaxed mb-4">Automated daily snapshots with instant one-click restore. Keep your data safe with point-in-time recovery.</p>
|
||
<!-- Mock Backup List -->
|
||
<div class="space-y-2 mt-auto">
|
||
<div class="flex items-center justify-between p-2.5 bg-background/50 rounded-xl border border-neutral/10">
|
||
<div class="flex items-center gap-2">
|
||
<x-ri-checkbox-circle-fill class="size-4 text-success" />
|
||
<span class="text-xs text-color-base font-medium">Daily Backup</span>
|
||
</div>
|
||
<span class="text-xs text-color-muted">2h ago</span>
|
||
</div>
|
||
<div class="flex items-center justify-between p-2.5 bg-background/50 rounded-xl border border-neutral/10">
|
||
<div class="flex items-center gap-2">
|
||
<x-ri-checkbox-circle-fill class="size-4 text-success" />
|
||
<span class="text-xs text-color-base font-medium">Weekly Snapshot</span>
|
||
</div>
|
||
<span class="text-xs text-color-muted">3 days ago</span>
|
||
</div>
|
||
<div class="flex items-center justify-between p-2.5 bg-background/50 rounded-xl border border-neutral/10">
|
||
<div class="flex items-center gap-2">
|
||
<x-ri-time-line class="size-4 text-warning" />
|
||
<span class="text-xs text-color-base font-medium">Next backup</span>
|
||
</div>
|
||
<span class="text-xs text-warning font-medium">in 22h</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bento Grid - Row 3: Storage & Power -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
||
<!-- Storage Manager -->
|
||
<div class="group relative overflow-hidden bg-gradient-to-br from-purple-500/5 via-background-secondary to-background-secondary border border-purple-500/20 hover:border-purple-500/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-purple-500/10">
|
||
<div class="absolute top-0 left-0 w-48 h-48 bg-purple-500/5 rounded-full blur-3xl -translate-y-1/2 -translate-x-1/2 group-hover:scale-150 transition-transform duration-700"></div>
|
||
<div class="relative z-10 h-full flex flex-col">
|
||
<div class="flex items-start justify-between mb-4">
|
||
<div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-purple-500 to-purple-500/70 flex items-center justify-center shadow-lg shadow-purple-500/30">
|
||
<x-ri-hard-drive-2-line class="size-6 text-white" />
|
||
</div>
|
||
<div class="text-right">
|
||
<div class="text-lg font-bold text-color-base">65 GB</div>
|
||
<div class="text-xs text-color-muted">of 100 GB used</div>
|
||
</div>
|
||
</div>
|
||
<h3 class="text-lg font-bold text-color-base mb-2">Storage Manager</h3>
|
||
<p class="text-color-muted text-sm leading-relaxed mb-4">Add, resize, or remove virtual disks on the fly. Expand storage without downtime.</p>
|
||
<!-- Storage Breakdown -->
|
||
<div class="space-y-3 mt-auto">
|
||
<div>
|
||
<div class="flex items-center justify-between text-xs mb-1.5">
|
||
<span class="text-color-muted">System (sda1)</span>
|
||
<span class="text-purple-400 font-medium">45 GB</span>
|
||
</div>
|
||
<div class="h-2 bg-background rounded-full overflow-hidden">
|
||
<div class="h-full w-[45%] bg-gradient-to-r from-purple-500 to-purple-400 rounded-full"></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="flex items-center justify-between text-xs mb-1.5">
|
||
<span class="text-color-muted">Data (sdb1)</span>
|
||
<span class="text-purple-400 font-medium">20 GB</span>
|
||
</div>
|
||
<div class="h-2 bg-background rounded-full overflow-hidden">
|
||
<div class="h-full w-[20%] bg-gradient-to-r from-purple-500 to-purple-400 rounded-full"></div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between pt-2 border-t border-neutral/10">
|
||
<span class="text-xs text-color-muted">Available</span>
|
||
<span class="text-xs text-success font-medium">35 GB free</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Power Controls -->
|
||
<div class="group relative overflow-hidden bg-gradient-to-br from-error/5 via-background-secondary to-background-secondary border border-error/20 hover:border-error/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-error/10">
|
||
<div class="absolute bottom-0 right-0 w-48 h-48 bg-error/5 rounded-full blur-3xl translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-700"></div>
|
||
<div class="relative z-10 h-full flex flex-col">
|
||
<div class="flex items-start justify-between mb-4">
|
||
<div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-error to-error/70 flex items-center justify-center shadow-lg shadow-error/30">
|
||
<x-ri-shut-down-line class="size-6 text-white" />
|
||
</div>
|
||
<div class="flex items-center gap-2 px-2.5 py-1 bg-success/10 rounded-lg border border-success/20">
|
||
<div class="w-2 h-2 rounded-full bg-success animate-pulse"></div>
|
||
<span class="text-xs text-success font-medium">Running</span>
|
||
</div>
|
||
</div>
|
||
<h3 class="text-lg font-bold text-color-base mb-2">Power Controls</h3>
|
||
<p class="text-color-muted text-sm leading-relaxed mb-4">Full control over your server's power state. Start, stop, reboot, or force power cycle instantly.</p>
|
||
<!-- Power Actions -->
|
||
<div class="grid grid-cols-3 gap-2 mb-4">
|
||
<div class="flex flex-col items-center gap-2 p-3 bg-success/10 hover:bg-success/20 rounded-xl border border-success/20 cursor-pointer transition-colors">
|
||
<x-ri-play-fill class="size-5 text-success" />
|
||
<span class="text-xs text-success font-medium">Start</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2 p-3 bg-warning/10 hover:bg-warning/20 rounded-xl border border-warning/20 cursor-pointer transition-colors">
|
||
<x-ri-restart-line class="size-5 text-warning" />
|
||
<span class="text-xs text-warning font-medium">Reboot</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2 p-3 bg-error/10 hover:bg-error/20 rounded-xl border border-error/20 cursor-pointer transition-colors">
|
||
<x-ri-stop-fill class="size-5 text-error" />
|
||
<span class="text-xs text-error font-medium">Stop</span>
|
||
</div>
|
||
</div>
|
||
<!-- Server Stats -->
|
||
<div class="flex items-center justify-between p-2.5 bg-background/50 rounded-xl border border-neutral/10 mt-auto">
|
||
<div class="flex items-center gap-2">
|
||
<x-ri-time-line class="size-4 text-color-muted" />
|
||
<span class="text-xs text-color-muted">Uptime</span>
|
||
</div>
|
||
<span class="text-xs text-color-base font-medium">14d 6h 32m</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bento Grid - Row 4: Quick Features Strip -->
|
||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||
<!-- OS Reinstall -->
|
||
<div class="group flex items-center gap-4 p-5 bg-background/30 hover:bg-background/50 border border-neutral/10 hover:border-primary/30 rounded-2xl transition-all duration-300">
|
||
<div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||
<x-ri-refresh-line class="size-6 text-primary" />
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold text-color-base">OS Reinstall</h4>
|
||
<p class="text-sm text-color-muted">50+ templates</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Task History -->
|
||
<div class="group flex items-center gap-4 p-5 bg-background/30 hover:bg-background/50 border border-neutral/10 hover:border-secondary/30 rounded-2xl transition-all duration-300">
|
||
<div class="w-12 h-12 rounded-xl bg-secondary/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||
<x-ri-history-line class="size-6 text-secondary" />
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold text-color-base">Task History</h4>
|
||
<p class="text-sm text-color-muted">Full audit logs</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Network Tools -->
|
||
<div class="group flex items-center gap-4 p-5 bg-background/30 hover:bg-background/50 border border-neutral/10 hover:border-success/30 rounded-2xl transition-all duration-300">
|
||
<div class="w-12 h-12 rounded-xl bg-success/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||
<x-ri-global-line class="size-6 text-success" />
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold text-color-base">Network</h4>
|
||
<p class="text-sm text-color-muted">IPv4/IPv6 & rDNS</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ISO Mount -->
|
||
<div class="group flex items-center gap-4 p-5 bg-background/30 hover:bg-background/50 border border-neutral/10 hover:border-info/30 rounded-2xl transition-all duration-300">
|
||
<div class="w-12 h-12 rounded-xl bg-info/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||
<x-ri-disc-line class="size-6 text-info" />
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold text-color-base">ISO Mount</h4>
|
||
<p class="text-sm text-color-muted">Custom images</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section Divider -->
|
||
<div class="container mx-auto px-4 py-16">
|
||
<div class="flex items-center justify-center gap-4">
|
||
<div class="flex-1 h-px bg-gradient-to-r from-transparent via-neutral/30 to-neutral/50"></div>
|
||
<div class="flex items-center gap-2">
|
||
<div class="w-2 h-2 rounded-full bg-primary/50"></div>
|
||
<div class="w-3 h-3 rounded-full bg-primary"></div>
|
||
<div class="w-2 h-2 rounded-full bg-primary/50"></div>
|
||
</div>
|
||
<div class="flex-1 h-px bg-gradient-to-l from-transparent via-neutral/30 to-neutral/50"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Infrastructure Features -->
|
||
<section id="features" class="py-12 md:py-16">
|
||
<div class="container mx-auto px-4">
|
||
<div class="bg-gradient-to-b from-background-secondary/50 to-background-secondary/20 rounded-3xl p-8 md:p-12">
|
||
<!-- Section Header -->
|
||
<div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-10">
|
||
<div class="max-w-2xl">
|
||
<p class="text-sm font-medium text-primary uppercase tracking-wider mb-3">Infrastructure</p>
|
||
<h2 class="text-3xl md:text-4xl font-bold text-color-base mb-4">
|
||
{{ theme('features_title', 'Enterprise Infrastructure') }}
|
||
</h2>
|
||
<p class="text-base text-color-muted leading-relaxed">
|
||
{{ theme('features_subtitle', 'We\'ve built a platform that is advanced enough to compete with the large players of the industry at a fraction of the cost.') }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Infrastructure Cards Grid -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
<!-- NVME & RAM Cached Storage -->
|
||
<div class="group">
|
||
<div class="h-full bg-background-secondary/80 hover:bg-background-secondary border border-neutral/30 hover:border-primary/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:-translate-y-2">
|
||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||
<x-ri-hard-drive-3-line class="size-7 text-primary" />
|
||
</div>
|
||
<h3 class="text-xl font-bold text-color-base mb-3 group-hover:text-primary transition-colors">
|
||
NVMe & RAM Cached Storage
|
||
</h3>
|
||
<p class="text-color-muted text-sm leading-relaxed">
|
||
Each VPS caches RAM for performance beyond SSDs, while dedicated NVMe drives provide consistent IOPS for storage.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- IPv6 Public Address -->
|
||
<div class="group">
|
||
<div class="h-full bg-background-secondary/80 hover:bg-background-secondary border border-neutral/30 hover:border-secondary/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:-translate-y-2">
|
||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-secondary/20 to-secondary/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||
<x-ri-global-line class="size-7 text-secondary" />
|
||
</div>
|
||
<h3 class="text-xl font-bold text-color-base mb-3 group-hover:text-secondary transition-colors">
|
||
IPv6 Public Address
|
||
</h3>
|
||
<p class="text-color-muted text-sm leading-relaxed">
|
||
Each VPS receives a static IPv6 address for public services, plus a secondary RA-based MAC address to ensure connectivity.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Xterm.js/NoVNC Access -->
|
||
<div class="group">
|
||
<div class="h-full bg-background-secondary/80 hover:bg-background-secondary border border-neutral/30 hover:border-success/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:-translate-y-2">
|
||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-success/20 to-success/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||
<x-ri-terminal-box-line class="size-7 text-success" />
|
||
</div>
|
||
<h3 class="text-xl font-bold text-color-base mb-3 group-hover:text-success transition-colors">
|
||
Xterm.js/NoVNC Access
|
||
</h3>
|
||
<p class="text-color-muted text-sm leading-relaxed">
|
||
Each VPS comes with Xterm.js and NoVNC via our server manager for easy access and control, anytime.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ceph Distributed Storage -->
|
||
<div class="group">
|
||
<div class="h-full bg-background-secondary/80 hover:bg-background-secondary border border-neutral/30 hover:border-warning/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:-translate-y-2">
|
||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-warning/20 to-warning/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||
<x-ri-database-2-line class="size-7 text-warning" />
|
||
</div>
|
||
<h3 class="text-xl font-bold text-color-base mb-3 group-hover:text-warning transition-colors">
|
||
Ceph Storage Cluster
|
||
</h3>
|
||
<p class="text-color-muted text-sm leading-relaxed">
|
||
Our redundant data distribution delivers IOPS beyond typical caching, fetching only unique data for a fast, smooth, and secure experience.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- BGP IPv6 Networking -->
|
||
<div class="group">
|
||
<div class="h-full bg-background-secondary/80 hover:bg-background-secondary border border-neutral/30 hover:border-info/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:-translate-y-2">
|
||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-info/20 to-info/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||
<x-ri-route-line class="size-7 text-info" />
|
||
</div>
|
||
<h3 class="text-xl font-bold text-color-base mb-3 group-hover:text-info transition-colors">
|
||
BGP IPv6 Networking
|
||
</h3>
|
||
<p class="text-color-muted text-sm leading-relaxed">
|
||
We own our network, giving VPSs priority, a unique IPv6 address, and rotating IPv4 NAT for seamless inbound access.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Expert Support -->
|
||
<div class="group">
|
||
<div class="h-full bg-background-secondary/80 hover:bg-background-secondary border border-neutral/30 hover:border-primary/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:-translate-y-2">
|
||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||
<x-ri-customer-service-2-line class="size-7 text-primary" />
|
||
</div>
|
||
<h3 class="text-xl font-bold text-color-base mb-3 group-hover:text-primary transition-colors">
|
||
24/7 Expert Support
|
||
</h3>
|
||
<p class="text-color-muted text-sm leading-relaxed">
|
||
Our knowledgeable support team is available around the clock to assist with technical issues, configurations, and any questions you may have.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section Divider -->
|
||
<div class="container mx-auto px-4 py-16">
|
||
<div class="flex items-center justify-center gap-4">
|
||
<div class="flex-1 h-px bg-gradient-to-r from-transparent via-neutral/30 to-neutral/50"></div>
|
||
<div class="flex items-center gap-2">
|
||
<div class="w-2 h-2 rounded-full bg-primary/50"></div>
|
||
<div class="w-3 h-3 rounded-full bg-primary"></div>
|
||
<div class="w-2 h-2 rounded-full bg-primary/50"></div>
|
||
</div>
|
||
<div class="flex-1 h-px bg-gradient-to-l from-transparent via-neutral/30 to-neutral/50"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CTA Section - Modern Split Design -->
|
||
<section class="py-12 md:py-16">
|
||
<div class="container mx-auto px-4">
|
||
<div class="relative overflow-hidden bg-gradient-to-br from-background-secondary to-background-secondary/80 border border-neutral/30 rounded-3xl">
|
||
<div class="grid lg:grid-cols-2 gap-0">
|
||
<!-- Left Content -->
|
||
<div class="relative p-10 md:p-16 lg:p-20">
|
||
<!-- Decorative Elements -->
|
||
<div class="absolute top-0 left-0 w-32 h-32 bg-primary/10 rounded-full blur-3xl"></div>
|
||
<div class="absolute bottom-0 right-0 w-24 h-24 bg-secondary/10 rounded-full blur-2xl"></div>
|
||
|
||
<div class="relative z-10">
|
||
<p class="text-sm font-medium text-primary uppercase tracking-wider mb-3">Get Started</p>
|
||
|
||
<h2 class="text-3xl md:text-4xl font-bold text-color-base mb-4">
|
||
{{ theme('cta_title', 'Ready to Deploy Your VPS?') }}
|
||
</h2>
|
||
|
||
<p class="text-base text-color-muted mb-8 leading-relaxed">
|
||
{{ theme('cta_subtitle', 'Join thousands of users who trust our platform for reliable, high-performance virtual servers with full control panel access') }}
|
||
</p>
|
||
|
||
<!-- Feature List -->
|
||
<div class="grid sm:grid-cols-2 gap-4 mb-10">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-8 h-8 rounded-lg bg-success/20 flex items-center justify-center flex-shrink-0">
|
||
<x-ri-check-line class="size-4 text-success" />
|
||
</div>
|
||
<span class="text-sm text-color-base">Instant Deployment</span>
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-8 h-8 rounded-lg bg-success/20 flex items-center justify-center flex-shrink-0">
|
||
<x-ri-check-line class="size-4 text-success" />
|
||
</div>
|
||
<span class="text-sm text-color-base">Full Root Access</span>
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-8 h-8 rounded-lg bg-success/20 flex items-center justify-center flex-shrink-0">
|
||
<x-ri-check-line class="size-4 text-success" />
|
||
</div>
|
||
<span class="text-sm text-color-base">99.9% Uptime SLA</span>
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-8 h-8 rounded-lg bg-success/20 flex items-center justify-center flex-shrink-0">
|
||
<x-ri-check-line class="size-4 text-success" />
|
||
</div>
|
||
<span class="text-sm text-color-base">24/7 Expert Support</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CTA Buttons -->
|
||
<div class="flex flex-col sm:flex-row gap-4">
|
||
<a href="#services" class="group inline-flex items-center justify-center gap-3 bg-primary hover:bg-primary/90 text-white px-8 py-4 rounded-2xl font-bold text-lg transition-all duration-300 shadow-lg shadow-primary/25 hover:shadow-xl hover:shadow-primary/30 hover:-translate-y-1">
|
||
<x-ri-server-line class="size-5" />
|
||
<span>{{ theme('cta_primary_text', 'View VPS Plans') }}</span>
|
||
<x-ri-arrow-right-line class="size-5 group-hover:translate-x-1 transition-transform" />
|
||
</a>
|
||
<a href="{{ theme('help_link', 'https://help.yourserver.com') }}" class="group inline-flex items-center justify-center gap-3 bg-background hover:bg-background/80 text-color-base border border-neutral/50 hover:border-primary/30 px-8 py-4 rounded-2xl font-bold text-lg transition-all duration-300 hover:-translate-y-1">
|
||
<x-ri-mail-line class="size-5" />
|
||
<span>{{ theme('cta_secondary_text', 'Contact Support') }}</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Side - Visual Element -->
|
||
<div class="relative hidden lg:flex items-center justify-center bg-gradient-to-br from-primary/10 via-secondary/5 to-transparent p-12">
|
||
<!-- Decorative Background -->
|
||
<div class="absolute inset-0 overflow-hidden">
|
||
<div class="absolute top-1/4 right-1/4 w-64 h-64 bg-primary/20 rounded-full blur-3xl animate-pulse"></div>
|
||
<div class="absolute bottom-1/4 left-1/4 w-48 h-48 bg-secondary/15 rounded-full blur-3xl animate-pulse" style="animation-delay: 1s;"></div>
|
||
</div>
|
||
|
||
<!-- Floating Stats Cards -->
|
||
<div class="relative z-10 space-y-4 w-full max-w-sm">
|
||
<div class="bg-background/90 backdrop-blur-sm border border-neutral/30 rounded-2xl p-5 shadow-lg transform hover:-translate-y-1 transition-transform">
|
||
<div class="flex items-center gap-4">
|
||
<div class="w-12 h-12 rounded-xl bg-success/20 flex items-center justify-center">
|
||
<x-ri-check-double-line class="size-6 text-success" />
|
||
</div>
|
||
<div>
|
||
<div class="text-2xl font-black text-color-base">{{ number_format(\App\Models\Service::count()+2560) }}+</div>
|
||
<div class="text-sm text-color-muted">Servers Deployed</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-background/90 backdrop-blur-sm border border-neutral/30 rounded-2xl p-5 shadow-lg transform translate-x-8 hover:-translate-y-1 transition-transform">
|
||
<div class="flex items-center gap-4">
|
||
<div class="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center">
|
||
<x-ri-user-star-line class="size-6 text-primary" />
|
||
</div>
|
||
<div>
|
||
<div class="text-2xl font-black text-color-base">{{ number_format(\App\Models\User::count()+1439) }}+</div>
|
||
<div class="text-sm text-color-muted">Happy Customers</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-background/90 backdrop-blur-sm border border-neutral/30 rounded-2xl p-5 shadow-lg hover:-translate-y-1 transition-transform">
|
||
<div class="flex items-center gap-4">
|
||
<div class="w-12 h-12 rounded-xl bg-warning/20 flex items-center justify-center">
|
||
<x-ri-timer-flash-line class="size-6 text-warning" />
|
||
</div>
|
||
<div>
|
||
<div class="text-2xl font-black text-color-base">< 60s</div>
|
||
<div class="text-sm text-color-muted">Average Deploy Time</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section Divider -->
|
||
<div class="container mx-auto px-4 py-16">
|
||
<div class="flex items-center justify-center gap-4">
|
||
<div class="flex-1 h-px bg-gradient-to-r from-transparent via-neutral/30 to-neutral/50"></div>
|
||
<div class="flex items-center gap-2">
|
||
<div class="w-2 h-2 rounded-full bg-primary/50"></div>
|
||
<div class="w-3 h-3 rounded-full bg-primary"></div>
|
||
<div class="w-2 h-2 rounded-full bg-primary/50"></div>
|
||
</div>
|
||
<div class="flex-1 h-px bg-gradient-to-l from-transparent via-neutral/30 to-neutral/50"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pb-8">
|
||
{!! hook('pages.home') !!}
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
/* Custom Color Palette */
|
||
:root {
|
||
--hp-lime-light: #D9ED92;
|
||
--hp-lime: #B5E48C;
|
||
--hp-green-light: #99D98C;
|
||
--hp-green: #76C893;
|
||
--hp-teal-light: #52B69A;
|
||
--hp-teal: #34A0A4;
|
||
--hp-blue-light: #168AAD;
|
||
--hp-blue: #1A759F;
|
||
--hp-blue-dark: #1E6091;
|
||
--hp-blue-darkest: #184E77;
|
||
}
|
||
|
||
@keyframes gradient {
|
||
0%, 100% { background-position: 0% 50%; }
|
||
50% { background-position: 100% 50%; }
|
||
}
|
||
.animate-gradient {
|
||
animation: gradient 6s ease infinite;
|
||
}
|
||
@keyframes float {
|
||
0%, 100% { transform: translateY(0px); }
|
||
50% { transform: translateY(-10px); }
|
||
}
|
||
.animate-float {
|
||
animation: float 3s ease-in-out infinite;
|
||
}
|
||
.scrollbar-hide {
|
||
-ms-overflow-style: none;
|
||
scrollbar-width: none;
|
||
}
|
||
.scrollbar-hide::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
/* Telemetry Chart Animation */
|
||
.chart-bar {
|
||
display: block;
|
||
flex: 1;
|
||
min-width: 8px;
|
||
background: linear-gradient(to top, #1A759F, rgba(26, 117, 159, 0.5));
|
||
border-radius: 4px 4px 0 0;
|
||
animation: chartWave 2s ease-in-out infinite;
|
||
animation-delay: var(--delay, 0s);
|
||
}
|
||
|
||
@keyframes chartWave {
|
||
0% { height: var(--h1, 60%); }
|
||
25% { height: var(--h2, 40%); }
|
||
50% { height: var(--h3, 80%); }
|
||
75% { height: var(--h4, 50%); }
|
||
100% { height: var(--h1, 60%); }
|
||
}
|
||
|
||
/* Homepage Color Overrides */
|
||
.homepage-wrapper .text-primary { color: #1A759F !important; }
|
||
.homepage-wrapper .text-secondary { color: #52B69A !important; }
|
||
.homepage-wrapper .text-success { color: #76C893 !important; }
|
||
.homepage-wrapper .text-info { color: #168AAD !important; }
|
||
.homepage-wrapper .text-warning { color: #34A0A4 !important; }
|
||
.homepage-wrapper .text-purple-500 { color: #1E6091 !important; }
|
||
.homepage-wrapper .text-orange-500 { color: #52B69A !important; }
|
||
.homepage-wrapper .text-blue-500 { color: #168AAD !important; }
|
||
.homepage-wrapper .text-emerald-500 { color: #76C893 !important; }
|
||
|
||
.homepage-wrapper .bg-primary { background-color: #1A759F !important; }
|
||
.homepage-wrapper .bg-secondary { background-color: #52B69A !important; }
|
||
.homepage-wrapper .bg-success { background-color: #76C893 !important; }
|
||
.homepage-wrapper .bg-info { background-color: #168AAD !important; }
|
||
.homepage-wrapper .bg-warning { background-color: #34A0A4 !important; }
|
||
.homepage-wrapper .bg-error { background-color: #184E77 !important; }
|
||
.homepage-wrapper .bg-purple-500 { background-color: #1E6091 !important; }
|
||
.homepage-wrapper .bg-purple-600 { background-color: #184E77 !important; }
|
||
.homepage-wrapper .bg-orange-500 { background-color: #52B69A !important; }
|
||
.homepage-wrapper .bg-blue-500 { background-color: #168AAD !important; }
|
||
.homepage-wrapper .bg-blue-600 { background-color: #1A759F !important; }
|
||
.homepage-wrapper .bg-emerald-500 { background-color: #76C893 !important; }
|
||
.homepage-wrapper .bg-emerald-600 { background-color: #52B69A !important; }
|
||
|
||
.homepage-wrapper .border-primary { border-color: #1A759F !important; }
|
||
.homepage-wrapper .border-secondary { border-color: #52B69A !important; }
|
||
.homepage-wrapper .border-success { border-color: #76C893 !important; }
|
||
.homepage-wrapper .border-info { border-color: #168AAD !important; }
|
||
.homepage-wrapper .border-warning { border-color: #34A0A4 !important; }
|
||
.homepage-wrapper .border-purple-500 { border-color: #1E6091 !important; }
|
||
|
||
.homepage-wrapper .shadow-primary\/20,
|
||
.homepage-wrapper .shadow-primary\/25,
|
||
.homepage-wrapper .shadow-primary\/30 { --tw-shadow-color: rgba(26, 117, 159, 0.25) !important; }
|
||
.homepage-wrapper .shadow-success\/30 { --tw-shadow-color: rgba(118, 200, 147, 0.3) !important; }
|
||
.homepage-wrapper .shadow-warning\/30 { --tw-shadow-color: rgba(52, 160, 164, 0.3) !important; }
|
||
.homepage-wrapper .shadow-info\/30 { --tw-shadow-color: rgba(22, 138, 173, 0.3) !important; }
|
||
.homepage-wrapper .shadow-purple-500\/20,
|
||
.homepage-wrapper .shadow-purple-500\/30 { --tw-shadow-color: rgba(30, 96, 145, 0.25) !important; }
|
||
.homepage-wrapper .shadow-blue-500\/20,
|
||
.homepage-wrapper .shadow-blue-500\/30 { --tw-shadow-color: rgba(22, 138, 173, 0.25) !important; }
|
||
.homepage-wrapper .shadow-emerald-500\/20,
|
||
.homepage-wrapper .shadow-emerald-500\/30 { --tw-shadow-color: rgba(118, 200, 147, 0.25) !important; }
|
||
|
||
/* Gradient text override */
|
||
.homepage-wrapper .bg-gradient-to-r.from-primary.via-secondary.to-primary {
|
||
background-image: linear-gradient(to right, #184E77, #52B69A, #184E77) !important;
|
||
}
|
||
|
||
/* Gradient backgrounds */
|
||
.homepage-wrapper .from-primary { --tw-gradient-from: #1A759F !important; }
|
||
.homepage-wrapper .to-primary { --tw-gradient-to: #1A759F !important; }
|
||
.homepage-wrapper .via-primary { --tw-gradient-via: #1A759F !important; }
|
||
.homepage-wrapper .from-secondary { --tw-gradient-from: #52B69A !important; }
|
||
.homepage-wrapper .to-secondary { --tw-gradient-to: #52B69A !important; }
|
||
.homepage-wrapper .from-success { --tw-gradient-from: #76C893 !important; }
|
||
.homepage-wrapper .to-success { --tw-gradient-to: #76C893 !important; }
|
||
.homepage-wrapper .from-warning { --tw-gradient-from: #34A0A4 !important; }
|
||
.homepage-wrapper .to-warning { --tw-gradient-to: #34A0A4 !important; }
|
||
.homepage-wrapper .from-info { --tw-gradient-from: #168AAD !important; }
|
||
.homepage-wrapper .to-info { --tw-gradient-to: #168AAD !important; }
|
||
.homepage-wrapper .from-purple-500 { --tw-gradient-from: #1E6091 !important; }
|
||
.homepage-wrapper .to-purple-500 { --tw-gradient-to: #1E6091 !important; }
|
||
.homepage-wrapper .from-blue-500 { --tw-gradient-from: #168AAD !important; }
|
||
.homepage-wrapper .to-blue-500 { --tw-gradient-to: #168AAD !important; }
|
||
.homepage-wrapper .from-emerald-500 { --tw-gradient-from: #76C893 !important; }
|
||
.homepage-wrapper .to-emerald-500 { --tw-gradient-to: #76C893 !important; }
|
||
|
||
/* Opacity variants */
|
||
.homepage-wrapper .bg-primary\/5 { background-color: rgba(26, 117, 159, 0.05) !important; }
|
||
.homepage-wrapper .bg-primary\/10 { background-color: rgba(26, 117, 159, 0.1) !important; }
|
||
.homepage-wrapper .bg-primary\/15 { background-color: rgba(26, 117, 159, 0.15) !important; }
|
||
.homepage-wrapper .bg-primary\/20 { background-color: rgba(26, 117, 159, 0.2) !important; }
|
||
.homepage-wrapper .bg-secondary\/5 { background-color: rgba(82, 182, 154, 0.05) !important; }
|
||
.homepage-wrapper .bg-secondary\/10 { background-color: rgba(82, 182, 154, 0.1) !important; }
|
||
.homepage-wrapper .bg-secondary\/15 { background-color: rgba(82, 182, 154, 0.15) !important; }
|
||
.homepage-wrapper .bg-secondary\/20 { background-color: rgba(82, 182, 154, 0.2) !important; }
|
||
.homepage-wrapper .bg-success\/10 { background-color: rgba(118, 200, 147, 0.1) !important; }
|
||
.homepage-wrapper .bg-success\/20 { background-color: rgba(118, 200, 147, 0.2) !important; }
|
||
.homepage-wrapper .bg-warning\/5 { background-color: rgba(52, 160, 164, 0.05) !important; }
|
||
.homepage-wrapper .bg-warning\/10 { background-color: rgba(52, 160, 164, 0.1) !important; }
|
||
.homepage-wrapper .bg-warning\/20 { background-color: rgba(52, 160, 164, 0.2) !important; }
|
||
.homepage-wrapper .bg-info\/5 { background-color: rgba(22, 138, 173, 0.05) !important; }
|
||
.homepage-wrapper .bg-info\/10 { background-color: rgba(22, 138, 173, 0.1) !important; }
|
||
.homepage-wrapper .bg-purple-500\/5 { background-color: rgba(30, 96, 145, 0.05) !important; }
|
||
.homepage-wrapper .bg-purple-500\/10 { background-color: rgba(30, 96, 145, 0.1) !important; }
|
||
.homepage-wrapper .bg-purple-500\/20 { background-color: rgba(30, 96, 145, 0.2) !important; }
|
||
.homepage-wrapper .bg-orange-500\/10 { background-color: rgba(82, 182, 154, 0.1) !important; }
|
||
.homepage-wrapper .bg-orange-500\/20 { background-color: rgba(82, 182, 154, 0.2) !important; }
|
||
|
||
.homepage-wrapper .border-primary\/20 { border-color: rgba(26, 117, 159, 0.2) !important; }
|
||
.homepage-wrapper .border-primary\/30 { border-color: rgba(26, 117, 159, 0.3) !important; }
|
||
.homepage-wrapper .border-primary\/40 { border-color: rgba(26, 117, 159, 0.4) !important; }
|
||
.homepage-wrapper .border-secondary\/20 { border-color: rgba(82, 182, 154, 0.2) !important; }
|
||
.homepage-wrapper .border-secondary\/30 { border-color: rgba(82, 182, 154, 0.3) !important; }
|
||
.homepage-wrapper .border-secondary\/40 { border-color: rgba(82, 182, 154, 0.4) !important; }
|
||
.homepage-wrapper .border-success\/20 { border-color: rgba(118, 200, 147, 0.2) !important; }
|
||
.homepage-wrapper .border-success\/40 { border-color: rgba(118, 200, 147, 0.4) !important; }
|
||
.homepage-wrapper .border-warning\/20 { border-color: rgba(52, 160, 164, 0.2) !important; }
|
||
.homepage-wrapper .border-warning\/40 { border-color: rgba(52, 160, 164, 0.4) !important; }
|
||
.homepage-wrapper .border-info\/20 { border-color: rgba(22, 138, 173, 0.2) !important; }
|
||
.homepage-wrapper .border-info\/40 { border-color: rgba(22, 138, 173, 0.4) !important; }
|
||
.homepage-wrapper .border-purple-500\/20 { border-color: rgba(30, 96, 145, 0.2) !important; }
|
||
.homepage-wrapper .border-purple-500\/40 { border-color: rgba(30, 96, 145, 0.4) !important; }
|
||
.homepage-wrapper .border-orange-500\/20 { border-color: rgba(82, 182, 154, 0.2) !important; }
|
||
.homepage-wrapper .border-orange-500\/40 { border-color: rgba(82, 182, 154, 0.4) !important; }
|
||
|
||
.homepage-wrapper .hover\:border-primary\/30:hover { border-color: rgba(26, 117, 159, 0.3) !important; }
|
||
.homepage-wrapper .hover\:border-primary\/40:hover { border-color: rgba(26, 117, 159, 0.4) !important; }
|
||
.homepage-wrapper .hover\:border-secondary\/40:hover { border-color: rgba(82, 182, 154, 0.4) !important; }
|
||
.homepage-wrapper .hover\:border-success\/30:hover { border-color: rgba(118, 200, 147, 0.3) !important; }
|
||
.homepage-wrapper .hover\:border-success\/40:hover { border-color: rgba(118, 200, 147, 0.4) !important; }
|
||
.homepage-wrapper .hover\:border-warning\/30:hover { border-color: rgba(52, 160, 164, 0.3) !important; }
|
||
.homepage-wrapper .hover\:border-warning\/40:hover { border-color: rgba(52, 160, 164, 0.4) !important; }
|
||
.homepage-wrapper .hover\:border-info\/40:hover { border-color: rgba(22, 138, 173, 0.4) !important; }
|
||
.homepage-wrapper .hover\:border-purple-500\/40:hover { border-color: rgba(30, 96, 145, 0.4) !important; }
|
||
.homepage-wrapper .hover\:border-orange-500\/40:hover { border-color: rgba(82, 182, 154, 0.4) !important; }
|
||
|
||
/* Hover shadow effects */
|
||
.homepage-wrapper .hover\:shadow-primary\/10:hover { --tw-shadow-color: rgba(26, 117, 159, 0.1) !important; }
|
||
.homepage-wrapper .hover\:shadow-primary\/30:hover { --tw-shadow-color: rgba(26, 117, 159, 0.3) !important; }
|
||
.homepage-wrapper .hover\:shadow-secondary\/10:hover { --tw-shadow-color: rgba(82, 182, 154, 0.1) !important; }
|
||
.homepage-wrapper .hover\:shadow-success\/10:hover { --tw-shadow-color: rgba(118, 200, 147, 0.1) !important; }
|
||
.homepage-wrapper .hover\:shadow-warning\/10:hover { --tw-shadow-color: rgba(52, 160, 164, 0.1) !important; }
|
||
.homepage-wrapper .hover\:shadow-info\/10:hover { --tw-shadow-color: rgba(22, 138, 173, 0.1) !important; }
|
||
.homepage-wrapper .hover\:shadow-purple-500\/10:hover { --tw-shadow-color: rgba(30, 96, 145, 0.1) !important; }
|
||
.homepage-wrapper .hover\:shadow-purple-500\/30:hover { --tw-shadow-color: rgba(30, 96, 145, 0.3) !important; }
|
||
.homepage-wrapper .hover\:shadow-blue-500\/30:hover { --tw-shadow-color: rgba(22, 138, 173, 0.3) !important; }
|
||
.homepage-wrapper .hover\:shadow-emerald-500\/30:hover { --tw-shadow-color: rgba(118, 200, 147, 0.3) !important; }
|
||
.homepage-wrapper .hover\:shadow-orange-500\/10:hover { --tw-shadow-color: rgba(82, 182, 154, 0.1) !important; }
|
||
</style>
|