replace remaining pages with new layout

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>
   );

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 { HeaderFooterLayout } from "~/layouts/HeaderFooterLayout";
-import Header from "~/components/Header";
 
 type Position = "left" | "right";
 interface Biography {
@@ -70,9 +69,7 @@ const biographies: Biography[] = [
 
 const About: NextPage = () => {
   return (
-    <>
+    <HeaderFooterLayout>
-      <Header />
-      <main>
       <div
         style={{
           backgroundImage: `url("/backdrops/uiowa-aerial.jpeg")`,
@@ -121,9 +118,7 @@ const About: NextPage = () => {
           </div>
         </div>
       </div>
-      </main>
+    </HeaderFooterLayout>
-      <Footer />
-    </>
   );
 };
 

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 (
-    <>
+    <HeaderFooterLayout>
-      <Header />
+      <div>
-      <main>
         <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>
+      </div>
-      <Footer />
+    </HeaderFooterLayout>
-    </>
   );
 };
 

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>

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 (
-    <>
+    <HeaderFooterLayout>
-      <div className="snap max-h-screen snap-y snap-mandatory overflow-y-scroll">
+      <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">
-        <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">
+    </HeaderFooterLayout>
-          <Footer />
-        </div>
-      </div>
-    </>
   );
 };