From 507a65cfdedb84283ef6b603843e348ccc1502b9 Mon Sep 17 00:00:00 2001
From: Guus <ghligtvoet@gmail.com>
Date: Wed, 30 Jul 2025 22:48:02 +0200
Subject: [PATCH] changed styling nominaties

---
 frontend/src/app/nominations/page.tsx | 64 +++++++++++++++------------
 1 file changed, 35 insertions(+), 29 deletions(-)

diff --git a/frontend/src/app/nominations/page.tsx b/frontend/src/app/nominations/page.tsx
index ba0143a..662810e 100644
--- a/frontend/src/app/nominations/page.tsx
+++ b/frontend/src/app/nominations/page.tsx
@@ -1,9 +1,9 @@
 "use client";
 import { useState } from "react";
-import { Vollkorn } from "next/font/google";
+import { Nunito } from "next/font/google";
 
-const vollkorn = Vollkorn({
-  weight: "600",
+const nunito = Nunito({
+  weight: "900",
   subsets: ["latin"],
 });
 
@@ -11,33 +11,39 @@ export default function Nominations() {
   const [songURL, setSongURL] = useState("");
 
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between bg-orange-200 p-24">
-      <h1 className={`${vollkorn.className} text text-[42px]`}>Nominaties</h1>
-
-      <form className="flex flex-col items-center justify-between">
-        <label className="w-lg mb-2 block text-sm font-bold text-gray-700">
-          Dump hier je Spotify-link:
-          <input
-            className="w-full appearance-none rounded border bg-red-50 px-3 py-2 text-gray-700 opacity-70 shadow focus:outline-none"
-            type="text"
-            placeholder="Spotify URL"
-            value={songURL}
-            onChange={(e) => setSongURL(e.target.value)}
-          />
-        </label>
-
-        <button
-          className="rounded bg-[#2f363c] px-4 py-2 font-bold text-white hover:bg-slate-700"
-          type="submit"
-          onClick={(e) => {
-            e.preventDefault();
-            console.log("Zojuist genomineerd:", songURL);
-          }}
-        >
-          Nomineer
-        </button>
-      </form>
+    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+      <h1
+        className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
+      >
+        NOMINATIES
+      </h1>
+      <div className="mb-12 flex flex-col items-center justify-between gap-4 rounded-md bg-blue-950/80 p-8">
+        <form className="flex flex-col items-center justify-center gap-4">
+          <p className="text-2xl font-semibold text-white drop-shadow-sm drop-shadow-gray-900">
+            Dump hier je Spotify-link:
+          </p>
+          <label className="block w-lg text-sm font-bold text-gray-700">
+            <input
+              className="w-full rounded border border-white px-4 py-2 font-bold text-white/70 focus:border-yellow-500 focus:outline-2 focus:outline-yellow-500"
+              type="text"
+              placeholder="Spotify URL"
+              value={songURL}
+              onChange={(e) => setSongURL(e.target.value)}
+            />
+          </label>
 
+          <button
+            className="w-full rounded bg-blue-500 px-4 py-2 text-center font-bold text-white hover:bg-blue-400"
+            type="submit"
+            onClick={(e) => {
+              e.preventDefault();
+              console.log("Zojuist genomineerd:", songURL);
+            }}
+          >
+            Nomineer
+          </button>
+        </form>
+      </div>
       <footer>
         <p>© 2020-2025 Hoestende Draken PartyCo</p>
       </footer>