mirror of
https://github.com/EdiFarcas/Giveaway-app.git
synced 2026-06-22 05:00:55 +03:00
Visual update + Genereal Update were needed.
This commit is contained in:
EdiFarcas
+29
-26
@@ -1,5 +1,3 @@
|
||||
// import type { Metadata } from "next";
|
||||
// import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import AuthButtons from "@/components/AuthButtons";
|
||||
import { Providers } from "@/components/Providers";
|
||||
@@ -13,37 +11,42 @@ export const metadata = {
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className="p-4">
|
||||
<body className="min-h-screen font-sans text-gray-800 bg-white">
|
||||
<Providers>
|
||||
<header className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-2xl font-bold">Giveaway System</h1>
|
||||
{/* Black Top Navbar */}
|
||||
<header className="w-full bg-black text-white rounded-b-2xl px-6 py-4 shadow-md">
|
||||
<div className="max-w-7xl mx-auto flex justify-between items-center">
|
||||
{/* Logo / Title */}
|
||||
<Link href="/" className="text-2xl font-extrabold tracking-tight text-white">
|
||||
TCG Love - Giveaway Page
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
<Link
|
||||
href="/giveaways"
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
|
||||
>
|
||||
Giveaways
|
||||
</Link>
|
||||
<Link
|
||||
href="/profile"
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
|
||||
>
|
||||
Profile
|
||||
</Link>
|
||||
<AuthButtons />
|
||||
{/* Navigation */}
|
||||
<nav className="flex items-center gap-4 text-sm sm:text-base">
|
||||
<NavItem href="/">Home</NavItem>
|
||||
<NavItem href="/giveaways">Giveaways</NavItem>
|
||||
<NavItem href="/profile">Profile</NavItem>
|
||||
<AuthButtons />
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>{children}</main>
|
||||
{/* Page Content */}
|
||||
<main className="px-4">{children}</main>
|
||||
</Providers>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
// Reusable nav item component with hover effect
|
||||
function NavItem({ href, children }: { href: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
className="text-white px-3 py-2 rounded-md hover:bg-white/10 hover:text-yellow-300 transition"
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
+99
-86
@@ -1,11 +1,16 @@
|
||||
'use client';
|
||||
|
||||
import Image from "next/image";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function GiveawaySystem() {
|
||||
const [activeTab, setActiveTab] = useState("how");
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-yellow-100 to-pink-200 py-12 px-4 sm:px-6 lg:px-8 font-sans">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-16">
|
||||
<div className="text-center mb-12">
|
||||
<Image
|
||||
src="/images/logo-tcg-love.png"
|
||||
alt="TCG Love Openings Logo"
|
||||
@@ -14,110 +19,118 @@ export default function GiveawaySystem() {
|
||||
className="mx-auto mb-4 rounded-full border-4 border-pink-400 shadow-lg"
|
||||
/>
|
||||
<h1 className="text-4xl sm:text-5xl font-bold mb-2 drop-shadow">
|
||||
🎁
|
||||
{" "}
|
||||
🎁{" "}
|
||||
<span className="bg-gradient-to-r from-pink-600 to-yellow-500 bg-clip-text text-transparent">
|
||||
TCG Love Giveaway System
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-lg text-gray-700">Join the fun — earn coins, win cool cards!</p>
|
||||
<p className="text-lg text-gray-700">Comment. Collect Coins. Win MTG Cards!</p>
|
||||
</div>
|
||||
|
||||
{/* Coin System Section */}
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6 mb-10 border-2 border-yellow-300">
|
||||
<div className="flex items-center mb-4">
|
||||
<span className="text-3xl mr-3">🪙</span>
|
||||
<h2 className="text-2xl font-bold text-pink-700">How Coins Work</h2>
|
||||
</div>
|
||||
<ul className="list-disc pl-6 space-y-3 text-gray-800">
|
||||
<li>Earn coins by:
|
||||
<ul className="list-circle pl-4 mt-1 space-y-1 text-sm text-gray-600">
|
||||
<li> - Commenting on TCG Love Openings videos</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Coins = your gateway to exclusive giveaways!</li>
|
||||
<li>More coins mean more chances to win — but with balance!</li>
|
||||
</ul>
|
||||
{/* Tabs */}
|
||||
<div className="flex justify-center mb-8 space-x-4">
|
||||
{["how", "lottery", "entries", "patreon"].map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
onClick={() => setActiveTab(tab)}
|
||||
className={`px-4 py-2 rounded-full font-semibold shadow transition ${
|
||||
activeTab === tab
|
||||
? "bg-pink-600 text-white"
|
||||
: "bg-white text-pink-600 border border-pink-300"
|
||||
}`}
|
||||
>
|
||||
{tab === "how" && "🪙 How It Works"}
|
||||
{tab === "lottery" && "🎲 Lottery"}
|
||||
{tab === "entries" && "🎟️ Entry Scaling"}
|
||||
{tab === "patreon" && "💖 Patreon Perks"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Lottery Multiplier */}
|
||||
<div className="bg-white rounded-2xl shadow-xl p-6 mb-10 border-2 border-pink-300">
|
||||
<div className="flex items-center mb-4">
|
||||
<span className="text-3xl mr-3">🎲</span>
|
||||
<h2 className="text-2xl font-bold text-purple-700">Weighted Lottery</h2>
|
||||
</div>
|
||||
{/* Tab Content */}
|
||||
<div className="bg-white rounded-2xl shadow-xl p-6 border-2 border-yellow-300 transition-all duration-300">
|
||||
{activeTab === "how" && (
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-yellow-700 mb-4">How It Works</h2>
|
||||
<ol className="list-decimal pl-6 space-y-3 text-gray-800">
|
||||
<li>💬 Comment on any TCG Love video to earn its coin value.</li>
|
||||
<li>🎁 Use coins to join giveaways (10% of prize value = 1 entry).</li>
|
||||
<li>📈 Entry costs increase after 50, 100, 150 entries.</li>
|
||||
<li>🔥 Some high-value giveaways require you to burn coins.</li>
|
||||
</ol>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="space-y-3">
|
||||
{[{ range: "1–100", mult: "1x", color: "text-yellow-600" },
|
||||
{ range: "101–200", mult: "0.5x", color: "text-green-600" },
|
||||
{ range: "201–300", mult: "0.25x", color: "text-blue-600" },
|
||||
{ range: "301+", mult: "0.1x", color: "text-red-500" }]
|
||||
.map((tier) => (
|
||||
<div key={tier.range} className="flex justify-between items-center p-3 bg-gradient-to-r from-gray-100 to-white rounded-lg shadow">
|
||||
<span className={tier.color}>{tier.range} coins</span>
|
||||
<span className={`font-bold ${tier.color}`}>{tier.mult}</span>
|
||||
{activeTab === "lottery" && (
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-purple-700 mb-4">Weighted Lottery</h2>
|
||||
<div className="space-y-3">
|
||||
{[
|
||||
{ label: "First 100 coins", value: "1x", percent: 100, color: "bg-yellow-400" },
|
||||
{ label: "Next 100 coins", value: "0.5x", percent: 50, color: "bg-green-400" },
|
||||
{ label: "Next 100 coins", value: "0.25x", percent: 25, color: "bg-blue-400" },
|
||||
{ label: "Coins beyond 300", value: "0.1x", percent: 10, color: "bg-red-400" },
|
||||
].map((tier, i) => (
|
||||
<div key={i} className="space-y-1">
|
||||
<div className="flex justify-between font-medium text-sm text-gray-700">
|
||||
<span>{tier.label}</span>
|
||||
<span>{tier.value}</span>
|
||||
</div>
|
||||
<div className="w-full h-3 rounded-full bg-gray-200 overflow-hidden">
|
||||
<div
|
||||
className={`${tier.color} h-full`}
|
||||
style={{ width: `${tier.percent}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-purple-50 p-4 rounded-lg border border-purple-200 shadow-sm">
|
||||
<h3 className="font-semibold mb-2 text-black">🎯 Example</h3>
|
||||
<p className="text-sm text-gray-700">
|
||||
450 coins = <br />
|
||||
100×1 + 100×0.5 + 100×0.25 + 50×0.1 = <br />
|
||||
<span className="font-bold">180 tickets!</span> <br />
|
||||
<span className="font-bold">If you want to spend them in one giveaway.</span>
|
||||
)}
|
||||
|
||||
{activeTab === "entries" && (
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-blue-700 mb-4">Entry Scaling & Burning</h2>
|
||||
<p className="text-sm mb-4 text-gray-700">
|
||||
Each giveaway has a base coin cost for one entry. As more entries are added, the cost increases:
|
||||
</p>
|
||||
<ul className="list-disc pl-5 text-sm text-gray-800 space-y-2">
|
||||
<li>🔹 First 50 entries: 10% of prize value</li>
|
||||
<li>🔸 51–100 entries: 15%</li>
|
||||
<li>🔥 100+ entries: 20% + potential coin burn for top-tier cards</li>
|
||||
</ul>
|
||||
<div className="mt-4 bg-blue-100 p-4 rounded-lg text-blue-800 text-sm">
|
||||
💡 Some $50+ giveaways will ask you to burn coins (e.g., +50 coins per extra entry).
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Entry Requirements */}
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6 mb-10 border-2 border-blue-200">
|
||||
<div className="flex items-center mb-4">
|
||||
<span className="text-3xl mr-3">🎟️</span>
|
||||
<h2 className="text-2xl font-bold text-blue-700">Giveaway Entry Requirements</h2>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm text-left text-gray-600">
|
||||
<thead className="bg-blue-50 text-blue-900">
|
||||
<tr>
|
||||
<th className="py-2 px-4">Prize Tier</th>
|
||||
<th className="py-2 px-4">Min. Coins</th>
|
||||
<th className="py-2 px-4">Burn (Optional)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y">
|
||||
<tr>
|
||||
<td className="py-3 px-4">$1–5 card</td>
|
||||
<td className="py-3 px-4 font-medium">500</td>
|
||||
<td className="py-3 px-4">None</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-3 px-4">$10–25 card</td>
|
||||
<td className="py-3 px-4 font-medium">1,000</td>
|
||||
<td className="py-3 px-4">None</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-3 px-4">$50+ special set</td>
|
||||
<td className="py-3 px-4 font-medium">2,000+</td>
|
||||
<td className="py-3 px-4 text-red-500">+50 for extra entries</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 p-4 bg-blue-100 rounded-lg">
|
||||
<p className="text-sm text-blue-800">
|
||||
📌 You keep your coins — they arent spent to enter! But optional burns can boost your odds.
|
||||
</p>
|
||||
</div>
|
||||
{activeTab === "patreon" && (
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-red-600 mb-4">Support Us on Patreon</h2>
|
||||
<p className="text-gray-800 mb-2">
|
||||
Become a patron and receive coins automatically every month — no commenting required!
|
||||
</p>
|
||||
<ul className="list-disc pl-5 text-sm text-gray-800 space-y-2">
|
||||
<li>💎 Monthly coin drops based on your tier</li>
|
||||
<li>🎟️ Access to patron-only giveaways</li>
|
||||
<li>🚀 Helps keep the pack openings flowing!</li>
|
||||
</ul>
|
||||
<a
|
||||
href="https://patreon.com/TCG_Love?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=creatorshare_fan&utm_content=join_link"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-block mt-4 px-4 py-2 rounded-full bg-pink-500 text-white font-semibold shadow hover:bg-pink-600 transition"
|
||||
>
|
||||
Join Patreon
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="mt-10 text-center text-sm text-gray-500">
|
||||
<p>⚠️ Subject to change. See full rules in description or Discord.</p>
|
||||
<p>⚠️ This system is evolving — always check our Discord or YouTube for updates.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -11,7 +11,7 @@ export default function AuthButtons() {
|
||||
{/* <p>Hi, {session.user?.name}!</p> */}
|
||||
<button
|
||||
onClick={() => {signOut()}}
|
||||
className="bg-red-500 text-white px-4 py-2 rounded"
|
||||
className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 transition"
|
||||
>
|
||||
Sign Out
|
||||
</button>
|
||||
@@ -22,7 +22,7 @@ export default function AuthButtons() {
|
||||
return (
|
||||
<button
|
||||
onClick={() => signIn("google")}
|
||||
className="bg-blue-500 text-white px-4 py-2 rounded"
|
||||
className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition"
|
||||
>
|
||||
Sign In with Google
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user