687 lines
49 KiB
PHP
687 lines
49 KiB
PHP
<div class="min-h-screen">
|
|
<!-- Homepage-specific custom HTML -->
|
|
@if(theme('custom_homepage_html'))
|
|
<div class="custom-homepage-content">
|
|
{!! theme('custom_homepage_html') !!}
|
|
</div>
|
|
@endif
|
|
<!-- Hero Section -->
|
|
<div class="relative overflow-hidden">
|
|
<div class="container mx-auto px-4 py-20 md:py-24 relative z-10">
|
|
<div class="text-center max-w-5xl mx-auto">
|
|
<!-- Hero Badge -->
|
|
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-primary/30 bg-primary/10 text-primary text-xs font-semibold mb-6 animate-fade-in-up">
|
|
<x-ri-sparkling-2-fill class="size-4" />
|
|
<span>{{ theme('homepage_badge', 'Enterprise VPS with Complete Control') }}</span>
|
|
</div>
|
|
<!-- Hero Title -->
|
|
<div class="mb-10 animate-fade-in-up">
|
|
<h1 class="text-5xl md:text-6xl lg:text-7xl font-bold text-color-base mb-6 leading-tight">
|
|
{{ theme('homepage_hero_title1', 'Powerful') }}
|
|
<span class="bg-primary bg-clip-text text-transparent">
|
|
{{ theme('homepage_hero_title2', 'VPS Hosting') }}
|
|
</span>
|
|
</h1>
|
|
</div>
|
|
|
|
<!-- Hero Description -->
|
|
<div class="mb-12 animate-fade-in-up animation-delay-200">
|
|
<p class="text-lg md:text-xl text-color-muted max-w-4xl mx-auto leading-relaxed">
|
|
{{ 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 — all from an intuitive dashboard designed for both beginners and experts.') }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- CTA Buttons -->
|
|
<div
|
|
class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center items-center animate-fade-in-up animation-delay-400 mb-8">
|
|
<a href="#services"
|
|
class="group bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary text-white px-6 py-3 rounded-xl font-semibold text-base transition-all duration-300 transform hover:scale-[1.02] shadow-lg hover:shadow-primary/30">
|
|
<div class="flex items-center gap-4">
|
|
<x-ri-rocket-line class="size-5 group-hover:scale-110 transition-transform" />
|
|
<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" />
|
|
</div>
|
|
</a>
|
|
<a href="#panel-features"
|
|
class="group bg-gradient-to-r from-background-secondary to-background-secondary/70 border border-primary/30 hover:border-primary/50 text-color-base px-6 py-3 rounded-xl font-semibold text-base transition-all duration-300 transform hover:scale-[1.02] shadow-lg hover:shadow-secondary/30">
|
|
<div class="flex items-center gap-4">
|
|
<x-ri-dashboard-3-line class="size-5 group-hover:scale-110 transition-transform" />
|
|
<span>{{ theme('hero_cta_secondary_text', 'Explore Control Panel') }}</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Unified compact highlights with custom icons -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 max-w-3xl mx-auto text-left animate-fade-in-up animation-delay-500">
|
|
<div class="flex items-center gap-2 bg-background-secondary/60 px-3 py-2 rounded-lg border border-neutral/60">
|
|
<span class="inline-flex items-center justify-center w-7 h-7 rounded-md bg-gradient-to-br from-success/20 to-success/10 border border-success/30">
|
|
<x-ri-terminal-box-line class="size-4 text-success" />
|
|
</span>
|
|
<span class="text-xs font-semibold">Full Console</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 bg-background-secondary/60 px-3 py-2 rounded-lg border border-neutral/60">
|
|
<span class="inline-flex items-center justify-center w-7 h-7 rounded-md bg-gradient-to-br from-primary/20 to-primary/10 border border-primary/30">
|
|
<x-ri-line-chart-line class="size-4 text-primary" />
|
|
</span>
|
|
<span class="text-xs font-semibold">Live Telemetry</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 bg-background-secondary/60 px-3 py-2 rounded-lg border border-neutral/60">
|
|
<span class="inline-flex items-center justify-center w-7 h-7 rounded-md bg-gradient-to-br from-warning/20 to-warning/10 border border-warning/30">
|
|
<x-ri-shield-check-line class="size-4 text-warning" />
|
|
</span>
|
|
<span class="text-xs font-semibold">Firewall Control</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 bg-background-secondary/60 px-3 py-2 rounded-lg border border-neutral/60">
|
|
<span class="inline-flex items-center justify-center w-7 h-7 rounded-md bg-gradient-to-br from-info/20 to-info/10 border border-info/30">
|
|
<x-ri-database-2-line class="size-4 text-info" />
|
|
</span>
|
|
<span class="text-xs font-semibold">Auto Backups</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Section -->
|
|
<div class="py-16 md:py-24">
|
|
<div class="container mx-auto px-4">
|
|
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-8">
|
|
<!-- Uptime Stat -->
|
|
<div class="text-center transform transition-all duration-300 hover:scale-105 animate-fade-in-up">
|
|
<div
|
|
class="bg-gradient-to-br from-background-secondary/60 to-background-secondary/30 border border-success/30 hover:border-success/50 rounded-2xl p-6 md:p-8 shadow-xl hover:shadow-success/20">
|
|
<div class="bg-success/20 text-success p-4 rounded-full inline-flex mb-6">
|
|
<x-ri-time-line class="size-8" />
|
|
</div>
|
|
<div class="text-4xl md:text-5xl font-bold text-success mb-3">99.9%</div>
|
|
<div class="text-color-base font-bold text-lg mb-2">{{ theme('stats_uptime_title', 'Uptime SLA') }}</div>
|
|
<div class="text-color-muted text-sm">{{ theme('stats_uptime_subtitle', 'Enterprise-grade reliability') }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Support Stat -->
|
|
<div
|
|
class="text-center transform transition-all duration-300 hover:scale-105 animate-fade-in-up animation-delay-100">
|
|
<div
|
|
class="bg-gradient-to-br from-background-secondary/60 to-background-secondary/30 border border-primary/30 hover:border-primary/50 rounded-2xl p-6 md:p-8 shadow-xl hover:shadow-primary/20">
|
|
<div class="bg-primary/20 text-primary p-4 rounded-full inline-flex mb-6">
|
|
<x-ri-customer-service-line class="size-8" />
|
|
</div>
|
|
<div class="text-4xl md:text-5xl font-bold text-primary mb-3">24/7</div>
|
|
<div class="text-color-base font-bold text-lg mb-2">{{ theme('stats_support_title', 'Expert Support') }}</div>
|
|
<div class="text-color-muted text-sm">{{ theme('stats_support_subtitle', 'Always here to help') }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Users Stat -->
|
|
<div
|
|
class="text-center transform transition-all duration-300 hover:scale-105 animate-fade-in-up animation-delay-200">
|
|
<div
|
|
class="bg-gradient-to-br from-background-secondary/60 to-background-secondary/30 border border-purple-500/30 hover:border-purple-500/50 rounded-2xl p-6 md:p-8 shadow-xl hover:shadow-purple-500/20">
|
|
<div class="bg-purple-500/20 text-purple-500 p-4 rounded-full inline-flex mb-6">
|
|
<x-ri-user-heart-line class="size-8" />
|
|
</div>
|
|
<div class="text-4xl md:text-5xl font-bold text-purple-500 mb-3">
|
|
{{ number_format(\App\Models\User::count()+1439) }}+
|
|
</div>
|
|
<div class="text-color-base font-bold text-lg mb-2">{{ theme('stats_users_title', 'Active Users') }}</div>
|
|
<div class="text-color-muted text-sm">{{ theme('stats_users_subtitle', 'Join our community') }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Servers Stat -->
|
|
<div
|
|
class="text-center transform transition-all duration-300 hover:scale-105 animate-fade-in-up animation-delay-300">
|
|
<div
|
|
class="bg-gradient-to-br from-background-secondary/60 to-background-secondary/30 border border-orange-500/30 hover:border-orange-500/50 rounded-2xl p-6 md:p-8 shadow-xl hover:shadow-orange-500/20">
|
|
<div class="bg-orange-500/20 text-orange-500 p-4 rounded-full inline-flex mb-6">
|
|
<x-ri-server-line class="size-8" />
|
|
</div>
|
|
<div class="text-4xl md:text-5xl font-bold text-orange-500 mb-3">
|
|
{{ number_format(\App\Models\Service::count()+2560) }}+
|
|
</div>
|
|
<div class="text-color-base font-bold text-lg mb-2">{{ theme('stats_servers_title', 'VPS Deployed') }}</div>
|
|
<div class="text-color-muted text-sm">{{ theme('stats_servers_subtitle', 'Powering environments worldwide') }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Control Panel Features Showcase -->
|
|
<div id="panel-features" class="py-16 md:py-24 bg-gradient-to-br from-background-secondary/30 to-background/50">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center mb-16">
|
|
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-secondary/30 bg-secondary/10 text-secondary text-xs font-semibold mb-4 animate-fade-in-up">
|
|
<x-ri-dashboard-3-line class="size-4" />
|
|
<span>Full-Featured Control Panel</span>
|
|
</div>
|
|
<h2 class="text-4xl md:text-5xl font-bold text-color-base mb-6 animate-fade-in-up">
|
|
{{ theme('panel_title', 'Complete Server Management') }}
|
|
</h2>
|
|
<p class="text-xl text-color-muted max-w-3xl mx-auto animate-fade-in-up 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>
|
|
|
|
<!-- Main Panel Features Grid -->
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
|
|
|
|
<!-- Real-time Monitoring -->
|
|
<div class="group bg-gradient-to-br from-background-secondary/80 to-background-secondary/40 backdrop-blur-sm border border-primary/20 hover:border-primary/40 p-6 rounded-2xl transition-all duration-300 transform hover:scale-[1.02] hover:shadow-xl hover:shadow-primary/10 animate-fade-in-up">
|
|
<div class="flex items-center gap-4 mb-4">
|
|
<div class="bg-gradient-to-br from-primary/20 to-primary/10 text-primary p-4 rounded-xl transition-transform group-hover:scale-110">
|
|
<x-ri-line-chart-line class="size-7" />
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-bold text-color-base">Live Telemetry</h3>
|
|
<p class="text-sm text-color-muted">Real-time performance graphs</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-color-muted text-sm leading-relaxed mb-4">Monitor CPU, memory, network, and disk I/O with interactive charts. Track performance over hours, days, weeks, or months with customizable aggregation methods.</p>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded-md font-medium">CPU Usage</span>
|
|
<span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded-md font-medium">Memory</span>
|
|
<span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded-md font-medium">Network</span>
|
|
<span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded-md font-medium">Disk I/O</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Firewall Management -->
|
|
<div class="group bg-gradient-to-br from-background-secondary/80 to-background-secondary/40 backdrop-blur-sm border border-warning/20 hover:border-warning/40 p-6 rounded-2xl transition-all duration-300 transform hover:scale-[1.02] hover:shadow-xl hover:shadow-warning/10 animate-fade-in-up animation-delay-100">
|
|
<div class="flex items-center gap-4 mb-4">
|
|
<div class="bg-gradient-to-br from-warning/20 to-warning/10 text-warning p-4 rounded-xl transition-transform group-hover:scale-110">
|
|
<x-ri-shield-keyhole-line class="size-7" />
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-bold text-color-base">Firewall Manager</h3>
|
|
<p class="text-sm text-color-muted">Complete traffic control</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-color-muted text-sm leading-relaxed mb-4">Configure inbound and outbound rules, set default policies, create IP aliases and IPSets. View real-time firewall logs with advanced filtering and search capabilities.</p>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="px-2 py-1 bg-warning/10 text-warning text-xs rounded-md font-medium">Custom Rules</span>
|
|
<span class="px-2 py-1 bg-warning/10 text-warning text-xs rounded-md font-medium">IP Aliases</span>
|
|
<span class="px-2 py-1 bg-warning/10 text-warning text-xs rounded-md font-medium">Live Logs</span>
|
|
<span class="px-2 py-1 bg-warning/10 text-warning text-xs rounded-md font-medium">IPSets</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Backup System -->
|
|
<div class="group bg-gradient-to-br from-background-secondary/80 to-background-secondary/40 backdrop-blur-sm border border-success/20 hover:border-success/40 p-6 rounded-2xl transition-all duration-300 transform hover:scale-[1.02] hover:shadow-xl hover:shadow-success/10 animate-fade-in-up animation-delay-200">
|
|
<div class="flex items-center gap-4 mb-4">
|
|
<div class="bg-gradient-to-br from-success/20 to-success/10 text-success p-4 rounded-xl transition-transform group-hover:scale-110">
|
|
<x-ri-database-2-line class="size-7" />
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-bold text-color-base">Backup & Snapshots</h3>
|
|
<p class="text-sm text-color-muted">Automated protection</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-color-muted text-sm leading-relaxed mb-4">Create manual backups or rely on automated hourly snapshots. Restore your entire VPS state with one click. Compare historical data to track changes over time.</p>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="px-2 py-1 bg-success/10 text-success text-xs rounded-md font-medium">Auto Backups</span>
|
|
<span class="px-2 py-1 bg-success/10 text-success text-xs rounded-md font-medium">Snapshots</span>
|
|
<span class="px-2 py-1 bg-success/10 text-success text-xs rounded-md font-medium">One-Click Restore</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Console Access -->
|
|
<div class="group bg-gradient-to-br from-background-secondary/80 to-background-secondary/40 backdrop-blur-sm border border-info/20 hover:border-info/40 p-6 rounded-2xl transition-all duration-300 transform hover:scale-[1.02] hover:shadow-xl hover:shadow-info/10 animate-fade-in-up animation-delay-300">
|
|
<div class="flex items-center gap-4 mb-4">
|
|
<div class="bg-gradient-to-br from-info/20 to-info/10 text-info p-4 rounded-xl transition-transform group-hover:scale-110">
|
|
<x-ri-terminal-box-line class="size-7" />
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-bold text-color-base">VNC Console</h3>
|
|
<p class="text-sm text-color-muted">Direct server access</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-color-muted text-sm leading-relaxed mb-4">Access your VPS directly through a web-based VNC console. Perfect for OS installation, recovery mode, or when SSH isn't available. Full keyboard and display support.</p>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="px-2 py-1 bg-info/10 text-info text-xs rounded-md font-medium">Web Console</span>
|
|
<span class="px-2 py-1 bg-info/10 text-info text-xs rounded-md font-medium">Recovery Mode</span>
|
|
<span class="px-2 py-1 bg-info/10 text-info text-xs rounded-md font-medium">OS Install</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Storage Management -->
|
|
<div class="group bg-gradient-to-br from-background-secondary/80 to-background-secondary/40 backdrop-blur-sm border border-purple-500/20 hover:border-purple-500/40 p-6 rounded-2xl transition-all duration-300 transform hover:scale-[1.02] hover:shadow-xl hover:shadow-purple-500/10 animate-fade-in-up animation-delay-400">
|
|
<div class="flex items-center gap-4 mb-4">
|
|
<div class="bg-gradient-to-br from-purple-500/20 to-purple-500/10 text-purple-500 p-4 rounded-xl transition-transform group-hover:scale-110">
|
|
<x-ri-hard-drive-2-line class="size-7" />
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-bold text-color-base">Storage Manager</h3>
|
|
<p class="text-sm text-color-muted">Flexible disk control</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-color-muted text-sm leading-relaxed mb-4">Add, resize, or remove virtual disks. Choose from multiple bus types (SCSI, VirtIO, IDE) and configure cache modes for optimal performance on your workload.</p>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="px-2 py-1 bg-purple-500/10 text-purple-500 text-xs rounded-md font-medium">NVMe Storage</span>
|
|
<span class="px-2 py-1 bg-purple-500/10 text-purple-500 text-xs rounded-md font-medium">Hot Resize</span>
|
|
<span class="px-2 py-1 bg-purple-500/10 text-purple-500 text-xs rounded-md font-medium">Multi-Disk</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Network Configuration -->
|
|
<div class="group bg-gradient-to-br from-background-secondary/80 to-background-secondary/40 backdrop-blur-sm border border-cyan-500/20 hover:border-cyan-500/40 p-6 rounded-2xl transition-all duration-300 transform hover:scale-[1.02] hover:shadow-xl hover:shadow-cyan-500/10 animate-fade-in-up animation-delay-500">
|
|
<div class="flex items-center gap-4 mb-4">
|
|
<div class="bg-gradient-to-br from-cyan-500/20 to-cyan-500/10 text-cyan-500 p-4 rounded-xl transition-transform group-hover:scale-110">
|
|
<x-ri-global-line class="size-7" />
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-bold text-color-base">Network Tools</h3>
|
|
<p class="text-sm text-color-muted">Advanced networking</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-color-muted text-sm leading-relaxed mb-4">View IP allocations, configure network interfaces, run diagnostics with built-in ping, traceroute, and DNS lookup tools. Full IPv4 and IPv6 support.</p>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="px-2 py-1 bg-cyan-500/10 text-cyan-500 text-xs rounded-md font-medium">IPv4 + IPv6</span>
|
|
<span class="px-2 py-1 bg-cyan-500/10 text-cyan-500 text-xs rounded-md font-medium">Diagnostics</span>
|
|
<span class="px-2 py-1 bg-cyan-500/10 text-cyan-500 text-xs rounded-md font-medium">rDNS</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Secondary Panel Features -->
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<!-- OS Reinstall -->
|
|
<div class="bg-background-secondary/60 border border-neutral/40 hover:border-primary/30 p-5 rounded-xl transition-all duration-300 hover:shadow-lg animate-fade-in-up">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<div class="bg-primary/10 text-primary p-2.5 rounded-lg">
|
|
<x-ri-refresh-line class="size-5" />
|
|
</div>
|
|
<h4 class="font-bold text-color-base">OS Reinstall</h4>
|
|
</div>
|
|
<p class="text-color-muted text-sm">Choose from Ubuntu, Debian, CentOS, Windows Server, and many more. One-click reinstallation.</p>
|
|
</div>
|
|
|
|
<!-- Task History -->
|
|
<div class="bg-background-secondary/60 border border-neutral/40 hover:border-primary/30 p-5 rounded-xl transition-all duration-300 hover:shadow-lg animate-fade-in-up animation-delay-100">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<div class="bg-secondary/10 text-secondary p-2.5 rounded-lg">
|
|
<x-ri-history-line class="size-5" />
|
|
</div>
|
|
<h4 class="font-bold text-color-base">Task History</h4>
|
|
</div>
|
|
<p class="text-color-muted text-sm">Track all operations with detailed logs. Monitor task status, duration, and view execution details.</p>
|
|
</div>
|
|
|
|
<!-- Lifecycle Events -->
|
|
<div class="bg-background-secondary/60 border border-neutral/40 hover:border-primary/30 p-5 rounded-xl transition-all duration-300 hover:shadow-lg animate-fade-in-up animation-delay-200">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<div class="bg-success/10 text-success p-2.5 rounded-lg">
|
|
<x-ri-calendar-event-line class="size-5" />
|
|
</div>
|
|
<h4 class="font-bold text-color-base">Lifecycle Events</h4>
|
|
</div>
|
|
<p class="text-color-muted text-sm">Monitor power state changes, backups, and critical events with automatic tracking.</p>
|
|
</div>
|
|
|
|
<!-- Power Controls -->
|
|
<div class="bg-background-secondary/60 border border-neutral/40 hover:border-primary/30 p-5 rounded-xl transition-all duration-300 hover:shadow-lg animate-fade-in-up animation-delay-300">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<div class="bg-warning/10 text-warning p-2.5 rounded-lg">
|
|
<x-ri-shut-down-line class="size-5" />
|
|
</div>
|
|
<h4 class="font-bold text-color-base">Power Controls</h4>
|
|
</div>
|
|
<p class="text-color-muted text-sm">Start, stop, restart, or force reset your VPS instantly. Safe shutdown with ACPI support.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions Section -->
|
|
<div class="py-12 md:py-20">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-color-base mb-4">
|
|
{{ theme('quick_actions_title', 'Get Started in Seconds') }}
|
|
</h2>
|
|
<p class="text-lg md:text-xl text-color-muted leading-relaxed max-w-2xl mx-auto">{{ theme('quick_actions_subtitle', 'Deploy your VPS and start managing it immediately') }}</p>
|
|
</div>
|
|
|
|
<div
|
|
class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 border-2 border-primary/30 rounded-3xl p-8 lg:p-12 shadow-2xl animate-fade-in-up backdrop-blur-sm">
|
|
<h2 class="text-2xl font-bold text-color-base mb-8 flex items-center gap-3">
|
|
<div class="bg-primary/20 text-primary p-3 rounded-2xl">
|
|
<x-ri-flashlight-fill class="size-6" />
|
|
</div>
|
|
{{ theme('quick_actions_header', 'Quick Actions') }}
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
|
|
<!-- Deploy VPS -->
|
|
<a href="{{ theme('buy_server_link', '#services') }}"
|
|
class="group bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary text-white p-5 rounded-xl shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-primary/30">
|
|
<div class="flex items-center gap-4 mb-4">
|
|
<div class="bg-white/20 p-3 rounded-xl">
|
|
<x-ri-server-fill class="size-6" />
|
|
</div>
|
|
<div>
|
|
<h3 class="font-bold text-xl">{{ theme('buy_server_title', 'Deploy VPS') }}</h3>
|
|
<p class="text-sm text-white/80">{{ theme('buy_server_subtitle', 'Instant Setup') }}</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-white/70">{{ theme('buy_server_description', 'Choose your plan and deploy in under 60 seconds') }}</p>
|
|
</a>
|
|
|
|
<!-- Help/Discord -->
|
|
<a href="{{ theme('help_link', 'https://help.yourserver.com') }}" target="_blank"
|
|
class="group bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white p-5 rounded-xl shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-purple-500/30">
|
|
<div class="flex items-center gap-4 mb-4">
|
|
<div class="bg-white/20 p-3 rounded-xl">
|
|
<x-ri-question-answer-fill class="size-6" />
|
|
</div>
|
|
<div>
|
|
<h3 class="font-bold text-xl">{{ theme('help_title', 'Get Help') }}</h3>
|
|
<p class="text-sm text-white/80">{{ theme('help_subtitle', '24/7 Support') }}</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-white/70">Join our community of {{ number_format(\App\Models\User::count()) }}+ users</p>
|
|
</a>
|
|
|
|
<!-- Login/Dashboard -->
|
|
@guest
|
|
<a href="{{ route('login') }}"
|
|
class="group bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white p-5 rounded-xl shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-blue-500/30">
|
|
<div class="flex items-center gap-4 mb-4">
|
|
<div class="bg-white/20 p-3 rounded-xl">
|
|
<x-ri-login-box-line class="size-6" />
|
|
</div>
|
|
<div>
|
|
<h3 class="font-bold text-xl">{{ theme('login_title', 'Login') }}</h3>
|
|
<p class="text-sm text-white/80">{{ theme('login_subtitle', 'Access Panel') }}</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-white/70">{{ theme('login_description', 'Manage your servers from the control panel') }}</p>
|
|
</a>
|
|
@else
|
|
<a href="{{ route('dashboard') }}"
|
|
class="group bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white p-5 rounded-xl shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-blue-500/30">
|
|
<div class="flex items-center gap-4 mb-4">
|
|
<div class="bg-white/20 p-3 rounded-xl">
|
|
<x-ri-dashboard-fill class="size-6" />
|
|
</div>
|
|
<div>
|
|
<h3 class="font-bold text-xl">{{ theme('dashboard_title', 'Dashboard') }}</h3>
|
|
<p class="text-sm text-white/80">{{ theme('dashboard_subtitle', 'Control Panel') }}</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-white/70">{{ theme('dashboard_description', 'Full VPS management from one place') }}</p>
|
|
</a>
|
|
@endguest
|
|
|
|
<!-- Documentation -->
|
|
<a href="{{ theme('docs_link', 'https://docs.yourserver.com') }}" target="_blank"
|
|
class="group bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white p-5 rounded-xl shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-emerald-500/30">
|
|
<div class="flex items-center gap-4 mb-4">
|
|
<div class="bg-white/20 p-3 rounded-xl">
|
|
<x-ri-book-open-fill class="size-6" />
|
|
</div>
|
|
<div>
|
|
<h3 class="font-bold text-xl">{{ theme('docs_title', 'Documentation') }}</h3>
|
|
<p class="text-sm text-white/80">{{ theme('docs_subtitle', 'Guides & Tutorials') }}</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-white/70">{{ theme('docs_description', 'Step-by-step setup and management guides') }}</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Services/Categories Section (moved up for product-first flow) -->
|
|
<div id="services" class="py-16 md:py-20">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-4xl md:text-5xl font-bold text-color-base mb-6">
|
|
{{ theme('services_title', 'VPS Plans') }}
|
|
</h2>
|
|
<p class="text-xl text-color-muted max-w-2xl mx-auto animate-fade-in-up">
|
|
{{ theme('services_subtitle', 'Choose the perfect virtual server for your needs — all with full control panel access') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mb-12 items-start">
|
|
@foreach ($categories as $category)
|
|
<div
|
|
class="feature-card flex flex-col h-full bg-gradient-to-br from-background-secondary/60 to-background-secondary/30 border border-neutral/80 hover:border-primary/40 p-5 md:p-6 rounded-xl transition-all duration-300 transform hover:scale-[1.02] hover:shadow-xl animate-fade-in-up group">
|
|
<div class="flex flex-col flex-1">
|
|
<h3
|
|
class="text-xl font-bold text-color-base mb-2 group-hover:text-primary transition-colors">
|
|
{{ $category->name }}
|
|
</h3>
|
|
@if(theme('show_category_description', true))
|
|
<article class="prose dark:prose-invert prose-sm text-color-muted mb-4">
|
|
{!! $category->description !!}
|
|
</article>
|
|
@endif
|
|
</div>
|
|
<a href="{{ route('category.show', ['category' => $category->slug]) }}" wire:navigate
|
|
class="group/nav inline-flex w-auto self-end items-center bg-primary/10 hover:bg-primary text-primary hover:text-white px-4 py-2 rounded-lg font-medium transition-all duration-300 transform hover:scale-105">
|
|
<span class="mr-2">{{ __('general.view') }}</span>
|
|
<x-ri-arrow-right-line class="size-4 group-hover/nav:translate-x-1 transition-transform" />
|
|
</a>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features Section -->
|
|
<div id="features" class="py-12 md:py-20">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center mb-14 md:mb-20">
|
|
<h2 class="text-4xl md:text-5xl font-bold text-color-base mb-4 md:mb-6 animate-fade-in-up">
|
|
{{ theme('features_title', 'Enterprise Infrastructure') }}
|
|
</h2>
|
|
<p class="text-xl text-color-muted max-w-3xl mx-auto animate-fade-in-up leading-relaxed">
|
|
{{ theme('features_subtitle', 'Built on carrier-grade hardware with redundant systems, delivering the reliability your business demands') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 mb-8">
|
|
<!-- DDoS Protection -->
|
|
<div
|
|
class="bg-gradient-to-br from-background-secondary/60 to-background-secondary/30 border border-primary/30 hover:border-primary/50 p-5 rounded-xl transition-all duration-300 transform hover:scale-[1.02] hover:shadow-xl hover:shadow-primary/20 animate-fade-in-up">
|
|
<div class="flex items-center mb-6">
|
|
<div
|
|
class="bg-gradient-to-br from-primary/20 to-primary/10 text-primary p-3 rounded-xl mr-4 transition-colors hover:from-primary/30 hover:to-primary/20">
|
|
<x-ri-shield-check-line class="size-6" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-color-base">{{ theme('feature_1_title', 'DDoS Protection') }}</h3>
|
|
</div>
|
|
<p class="text-color-muted text-base leading-relaxed line-clamp-3">{{ theme('feature_1_desc', 'Enterprise-grade DDoS mitigation with automatic detection and filtering. Multi-layer protection keeps your services online during attacks.') }}</p>
|
|
</div>
|
|
|
|
<!-- High-Performance Hardware -->
|
|
<div
|
|
class="bg-gradient-to-br from-background-secondary/60 to-background-secondary/30 border border-secondary/30 hover:border-secondary/50 p-5 rounded-xl transition-all duration-300 transform hover:scale-[1.02] hover:shadow-xl hover:shadow-secondary/20 animate-fade-in-up animation-delay-100">
|
|
<div class="flex items-center mb-6">
|
|
<div
|
|
class="bg-gradient-to-br from-secondary/20 to-secondary/10 text-secondary p-3 rounded-xl mr-4 transition-colors hover:from-secondary/30 hover:to-secondary/20">
|
|
<x-ri-cpu-line class="size-6" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-color-base">{{ theme('feature_2_title', 'Premium Hardware') }}</h3>
|
|
</div>
|
|
<p class="text-color-muted text-base leading-relaxed line-clamp-3">{{ theme('feature_2_desc', 'Latest-generation AMD EPYC and Intel Xeon processors paired with NVMe SSD storage for blazing-fast I/O performance.') }}</p>
|
|
</div>
|
|
|
|
<!-- Instant Provisioning -->
|
|
<div
|
|
class="bg-gradient-to-br from-background-secondary/60 to-background-secondary/30 border border-success/30 hover:border-success/50 p-5 rounded-xl transition-all duration-300 transform hover:scale-[1.02] hover:shadow-xl hover:shadow-success/20 animate-fade-in-up animation-delay-200">
|
|
<div class="flex items-center mb-6">
|
|
<div
|
|
class="bg-gradient-to-br from-success/20 to-success/10 text-success p-3 rounded-xl mr-4 transition-colors hover:from-success/30 hover:to-success/20">
|
|
<x-ri-flashlight-line class="size-6" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-color-base">{{ theme('feature_3_title', 'Instant Setup') }}</h3>
|
|
</div>
|
|
<p class="text-color-muted text-base leading-relaxed line-clamp-3">{{ theme('feature_3_desc', 'Deploy your VPS in under 60 seconds with automated provisioning. Choose from dozens of OS templates or upload your own ISO.') }}</p>
|
|
</div>
|
|
|
|
<!-- Full Root Access -->
|
|
<div
|
|
class="bg-gradient-to-br from-background-secondary/60 to-background-secondary/30 border border-warning/30 hover:border-warning/50 p-5 rounded-xl transition-all duration-300 transform hover:scale-[1.02] hover:shadow-xl hover:shadow-warning/20 animate-fade-in-up animation-delay-300">
|
|
<div class="flex items-center mb-6">
|
|
<div
|
|
class="bg-gradient-to-br from-warning/20 to-warning/10 text-warning p-3 rounded-xl mr-4 transition-colors hover:from-warning/30 hover:to-warning/20">
|
|
<x-ri-admin-line class="size-6" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-color-base">{{ theme('feature_4_title', 'Full Root Access') }}</h3>
|
|
</div>
|
|
<p class="text-color-muted text-base leading-relaxed line-clamp-3">{{ theme('feature_4_desc', 'Complete administrative control over your server. Install any software, configure custom kernels, and optimize for your specific workload.') }}</p>
|
|
</div>
|
|
|
|
<!-- Global Network -->
|
|
<div
|
|
class="bg-gradient-to-br from-background-secondary/60 to-background-secondary/30 border border-info/30 hover:border-info/50 p-5 rounded-xl transition-all duration-300 transform hover:scale-[1.02] hover:shadow-xl hover:shadow-info/20 animate-fade-in-up animation-delay-400">
|
|
<div class="flex items-center mb-6">
|
|
<div
|
|
class="bg-gradient-to-br from-info/20 to-info/10 text-info p-3 rounded-xl mr-4 transition-colors hover:from-info/30 hover:to-info/20">
|
|
<x-ri-global-line class="size-6" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-color-base">{{ theme('feature_5_title', 'Global Network') }}</h3>
|
|
</div>
|
|
<p class="text-color-muted text-base leading-relaxed line-clamp-3">{{ theme('feature_5_desc', 'Multiple datacenter locations with premium transit providers. Low-latency connections and redundant uplinks ensure optimal performance.') }}</p>
|
|
</div>
|
|
|
|
<!-- Scalability -->
|
|
<div
|
|
class="bg-gradient-to-br from-background-secondary/60 to-background-secondary/30 border border-error/30 hover:border-error/50 p-5 rounded-xl transition-all duration-300 transform hover:scale-[1.02] hover:shadow-xl hover:shadow-error/20 animate-fade-in-up animation-delay-500">
|
|
<div class="flex items-center mb-6">
|
|
<div
|
|
class="bg-gradient-to-br from-error/20 to-error/10 text-error p-3 rounded-xl mr-4 transition-colors hover:from-error/30 hover:to-error/20">
|
|
<x-ri-bar-chart-grouped-line class="size-6" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-color-base">{{ theme('feature_6_title', 'Easy Scaling') }}</h3>
|
|
</div>
|
|
<p class="text-color-muted text-base leading-relaxed line-clamp-3">{{ theme('feature_6_desc', 'Upgrade resources on-demand without migration. Add CPU cores, RAM, and storage as your needs grow with minimal downtime.') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--
|
|
|
|
<div class="py-20">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-4xl md:text-5xl font-bold text-color-base mb-6">
|
|
{{ theme('testimonials_title', 'What Gamers Say') }}
|
|
</h2>
|
|
<p class="text-xl text-color-muted max-w-2xl mx-auto">
|
|
{{ theme('testimonials_subtitle', 'Join thousands of satisfied customers who\'ve made the switch to premium hosting') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
|
|
<div class="bg-gradient-to-br from-background-secondary/80 to-background-secondary/40 backdrop-blur-sm border border-primary/20 p-8 rounded-2xl transform transition-all duration-300 hover:scale-105 hover:border-primary/40">
|
|
<div class="flex items-center mb-6">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-primary to-primary/80 rounded-full flex items-center justify-center mr-4">
|
|
<span class="text-white font-bold">{{ substr(theme('testimonial_1_name', 'John Doe'), 0, 1) }}{{ substr(explode(' ', theme('testimonial_1_name', 'John Doe'))[1] ?? '', 0, 1) }}</span>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-color-base">{{ theme('testimonial_1_name', 'John Doe') }}</h4>
|
|
<p class="text-color-muted text-sm">{{ theme('testimonial_1_role', 'Minecraft Server Admin') }}</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-color-muted italic mb-4 text-lg">"{{ theme('testimonial_1_quote', 'Best hosting service I\'ve ever used. Zero downtime and lightning-fast support response!') }}"</p>
|
|
<div class="flex text-warning text-lg">
|
|
<x-ri-star-fill class="size-5 text-warning" />
|
|
<x-ri-star-fill class="size-5 text-warning" />
|
|
<x-ri-star-fill class="size-5 text-warning" />
|
|
<x-ri-star-fill class="size-5 text-warning" />
|
|
<x-ri-star-fill class="size-5 text-warning" />
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="bg-gradient-to-br from-background-secondary/80 to-background-secondary/40 backdrop-blur-sm border border-secondary/20 p-8 rounded-2xl transform transition-all duration-300 hover:scale-105 hover:border-secondary/40">
|
|
<div class="flex items-center mb-6">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-secondary to-secondary/80 rounded-full flex items-center justify-center mr-4">
|
|
<span class="text-white font-bold">{{ substr(theme('testimonial_2_name', 'Sarah Anderson'), 0, 1) }}{{ substr(explode(' ', theme('testimonial_2_name', 'Sarah Anderson'))[1] ?? '', 0, 1) }}</span>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-color-base">{{ theme('testimonial_2_name', 'Sarah Anderson') }}</h4>
|
|
<p class="text-color-muted text-sm">{{ theme('testimonial_2_role', 'Gaming Community Leader') }}</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-color-muted italic mb-4 text-lg">"{{ theme('testimonial_2_quote', 'The performance boost was incredible. My players love the zero-lag experience!') }}"</p>
|
|
<div class="flex text-warning text-lg">
|
|
<x-ri-star-fill class="size-5 text-warning" />
|
|
<x-ri-star-fill class="size-5 text-warning" />
|
|
<x-ri-star-fill class="size-5 text-warning" />
|
|
<x-ri-star-fill class="size-5 text-warning" />
|
|
<x-ri-star-fill class="size-5 text-warning" />
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="bg-gradient-to-br from-background-secondary/80 to-background-secondary/40 backdrop-blur-sm border border-success/20 p-8 rounded-2xl transform transition-all duration-300 hover:scale-105 hover:border-success/40">
|
|
<div class="flex items-center mb-6">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-success to-success/80 rounded-full flex items-center justify-center mr-4">
|
|
<span class="text-white font-bold">{{ substr(theme('testimonial_3_name', 'Mike Rodriguez'), 0, 1) }}{{ substr(explode(' ', theme('testimonial_3_name', 'Mike Rodriguez'))[1] ?? '', 0, 1) }}</span>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-color-base">{{ theme('testimonial_3_name', 'Sarah Anderson') }}</h4>
|
|
<p class="text-color-muted text-sm">{{ theme('testimonial_3_role', 'Gaming Community Leader') }}</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-color-muted italic mb-4 text-lg">"{{ theme('testimonial_3_quote', 'Professional grade hosting at an affordable price. Couldn\'t ask for more!') }}"</p>
|
|
<div class="flex text-warning text-lg">
|
|
<x-ri-star-fill class="size-5 text-warning" />
|
|
<x-ri-star-fill class="size-5 text-warning" />
|
|
<x-ri-star-fill class="size-5 text-warning" />
|
|
<x-ri-star-fill class="size-5 text-warning" />
|
|
<x-ri-star-fill class="size-5 text-warning" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
-->
|
|
|
|
|
|
|
|
|
|
<!-- CTA Section -->
|
|
<div class="py-12 md:py-16 bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 rounded-2xl">
|
|
<div class="container mx-auto px-4 text-center">
|
|
<div class="max-w-3xl mx-auto">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-color-base mb-4 md:mb-6 animate-fade-in-up">
|
|
{{ theme('cta_title', 'Ready to Deploy Your VPS?') }}
|
|
</h2>
|
|
<p class="text-lg md:text-xl text-color-muted mb-8 animate-fade-in-up">
|
|
{{ theme('cta_subtitle', 'Join thousands of users who trust our platform for reliable, high-performance virtual servers with full control panel access') }}
|
|
</p>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center animate-fade-in-up">
|
|
<a href="#services"
|
|
class="group bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary text-white px-6 py-3 rounded-lg font-semibold transition-all duration-300 transform hover:scale-[1.02] shadow-lg hover:shadow-xl">
|
|
<div class="flex items-center gap-3">
|
|
<x-ri-server-line class="size-5 group-hover:scale-110 transition-transform" />
|
|
<span>{{ theme('cta_primary_text', 'View VPS Plans') }}</span>
|
|
<x-ri-arrow-right-line class="size-5 group-hover:translate-x-1 transition-transform" />
|
|
</div>
|
|
</a>
|
|
<a href="{{ theme('help_link', 'https://help.yourserver.com') }}"
|
|
class="group bg-gradient-to-r from-background-secondary to-background-secondary/70 border border-neutral hover:border-primary/30 text-color-base px-6 py-3 rounded-lg font-semibold transition-all duration-300 transform hover:scale-[1.02] shadow-lg hover:shadow-xl">
|
|
<div class="flex items-center gap-3">
|
|
<x-ri-mail-line class="size-5 group-hover:scale-110 transition-transform" />
|
|
<span>{{ theme('cta_secondary_text', 'Contact Support') }}</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-16 mb-8">
|
|
{!! hook('pages.home') !!}
|
|
</div>
|
|
</div>
|