added requirements page; added flyer; cleaning up

app/requirements/page.tsx

@@ -0,0 +1,8 @@
+import type { NextPage } from "next";
+import RequirementsPage from "@/templates/RequirementsPage";
+
+const Requirements: NextPage = () => {
+    return <RequirementsPage />;
+};
+
+export default Requirements;

components/Header/index.tsx

@@ -11,9 +11,9 @@ const Header = ({ onClick }: HeaderProps) => {
   return (
     <header className="relative z-10  bg-tertiary-500">
       <div className="py-4">
-        <div className="container relative flex items-center h-[4.8125rem] lg:flex-row-reverse">
+        <div className="container relative flex items-center h-[4.8125rem] lg:flex-row-reverse lg:hidden xl:hidden 2xl:hidden ">
           <button
-            className="flex flex-col justify-center items-center w-12 h-12 ml-auto lg:mr-auto before:w-8 before:h-0.5 before:bg-n-400 before:rounded before:transition-colors after:w-4 after:h-0.5 after:bg-n-400 after:rounded after:transition-colors hover:before:bg-orange-500 hover:after:bg-orange-500"
+            className="flex flex-col justify-center items-center w-12 h-12 before:w-8 before:h-0.5 before:bg-n-400 before:rounded before:transition-colors after:w-4 after:h-0.5 after:bg-n-400 after:rounded after:transition-colors hover:before:bg-orange-500 hover:after:bg-orange-500"
             onClick={onClick}
           >
             <span className="w-6 h-0.5 my-1.5 rounded bg-n-400 transition-colors group-hover:bg-orange-500"></span>

components/Layout/index.tsx

@@ -32,7 +32,7 @@ const Layout = ({ children }: LayoutProps) => {
     clearQueueScrollLocks();
     enablePageScroll();
   }, [pathname]);
-//TODO: might have to fix overflow-hidden to lg:overflow-hidden
+
   return (
     <>
       <div className="flex flex-col min-h-screen overflow-hidden">

constants/navigation.tsx

@@ -19,6 +19,11 @@ export const navigation = [
             title: "Merit Badges",
             url: "/merit-badges",
         },
+        {
+            id: "2",
+            title: "Merit Badge Requirements",
+            url: "/requirements",
+        },
         ]
     },
     {
@@ -63,6 +68,11 @@ export const menu = [
                     title: "Merit Badges",
                     url: "/merit-badges",
                 },
+                {
+                    id: "2",
+                    title: "Merit Badge Requirements",
+                    url: "/requirements",
+                }
                 ]
             },
             {

templates/HomePage/AboutUs/index.tsx

@@ -4,8 +4,18 @@ import Image from "@/components/Image";
 type AboutUsProps = {};
 
 const AboutUs = ({}: AboutUsProps) => (
-  <div className="lg:py-32 2xl:py-24 py-20 md:pb-10">
+  <div className="lg:pb-32 2xl:pb-24 pb-20 md:pb-10">
+          <div className="w-full">
+        <Image
+                  className="w-full sm:6rem xs:6rem md:6rem lg:12rem xl:12rem 2xl:12rem"
+                  src="images/banners/advancecampbanner.png"
+                  width={1500}
+                  height={220}
+                  alt="advance camp banner"
+        />
+      </div>
     <div className="container flex flex-column items-center max-w-[76.875rem] lg:flex-row">
+
       <div className="hidden lg:block">
         <Image
           className="w-full"

templates/MeritBadgePage/ImportantInfo/index.tsx

@@ -1,53 +1,10 @@
 import Link from "next/link";
 import Image from "@/components/Image";
-import {requirements} from '@/constants/badgerequirements';
 
 type LandingProps = {};
-interface Requirement {
-  badge: string;
-  age: string;
-  grade: string;
-  rank: string;
-  cost: string;
-  prerequisites: string;
-}
-
-
-const RequirementsTable: React.FC = () => {
-  return (
-    <div>
-      <h2 className="text-h4 font-bold my-4">Merit Badge Requirements</h2>
-      <table className="table-auto w-full border-collapse border border-n-300d">
-        <thead>
-          <tr>
-            <th title="Field #1">Merit Badge</th>
-            <th title="Field #2">Min. Age:</th>
-            <th title="Field #3">Min. Grade</th>
-            <th title="Field #4">Min. Rank:</th>
-            <th title="Field #5">Cost</th>
-            <th title="Field #6">Prerequisites</th>
-          </tr>
-        </thead>
-        <tbody>
-          {requirements.map((r: Requirement, index: number) => (
-            <tr key={index}>
-              <td className="border border-n-300 px-4 py-2 text-left">{r.badge}</td>
-              <td className="border border-n-300 px-4 py-2 text-left">{r.age}</td>
-              <td className="border border-n-300 px-4 py-2 text-left">{r.grade}</td>
-              <td className="border border-n-300 px-4 py-2 text-left">{r.rank}</td>
-              <td className="border border-n-300 px-4 py-2 text-left">{r.cost}</td>
-              <td className="border border-n-300 px-4 py-2 text-left">{r.prerequisites}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-};
 
 const ImportantInfo = ({}: LandingProps) => (
   <div className="container lg:py-4 2xl:py-24 py-8 md:pb-10 text-black text-justify">
-      <RequirementsTable />
        <h2 className="text-h4 font-bold my-4">Additional Fees</h2>
           <p className="text-16r mb-4">Archery, Basketry, Climbing, Indian Lore, Lifesaving, Plumbing, Programming, Search and Rescue, Robotics, Swimming, and Welding will carry an additional $30 fee. Partial Archery is $15.00</p>
           <p className="text-16r mb-4"><strong>AVIATION MERIT BADGE</strong> has a different fee of $75 because scouts will be flying as a part of the badge work that day.</p>

templates/MeritBadgePage/Landing/index.tsx

@@ -38,9 +38,9 @@ const Landing = ({}: LandingProps) => (
         </Link>
         <Link
             className="px-16 py-3 bg-transparent hover:bg-orange-500 text-orange-700 font-semibold hover:text-white border border-orange-500 hover:border-transparent"
-            href="http://usscouts.org"
+            href="/requirements"
           >
-            Check Permissions
+            Check Requirements
         </Link>
         </div>
         </div>

templates/RequirementsPage/Main/index.tsx

@@ -0,0 +1,52 @@
+import Image from "@/components/Image";
+import {requirements} from '@/constants/badgerequirements';
+
+type MainProps = {};
+
+interface Requirement {
+    badge: string;
+    age: string;
+    grade: string;
+    rank: string;
+    cost: string;
+    prerequisites: string;
+  }
+
+  const RequirementsTable: React.FC = () => {
+    return (
+      <div>
+        <table className="table-auto w-full border-collapse border border-n-300d">
+          <thead>
+            <tr>
+              <th title="Field #1">Merit Badge</th>
+              <th title="Field #2">Min. Age:</th>
+              <th title="Field #3">Min. Grade</th>
+              <th title="Field #4">Min. Rank:</th>
+              <th title="Field #6">Prerequisites</th>
+            </tr>
+          </thead>
+          <tbody>
+            {requirements.map((r: Requirement, index: number) => (
+              <tr key={index}>
+                <td className="border border-n-300 px-4 py-2 text-left">{r.badge}</td>
+                <td className="border border-n-300 px-4 py-2 text-left">{r.age}</td>
+                <td className="border border-n-300 px-4 py-2 text-left">{r.grade}</td>
+                <td className="border border-n-300 px-4 py-2 text-left">{r.rank}</td>
+                <td className="border border-n-300 px-4 py-2 text-left">{r.prerequisites}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  };
+
+
+const Main = ({}: MainProps) => (
+    <div className="py-20 lg:px-10 xlg:px-10 2xlg:px-20 text-black overflow-x-scroll xs:overflow-x-scroll md:overflow-x-scroll">
+        <h2 className="text-h4 font-bold my-4 text-center">Merit Badge Requirements</h2>
+        <RequirementsTable />
+    </div>
+);
+
+export default Main;

templates/RequirementsPage/index.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import Layout from "@/components/Layout";
+import Main from "./Main";
+
+const RequirementsPage = () => {
+    return (
+        <Layout>
+            <Main />
+        </Layout>
+    );
+};
+
+export default RequirementsPage;