From 9074f79dee37381efd6b52e7879356d80485b134 Mon Sep 17 00:00:00 2001
From: Brandon Egger <brandonegger64@gmail.com>
Date: Thu, 24 Aug 2023 13:39:23 -0500
Subject: [PATCH] replace remaining pages with new layout

---
 src/layouts/HeaderFooterLayout.tsx |  2 +-
 src/pages/about.tsx                | 87 ++++++++++++++----------------
 src/pages/contact.tsx              | 13 ++---
 src/pages/resources/index.tsx      |  2 +-
 src/pages/resources/search.tsx     | 19 ++-----
 5 files changed, 53 insertions(+), 70 deletions(-)

diff --git a/src/layouts/HeaderFooterLayout.tsx b/src/layouts/HeaderFooterLayout.tsx
index 24dd96a..d155a51 100644
--- a/src/layouts/HeaderFooterLayout.tsx
+++ b/src/layouts/HeaderFooterLayout.tsx
@@ -6,7 +6,7 @@ export const HeaderFooterLayout = ({ children }: { children: ReactNode }) => {
   return (
     <div className="flex h-full min-h-screen flex-col">
       <Header />
-      <main className="mx-auto w-full max-w-6xl grow">{children}</main>
+      <main className="mx-auto w-full grow">{children}</main>
       <Footer />
     </div>
   );
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
index 80de2ef..2b6a9e6 100644
--- a/src/pages/about.tsx
+++ b/src/pages/about.tsx
@@ -1,8 +1,7 @@
 import { type NextPage } from "next/types";
 import Image from "next/image";
 import { HandRaisedIcon } from "@heroicons/react/24/solid";
-import Footer from "~/components/Footer";
-import Header from "~/components/Header";
+import { HeaderFooterLayout } from "~/layouts/HeaderFooterLayout";
 
 type Position = "left" | "right";
 interface Biography {
@@ -70,60 +69,56 @@ const biographies: Biography[] = [
 
 const About: NextPage = () => {
   return (
-    <>
-      <Header />
-      <main>
+    <HeaderFooterLayout>
+      <div
+        style={{
+          backgroundImage: `url("/backdrops/uiowa-aerial.jpeg")`,
+          backgroundPosition: `center`,
+        }}
+        className="h-96"
+      >
         <div
           style={{
-            backgroundImage: `url("/backdrops/uiowa-aerial.jpeg")`,
-            backgroundPosition: `center`,
+            WebkitBackdropFilter: `blur(5px) contrast(50%)`,
+            backdropFilter: `blur(5px) contrast(50%)`,
           }}
-          className="h-96"
+          className="grid h-full w-full place-items-center"
         >
-          <div
-            style={{
-              WebkitBackdropFilter: `blur(5px) contrast(50%)`,
-              backdropFilter: `blur(5px) contrast(50%)`,
-            }}
-            className="grid h-full w-full place-items-center"
-          >
-            <div className="space-y-8">
-              <h1 className="mx-auto max-w-lg text-center text-5xl font-extrabold text-yellow-200">
-                About Us
+          <div className="space-y-8">
+            <h1 className="mx-auto max-w-lg text-center text-5xl font-extrabold text-yellow-200">
+              About Us
+            </h1>
+          </div>
+        </div>
+      </div>
+      <div className="w-full">
+        <div className="mx-auto max-w-7xl">
+          <div className="sm:p-8">
+            {/** Small screens */}
+            <div className="w-full border-b-2 border-yellow-400 bg-neutral-900 p-4 sm:hidden">
+              <h1 className="text-center text-4xl font-bold text-white">
+                Meet the Team
+                <HandRaisedIcon className="animate-hand_pop ml-4 inline w-12 rotate-12 animate-hand_wave text-yellow-200" />
+              </h1>
+            </div>
+            {/** Large screens */}
+            <div className="mx-auto mx-auto mb-20 mt-8 hidden w-max rounded-xl border-2 border-neutral-300 bg-neutral-900 p-4 shadow-xl sm:block">
+              <h1 className="text-center text-4xl font-bold text-white">
+                Meet the Team
+                <HandRaisedIcon className="ml-4 inline w-12 rotate-12 animate-hand_wave text-yellow-200" />
               </h1>
             </div>
-          </div>
-        </div>
-        <div className="w-full">
-          <div className="mx-auto max-w-7xl">
-            <div className="sm:p-8">
-              {/** Small screens */}
-              <div className="w-full border-b-2 border-yellow-400 bg-neutral-900 p-4 sm:hidden">
-                <h1 className="text-center text-4xl font-bold text-white">
-                  Meet the Team
-                  <HandRaisedIcon className="animate-hand_pop ml-4 inline w-12 rotate-12 animate-hand_wave text-yellow-200" />
-                </h1>
-              </div>
-              {/** Large screens */}
-              <div className="mx-auto mx-auto mb-20 mt-8 hidden w-max rounded-xl border-2 border-neutral-300 bg-neutral-900 p-4 shadow-xl sm:block">
-                <h1 className="text-center text-4xl font-bold text-white">
-                  Meet the Team
-                  <HandRaisedIcon className="ml-4 inline w-12 rotate-12 animate-hand_wave text-yellow-200" />
-                </h1>
-              </div>
 
-              {/** Biographies (both small & large screens) */}
-              <div className="grid grid-cols-2 sm:my-16 sm:mt-4 sm:space-y-12 lg:grid-cols-3 lg:space-y-24">
-                {biographies.map((biography, index) => {
-                  return <Biopgraphy key={index} {...biography} />;
-                })}
-              </div>
+            {/** Biographies (both small & large screens) */}
+            <div className="grid grid-cols-2 sm:my-16 sm:mt-4 sm:space-y-12 lg:grid-cols-3 lg:space-y-24">
+              {biographies.map((biography, index) => {
+                return <Biopgraphy key={index} {...biography} />;
+              })}
             </div>
           </div>
         </div>
-      </main>
-      <Footer />
-    </>
+      </div>
+    </HeaderFooterLayout>
   );
 };
 
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
index 36daac4..57e2720 100644
--- a/src/pages/contact.tsx
+++ b/src/pages/contact.tsx
@@ -1,9 +1,8 @@
 import { type NextPage } from "next/types";
-import Footer from "~/components/Footer";
 import Image from "next/image";
-import Header from "~/components/Header";
 import { TopLabel } from "~/components/Labels";
 import { ArrowUpRightIcon } from "@heroicons/react/24/outline";
+import { HeaderFooterLayout } from "~/layouts/HeaderFooterLayout";
 
 interface ContactDetails {
   name: string;
@@ -59,9 +58,8 @@ const ContactForm = ({ details }: { details: ContactDetails }) => {
 
 const Contact: NextPage = () => {
   return (
-    <>
-      <Header />
-      <main>
+    <HeaderFooterLayout>
+      <div>
         <section className="mx-auto mb-4 mt-4 space-y-2 text-center sm:mt-8 sm:space-y-4">
           <h1 className="text-2xl font-bold">
             Have any Suggestions or Feedback?
@@ -98,9 +96,8 @@ const Contact: NextPage = () => {
             })}
           </div>
         </section>
-      </main>
-      <Footer />
-    </>
+      </div>
+    </HeaderFooterLayout>
   );
 };
 
diff --git a/src/pages/resources/index.tsx b/src/pages/resources/index.tsx
index d83ae6e..31c6863 100644
--- a/src/pages/resources/index.tsx
+++ b/src/pages/resources/index.tsx
@@ -62,7 +62,7 @@ const Resources = () => {
 
   return (
     <HeaderFooterLayout>
-      <div className="mb-12 mt-6 md:px-2">
+      <div className="mx-auto mb-12 mt-6 w-full max-w-6xl md:px-2">
         <div className="mb-2 flex flex-row justify-between p-2 print:hidden sm:mb-4 sm:p-4">
           <section className="space-y-2">
             <h1 className="text-3xl font-bold">All Resources</h1>
diff --git a/src/pages/resources/search.tsx b/src/pages/resources/search.tsx
index 3acc2c9..70b6c00 100644
--- a/src/pages/resources/search.tsx
+++ b/src/pages/resources/search.tsx
@@ -1,10 +1,9 @@
-import Footer from "~/components/Footer";
-import Header from "~/components/Header";
 import {
   GuidedSearch,
   type Question,
   type QuestionTypes,
 } from "~/components/Search";
+import { HeaderFooterLayout } from "~/layouts/HeaderFooterLayout";
 
 const questions: Question<QuestionTypes>[] = [
   {
@@ -108,19 +107,11 @@ const questions: Question<QuestionTypes>[] = [
 
 const SearchPage = () => {
   return (
-    <>
-      <div className="snap max-h-screen snap-y snap-mandatory overflow-y-scroll">
-        <div className="snap-start snap-always">
-          <Header />
-        </div>
-        <div className="mx-auto mb-4 mt-4 w-full max-w-xl snap-center snap-always overflow-hidden rounded-xl border border-neutral-400 bg-neutral-200 drop-shadow-md">
-          <GuidedSearch questions={questions} />
-        </div>
-        <div className="snap-end snap-always">
-          <Footer />
-        </div>
+    <HeaderFooterLayout>
+      <div className="mx-auto my-8 w-full max-w-xl overflow-hidden rounded-xl border border-neutral-400 bg-neutral-200 drop-shadow-md">
+        <GuidedSearch questions={questions} />
       </div>
-    </>
+    </HeaderFooterLayout>
   );
 };