Add Common Questions

Author: hasparus

src/components/learn-aggregator/common-questions.tsx

@@ -1,16 +1,58 @@
 import { clsx } from "clsx"
 
 import { Eyebrow } from "@/_design-system/eyebrow"
+import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
+import { Anchor } from "@/app/conf/_design-system/anchor"
 
 export function CommonQuestionsSection(
   props: React.HTMLAttributes<HTMLDivElement>,
 ) {
   return (
     <section
       {...props}
-      className={clsx("gql-section gql-container", props.className)}
+      className={clsx(
+        "gql-section gql-container grid-rows-[auto_auto_1fr] *:[grid-column:1] lg:grid lg:grid-cols-[1fr_auto]",
+        props.className,
+      )}
     >
       <Eyebrow>FAQ</Eyebrow>
+      <h2 className="typography-h2 mt-6">Common questions</h2>
+      <p className="typography-body-md mt-6">
+        Find answers to the most common questions about GraphQL — from getting
+        started to advanced use cases. This also covers frontend concerns and
+        info about the official specification.
+      </p>
+      <ul className="row-span-full mt-6 ![grid-column:2] *:border-b *:border-neu-200 dark:*:border-neu-100 lg:w-[380px] xl:w-[496px]">
+        <CommonQuestionsItem
+          title="Getting started"
+          href="/learn/faq#getting-started"
+        />
+        <CommonQuestionsItem title="General" href="/learn/faq#general" />
+        <CommonQuestionsItem
+          title="Best practices"
+          href="/learn/faq#best-practices"
+        />
+        <CommonQuestionsItem
+          title="Specification"
+          href="/learn/faq#specification"
+        />
+        <CommonQuestionsItem title="Frontend" href="/learn/faq#frontend" />
+        <CommonQuestionsItem title="Foundation" href="/learn/faq#foundation" />
+      </ul>
     </section>
   )
 }
+
+function CommonQuestionsItem({ title, href }: { title: string; href: string }) {
+  return (
+    <li className="hover:!border-current">
+      <Anchor
+        href={href}
+        className="typography-body-lg -mx-4 flex items-center justify-between p-4 text-neu-800 hover:text-neu-900 dark:text-neu-700"
+      >
+        {title}
+        <ArrowDownIcon className="size-6 shrink-0 -rotate-90" />
+      </Anchor>
+    </li>
+  )
+}

src/components/learn-aggregator/training-courses.tsx

@@ -11,7 +11,7 @@ export function TrainingCoursesSection(
   return (
     <section
       {...props}
-      className={clsx("gql-section gql-container", props.className)}
+      className={clsx("gql-section gql-container lg:pb-24", props.className)}
     >
       <div className="mx-auto flex max-w-[960px] flex-col items-center">
         <Eyebrow>Tutorials</Eyebrow>

src/components/toc-hero/index.tsx

@@ -1,14 +1,28 @@
+import { clsx } from "clsx"
+
 export { TocHeroContents } from "./toc-hero-contents"
 
 export interface TocHeroProps {
   heading: string
   text: React.ReactNode
   children: React.ReactNode
   decoration: React.ReactNode
+  className?: string
 }
-export function TocHero({ heading, text, children, decoration }: TocHeroProps) {
+export function TocHero({
+  heading,
+  text,
+  children,
+  decoration,
+  className,
+}: TocHeroProps) {
   return (
-    <section className="relative overflow-visible bg-neu-0 pt-[calc(var(--nextra-navbar-height)+24px)]">
+    <section
+      className={clsx(
+        "relative overflow-visible bg-neu-0 pt-[calc(var(--nextra-navbar-height)+24px)]",
+        className,
+      )}
+    >
       {decoration}
       <div className="gql-section gql-container relative flex !max-w-screen-lg flex-col items-center gap-6 text-center lg:gap-8 xl:!max-w-screen-xl">
         <h1 className="typography-h1">{heading}</h1>

src/pages/learn/index.mdx

@@ -9,6 +9,7 @@ import { NavbarFixed } from '../../components/navbar/navbar-fixed'
 
 <NavbarFixed />
 <TocHero
+  className="mb-4 lg:mb-8"
   heading="Start learning GraphQL"
   text={
     <>