feat: redesign additional features section with modern grid layout and enhanced content
This commit is contained in:
@@ -285,50 +285,53 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Additional Features Strip -->
|
||||
<div class="lg:col-span-12 grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div class="group p-5 bg-background-secondary/60 hover:bg-background-secondary border border-neutral/30 hover:border-primary/30 rounded-2xl transition-all duration-300">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<x-ri-refresh-line class="size-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-color-base text-sm">OS Reinstall</h4>
|
||||
<p class="text-xs text-color-muted">50+ templates</p>
|
||||
<!-- 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>
|
||||
<div class="group p-5 bg-background-secondary/60 hover:bg-background-secondary border border-neutral/30 hover:border-secondary/30 rounded-2xl transition-all duration-300">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-secondary/10 flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<x-ri-history-line class="size-5 text-secondary" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-color-base text-sm">Task History</h4>
|
||||
<p class="text-xs text-color-muted">Full audit logs</p>
|
||||
|
||||
<!-- 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>
|
||||
<div class="group p-5 bg-background-secondary/60 hover:bg-background-secondary border border-neutral/30 hover:border-success/30 rounded-2xl transition-all duration-300">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-success/10 flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<x-ri-global-line class="size-5 text-success" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-color-base text-sm">Network Tools</h4>
|
||||
<p class="text-xs text-color-muted">IPv4 + IPv6</p>
|
||||
|
||||
<!-- 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>
|
||||
<div class="group p-5 bg-background-secondary/60 hover:bg-background-secondary border border-neutral/30 hover:border-warning/30 rounded-2xl transition-all duration-300">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-warning/10 flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<x-ri-shut-down-line class="size-5 text-warning" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-color-base text-sm">Power Controls</h4>
|
||||
<p class="text-xs text-color-muted">ACPI support</p>
|
||||
|
||||
<!-- 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>
|
||||
@@ -337,47 +340,49 @@
|
||||
</section>
|
||||
|
||||
<!-- Services Section - Card Carousel Style -->
|
||||
<section id="services" class="py-24 md:py-32 bg-gradient-to-b from-background-secondary/50 to-transparent">
|
||||
<section id="services" class="py-24 md:py-32">
|
||||
<div class="container mx-auto px-4">
|
||||
<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 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>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -523,33 +528,120 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section - Full Width Modern -->
|
||||
<!-- 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-primary via-primary/90 to-secondary rounded-[3rem] p-12 md:p-20">
|
||||
<!-- Background Effects -->
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div class="absolute top-0 left-1/4 w-96 h-96 bg-white/10 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-0 right-1/4 w-64 h-64 bg-white/5 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10 text-center max-w-3xl mx-auto">
|
||||
<h2 class="text-4xl md:text-5xl lg:text-6xl font-black text-white mb-6 leading-tight">
|
||||
{{ theme('cta_title', 'Ready to Deploy Your VPS?') }}
|
||||
</h2>
|
||||
<p class="text-xl text-white/80 mb-10 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>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="#services" class="group inline-flex items-center justify-center gap-3 bg-white hover:bg-white/90 text-primary px-8 py-4 rounded-2xl font-bold text-lg transition-all duration-300 shadow-xl 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-white/10 hover:bg-white/20 text-white border border-white/30 px-8 py-4 rounded-2xl font-bold text-lg transition-all duration-300 backdrop-blur-sm hover:-translate-y-1">
|
||||
<x-ri-mail-line class="size-5" />
|
||||
<span>{{ theme('cta_secondary_text', 'Contact Support') }}</span>
|
||||
</a>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user