Listed Linux distributions

langs/en.json

@@ -34,5 +34,7 @@
     "ease_of_use_desc": "Terra is as easy to use as any other repository. For developers, Terra is a breeze to work with. We work directly with other projects to meet their needs and make Terra as seamless as possible.",
     "secure": "Secure",
     "secure_desc": "Packages are built in a secure environment maintained by the Fyra Labs team. Through our modern tooling, transparent infrastructure, and careful review process, we can prevent issues from occurring.",
-    "site_desc": "Terra is the community Fedora repository which makes it easy to install and maintain software packages."
+    "site_desc": "Terra is the community Fedora repository which makes it easy to install and maintain software packages.",
+    "supported_distros_title": "Linux Distributions Using Terra",
+    "supported_distros_desc": "A growing list of Fedora-based communities and desktop distributions rely on Terra for a broader package ecosystem."
 }

src/components/SupportedDistrosGrid.astro

@@ -0,0 +1,63 @@
+---
+interface Distro {
+  name: string;
+  description: string;
+  icon: string;
+}
+
+const distros: Distro[] = [
+  {
+    name: "Ultramarine",
+    description: "A Fedora-based distribution that uses Terra for a broader package selection and smoother upgrades.",
+    icon: "/distros/ultramarine-transp.svg",
+  },
+  {
+    name: "Bazzite",
+    description: "A atomic gaming  and workstation-focused distribution that relies on Terra for extra software availability.",
+    icon: "/distros/bazzite.svg",
+  },
+  {
+    name: "Nobara",
+    description: "A polished Fedora-based distro developed by Thomas Crider and uses terra to make gaming software easier to install",
+    icon: "/distros/nobara.svg",
+  },
+  {
+    name: "RakuOS",
+    description: "A community-driven atomic Linux experience that integrates Terra for additional package support.",
+    icon: "/distros/rakuos-logo.png",
+  },
+  {
+    name: "Zirconium",
+    description: "A newer atomic niri-based Fedora-based project that uses Terra to extend its available software catalogue.",
+    icon: "/distros/z.svg",
+  },
+];
+
+interface Props {
+  title: string;
+  description: string;
+}
+
+const { title, description } = Astro.props;
+---
+
+<section class="mx-auto w-full max-w-6xl px-6 pb-16">
+  <div class="mb-8 max-w-3xl">
+    <h2 class="text-3xl font-semibold tracking-tight">{title}</h2>
+    <p class="mt-2 text-sm text-muted-foreground md:text-base">{description}</p>
+  </div>
+
+  <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+    {distros.map((distro) => (
+      <article class="rounded-xl border bg-card/80 p-6 shadow-sm">
+        <div class="flex items-center justify-between gap-3">
+          <div class="flex items-center gap-3">
+            <img src={distro.icon} alt={distro.name} class="h-8 w-8" />
+            <h3 class="text-lg font-semibold">{distro.name}</h3>
+          </div>
+        </div>
+        <p class="mt-3 text-sm text-muted-foreground">{distro.description}</p>
+      </article>
+    ))}
+  </div>
+</section>

src/pages/[...lang]/index.astro

@@ -16,6 +16,7 @@ import {
 } from "@/components/ui/card";
 import { InstallDialog } from "@/components/InstallDialog";
 import { ButtonLink } from "@/components/ButtonLink";
+import SupportedDistrosGrid from "@/components/SupportedDistrosGrid.astro";
 import { makeGetStaticPaths } from "astro-i18nya";
 import i18nya, { makeT } from "@/i18n";
 
@@ -25,19 +26,19 @@ const t = makeT(Astro.params.lang);
 
 <MainLayout title="Terra" lang={Astro.params.lang}>
     <Navbar lang={Astro.params.lang} client:load />
-    <div class="flex flex-col gap-6 items-center p-16">
+    <div class="flex flex-col items-center gap-6 p-16">
         <h1
-            class="mx-auto text-center max-w-4xl text-4xl md:text-5xl lg:text-7xl font-bold"
+            class="mx-auto max-w-4xl text-center text-4xl font-bold md:text-5xl lg:text-7xl"
         >
             <!-- Do not use <Trans/> here, which requires experimentalReactChildren, which is incompatible with <NumberTicker/>. -->
             {t("h1.the")}<AuroraText className="-z-10" ><NumberTicker value={2000} startValue={1000} client:load />+</AuroraText>{t("h1")}
         </h1>
         <p
-            class="mx-auto max-w-4xl text-center md:text-xl text-muted-foreground"
+            class="mx-auto max-w-4xl text-center text-muted-foreground md:text-xl"
         >
             {t("desc")}
         </p>
-        <div class="grid grid-flow-col auto-cols-fr mt-4 gap-2">
+        <div class="mt-4 grid auto-cols-fr grid-flow-col gap-2">
             <InstallDialog lang={Astro.params.lang} client:load />
             <ButtonLink
                 href="https://docs.terrapkg.com/contributing/getting-started"
@@ -48,7 +49,7 @@ const t = makeT(Astro.params.lang);
         </div>
     </div>
 
-    <div class="grid gap-6 lg:grid-cols-3 container mx-auto p-6">
+    <div class="container mx-auto grid gap-6 p-6 lg:grid-cols-3">
         <Card>
             <CardHeader>
                 <CardTitle>{t("modern")}</CardTitle>
@@ -86,4 +87,8 @@ const t = makeT(Astro.params.lang);
             </CardHeader>
         </Card>
     </div>
+    <SupportedDistrosGrid
+        title={t("supported_distros_title")}
+        description={t("supported_distros_desc")}
+    />
 </MainLayout>

tsconfig.json

@@ -5,7 +5,6 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "jsxImportSource": "react",
-    "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
     }