Add the new Credits Page (#9)

src/components/widgets/CreditsWidget.astro

@@ -0,0 +1,85 @@
+---
+interface CreditsData {
+  contributor: string;
+  role: string;
+}
+const credits: CreditsData[] = [
+  {
+    role: "Kernel Base",
+    contributor: "CachyOS Team(peter)",
+  },
+  {
+    role: "Welcome App UI",
+    contributor: "PizzaLovingNerd",
+  },
+  {
+    role: "Themeing",
+    contributor: "Vinceliuice & Papirus",
+  },
+  {
+    role: "Software, Updates and Webapps manager",
+    contributor: "The Linux Mint team",
+  },
+  {
+    role: "Encryption Support",
+    contributor: "SkimmingDeath",
+  },
+  {
+    role: "Standalone gamescope session",
+    contributor: "The ChimeraOS Team",
+  },
+  {
+    role: "Graphics Drivers",
+    contributor: "Kisak",
+  },
+  {
+    role: "Repositories, Firmware Manager and the tiling in GNOME-Shell with POP_SHELL",
+    contributor: "The POP!_OS team",
+  },
+  {
+    role: "Hybrid GPU Controls",
+    contributor: "asus-linux",
+  },
+  {
+    role: "Anti Snap",
+    contributor: "The Xtradeb team",
+  },
+  {
+    role: "apx package manager",
+    contributor: "The Vanilla OS Team",
+  },
+  {
+    role: "Wallpapers",
+    contributor: "Neytirix",
+  },
+  {
+    role: "Audio Artist",
+    contributor: "4lk4",
+  },
+  {
+    role: "Logo Artist & Financial Contributor",
+    contributor: "nesper8",
+  },
+];
+---
+
+<div class="grid place-items-center">
+  <table class="text-left">
+    <thead class="bg-black/50 dark:bg-gray-700 text-white uppercase font-bold">
+      <tr>
+        <th class="px-3 py-3">Role</th>
+        <th class="px-3 py-3">Contributor</th>
+      </tr>
+    </thead>
+    <tbody>
+      {
+        credits.map(({ contributor, role }) => (
+          <tr class="border-b border-b-gray-700">
+            <td class="px-3 py-3 font-medium">{role}</td>
+            <td class="px-3 py-3 font-medium">{contributor}</td>
+          </tr>
+        ))
+      }
+    </tbody>
+  </table>
+</div>

src/components/widgets/Header.astro

@@ -19,6 +19,10 @@ const links = [
     text: "Download",
     href: "/#download",
   },
+  {
+    text: "Credits",
+    href: "/credits",
+  },
   // {
   //   text: 'About us',
   //   href: '#about',

src/pages/credits.astro

@@ -0,0 +1,18 @@
+---
+import CreditsWidget from "~/components/widgets/CreditsWidget.astro";
+import { SITE } from "~/config.mjs";
+import Layout from "~/layouts/PageLayout.astro";
+
+const meta = {
+  title: SITE.title,
+  description: SITE.description,
+  dontUseTitleTemplate: true,
+};
+---
+
+<Layout {meta}>
+  <div class="max-w-6xl mx-auto px-4 sm:px-6 py-12 md:py-20">
+    <h1 class="text-xl md:text-4xl font-bold text-center pb-10">Credits</h1>
+    <CreditsWidget />
+  </div>
+</Layout>