feat: refine hero section and enhance additional features layout for improved user experience
This commit is contained in:
@@ -29,9 +29,9 @@
|
||||
</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">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl 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">
|
||||
<span class="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>
|
||||
@@ -414,53 +414,53 @@
|
||||
</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" />
|
||||
<!-- Additional Features - Horizontal Strip -->
|
||||
<div class="lg:col-span-12 mt-2">
|
||||
<div class="bg-background/30 border border-neutral/10 rounded-2xl p-6">
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-4">
|
||||
<!-- OS Reinstall -->
|
||||
<div class="flex items-center gap-4 lg:border-r lg:border-neutral/20 lg:pr-4 last:border-r-0 last:pr-0">
|
||||
<div class="w-11 h-11 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0">
|
||||
<x-ri-refresh-line class="size-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-color-base text-sm">OS Reinstall</h4>
|
||||
<p class="text-xs text-color-muted">50+ templates</p>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="font-bold text-color-base text-lg mb-2">OS Reinstall</h4>
|
||||
<p class="text-sm text-color-muted leading-relaxed">50+ OS templates with one-click reinstallation.</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" />
|
||||
<!-- Task History -->
|
||||
<div class="flex items-center gap-4 lg:border-r lg:border-neutral/20 lg:pr-4 last:border-r-0 last:pr-0">
|
||||
<div class="w-11 h-11 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0">
|
||||
<x-ri-history-line class="size-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-color-base text-sm">Task History</h4>
|
||||
<p class="text-xs text-color-muted">Full audit logs</p>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="font-bold text-color-base text-lg mb-2">Task History</h4>
|
||||
<p class="text-sm text-color-muted leading-relaxed">Full audit logs of all server operations.</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" />
|
||||
<!-- Network Tools -->
|
||||
<div class="flex items-center gap-4 lg:border-r lg:border-neutral/20 lg:pr-4 last:border-r-0 last:pr-0">
|
||||
<div class="w-11 h-11 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0">
|
||||
<x-ri-global-line class="size-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-color-base text-sm">Network Tools</h4>
|
||||
<p class="text-xs text-color-muted">IPv4, IPv6 & rDNS</p>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="font-bold text-color-base text-lg mb-2">Network Tools</h4>
|
||||
<p class="text-sm text-color-muted leading-relaxed">IPv4 & IPv6 with rDNS and bandwidth stats.</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" />
|
||||
<!-- Power Controls -->
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-11 h-11 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0">
|
||||
<x-ri-shut-down-line class="size-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-color-base text-sm">Power Controls</h4>
|
||||
<p class="text-xs text-color-muted">Start, stop & reboot</p>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="font-bold text-color-base text-lg mb-2">Power Controls</h4>
|
||||
<p class="text-sm text-color-muted leading-relaxed">Graceful shutdown, hard reset, and power cycle.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -534,86 +534,6 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Actions - Modern Cards -->
|
||||
<section 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="text-center max-w-xl mx-auto mb-12">
|
||||
<p class="text-sm font-medium text-primary uppercase tracking-wider mb-3">Quick Start</p>
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-color-base mb-3">
|
||||
{{ theme('quick_actions_title', 'Get Started in Seconds') }}
|
||||
</h2>
|
||||
<p class="text-base 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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section - Modern Split Design -->
|
||||
<section class="py-24 md:py-32">
|
||||
<div class="container mx-auto px-4">
|
||||
|
||||
Reference in New Issue
Block a user