129 lines
5.8 KiB
HTML
129 lines
5.8 KiB
HTML
<div class="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
|
|
<app-navigation [scrolled]="scrolled" />
|
|
|
|
<!-- Hero Section -->
|
|
<section class="pt-32 pb-20 px-4">
|
|
<div class="max-w-7xl mx-auto text-center">
|
|
<h1 class="text-5xl md:text-7xl font-bold text-white mb-6 animate-fade-in">
|
|
Your Minecraft Server,
|
|
<span class="block text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-emerald-600">
|
|
Powered to Perfection
|
|
</span>
|
|
</h1>
|
|
<p class="text-xl text-gray-300 mb-8 max-w-3xl mx-auto">
|
|
Lightning-fast hosting with 99.9% uptime. Deploy your server in seconds and experience lag-free gameplay with
|
|
unlimited possibilities.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
|
<button
|
|
class="bg-green-500 hover:bg-green-600 text-white px-8 py-4 rounded-lg font-bold text-lg transition-all transform hover:scale-105 flex items-center gap-2 shadow-lg shadow-green-500/50">
|
|
Start Free Trial
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
<button
|
|
class="border-2 border-gray-400 hover:border-white text-white px-8 py-4 rounded-lg font-bold text-lg transition-all">
|
|
View Demo
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-16 grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
|
|
<div *ngFor="let stat of stats" class="text-center">
|
|
<div class="text-3xl md:text-4xl font-bold text-green-400">{{ stat.value }}</div>
|
|
<div class="text-gray-400 mt-1">{{ stat.label }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section id="features" class="py-20 px-4 bg-slate-800/30">
|
|
<div class="max-w-7xl mx-auto">
|
|
<h2 class="text-4xl md:text-5xl font-bold text-white text-center mb-16">
|
|
Why Choose BlockHost?
|
|
</h2>
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
<div *ngFor="let feature of features"
|
|
class="bg-slate-800/50 backdrop-blur-sm p-6 rounded-xl border border-slate-700 hover:border-green-500 transition-all hover:transform hover:scale-105">
|
|
<div class="mb-4" [innerHTML]="feature.icon"></div>
|
|
<h3 class="text-xl font-bold text-white mb-2">{{ feature.title }}</h3>
|
|
<p class="text-gray-400">{{ feature.description }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pricing Section -->
|
|
<section id="pricing" class="py-20 px-4">
|
|
<div class="max-w-7xl mx-auto">
|
|
<h2 class="text-4xl md:text-5xl font-bold text-white text-center mb-4">
|
|
Simple, Transparent Pricing
|
|
</h2>
|
|
<p class="text-gray-400 text-center mb-16 text-lg">
|
|
Choose the perfect plan for your community
|
|
</p>
|
|
<div class="grid md:grid-cols-4 gap-8">
|
|
<div *ngFor="let plan of plans"
|
|
[class]="'relative flex flex-col bg-slate-800/50 backdrop-blur-sm rounded-xl p-8 border-2 transition-all hover:transform hover:scale-105 ' + (plan.popular ? 'border-green-500 shadow-xl shadow-green-500/20' : 'border-slate-700 hover:border-green-500')">
|
|
<div class="flex-grow-1">
|
|
<div *ngIf="plan.popular"
|
|
class="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-4 py-1 rounded-full text-sm font-bold">
|
|
Most Popular
|
|
</div>
|
|
<div class="text-center mb-6">
|
|
<h3 class="text-2xl font-bold text-white mb-2">{{ plan.name }}</h3>
|
|
<div class="text-5xl font-bold text-white mb-2">{{ plan.price }}</div>
|
|
<div class="text-gray-400">/month</div>
|
|
</div>
|
|
<div class="space-y-3 mb-8">
|
|
<div class="text-center py-2 bg-slate-700/50 rounded-lg">
|
|
<div class="font-bold text-white">{{ plan.players }}</div>
|
|
</div>
|
|
<div class="text-center py-2 bg-slate-700/50 rounded-lg">
|
|
<div class="font-bold text-white">{{ plan.ram }}</div>
|
|
</div>
|
|
<div class="text-center py-2 bg-slate-700/50 rounded-lg">
|
|
<div class="font-bold text-white">{{ plan.storage }}</div>
|
|
</div>
|
|
</div>
|
|
<ul class="space-y-3 mb-8">
|
|
<li *ngFor="let feature of plan.features" class="flex items-center text-gray-300">
|
|
<svg class="w-5 h-5 text-green-400 mr-2 flex-shrink-0" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
{{ feature }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<button
|
|
[class]="'w-full py-3 rounded-lg font-bold transition-all ' + (plan.popular ? 'bg-green-500 hover:bg-green-600 text-white' : 'bg-slate-700 hover:bg-slate-600 text-white')">
|
|
Get Started
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="py-20 px-4 bg-gradient-to-r from-green-600 to-emerald-600">
|
|
<div class="max-w-4xl mx-auto text-center">
|
|
<h2 class="text-4xl md:text-5xl font-bold text-white mb-6">
|
|
Ready to Build Your World?
|
|
</h2>
|
|
<p class="text-xl text-green-50 mb-8">
|
|
Join thousands of players and start your Minecraft adventure today with 7 days free trial.
|
|
</p>
|
|
<button
|
|
class="bg-white hover:bg-gray-100 text-green-600 px-8 py-4 rounded-lg font-bold text-lg transition-all transform hover:scale-105 shadow-xl">
|
|
Start Your Free Trial
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<app-footer />
|
|
|
|
<app-contact-modal />
|
|
</div> |