Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-09 16:13:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(website): add basic landing page (#8313)

Browse Source 
Co-authored-by: Noel <buechler.noel@outlook.com>
Co-authored-by: Jiralite <33201955+Jiralite@users.noreply.github.com>
This commit is contained in:
Suneet Tipirneni
2022-07-18 13:11:18 -04:00
committed by GitHub
parent 78d013f87c
commit b5d4b2d78b
5 changed files with 54 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
packages/website/src/assets/code-sample.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB

BIN
packages/website/src/assets/djs_logo_rainbow_400x400.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.6 KiB

45
packages/website/src/routes/index.tsx
View File

@@ -1,8 +1,47 @@
import codeSample from '../assets/code-sample.png';
import logo from '../assets/djs_logo_rainbow_400x400.png';
import * as text from '../text.json';
interface ButtonProps {
title: string;
}
function Button({ title }: ButtonProps) {
return (
<div className="max-h-[70px] bg-blurple px-3 py-4 rounded-lg">
<p className="font-semibold text-white m-0">{title}</p>
</div>
);
}
export default function IndexRoute() {
return (
<main className="w-full h-screen">
<div className="h-screen grid place-content-center">
<h1 className="">Coming soon...</h1>
<main className="w-full max-w-full max-h-full h-full flex-col bg-white dark:bg-dark overflow-y-auto">
<div className="flex h-[65px] sticky top-0 border-b border-slate-300 justify-center px-10 bg-white dark:bg-dark">
<div className="flex align-center items-center w-full max-w-[1100px] justify-between">
<div className="h-[50px] w-[50px] rounded-lg overflow-hidden">
<img className="h-[50px] w-[50px]" src={logo} />
</div>
<div className="flex flex-row space-x-8">
<a className="text-blurple font-semibold">Docs</a>
<a className="text-blurple font-semibold">Guide</a>
</div>
</div>
</div>
<div className="xl:flex xl:justify-center w-full max-w-full box-border px-10">
<div className="flex flex-col xl:flex-row grow max-w-[1100px] mt-10 pb-10 space-y-10 xl:space-x-20 place-items-center">
<div className="flex flex-col max-w-[800px] lt-xl:items-center">
<h1 className="font-bold text-6xl text-blurple mb-2">{text.heroTitle}</h1>
<p className="text-xl text-dark-100 dark:text-gray-400">{text.heroDescription}</p>
<div className="flex flew-row space-x-4">
<Button title="Read the guide" />
<Button title="Check out the docs" />
</div>
</div>
<div className="sm:flex sm:grow sm:shrink h-full sm:align-center xl:items-center hidden">
<img src={codeSample} className="max-w-[600px] rounded-xl shadow-md overflow-hidden" />
</div>
</div>
</div>
</main>
);

4
packages/website/src/text.json Normal file
View File

@@ -0,0 +1,4 @@
{
"heroTitle": "The most popular way to build Discord bots.",
"heroDescription": "discord.js is a powerful Node.js module that allows you to interact with the Discord API very easily. It takes a much more object-oriented approach than most other JS Discord libraries, making your bot's code significantly tidier and easier to comprehend."
}

9
packages/website/unocss.config.ts
View File

@@ -2,8 +2,15 @@ import presetWebFonts from '@unocss/preset-web-fonts';
import { defineConfig, presetUno } from 'unocss';
export default defineConfig({
theme: {
colors: {
blurple: '#5865F2',
},
},
presets: [
presetUno({ dark: 'media' }),
presetUno({
dark: 'media',
}),
presetWebFonts({
provider: 'google',
fonts: {