feat(events): Fall fest 2023

constants/fallFest2022Content.ts

@@ -1,7 +1,9 @@
 import { DescriptionCard } from "~/types/uiComponents";
 
 const header = {
-  titleLine1: "Qiskit Fall Fest 2022:",
+  titleLine1: "Qiskit Fall Fest 2022",
+  description:
+    "The Qiskit Fall Fest is a collection of quantum computing events on college campuses around the world. Every Fall Fest event is organized and run by the students on each campus, with support from the entire IBM Quantum team. Student leaders work alongside IBM throughout the month of September to design and plan their event, which are then run in October. The events vary from technical hackathons to beginner-friendly challenges, all with the goal of helping to grow the local community’s skill set.",
   cta: {
     label: "Read the blog",
     url: "https://medium.com/qiskit/introducing-the-qiskit-fall-fest-feb8456b557",
@@ -12,7 +14,7 @@ const header = {
   },
   cardSectionHeading: "About the event:",
   card: {
-    image: "/images/events/fall-fest/fall-fest-logo.png",
+    image: "/images/events/fall-fest/fall-fest-logo-2022.png",
     title: "Qiskit Fall Fest 2022",
     description:
       "The Qiskit Fall Fest is a collection of quantum computing events each held by a university!",

constants/fallFest2023Content.ts

@@ -0,0 +1,97 @@
+import { DescriptionCard } from "~/types/uiComponents";
+
+const header = {
+  titleLine1: "Qiskit Fall Fest 2023",
+  description:
+    "The Qiskit Fall Fest is a collection of quantum computing events on college campuses around the world. Every Fall Fest event is organized and run by the students on each campus, with support from IBM Quantum. Student leaders work alongside IBM to design and plan their event, which are run in October and November. Each event is standalone - only made for the students on that particular campus. The events vary from technical hackathons to beginner-friendly challenges, all with the goal of helping to grow the local community’s skill set.",
+  cta: {
+    label: "2022 Fall Fest events",
+    url: "/events/fall-fest-2022",
+    segment: {
+      cta: "qiskit-fall-fest-blog",
+      location: "header",
+    },
+  },
+  cardSectionHeading: "About the event:",
+  card: {
+    image: "/images/events/fall-fest/fall-fest-logo-2023.png",
+    altText:
+      "The Qiskit logo centered with a playful background of colorful, gradient shapes",
+    title: "Qiskit Fall Fest 2023",
+    description:
+      "The Qiskit Fall Fest is a collection of quantum computing events each held by a university!",
+    location: "",
+    time: "",
+    to: "https://medium.com/qiskit/introducing-the-qiskit-fall-fest-feb8456b557",
+    ctaLabel: "Learn about the Fall Fest",
+    segment: {
+      cta: "qiskit-fall-fest-blog",
+      location: "card-header",
+    },
+  },
+};
+
+interface HelpfulResourcesSection {
+  title: string;
+  resources: DescriptionCard[];
+}
+
+const helpfulResources: HelpfulResourcesSection = {
+  title: "Resources",
+  resources: [
+    {
+      title: "Let us know if you have any questions!",
+      description:
+        "If your questions aren't answered by the FAQ above or our blog post, please use this form to submit your enquiries direct to the team.",
+      cta: {
+        url: "mailto:[email protected]",
+        label: "Enquire now",
+        segment: {
+          cta: "qiskt-fall-fest-email",
+          location: "helpful-resources",
+        },
+      },
+    },
+    {
+      title: "Learn about and install Qiskit",
+      description:
+        "Prepare for the Fall Fest by reviewing the documentation and installing Qiskit.",
+      cta: {
+        url: "https://qiskit.org/documentation/getting_started.html#installation",
+        label: "Install here",
+        segment: {
+          cta: "qiskit-install",
+          location: "helpful-resources",
+        },
+      },
+    },
+    {
+      title: "Qiskit Medium",
+      description:
+        "This blog provides a nice overview of Qiskit and its direction as we explore what applications can be done on today's quantum devices.",
+      cta: {
+        url: "https://medium.com/@qiskit",
+        label: "Read the blog",
+        segment: {
+          cta: "qiskit-medium",
+          location: "helpful-resources",
+        },
+      },
+    },
+    {
+      title: "Code of conduct",
+      description:
+        "Qiskit is dedicated to providing an enjoyable and safe experience for all participants. We have a code of conduct that all events adhere to.",
+      cta: {
+        url: "https://github.com/Qiskit/qiskit/blob/master/CODE_OF_CONDUCT.md",
+        label: "See code of conduct",
+        segment: {
+          cta: "code-of-conduct",
+          location: "helpful-resources",
+        },
+      },
+    },
+  ],
+};
+
+export { header, helpfulResources };

pages/events/fall-fest-2022.vue

@@ -0,0 +1,164 @@
+<template>
+  <article class="fall-fest-page">
+    <LayoutLeadSpaceWithCard
+      :cta="headerData.cta"
+      :card-title="headerData.cardSectionHeading"
+    >
+      <template #title>
+        {{ headerData.titleLine1 }}
+      </template>
+      <template #description>
+        <p>
+          {{ headerData.description }}
+        </p>
+      </template>
+      <template #card>
+        <EventsCard
+          :cta-label="headerData.card.ctaLabel"
+          :image="headerData.card.image"
+          :location="headerData.card.location"
+          :segment="headerData.card.segment"
+          :time="headerData.card.time"
+          :title="headerData.card.title"
+          :to="headerData.card.to"
+          vertical-layout
+        >
+          {{ headerData.card.description }}
+        </EventsCard>
+      </template>
+    </LayoutLeadSpaceWithCard>
+
+    <div class="cds--grid fall-fest-page__content">
+      <section class="fall-fest-page__section">
+        <EventsFallFestUniversityDirectory />
+      </section>
+    </div>
+
+    <div class="cds--grid fall-fest-page__content">
+      <section class="fall-fest-page__section">
+        <h2 v-text="agendaData.title" />
+        <p v-text="agendaData.subtitle" />
+        <bx-tabs value="Wave 1">
+          <bx-tab
+            v-for="week in agendaData.weeks"
+            :key="week.tabName"
+            :target="week.tabName"
+            :value="week.tabName"
+          >
+            {{ week.tabName }}
+          </bx-tab>
+        </bx-tabs>
+        <div
+          v-for="week in agendaData.weeks"
+          :id="week.tabName"
+          :key="week.tabName"
+          :aria-labelledby="week.tabName"
+          role="tabpanel"
+          hidden
+        >
+          <UiDataTable
+            class="fall-fest-page__section"
+            :columns="agendaColumnsDataTable"
+          >
+            <bx-table-row
+              v-for="(row, rowIndex) in week.tableData"
+              :key="`${rowIndex}`"
+            >
+              <bx-table-cell
+                v-for="({ styles, data, link }, elementIndex) in row"
+                :key="`${elementIndex}`"
+              >
+                <UiLinkText
+                  v-if="link"
+                  class="fall-fest-page__table-link"
+                  :style="styles"
+                  :url="link"
+                >
+                  Link to event
+                </UiLinkText>
+                <span v-else :style="styles">{{ data }}</span>
+              </bx-table-cell>
+            </bx-table-row>
+          </UiDataTable>
+        </div>
+      </section>
+
+      <UiHelpfulResources
+        class="fall-fest-page__section"
+        :title="helpfulResourcesData.title"
+        :resources="helpfulResourcesData.resources"
+      />
+    </div>
+  </article>
+</template>
+
+<script setup lang="ts">
+import {
+  header,
+  agenda,
+  helpfulResources,
+} from "~/constants/fallFest2022Content";
+
+definePageMeta({
+  pageTitle: header.titleLine1,
+  routeName: "fall-fest",
+});
+
+const config = useRuntimeConfig();
+
+const title = header.titleLine1;
+const description =
+  "The Qiskit Fall Fest is a collection of quantum computing events from universities around the world, organized by students and supported by the IBM Quantum community.";
+const image = `${config.public.siteUrl}/images/events/fall-fest/fall-fest-logo-2022.png`;
+const pageUrl = `${config.public.siteUrl}/events/summer-school-2023`;
+
+useSeoMeta({
+  title,
+  ogTitle: title,
+  description,
+  ogDescription: description,
+  ogImage: image,
+  ogImageAlt: title,
+  ogUrl: pageUrl,
+  ogType: "website",
+  twitterCard: "summary_large_image",
+  twitterDescription: description,
+});
+
+const agendaData = agenda;
+const agendaColumnsDataTable: string[] = [
+  "University",
+  "Start Date",
+  "End Date",
+  "Detail",
+  "Type of Event",
+  "Link",
+];
+const headerData = header;
+const helpfulResourcesData = helpfulResources;
+</script>
+
+<style lang="scss" scoped>
+@use "~/assets/scss/carbon.scss";
+@use "~/assets/scss/helpers/index.scss" as qiskit;
+
+.fall-fest-page {
+  display: flex;
+  flex-direction: column;
+
+  &__section {
+    margin-top: carbon.$spacing-10;
+    margin-bottom: carbon.$spacing-07;
+
+    @include carbon.breakpoint-down(lg) {
+      margin-bottom: carbon.$spacing-05;
+    }
+  }
+
+  &__content {
+    @include carbon.breakpoint-down(lg) {
+      max-width: 100%;
+    }
+  }
+}
+</style>