Adding landing page
This commit is contained in:
186
frontend/src/app/app.html
Normal file
186
frontend/src/app/app.html
Normal file
@@ -0,0 +1,186 @@
|
||||
<div class="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
|
||||
<!-- Navigation -->
|
||||
<nav
|
||||
[class]="'fixed w-full z-50 transition-all duration-300 ' + (scrolled ? 'bg-slate-900/95 backdrop-blur-sm shadow-lg' : 'bg-transparent')">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center h-16">
|
||||
<div class="flex items-center space-x-2">
|
||||
<svg class="w-8 h-8 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
|
||||
</svg>
|
||||
<span class="text-2xl font-bold text-white">BlockHost</span>
|
||||
</div>
|
||||
|
||||
<div class="hidden md:flex space-x-8">
|
||||
<a href="#features" class="text-gray-300 hover:text-white transition">Features</a>
|
||||
<a href="#pricing" class="text-gray-300 hover:text-white transition">Pricing</a>
|
||||
<a href="#support" class="text-gray-300 hover:text-white transition">Support</a>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="hidden md:block bg-green-500 hover:bg-green-600 text-white px-6 py-2 rounded-lg font-semibold transition-all transform hover:scale-105">
|
||||
Get Started
|
||||
</button>
|
||||
|
||||
<button class="md:hidden text-white" (click)="toggleMobileMenu()">
|
||||
<svg *ngIf="!mobileMenuOpen" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
<svg *ngIf="mobileMenuOpen" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="mobileMenuOpen" class="md:hidden bg-slate-900/95 backdrop-blur-sm">
|
||||
<div class="px-4 pt-2 pb-4 space-y-2">
|
||||
<a href="#features" class="block text-gray-300 hover:text-white py-2">Features</a>
|
||||
<a href="#pricing" class="block text-gray-300 hover:text-white py-2">Pricing</a>
|
||||
<a href="#support" class="block text-gray-300 hover:text-white py-2">Support</a>
|
||||
<button class="w-full bg-green-500 hover:bg-green-600 text-white px-6 py-2 rounded-lg font-semibold mt-2">
|
||||
Get Started
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 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-3 gap-8">
|
||||
<div *ngFor="let plan of plans"
|
||||
[class]="'relative 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 *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>
|
||||
<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>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-slate-900 py-12 px-4">
|
||||
<div class="max-w-7xl mx-auto text-center text-gray-400">
|
||||
<div class="flex items-center justify-center space-x-2 mb-4">
|
||||
<svg class="w-6 h-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
|
||||
</svg>
|
||||
<span class="text-xl font-bold text-white">BlockHost</span>
|
||||
</div>
|
||||
<p class="mb-4">Professional Minecraft Server Hosting Since 2020</p>
|
||||
<div class="flex justify-center space-x-6 text-sm">
|
||||
<a href="#" class="hover:text-white transition">Terms</a>
|
||||
<a href="#" class="hover:text-white transition">Privacy</a>
|
||||
<a href="#" class="hover:text-white transition">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
Reference in New Issue
Block a user