AnswerOverflow · RhysSullivan · May 11, 2023 · Mar 1, 2023 · Mar 27, 2023 · Mar 28, 2023
diff --git a/apps/main-site/next.config.mjs b/apps/main-site/next.config.mjs
@@ -37,7 +37,7 @@ const config = {
 		outputFileTracingIgnores: ['**swc/core**'],
 	},
 	images: {
-		domains: ['cdn.discordapp.com'],
+		domains: ['cdn.discordapp.com', 'avatars.githubusercontent.com'],
 	},
 	// We already do linting on GH actions
 	eslint: {

diff --git a/apps/main-site/src/data/contributors-data.ts b/apps/main-site/src/data/contributors-data.ts
@@ -0,0 +1,43 @@
+import type { ContributorData } from '@answeroverflow/ui/src/components/primitives/Contributors';
+/* eslint-disable @typescript-eslint/naming-convention */
+
+export const coreTeamContributors: ContributorData[] = [
+	{
+		name: 'Rhys',
+		description: 'Project Founder and Lead',
+		avatar: 'https://avatars.githubusercontent.com/u/39114868',
+		links: [
+			'https://github.com/RhysSullivan',
+			'https://www.linkedin.com/in/rhyssullivan/',
+			'https://twitter.com/RhysSullivan',
+			'mailto:rhys.sullivan@answeroverflow.com',
+		],
+	},
+];
+
+export const openSourceContributors: ContributorData[] = [
+	{
+		name: 'Jolt',
+		description: 'Frontend development and design',
+		avatar: 'https://avatars.githubusercontent.com/u/46378904',
+		links: ['https://github.com/JoltCode', 'mailto:joe@joecc.dev'],
+	},
+	{
+		name: 'Kyle',
+		description: 'Checkmarks on solution messages',
+		avatar: 'https://avatars.githubusercontent.com/u/38047633',
+		links: ['https://github.com/uerk-io'],
+	},
+	{
+		name: 'Cole Heigis',
+		description: 'Frontend server cards',
+		avatar: 'https://avatars.githubusercontent.com/u/123331535',
+		links: ['https://github.com/Cole-Heigis'],
+	},
+	// {
+	// 	name: 'Orion Tether',
+	// 	description: 'Icon creation',
+	// 	avatar: 'https://avatars.githubusercontent.com/u/46378904',
+	// 	links: ['https://www.artstation.com/huntertether'],
+	// },
+];
diff --git a/apps/main-site/src/pages/contributors.mdx b/apps/main-site/src/pages/contributors.mdx
@@ -0,0 +1,21 @@
+import {
+	openSourceContributors,
+	coreTeamContributors,
+} from '../data/contributors-data';
+import { Contributors } from '@answeroverflow/ui/src/components/primitives/Contributors';
+
+# Contributors
+
+## Core Team
+
+<Contributors contributors={coreTeamContributors} />
+
+---
+
+<br />
+
+## Open Source Contributors
+
+<Contributors contributors={openSourceContributors} />
+
+### If you would like to contribute, please read the [contributing docs](https://github.com/AnswerOverflow/AnswerOverflow/blob/main/CONTRIBUTING.md).
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -35,14 +35,14 @@
 		"@trpc/client": "^10.25.0",
 		"@trpc/react-query": "^10.25.0",
 		"@trpc/server": "^10.25.0",
-		"bootstrap-icons": "^1.10.4",
 		"clsx": "^1.2.1",
 		"cva": "npm:class-variance-authority",
 		"discord-markdown": "^2.5.1",
 		"gsap": "^3.11.4",
 		"highlight.js": "^11.7.0",
 		"next": "^13.4.1",
 		"react-fast-marquee": "^1.4.0",
+		"react-social-icons": "^5.15.0",
 		"react-spring": "^9.7.1",
 		"react-toastify": "^9.1.2",
 		"react-use": "^17.4.0",

diff --git a/packages/ui/src/components/pages/Home.tsx b/packages/ui/src/components/pages/Home.tsx
@@ -28,7 +28,7 @@ export const Home = () => {
 		});
 
 	return (
-		<div className="flex w-full flex-col items-center bg-ao-white dark:bg-[linear-gradient(180.49deg,_#1A1818_-12.07%,_#0E0D0D_-12.07%,_#040405_-12.06%,_#101214_103.52%)]">
+		<div className="flex w-full flex-col items-center bg-ao-white font-body dark:bg-[linear-gradient(180.49deg,_#1A1818_-12.07%,_#0E0D0D_-12.07%,_#040405_-12.06%,_#101214_103.52%)]">
 			<div className="max-w-screen-3xl">
 				<div className="relative ">
 					<Navbar />

diff --git a/packages/ui/src/components/pages/MessageResultPage.tsx b/packages/ui/src/components/pages/MessageResultPage.tsx
@@ -112,7 +112,7 @@ export function MessageResultPage({
 	});
 
 	return (
-		<div className="sm:mx-3 ">
+		<div className="sm:mx-3">
 			<AOHead
 				description={description}
 				path={`/m/${firstMessage?.id ?? requestedId}`}
@@ -133,7 +133,7 @@ export function MessageResultPage({
 			<div className="rounded-md">
 				<div className="mb-4 flex flex-row items-center justify-start rounded-sm border-b-2 border-solid border-neutral-400 pb-2 text-center leading-5 dark:border-neutral-600  dark:text-white">
 					<ChannelIcon channelType={channel.type} className="h-6 w-6" />
-					<h1 className="text-3xl">
+					<h1 className="font-header text-3xl">
 						{thread ? `${thread.name}` : `${channel.name}`}
 					</h1>
 				</div>

diff --git a/packages/ui/src/components/pages/PageWrapper.tsx b/packages/ui/src/components/pages/PageWrapper.tsx
@@ -28,7 +28,7 @@ export const PageWrapper = ({
 
 export const PageWrapperRenderer = ({ children }: PageWrapperProps) => {
 	return (
-		<div className="mx-auto flex w-full flex-col items-center overflow-x-hidden overflow-y-scroll bg-ao-white scrollbar-hide dark:bg-ao-black">
+		<div className="mx-auto flex w-full flex-col items-center overflow-x-hidden overflow-y-scroll bg-ao-white font-body scrollbar-hide dark:bg-ao-black">
 			<div className="w-full max-w-screen-2xl justify-center">
 				<Navbar />
 				<main className="bg-ao-white px-4 dark:bg-ao-black sm:px-[4rem] 2xl:px-[6rem]">

diff --git a/packages/ui/src/components/primitives/Contributors.stories.tsx b/packages/ui/src/components/primitives/Contributors.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Contributors } from './Contributors';
+const meta = {
+	component: Contributors,
+} as Meta<typeof Contributors>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ContributorsStory: Story = {
+	args: {
+		contributors: [
+			{
+				avatar: 'https://avatars.githubusercontent.com/u/9919?s=200&v=4',
+				description: 'User description',
+				name: 'User name',
+				links: ['http://localhost:3000/contributors'],
+			},
+		],
+	},
+};
diff --git a/packages/ui/src/components/primitives/Contributors.tsx b/packages/ui/src/components/primitives/Contributors.tsx
@@ -0,0 +1,60 @@
+import { FollowCursor } from './Follow';
+import { Avatar, AvatarFallback, AvatarImage } from './base';
+import { SocialIcon } from 'react-social-icons';
+
+export interface ContributorData {
+	name: string;
+	description: string;
+	avatar: string;
+	links: string[];
+}
+
+export const Contributor = ({
+	name,
+	description,
+	avatar,
+	links,
+}: ContributorData) => (
+	<div className="flex h-full w-64 flex-col items-center justify-start rounded-standard border-1 border-ao-black/25 bg-ao-black/[0.03] px-8 py-16 dark:border-0 dark:bg-[#1F2124]">
+		<Avatar size="xl">
+			<AvatarImage alt={`The profile picture of ${name}`} src={avatar} />
+			<AvatarFallback>{name}</AvatarFallback>
+		</Avatar>
+		<div className="grow">
+			<div className="flex flex-col items-center justify-between text-black dark:text-white">
+				<h3 className="mt-2 font-header text-2xl font-semibold">{name}</h3>
+				<p className="mb-2 text-center font-body text-black/90 dark:text-white/75">
+					{description}
+				</p>
+			</div>
+		</div>
+		<div className="flex h-20 flex-row gap-4 border-t-2 border-ao-black/20 pt-4 dark:border-ao-white/10">
+			{Object.entries(links).map(([key, value]) => (
+				<SocialIcon
+					url={value}
+					key={`${name}-${key}-${value}`}
+					className="fill-black dark:fill-white"
+					style={{
+						height: '32px',
+						width: '32px',
+					}}
+					bgColor="inherit"
+				/>
+			))}
+		</div>
+	</div>
+);
+
+export const Contributors = ({
+	contributors,
+}: {
+	contributors: ContributorData[];
+}) => (
+	<div className="mx-auto my-16 grid w-max grid-cols-1 gap-8 md:mx-0 md:mr-auto md:grid-flow-col md:grid-cols-2">
+		{contributors.map((contributor) => (
+			<FollowCursor key={`${contributor.name}`} intensity={25}>
+				<Contributor key={contributor.name} {...contributor} />
+			</FollowCursor>
+		))}
+	</div>
+);
diff --git a/packages/ui/src/components/primitives/Follow.tsx b/packages/ui/src/components/primitives/Follow.tsx
@@ -1,33 +1,33 @@
 import * as React from 'react';
 import { useSpring, animated } from 'react-spring';
 
-const calc = (x: number, y: number, ref: React.RefObject<HTMLDivElement>) => {
-	if (!ref.current) return [0, 0, 1];
-	const rect = ref.current.getBoundingClientRect();
-	return [
-		-(y - rect.top - rect.height / 2) / 20,
-		(x - rect.left - rect.width / 2) / 20,
-		1.0,
-	];
-};
-
 export const FollowCursor = (props: {
 	className?: string;
 	children: React.ReactNode;
+	intensity?: number;
+	scale?: number;
 }) => {
 	const [spr, set] = useSpring(() => ({
 		xys: [0, 0, 1],
 		config: { mass: 2, tension: 350, friction: 100 },
 	}));
 	const animatedRef = React.useRef<HTMLDivElement>(null);
 
+	const calc = (x: number, y: number) => {
+		if (!animatedRef.current) return [0, 0, 1];
+		const rect = animatedRef.current.getBoundingClientRect();
+		return [
+			-(y - rect.top - rect.height / 2) / (props.intensity ?? 10),
+			(x - rect.left - rect.width / 2) / (props.intensity ?? 10),
+			props.scale ?? 1,
+		];
+	};
+
 	return (
 		<animated.div
 			className={props.className}
 			ref={animatedRef}
-			onMouseMove={({ clientX: x, clientY: y }) =>
-				set({ xys: calc(x, y, animatedRef) })
-			}
+			onMouseMove={({ clientX: x, clientY: y }) => set({ xys: calc(x, y) })}
 			onMouseLeave={() => set({ xys: [0, 0, 1] })}
 			style={{
 				transform: spr.xys.to(

diff --git a/packages/ui/src/components/primitives/Footer.tsx b/packages/ui/src/components/primitives/Footer.tsx
@@ -5,15 +5,56 @@ import {
 	GITHUB_LINK,
 	TWITTER_LINK,
 } from '@answeroverflow/constants/src/links';
-import { DiscordIcon, GitHubIcon } from './base';
+import { DiscordIcon, GitHubIcon, Heading } from './base';
 
-const navigation = {
+type SocialItem = {
+	name: string;
+	href: string;
+	icon: any;
+};
+
+interface NavigationData {
+	main: {
+		category: {
+			name: string;
+			data: {
+				name: string;
+				href: string;
+			}[];
+		};
+	}[];
+	social: SocialItem[];
+}
+
+const navigation: NavigationData = {
 	main: [
-		{ name: 'Terms', href: 'https://www.answeroverflow.com/tos' },
-		{ name: 'Privacy', href: 'https://www.answeroverflow.com/privacy' },
-		{ name: 'Cookies', href: 'https://www.answeroverflow.com/cookies' },
-		{ name: 'EULA', href: 'https://www.answeroverflow.com/eula' },
-		{ name: 'Docs', href: 'https://docs.answeroverflow.com' },
+		{
+			category: {
+				name: 'Legal',
+				data: [
+					{ name: 'Terms', href: 'https://www.answeroverflow.com/tos' },
+					{ name: 'Privacy', href: 'https://www.answeroverflow.com/privacy' },
+					{ name: 'Cookies', href: 'https://www.answeroverflow.com/cookies' },
+					{ name: 'EULA', href: 'https://www.answeroverflow.com/eula' },
+				],
+			},
+		},
+		{
+			category: {
+				name: 'About',
+				data: [
+					{ name: 'Docs', href: 'https://docs.answeroverflow.com' },
+					{
+						name: 'Contributors',
+						href: 'https://www.answeroverflow.com/contributors',
+					},
+					{
+						name: 'Communities',
+						href: 'https://www.answeroverflow.com/browse',
+					},
+				],
+			},
+		},
 	],
 	social: [
 		{
@@ -46,18 +87,33 @@ export function Footer() {
 					className="-mb-6 columns-1 text-center sm:flex sm:columns-2  sm:justify-center sm:space-x-12"
 					aria-label="Footer"
 				>
-					{navigation.main.map((item) => (
-						<div key={item.name} className="pb-6">
-							<Link
-								href={item.href}
-								className="text-sm leading-6 text-gray-600 hover:text-gray-900 dark:text-neutral-400 dark:hover:text-neutral-300"
-							>
-								{item.name}
-							</Link>
-						</div>
-					))}
+					<div className="grid grid-cols-1 gap-12 md:grid-cols-2 md:gap-24">
+						{navigation.main.map((category) => {
+							return (
+								<div
+									key={`category-${category.category.name}`}
+									className="flex flex-col"
+								>
+									<Heading.H2 className="font-header text-lg font-bold text-black dark:text-white">
+										{category.category.name}
+									</Heading.H2>
+									{category.category.data.map((item) => {
+										return (
+											<Link
+												href={item.href}
+												key={`link-${item.name}-${item.href}`}
+												className="font-body leading-6 text-gray-600 hover:text-gray-900 dark:text-neutral-400 dark:hover:text-neutral-200"
+											>
+												{item.name}
+											</Link>
+										);
+									})}
+								</div>
+							);
+						})}
+					</div>
 				</nav>
-				<div className="mt-10 flex justify-center space-x-10">
+				<div className="mt-16 flex justify-center space-x-10">
 					{navigation.social.map((item) => (
 						<Link
 							key={item.name}
@@ -71,7 +127,7 @@ export function Footer() {
 						</Link>
 					))}
 				</div>
-				<p className="mt-10 text-center text-xs leading-5 text-gray-500 dark:text-neutral-400">
+				<p className="mt-10 text-center font-body text-xs leading-5 text-gray-500 dark:text-neutral-400">
 					&copy; 2023 Hedgehog Software, LLC. All rights reserved.
 				</p>
 			</div>

diff --git a/packages/ui/src/components/primitives/base/Button.tsx b/packages/ui/src/components/primitives/base/Button.tsx
@@ -4,7 +4,7 @@ import { type VariantProps, cva } from 'cva';
 import { cn } from '~ui/utils/styling';
 
 const buttonVariants = cva(
-	'active:scale-95 inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:hover:bg-slate-800 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-900 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-slate-800',
+	'active:scale-95 inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:hover:bg-slate-800 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-900 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-slate-800 font-body',
 	{
 		variants: {
 			variant: {