04d64fb993
Capture the current CyberLux UI, commerce, messaging, and Tor ops updates so local main can be pushed to the remote. Made-with: Cursor
205 lines
8.2 KiB
TypeScript
205 lines
8.2 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import Link from "next/link";
|
||
import PayWithUsdBalanceButton from "@/components/PayWithUsdBalanceButton";
|
||
import ThemedLayout from "@/components/layouts/ThemedLayout";
|
||
import { useCart } from "@/contexts/CartContext";
|
||
import type { ShopProduct } from "@/lib/shopCatalog";
|
||
|
||
type Pass = {
|
||
id: string;
|
||
name: string;
|
||
description: string;
|
||
features: string[];
|
||
price: number;
|
||
currency: "USD";
|
||
tier: "standard" | "elevated" | "handler" | "principal";
|
||
luxReward: number;
|
||
};
|
||
|
||
const PASSES: Pass[] = [
|
||
{
|
||
id: "pass_standard",
|
||
name: "Standard Pass",
|
||
description: "Base access — unlocks buyer profile, order vault, and forum post quota.",
|
||
features: ["Buyer account", "Full market access", "Order vault receipts", "Forum posting"],
|
||
price: 9.99,
|
||
currency: "USD",
|
||
tier: "standard",
|
||
luxReward: 100,
|
||
},
|
||
{
|
||
id: "pass_elevated",
|
||
name: "Elevated Pass",
|
||
description: "Enhanced access — priority queue on drops, barter board priority lane, and expanded vault quota.",
|
||
features: ["Everything in Standard", "Drop queue priority", "Barter priority lane", "2× LUX on orders", "Expanded vault keys"],
|
||
price: 29.99,
|
||
currency: "USD",
|
||
tier: "elevated",
|
||
luxReward: 350,
|
||
},
|
||
{
|
||
id: "pass_handler",
|
||
name: "Handler Pass",
|
||
description: "Vendor-level access — stall listing, exchange board elevated visibility, direct forum ring IV key.",
|
||
features: ["Everything in Elevated", "Vendor stall listing", "Exchange elevated visibility", "Ring IV forum key", "Inner Circle Handler tier"],
|
||
price: 74.99,
|
||
currency: "USD",
|
||
tier: "handler",
|
||
luxReward: 1000,
|
||
},
|
||
{
|
||
id: "pass_principal",
|
||
name: "Principal Pass",
|
||
description: "Maximum tier — all access surfaces unlocked, relay contact, and lore archive key.",
|
||
features: ["All access surfaces", "Operator relay contact", "Full lore archive key", "Inner Circle Principal", "Priority dispute resolution"],
|
||
price: 199.99,
|
||
currency: "USD",
|
||
tier: "principal",
|
||
luxReward: 3000,
|
||
},
|
||
];
|
||
|
||
const TIER_COLORS: Record<Pass["tier"], string> = {
|
||
standard: "from-gray-600 to-gray-500",
|
||
elevated: "from-cyan-700 to-blue-600",
|
||
handler: "from-purple-700 to-purple-500",
|
||
principal: "from-amber-600 to-yellow-500",
|
||
};
|
||
|
||
const TIER_BORDER: Record<Pass["tier"], string> = {
|
||
standard: "border-gray-600/40",
|
||
elevated: "border-cyan-600/40",
|
||
handler: "border-purple-600/40",
|
||
principal: "border-amber-500/40",
|
||
};
|
||
|
||
export default function DigitalPassesPage() {
|
||
const { addToCart } = useCart();
|
||
const [added, setAdded] = useState<string | null>(null);
|
||
|
||
const handleAdd = (pass: Pass) => {
|
||
const product: ShopProduct = {
|
||
id: pass.id,
|
||
name: pass.name,
|
||
description: pass.description,
|
||
price: pass.price,
|
||
currency: pass.currency,
|
||
category: "Access Pass",
|
||
sellerId: "cyberlux",
|
||
};
|
||
addToCart(product, 1);
|
||
setAdded(pass.id);
|
||
setTimeout(() => setAdded(null), 1800);
|
||
};
|
||
|
||
return (
|
||
<ThemedLayout theme="retro" title="Digital Access Passes">
|
||
<div className="mx-auto max-w-5xl px-4 pt-12 pb-20 font-mono">
|
||
<header className="border-b-4 border-[#0f0] pb-8 mb-12">
|
||
<div className="text-[10px] uppercase tracking-widest text-[#0f0]/60 mb-2">CyberLux Store</div>
|
||
<h1 className="text-4xl font-black uppercase tracking-tighter text-[#0f0]">Digital Access Passes</h1>
|
||
<p className="mt-4 text-sm text-[#0f0]/70 max-w-2xl">
|
||
One-time purchases that expand your CyberLux access tier and award permanent LUX credits. Passes are
|
||
virtual — payment via USD balance (funded by Bitcoin verify) or checkout. No physical delivery.
|
||
</p>
|
||
<div className="mt-4 flex flex-wrap gap-3">
|
||
<Link
|
||
href="/account/add-funds"
|
||
className="border border-[#0f0] px-4 py-2 text-xs font-bold uppercase text-[#0f0] hover:bg-[#0f0]/10 transition-all"
|
||
>
|
||
₿ Add Funds First
|
||
</Link>
|
||
<Link
|
||
href="/inner-circle"
|
||
className="border border-[#0f0]/40 px-4 py-2 text-xs font-bold uppercase text-[#0f0]/60 hover:border-[#0f0] hover:text-[#0f0] transition-all"
|
||
>
|
||
Inner Circle →
|
||
</Link>
|
||
</div>
|
||
</header>
|
||
|
||
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
|
||
{PASSES.map((pass) => {
|
||
const isAdded = added === pass.id;
|
||
return (
|
||
<div
|
||
key={pass.id}
|
||
className={`border-2 bg-black/40 p-8 transition-all hover:bg-[#0f0]/5 ${TIER_BORDER[pass.tier]}`}
|
||
>
|
||
<div className="mb-5 flex items-start justify-between gap-3">
|
||
<div>
|
||
<div
|
||
className={`mb-2 inline-block rounded bg-gradient-to-r ${TIER_COLORS[pass.tier]} px-3 py-1 text-[10px] font-black uppercase text-white`}
|
||
>
|
||
{pass.tier}
|
||
</div>
|
||
<h3 className="text-xl font-black uppercase text-[#0f0]">{pass.name}</h3>
|
||
</div>
|
||
<div className="text-right">
|
||
<div className="text-2xl font-black text-[#0f0]">${pass.price}</div>
|
||
<div className="text-[10px] text-[#0f0]/50">+{pass.luxReward} LUX</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p className="mb-5 text-sm text-[#0f0]/70 leading-relaxed">{pass.description}</p>
|
||
|
||
<ul className="mb-6 space-y-1.5">
|
||
{pass.features.map((f) => (
|
||
<li key={f} className="flex items-center gap-2 text-xs text-[#0f0]/80">
|
||
<span className="text-[#0f0]">{">"}</span>
|
||
{f}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={() => handleAdd(pass)}
|
||
className={`w-full py-3 font-black uppercase text-sm transition-all ${
|
||
isAdded
|
||
? "bg-[#0f0] text-black"
|
||
: "border-2 border-[#0f0] text-[#0f0] hover:bg-[#0f0] hover:text-black"
|
||
}`}
|
||
>
|
||
{isAdded ? "✓ Added to Cart" : `Add to Cart — $${pass.price}`}
|
||
</button>
|
||
<div className="mt-3 border border-[#0f0]/25 bg-black/60 p-3">
|
||
<p className="mb-2 text-[10px] font-bold uppercase text-[#0f0]/70">Or pay instantly (BTC-funded USD)</p>
|
||
<PayWithUsdBalanceButton
|
||
amountUsd={pass.price}
|
||
title={`Pass: ${pass.name}`}
|
||
description={`Tier ${pass.tier} · +${pass.luxReward} LUX`}
|
||
luxBonus={pass.luxReward}
|
||
size="sm"
|
||
className="w-full border-[#0f0]/40 !text-[#0f0]"
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
<div className="mt-12 border-4 border-[#0f0]/20 bg-[#001200] p-8 text-sm">
|
||
<h3 className="mb-4 font-black uppercase text-[#0f0]">How Passes Work</h3>
|
||
<ul className="space-y-2 text-[#0f0]/70 text-xs">
|
||
<li>{">"} Passes are digital items — checkout with USD balance (Bitcoin-funded) or other accepted payment.</li>
|
||
<li>{">"} On purchase, LUX credits are applied to your handle and tier is updated in the Inner Circle.</li>
|
||
<li>{">"} All state is client-side. Export your account bundle from /dashboard to back it up.</li>
|
||
<li>{">"} No refunds on digital passes once LUX has been applied to your account.</li>
|
||
</ul>
|
||
<div className="mt-6 flex gap-4">
|
||
<Link href="/checkout" className="text-xs text-[#0f0] hover:underline">Go to Checkout →</Link>
|
||
<Link href="/dashboard" className="text-xs text-[#0f0]/60 hover:text-[#0f0]">Your Dashboard</Link>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-8 text-center text-[10px] text-[#0f0]/30 uppercase tracking-widest">
|
||
CyberLux Digital Passes · Client-side entitlement system · Est. 2024
|
||
</div>
|
||
</div>
|
||
</ThemedLayout>
|
||
);
|
||
}
|