feat: introduce features section on homepage, replacing the stats section to highlight key offerings and enhance user engagement with a modern layout
This commit is contained in:
@@ -157,188 +157,71 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 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
|
||||
Guarantee') }}</div>
|
||||
<div class="text-color-muted text-sm">{{ theme('stats_uptime_subtitle', 'Industry-leading
|
||||
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', 'Happy
|
||||
Gamers') }}</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-database-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', 'Servers
|
||||
Deployed') }}</div>
|
||||
<div class="text-color-muted text-sm">{{ theme('stats_servers_subtitle', 'Powering environments
|
||||
worldwide') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions Section -->
|
||||
<div class="py-12 md:py-20">
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- Features Section -->
|
||||
<section id="features" class="relative py-20 bg-gradient-to-b from-background-secondary/50 via-background to-background-secondary/30 px-8">
|
||||
<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 class="text-4xl font-bold text-color-base mb-4">
|
||||
{{ theme('features_title', 'Powerful Features') }}
|
||||
</h2>
|
||||
<p class="text-lg md:text-xl text-color-muted leading-relaxed max-w-2xl mx-auto">{{ theme('quick_actions_subtitle', 'Everything you
|
||||
need is just one click away') }}</p>
|
||||
<p class="text-lg text-color-muted max-w-2xl mx-auto">
|
||||
{{ theme('features_subtitle', 'Everything you need to succeed') }}
|
||||
</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 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div class="group p-8 rounded-2xl bg-gradient-to-br from-primary/5 to-transparent border border-primary/20 hover:border-primary/40 transition-all duration-300 hover:translate-y-[-4px]">
|
||||
<div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-primary/10 text-primary mb-6">
|
||||
<x-ri-shield-check-line class="h-6 w-6" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-color-base mb-3">{{ theme('feature_1_title', 'Military-Grade Security') }}</h3>
|
||||
<p class="text-color-muted leading-relaxed">{{ theme('feature_1_desc', 'Advanced DDoS protection and encrypted connections keep your servers safe 24/7.') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
|
||||
<!-- Buy Server -->
|
||||
<a href="{{ theme('buy_server_link', 'https://yourserver.com') }}"
|
||||
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', 'Buy Server') }}</h3>
|
||||
<p class="text-sm text-white/80">{{ theme('buy_server_subtitle', 'Game Hosting') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-white/70">{{ theme('buy_server_description', 'Deploy instantly with our
|
||||
1-click setup') }}</p>
|
||||
</a>
|
||||
<div class="group p-8 rounded-2xl bg-gradient-to-br from-secondary/5 to-transparent border border-secondary/20 hover:border-secondary/40 transition-all duration-300 hover:translate-y-[-4px]">
|
||||
<div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-secondary/10 text-secondary mb-6">
|
||||
<x-ri-dashboard-line class="h-6 w-6" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-color-base mb-3">{{ theme('feature_2_title', 'Smart Analytics') }}</h3>
|
||||
<p class="text-color-muted leading-relaxed">{{ theme('feature_2_desc', 'Real-time monitoring and detailed insights help optimize your performance.') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 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 Discord') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-white/70">Join our community of {{
|
||||
number_format(\App\Models\User::count()) }}+ Users</p>
|
||||
</a>
|
||||
<div class="group p-8 rounded-2xl bg-gradient-to-br from-success/5 to-transparent border border-success/20 hover:border-success/40 transition-all duration-300 hover:translate-y-[-4px]">
|
||||
<div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-success/10 text-success mb-6">
|
||||
<x-ri-flashlight-line class="h-6 w-6" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-color-base mb-3">{{ theme('feature_3_title', 'Lightning Setup') }}</h3>
|
||||
<p class="text-color-muted leading-relaxed">{{ theme('feature_3_desc', 'Deploy servers in under 60 seconds with automated setup system.') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 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 Account') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-white/70">{{ theme('login_description', 'Manage your servers from
|
||||
anywhere') }}</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', 'Manage Services') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-white/70">{{ theme('dashboard_description', 'Control all your servers
|
||||
from one place') }}</p>
|
||||
</a>
|
||||
@endguest
|
||||
<div class="group p-8 rounded-2xl bg-gradient-to-br from-warning/5 to-transparent border border-warning/20 hover:border-warning/40 transition-all duration-300 hover:translate-y-[-4px]">
|
||||
<div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-warning/10 text-warning mb-6">
|
||||
<x-ri-cpu-line class="h-6 w-6" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-color-base mb-3">{{ theme('feature_4_title', 'Extreme Performance') }}</h3>
|
||||
<p class="text-color-muted leading-relaxed">{{ theme('feature_4_desc', 'Premium NVMe SSD storage and high-frequency CPUs deliver zero-lag experience.') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 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', 'Get Started') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-white/70">{{ theme('docs_description', 'Comprehensive guides and
|
||||
tutorials') }}</p>
|
||||
</a>
|
||||
<div class="group p-8 rounded-2xl bg-gradient-to-br from-info/5 to-transparent border border-info/20 hover:border-info/40 transition-all duration-300 hover:translate-y-[-4px]">
|
||||
<div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-info/10 text-info mb-6">
|
||||
<x-ri-global-line class="h-6 w-6" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-color-base mb-3">{{ theme('feature_5_title', 'Global Reach') }}</h3>
|
||||
<p class="text-color-muted leading-relaxed">{{ theme('feature_5_desc', '15+ datacenter locations ensure ultra-low latency worldwide.') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="group p-8 rounded-2xl bg-gradient-to-br from-error/5 to-transparent border border-error/20 hover:border-error/40 transition-all duration-300 hover:translate-y-[-4px]">
|
||||
<div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-error/10 text-error mb-6">
|
||||
<x-ri-line-chart-line class="h-6 w-6" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-color-base mb-3">{{ theme('feature_6_title', 'AI-Powered') }}</h3>
|
||||
<p class="text-color-muted leading-relaxed">{{ theme('feature_6_desc', 'Machine learning algorithms continuously optimize server performance.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services/Categories Section (moved up for product-first flow) -->
|
||||
<!-- Services Section -->
|
||||
<div id="services" class="py-16 md:py-20">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-16">
|
||||
|
||||
Reference in New Issue
Block a user