diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 808e75da..49d430b0 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -169,6 +169,7 @@ export const Header: React.FC = () => { [`fw-bold ${styles.active}`]: useIsActive([ "/about", "/research", + "/blog", ]), })} > @@ -177,6 +178,7 @@ export const Header: React.FC = () => { About Us Research + Blog
  • diff --git a/src/lib/images/blog/NSF_Official_logo_High_Res_1200ppi.png b/src/lib/images/blog/NSF_Official_logo_High_Res_1200ppi.png new file mode 100644 index 00000000..f02e34da Binary files /dev/null and b/src/lib/images/blog/NSF_Official_logo_High_Res_1200ppi.png differ diff --git a/src/lib/images/blog/asee2023-booth.jpg b/src/lib/images/blog/asee2023-booth.jpg new file mode 100644 index 00000000..6dc29ba7 Binary files /dev/null and b/src/lib/images/blog/asee2023-booth.jpg differ diff --git a/src/lib/images/blog/fie23_logo_84b4f621ef.svg b/src/lib/images/blog/fie23_logo_84b4f621ef.svg new file mode 100644 index 00000000..e8662058 --- /dev/null +++ b/src/lib/images/blog/fie23_logo_84b4f621ef.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/images/blog/image.jpeg b/src/lib/images/blog/image.jpeg new file mode 100644 index 00000000..1fc67241 Binary files /dev/null and b/src/lib/images/blog/image.jpeg differ diff --git a/src/pages/blog/index.module.scss b/src/pages/blog/index.module.scss new file mode 100644 index 00000000..85da860d --- /dev/null +++ b/src/pages/blog/index.module.scss @@ -0,0 +1,12 @@ +@import "~bootstrap/scss/_functions.scss"; +@import "~bootstrap/scss/_variables.scss"; + +.container { + background-color: $gray-200; +} + +.grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); + grid-gap: 1rem; +} diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx new file mode 100644 index 00000000..f369e768 --- /dev/null +++ b/src/pages/blog/index.tsx @@ -0,0 +1,143 @@ +import React from "react"; +import classnames from "classnames"; +import Head from "next/head"; +import Link from "next/link"; +import Image, { ImageProps } from "next/image"; +import { PageBanner } from "../../components/Banner"; +import { DemoCourseCTA } from "../../components/DemoCourse"; +import { Heading } from "../../components/Heading"; + +import styles from "./index.module.scss"; + +import placeholder from "../../lib/images/blog/image.jpeg"; +import fie2023 from "../../lib/images/blog/fie23_logo_84b4f621ef.svg"; +import asee2023 from "../../lib/images/blog/asee2023-booth.jpg"; +import nsf from "../../lib/images/blog/NSF_Official_logo_High_Res_1200ppi.png"; + +interface NewsCardProps { + date: string; + image: ImageProps["src"]; + title: string; + href: string; + children: React.ReactNode; +} + +const NewsCard: React.FC = ({ + date, + image, + title, + href, + children, +}) => { + return ( +
    + + {title} + +
    +

    + {date} +

    + + {title} + + {children} +
    +
    + ); +}; + +export default function About() { + return ( + + + About | PrairieLearn + + + + +
    +
    +
    + +

    + We will be at SIGCSE 2024! Stop by our booth and check our + affiliated section. +

    +     + +

    + We will be at FIE 2023! Stop by our booth if you are planning to + attend and come back here later for updates. +

    +     + +

    + Read about the research studies using PrairieLearn data + presented at the conference. +

    +     + +

    + Read about the research studies using PrairieLearn data + presented at the conference. +

    +     + +

    + PrairieLearn Inc. had its first conference booth! We had a great + time talking with many educators and attending excellent talks! +

    +     +
    +
    +
    + + +     + ); +}