82 lines
3.7 KiB
TypeScript
82 lines
3.7 KiB
TypeScript
"use client";
|
||
|
||
import Navbar from "@/components/Navbar";
|
||
import Footer from "@/components/Footer";
|
||
import hytaleData from "@/components/jsons/hytale.json";
|
||
|
||
export default function HytalePricing() {
|
||
return (
|
||
<div className="min-h-screen bg-[#060606] text-white selection:bg-[#6c63ff]/30 font-inter">
|
||
<Navbar />
|
||
|
||
{/* HEADER */}
|
||
<section className="relative pt-48 pb-12 px-6 max-w-7xl mx-auto text-center">
|
||
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[#6c63ff]/10 border border-[#6c63ff]/20 text-[#6c63ff] text-[10px] font-black uppercase tracking-widest mb-8">
|
||
⚔️ High Performance Nodes
|
||
</div>
|
||
<h1 className="text-5xl lg:text-7xl font-black mb-6 uppercase tracking-tighter">
|
||
Hytale <span className="text-[#6c63ff]">Pricing</span>
|
||
</h1>
|
||
<p className="text-gray-400 max-w-2xl mx-auto text-lg leading-relaxed">
|
||
{hytaleData.description}
|
||
</p>
|
||
</section>
|
||
|
||
{/* PACKAGES GRID */}
|
||
<section className="pb-32 px-6 max-w-7xl mx-auto">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
{hytaleData.packages.map((pkg) => (
|
||
<div
|
||
key={pkg.name}
|
||
className="bg-[#0e0e0e] border border-white/5 p-10 rounded-[3.5rem] flex flex-col justify-between transition-all group relative overflow-hidden"
|
||
>
|
||
{/* Coming Soon Overlay Effect (Optional) */}
|
||
<div className="absolute top-4 right-6">
|
||
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-[#6c63ff] animate-pulse">
|
||
Coming Soon
|
||
</span>
|
||
</div>
|
||
|
||
<div>
|
||
<div className="flex justify-between items-start mb-8">
|
||
<h3 className="text-3xl font-black uppercase tracking-tighter">{pkg.name}</h3>
|
||
<div className="text-right">
|
||
<div className="text-3xl font-black text-[#6c63ff]">
|
||
{pkg.price}{pkg.price !== "Negotiable" ? "€" : ""}
|
||
</div>
|
||
{pkg.price !== "Negotiable" && (
|
||
<div className="text-[10px] text-gray-500 uppercase font-bold tracking-widest">/ Month</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<ul className="space-y-4 mb-10 opacity-50 italic">
|
||
<li className="flex items-center gap-3 text-sm text-gray-400 font-medium">
|
||
<i className="fas fa-memory text-[#6c63ff] w-5 text-center"></i> RAM: {pkg.memory}
|
||
</li>
|
||
<li className="flex items-center gap-3 text-sm text-gray-400 font-medium">
|
||
<i className="fas fa-hdd text-[#6c63ff] w-5 text-center"></i> Disk: {pkg.disk} NVMe
|
||
</li>
|
||
<li className="flex items-center gap-3 text-sm text-gray-400 font-medium">
|
||
<i className="fas fa-database text-[#6c63ff] w-5 text-center"></i> Databases: {pkg.databases}
|
||
</li>
|
||
<li className="flex items-center gap-3 text-sm text-gray-400 font-medium">
|
||
<i className="fas fa-shield-alt text-[#6c63ff] w-5 text-center"></i> Enterprise DDoS Shield
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
{/* DISABLED BUTTON WITH COMING SOON TEXT */}
|
||
<button
|
||
disabled
|
||
className="block w-full text-center bg-white/5 border border-white/10 text-gray-500 py-5 rounded-2xl font-black uppercase tracking-widest text-[11px] cursor-not-allowed"
|
||
>
|
||
Coming Soon
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
} |