feat: enhance infrastructure features section with improved layout and card presentation for better user engagement
This commit is contained in:
@@ -475,66 +475,98 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Infrastructure Features - Alternating Layout -->
|
||||
<!-- Infrastructure Features -->
|
||||
<section id="features" 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-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">
|
||||
<!-- Row 1 -->
|
||||
<div class="flex flex-col md:flex-row gap-6">
|
||||
<div class="md:flex-[2] group p-8 bg-gradient-to-br from-primary/5 to-background-secondary border border-primary/20 hover:border-primary/40 rounded-3xl transition-all duration-500 hover:shadow-xl">
|
||||
<div class="flex items-start gap-6">
|
||||
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary to-primary/70 flex items-center justify-center shadow-lg flex-shrink-0">
|
||||
<x-ri-shield-check-line class="size-8 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-color-base mb-3">{{ theme('feature_1_title', 'DDoS Protection') }}</h3>
|
||||
<p class="text-color-muted leading-relaxed">{{ theme('feature_1_desc', 'Enterprise-grade DDoS mitigation with automatic detection and filtering. Multi-layer protection keeps your services online during attacks.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:flex-1 group p-8 bg-gradient-to-br from-secondary/5 to-background-secondary border border-secondary/20 hover:border-secondary/40 rounded-3xl transition-all duration-500 hover:shadow-xl">
|
||||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-secondary to-secondary/70 flex items-center justify-center shadow-lg mb-4">
|
||||
<x-ri-cpu-line class="size-7 text-white" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-color-base mb-2">{{ theme('feature_2_title', 'Premium Hardware') }}</h3>
|
||||
<p class="text-color-muted text-sm leading-relaxed">{{ theme('feature_2_desc', 'Latest-generation AMD EPYC and Intel Xeon processors paired with NVMe SSD storage.') }}</p>
|
||||
<!-- Section Header -->
|
||||
<div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-10">
|
||||
<div class="max-w-2xl">
|
||||
<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', 'We\'ve built a platform that is advanced enough to compete with the large players of the industry at a fraction of the cost.') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Row 2 -->
|
||||
<div class="flex flex-col md:flex-row gap-6">
|
||||
<div class="md:flex-1 group p-8 bg-gradient-to-br from-success/5 to-background-secondary border border-success/20 hover:border-success/40 rounded-3xl transition-all duration-500 hover:shadow-xl">
|
||||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-success to-success/70 flex items-center justify-center shadow-lg mb-4">
|
||||
<x-ri-flashlight-line class="size-7 text-white" />
|
||||
<!-- Infrastructure Cards - Horizontal Scroll on Mobile -->
|
||||
<div class="flex gap-6 overflow-x-auto pb-4 snap-x snap-mandatory lg:grid lg:grid-cols-5 lg:overflow-visible scrollbar-hide">
|
||||
<!-- NVME & RAM Cached Storage -->
|
||||
<div class="flex-shrink-0 w-72 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-hard-drive-3-line class="size-7 text-primary" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-color-base mb-3 group-hover:text-primary transition-colors">
|
||||
NVMe & RAM Cached Storage
|
||||
</h3>
|
||||
<p class="text-color-muted text-sm leading-relaxed">
|
||||
Each VPS caches RAM for performance beyond SSDs, while dedicated NVMe drives provide consistent IOPS for storage.
|
||||
</p>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-color-base mb-2">{{ theme('feature_3_title', 'Instant Setup') }}</h3>
|
||||
<p class="text-color-muted text-sm leading-relaxed">{{ theme('feature_3_desc', 'Deploy your VPS in under 60 seconds with automated provisioning.') }}</p>
|
||||
</div>
|
||||
<div class="md:flex-1 group p-8 bg-gradient-to-br from-warning/5 to-background-secondary border border-warning/20 hover:border-warning/40 rounded-3xl transition-all duration-500 hover:shadow-xl">
|
||||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-warning to-warning/70 flex items-center justify-center shadow-lg mb-4">
|
||||
<x-ri-admin-line class="size-7 text-white" />
|
||||
|
||||
<!-- IPv6 Public Address -->
|
||||
<div class="flex-shrink-0 w-72 lg:w-auto snap-center group">
|
||||
<div class="h-full bg-background-secondary/80 hover:bg-background-secondary border border-neutral/30 hover:border-secondary/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-secondary/20 to-secondary/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<x-ri-global-line class="size-7 text-secondary" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-color-base mb-3 group-hover:text-secondary transition-colors">
|
||||
IPv6 Public Address
|
||||
</h3>
|
||||
<p class="text-color-muted text-sm leading-relaxed">
|
||||
Each VPS receives a static IPv6 address for public services, plus a secondary RA-based MAC address to ensure connectivity.
|
||||
</p>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-color-base mb-2">{{ theme('feature_4_title', 'Full Root Access') }}</h3>
|
||||
<p class="text-color-muted text-sm leading-relaxed">{{ theme('feature_4_desc', 'Complete administrative control over your server.') }}</p>
|
||||
</div>
|
||||
<div class="md:flex-1 group p-8 bg-gradient-to-br from-info/5 to-background-secondary border border-info/20 hover:border-info/40 rounded-3xl transition-all duration-500 hover:shadow-xl">
|
||||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-info to-info/70 flex items-center justify-center shadow-lg mb-4">
|
||||
<x-ri-global-line class="size-7 text-white" />
|
||||
|
||||
<!-- Xterm.js/NoVNC Access -->
|
||||
<div class="flex-shrink-0 w-72 lg:w-auto snap-center group">
|
||||
<div class="h-full bg-background-secondary/80 hover:bg-background-secondary border border-neutral/30 hover:border-success/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-success/20 to-success/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<x-ri-terminal-box-line class="size-7 text-success" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-color-base mb-3 group-hover:text-success transition-colors">
|
||||
Xterm.js/NoVNC Access
|
||||
</h3>
|
||||
<p class="text-color-muted text-sm leading-relaxed">
|
||||
Each VPS comes with Xterm.js and NoVNC via our server manager for easy access and control, anytime.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ceph Distributed Storage -->
|
||||
<div class="flex-shrink-0 w-72 lg:w-auto snap-center group">
|
||||
<div class="h-full bg-background-secondary/80 hover:bg-background-secondary border border-neutral/30 hover:border-warning/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-warning/20 to-warning/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<x-ri-database-2-line class="size-7 text-warning" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-color-base mb-3 group-hover:text-warning transition-colors">
|
||||
Ceph Storage Cluster
|
||||
</h3>
|
||||
<p class="text-color-muted text-sm leading-relaxed">
|
||||
Our redundant data distribution delivers IOPS beyond typical caching, fetching only unique data for a fast, smooth, and secure experience.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BGP IPv6 Networking -->
|
||||
<div class="flex-shrink-0 w-72 lg:w-auto snap-center group">
|
||||
<div class="h-full bg-background-secondary/80 hover:bg-background-secondary border border-neutral/30 hover:border-info/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-info/20 to-info/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<x-ri-route-line class="size-7 text-info" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-color-base mb-3 group-hover:text-info transition-colors">
|
||||
BGP IPv6 Networking
|
||||
</h3>
|
||||
<p class="text-color-muted text-sm leading-relaxed">
|
||||
We own our network, giving VPSs priority, a unique IPv6 address, and rotating IPv4 NAT for seamless inbound access.
|
||||
</p>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-color-base mb-2">{{ theme('feature_5_title', 'Global Network') }}</h3>
|
||||
<p class="text-color-muted text-sm leading-relaxed">{{ theme('feature_5_desc', 'Multiple datacenter locations with premium transit providers.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user