60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
const promotions = [
|
|
{
|
|
id: 1,
|
|
title: "Welcome Bonus",
|
|
description: "Get 100% up to 500 ETB on your first deposit",
|
|
badge: "NEW",
|
|
color: "from-primary/20 to-primary/5",
|
|
icon: "🎁",
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Accumulator Boost",
|
|
description: "Get up to 50% extra winnings on accumulators of 5+ selections",
|
|
badge: "POPULAR",
|
|
color: "from-yellow-500/20 to-yellow-500/5",
|
|
icon: "⚡",
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Live Bet Cashback",
|
|
description: "5% cashback on all losing live bets, credited every Monday",
|
|
badge: "",
|
|
color: "from-blue-500/20 to-blue-500/5",
|
|
icon: "🔄",
|
|
},
|
|
]
|
|
|
|
export default function PromotionsPage() {
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="border-b border-border pb-2">
|
|
<h1 className="text-sm font-black uppercase tracking-wide text-foreground">Promotions</h1>
|
|
</div>
|
|
<div className="grid gap-3">
|
|
{promotions.map((promo) => (
|
|
<div
|
|
key={promo.id}
|
|
className={`bg-gradient-to-r ${promo.color} border border-border rounded-lg p-4 flex items-center gap-4`}
|
|
>
|
|
<div className="text-4xl">{promo.icon}</div>
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<h3 className="font-bold text-sm text-foreground">{promo.title}</h3>
|
|
{promo.badge && (
|
|
<span className="bg-primary text-primary-foreground text-[10px] font-bold px-1.5 py-0.5 rounded">
|
|
{promo.badge}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-[11px] text-muted-foreground">{promo.description}</p>
|
|
</div>
|
|
<button className="shrink-0 bg-primary text-primary-foreground text-[11px] font-bold px-4 py-2 rounded hover:opacity-90 transition-opacity uppercase">
|
|
Claim
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
} |