About page

src/client/lib/authenticated-page.tsx

@@ -10,7 +10,7 @@ export const requiresLogin =
     const { status } = useSession();
 
     // Include any public pathnames here
-    const publicPaths = ["/signInPage"];
+    const publicPaths = ["/signInPage", "/about"];
     const pathIsProtected = !publicPaths.includes(router.pathname);
 
     useEffect(() => {

src/components/navbar/Navbar.module.css

@@ -16,7 +16,6 @@
 .linkItem {
   padding: 1.25rem 0 1.25rem calc(45% - 1.5rem * 1.5);
 }
-
 .link {
   color: var(--on-primary);
   text-decoration: none;
@@ -34,7 +33,6 @@
 .burger {
   color: var(--primary-99);
 }
-
 @media (min-width: 992px) {
   .linkItem {
     padding-left: 9%;

src/middleware.ts

@@ -22,4 +22,4 @@ export function middleware(request: NextRequest) {
   return NextResponse.next();
 }
 
-export const config = { matcher: ["/((?!img|_next|api|signInPage).*)"] };
+export const config = { matcher: ["/((?!img|_next|api|signInPage|about).*)"] };

src/pages/about.tsx

@@ -0,0 +1,15 @@
+const About = () => {
+  return (
+    <div>
+      <h2>About Compass</h2>
+
+      <div>
+        Compass is a civic app we are building for the San Francisco Unified
+        School District. The app seeks to assist Teachers with setting and
+        tracking goals for students with disabilities.
+      </div>
+    </div>
+  );
+};
+
+export default About;

src/pages/signInPage.tsx

@@ -16,13 +16,15 @@ const SignInPage = () => {
 
   return (
     <div className={$home.greetWrap}>
-      <Image
-        src="/img/compass-logo.svg"
-        alt="logo"
-        width={60}
-        height={60}
-        priority
-      />
+      <button className={$button.about} onClick={() => router.push("/about")}>
+        <Image
+          src="/img/compass-logo.svg"
+          alt="logo"
+          width={60}
+          height={60}
+          priority
+        />
+      </button>
       <h1 className={$home.bold}>Welcome to Project Compass</h1>
       <div>Log in with your Google account to continue</div>
       <button

src/styles/Button.module.css

@@ -11,6 +11,13 @@
   text-align: center;
   font-size: 16px;
 }
+.about {
+  border: none;
+  background-color: transparent;
+}
+.about {
+  cursor: pointer;
+}
 
 .default:hover {
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3),