Add Product pages

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

src/components/CallToActionBanner.module.scss

@@ -0,0 +1,6 @@
+@import "~bootstrap/scss/_functions.scss";
+@import "~bootstrap/scss/_variables.scss";
+
+.container {
+  background-color: $blue-700;
+}

src/components/DemoCourse.tsx → src/components/CallToActionBanner.tsx

@@ -2,18 +2,20 @@ import React from "react";
 import classnames from "classnames";
 import Link from "next/link";
 
-import styles from "./Banner.module.scss";
+import styles from "./CallToActionBanner.module.scss";
 
-export interface DemoCourseCTAProps {
+export interface BannerCTAProps {
   title: string;
   subtitle: string;
   buttonLabel: string;
+  href: string;
 }
 
-export const DemoCourseCTA: React.FC<DemoCourseCTAProps> = ({
+export const BannerCTA: React.FC<BannerCTAProps> = ({
   title,
   subtitle,
   buttonLabel,
+  href,
 }) => (
   <div className={classnames("container-fluid py-4", styles.container)}>
     <div className="container-md">
@@ -25,10 +27,7 @@ export const DemoCourseCTA: React.FC<DemoCourseCTAProps> = ({
       </div>
       <div className="row justify-content-center my-2">
         <div className="col-md-12 text-center">
-          <Link
-            href="https://us.prairielearn.com/pl/course_instance/4970"
-            className="btn btn-warning btn-lg"
-          >
+          <Link href={href} className="btn btn-warning btn-lg">
             {buttonLabel}
           </Link>
         </div>

src/components/Header.tsx

@@ -14,10 +14,12 @@ import { RequestCourseModal } from "../components/RequestCourseModal";
 
 import styles from "./Header.module.scss";
 
-function useIsActive(href: string | string[]): boolean {
+function useIsActive(href: string | string[], exact: boolean): boolean {
   const { asPath } = useRouter();
   const hrefs = Array.isArray(href) ? href : [href];
-  return hrefs.some((href) => asPath.startsWith(href));
+  return hrefs.some((href) =>
+    exact ? asPath === href : asPath.startsWith(href)
+  );
 }
 
 function useIsCurrent(href: string): boolean {
@@ -27,11 +29,12 @@ function useIsCurrent(href: string): boolean {
 
 interface NavLinkProps {
   href: string;
+  activeMatchExactHref?: boolean;
   children: React.ReactNode;
 }
 
 const RouterNavLink: React.FC<NavLinkProps> = ({ href, children }) => {
-  const active = useIsActive(href);
+  const active = useIsActive(href, false);
   const current = useIsCurrent(href);
   return (
     <Link
@@ -47,8 +50,12 @@ const RouterNavLink: React.FC<NavLinkProps> = ({ href, children }) => {
   );
 };
 
-const NavDropdownItem: React.FC<NavLinkProps> = ({ href, children }) => {
-  const active = useIsActive(href);
+const NavDropdownItem: React.FC<NavLinkProps> = ({
+  href,
+  children,
+  activeMatchExactHref = false,
+}) => {
+  const active = useIsActive(href, activeMatchExactHref);
   const current = useIsCurrent(href);
   return (
     <NavDropdown.Item
@@ -141,10 +148,34 @@ export const Header: React.FC = () => {
                 <Dropdown.Toggle
                   as={NavLink}
                   className={classnames(styles["nav-link"], {
-                    [`fw-bold ${styles.active}`]: useIsActive([
-                      "/gallery",
-                      "/oer",
-                    ]),
+                    [`fw-bold ${styles.active}`]: useIsActive(
+                      ["/products"],
+                      false
+                    ),
+                  })}
+                >
+                  Product
+                </Dropdown.Toggle>
+                <Dropdown.Menu>
+                  <NavDropdownItem href="/" activeMatchExactHref>
+                    PrairieLearn
+                  </NavDropdownItem>
+                  <NavDropdownItem href="/products/prairietest">
+                    PrairieTest
+                  </NavDropdownItem>
+                  <NavDropdownItem href="/products/testing-center">
+                    Testing Centers
+                  </NavDropdownItem>
+                </Dropdown.Menu>
+              </Dropdown>
+              <Dropdown as={NavItem}>
+                <Dropdown.Toggle
+                  as={NavLink}
+                  className={classnames(styles["nav-link"], {
+                    [`fw-bold ${styles.active}`]: useIsActive(
+                      ["/gallery", "/oer"],
+                      false
+                    ),
                   })}
                 >
                   Catalog
@@ -166,10 +197,10 @@ export const Header: React.FC = () => {
                 <Dropdown.Toggle
                   as={NavLink}
                   className={classnames(styles["nav-link"], {
-                    [`fw-bold ${styles.active}`]: useIsActive([
-                      "/about",
-                      "/research",
-                    ]),
+                    [`fw-bold ${styles.active}`]: useIsActive(
+                      ["/about", "/research"],
+                      false
+                    ),
                   })}
                 >
                   About

src/pages/about/index.tsx

@@ -4,7 +4,7 @@ import Head from "next/head";
 import Image, { ImageProps } from "next/image";
 
 import { PageBanner } from "../../components/Banner";
-import { DemoCourseCTA } from "../../components/DemoCourse";
+import { BannerCTA } from "../../components/CallToActionBanner";
 import { Heading } from "../../components/Heading";
 import Stack from "../../components/Stack";
 
@@ -182,10 +182,11 @@ export default function About() {
         </div>
       </div>
 
-      <DemoCourseCTA
+      <BannerCTA
         title="View demo course!"
         subtitle="Explore the demo course to see how this all comes together"
         buttonLabel="Demo course"
+        href="https://us.prairielearn.com/pl/course_instance/4970"
       />
     </React.Fragment>
   );

src/pages/contact/index.tsx

@@ -4,7 +4,7 @@ import classnames from "classnames";
 
 import { ContactUsForm } from "../../components/ContactUsForm";
 import { PageBanner } from "../../components/Banner";
-import { DemoCourseCTA } from "../../components/DemoCourse";
+import { BannerCTA } from "../../components/CallToActionBanner";
 
 import styles from "./index.module.scss";
 
@@ -34,10 +34,11 @@ export default function Contact() {
         </div>
       </div>
 
-      <DemoCourseCTA
+      <BannerCTA
         title="View demo course!"
         subtitle="Too busy to schedule a demo? You can test the demo course on your own, before requesting your course space."
         buttonLabel="Demo course"
+        href="https://us.prairielearn.com/pl/course_instance/4970"
       />
     </React.Fragment>
   );

src/pages/gallery/assessments/index.tsx

@@ -7,7 +7,7 @@ import Image from "next/image";
 
 import { Heading } from "../../../components/Heading";
 import { PageBanner } from "../../../components/Banner";
-import { DemoCourseCTA } from "../../../components/DemoCourse";
+import { BannerCTA } from "../../../components/CallToActionBanner";
 import Stack from "../../../components/Stack";
 
 import { getAssessments } from "../../../lib/gallery/assessments";
@@ -87,10 +87,11 @@ const AssessmentIndex: React.FC<AssessmentIndexProps> = ({ assessments }) => {
         </div>
       </div>
 
-      <DemoCourseCTA
+      <BannerCTA
         title="View demo course!"
         subtitle="Explore the demo course to see how this all comes together"
         buttonLabel="Demo course"
+        href="https://us.prairielearn.com/pl/course_instance/4970"
       />
     </React.Fragment>
   );

src/pages/gallery/questions/index.tsx

@@ -7,7 +7,7 @@ import Image from "next/image";
 
 import { Heading } from "../../../components/Heading";
 import { PageBanner } from "../../../components/Banner";
-import { DemoCourseCTA } from "../../../components/DemoCourse";
+import { BannerCTA } from "../../../components/CallToActionBanner";
 import { LinkButton } from "../../../components/LinkButton";
 import { getQuestions } from "../../../lib/gallery/questions";
 
@@ -122,10 +122,11 @@ const GalleryIndex: React.FC<GalleryIndexProps> = ({ questions }) => {
         </div>
       </div>
 
-      <DemoCourseCTA
+      <BannerCTA
         title="View demo course!"
         subtitle="Explore the demo course to see how this all comes together"
         buttonLabel="Demo course"
+        href="https://us.prairielearn.com/pl/course_instance/4970"
       />
     </React.Fragment>
   );

src/pages/index.tsx

@@ -7,7 +7,7 @@ import Link from "next/link";
 import Stack from "../components/Stack";
 import { Heading } from "../components/Heading";
 import { ExampleQuestion } from "../components/ExampleQuestion";
-import { DemoCourseCTA } from "../components/DemoCourse";
+import { BannerCTA } from "../components/CallToActionBanner";
 
 import richFBD from "../lib/images/rich_question_FBD.png";
 import richorder from "../lib/images/rich_question_order_block.png";
@@ -283,10 +283,11 @@ const Home: React.FC<HomeProps> = ({ seed }) => {
         </div>
       </div>
 
-      <DemoCourseCTA
+      <BannerCTA
         title="View demo course!"
         subtitle="Explore the demo course to see how this all comes together."
         buttonLabel="Demo course"
+        href="https://us.prairielearn.com/pl/course_instance/4970"
       />
 
       <RequestCourseModal

src/pages/products/prairietest/index.module.scss

@@ -0,0 +1,16 @@
+@import "~bootstrap/scss/_functions.scss";
+@import "~bootstrap/scss/_variables.scss";
+
+.container {
+  background-color: $gray-200;
+}
+
+.color {
+  color: $blue-700;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+  grid-gap: 2rem;
+}