Skip to content

Commit 17623b0

Browse files
antond15antond15
committed
feat(home): create a landing page
1 parent 351eb04 commit 17623b0

File tree

8 files changed

+156
-35
lines changed

8 files changed

+156
-35
lines changed

‎bun.lockb

3.31 KB
Binary file not shown.

‎components/introduction-page/index.tsx

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import Image from 'next/image';
2+
import Link from 'next/link';
3+
import { addIcon, Icon } from '@iconify/react';
4+
import ReleaseCard, { type ReleaseProps } from './parts/ReleaseCard';
5+
6+
addIcon('ac:tebex', {
7+
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"/>',
8+
width: 9,
9+
height: 20,
10+
});
11+
12+
addIcon('ac:acscripts', {
13+
body: '',
14+
width: 24,
15+
height: 24,
16+
});
17+
18+
const data: ReleaseProps[] = [
19+
{
20+
name: 'AC Scoreboard',
21+
description: 'The ultimate scoreboard solution for your server',
22+
repository: 'https://github.com/acscripts/ac_scoreboard',
23+
serverCount: 320,
24+
youtubeVideoId: 'D_S4OmYOKJA',
25+
},
26+
{
27+
name: 'AC Radio',
28+
description: 'Simple and framework-standalone radio UI for pma-voice',
29+
repository: 'https://github.com/acscripts/ac_radio',
30+
serverCount: 1200,
31+
youtubeVideoId: '9zxbDJMhVSw',
32+
},
33+
{
34+
name: 'AC Documents',
35+
description: 'Create and view custom documents in-game',
36+
tebex: 'https://store.acscripts.dev/package/5384551',
37+
serverCount: 80,
38+
youtubeVideoId: 'rnU7ggQdhF4',
39+
},
40+
];
41+
42+
const Introduction: React.FC = () => {
43+
return (
44+
<div className="my-4 flex flex-col gap-4">
45+
<div className="flex flex-wrap items-center justify-between gap-x-8 gap-y-4">
46+
<div className="flex items-center gap-2 select-none">
47+
<Image src="/logo.svg" alt="logo" width={64} height={64} />
48+
<h1 className="!text-5xl !font-medium">AC Scripts</h1>
49+
</div>
50+
51+
<div className="flex gap-4">
52+
<Link
53+
href="https://github.com/acscripts"
54+
target="_blank"
55+
className="flex w-fit items-center gap-1 rounded-md bg-[#333333] p-2"
56+
>
57+
<Icon icon="mdi:github" className="h-6 w-6" />
58+
<p className="!text-md !font-medium">GitHub</p>
59+
</Link>
60+
61+
<Link
62+
href="https://discord.acscripts.dev"
63+
target="_blank"
64+
className="flex w-fit items-center gap-1 rounded-md bg-[#5865f2] p-2"
65+
>
66+
<Icon icon="ic:baseline-discord" className="h-6 w-6" />
67+
<p className="!text-md !font-medium">Discord</p>
68+
</Link>
69+
70+
<Link
71+
href="https://store.acscripts.dev"
72+
target="_blank"
73+
className="flex w-fit items-center gap-1 rounded-md bg-[#41c4c3] p-2 !text-black"
74+
>
75+
<Icon icon="ac:tebex" className="h-6 w-6" />
76+
<p className="!text-md !font-medium">Tebex</p>
77+
</Link>
78+
</div>
79+
</div>
80+
81+
<div className="grid w-full grid-cols-1 justify-between gap-2 lg:grid-cols-2 xl:grid-cols-3">
82+
{data.map((data, index) => (
83+
<ReleaseCard key={index} {...data} />
84+
))}
85+
</div>
86+
</div>
87+
);
88+
};
89+
90+
export default Introduction;

‎components/introduction-page/parts/IconLink.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import Link from 'next/link';
2+
import { Icon } from '@iconify/react';
3+
4+
const IconLink: React.FC<{ className: string; href: string; icon: string }> = (props) => {
5+
return (
6+
<Link href={props.href} target="_blank" rel="noreferrer">
7+
<Icon icon={props.icon} className={props.className} />
8+
</Link>
9+
);
10+
};
11+
12+
export default IconLink;

‎components/introduction-page/parts/ReleaseCard.tsx

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import dynamic from 'next/dynamic';
2+
import { Icon } from '@iconify/react';
3+
import IconLink from './IconLink';
4+
5+
export type ReleaseProps = {
6+
name: string;
7+
description: string;
8+
repository?: string;
9+
tebex?: string;
10+
serverCount: number;
11+
youtubeVideoId: string;
12+
};
13+
14+
const ReactPlayer = dynamic(() => import('react-player'), { ssr: false });
15+
16+
const ReleaseCard: React.FC = (props: ReleaseProps) => {
17+
return (
18+
<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">
19+
<div className="flex items-center justify-between gap-2">
20+
<h2 className="line-clamp-1 !text-2xl leading-none !font-medium">{props.name}</h2>
21+
{props.repository && <IconLink className="h-6 w-6" href={props.repository} icon="mdi:github" />}
22+
{props.tebex && <IconLink className="h-6 w-6" href={props.tebex} icon="ac:tebex" />}
23+
</div>
24+
25+
<p className="line-clamp-2 grow text-sm text-neutral-400">{props.description}</p>
26+
27+
<div className="flex items-center gap-1">
28+
<Icon className="h-6 w-6" icon="mdi:account-supervisor" />
29+
<p className="line-clamp-1">
30+
Used by <span className="font-bold">{props.serverCount}+</span> servers
31+
</p>
32+
</div>
33+
34+
<div className="aspect-video w-full overflow-hidden rounded-md">
35+
<ReactPlayer
36+
light
37+
playing
38+
controls
39+
url={`https://youtube.com/watch?v=${props.youtubeVideoId}`}
40+
height="100%"
41+
width="100%"
42+
playIcon={<Icon icon="logos:youtube-icon" className="h-14 w-14" />}
43+
/>
44+
</div>
45+
</div>
46+
);
47+
};
48+
49+
export default ReleaseCard;

‎components/kofi/index.module.css

-12
This file was deleted.

‎components/kofi/index.tsx

-15
This file was deleted.

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,11 @@
1111
"nextra": "^3.2.4",
1212
"nextra-theme-docs": "^3.2.4",
1313
"react": "^19.0.0",
14-
"react-dom": "^19.0.0"
14+
"react-dom": "^19.0.0",
15+
"react-player": "^2.16.0"
1516
},
1617
"devDependencies": {
18+
"@iconify/react": "^5.1.0",
1719
"@tailwindcss/postcss": "^4.0.0-beta.6",
1820
"@types/node": "22.10.1",
1921
"prettier": "^3.4.2",

‎pages/index.mdx

+2-7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
import KofiBadge from '../components/kofi';
1+
import Introduction from '../components/introduction-page';
22

3-
# Introduction
4-
5-
Here you can find all documentation for resources from AC Scripts.
6-
7-
<br />
8-
<KofiBadge link="https://ko-fi.com/antond" />
3+
<Introduction />

0 commit comments

Comments
 (0)