feat: enhance control panel and infrastructure sections with gradient backgrounds for improved visual appeal

This commit is contained in:
2025-12-22 23:21:25 -05:00
parent 5c608826a4
commit 8ca9b863eb

View File

@@ -177,16 +177,17 @@
<!-- Control Panel Features - Modern Bento Layout -->
<section id="panel-features" class="py-24 md:py-32 relative">
<div class="container mx-auto px-4">
<!-- Section Header -->
<div class="max-w-2xl mb-12">
<p class="text-sm font-medium text-primary uppercase tracking-wider mb-3">Control Panel</p>
<h2 class="text-3xl md:text-4xl font-bold text-color-base mb-4">
{{ theme('panel_title', 'Complete Server Management') }}
</h2>
<p class="text-base text-color-muted leading-relaxed">
{{ theme('panel_subtitle', 'Take full control of your VPS with our comprehensive management dashboard. Every tool you need, right at your fingertips.') }}
</p>
</div>
<div class="bg-gradient-to-b from-background-secondary/50 to-background-secondary/20 rounded-3xl p-8 md:p-12">
<!-- Section Header -->
<div class="max-w-2xl mb-12">
<p class="text-sm font-medium text-primary uppercase tracking-wider mb-3">Control Panel</p>
<h2 class="text-3xl md:text-4xl font-bold text-color-base mb-4">
{{ theme('panel_title', 'Complete Server Management') }}
</h2>
<p class="text-base text-color-muted leading-relaxed">
{{ theme('panel_subtitle', 'Take full control of your VPS with our comprehensive management dashboard. Every tool you need, right at your fingertips.') }}
</p>
</div>
<!-- Bento Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-4 md:gap-6">
@@ -480,15 +481,16 @@
<!-- Infrastructure Features - Alternating Layout -->
<section id="features" class="py-24 md:py-32">
<div class="container mx-auto px-4">
<div class="text-center max-w-2xl mx-auto mb-14">
<p class="text-sm font-medium text-primary uppercase tracking-wider mb-3">Infrastructure</p>
<h2 class="text-3xl md:text-4xl font-bold text-color-base mb-4">
{{ theme('features_title', 'Enterprise Infrastructure') }}
</h2>
<p class="text-base text-color-muted leading-relaxed">
{{ theme('features_subtitle', 'Built on carrier-grade hardware with redundant systems, delivering the reliability your business demands') }}
</p>
</div>
<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-2xl mx-auto mb-14">
<p class="text-sm font-medium text-primary uppercase tracking-wider mb-3">Infrastructure</p>
<h2 class="text-3xl md:text-4xl font-bold text-color-base mb-4">
{{ theme('features_title', 'Enterprise Infrastructure') }}
</h2>
<p class="text-base text-color-muted leading-relaxed">
{{ theme('features_subtitle', 'Built on carrier-grade hardware with redundant systems, delivering the reliability your business demands') }}
</p>
</div>
<!-- Feature Rows - Alternating -->
<div class="space-y-8">
@@ -543,19 +545,20 @@
</section>
<!-- Quick Actions - Modern Cards -->
<section class="py-24 md:py-32 bg-gradient-to-b from-transparent via-background-secondary/30 to-transparent">
<section class="py-24 md:py-32">
<div class="container mx-auto px-4">
<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="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">
<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>
@@ -617,6 +620,7 @@
</div>
</a>
</div>
</div>
</div>
</section>