Added "Get Involved" page

src/App.css

@@ -5,25 +5,6 @@
 	font-size: 1.5rem;
 }
 
-/* Three column layout */
-.split-thirds {
-	margin: 2rem auto;
-	display: flex;
-	flex-wrap: wrap;
-}
-
-@media (min-width: 1024px) {
-	.split-thirds > div {
-		width: 33.33%;
-	}
-}
-
-@media (max-width: 1024px) {
-	.split-thirds > div {
-		width: 100%;
-	}
-}
-
 .space-2 {
 	margin: 1rem;
 	padding: 1rem;

src/App.tsx

@@ -6,6 +6,7 @@ import './App.css';
 
 import index from './pages/index';
 import initiatives from './pages/initiatives';
+import involved from './pages/involved';
 import mission from './pages/mission';
 import news from './pages/news';
 import newsArticle from './pages/newsArticle';
@@ -20,6 +21,7 @@ export default function App() {
 			<Layout>
 				<Switch>
 					<Route path='/initiatives' exact component={initiatives} />
+					<Route path='/involved' exact component={involved} />
 					<Route path='/news/:articleId' component={newsArticle} />
 					<Route path='/news' exact component={news} />
 					<Route path='/mission' exact component={mission} />

src/components/GetInvolvedRow.tsx

@@ -0,0 +1,12 @@
+export default function GetInvolvedRow({ way }: { way: SGA.GetInvolvedWay}) {
+	return (
+		<div className='row'>
+			<div className='get-involved-title'>
+				<h3>{way.title}</h3>
+			</div>
+			<div className='get-involved-description'>
+				<p className="get-involved-body">{way.text}</p>
+			</div>
+		</div>
+	);
+}

src/components/Navbar.tsx

@@ -62,7 +62,7 @@ export default function Navbar() {
 			{pages.map((page) => {
 				if ('items' in page) {
 					return (
-						<div className='submenu-outer' key={page.url}>
+						<div className='submenu-outer' key={page.title}>
 							<Link className='nav-link' to={page.url}>
 								{page.title}
 							</Link>

src/css/get-involved.css

@@ -0,0 +1,14 @@
+.get-involved-body {
+	color: #444;
+	font-size: 22px;
+	line-height: 33px;
+	font-weight: 300;
+}
+
+.get-involved-title {
+	flex: 1;
+}
+
+.get-involved-description {
+	flex: 3;
+}

src/index.d.ts

@@ -23,6 +23,23 @@ declare namespace SGA {
 		committee: 'excomm' | 'officer' | 'class';
 		role: string;
 		profile_photo: {};
-		bio: string
+		bio: string;
+	}
+
+	interface GetInvolvedWay {
+		_id: string;
+		title: string;
+		text: string;
+	};
+
+	interface GetInvolvedDocument {
+		ways: GetInvolvedWay[];
+	}
+
+	interface FooterDocument {
+		columns: {
+			_id: string;
+			content: any[];
+		}[];
 	}
 }

src/pages/involved.tsx

@@ -11,7 +11,7 @@ export default function GetInvolved() {
 	>();
 
 	React.useEffect(() => {
-		sanity.getDocument<SGA.GetInvolvedDocument>('ways').then(setWays);
+		sanity.getDocument<SGA.GetInvolvedDocument>('get_involved').then(setWays);
 	}, []);
 
 	return (
@@ -29,7 +29,7 @@ export default function GetInvolved() {
 				<>
 					<h3>Here are some ways to connect with SGA:</h3>
 					{ways.ways.map((way) => (
-						<GetInvolvedRow way={way} />
+						<GetInvolvedRow way={way} key={way._id} />
 					))}
 				</>
 			) : null}