Add 'Fundamentals of quantum algorithms' course (#3303)

* Add 'Fundamentals of quantum algorithms' course

* Fix links and spelling error

* Update pages/learn/course/fundamentals-quantum-algorithms.vue

Co-authored-by: Randy <randytolentino@ibm.com>

* Update pages/learn/course/fundamentals-quantum-algorithms.vue

Co-authored-by: Randy <randytolentino@ibm.com>

* Update pages/learn/course/fundamentals-quantum-algorithms.vue

Co-authored-by: Randy <randytolentino@ibm.com>

* Update pages/learn/course/fundamentals-quantum-algorithms.vue

Co-authored-by: Randy <randytolentino@ibm.com>

---------

Co-authored-by: Randy <randytolentino@ibm.com>

components/Learn/LearnExternalRecommendedReadings.vue

@@ -34,7 +34,7 @@
                   {{ link.label }}
                 </span>
               </UiLink>
-              <span v-if="link.description">- {{ link.description }}</span>
+              <span v-if="link.description"> - {{ link.description }}</span>
             </li>
           </ol>
         </div>

components/Learn/LearnMegaMenu.vue

@@ -32,6 +32,7 @@ defineProps<Props>();
 
 const wholeSection = "whole-section";
 const sectionBasicsCourse = "basics-course";
+const sectionAlgorithmFundamentalsCourse = "algorithm-fundamentals-course";
 const sectionIntroductionCourse = "introduction-course";
 const sectionQMLCourse = "quantum-machine-learning";
 const sectionPrerequisites = "prerequisites";
@@ -49,6 +50,7 @@ const sectionProblemSets = "problem-sets";
 
 const baseUrl = "https://learn.qiskit.org";
 const pathBasicsCourse = "/course/basics";
+const pathAlgorithmFundamentalsCourse = "/course/algorithms";
 const pathAlgorithmDesign = "/course/algorithm-design";
 const pathIntroductionCourse = "/course/introduction";
 const pathQuantumMachineLearning = "/course/machine-learning";
@@ -113,6 +115,27 @@ const BASICS_COURSE: MegaDropdownMenuGroup = {
   ],
 };
 
+const ALGORITHM_FUNDAMENTALS_COURSE: MegaDropdownMenuGroup = {
+  title: {
+    label: "Fundamentals of quantum algorithms",
+    url: `${baseUrl}${pathAlgorithmFundamentalsCourse}`,
+    segment: {
+      cta: wholeSection,
+      location: sectionAlgorithmFundamentalsCourse,
+    },
+  },
+  content: [
+    {
+      label: "Quantum query algorithms",
+      url: `${baseUrl}${pathAlgorithmFundamentalsCourse}/query-algorithms`,
+      segment: {
+        cta: "quantum_query_algorithms",
+        location: sectionAlgorithmFundamentalsCourse,
+      },
+    },
+  ],
+};
+
 const ALGORITHM_DESIGN: MegaDropdownMenuGroup = {
   title: {
     label: "Variational algorithm design",
@@ -1795,7 +1818,13 @@ const SUMMER_SCHOOL_2022: MegaDropdownMenuGroup = {
 
 const COURSES_SECTION: MegaDropdownMenuSection = {
   title: "Courses",
-  content: [BASICS_COURSE, ALGORITHM_DESIGN, INTRODUCTION_COURSE, QML_COURSE],
+  content: [
+    BASICS_COURSE,
+    ALGORITHM_FUNDAMENTALS_COURSE,
+    ALGORITHM_DESIGN,
+    INTRODUCTION_COURSE,
+    QML_COURSE,
+  ],
 };
 
 const CHAPTERS_SECTION: MegaDropdownMenuSection = {

components/Learn/LearnStartLearningSection.vue

@@ -213,6 +213,22 @@ const learningSections: LearningSection[] = [
           segment: { cta: "machine-learning", location: "course" },
         },
       },
+      {
+        image: "/images/learn/course/fundamentals-quantum-algorithms/hero.png",
+        title: "Understanding quantum information and computation",
+        subtitle: "Unit 2: Fundamentals of quantum algorithms",
+        description: `Discover how we can use quantum systems to solve problems more
+          efficiently, including problems with real-world applications such as
+          searching and factoring.`,
+        cta: {
+          label: "Go to this course",
+          url: "/learn/course/fundamentals-quantum-algorithms",
+          segment: {
+            cta: "fundamentals-quantum-algorithms",
+            location: "course",
+          },
+        },
+      },
     ],
   },
   {

constants/links.ts

@@ -3,6 +3,7 @@ import { Link } from "~/types/links";
 enum LearnStartLearningUrl {
   Introduction = "https://learn.qiskit.org/course/introduction",
   BasicsQuantumInformation = "https://learn.qiskit.org/course/basics",
+  FundamentalsQuantumAlgorithms = "https://learn.qiskit.org/course/algorithms",
   AlgorithmDesign = "https://learn.qiskit.org/course/algorithm-design",
   QML = "https://learn.qiskit.org/course/machine-learning",
   SummerSchool2020 = "https://learn.qiskit.org/summer-school/2020/",

pages/learn/course/fundamentals-quantum-algorithms.vue

@@ -0,0 +1,140 @@
+<template>
+  <CourseOverviewPage
+    :courses="courses"
+    :external-recommended-readings-preamble="
+      externalRecommendedReadingsPreamble
+    "
+    :header-title="headerTitle"
+    :header-description="headerDescription"
+    :header-img="headerImg"
+    :image-url-base="imageUrlBase"
+    :links="links"
+    :prerequisites="prerequisites"
+    :references="references"
+    :route-name="routeName"
+    :start-learning-cta="startLearningCTA"
+  />
+</template>
+
+<script setup lang="ts">
+import { LearnStartLearningUrl } from "~/constants/links";
+import type { RecommendedReading } from "~/types/learn";
+import type { Link } from "~/types/links";
+import type { Course, Prerequisite } from "constants/learnContent";
+
+definePageMeta({
+  layout: "default-max",
+  pageTitle: "Fundamentals of quantum algorithms",
+  routeName: "fundamentals-quantum-algorithms-course",
+});
+
+useHead({
+  title: "Fundamentals of quantum algorithms",
+});
+
+const routeName = "fundamentals-quantum-algorithms-course";
+
+const headerTitle = "Fundamentals of quantum algorithms";
+const headerDescription = [
+  `This is the second unit of the "Understanding quantum information and
+  computation" series, which explains quantum information and computation at a
+  detailed mathematical level.`,
+  `This unit, "Fundamentals of quantum algorithms", explores computational
+  advantages of quantum information, including what we can do with quantum
+  computers and their advantages over classical computers. The unit begins
+  with quantum query algorithms, which offer simple proof of concept
+  demonstrations for quantum algorithms, and then moves on to quantum
+  algorithms for problems including integer factorization and searching, which
+  are more representative of the types of computational problems that might be
+  encountered in real-world scenarios.`,
+];
+
+const headerImg =
+  "/images/learn/course/fundamentals-quantum-algorithms/hero.png";
+
+const startLearningCTA: Link = {
+  url: LearnStartLearningUrl.FundamentalsQuantumAlgorithms,
+  label: "Start learning",
+  segment: {
+    cta: "fundamentals-quantum-algorithms",
+    location: "header",
+  },
+};
+
+const references: string[] = [];
+
+const prerequisites: Prerequisite[] = [
+  {
+    title: "Basics of quantum information",
+    description:
+      "This is the first unit of the series. It covers quantum information at a detailed, mathematical level.",
+    segment: {
+      cta: "basics-quantum-information",
+      location: "prerequisite-material",
+    },
+    url: "/learn/course/basics-quantum-information",
+  },
+];
+
+const externalRecommendedReadingsPreamble = `Alongside this course, you may find these resources helpful or interesting.`;
+
+const links: RecommendedReading[] = [
+  {
+    url: "https://www.cambridge.org/highereducation/books/quantum-computation-and-quantum-information/01E10196D0A682A6AEFFEA52D53BE9AE#overview",
+    author: "Michael Nielsen, Isaac Chuang, ",
+    label: "Quantum Computation and Quantum Information (Chapters 4-6)",
+    segment: {
+      cta: "michael-nielsen-isaac-chuang-quantum-computation-and-quantum-information",
+      location: "external-recommended-readings",
+    },
+  },
+  {
+    url: "https://global.oup.com/academic/product/an-introduction-to-quantum-computing-9780198570493?cc=gb&lang=en&",
+    author: "Phillip Kaye, Raymond Laflamme, Michele Mosca, ",
+    label: "An Introduction to Quantum Computing (Chapters 5-8)",
+    segment: {
+      cta: "phillip-kaye-raymond-laflamme-michele-mosca-an-introduction-to-quantum-computing",
+      location: "external-recommended-readings",
+    },
+  },
+  {
+    url: "http://cleve.iqc.uwaterloo.ca/resources/QIC-710-F21/Qic710QuantumAlgorithmsPart1.pdf",
+    author: "Richard Cleve,",
+    label: "Quantum Information Processing — Quantum Algorithms I",
+    segment: {
+      cta: "quantum-information-processing-I",
+      location: "external-recommended-readings",
+    },
+  },
+  {
+    url: "http://cleve.iqc.uwaterloo.ca/resources/QIC-710-F21/Qic710QuantumAlgorithmsPart2.pdf",
+    author: "Richard Cleve,",
+    label: "Quantum Information Processing — Quantum Algorithms II",
+    segment: {
+      cta: "quantum-information-processing-II",
+      location: "external-recommended-readings",
+    },
+  },
+  {
+    url: "http://cleve.iqc.uwaterloo.ca/resources/QIC-710-F21/Qic710QuantumAlgorithmsPart3.pdf",
+    author: "Richard Cleve,",
+    label: "Quantum Information Processing — Quantum Algorithms III",
+    segment: {
+      cta: "quantum-information-processing-III",
+      location: "external-recommended-readings",
+    },
+  },
+];
+
+const courses: Course[] = [
+  {
+    image: "quantum-query-algorithms-preview.png",
+    label: "Quantum query algorithms",
+    segment: { cta: "quantum-query-algorithms", location: "course" },
+    url:
+      LearnStartLearningUrl.FundamentalsQuantumAlgorithms + "/query-algorithms",
+  },
+];
+
+const imageUrlBase = "/images/learn/course/fundamentals-quantum-algorithms";
+</script>