890 lines
57 KiB
PHP
890 lines
57 KiB
PHP
<div class="min-h-screen">
|
||
@if(theme('homepage_layout', 'landing') === 'landing')
|
||
<!-- Landing Page Layout -->
|
||
|
||
<!-- Custom HTML Section -->
|
||
@if(theme('custom_homepage_html'))
|
||
<div class="custom-homepage-content">
|
||
{!! theme('custom_homepage_html') !!}
|
||
</div>
|
||
@endif
|
||
|
||
<section class="relative isolate overflow-hidden bg-gradient-to-b from-background-primary via-background to-background-secondary/50 pt-18 pb-32 px-8">
|
||
@if(theme('background_image_url'))
|
||
<div class="background-image-layer"
|
||
style="position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
min-height: 100%;
|
||
background-image: url('{{ theme('background_image_url') }}');
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
background-attachment: scroll;
|
||
opacity: {{ theme('background_image_opacity', 30) / 100 }};
|
||
filter: blur({{ theme('background_image_blur', 5) }}px);
|
||
z-index: -2;
|
||
pointer-events: none;
|
||
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%);
|
||
mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%);
|
||
-webkit-mask-repeat: no-repeat;
|
||
mask-repeat: no-repeat;
|
||
-webkit-mask-position: center;
|
||
mask-position: center;">
|
||
</div>
|
||
@endif
|
||
|
||
<svg class="absolute inset-0 -z-10 h-full w-full stroke-primary/15 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]" aria-hidden="true">
|
||
<defs>
|
||
<pattern id="grid-pattern" width="80" height="80" x="50%" y="-1" patternUnits="userSpaceOnUse">
|
||
<path d="M.5 80V.5H80" fill="none" />
|
||
</pattern>
|
||
</defs>
|
||
<rect width="100%" height="100%" strokeWidth="0" fill="url(#grid-pattern)" />
|
||
</svg>
|
||
|
||
<div class="mt-20 container mx-auto px-4 lg:px-8">
|
||
<div class="max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-0">
|
||
<div class="lg:col-span-7 lg:px-0 lg:pt-4">
|
||
<!-- 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', 'Next‑Gen Hosting, Open-Source Roots') }}</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', 'Premium') }}
|
||
<span class="bg-primary bg-clip-text text-transparent">
|
||
{{ theme('homepage_hero_title2', 'Game 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 next-generation game hosting with blazing-fast SSD
|
||
performance, enterprise-grade security, and 24/7 expert support. Deploy your servers instantly
|
||
across our global network of premium datacenters and enjoy zero-lag gaming with 99.9% uptime
|
||
guarantee. Join thousands of satisfied gamers who trust our platform for their competitive
|
||
edge.') }}
|
||
</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', 'Start Gaming Now') }}</span>
|
||
<x-ri-arrow-right-line class="size-5 group-hover:translate-x-1 transition-transform" />
|
||
</div>
|
||
</a>
|
||
<a href="#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-settings-3-line class="size-5 group-hover:scale-110 transition-transform" />
|
||
<span>{{ theme('hero_cta_secondary_text', 'Explore Features') }}</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">
|
||
<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" class="text-success">
|
||
<path d="M12 8a1 1 0 0 1 1 1v3.382l2.224 1.482a1 1 0 1 1-1.112 1.664l-2.667-1.778A1 1 0 0 1 11 13V9a1 1 0 0 1 1-1Z"/>
|
||
<path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Z"/>
|
||
</svg>
|
||
</span>
|
||
<span class="text-xs font-semibold">99.9% Uptime</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">
|
||
<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" class="text-primary">
|
||
<path d="M13 2a1 1 0 0 1 .894.553l1.618 3.236 3.236 1.618a1 1 0 0 1 0 1.788l-3.236 1.618-1.618 3.236a1 1 0 0 1-1.788 0L9.894 10.813 6.658 9.195a1 1 0 0 1 0-1.788l3.236-1.618L11.512 2.553A1 1 0 0 1 13 2Z"/>
|
||
</svg>
|
||
</span>
|
||
<span class="text-xs font-semibold">Instant Deploy</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">
|
||
<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" class="text-warning">
|
||
<path d="M4 4h16a1 1 0 0 1 1 1v6H3V5a1 1 0 0 1 1-1Zm-1 9h18v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-5Zm5 3h8a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2Z"/>
|
||
</svg>
|
||
</span>
|
||
<span class="text-xs font-semibold">NVMe / HF CPU</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">
|
||
<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" class="text-info">
|
||
<path d="M12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2Zm0 14a1 1 0 0 1-1-1v-3a1 1 0 1 1 2 0v3a1 1 0 0 1-1 1Zm0-8a1.25 1.25 0 1 1 1.25-1.25A1.25 1.25 0 0 1 12 8Z"/>
|
||
</svg>
|
||
</span>
|
||
<span class="text-xs font-semibold">DDoS Protected</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
|
||
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">
|
||
<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', 'Everything you
|
||
need is just one click away') }}</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">
|
||
<!-- 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>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- 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
|
||
|
||
<!-- 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>
|
||
</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', 'Our Services') }}
|
||
</h2>
|
||
<p class="text-xl text-color-muted max-w-2xl mx-auto animate-fade-in-up">
|
||
{{ theme('services_subtitle', 'Choose from our comprehensive range of server hosting solutions') }}
|
||
</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', 'Why Choose Us?') }}
|
||
</h2>
|
||
<p class="text-xl text-color-muted max-w-3xl mx-auto animate-fade-in-up leading-relaxed">
|
||
{{ theme('features_subtitle', 'We\'ve built the most advanced game hosting platform with features
|
||
that give you the competitive edge') }}
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 mb-8">
|
||
<!-- Security Feature -->
|
||
<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', 'Military-Grade
|
||
Security') }}</h3>
|
||
</div>
|
||
<p class="text-color-muted text-base leading-relaxed line-clamp-3">{{ theme('feature_1_desc', 'Advanced DDoS
|
||
protection, encrypted connections, and real-time threat monitoring keep your servers safe from
|
||
attacks 24/7.') }}</p>
|
||
</div>
|
||
|
||
<!-- Analytics Feature -->
|
||
<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-dashboard-line class="size-6" />
|
||
</div>
|
||
<h3 class="text-xl font-bold text-color-base">{{ theme('feature_2_title', 'Smart Analytics') }}
|
||
</h3>
|
||
</div>
|
||
<p class="text-color-muted text-base leading-relaxed line-clamp-3">{{ theme('feature_2_desc', 'Real-time
|
||
performance monitoring, player analytics, and detailed insights help you optimize your server
|
||
performance and player experience.') }}</p>
|
||
</div>
|
||
|
||
<!-- Setup Feature -->
|
||
<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', 'Lightning Setup') }}
|
||
</h3>
|
||
</div>
|
||
<p class="text-color-muted text-base leading-relaxed line-clamp-3">{{ theme('feature_3_desc', 'Deploy your game
|
||
servers in under 60 seconds with our automated setup and instant configuration system. No
|
||
technical knowledge required.') }}</p>
|
||
</div>
|
||
|
||
<!-- Performance Feature -->
|
||
<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-cpu-line class="size-6" />
|
||
</div>
|
||
<h3 class="text-xl font-bold text-color-base">{{ theme('feature_4_title', 'Extreme
|
||
Performance') }}</h3>
|
||
</div>
|
||
<p class="text-color-muted text-base leading-relaxed line-clamp-3">{{ theme('feature_4_desc', 'Premium NVMe SSD
|
||
storage, high-frequency CPUs, and optimized network routing deliver zero-lag gaming experience
|
||
for your players.') }}</p>
|
||
</div>
|
||
|
||
<!-- Global Feature -->
|
||
<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 Reach') }}
|
||
</h3>
|
||
</div>
|
||
<p class="text-color-muted text-base leading-relaxed line-clamp-3">{{ theme('feature_5_desc', '15+ datacenter
|
||
locations across 6 continents ensure your players get ultra-low latency wherever they are in the
|
||
world.') }}</p>
|
||
</div>
|
||
|
||
<!-- AI Feature -->
|
||
<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-line-chart-line class="size-6" />
|
||
</div>
|
||
<h3 class="text-xl font-bold text-color-base">{{ theme('feature_6_title', 'AI-Powered
|
||
Optimization') }}</h3>
|
||
</div>
|
||
<p class="text-color-muted text-base leading-relaxed line-clamp-3">{{ theme('feature_6_desc', 'Machine learning
|
||
algorithms continuously optimize server performance and predict issues before they impact your
|
||
players.') }}</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 Get Started?') }}
|
||
</h2>
|
||
<p class="text-lg md:text-xl text-color-muted mb-8 animate-fade-in-up">
|
||
{{ theme('cta_subtitle', 'Join thousands of satisfied customers who trust our platform for their
|
||
game hosting needs') }}
|
||
</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-price-tag-3-line class="size-5 group-hover:scale-110 transition-transform" />
|
||
<span>{{ theme('cta_primary_text', 'View Pricing') }}</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', 'Chat Support') }}</span>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
@else
|
||
<!-- Portal Page Layout -->
|
||
|
||
<!-- Custom HTML Section -->
|
||
@if(theme('custom_homepage_html'))
|
||
<div class="custom-homepage-content">
|
||
{!! theme('custom_homepage_html') !!}
|
||
</div>
|
||
@endif
|
||
|
||
<!-- Compact Hero Section -->
|
||
<section class="mt-20 relative py-16 border-b border-neutral">
|
||
<div class="container mx-auto px-4">
|
||
<div class="max-w-4xl mx-auto text-center">
|
||
<div class="inline-flex items-center gap-2 bg-primary/10 border border-primary/20 rounded-full px-4 py-2 mb-6">
|
||
<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-semibold text-primary">{{ theme('homepage_hero_badge', '🚀 Welcome!') }}</span>
|
||
</div>
|
||
|
||
<h1 class="text-4xl md:text-5xl font-bold text-color-base mb-4">
|
||
{{ theme('homepage_hero_title1', 'The Best') }}
|
||
<span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
|
||
{{ theme('homepage_hero_title2', 'Hosting') }}
|
||
</span>
|
||
</h1>
|
||
|
||
<p class="text-lg text-color-muted mb-8">
|
||
{!! \Illuminate\Support\Str::markdown(theme('homepage_hero_desc', 'Experience next-gen game hosting with blazing-fast SSD performance, enterprise-grade security, and 24/7 expert support.')) !!}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Quick Actions Portal -->
|
||
<section class="py-12 bg-background">
|
||
<div class="container mx-auto px-4">
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
<!-- Buy Server -->
|
||
<a href="{{ theme('buy_server_link', '#services') }}" class="group p-6 rounded-xl bg-gradient-to-br from-primary to-primary/80 text-white hover:shadow-xl hover:scale-105 transition-all duration-300">
|
||
<div class="w-12 h-12 rounded-lg bg-white/20 flex items-center justify-center mb-4">
|
||
<x-ri-server-fill class="h-6 w-6" />
|
||
</div>
|
||
<h3 class="font-bold text-lg mb-1">{{ theme('buy_server_title', 'Buy Server') }}</h3>
|
||
<p class="text-sm text-white/80">{{ theme('buy_server_subtitle', 'Get started') }}</p>
|
||
</a>
|
||
|
||
<!-- Help/Support -->
|
||
<a href="{{ theme('help_link', '#') }}" target="_blank" class="group p-6 rounded-xl bg-gradient-to-br from-purple-500 to-purple-600 text-white hover:shadow-xl hover:scale-105 transition-all duration-300">
|
||
<div class="w-12 h-12 rounded-lg bg-white/20 flex items-center justify-center mb-4">
|
||
<x-ri-customer-service-line class="h-6 w-6" />
|
||
</div>
|
||
<h3 class="font-bold text-lg mb-1">{{ theme('help_title', 'Support') }}</h3>
|
||
<p class="text-sm text-white/80">{{ theme('help_subtitle', '24/7 Help') }}</p>
|
||
</a>
|
||
|
||
<!-- Login/Dashboard -->
|
||
@guest
|
||
<a href="{{ route('login') }}" class="group p-6 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 text-white hover:shadow-xl hover:scale-105 transition-all duration-300">
|
||
<div class="w-12 h-12 rounded-lg bg-white/20 flex items-center justify-center mb-4">
|
||
<x-ri-login-box-line class="h-6 w-6" />
|
||
</div>
|
||
<h3 class="font-bold text-lg mb-1">{{ theme('login_title', 'Login') }}</h3>
|
||
<p class="text-sm text-white/80">{{ theme('login_subtitle', 'Access Panel') }}</p>
|
||
</a>
|
||
@else
|
||
<a href="{{ route('dashboard') }}" class="group p-6 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 text-white hover:shadow-xl hover:scale-105 transition-all duration-300">
|
||
<div class="w-12 h-12 rounded-lg bg-white/20 flex items-center justify-center mb-4">
|
||
<x-ri-dashboard-fill class="h-6 w-6" />
|
||
</div>
|
||
<h3 class="font-bold text-lg mb-1">{{ theme('dashboard_title', 'Dashboard') }}</h3>
|
||
<p class="text-sm text-white/80">{{ theme('dashboard_subtitle', 'Manage') }}</p>
|
||
</a>
|
||
@endguest
|
||
|
||
<!-- Documentation -->
|
||
<a href="{{ theme('docs_link', '#') }}" target="_blank" class="group p-6 rounded-xl bg-gradient-to-br from-emerald-500 to-emerald-600 text-white hover:shadow-xl hover:scale-105 transition-all duration-300">
|
||
<div class="w-12 h-12 rounded-lg bg-white/20 flex items-center justify-center mb-4">
|
||
<x-ri-book-open-line class="h-6 w-6" />
|
||
</div>
|
||
<h3 class="font-bold text-lg mb-1">{{ theme('docs_title', 'Docs') }}</h3>
|
||
<p class="text-sm text-white/80">{{ theme('docs_subtitle', 'Learn more') }}</p>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Stats Compact -->
|
||
<section class="py-12 bg-background-secondary/50">
|
||
<div class="container mx-auto px-4">
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||
<div class="text-center">
|
||
<div class="text-3xl font-bold text-success mb-1">99.9%</div>
|
||
<div class="text-sm text-color-muted">{{ theme('stats_uptime_title', 'Uptime') }}</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-3xl font-bold text-primary mb-1">24/7</div>
|
||
<div class="text-sm text-color-muted">{{ theme('stats_support_title', 'Support') }}</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-3xl font-bold text-purple-500 mb-1">{{ number_format(\App\Models\User::count()) }}+</div>
|
||
<div class="text-sm text-color-muted">{{ theme('stats_users_title', 'Users') }}</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-3xl font-bold text-orange-500 mb-1">{{ number_format(\App\Models\Service::where('status', 'active')->count()) }}+</div>
|
||
<div class="text-sm text-color-muted">{{ theme('stats_servers_title', 'Servers') }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Services Grid (Portal Style) -->
|
||
<section id="services" class="py-16 bg-background">
|
||
<div class="container mx-auto px-4">
|
||
<div class="mb-12">
|
||
<h2 class="text-3xl font-bold text-color-base mb-2">
|
||
{{ theme('services_title', 'Our Services') }}
|
||
</h2>
|
||
<p class="text-color-muted">
|
||
{{ theme('services_subtitle', 'Select a service to get started') }}
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
@foreach ($categories as $category)
|
||
<a href="{{ route('category.show', ['category' => $category->slug]) }}" wire:navigate class="group block p-6 rounded-xl bg-background-secondary border border-neutral hover:border-primary/50 hover:shadow-lg transition-all duration-300">
|
||
@if ($category->image)
|
||
<div class="w-16 h-16 rounded-lg overflow-hidden mb-4">
|
||
<img src="{{ Storage::url($category->image) }}" alt="{{ $category->name }}" class="w-full h-full object-cover">
|
||
</div>
|
||
@else
|
||
<div class="w-16 h-16 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
|
||
<x-ri-server-line class="h-8 w-8 text-primary" />
|
||
</div>
|
||
@endif
|
||
|
||
<h3 class="text-lg font-bold text-color-base mb-2 group-hover:text-primary transition-colors">
|
||
{{ $category->name }}
|
||
</h3>
|
||
|
||
@if(theme('show_category_description', true))
|
||
<div class="prose dark:prose-invert prose-sm text-color-muted mb-3 line-clamp-2">
|
||
{!! $category->description !!}
|
||
</div>
|
||
@endif
|
||
|
||
<div class="flex items-center text-primary text-sm font-semibold">
|
||
<span>{{ __('common.button.view_all') }}</span>
|
||
<x-ri-arrow-right-line class="h-4 w-4 ml-1 group-hover:translate-x-1 transition-transform" />
|
||
</div>
|
||
</a>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Features Compact Grid -->
|
||
<section class="py-16 bg-background-secondary/30">
|
||
<div class="container mx-auto px-4">
|
||
<div class="mb-12">
|
||
<h2 class="text-3xl font-bold text-color-base mb-2">
|
||
{{ theme('features_title', 'Why Choose Us') }}
|
||
</h2>
|
||
<p class="text-color-muted">
|
||
{{ theme('features_subtitle', 'Premium features included') }}
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
<div class="flex gap-4 p-6 rounded-xl bg-background border border-neutral">
|
||
<div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
|
||
<x-ri-shield-check-line class="h-5 w-5 text-primary" />
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold text-color-base mb-1">{{ theme('feature_1_title', 'Secure') }}</h3>
|
||
<p class="text-sm text-color-muted">{{ theme('feature_1_desc', 'Advanced security') }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex gap-4 p-6 rounded-xl bg-background border border-neutral">
|
||
<div class="w-10 h-10 rounded-lg bg-secondary/10 flex items-center justify-center flex-shrink-0">
|
||
<x-ri-flashlight-line class="h-5 w-5 text-secondary" />
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold text-color-base mb-1">{{ theme('feature_3_title', 'Fast Setup') }}</h3>
|
||
<p class="text-sm text-color-muted">{{ theme('feature_3_desc', 'Quick deployment') }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex gap-4 p-6 rounded-xl bg-background border border-neutral">
|
||
<div class="w-10 h-10 rounded-lg bg-warning/10 flex items-center justify-center flex-shrink-0">
|
||
<x-ri-cpu-line class="h-5 w-5 text-warning" />
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold text-color-base mb-1">{{ theme('feature_4_title', 'Performance') }}</h3>
|
||
<p class="text-sm text-color-muted">{{ theme('feature_4_desc', 'High-speed servers') }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex gap-4 p-6 rounded-xl bg-background border border-neutral">
|
||
<div class="w-10 h-10 rounded-lg bg-info/10 flex items-center justify-center flex-shrink-0">
|
||
<x-ri-global-line class="h-5 w-5 text-info" />
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold text-color-base mb-1">{{ theme('feature_5_title', 'Global') }}</h3>
|
||
<p class="text-sm text-color-muted">{{ theme('feature_5_desc', 'Worldwide coverage') }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex gap-4 p-6 rounded-xl bg-background border border-neutral">
|
||
<div class="w-10 h-10 rounded-lg bg-success/10 flex items-center justify-center flex-shrink-0">
|
||
<x-ri-customer-service-line class="h-5 w-5 text-success" />
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold text-color-base mb-1">24/7 Support</h3>
|
||
<p class="text-sm text-color-muted">Always available</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex gap-4 p-6 rounded-xl bg-background border border-neutral">
|
||
<div class="w-10 h-10 rounded-lg bg-error/10 flex items-center justify-center flex-shrink-0">
|
||
<x-ri-line-chart-line class="h-5 w-5 text-error" />
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold text-color-base mb-1">{{ theme('feature_6_title', 'Smart') }}</h3>
|
||
<p class="text-sm text-color-muted">{{ theme('feature_6_desc', 'AI optimization') }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Testimonials Compact -->
|
||
<section class="py-16 bg-background">
|
||
<div class="container mx-auto px-4">
|
||
<div class="mb-12">
|
||
<h2 class="text-3xl font-bold text-color-base mb-2">
|
||
{{ theme('testimonials_title', 'Testimonials') }}
|
||
</h2>
|
||
<p class="text-color-muted">
|
||
{{ theme('testimonials_subtitle', 'What our customers say') }}
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-3 gap-6">
|
||
@for ($i = 1; $i <= 3; $i++)
|
||
<div class="p-6 rounded-xl bg-background-secondary border border-neutral">
|
||
<div class="flex items-center gap-3 mb-4">
|
||
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-primary/60 flex items-center justify-center text-white font-bold text-sm">
|
||
{{ substr(theme("testimonial_{$i}_name", 'User'), 0, 1) }}
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold text-color-base text-sm">{{ theme("testimonial_{$i}_name", 'Customer') }}</h4>
|
||
<p class="text-xs text-color-muted">{{ theme("testimonial_{$i}_role", 'Role') }}</p>
|
||
</div>
|
||
</div>
|
||
<p class="text-sm text-color-muted italic mb-3">"{{ theme("testimonial_{$i}_quote", 'Great service!') }}"</p>
|
||
<div class="flex gap-1">
|
||
@for ($j = 0; $j < 5; $j++)
|
||
<x-ri-star-fill class="h-3 w-3 text-warning" />
|
||
@endfor
|
||
</div>
|
||
</div>
|
||
@endfor
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA Compact -->
|
||
<section class="py-16 bg-gradient-to-r from-primary/10 to-secondary/10">
|
||
<div class="container mx-auto px-4">
|
||
<div class="max-w-xl mx-auto text-center">
|
||
<h2 class="text-3xl font-bold mb-4">
|
||
<span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
|
||
{{ theme('cta_title', 'Ready to Start?') }}
|
||
</span>
|
||
</h2>
|
||
<p class="text-color-muted mb-8">
|
||
{{ theme('cta_subtitle', 'Host your Minecraft server with us today and experience unparalleled performance and support.') }}
|
||
</p>
|
||
<div class="flex gap-4 justify-center">
|
||
<a href="#services" class="inline-flex items-center gap-2 rounded-xl bg-primary px-6 py-3 text-sm font-semibold text-white hover:bg-primary/90 transition-all">
|
||
<span>{{ theme('cta_primary_text', 'Get Started') }}</span>
|
||
<x-ri-arrow-right-line class="h-4 w-4" />
|
||
</a>
|
||
<a href="{{ theme('help_link', '#') }}" class="inline-flex items-center gap-2 rounded-xl bg-background-secondary border border-neutral px-6 py-3 text-sm font-semibold text-color-base hover:border-primary/50 transition-all">
|
||
<span>{{ theme('cta_secondary_text', 'Learn More') }}</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
@endif
|
||
|
||
<!-- Hook Section -->
|
||
<div class="container mx-auto my-12 px-10">
|
||
{!! hook('pages.home') !!}
|
||
</div>
|
||
</div>
|