153 lines
6.9 KiB
TypeScript
153 lines
6.9 KiB
TypeScript
'use client';
|
|
|
|
import Link from "next/link";
|
|
import Header from "./components/Header";
|
|
import { useAuth } from "./context/AuthContext";
|
|
|
|
export default function Home() {
|
|
const { user } = useAuth();
|
|
|
|
return (
|
|
<>
|
|
<Header />
|
|
<div className="min-h-screen bg-gradient-to-b from-background to-background/95 pt-16">
|
|
{/* Hero Section */}
|
|
<section className="relative min-h-[calc(100vh-4rem)] flex items-center justify-center px-4 sm:px-6 lg:px-8">
|
|
<div className="absolute inset-0 bg-[url('/hero-bg.jpg')] bg-cover bg-center opacity-10" />
|
|
<div className="relative z-10 text-center max-w-4xl mx-auto">
|
|
<h1 className="text-4xl sm:text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
|
|
{user ? 'Welcome Back!' : 'Discover Amazing Prizes'}
|
|
</h1>
|
|
<p className="text-lg sm:text-xl mb-8 text-foreground/80">
|
|
{user
|
|
? 'Ready to open some mystery boxes? Browse our collection and start your adventure!'
|
|
: 'Unlock exclusive mystery boxes and win incredible prizes. Trade, collect, and experience the thrill of discovery.'}
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
{user ? (
|
|
<Link
|
|
href="/boxes"
|
|
className="px-8 py-3 rounded-full bg-gradient-to-r from-purple-600 to-pink-600 text-white font-semibold hover:opacity-90 transition-opacity"
|
|
>
|
|
Open Boxes
|
|
</Link>
|
|
) : (
|
|
<>
|
|
<Link
|
|
href="/auth/signup"
|
|
className="px-8 py-3 rounded-full bg-gradient-to-r from-purple-600 to-pink-600 text-white font-semibold hover:opacity-90 transition-opacity"
|
|
>
|
|
Get Started
|
|
</Link>
|
|
<Link
|
|
href="/boxes"
|
|
className="px-8 py-3 rounded-full border border-foreground/20 hover:bg-foreground/5 transition-colors"
|
|
>
|
|
View Boxes
|
|
</Link>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Featured Boxes Section */}
|
|
<section className="py-20 px-4 sm:px-6 lg:px-8">
|
|
<div className="max-w-7xl mx-auto">
|
|
<h2 className="text-3xl font-bold text-center mb-12">Featured Mystery Boxes</h2>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{[
|
|
{ tier: "Small", price: "100", color: "from-blue-500 to-blue-600" },
|
|
{ tier: "Medium", price: "1,000", color: "from-purple-500 to-purple-600" },
|
|
{ tier: "Big", price: "10,000", color: "from-pink-500 to-pink-600" },
|
|
].map((box) => (
|
|
<div
|
|
key={box.tier}
|
|
className="relative group rounded-2xl overflow-hidden bg-gradient-to-br p-[1px] hover:scale-105 transition-transform"
|
|
>
|
|
<div className={`absolute inset-0 bg-gradient-to-br ${box.color} opacity-20`} />
|
|
<div className="relative bg-background/95 p-6 rounded-2xl">
|
|
<h3 className="text-2xl font-bold mb-2">{box.tier} Box</h3>
|
|
<p className="text-foreground/60 mb-4">Unlock amazing prizes</p>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-lg font-semibold">{box.price} Tokens</span>
|
|
<button className="px-4 py-2 rounded-full bg-gradient-to-r from-purple-600 to-pink-600 text-white text-sm font-medium hover:opacity-90 transition-opacity">
|
|
Open Box
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* How It Works Section */}
|
|
<section className="py-20 px-4 sm:px-6 lg:px-8 bg-foreground/[0.02]">
|
|
<div className="max-w-7xl mx-auto">
|
|
<h2 className="text-3xl font-bold text-center mb-12">How It Works</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{[
|
|
{
|
|
title: "Get Tokens",
|
|
description: "Purchase tokens using various payment methods including cards and crypto",
|
|
icon: "💳",
|
|
},
|
|
{
|
|
title: "Open Boxes",
|
|
description: "Choose your mystery box tier and experience the thrill of discovery",
|
|
icon: "🎁",
|
|
},
|
|
{
|
|
title: "Trade & Collect",
|
|
description: "Trade your prizes with other users or add them to your collection",
|
|
icon: "🔄",
|
|
},
|
|
].map((step) => (
|
|
<div key={step.title} className="text-center p-6 rounded-xl bg-background/50">
|
|
<div className="text-4xl mb-4">{step.icon}</div>
|
|
<h3 className="text-xl font-semibold mb-2">{step.title}</h3>
|
|
<p className="text-foreground/60">{step.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Recent Wins Section */}
|
|
<section className="py-20 px-4 sm:px-6 lg:px-8">
|
|
<div className="max-w-7xl mx-auto">
|
|
<h2 className="text-3xl font-bold text-center mb-12">Recent Wins</h2>
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<div key={i} className="aspect-square rounded-xl bg-foreground/[0.02] p-4 flex items-center justify-center">
|
|
<div className="text-center">
|
|
<div className="text-2xl mb-2">🎉</div>
|
|
<p className="text-sm text-foreground/60">Amazing Prize #{i}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-purple-600/10 to-pink-600/10">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
<h2 className="text-3xl font-bold mb-6">Ready to Start Your Journey?</h2>
|
|
<p className="text-lg text-foreground/80 mb-8">
|
|
Join thousands of users already discovering amazing prizes in our mystery boxes.
|
|
</p>
|
|
<Link
|
|
href="/auth/signup"
|
|
className="inline-block px-8 py-3 rounded-full bg-gradient-to-r from-purple-600 to-pink-600 text-white font-semibold hover:opacity-90 transition-opacity"
|
|
>
|
|
Create Account
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|