feat: add Team section, minor lint and deps change

components/TeamCard/TeamCard.js

@@ -0,0 +1,35 @@
+import styles from './TeamCard.module.css';
+import Image from 'next/image';
+import Link from 'next/link';
+
+import classNames from 'classnames';
+
+/**
+ * A reusable component to credit someone.
+ *
+ * @param {string} name - The name of the contributor.
+ * @param {string} caption - A caption that more or less describes the user's contributions.
+ * @param {string} pic - A link to the avatar image.
+ * @param {string} link - A link to the user page for this user (e.g. github/gitlab/gitbucket/gitrekt profile, fedi account, personal website/blog, ...)
+ * @param {boolean} compact - Whether the card should be compact (e.g. Special thanks section) or regular sized (e.g. The team section).
+ *
+ * @example
+ * <TeamCard name="Ash (pinklimes)" caption="greatest web developer, right after Charlotte" pic="https://limes.pink/assets/images/spinmii.gif" link="https://limes.pink" />
+ *
+ */
+
+export default function TeamCard(ctx) {
+	const { name, caption, pic, link, compact, className } = ctx;
+
+	return (
+		<Link href={link} className={classNames(styles.card, { [styles.compact]: compact }, className)}>
+			<div className={styles.imageWrapper}>
+				<Image src={pic} width={110} height={110} alt="" className={styles.image} />
+			</div>
+			<div className={styles.text}>
+				<h3>{name}</h3>
+				<p>{caption}</p>
+			</div>
+		</Link>
+	);
+}

components/TeamCard/TeamCard.module.css

@@ -0,0 +1,62 @@
+.card {
+	display: grid;
+	margin: 0.6rem;
+	padding: 1rem;
+	width: 100%;
+	max-width: 28rem;
+	background-color: var(--bg-shade-0);
+	color: var(--text-shade-1);
+	grid-template-columns: min-content auto;
+	align-items: center;
+	gap: 1.5rem;
+	border-radius: 1rem;
+	font-weight: inherit;
+}
+
+.card:hover {
+	background-color: var(--bg-shade-2);
+	box-shadow: 0 0 0 1px var(--bg-shade-3) inset;
+}
+
+.imageWrapper {
+	position: relative;
+	/* the .imageWrapper and .image radii differ to prevent a rendering bug where the image corners were glitchy */
+	border-radius: 0.6rem;
+	width: 110px;
+	height: 110px;
+	background-color: var(--accent-shade-3);
+}
+
+.image {
+	width: 100%;
+	height: 100%;
+	border-radius: 0.5rem;
+}
+
+.text {
+	display: flex;
+	flex-flow: column;
+	justify-content: center;
+}
+
+.text * {
+	margin: 0;
+	line-height: 2;
+}
+
+.text p {
+	font-size: 1rem;
+	font-weight: 300;
+}
+
+@media screen and (max-width: 36rem) {
+	.card {
+		padding: .9rem;
+		border-radius: .7rem;
+	}
+
+	.imageWrapper {
+		width: 64px;
+		height: 64px;
+	}
+}

next.config.js

@@ -6,6 +6,28 @@ const nextConfig = {
 	i18n: {
 		locales: getLocaleList(),
 		defaultLocale: 'en-US',
+	},
+	images: {
+		remotePatterns: [
+			{
+				protocol: 'https',
+				hostname: 'github.com',
+				port: '',
+				pathname: '/*'
+			},
+			{
+				protocol: 'https',
+				hostname: 'avatars.githubusercontent.com',
+				port: '',
+				pathname: '/u/*'
+			},
+			{
+				protocol: 'https',
+				hostname: 'cdn.discordapp.com',
+				port: '',
+				pathname: '/avatars/*'
+			}
+		]
 	}
 };
 

package-lock.json

@@ -805,9 +805,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001429",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001429.tgz",
-      "integrity": "sha512-511ThLu1hF+5RRRt0zYCf2U2yRr9GPF6m5y90SBCWsvSoYoW7yAGlv/elyPaNfvGCkp6kj/KFZWU0BMA69Prsg==",
+      "version": "1.0.30001519",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz",
+      "integrity": "sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==",
       "funding": [
         {
           "type": "opencollective",
@@ -816,6 +816,10 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ]
     },
@@ -4588,9 +4592,9 @@
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
     },
     "caniuse-lite": {
-      "version": "1.0.30001429",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001429.tgz",
-      "integrity": "sha512-511ThLu1hF+5RRRt0zYCf2U2yRr9GPF6m5y90SBCWsvSoYoW7yAGlv/elyPaNfvGCkp6kj/KFZWU0BMA69Prsg=="
+      "version": "1.0.30001519",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz",
+      "integrity": "sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg=="
     },
     "chalk": {
       "version": "5.3.0",

pages/index.js

@@ -6,6 +6,7 @@ import Section from '../components/Section/Section';
 import ShowcaseSection from '../components/ShowcaseSection/ShowcaseSection';
 import Faq from '../components/Faq/Faq';
 import Hero from '../components/Hero/Hero';
+import TeamCard from '../components/TeamCard/TeamCard';
 
 import Image from 'next/image';
 
@@ -40,22 +41,20 @@ export default function Home({ locale }) {
 	const router = useRouter();
 	return (
 		<main>
-			<Section>
+			<Section style={{ minHeight: '100vh', padding: 0 }}>
 				<Hero />
 			</Section>
 			<div id="showcase">
 				<Section className={styles.showcaseSection}>
 					<Title>What we make.</Title>
-					<Caption>
-						Our project has many components. Here are some of them.
-					</Caption>
+					<Caption>Our project has many components. Here are some of them.</Caption>
 				</Section>
-				{locale.showcase.map((element, i) => {
+				{locale.showcase.map((el, i) => {
 					return (
 						<ShowcaseSection
-							title={element.title}
-							caption={element.caption}
-							image={showcaseImages[element.image]}
+							title={el.title}
+							caption={el.caption}
+							image={showcaseImages[el.image]}
 							isOdd={i % 2 !== 0}
 							key={i}
 						/>
@@ -71,26 +70,38 @@ export default function Home({ locale }) {
 					/>
 					<div className={styles.text}>
 						<Title>And much more!</Title>
-						<p className={styles.caption}>
+						<Caption center>
 							Check out our progress page for an extensive list of our current progress and goals!
-						</p>
+						</Caption>
 						<Button
-							isPrimary={true}
+							isPrimary
 							onClick={(e) => {
 								e.preventDefault();
 								router.push('/progress');
 							}}
+							style={{ margin: '2.5rem auto 0' }}
 						>
 							Check progress
 						</Button>
 					</div>
 				</Section>
 			</div>
-			<Section>
+			<Section style={{ paddingBottom: '72px' }}>
 				<Title id="faq">{locale.faq.title}</Title>
-				<p className={styles.caption}>{locale.faq.text}</p>
+				<Caption>{locale.faq.text}</Caption>
 				<Faq questionObject={locale.faq.QAs} />
 			</Section>
+			<Section>
+				<Title center id="credits">{locale.credits.title}</Title>
+				<Caption center>{locale.credits.text}</Caption>
+				<div className={styles.teamWrapper}>
+					{locale.credits.people.map((el, i) => {
+						return (
+							<TeamCard name={el.name} caption={el.caption} pic={el.picture} link={el.github} key={i} />
+						);
+					})}
+				</div>
+			</Section>
 		</main>
 	);
 }

pages/index.module.css

@@ -11,7 +11,7 @@
 }
 
 .showcaseSection::after {
-	content: "";
+	content: '';
 	width: 400vw;
 	height: calc(100% + 256px);
 	margin-left: -50vw;
@@ -50,6 +50,14 @@
 	margin: 1rem auto 2rem;
 }
 
+.teamWrapper {
+	display: flex;
+	justify-content: center;
+	flex-wrap: wrap;
+	margin: -10px;
+	margin-top: 80px;
+}
+
 @media screen and (max-width: 840px) {
 	.showcaseTail {
 		padding: 90px 0;

styles/globals.css

@@ -1,25 +1,24 @@
 :root {
-
 	--width: 1500px;
 	--maxwidth: min(var(--width), 90%);
 
 	/* 1 is the base color, <1 are darker variations and >1 are lighter */
 	--bg-shade-0: #131733;
-	--bg-shade-1: #1B1F3B;
-	--bg-shade-2: #23274A;
-	--bg-shade-2-5: #2D3258;
-	--bg-shade-3: #373C65;
+	--bg-shade-1: #1b1f3b;
+	--bg-shade-2: #23274a;
+	--bg-shade-2-5: #2d3258;
+	--bg-shade-3: #373c65;
 	--bg-shade-3-5: #404673;
-	--bg-shade-4: #494F81;
+	--bg-shade-4: #494f81;
 
-	--accent-shade-0: #673DB6;
-	--accent-shade-1: #9D6FF3;
-	--accent-shade-2: #A185D6;
-	--accent-shade-3: #CAB1FB;
+	--accent-shade-0: #673db6;
+	--accent-shade-1: #9d6ff3;
+	--accent-shade-2: #a185d6;
+	--accent-shade-3: #cab1fb;
 
-	--text-shade-0: #8990C1;
-	--text-shade-1: #A1A8D9;
-	--text-shade-2: #CAC1F5;
+	--text-shade-0: #8990c1;
+	--text-shade-1: #a1a8d9;
+	--text-shade-2: #cac1f5;
 	--text-shade-3: #fff;
 
 	--green-shade-0: #37a985;
@@ -51,6 +50,15 @@ a {
 	font-weight: bold;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	color: var(--text-shade-3);
+}
+
 /* Scrollbar styling 'cause it's fancy */
 *::-webkit-scrollbar {
 	width: 12px;