chore: migrate to tailwind v4, bump

.gitignore

@@ -41,7 +41,11 @@ yarn-error.log*
 next-env.d.ts
 
 # bun
+bun.lock
 bun.lockb
 
+# webstorm
+.idea/
+
 # misc
 package-lock.json

package.json

@@ -9,21 +9,23 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@fontsource-variable/manrope": "^5.1.1",
-    "@vercel/analytics": "^1.4.1",
+    "@fontsource-variable/manrope": "^5.2.5",
+    "@vercel/analytics": "^1.5.0",
     "next": "15.1.3",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0"
   },
   "devDependencies": {
-    "typescript": "^5",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
-    "eslint": "^9",
+    "@eslint/eslintrc": "^3.3.0",
+    "@tailwindcss/postcss": "^4.0.12",
+    "@types/node": "^20.17.24",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "eslint": "^9.22.0",
     "eslint-config-next": "15.1.3",
-    "@eslint/eslintrc": "^3"
+    "postcss": "^8.5.3",
+    "tailwindcss": "^4.0.12",
+    "typescript": "^5.8.2"
   }
 }

postcss.config.mjs

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

src/app/globals.css

@@ -1,6 +1,27 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  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);
+  }
+}
 
 :root {
   --background: #ffffff;

src/app/page.tsx

@@ -1,17 +1,38 @@
+import { TbWorld, TbRss } from "react-icons/tb";
+
 export default function Home() {
   return (
     <div className="flex items-center justify-center min-h-screen bg-slate-900">
-      <div className="bg-white/10 backdrop-blur-md border border-white/20 rounded-lg p-8">
+      <div className="bg-white/10 backdrop-blur-md border border-white/20 rounded-lg p-8 max-w-4xl">
         <h1 className="text-white text-3xl">This domain is owned by p0ntus</h1>
         <p className="text-white mt-4">
-          This domain is not for sale and never will be.
+          You are seeing this page because there is currently no project hosted at this domain. This domain is not for sale and never will be, unless I stop paying for it. Sorry, no offers are accepted.
         </p>
         <p className="text-white mt-4">
-          If you have any questions, feel free to reach out to me at <a href="mailto:admin@p0ntus.com" className="text-blue-500">admin@p0ntus.com</a>
+          If you have any questions, feel free to reach out to me at <a href="mailto:aidan@p0ntus.com" className="text-blue-500">aidan@p0ntus.com</a>
         </p>
         <p className="text-white mt-4">
           This domain is not used at the moment, but will soon house something great. This page takes it&apos;s place while I work on it!
         </p>
+        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mt-8">
+          <a
+            href="https://aidxn.cc"
+            className="w-full sm:w-auto flex items-center justify-center bg-slate-500 text-white px-4 py-2 rounded-lg hover:bg-slate-600 transition-all"
+          >
+            <TbWorld size={18} className="flex-shrink-0 mr-2" />
+            <span className="whitespace-nowrap">My Website</span>
+          </a>
+          <a
+            href="https://disfunction.blog"
+            className="w-full sm:w-auto flex items-center justify-center bg-slate-500 text-white px-4 py-2 rounded-lg hover:bg-slate-600 transition-all"
+          >
+            <TbRss size={18} className="flex-shrink-0 mr-2" />
+            <span className="whitespace-nowrap">My Blog</span>
+          </a>
+        </div>
+      </div>
+      <div className="absolute bottom-4 right-4 text-white text-xs">
+        <p>Copyright-free and open source on <a href="https://git.pontusmail.org/aidan/owned-by" className="text-blue-500 hover:text-blue-600 transition-all">LibreCloud Git</a></p>
       </div>
     </div>
   );

tailwind.config.ts

@@ -1,18 +0,0 @@
-import type { Config } from "tailwindcss";
-
-export default {
-  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)",
-      },
-    },
-  },
-  plugins: [],
-} satisfies Config;