@extends('layouts.app')

@section('content')
<div class="text-center py-20">
    <h1 class="text-5xl md:text-7xl font-bold text-white mb-6 tracking-tight">
        Next-Gen <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-600">Hosting Infrastructure</span>
    </h1>
    <p class="text-xl text-slate-400 max-w-2xl mx-auto mb-10">
        Premium reseller hosting control panel for growing businesses.
    </p>
    
    <div class="grid md:grid-cols-3 gap-6 text-left">
        <!-- Feature 1 -->
        <div class="glass-card p-6 rounded-xl hover:bg-white/5 transition duration-300">
            <div class="text-cyan-400 mb-4">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
            </div>
            <h3 class="text-xl font-semibold text-white mb-2">High Performance</h3>
            <p class="text-slate-400">Powered by NVMe storage and latest gen processors.</p>
        </div>

        <!-- Feature 2 -->
        <div class="glass-card p-6 rounded-xl hover:bg-white/5 transition duration-300">
            <div class="text-blue-400 mb-4">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
            </div>
            <h3 class="text-xl font-semibold text-white mb-2">Secure by Default</h3>
            <p class="text-slate-400">Free SSL, DDoS protection, and automated backups included.</p>
        </div>

        <!-- Feature 3 -->
        <div class="glass-card p-6 rounded-xl hover:bg-white/5 transition duration-300">
            <div class="text-purple-400 mb-4">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
            </div>
            <h3 class="text-xl font-semibold text-white mb-2">Reseller Ready</h3>
            <p class="text-slate-400">White-label ready with powerful API integrations.</p>
        </div>
    </div>
</div>
@endsection