feat(home): create a landing page

components/introduction-page/index.tsx

@@ -0,0 +1,90 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { addIcon, Icon } from '@iconify/react';
+import ReleaseCard, { type ReleaseProps } from './parts/ReleaseCard';
+
+addIcon('ac:tebex', {
+  body: '<path fill="currentColor" d="M4.607 5.082C5.373 3.83 6.76 3.467 6.76 3.467S4.113 2.773 4.113 0c0 2.773-2.648 3.467-2.648 3.467s1.387.362 2.153 1.615H0v4.802l.823-1.487h1.644v8.288L5.757 20V9.852c-.839-.39-2.044-1.38-2.476-2.136.737.224 1.726.52 2.496.682h2.448V5.082H4.607Z"/>',
+  width: 9,
+  height: 20,
+});
+
+addIcon('ac:acscripts', {
+  body: '',
+  width: 24,
+  height: 24,
+});
+
+const data: ReleaseProps[] = [
+  {
+    name: 'AC Scoreboard',
+    description: 'The ultimate scoreboard solution for your server',
+    repository: 'https://github.com/acscripts/ac_scoreboard',
+    serverCount: 320,
+    youtubeVideoId: 'D_S4OmYOKJA',
+  },
+  {
+    name: 'AC Radio',
+    description: 'Simple and framework-standalone radio UI for pma-voice',
+    repository: 'https://github.com/acscripts/ac_radio',
+    serverCount: 1200,
+    youtubeVideoId: '9zxbDJMhVSw',
+  },
+  {
+    name: 'AC Documents',
+    description: 'Create and view custom documents in-game',
+    tebex: 'https://store.acscripts.dev/package/5384551',
+    serverCount: 80,
+    youtubeVideoId: 'rnU7ggQdhF4',
+  },
+];
+
+const Introduction: React.FC = () => {
+  return (
+    <div className="my-4 flex flex-col gap-4">
+      <div className="flex flex-wrap items-center justify-between gap-x-8 gap-y-4">
+        <div className="flex items-center gap-2 select-none">
+          <Image src="/logo.svg" alt="logo" width={64} height={64} />
+          <h1 className="!text-5xl !font-medium">AC Scripts</h1>
+        </div>
+
+        <div className="flex gap-4">
+          <Link
+            href="https://github.com/acscripts"
+            target="_blank"
+            className="flex w-fit items-center gap-1 rounded-md bg-[#333333] p-2"
+          >
+            <Icon icon="mdi:github" className="h-6 w-6" />
+            <p className="!text-md !font-medium">GitHub</p>
+          </Link>
+
+          <Link
+            href="https://discord.acscripts.dev"
+            target="_blank"
+            className="flex w-fit items-center gap-1 rounded-md bg-[#5865f2] p-2"
+          >
+            <Icon icon="ic:baseline-discord" className="h-6 w-6" />
+            <p className="!text-md !font-medium">Discord</p>
+          </Link>
+
+          <Link
+            href="https://store.acscripts.dev"
+            target="_blank"
+            className="flex w-fit items-center gap-1 rounded-md bg-[#41c4c3] p-2 !text-black"
+          >
+            <Icon icon="ac:tebex" className="h-6 w-6" />
+            <p className="!text-md !font-medium">Tebex</p>
+          </Link>
+        </div>
+      </div>
+
+      <div className="grid w-full grid-cols-1 justify-between gap-2 lg:grid-cols-2 xl:grid-cols-3">
+        {data.map((data, index) => (
+          <ReleaseCard key={index} {...data} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Introduction;

components/introduction-page/parts/IconLink.tsx

@@ -0,0 +1,12 @@
+import Link from 'next/link';
+import { Icon } from '@iconify/react';
+
+const IconLink: React.FC<{ className: string; href: string; icon: string }> = (props) => {
+  return (
+    <Link href={props.href} target="_blank" rel="noreferrer">
+      <Icon icon={props.icon} className={props.className} />
+    </Link>
+  );
+};
+
+export default IconLink;

components/introduction-page/parts/ReleaseCard.tsx

@@ -0,0 +1,49 @@
+import dynamic from 'next/dynamic';
+import { Icon } from '@iconify/react';
+import IconLink from './IconLink';
+
+export type ReleaseProps = {
+  name: string;
+  description: string;
+  repository?: string;
+  tebex?: string;
+  serverCount: number;
+  youtubeVideoId: string;
+};
+
+const ReactPlayer = dynamic(() => import('react-player'), { ssr: false });
+
+const ReleaseCard: React.FC = (props: ReleaseProps) => {
+  return (
+    <div className="flex w-full flex-col gap-y-2 rounded-md bg-neutral-800 p-4 transition-colors select-none hover:bg-neutral-700">
+      <div className="flex items-center justify-between gap-2">
+        <h2 className="line-clamp-1 !text-2xl leading-none !font-medium">{props.name}</h2>
+        {props.repository && <IconLink className="h-6 w-6" href={props.repository} icon="mdi:github" />}
+        {props.tebex && <IconLink className="h-6 w-6" href={props.tebex} icon="ac:tebex" />}
+      </div>
+
+      <p className="line-clamp-2 grow text-sm text-neutral-400">{props.description}</p>
+
+      <div className="flex items-center gap-1">
+        <Icon className="h-6 w-6" icon="mdi:account-supervisor" />
+        <p className="line-clamp-1">
+          Used by <span className="font-bold">{props.serverCount}+</span> servers
+        </p>
+      </div>
+
+      <div className="aspect-video w-full overflow-hidden rounded-md">
+        <ReactPlayer
+          light
+          playing
+          controls
+          url={`https://youtube.com/watch?v=${props.youtubeVideoId}`}
+          height="100%"
+          width="100%"
+          playIcon={<Icon icon="logos:youtube-icon" className="h-14 w-14" />}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ReleaseCard;

package.json

@@ -11,9 +11,11 @@
     "nextra": "^3.2.4",
     "nextra-theme-docs": "^3.2.4",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-player": "^2.16.0"
   },
   "devDependencies": {
+    "@iconify/react": "^5.1.0",
     "@tailwindcss/postcss": "^4.0.0-beta.6",
     "@types/node": "22.10.1",
     "prettier": "^3.4.2",

pages/index.mdx

@@ -1,8 +1,3 @@
-import KofiBadge from '../components/kofi';
+import Introduction from '../components/introduction-page';
 
-# Introduction
-
-Here you can find all documentation for resources from AC Scripts.
-
-<br />
-<KofiBadge link="https://ko-fi.com/antond" />
+<Introduction />