chore: accessibility, minor changes

components/Button/Button.module.css

@@ -16,14 +16,14 @@
 	justify-content: center;
 	padding: 8px;
 }
-
+/*
 .button:hover {
 	box-shadow: 0 0 0 1px var(--bg-shade-4) inset;
 }
 
 .button.primary:hover {
 	box-shadow: 0 0 0 1px var(--accent-shade-3) inset;
-}
+}*/
 
 .button.compact {
 	padding: 9px 18px;

components/ButtonWidget/ButtonWidget.module.css

@@ -16,5 +16,5 @@
 .widget p {
 	color: var(--text-shade-1);
 	margin: 0;
-	margin-right: 5rem;
+	margin-right: min(5rem, 5vw);
 }

components/CoolHover/CoolHover.module.css

@@ -1,3 +1,3 @@
-.coolHover * {
+.coolHover *:not(button) {
 	pointer-events: none;
-}
+}

components/Faq/Faq.js

@@ -16,8 +16,13 @@ export default function Faq(ctx) {
 	// reusable question component
 	const QnA = ({ question, i, selected }) => (
 		<div className={styles.question}>
-			<h3 className={classNames({ [styles.selected]: selected })} onClick={() => setSelectedIndex(i)}>
-				<CaretRight size={24} weight="bold" className={styles.chevron} />
+			<h3
+				className={classNames({ [styles.selected]: selected })}
+				onClick={() => setSelectedIndex(i)}
+				onKeyDown={(e) => e.key === 'Enter' && setSelectedIndex(i)}
+				tabIndex="0"
+			>
+				<CaretRight size={24} weight="bold" className={styles.chevron} alt="" />
 				{question.question}
 			</h3>
 			<p style={{ display: selected ? 'block' : 'none' }} dangerouslySetInnerHTML={{ __html: question.answer }} />

components/Hero/Hero.js

@@ -5,6 +5,8 @@ import Title from '../Title/Title';
 import Caption from '../Caption/Caption';
 import Button from '../Button/Button';
 
+import Link from 'next/link';
+
 import styles from './Hero.module.css';
 
 import { DiscordLogo, GithubLogo, Heart } from 'phosphor-react';
@@ -20,20 +22,20 @@ export default function Hero() {
 					allowing online connectivity for all, even after the original servers are discontinued
 				</Caption>
 				<div className={styles.buttons}>
-					<a href="#showcase">
+					<Link href="#showcase">
 						<Button primary>Read more</Button>
-					</a>
-					<a href="https://discord.gg/pretendo" aria-label="A link to our Discord server">
+					</Link>
+					<Link href="https://discord.gg/pretendo" aria-label="Discord server">
 						<Button icon>
 							<DiscordLogo size={32} weight="fill" />
 						</Button>
-					</a>
-					<a href="https://github.com/pretendonetwork" aria-label="A link to our GitHub organization">
+					</Link>
+					<Link href="https://github.com/pretendonetwork" aria-label="GitHub organization">
 						<Button icon>
 							<GithubLogo size={32} weight="fill" />
 						</Button>
-					</a>
-					<a href="/account/upgrade" aria-label="A link to our account upgrade page">
+					</Link>
+					<a href="/account/upgrade" aria-label="Upgrade page">
 						<Button icon>
 							<Heart size={32} weight="fill" />
 						</Button>

components/TeamCard/TeamCard.module.css

@@ -132,4 +132,8 @@
 		width: 64px;
 		height: 64px;
 	}
+
+	.compact.card {
+		padding: 0.75rem
+	}
 }

pages/index.js

@@ -176,12 +176,20 @@ export default function Home({ locale }) {
 
 				<ButtonWidget
 					primary
-					buttonText={locale.discordJoin.widget.button + " TODO: ADD LINK"}
+					buttonText={locale.discordJoin.widget.button}
+					onButtonClick={(e) => {
+						e.preventDefault();
+						window.open('https://discord.gg/pretendo', '_blank');
+					}}
 					style={{ margin: '0 auto 4rem' }}
 				>
 					{locale.discordJoin.widget.text}
 				</ButtonWidget>
 			</Section>
+
+			<Footer>
+
+			</Footer>
 		</main>
 	);
 }

pages/index.module.css

@@ -68,11 +68,6 @@
 	overflow: hidden;
 }
 
-.thanksAniWrap::before {
-	content: '';
-	position: absolute;
-}
-
 .thanksAniWrap::after {
 	content: '';
 	position: absolute;
@@ -146,4 +141,16 @@
 		width: 100%;
 		max-width: 600px;
 	}
+
+	.thanksAniWrap {
+		transform: none;
+	}
+
+	.thanksAniWrap .inner {
+		overflow: visible;
+	}
+
+	.thanksAniWrap::after {
+		display: none;
+	}
 }