upgrade all dependencies to their latest versions

.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": ["next/core-web-vitals", "next/typescript"]
-}

eslint.config.mjs

@@ -0,0 +1,11 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  globalIgnores([".next/**", "out/**", "build/**", "next-env.d.ts"]),
+]);
+
+export default eslintConfig;

package.json

@@ -6,21 +6,25 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start -p 7000",
-    "lint": "next lint"
+    "lint": "eslint ."
   },
   "dependencies": {
-    "next": "^16.3.3",
+    "next": "^16.4.3",
-    "react": "^19.0.0",
+    "react": "^19.3.1",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.3.1"
   },
   "devDependencies": {
-    "@types/node": "^20",
+    "@tailwindcss/postcss": "^4.3.3",
-    "@types/react": "^19.2.18",
+    "@types/node": "^26",
-    "@types/react-dom": "^19.2.5",
+    "@types/react": "^19.3.0",
-    "eslint": "^9.39.2",
+    "@types/react-dom": "^19.3.0",
-    "eslint-config-next": "^16.3.3",
+    "eslint": "^10.14.0",
-    "postcss": "^8",
+    "eslint-config-next": "^16.4.3",
-    "tailwindcss": "^3.4.1",
+    "postcss": "^8.5.32",
-    "typescript": "^5"
+    "tailwindcss": "^4.3.3",
+    "typescript": "~6.0.3"
+  },
+  "overrides": {
+    "minimatch": "^11.0.3"
   }
 }

postcss.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
   },
 };
 

src/app/components/EventCard.tsx

@@ -159,7 +159,7 @@ const EventCard: React.FC<EventCardProps> = ({
         ))}
         <hr className="border-2 border-primary"></hr>
         {nextSpecialEvent && (nextSpecialEvent.ongoing || nextSpecialEvent.timeDiffMs! > 0) && (
-          <div className="flex flex-1 flex-row bg-gradient-to-r from-purple-500 to-overlay rounded-lg p-3 justify-between space border-2 border-primary animate-pulse">
+          <div className="flex flex-1 flex-row bg-linear-to-r from-purple-500 to-overlay rounded-lg p-3 justify-between space border-2 border-primary animate-pulse">
             <div className="flex flex-row gap-3">
               <p className="parabold">Special Event</p>
               <p className="">{nextSpecialEvent?.name}</p>

src/app/globals.css

@@ -1,41 +1,67 @@
-@tailwind base;
+@import 'tailwindcss';
-@tailwind components;
-@tailwind utilities;
 
-:root {
+@theme inline {
-  --background: #141218;
+  --color-background: var(--background);
-  --foreground: #261F31;
+  --color-foreground: var(--foreground);
-  --primary: #392e49;
+  --color-primary: var(--primary);
-  --headers: #D64097;
+  --color-headers: var(--headers);
-  --overlay: #4A3B61;
+  --color-overlay: var(--overlay);
 }
 
-@media (prefers-color-scheme: dark) {
+/*
-  :root {
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
-    --background: #141218;
+  so we've added these compatibility styles to make sure everything still
-    --foreground: #261F31;
+  looks the same as it did with Tailwind CSS v3.
-    --primary: #392e49;
+
-    --headers: #D64097;
+  If we ever want to remove these styles, we need to add an explicit border
-    --overlay: #4A3B61;
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
   }
 }
 
-body {
+@layer base {
-  color: var(--foreground);
+  :root {
-  background: var(--background);
+    --background: #141218;
-  font-family: Arial, Helvetica, sans-serif;
+    --foreground: #261f31;
-}
+    --primary: #392e49;
+    --headers: #d64097;
+    --overlay: #4a3b61;
+  }
 
-h1 {
+  @media (prefers-color-scheme: dark) {
-  font-family: var(--font-nunito);
+    :root {
-  font-weight: 600;
+      --background: #141218;
-}
+      --foreground: #261f31;
+      --primary: #392e49;
+      --headers: #d64097;
+      --overlay: #4a3b61;
+    }
+  }
 
-p {
+  body {
-  font-family: var(--font-nunito);
+    color: var(--foreground);
-  font-weight: 400;
+    background: var(--background);
-  font-size: 1.25rem;
+    font-family: Arial, Helvetica, sans-serif;
-  color: white !important;
+  }
+
+  h1 {
+    font-family: var(--font-nunito);
+    font-weight: 600;
+  }
+
+  p {
+    font-family: var(--font-nunito);
+    font-weight: 400;
+    font-size: 1.25rem;
+    color: white !important;
+  }
 }
 
 .tmp {
@@ -72,12 +98,6 @@ p {
   color: white !important;
 }
 
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
-
 /* === swmg theme === */
 .swmg {
   --background: #050509;

tailwind.config.ts

@@ -1,23 +0,0 @@
-import { headers } from "next/headers";
-import type { Config } from "tailwindcss";
-
-const config: Config = {
-  content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
-        primary: "var(--primary)",
-        headers: "var(--headers)",
-        overlay: "var(--overlay)",
-      },
-    },
-  },
-  plugins: [],
-};
-export default config;