First commit of landing page feature
This commit is contained in:
@@ -1,50 +1,5 @@
|
||||
<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>
|
||||
<app-navigation [scrolled]="scrolled" />
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="pt-32 pb-20 px-4">
|
||||
@@ -108,38 +63,41 @@
|
||||
<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 class="grid md:grid-cols-4 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>
|
||||
[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 py-2 bg-slate-700/50 rounded-lg">
|
||||
<div class="font-bold text-white">{{ plan.ram }}</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="text-center py-2 bg-slate-700/50 rounded-lg">
|
||||
<div class="font-bold text-white">{{ plan.storage }}</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>
|
||||
<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
|
||||
@@ -165,22 +123,5 @@
|
||||
</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>
|
||||
<app-footer />
|
||||
</div>
|
||||
Reference in New Issue
Block a user