Add translations and update UI components in FeatureOne, Header, and …

…Hero components

app/[locale]/FeatureOne.tsx

@@ -1,5 +1,55 @@
+import { useTranslations } from "next-intl";
+
+import FeaturesList from "./components/FeaturesList";
+import Feature from "./components/Feature";
+
+import { MixIcon, RocketIcon, PaperPlaneIcon } from "@radix-ui/react-icons";
+
+const featureIconClassNames = "h-5 w-5 flex-none text-primary";
+
 const FeatureOne = () => {
-  return <div>FeatureOne</div>;
+  const t = useTranslations("home.features");
+
+  return (
+    <div className="py-12 sm:py-24">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl lg:text-center">
+          <h2 className="text-base font-semibold leading-7 text-primary font-display uppercase">
+            {t("subText")}
+          </h2>
+          <p className="mt-2 text-3xl font-bold tracking-tight sm:text-4xl font-display">
+            {t("title")}
+          </p>
+          <p className="mt-6 text-lg leading-8">{t("description")}</p>
+        </div>
+        <div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
+          <FeaturesList>
+            <Feature description={t("productionReady.description")}>
+              <MixIcon
+                className={featureIconClassNames}
+                aria-hidden="true"
+              />
+              {t("productionReady.name")}
+            </Feature>
+            <Feature description={t("communitySupported.description")}>
+              <RocketIcon
+                className={featureIconClassNames}
+                aria-hidden="true"
+              />
+              {t("communitySupported.name")}
+            </Feature>
+            <Feature description={t("easyMigration.description")}>
+              <PaperPlaneIcon
+                className={featureIconClassNames}
+                aria-hidden="true"
+              />
+              {t("easyMigration.name")}
+            </Feature>
+          </FeaturesList>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default FeatureOne;

app/[locale]/Header.tsx

@@ -70,14 +70,14 @@ export default function Header() {
           darkModeSRText={tHeader("toggleTheme")}
           openMainMenuSRText={tNav("openMainMenu")}
           rockyLinuxSRText={tGlobal("name")}
-          downloadSRText={tHeader("download")}
+          downloadSRText={tGlobal("download")}
           translations={navigationTranslations}
         />
         <DesktopNavigation translations={navigationTranslations} />
         <div className="hidden lg:flex lg:flex-1 lg:justify-end">
           <DarkModeToggle srText={tHeader("toggleTheme")} />
           <a href="/download">
-            <Button className="p-5 ml-2">{tHeader("download")}</Button>
+            <Button className="p-5 ml-2">{tGlobal("download")}</Button>
           </a>
         </div>
       </nav>

app/[locale]/Hero.tsx

@@ -1,5 +1,50 @@
+import Image from "next/image";
+import { useTranslations } from "next-intl";
+
+import { Button } from "@/components/ui/button";
+
 const Hero = () => {
-  return <div>Hero</div>;
+  const t = useTranslations("home.hero");
+  const tGlobal = useTranslations("global");
+
+  return (
+    <div className="relative isolate pt-14">
+      <div className="pb-12 sm:pb-24">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <div className="mx-auto max-w-2xl text-center">
+            <h1 className="text-4xl font-bold tracking-tight sm:text-6xl font-display">
+              {t("title")}
+            </h1>
+            <p className="mt-6 text-lg leading-8">{t("description")}</p>
+            <div className="mt-10 flex items-center justify-center gap-x-6">
+              <a href="/download">
+                <Button className="p-5 font-bold">{tGlobal("download")}</Button>
+              </a>
+              <a href="#">
+                <Button
+                  variant="secondary"
+                  className="p-5"
+                >
+                  {t("migrate")}
+                </Button>
+              </a>
+            </div>
+          </div>
+          <div className="mt-16 flow-root sm:mt-24">
+            <div className="-m-2 rounded-xl bg-slate-900/5 dark:bg-slate-100/5 p-2 ring-1 ring-inset ring-slate-900/10 dark:ring-slate-100/10 lg:-m-4 lg:rounded-2xl lg:p-4">
+              <Image
+                src="/images/home-hero.png"
+                alt="Rocky Linux Screenshot"
+                width={2432}
+                height={1442}
+                className="rounded-md shadow-2xl ring-1 ring-slate-900/10 dark:ring-slate-100/10"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default Hero;

app/[locale]/components/Feature.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+
+export interface FeatureProps {
+  description: string;
+  children?: ReactNode;
+}
+
+const Feature = ({ description, children }: FeatureProps) => {
+  return (
+    <div className="flex flex-col">
+      <dt className="flex items-center gap-x-3 text-md font-bold leading-7 font-display">
+        {children}
+      </dt>
+      <dd className="mt-4 flex flex-auto flex-col text-base leading-7">
+        <p className="flex-auto">{description}</p>
+      </dd>
+    </div>
+  );
+};
+
+export default Feature;

app/[locale]/components/FeaturesList.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+
+const FeaturesList = ({ children }: { children: ReactNode }) => {
+  return (
+    <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
+      {children}
+    </dl>
+  );
+};
+
+export default FeaturesList;

messages/en.json

@@ -1,10 +1,10 @@
 {
   "global": {
-    "name": "Rocky Linux"
+    "name": "Rocky Linux",
+    "download": "Download"
   },
   "header": {
     "toggleTheme": "Toggle Theme",
-    "download": "Download",
     "nav": {
       "newsName": "News",
       "aboutName": "About",
@@ -42,5 +42,29 @@
         "donate": "Donate"
       }
     }
+  },
+  "home": {
+    "hero": {
+      "title": "Enterprise Linux, the community way.",
+      "description": "Rocky Linux is an open-source enterprise operating system designed to be 100% bug-for-bug compatible with Red Hat Enterprise Linux®. It is under intensive development by the community.",
+      "migrate": "Migrate"
+    },
+    "features": {
+      "title": "Rock solid, no matter the use-case.",
+      "subText": "STABLE, PRODUCTION READY LINUX",
+      "description": "Rocky Linux rebuilds sources directly from RHEL®, so you can bet your best dollar that you'll have a super stable experience, no matter the use-case.",
+      "productionReady": {
+        "name": "Production Ready",
+        "description": "Rocky Linux is enterprise-ready, providing solid stability with regular updates and a 10-year support lifecycle, all at no cost."
+      },
+      "communitySupported": {
+        "name": "Community Supported",
+        "description": "The community, sponsors, and partners have invested with long-term commitments to ensure the project stays with the community."
+      },
+      "easyMigration": {
+        "name": "Easy Migration",
+        "description": "Migrate from other Enterprise Linux distributions without sweating it. We provide an easy-to-use migration script, free of charge."
+      }
+    }
   }
 }