app/page.tsx

@@ -2,11 +2,18 @@ import { getSortedPostsData, PostMeta } from "../lib/posts";
 import Link from "next/link";
 import Window from "../components/window";
 
+function isNew(dateStr: string): boolean {
+  const postDate = new Date(dateStr);
+  const now = new Date();
+  const diffDays = (now.getTime() - postDate.getTime()) / (1000 * 60 * 60 * 24);
+  return diffDays <= 30;
+}
+
 export default function Home() {
   const allPostsData: PostMeta[] = getSortedPostsData();
 
   return (
-    <div className="space-y-12">
+    <div className="space-y-6">
       <header className="text-center">
         <h1 className="text-5xl font-bold text-white [text-shadow:_2px_2px_4px_rgb(0_0_0_/_40%)]">
           Gabriel's Kaszewski Blog
@@ -17,16 +24,25 @@ export default function Home() {
       </header>
 
       <section>
-        {/* The list of posts is displayed inside our custom Window component */}
         <Window title="Blog Posts">
           {allPostsData.length > 0 ? (
             <ul className="space-y-4">
-              {allPostsData.map(({ id, date, title }) => (
+              {allPostsData.map(({ id, date, title, wip }) => (
                 <li key={id}>
                   <Link
                     href={`/posts/${id}`}
-                    className="block rounded-md bg-white/50 p-4 transition-all duration-200 hover:bg-white/80 hover:shadow-md"
+                    className="relative block overflow-hidden rounded-md bg-white/50 p-4 transition-all duration-200 hover:bg-white/80 hover:shadow-md"
                   >
+                    {isNew(date) && !wip && (
+                      <div className="animate-blink absolute top-[10px] right-[-24px] w-[100px] rotate-[35deg] bg-[#e05010] py-0.5 text-center text-[9px] font-bold text-white shadow-sm">
+                        NEW!
+                      </div>
+                    )}
+                    {wip && (
+                      <div className="absolute top-[10px] right-[-24px] w-[100px] rotate-[35deg] bg-amber-500 py-0.5 text-center text-[9px] font-bold text-white shadow-sm">
+                        🚧 WIP
+                      </div>
+                    )}
                     <h3 className="font-bold text-lg text-blue-800">{title}</h3>
                     <small className="text-gray-600">
                       {new Date(date).toLocaleDateString("en-US", {