Add Product pages (#71)

* fixed organizers spiffy * added products tab to naavbar * PrairieTest page wip * more updates to pt page * created a CTA component * added exam format draft * add draft text to features * fixed format * updates to pt page * initial draft for testing center page * removed not used import * update fingerprint card * first attempt to add other section to cbtf page * another attempt for value prop section * center and larger font for cbtf first section * small updates * Update src/pages/products/prairietest/index.tsx Co-authored-by: Matthew West <[email protected]> * Update src/components/Header.tsx Co-authored-by: Matthew West <[email protected]> * Update src/pages/products/testing-center/index.tsx Co-authored-by: Matthew West <[email protected]> * Update src/pages/products/testing-center/index.tsx Co-authored-by: Matthew West <[email protected]> * Update src/pages/products/testing-center/index.tsx Co-authored-by: Matthew West <[email protected]> * Update src/pages/products/testing-center/index.tsx Co-authored-by: Matthew West <[email protected]> * Update src/pages/products/prairietest/index.tsx Co-authored-by: Matthew West <[email protected]> * Update src/pages/products/prairietest/index.tsx Co-authored-by: Matthew West <[email protected]> * Update src/pages/products/prairietest/index.tsx Co-authored-by: Matthew West <[email protected]> * Update src/pages/products/prairietest/index.tsx Co-authored-by: Matthew West <[email protected]> * added suggestions from Matt * fixed capitalization * update CTA component * remove old CTA button * Update src/pages/products/prairietest/index.tsx Co-authored-by: Nathan Sarang-Walters <[email protected]> * Update src/pages/products/prairietest/index.tsx Co-authored-by: Nathan Sarang-Walters <[email protected]> * Update src/pages/products/testing-center/index.tsx Co-authored-by: Nathan Sarang-Walters <[email protected]> * Update src/pages/products/testing-center/index.tsx Co-authored-by: Nathan Sarang-Walters <[email protected]> * Update src/pages/products/testing-center/index.tsx Co-authored-by: Nathan Sarang-Walters <[email protected]> * Update src/pages/products/testing-center/index.tsx Co-authored-by: Nathan Sarang-Walters <[email protected]> * Update src/pages/products/testing-center/index.tsx Co-authored-by: Nathan Sarang-Walters <[email protected]> * deleted comments * add CTA button start of testing center page * small edit * adjusted spacing exam format section * removed not needed Link * Adjust spacing; replace images with Bootstrap icons * Only make PrairieLearn link active on homepage * Fix heading levels * Fix linter issue * edit text for privacy screen * updated PT registration image * Fix build issue; remove unused code * consistent use of exam wording; replaced photo online format * Update src/pages/products/testing-center/index.tsx Co-authored-by: Matthew West <[email protected]> * added two value props * Crop images * Remove VSCode settings file * Update src/pages/products/testing-center/index.tsx Co-authored-by: Matthew West <[email protected]> * Small adjustments * Fix build errors --------- Co-authored-by: Matthew West <[email protected]> Co-authored-by: Nathan Sarang-Walters <[email protected]>
PrairieLearn · Mar 13, 2024 · d8f6c97 · d8f6c97
1 parent eb45205
commit d8f6c97
Show file tree

Hide file tree

Showing 24 changed files with 534 additions and 49 deletions.
diff --git a/src/components/CallToActionBanner.module.scss b/src/components/CallToActionBanner.module.scss
@@ -0,0 +1,6 @@
+@import "~bootstrap/scss/_functions.scss";
+@import "~bootstrap/scss/_variables.scss";
+
+.container {
+  background-color: $blue-700;
+}
diff --git a/src/components/DemoCourse.tsx → src/components/CallToActionBanner.tsx b/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>

diff --git a/src/components/Header.tsx b/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

diff --git a/src/lib/images/byodinclass.png b/src/lib/images/byodinclass.png
diff --git a/src/lib/images/cbtf.jpg b/src/lib/images/cbtf.jpg
diff --git a/src/lib/images/exam-management.png b/src/lib/images/exam-management.png
diff --git a/src/lib/images/pt-reservation.png b/src/lib/images/pt-reservation.png
diff --git a/src/lib/images/reduced-distraction.png b/src/lib/images/reduced-distraction.png
diff --git a/src/lib/images/student-zoom.jpg b/src/lib/images/student-zoom.jpg
diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx
@@ -1,10 +1,9 @@
 import React from "react";
-import classnames from "classnames";
 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";
 
@@ -55,7 +54,7 @@ export default function About() {
         subtitle="We are passionate about teaching and strive to deliver the best course material to our students."
       />
 
-      <div className={classnames("container-fluid py-4")}>
+      <div className="container-fluid py-4">
         <div className="container-md">
           <div className="row">
             <div className="col-md-6 order-1 pt-2">
@@ -182,10 +181,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>
   );

diff --git a/src/pages/contact/index.tsx b/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>
   );

diff --git a/src/pages/gallery/assessments/index.tsx b/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";
@@ -35,7 +35,7 @@ const AssessmentIndex: React.FC<AssessmentIndexProps> = ({ assessments }) => {
         subtitle="Building different types of activities for your class"
       />
 
-      <div className={classnames("container-fluid my-5")}>
+      <div className="container-fluid my-5">
         <div className="container-md">
           <div className="row">
             <div className="col-md-6 order-2 pt-4">
@@ -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>
   );

diff --git a/src/pages/gallery/courses/index.tsx b/src/pages/gallery/courses/index.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import Head from "next/head";
 import Link from "next/link";
 import Image, { ImageProps } from "next/image";
-import classnames from "classnames";
 
 import { PageBanner } from "../../../components/Banner";
 import { Heading } from "../../../components/Heading";
@@ -86,7 +85,7 @@ export default function Courses() {
         subtitle="Collections of assessments and questions"
       />
 
-      <div className={classnames("container-fluid my-5")}>
+      <div className="container-fluid my-5">
         <div className="container-md">
           <Heading>Course Catalog</Heading>
           <p>
@@ -256,7 +255,7 @@ export default function Courses() {
         </div>
       </div>
 
-      <div className={classnames("container-fluid my-5")}>
+      <div className="container-fluid my-5">
         <div className="container-md">
           <h2 className="h4">Contribute to this page</h2>
           <p>

diff --git a/src/pages/gallery/questions/index.tsx b/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";
 
@@ -36,7 +36,7 @@ const GalleryIndex: React.FC<GalleryIndexProps> = ({ questions }) => {
         subtitle="Create quality questions from a wide variety of input options"
       />
 
-      <div className={classnames("container-fluid my-5")}>
+      <div className="container-fluid my-5">
         <div className="container-md">
           <div className="row">
             <div className="col-md-6 order-2 pt-4">
@@ -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>
   );

diff --git a/src/pages/index.tsx b/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

diff --git a/src/pages/oer/index.tsx b/src/pages/oer/index.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import Head from "next/head";
 import Link from "next/link";
 import Image, { ImageProps } from "next/image";
-import classnames from "classnames";
 
 import { PageBanner } from "../../components/Banner";
 import { Heading } from "../../components/Heading";
@@ -69,7 +68,7 @@ export default function Courses() {
         subtitle="Template questions to help you get started with PrairieLearn"
       />
 
-      <div className={classnames("container-fluid my-5")}>
+      <div className="container-fluid my-5">
         <div className="container-md">
           <Heading>Question Templates</Heading>
           <p>
@@ -96,7 +95,7 @@ export default function Courses() {
         </div>
       </div>
 
-      <div className={classnames("container-fluid my-5")}>
+      <div className="container-fluid my-5">
         <div className="container-md">
           <div className={styles.grid}>
             <CourseCard
@@ -198,7 +197,7 @@ export default function Courses() {
         </div>
       </div>
 
-      <div className={classnames("container-fluid my-5")}>
+      <div className="container-fluid my-5">
         <div className="container-md">
           <h2 className="h4">License</h2>
           <p>

diff --git a/src/pages/products/prairietest/index.module.scss b/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;
+}