Update homepage, giveaway creation and view update.

src/app/admin/AdminClient.tsx

@@ -8,7 +8,15 @@ interface AdminClientProps {
 }
 
 export default function AdminClient({ email }: AdminClientProps) {
-    const [giveaway, setGiveaway] = useState({ title: "", description: "", value: 0, prize: "", duration: 0,  endsAt: 0 });
+    const [giveaway, setGiveaway] = useState({ 
+        title: "", 
+        description: "", 
+        value: 0, 
+        prize: "", 
+        entryCost: 70000000, 
+        duration: 0,  
+        endsAt: new Date(Date.now() + 24 * 60 * 60 * 1000).getTime() // Set to tomorrow
+    });
     const [youtube_url, setYoutubeUrl] = useState("");
     const [coin_value, setCoinValue] = useState(0);
 
@@ -20,7 +28,8 @@ export default function AdminClient({ email }: AdminClientProps) {
         });
         if (response.ok) {
             alert("Giveaway created successfully!");
-            setGiveaway({ title: "", description: "", value: 0, prize: "", duration: 0,  endsAt: 0 }); // Reset form
+            
+            setGiveaway({ title: "", description: "", value: 0, prize: "", entryCost: 70000000, duration: 0,  endsAt: new Date(Date.now() + 24 * 60 * 60 * 1000).getTime() }); // Reset form
         } else {
             const error = await response.json();
             alert(`Failed to create giveaway: ${error.error}`);
@@ -58,7 +67,7 @@ export default function AdminClient({ email }: AdminClientProps) {
                 />
                 <input
                     type="number"
-                    placeholder="Value in Dollars"
+                    placeholder="Value in Coins"
                     value={giveaway.value || ""}
                     onChange={(e) => setGiveaway({ ...giveaway, value: Number(e.target.value) })}
                     className="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200"

src/app/admin/AdminServer.tsx

@@ -79,7 +79,7 @@ const handleUpdateCoins = async (youtubeUrl: string, coinValue: number) => {
                     // Continue with the next author
                 }
             }
-        },{timeout: 60000}); // Set a timeout of 60 seconds for the transaction
+        },{timeout: 60000}); // Set a timeout of 60 seconds for the transaction (Modify as needed)
 
         console.log("Coins updated successfully for all authors.");
         

src/app/api/admin/create-giveaway/route.ts

@@ -3,7 +3,7 @@ import { db } from "@/lib/db";
 
 export async function POST(req: Request) {
     const body = await req.json();
-    const { title, description, value, prize, duration,  endsAt } = body;
+    const { title, description, value, prize, duration, endsAt } = body;
 
     if (!title || !description || !prize || !value) {
         return NextResponse.json({ error: "Missing required fields" }, { status: 400 });
@@ -16,6 +16,7 @@ export async function POST(req: Request) {
                 description,
                 prize,
                 value,
+                entryCost: value * 0.1,
                 duration,
                 endsAt: new Date(endsAt),
             },

src/app/api/admin/update-coins/route.ts

@@ -1,21 +0,0 @@
-import { NextResponse } from "next/server";
-import { db } from "@/lib/db";
-
-export async function POST(req: Request) {
-    const body = await req.json();
-    const { userId, coins } = body;
-
-    if (!userId || coins === undefined) {
-        return NextResponse.json({ error: "Missing required fields" }, { status: 400 });
-    }
-
-    try {
-        const user = await db.user.update({
-            where: { id: userId },
-            data: { coins },
-        });
-        return NextResponse.json(user);
-    } catch {
-        return NextResponse.json({ error: "Failed to update user coins" }, { status: 500 });
-    }
-}

src/app/giveaways/page.tsx

@@ -18,23 +18,41 @@ export default async function GiveawaysPage() {
       title: true,
       description: true,
       prize: true,
+      endsAt: true,
     },
   });
 
   return (
     <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
       <div className="max-w-7xl mx-auto">
-        <h1 className="text-3xl font-bold text-gray-800 mb-8">Active Giveaways</h1>
-        <div className="text-black grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-          {giveaways.map((giveaway) => (
+      <h1 className="text-3xl font-bold text-gray-800 mb-8">Active Giveaways</h1>
+      <div className="text-black grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        {giveaways.map((giveaway) => {
+          const remainingTime = Math.max(
+            0,
+            new Date(giveaway.endsAt ?? 0).getTime() - Date.now()
+          );
+          
+          const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
+
+          const hours = Math.floor(
+            (remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+          );
+
+          const minutes = Math.floor(
+            (remainingTime % (1000 * 60 * 60)) / (1000 * 60)
+          );
+
+          return (
             <GiveawayCard
               key={giveaway.id}
               title={giveaway.title}
-              description={giveaway.description}
+              description={`${giveaway.description} - Ends in: ${days}d ${hours}h ${minutes}m`}
               imageUrl={giveaway.prize} // Assuming prize is a URL to an image
             />
-          ))}
-        </div>
+          );
+        })}
+      </div>
       </div>
     </div>
   );

src/app/page.tsx

@@ -2,120 +2,121 @@ import Image from "next/image";
 
 export default function GiveawaySystem() {
   return (
-    <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8 font-[family-name:var(--font-geist-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">
         {/* Header */}
         <div className="text-center mb-16">
-          <h1 className="text-4xl sm:text-5xl font-bold mb-4 bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
-            🎁 Community Giveaway System
+          <Image
+            src="/logo-tcg-love.png"
+            alt="TCG Love Openings Logo"
+            width={120}
+            height={120}
+            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 bg-gradient-to-r from-pink-600 to-yellow-500 bg-clip-text text-transparent drop-shadow">
+            🎁 TCG Love Giveaway System
           </h1>
-          <p className="text-lg text-gray-600">Revamped engagement-powered rewards system</p>
+          <p className="text-lg text-gray-700">Join the fun — earn coins, win cool cards!</p>
         </div>
 
         {/* Coin System Section */}
-        <div className="bg-white rounded-xl shadow-lg p-6 mb-8">
+        <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">Coin System Overview</h2>
+            <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-700">
-            <li>Earn coins by commenting on videos and other engagement</li>
-            <li>Coins serve dual purpose:
-              <ul className="list-circle pl-4 mt-2 space-y-2">
-                <li>Eligibility requirement for giveaways</li>
-                <li>Weighted entries (1 coin = 1 ticket, with diminishing returns)</li>
+          <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>
+                <li>Liking and subscribing</li>
+                <li>Engaging with the community</li>
               </ul>
             </li>
+            <li>Coins = your gateway to exclusive giveaways!</li>
+            <li>More coins mean more chances to win — but with balance!</li>
           </ul>
         </div>
 
-        {/* Weighted Lottery Section */}
-        <div className="bg-white rounded-xl shadow-lg p-6 mb-8">
+        {/* 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">Weighted Lottery System</h2>
+            <span className="text-3xl mr-3">🎲</span>
+            <h2 className="text-2xl font-bold text-purple-700">Weighted Lottery</h2>
           </div>
-          
+
           <div className="grid md:grid-cols-2 gap-6">
-            <div className="space-y-4">
-              <div className="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
-                <span>1–100 coins</span>
-                <span className="font-bold text-purple-600">1x multiplier</span>
-              </div>
-              <div className="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
-                <span>101–200 coins</span>
-                <span className="font-bold text-blue-600">0.5x multiplier</span>
-              </div>
-              <div className="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
-                <span>201–300 coins</span>
-                <span className="font-bold text-green-600">0.25x multiplier</span>
-              </div>
-              <div className="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
-                <span>301+ coins</span>
-                <span className="font-bold text-red-600">0.1x multiplier</span>
-              </div>
+            <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>{tier.range} coins</span>
+                    <span className={`font-bold ${tier.color}`}>{tier.mult}</span>
+                  </div>
+              ))}
             </div>
-            
-            <div className="bg-purple-50 p-4 rounded-lg">
-              <h3 className="font-semibold mb-2">Example Calculation</h3>
-              <p className="text-sm text-gray-600">
-                User with 450 coins:<br />
-                100 × 1 + 100 × 0.5 + 100 × 0.25 + 50 × 0.1 =<br />
-                <span className="font-bold">100 + 50 + 25 + 5 = 180 tickets</span>
+            <div className="bg-purple-50 p-4 rounded-lg border border-purple-200 shadow-sm">
+              <h3 className="font-semibold mb-2">🎯 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>
               </p>
             </div>
           </div>
         </div>
 
         {/* Entry Requirements */}
-        <div className="bg-white rounded-xl shadow-lg p-6">
+        <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">Entry Requirements</h2>
+            <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">
-              <thead className="bg-gray-50">
+            <table className="w-full text-sm text-left text-gray-600">
+              <thead className="bg-blue-50 text-blue-900">
                 <tr>
-                  <th className="text-left py-3 px-4">Giveaway Value</th>
-                  <th className="text-left py-3 px-4">Minimum Coins</th>
-                  <th className="text-left py-3 px-4">Coins Burned</th>
+                  <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>
-                <tr className="border-b">
-                  <td className="py-3 px-4">$1–5</td>
+              <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 text-gray-500">None</td>
-                </tr>
-                <tr className="border-b">
-                  <td className="py-3 px-4">$10–25</td>
-                  <td className="py-3 px-4 font-medium">1,000</td>
-                  <td className="py-3 px-4 text-gray-500">None</td>
+                  <td className="py-3 px-4">None</td>
                 </tr>
                 <tr>
-                  <td className="py-3 px-4">$50+</td>
+                  <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-gray-500">Optional (e.g., 50 coins)</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-50 rounded-lg">
+          <div className="mt-6 p-4 bg-blue-100 rounded-lg">
             <p className="text-sm text-blue-800">
-              💡 Note: Coins are not spent to enter - minimum balance acts as eligibility requirement.
-              Optional burns for higher tiers provide bonus entry weight.
+              📌 You keep your coins — they arent spent to enter! But optional burns can boost your odds.
             </p>
           </div>
         </div>
 
-        {/* Disclaimer */}
-        <div className="mt-8 text-center text-sm text-gray-500">
-          <p>System subject to change. See full rules for complete details.</p>
+        {/* Footer */}
+        <div className="mt-10 text-center text-sm text-gray-500">
+          <p>⚠️ Subject to change. See full rules in description or Discord.</p>
         </div>
       </div>
     </div>
   );
-}
+}

src/components/GiveawayCard.tsx

@@ -9,7 +9,7 @@ interface GiveawayCardProps {
 const GiveawayCard: React.FC<GiveawayCardProps> = ({ title, description, imageUrl }) => {
     return (
         <div className="bg-white shadow-md rounded-lg overflow-hidden">
-            <img src={imageUrl} alt={title} className="w-full h-48 object-cover" />
+            {/* <img src={imageUrl} alt={title} className="w-full h-48 object-cover" /> */}
             <div className="p-4">
                 <h3 className="text-lg font-bold mb-2">{title}</h3>
                 <p className="text-gray-600 text-sm">{description}</p>