refactor: docs design (#8487)

packages/website/src/pages/index.tsx

@@ -1,73 +1,117 @@
+import { createStyles, Container, Title, Button, Group, Text, Center } from '@mantine/core';
 import Image from 'next/future/image';
 import Link from 'next/link';
-import { forwardRef, MouseEventHandler, Ref } from 'react';
 import codeSample from '../assets/code-sample.png';
-import logo from '../assets/djs_logo_rainbow_400x400.png';
 import vercelLogo from '../assets/powered-by-vercel.svg';
-import text from '../text.json';
 
-interface ButtonProps {
-	label: string;
-	href?: string;
-	ref?: Ref<HTMLAnchorElement>;
-	onClick?: MouseEventHandler<HTMLAnchorElement>;
-}
+const useStyles = createStyles((theme) => ({
+	inner: {
+		display: 'flex',
+		justifyContent: 'space-between',
+		alignItems: 'center',
+		paddingTop: theme.spacing.xl * 4,
+		paddingBottom: theme.spacing.xl * 4,
 
-// eslint-disable-next-line react/display-name
-const LinkButton = forwardRef<HTMLAnchorElement, ButtonProps>(({ label, onClick, href }: ButtonProps, ref) => (
-	<a
-		href={href}
-		onClick={onClick}
-		ref={ref}
-		className="no-underline max-h-[70px] bg-blurple px-3 py-4 rounded-lg font-semibold text-white"
-	>
-		{label}
-	</a>
-));
+		[theme.fn.smallerThan('md')]: {
+			flexDirection: 'column',
+			gap: 50,
+		},
+	},
+
+	content: {
+		maxWidth: 480,
+		marginRight: theme.spacing.xl * 3,
+
+		[theme.fn.smallerThan('md')]: {
+			marginRight: 0,
+		},
+	},
+
+	title: {
+		color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+		fontSize: 44,
+		lineHeight: 1.2,
+		fontWeight: 900,
+
+		[theme.fn.smallerThan('xs')]: {
+			fontSize: 28,
+		},
+	},
+
+	highlight: {
+		position: 'relative',
+		backgroundColor: theme.fn.variant({ variant: 'light', color: theme.primaryColor }).background,
+		borderRadius: theme.radius.sm,
+		padding: '4px 12px',
+	},
+
+	control: {
+		[theme.fn.smallerThan('xs')]: {
+			flex: 1,
+		},
+	},
+
+	image: {
+		flex: 1,
+		height: '100%',
+		maxWidth: 550,
+
+		[theme.fn.smallerThan('xs')]: {
+			maxWidth: 350,
+		},
+	},
+
+	vercel: {
+		height: '100%',
+		maxWidth: 250,
+		paddingBottom: theme.spacing.xl * 4,
+	},
+}));
 
 export default function IndexRoute() {
+	const { classes } = useStyles();
 	return (
-		<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-gray justify-center px-10 bg-white dark:bg-dark">
-				<div className="flex items-center w-full max-w-[1100px] justify-between">
-					<div className="h-[50px] w-[50px] rounded-lg overflow-hidden">
-						<Image className="h-[50px] w-[50px]" src={logo} />
-					</div>
-					<div className="flex flex-row space-x-8">
-						<Link href="/docs" passHref>
-							<a className="no-underline text-blurple font-semibold">Docs</a>
-						</Link>
-						<a className="text-blurple font-semibold">Guide</a>
-					</div>
-				</div>
-			</div>
-			<div className="xl:flex xl:flex-col xl:justify-center w-full max-w-full box-border p-10">
-				<div className="flex flex-col xl:flex-row grow max-w-[1100px] pb-10 space-y-10 xl:space-x-20 place-items-center place-self-center">
-					<div className="flex flex-col max-w-[800px] lt-xl:items-center">
-						<h1 className="font-bold text-6xl text-blurple my-2">{text.heroTitle}</h1>
-						<p className="text-xl text-dark-100 dark:text-gray-300">{text.heroDescription}</p>
-						<div className="flex flew-row space-x-4">
-							<LinkButton label="Read the guide" />
+		<div>
+			<Container size="lg">
+				<div className={classes.inner}>
+					<div className={classes.content}>
+						<Title className={classes.title}>
+							The <span className={classes.highlight}>most popular</span> way to build Discord <br /> bots.
+						</Title>
+						<Text color="dimmed" mt="md">
+							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&apos;s
+							code significantly tidier and easier to comprehend.
+						</Text>
+
+						<Group mt={30}>
 							<Link href="/docs" passHref>
-								<LinkButton label="Check out the docs" />
+								<Button component="a" radius="xl" size="md" className={classes.control}>
+									Docs
+								</Button>
 							</Link>
-						</div>
-					</div>
-					<div className="sm:flex sm:grow sm:shrink h-full xl:items-center hidden">
-						<Image src={codeSample} className="max-w-[600px] h-full rounded-xl shadow-md overflow-hidden" />
+							<Link href="https://discordjs.guide" passHref>
+								<Button component="a" variant="default" radius="xl" size="md" className={classes.control}>
+									Guide
+								</Button>
+							</Link>
+						</Group>
 					</div>
+					<Image src={codeSample} className={classes.image} />
 				</div>
-				<div className="flex place-content-center">
-					<a href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss" title="Vercel">
-						<Image
-							// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-							src={vercelLogo}
-							alt="Vercel"
-							className="max-w-[250px] shadow-md overflow-hidden"
-						/>
-					</a>
-				</div>
-			</div>
-		</main>
+				<Center>
+					<Link href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss" passHref>
+						<a title="Vercel">
+							<Image
+								// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+								src={vercelLogo}
+								alt="Vercel"
+								className={classes.vercel}
+							/>
+						</a>
+					</Link>
+				</Center>
+			</Container>
+		</div>
 	);
 }