Main App is implemented

src/App.tsx

@@ -1,7 +1,42 @@
+import useLang from "@/lib/hooks/useLang";
+import { translations } from "@/locale";
+import Introduction from "@/components/Introduction";
+import { Button } from "@/components/ui/button";
+
 function App() {
+  const { currLang } = useLang();
   return (
-    <div className="w-full max-w-4xl p-4 lg:my-8">
-      <h1>Title</h1>
+    <div className="w-full max-w-4xl p-4 lg:my-8 gap-8 flex flex-col">
+      <h1 className="text-5xl lg:text-6xl font-extrabold italic">
+        {translations[currLang].title}
+      </h1>
+      <p>{translations[currLang].subtitle}</p>
+      <Introduction />
+      <div className="flex w-1/2 flex-col gap-6 lg:flex-row">
+        <a
+          className="w-full lg:flex-1"
+          href="https://fallout2-ce.github.io/fallout2-ce"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Button
+            className="w-full rounded-full text-lg py-4 h-14 lg:py-6 px-8"
+            variant="outline"
+          >
+            {translations[currLang].webDemo}
+          </Button>
+        </a>
+        <a
+          className="w-full lg:flex-1"
+          href="https://github.com/fallout2-ce/fallout2-ce/releases"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Button className="w-full rounded-full text-lg py-4 h-14 lg:py-6 px-8">
+            {translations[currLang].download}
+          </Button>
+        </a>
+      </div>
     </div>
   );
 }

src/components/Footer.tsx

@@ -1,5 +1,5 @@
 import useLang from "@/lib/hooks/useLang";
-import translations from "@/locale";
+import { translations } from "@/locale";
 import { SiDiscord, SiTelegram } from "react-icons/si";
 
 // TODO: plz update the links

src/components/Introduction.tsx

@@ -0,0 +1,18 @@
+import useLang from "@/lib/hooks/useLang";
+import { transIntro, translations } from "@/locale";
+
+const Introduction = () => {
+  const { currLang } = useLang();
+  return (
+    <div>
+      <h3>{translations[currLang].features}:</h3>
+      <ul className="flex flex-col gap-2 text-base text-muted list-disc w-full p-4">
+        {transIntro[currLang].map((item) => (
+          <li key={item}>{item}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default Introduction;

src/locale.ts

@@ -1,13 +1,36 @@
 import type { Lang } from "@/lib/stores/langStore";
 
-type TranslationKey = "developedBy" | "title";
+type TranslationKey =
+  | "developedBy"
+  | "title"
+  | "subtitle"
+  | "webDemo"
+  | "download"
+  | "features";
 
 const translations: Record<Lang, Record<TranslationKey, string>> = {
   en: {
     developedBy: "Developed with ❤️ by",
     title: "Fallout 2 Community Edition",
+    subtitle: "A fully working re-implementation of Fallout 2",
+    webDemo: "Try in browser",
+    download: "Download",
+    features: "Features",
   },
 };
 
-export default translations;
+const transIntro: Record<Lang, string[]> = {
+  en: [
+    "High resolution support",
+    "Increased pathfinding nodes 5x for more accurate pathfinding",
+    "Ctrl-click to quickly move items when bartering, looting, or stealing",
+    "Press 'a' to select all when choosing item quantity",
+    "Press 'a' to Take All when looting",
+    "When bartering, caps default to the right amount to balance the trade (if possible)",
+    "Music continues playing between maps (requires config)",
+    "Auto open doors (requires config)",
+  ],
+};
+
+export { transIntro, translations };
 export type { TranslationKey };