news grid

src/app/globals.css

@@ -22,7 +22,7 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: "Panton", sans-serif;
+  font-family: "Roboto Mono", sans-serif;
 }
 
 @font-face {
@@ -48,3 +48,39 @@ body {
   font-style: normal;
   font-display: swap;
 }
+
+@font-face {
+  font-family: "Roboto Mono";
+  src: url("/font/roboto_mono/RobotoMono-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto Mono";
+  src: url("/font/roboto_mono/RobotoMono-Italic.ttf") format("truetype");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto Mono";
+  src: url("/font/roboto_mono/RobotoMono-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto Mono";
+  src: url("/font/roboto_mono/RobotoMono-BoldItalic.ttf") format("truetype");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+::selection {
+  background: #e2bf7d;
+}

src/app/news/page.tsx

@@ -1,5 +1,27 @@
 import Footer from "@/components/Footer";
 import Header from "@/components/Header";
+import Image from "next/image";
+import Link from "next/link";
+
+// const newsList = [
+//   {
+//     authors: [],
+//     title: "Hello World",
+//     description: "lorem ipsum ipsum lorem",
+//     image: "/background.png",
+//     date: "2025-04-16",
+//     id: "",
+//   },
+// ];
+
+const newsList = Array(3 * 6).fill({
+  authors: [],
+  title: "Hello World",
+  description: "lorem ipsum ipsum lorem",
+  image: "/background.png",
+  date: "2025-04-16",
+  id: "",
+});
 
 export default function News() {
   return (
@@ -7,14 +29,37 @@ export default function News() {
       <div className="flex flex-col bg-[url('/background.png')] bg-center bg-no-repeat h-52">
         <Header />
 
-        <h1 className="text-5xl font-black m-auto w-max">CLIENT NEWS</h1>
+        <h1 className="text-5xl font-black m-auto w-max font-['Panton']">
+          CLIENT NEWS
+        </h1>
       </div>
 
       <div className="py-8 px-5 w-full">
         TODO: implement search and filtering
       </div>
 
-      <div className="py-8 px-5 w-full">TODO: implement thumbnail</div>
+      <div className="py-8 px-5 w-full grid grid-rows-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+        {newsList.map((news, i) => (
+          <Link
+            href={`/news/${news.id}`}
+            className="hover:scale-[1.02] transform transition duration-300"
+            key={i}
+          >
+            <div
+              style={{
+                background: `url('${news.image}')`,
+                backgroundSize: "cover",
+                backgroundRepeat: "no-repeat",
+              }}
+              className="object-cover h-48 rounded-2xl p-4"
+            >
+              <h2 className="text-3xl font-black">{news.title}</h2>
+              <p className="text-xl">{news.description}</p>
+              <p className="text-md">{news.date}</p>
+            </div>
+          </Link>
+        ))}
+      </div>
 
       <Footer />
     </div>

src/app/page.tsx

@@ -23,8 +23,8 @@ export default function Home() {
 
       <div className="flex-1 flex flex-col text-2xl mt-40 items-center">
         <Image src="/logo.png" alt="Logo" width={240} height={240} />
-        <h1 className="text-5xl font-black">Saturn Client</h1>
-        <p className="text-xl text-white mix-blend-difference">
+        <h1 className="text-5xl font-black font-['Panton']">Saturn Client</h1>
+        <p className="text-xl text-white mix-blend-difference font-['Panton']">
           The best open source Minecraft client
         </p>