679 lines
51 KiB
PHP
679 lines
51 KiB
PHP
<div class="min-h-screen overflow-hidden">
|
|
<!-- 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-5xl md:text-6xl lg:text-7xl font-black text-color-base mb-6 leading-[1.1] tracking-tight animate-fade-in-up">
|
|
{{ theme('homepage_hero_title1', 'Powerful') }}
|
|
<span class="block 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>
|
|
|
|
<!-- Stats Strip - Modern Grid Cards -->
|
|
<section class="py-16 relative">
|
|
<div class="container mx-auto px-4">
|
|
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
|
|
<!-- Uptime Card -->
|
|
<div class="group relative overflow-hidden bg-gradient-to-br from-success/10 to-background-secondary border border-success/20 hover:border-success/40 rounded-2xl p-6 transition-all duration-300 hover:shadow-lg hover:shadow-success/10">
|
|
<div class="absolute -top-8 -right-8 w-24 h-24 bg-success/10 rounded-full blur-2xl group-hover:scale-150 transition-transform duration-500"></div>
|
|
<div class="relative z-10">
|
|
<div class="w-12 h-12 rounded-xl bg-success/20 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
|
|
<x-ri-shield-check-fill class="size-6 text-success" />
|
|
</div>
|
|
<div class="text-4xl md:text-5xl font-black text-success mb-1">99.9%</div>
|
|
<div class="text-sm text-color-muted font-medium">{{ theme('stats_uptime_title', 'Uptime Goal') }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Support Card -->
|
|
<div class="group relative overflow-hidden bg-gradient-to-br from-primary/10 to-background-secondary border border-primary/20 hover:border-primary/40 rounded-2xl p-6 transition-all duration-300 hover:shadow-lg hover:shadow-primary/10">
|
|
<div class="absolute -top-8 -right-8 w-24 h-24 bg-primary/10 rounded-full blur-2xl group-hover:scale-150 transition-transform duration-500"></div>
|
|
<div class="relative z-10">
|
|
<div class="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
|
|
<x-ri-customer-service-2-fill class="size-6 text-primary" />
|
|
</div>
|
|
<div class="text-4xl md:text-5xl font-black text-primary mb-1">24/7</div>
|
|
<div class="text-sm text-color-muted font-medium">{{ theme('stats_support_title', 'Expert Support') }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Users Card -->
|
|
<div class="group relative overflow-hidden bg-gradient-to-br from-purple-500/10 to-background-secondary border border-purple-500/20 hover:border-purple-500/40 rounded-2xl p-6 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/10">
|
|
<div class="absolute -top-8 -right-8 w-24 h-24 bg-purple-500/10 rounded-full blur-2xl group-hover:scale-150 transition-transform duration-500"></div>
|
|
<div class="relative z-10">
|
|
<div class="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
|
|
<x-ri-group-fill class="size-6 text-purple-500" />
|
|
</div>
|
|
<div class="text-4xl md:text-5xl font-black text-purple-500 mb-1">{{ number_format(\App\Models\User::count()+1439) }}+</div>
|
|
<div class="text-sm text-color-muted font-medium">{{ theme('stats_users_title', 'Registered Users') }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Servers Card -->
|
|
<div class="group relative overflow-hidden bg-gradient-to-br from-orange-500/10 to-background-secondary border border-orange-500/20 hover:border-orange-500/40 rounded-2xl p-6 transition-all duration-300 hover:shadow-lg hover:shadow-orange-500/10">
|
|
<div class="absolute -top-8 -right-8 w-24 h-24 bg-orange-500/10 rounded-full blur-2xl group-hover:scale-150 transition-transform duration-500"></div>
|
|
<div class="relative z-10">
|
|
<div class="w-12 h-12 rounded-xl bg-orange-500/20 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
|
|
<x-ri-server-fill class="size-6 text-orange-500" />
|
|
</div>
|
|
<div class="text-4xl md:text-5xl font-black text-orange-500 mb-1">{{ number_format(\App\Models\Service::count()+2560) }}+</div>
|
|
<div class="text-sm text-color-muted font-medium">{{ theme('stats_servers_title', 'Virtual Servers Deployed') }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Control Panel Features - Modern Bento Layout -->
|
|
<section id="panel-features" class="py-24 md:py-32 relative">
|
|
<div class="container mx-auto px-4">
|
|
<!-- Section Header -->
|
|
<div class="max-w-3xl mb-16">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-secondary/10 border border-secondary/30 text-secondary text-sm font-medium mb-6">
|
|
<x-ri-dashboard-3-line class="size-4" />
|
|
<span>Full-Featured Control Panel</span>
|
|
</div>
|
|
<h2 class="text-4xl md:text-5xl lg:text-6xl font-black text-color-base mb-6 leading-tight">
|
|
{{ theme('panel_title', 'Complete Server Management') }}
|
|
</h2>
|
|
<p class="text-xl 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 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-4 md:gap-6">
|
|
<!-- Live Telemetry - Large Card -->
|
|
<div class="lg:col-span-7 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-6">
|
|
<div class="w-16 h-16 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-8 text-white" />
|
|
</div>
|
|
<div class="flex gap-1">
|
|
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">CPU</span>
|
|
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">Memory</span>
|
|
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">Network</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-color-base mb-2">Live Telemetry</h3>
|
|
<p class="text-color-muted leading-relaxed mb-6">Monitor CPU, memory, network, and disk I/O with interactive charts. Track performance over hours, days, weeks, or months.</p>
|
|
<!-- Mock Chart -->
|
|
<div class="h-24 flex items-end gap-1 p-4 bg-background/50 rounded-xl">
|
|
@for($i = 0; $i < 24; $i++)
|
|
<div class="flex-1 bg-gradient-to-t from-primary to-primary/50 rounded-t transition-all hover:from-primary/90" style="height: {{ rand(20, 100) }}%"></div>
|
|
@endfor
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Firewall - Medium Card -->
|
|
<div class="lg:col-span-5 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-8 transition-all duration-500 hover:shadow-2xl hover:shadow-warning/10">
|
|
<div class="absolute bottom-0 left-0 w-48 h-48 bg-warning/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-16 h-16 rounded-2xl bg-gradient-to-br from-warning to-warning/70 flex items-center justify-center shadow-lg shadow-warning/30 mb-6">
|
|
<x-ri-shield-keyhole-line class="size-8 text-white" />
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-color-base mb-2">Firewall Manager</h3>
|
|
<p class="text-color-muted leading-relaxed mb-6 flex-1">Configure inbound and outbound rules, set default policies, create IP aliases and view real-time firewall logs.</p>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="px-3 py-1.5 bg-warning/10 text-warning text-xs font-semibold rounded-lg">Custom Rules</span>
|
|
<span class="px-3 py-1.5 bg-warning/10 text-warning text-xs font-semibold rounded-lg">IP Aliases</span>
|
|
<span class="px-3 py-1.5 bg-warning/10 text-warning text-xs font-semibold rounded-lg">Live Logs</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Backups - Medium Card -->
|
|
<div class="lg:col-span-4 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-8 transition-all duration-500 hover:shadow-2xl hover:shadow-success/10">
|
|
<div class="relative z-10 h-full flex flex-col">
|
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-success to-success/70 flex items-center justify-center shadow-lg shadow-success/30 mb-5">
|
|
<x-ri-database-2-line class="size-7 text-white" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-color-base mb-2">Backup & Snapshots</h3>
|
|
<p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">Create manual backups or rely on automated hourly snapshots. One-click restore.</p>
|
|
<div class="p-3 bg-success/10 rounded-xl border border-success/20">
|
|
<div class="flex items-center justify-between text-sm">
|
|
<span class="text-color-muted">Last backup</span>
|
|
<span class="text-success font-medium">2 hours ago</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Console - Medium Card -->
|
|
<div class="lg:col-span-4 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="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-4 flex-1">Direct web-based access to your VPS. Perfect for OS installation and recovery mode.</p>
|
|
<div class="p-3 bg-background/80 rounded-xl font-mono text-xs text-success border border-neutral/20">
|
|
<span class="text-color-muted">root@vps:~$</span> <span class="animate-pulse">_</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Storage - Medium Card -->
|
|
<div class="lg:col-span-4 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-8 transition-all duration-500 hover:shadow-2xl hover:shadow-purple-500/10">
|
|
<div class="relative z-10 h-full flex flex-col">
|
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500 to-purple-500/70 flex items-center justify-center shadow-lg shadow-purple-500/30 mb-5">
|
|
<x-ri-hard-drive-2-line class="size-7 text-white" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-color-base mb-2">Storage Manager</h3>
|
|
<p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">Add, resize, or remove virtual disks. Multiple bus types and cache modes.</p>
|
|
<div class="space-y-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="flex-1 h-2 bg-background rounded-full overflow-hidden">
|
|
<div class="h-full w-[65%] bg-gradient-to-r from-purple-500 to-purple-400 rounded-full"></div>
|
|
</div>
|
|
<span class="text-xs text-color-muted">65GB / 100GB</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Features Grid -->
|
|
<div class="lg:col-span-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<!-- OS Reinstall -->
|
|
<div class="group relative overflow-hidden bg-gradient-to-br from-primary/5 to-background-secondary border border-primary/20 hover:border-primary/40 rounded-2xl p-6 transition-all duration-300 hover:shadow-lg hover:shadow-primary/10">
|
|
<div class="absolute -top-6 -right-6 w-20 h-20 bg-primary/10 rounded-full blur-2xl group-hover:scale-150 transition-transform duration-500"></div>
|
|
<div class="relative z-10">
|
|
<div class="w-12 h-12 rounded-xl bg-primary/15 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
|
|
<x-ri-refresh-line class="size-6 text-primary" />
|
|
</div>
|
|
<h4 class="font-bold text-color-base text-lg mb-2">OS Reinstall</h4>
|
|
<p class="text-sm text-color-muted leading-relaxed">Choose from 50+ operating system templates including Ubuntu, Debian, CentOS, Windows Server, and more. One-click reinstallation with custom configurations.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Task History -->
|
|
<div class="group relative overflow-hidden bg-gradient-to-br from-secondary/5 to-background-secondary border border-secondary/20 hover:border-secondary/40 rounded-2xl p-6 transition-all duration-300 hover:shadow-lg hover:shadow-secondary/10">
|
|
<div class="absolute -top-6 -right-6 w-20 h-20 bg-secondary/10 rounded-full blur-2xl group-hover:scale-150 transition-transform duration-500"></div>
|
|
<div class="relative z-10">
|
|
<div class="w-12 h-12 rounded-xl bg-secondary/15 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
|
|
<x-ri-history-line class="size-6 text-secondary" />
|
|
</div>
|
|
<h4 class="font-bold text-color-base text-lg mb-2">Task History</h4>
|
|
<p class="text-sm text-color-muted leading-relaxed">Complete audit trail of all server operations. Track reboots, backups, OS changes, and configuration updates with timestamps and status logs.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Network Tools -->
|
|
<div class="group relative overflow-hidden bg-gradient-to-br from-success/5 to-background-secondary border border-success/20 hover:border-success/40 rounded-2xl p-6 transition-all duration-300 hover:shadow-lg hover:shadow-success/10">
|
|
<div class="absolute -top-6 -right-6 w-20 h-20 bg-success/10 rounded-full blur-2xl group-hover:scale-150 transition-transform duration-500"></div>
|
|
<div class="relative z-10">
|
|
<div class="w-12 h-12 rounded-xl bg-success/15 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
|
|
<x-ri-global-line class="size-6 text-success" />
|
|
</div>
|
|
<h4 class="font-bold text-color-base text-lg mb-2">Network Tools</h4>
|
|
<p class="text-sm text-color-muted leading-relaxed">Full IPv4 and IPv6 support with reverse DNS management. Configure network interfaces, view bandwidth statistics, and manage IP assignments.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Power Controls -->
|
|
<div class="group relative overflow-hidden bg-gradient-to-br from-warning/5 to-background-secondary border border-warning/20 hover:border-warning/40 rounded-2xl p-6 transition-all duration-300 hover:shadow-lg hover:shadow-warning/10">
|
|
<div class="absolute -top-6 -right-6 w-20 h-20 bg-warning/10 rounded-full blur-2xl group-hover:scale-150 transition-transform duration-500"></div>
|
|
<div class="relative z-10">
|
|
<div class="w-12 h-12 rounded-xl bg-warning/15 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
|
|
<x-ri-shut-down-line class="size-6 text-warning" />
|
|
</div>
|
|
<h4 class="font-bold text-color-base text-lg mb-2">Power Controls</h4>
|
|
<p class="text-sm text-color-muted leading-relaxed">Full ACPI power management with graceful shutdown, hard reset, and power cycle options. Schedule automated restarts and monitor power state in real-time.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services Section - Card Carousel Style -->
|
|
<section id="services" class="py-24 md:py-32">
|
|
<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-8 mb-16">
|
|
<div class="max-w-2xl">
|
|
<h2 class="text-4xl md:text-5xl lg:text-6xl font-black text-color-base mb-6 leading-tight">
|
|
{{ theme('services_title', 'Our Services') }}
|
|
</h2>
|
|
<p class="text-xl 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 font-semibold hover:gap-4 transition-all">
|
|
<span>View all services</span>
|
|
<x-ri-arrow-right-line class="size-5" />
|
|
</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>
|
|
|
|
<!-- Infrastructure Features - Alternating Layout -->
|
|
<section id="features" class="py-24 md:py-32">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center max-w-3xl mx-auto mb-20">
|
|
<h2 class="text-4xl md:text-5xl lg:text-6xl font-black text-color-base mb-6 leading-tight">
|
|
{{ theme('features_title', 'Enterprise Infrastructure') }}
|
|
</h2>
|
|
<p class="text-xl text-color-muted leading-relaxed">
|
|
{{ theme('features_subtitle', 'Built on carrier-grade hardware with redundant systems, delivering the reliability your business demands') }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Feature Rows - Alternating -->
|
|
<div class="space-y-8">
|
|
<!-- Row 1 -->
|
|
<div class="flex flex-col md:flex-row gap-6">
|
|
<div class="md:flex-[2] group p-8 bg-gradient-to-br from-primary/5 to-background-secondary border border-primary/20 hover:border-primary/40 rounded-3xl transition-all duration-500 hover:shadow-xl">
|
|
<div class="flex items-start gap-6">
|
|
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary to-primary/70 flex items-center justify-center shadow-lg flex-shrink-0">
|
|
<x-ri-shield-check-line class="size-8 text-white" />
|
|
</div>
|
|
<div>
|
|
<h3 class="text-2xl font-bold text-color-base mb-3">{{ theme('feature_1_title', 'DDoS Protection') }}</h3>
|
|
<p class="text-color-muted leading-relaxed">{{ theme('feature_1_desc', 'Enterprise-grade DDoS mitigation with automatic detection and filtering. Multi-layer protection keeps your services online during attacks.') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="md:flex-1 group p-8 bg-gradient-to-br from-secondary/5 to-background-secondary border border-secondary/20 hover:border-secondary/40 rounded-3xl transition-all duration-500 hover:shadow-xl">
|
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-secondary to-secondary/70 flex items-center justify-center shadow-lg mb-4">
|
|
<x-ri-cpu-line class="size-7 text-white" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-color-base mb-2">{{ theme('feature_2_title', 'Premium Hardware') }}</h3>
|
|
<p class="text-color-muted text-sm leading-relaxed">{{ theme('feature_2_desc', 'Latest-generation AMD EPYC and Intel Xeon processors paired with NVMe SSD storage.') }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 2 -->
|
|
<div class="flex flex-col md:flex-row gap-6">
|
|
<div class="md:flex-1 group p-8 bg-gradient-to-br from-success/5 to-background-secondary border border-success/20 hover:border-success/40 rounded-3xl transition-all duration-500 hover:shadow-xl">
|
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-success to-success/70 flex items-center justify-center shadow-lg mb-4">
|
|
<x-ri-flashlight-line class="size-7 text-white" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-color-base mb-2">{{ theme('feature_3_title', 'Instant Setup') }}</h3>
|
|
<p class="text-color-muted text-sm leading-relaxed">{{ theme('feature_3_desc', 'Deploy your VPS in under 60 seconds with automated provisioning.') }}</p>
|
|
</div>
|
|
<div class="md:flex-1 group p-8 bg-gradient-to-br from-warning/5 to-background-secondary border border-warning/20 hover:border-warning/40 rounded-3xl transition-all duration-500 hover:shadow-xl">
|
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-warning to-warning/70 flex items-center justify-center shadow-lg mb-4">
|
|
<x-ri-admin-line class="size-7 text-white" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-color-base mb-2">{{ theme('feature_4_title', 'Full Root Access') }}</h3>
|
|
<p class="text-color-muted text-sm leading-relaxed">{{ theme('feature_4_desc', 'Complete administrative control over your server.') }}</p>
|
|
</div>
|
|
<div class="md:flex-1 group p-8 bg-gradient-to-br from-info/5 to-background-secondary border border-info/20 hover:border-info/40 rounded-3xl transition-all duration-500 hover:shadow-xl">
|
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-info to-info/70 flex items-center justify-center shadow-lg mb-4">
|
|
<x-ri-global-line class="size-7 text-white" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-color-base mb-2">{{ theme('feature_5_title', 'Global Network') }}</h3>
|
|
<p class="text-color-muted text-sm leading-relaxed">{{ theme('feature_5_desc', 'Multiple datacenter locations with premium transit providers.') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Quick Actions - Modern Cards -->
|
|
<section class="py-24 md:py-32 bg-gradient-to-b from-transparent via-background-secondary/30 to-transparent">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center max-w-2xl mx-auto mb-16">
|
|
<h2 class="text-4xl md:text-5xl font-black text-color-base mb-6">
|
|
{{ theme('quick_actions_title', 'Get Started in Seconds') }}
|
|
</h2>
|
|
<p class="text-xl text-color-muted leading-relaxed">
|
|
{{ theme('quick_actions_subtitle', 'Deploy your VPS and start managing it immediately') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
|
|
<!-- Deploy VPS -->
|
|
<a href="{{ theme('buy_server_link', '#services') }}" class="group relative overflow-hidden bg-gradient-to-br from-primary to-primary/80 p-8 rounded-3xl shadow-xl shadow-primary/20 hover:shadow-2xl hover:shadow-primary/30 transition-all duration-500 hover:-translate-y-2">
|
|
<div class="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-2xl -translate-y-1/2 translate-x-1/2"></div>
|
|
<div class="relative z-10">
|
|
<div class="w-14 h-14 rounded-2xl bg-white/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
|
<x-ri-server-fill class="size-7 text-white" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-white mb-2">{{ theme('buy_server_title', 'Deploy VPS') }}</h3>
|
|
<p class="text-white/70 text-sm">{{ theme('buy_server_description', 'Choose your plan and deploy in under 60 seconds') }}</p>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Get Help -->
|
|
<a href="{{ theme('help_link', 'https://help.yourserver.com') }}" target="_blank" class="group relative overflow-hidden bg-gradient-to-br from-purple-500 to-purple-600 p-8 rounded-3xl shadow-xl shadow-purple-500/20 hover:shadow-2xl hover:shadow-purple-500/30 transition-all duration-500 hover:-translate-y-2">
|
|
<div class="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-2xl -translate-y-1/2 translate-x-1/2"></div>
|
|
<div class="relative z-10">
|
|
<div class="w-14 h-14 rounded-2xl bg-white/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
|
<x-ri-question-answer-fill class="size-7 text-white" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-white mb-2">{{ theme('help_title', 'Get Help') }}</h3>
|
|
<p class="text-white/70 text-sm">Join our community of {{ number_format(\App\Models\User::count()) }}+ users</p>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Login/Dashboard -->
|
|
@guest
|
|
<a href="{{ route('login') }}" class="group relative overflow-hidden bg-gradient-to-br from-blue-500 to-blue-600 p-8 rounded-3xl shadow-xl shadow-blue-500/20 hover:shadow-2xl hover:shadow-blue-500/30 transition-all duration-500 hover:-translate-y-2">
|
|
<div class="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-2xl -translate-y-1/2 translate-x-1/2"></div>
|
|
<div class="relative z-10">
|
|
<div class="w-14 h-14 rounded-2xl bg-white/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
|
<x-ri-login-box-line class="size-7 text-white" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-white mb-2">{{ theme('login_title', 'Login') }}</h3>
|
|
<p class="text-white/70 text-sm">{{ theme('login_description', 'Manage your servers from the control panel') }}</p>
|
|
</div>
|
|
</a>
|
|
@else
|
|
<a href="{{ route('dashboard') }}" class="group relative overflow-hidden bg-gradient-to-br from-blue-500 to-blue-600 p-8 rounded-3xl shadow-xl shadow-blue-500/20 hover:shadow-2xl hover:shadow-blue-500/30 transition-all duration-500 hover:-translate-y-2">
|
|
<div class="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-2xl -translate-y-1/2 translate-x-1/2"></div>
|
|
<div class="relative z-10">
|
|
<div class="w-14 h-14 rounded-2xl bg-white/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
|
<x-ri-dashboard-fill class="size-7 text-white" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-white mb-2">{{ theme('dashboard_title', 'Dashboard') }}</h3>
|
|
<p class="text-white/70 text-sm">{{ theme('dashboard_description', 'Full VPS management from one place') }}</p>
|
|
</div>
|
|
</a>
|
|
@endguest
|
|
|
|
<!-- Documentation -->
|
|
<a href="{{ theme('docs_link', 'https://docs.yourserver.com') }}" target="_blank" class="group relative overflow-hidden bg-gradient-to-br from-emerald-500 to-emerald-600 p-8 rounded-3xl shadow-xl shadow-emerald-500/20 hover:shadow-2xl hover:shadow-emerald-500/30 transition-all duration-500 hover:-translate-y-2">
|
|
<div class="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-2xl -translate-y-1/2 translate-x-1/2"></div>
|
|
<div class="relative z-10">
|
|
<div class="w-14 h-14 rounded-2xl bg-white/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
|
<x-ri-book-open-fill class="size-7 text-white" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-white mb-2">{{ theme('docs_title', 'Documentation') }}</h3>
|
|
<p class="text-white/70 text-sm">{{ theme('docs_description', 'Step-by-step setup and management guides') }}</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section - Modern Split Design -->
|
|
<section class="py-24 md:py-32">
|
|
<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">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-primary text-sm font-medium mb-6">
|
|
<x-ri-rocket-fill class="size-4" />
|
|
<span>Get Started Today</span>
|
|
</div>
|
|
|
|
<h2 class="text-4xl md:text-5xl font-black text-color-base mb-6 leading-tight">
|
|
{{ theme('cta_title', 'Ready to Deploy Your VPS?') }}
|
|
</h2>
|
|
|
|
<p class="text-lg 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>
|
|
|
|
<div class="pb-8">
|
|
{!! hook('pages.home') !!}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
@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;
|
|
}
|
|
</style>
|