eerste opzet nominatie pagina

frontend/src/app/nominations/page.tsx

@@ -1,7 +1,40 @@
+"use client";
+import { useState } from "react";
+
 export default function Nominations() {
+  const [songURL, setSongURL] = useState("");
+
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+    <main className="flex min-h-screen flex-col items-center justify-between p-24 bg-orange-200">
-      <h1>Nominaties</h1>
+      <h1 className="text-3xl font-bold">Nominaties</h1>
+
+      <form className="flex flex-col items-center justify-between">
+        <label className="block w-lg text-gray-700 text-sm font-bold mb-2">
+          Dump hier je Spotify-link:
+          <input
+            className="appearance-none shadow border rounded w-full py-2 px-3 text-gray-700 focus:outline-none bg-red-50 opacity-70"
+            type="text"
+            placeholder="Spotify URL"
+            value={songURL}
+            onChange={(e) => setSongURL(e.target.value)}
+          />
+        </label>
+
+        <button
+          className="bg-[#2f363c] hover:bg-slate-700 text-white font-bold py-2 px-4 rounded "
+          type="submit"
+          onClick={(e) => {
+            e.preventDefault();
+            console.log("Zojuist genomineerd:", songURL);
+          }}
+        >
+          Nomineer
+        </button>
+      </form>
+
+      <footer>
+        <p>© 2020-2025 Hoestende Draken PartyCo</p>
+      </footer>
     </main>
   );
 }