Added a newsto the landing page

src/app/page.tsx

@@ -1,18 +1,81 @@
 import SpeedrunTable, { Speedrun } from "@/components/Table";
+import { timeAgo } from "@/lib/utils";
+
+interface NewsPreview {
+  title: string;
+  description: string;
+  author: string;
+  date: number;
+}
+
+function NewsPost({ post }: { post: NewsPreview }) {
+  return (
+    <div className="border-t-[1px] pt-2 pb-3 border-neutral-500">
+      <h2 className="text-xl">{post.title}</h2>
+      <p className="line-clamp-3 ml-1 text-[#bbb]">{post.description}</p>
+      <div className="mt-3 flex">
+        <div className="rounded-full bg-white size-6"></div>
+        <div className="ml-2 flex justify-between w-full">
+          <p>{post.author}</p>
+          <p className="text-shadow-2xs text-neutral-400">
+            {timeAgo(post.date)}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
 
 export default function Home() {
   const users: Speedrun[] = [
-    { rank: 1, name: 'Kleo', time: 63, problem: 'Two Sum', date: 1651600541000 },
+    {
+      rank: 1,
+      name: "Kleo",
+      time: 63,
+      problem: "Two Sum",
+      date: 1651600541000,
+    },
   ];
 
   return (
     <>
       <div className="w-full h-14 bg-neutral-900"></div>
 
-      <div className="mt-5 mx-[35rem]">
+      <div className="mt-5 mx-10 xl:mx-[35rem] flex gap-5">
         <div className="w-full">
           <SpeedrunTable data={users} />
         </div>
+        <div className="w-[35rem]">
+          <div className="w-full bg-[#121212] h-full rounded-lg p-5">
+            <h1 className="font-bold">LATEST NEWS</h1>
+            <div className="flex flex-col w-full pt-3">
+              <NewsPost
+                post={{
+                  title: "Testing",
+                  description: "Idk",
+                  author: "kleo",
+                  date: 1751600541000,
+                }}
+              />
+              <NewsPost
+                post={{
+                  title: "Testing",
+                  description: "Idk",
+                  author: "kleo",
+                  date: 1751600541000,
+                }}
+              />
+              <NewsPost
+                post={{
+                  title: "Testing",
+                  description: "Idk",
+                  author: "kleo",
+                  date: 1751600541000,
+                }}
+              />
+            </div>
+          </div>
+        </div>
       </div>
     </>
   );

src/components/Table.tsx

@@ -1,6 +1,6 @@
-import { format, timeAgo } from '@/lib/utils';
+import { format, timeAgo } from "@/lib/utils";
-import { formatDate } from 'date-fns';
+import { formatDate } from "date-fns";
-import React from 'react';
+import React from "react";
 
 export interface Speedrun {
   rank: number;
@@ -20,11 +20,21 @@ const SpeedrunTable: React.FC<TableProps> = ({ data }) => {
       <table className="min-w-full text-sm text-[#e0e0e0]">
         <thead>
           <tr className="border-b border-[#2a2a2a]">
-            <th className="px-6 py-3 text-left font-medium tracking-wide text-[#aaaaaa] uppercase w-14">#</th>
+            <th className="px-6 py-3 text-left font-medium tracking-wide text-[#aaaaaa] uppercase w-14">
-            <th className="px-6 py-3 text-left font-medium tracking-wide text-[#aaaaaa] uppercase w-52">Player</th>
+              #
-            <th className="px-6 py-3 text-left font-medium tracking-wide text-[#aaaaaa] uppercase w-52">Time</th>
+            </th>
-            <th className="px-6 py-3 text-left font-medium tracking-wide text-[#aaaaaa] uppercase w-52">Date</th>
+            <th className="px-6 py-3 text-left font-medium tracking-wide text-[#aaaaaa] uppercase w-52">
-            <th className="px-6 py-3 text-left font-medium tracking-wide text-[#aaaaaa] uppercase">Problem</th>
+              Player
+            </th>
+            <th className="px-6 py-3 text-left font-medium tracking-wide text-[#aaaaaa] uppercase w-52">
+              Time
+            </th>
+            <th className="px-6 py-3 text-left font-medium tracking-wide text-[#aaaaaa] uppercase w-52">
+              Date
+            </th>
+            <th className="px-6 py-3 text-left font-medium tracking-wide text-[#aaaaaa] uppercase">
+              Problem
+            </th>
           </tr>
         </thead>
         <tbody>
@@ -34,9 +44,18 @@ const SpeedrunTable: React.FC<TableProps> = ({ data }) => {
               className="hover:bg-[#1f1f1f] transition-colors border-b border-[#1e1e1e]"
             >
               <td className="px-6 py-4 whitespace-nowrap">{user.rank}</td>
-              <td className="px-6 py-4 whitespace-nowrap">{user.name}</td>
+              <td className="px-6 py-4 whitespace-nowrap font-bold">
-              <td className="px-6 py-4 whitespace-nowrap">{format(user.time)}</td>
+                {user.name}
-              <td className="px-6 py-4 whitespace-nowrap" title={new Date(user.date).toLocaleString()}>{timeAgo(user.date)}</td>
+              </td>
+              <td className="px-6 py-4 whitespace-nowrap">
+                {format(user.time)}
+              </td>
+              <td
+                className="px-6 py-4 whitespace-nowrap"
+                title={new Date(user.date).toLocaleString()}
+              >
+                {timeAgo(user.date)}
+              </td>
               <td className="px-6 py-4 whitespace-nowrap">{user.problem}</td>
             </tr>
           ))}