EdiFarcas/Giveaway-app
1
0
Fork 0
mirror of https://github.com/EdiFarcas/Giveaway-app.git synced 2026-06-22 07:00:57 +03:00
Code Issues Packages Projects Releases Wiki Activity

Visual update + Genereal Update were needed.

Browse Source
This commit is contained in:
EdiFarcas
2025-05-06 18:44:44 +03:00
parent de05090b85
commit e533cd2248
3 changed files with 130 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/layout.tsx
+29 -26
View File
@@ -1,5 +1,3 @@
// import type { Metadata } from "next";
// import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css"; import "./globals.css";
import AuthButtons from "@/components/AuthButtons"; import AuthButtons from "@/components/AuthButtons";
import { Providers } from "@/components/Providers"; import { Providers } from "@/components/Providers";
@@ -13,37 +11,42 @@ export const metadata = {
export default function RootLayout({ children }: { children: React.ReactNode }) { export default function RootLayout({ children }: { children: React.ReactNode }) {
return ( return (
<html lang="en"> <html lang="en">
<body className="p-4"> <body className="min-h-screen font-sans text-gray-800 bg-white">
<Providers> <Providers>
<header className="flex justify-between items-center mb-6"> {/* Black Top Navbar */}
<h1 className="text-2xl font-bold">Giveaway System</h1> <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"> {/* Navigation */}
<Link <nav className="flex items-center gap-4 text-sm sm:text-base">
href="/" <NavItem href="/">Home</NavItem>
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition" <NavItem href="/giveaways">Giveaways</NavItem>
> <NavItem href="/profile">Profile</NavItem>
Home <AuthButtons />
</Link> </nav>
<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 />
</div> </div>
</header> </header>
<main>{children}</main> {/* Page Content */}
<main className="px-4">{children}</main>
</Providers> </Providers>
</body> </body>
</html> </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>
);
}
src/app/page.tsx
+99 -86
View File
@@ -1,11 +1,16 @@
'use client';
import Image from "next/image"; import Image from "next/image";
import { useState } from "react";
export default function GiveawaySystem() { export default function GiveawaySystem() {
const [activeTab, setActiveTab] = useState("how");
return ( 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="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"> <div className="max-w-4xl mx-auto">
{/* Header */} {/* Header */}
<div className="text-center mb-16"> <div className="text-center mb-12">
<Image <Image
src="/images/logo-tcg-love.png" src="/images/logo-tcg-love.png"
alt="TCG Love Openings Logo" 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" 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"> <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"> <span className="bg-gradient-to-r from-pink-600 to-yellow-500 bg-clip-text text-transparent">
TCG Love Giveaway System TCG Love Giveaway System
</span> </span>
</h1> </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> </div>
{/* Coin System Section */} {/* Tabs */}
<div className="bg-white rounded-2xl shadow-lg p-6 mb-10 border-2 border-yellow-300"> <div className="flex justify-center mb-8 space-x-4">
<div className="flex items-center mb-4"> {["how", "lottery", "entries", "patreon"].map((tab) => (
<span className="text-3xl mr-3">🪙</span> <button
<h2 className="text-2xl font-bold text-pink-700">How Coins Work</h2> key={tab}
</div> onClick={() => setActiveTab(tab)}
<ul className="list-disc pl-6 space-y-3 text-gray-800"> className={`px-4 py-2 rounded-full font-semibold shadow transition ${
<li>Earn coins by: activeTab === tab
<ul className="list-circle pl-4 mt-1 space-y-1 text-sm text-gray-600"> ? "bg-pink-600 text-white"
<li> - Commenting on TCG Love Openings videos</li> : "bg-white text-pink-600 border border-pink-300"
</ul> }`}
</li> >
<li>Coins = your gateway to exclusive giveaways!</li> {tab === "how" && "🪙 How It Works"}
<li>More coins mean more chances to win — but with balance!</li> {tab === "lottery" && "🎲 Lottery"}
</ul> {tab === "entries" && "🎟️ Entry Scaling"}
{tab === "patreon" && "💖 Patreon Perks"}
</button>
))}
</div> </div>
{/* Lottery Multiplier */} {/* Tab Content */}
<div className="bg-white rounded-2xl shadow-xl p-6 mb-10 border-2 border-pink-300"> <div className="bg-white rounded-2xl shadow-xl p-6 border-2 border-yellow-300 transition-all duration-300">
<div className="flex items-center mb-4"> {activeTab === "how" && (
<span className="text-3xl mr-3">🎲</span> <div>
<h2 className="text-2xl font-bold text-purple-700">Weighted Lottery</h2> <h2 className="text-2xl font-bold text-yellow-700 mb-4">How It Works</h2>
</div> <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"> {activeTab === "lottery" && (
<div className="space-y-3"> <div>
{[{ range: "1–100", mult: "1x", color: "text-yellow-600" }, <h2 className="text-2xl font-bold text-purple-700 mb-4">Weighted Lottery</h2>
{ range: "101–200", mult: "0.5x", color: "text-green-600" }, <div className="space-y-3">
{ range: "201–300", mult: "0.25x", color: "text-blue-600" }, {[
{ range: "301+", mult: "0.1x", color: "text-red-500" }] { label: "First 100 coins", value: "1x", percent: 100, color: "bg-yellow-400" },
.map((tier) => ( { label: "Next 100 coins", value: "0.5x", percent: 50, color: "bg-green-400" },
<div key={tier.range} className="flex justify-between items-center p-3 bg-gradient-to-r from-gray-100 to-white rounded-lg shadow"> { label: "Next 100 coins", value: "0.25x", percent: 25, color: "bg-blue-400" },
<span className={tier.color}>{tier.range} coins</span> { label: "Coins beyond 300", value: "0.1x", percent: 10, color: "bg-red-400" },
<span className={`font-bold ${tier.color}`}>{tier.mult}</span> ].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> </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"> {activeTab === "entries" && (
450 coins = <br /> <div>
100×1 + 100×0.5 + 100×0.25 + 50×0.1 = <br /> <h2 className="text-2xl font-bold text-blue-700 mb-4">Entry Scaling & Burning</h2>
<span className="font-bold">180 tickets!</span> <br /> <p className="text-sm mb-4 text-gray-700">
<span className="font-bold">If you want to spend them in one giveaway.</span> Each giveaway has a base coin cost for one entry. As more entries are added, the cost increases:
</p> </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> )}
</div>
{/* Entry Requirements */} {activeTab === "patreon" && (
<div className="bg-white rounded-2xl shadow-lg p-6 mb-10 border-2 border-blue-200"> <div>
<div className="flex items-center mb-4"> <h2 className="text-2xl font-bold text-red-600 mb-4">Support Us on Patreon</h2>
<span className="text-3xl mr-3">🎟️</span> <p className="text-gray-800 mb-2">
<h2 className="text-2xl font-bold text-blue-700">Giveaway Entry Requirements</h2> Become a patron and receive coins automatically every month — no commenting required!
</div> </p>
<ul className="list-disc pl-5 text-sm text-gray-800 space-y-2">
<div className="overflow-x-auto"> <li>💎 Monthly coin drops based on your tier</li>
<table className="w-full text-sm text-left text-gray-600"> <li>🎟️ Access to patron-only giveaways</li>
<thead className="bg-blue-50 text-blue-900"> <li>🚀 Helps keep the pack openings flowing!</li>
<tr> </ul>
<th className="py-2 px-4">Prize Tier</th> <a
<th className="py-2 px-4">Min. Coins</th> href="https://patreon.com/TCG_Love?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=creatorshare_fan&utm_content=join_link"
<th className="py-2 px-4">Burn (Optional)</th> target="_blank"
</tr> rel="noopener noreferrer"
</thead> className="inline-block mt-4 px-4 py-2 rounded-full bg-pink-500 text-white font-semibold shadow hover:bg-pink-600 transition"
<tbody className="divide-y"> >
<tr> Join Patreon
<td className="py-3 px-4">$1–5 card</td> </a>
<td className="py-3 px-4 font-medium">500</td> </div>
<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>
</div> </div>
{/* Footer */} {/* Footer */}
<div className="mt-10 text-center text-sm text-gray-500"> <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> </div>
</div> </div>
src/components/AuthButtons.tsx
+2 -2
View File
@@ -11,7 +11,7 @@ export default function AuthButtons() {
{/* <p>Hi, {session.user?.name}!</p> */} {/* <p>Hi, {session.user?.name}!</p> */}
<button <button
onClick={() => {signOut()}} 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 Sign Out
</button> </button>
@@ -22,7 +22,7 @@ export default function AuthButtons() {
return ( return (
<button <button
onClick={() => signIn("google")} 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 Sign In with Google
</button> </button>