feat: enhance homepage hero section with updated layout, dynamic content, and improved call-to-action buttons for better user engagement
This commit is contained in:
@@ -47,94 +47,110 @@
|
||||
<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 class="animate-fade-in-down mb-8">
|
||||
<div class="inline-flex items-center gap-3 rounded-full bg-primary/10 border border-primary/20 px-5 py-2.5 backdrop-blur-sm">
|
||||
<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', 'Now 50% faster deployment!') }}</span>
|
||||
</div>
|
||||
</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>
|
||||
<!-- Hero Title -->
|
||||
<div class="mb-8">
|
||||
<h1 class="text-5xl font-bold tracking-tight sm:text-6xl lg:text-7xl animate-fade-in-up">
|
||||
{{ theme('homepage_hero_title1', 'The Best') }}
|
||||
</h1>
|
||||
<h1 class="text-5xl font-bold tracking-tight sm:text-6xl lg:text-7xl animate-fade-in-up animation-delay-100">
|
||||
<span class="bg-gradient-to-r from-primary to-primary bg-clip-text text-transparent animate-gradient-x">
|
||||
{{ theme('homepage_hero_title2', 'Hosting') }}
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<!-- Hero Description -->
|
||||
<div class="text-lg text-base/70 max-w-xl animate-fade-in-up animation-delay-200 leading-relaxed mb-10 prose dark:prose-invert">
|
||||
{!! \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.')) !!}
|
||||
</div>
|
||||
|
||||
<!-- CTA Buttons -->
|
||||
<div class="flex flex-wrap gap-4 animate-fade-in-up animation-delay-300 mb-10">
|
||||
<a href="#services" class="group inline-flex items-center gap-2 rounded-xl bg-primary px-8 py-4 font-semibold text-white shadow-lg hover:bg-primary/90 transition-all duration-300 hover:scale-105">
|
||||
<x-ri-rocket-line class="h-5 w-5" />
|
||||
<span>{{ theme('hero_cta_primary_text', 'Get Started') }}</span>
|
||||
<x-ri-arrow-right-line class="h-5 w-5 group-hover:translate-x-1 transition-transform" />
|
||||
</a>
|
||||
<a href="#features" class="group inline-flex items-center gap-2 rounded-xl bg-secondary px-8 py-4 font-semibold text-white shadow-lg hover:bg-secondary/90 transition-all duration-300 hover:scale-105">
|
||||
<x-ri-flashlight-line class="h-5 w-5" />
|
||||
<span>{{ theme('hero_cta_secondary_text', 'Learn More') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-4 text-sm text-gray-400 animate-fade-in-up animation-delay-400 mb-10">
|
||||
@php
|
||||
$badgeDefaults = ['30-Day Guarantee', 'Instant Setup', 'Secure Payments'];
|
||||
@endphp
|
||||
|
||||
@for ($i = 1; $i <= 3; $i++)
|
||||
<div class="flex items-center gap-2 bg-success/10 px-3 py-1.5 rounded-full border border-success/30 text-success">
|
||||
<x-ri-check-line class="h-5 w-5 text-success" />
|
||||
<span>{{ theme("hero_trust_badge_{$i}", $badgeDefaults[$i - 1]) }}</span>
|
||||
</div>
|
||||
@endfor
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<!-- Hero Image/Illustration -->
|
||||
<div class="mt-16 sm:mt-24 lg:col-span-5 lg:mt-0">
|
||||
<div class="relative mb-8">
|
||||
@php
|
||||
$heroImg = theme('homepage_hero_illustration_url') ?: 'https://pngimg.com/d/minecraft_PNG40.png';
|
||||
$heroAlt = theme('homepage_hero_illustration_alt', 'Hero Illustration');
|
||||
@endphp
|
||||
|
||||
<div class="absolute -inset-4 rounded-full bg-gradient-to-r from-primary/20 to-secondary/20 blur-2xl opacity-25 pointer-events-none"></div>
|
||||
<img src="{{ $heroImg }}" alt="{{ $heroAlt }}" class="relative w-full h-auto object-contain animate-float" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-2 gap-6 lg:grid-cols-4">
|
||||
<div class="group text-center p-6 rounded-2xl bg-gradient-to-br from-background-secondary to-background border border-neutral hover:border-success/50 transition-all duration-300 hover:scale-105">
|
||||
<div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-success/10 text-success mb-4">
|
||||
<x-ri-time-line class="h-7 w-7" />
|
||||
</div>
|
||||
<div class="text-3xl font-bold text-success mb-2">99.9%</div>
|
||||
<div class="text-sm font-semibold text-color-base">{{ theme('stats_uptime_title', 'Uptime') }}</div>
|
||||
<div class="text-xs text-color-muted mt-1">{{ theme('stats_uptime_subtitle', 'Guaranteed') }}</div>
|
||||
</div>
|
||||
|
||||
<div class="group text-center p-6 rounded-2xl bg-gradient-to-br from-background-secondary to-background border border-neutral hover:border-primary/50 transition-all duration-300 hover:scale-105">
|
||||
<div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-primary/10 text-primary mb-4">
|
||||
<x-ri-customer-service-line class="h-7 w-7" />
|
||||
</div>
|
||||
<div class="text-3xl font-bold text-primary mb-2">24/7</div>
|
||||
<div class="text-sm font-semibold text-color-base">{{ theme('stats_support_title', 'Support') }}</div>
|
||||
<div class="text-xs text-color-muted mt-1">{{ theme('stats_support_subtitle', 'Always available') }}</div>
|
||||
</div>
|
||||
|
||||
<div class="group text-center p-6 rounded-2xl bg-gradient-to-br from-background-secondary to-background border border-neutral hover:border-purple-500/50 transition-all duration-300 hover:scale-105">
|
||||
<div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-purple-500/10 text-purple-500 mb-4">
|
||||
<x-ri-user-heart-line class="h-7 w-7" />
|
||||
</div>
|
||||
<div class="text-3xl font-bold text-purple-500 mb-2">{{ number_format(\App\Models\User::count()) }}+</div>
|
||||
<div class="text-sm font-semibold text-color-base">{{ theme('stats_users_title', 'Customers') }}</div>
|
||||
<div class="text-xs text-color-muted mt-1">{{ theme('stats_users_subtitle', 'Worldwide') }}</div>
|
||||
</div>
|
||||
|
||||
<div class="group text-center p-6 rounded-2xl bg-gradient-to-br from-background-secondary to-background border border-neutral hover:border-orange-500/50 transition-all duration-300 hover:scale-105">
|
||||
<div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-orange-500/10 text-orange-500 mb-4">
|
||||
<x-ri-server-line class="h-7 w-7" />
|
||||
</div>
|
||||
<div class="text-3xl font-bold text-orange-500 mb-2">{{ number_format(\App\Models\Service::where('status', 'active')->count()) }}+</div>
|
||||
<div class="text-sm font-semibold text-color-base">{{ theme('stats_servers_title', 'Servers') }}</div>
|
||||
<div class="text-xs text-color-muted mt-1">{{ theme('stats_servers_subtitle', 'Active now') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user