Tweak mobile UI

Author: hasparus

src/components/index-page/graphql-advantages/consistency.tsx

@@ -49,7 +49,7 @@ export function ConsistencyFigure() {
   return (
     <section
       id="type-system"
-      className="nextra-codeblocks flex w-full bg-gradient-to-b from-transparent to-sec-lighter px-[14px] py-[30px] dark:to-sec-darker/25 max-[360px]:px-0 xl:px-[46px] max-[360px]:[&_:is(.rounded-t-md,pre)]:rounded-none [&_pre]:!h-[370px] md:[&_pre]:!h-[420px]"
+      className="nextra-codeblocks flex w-full bg-gradient-to-b from-transparent to-sec-lighter px-[14px] py-[30px] dark:to-sec-darker/25 max-[380px]:px-0 xl:px-[46px] max-[380px]:[&_:is(.rounded-t-md,pre)]:rounded-none [&_pre]:!h-[370px] md:[&_pre]:!h-[420px]"
     >
       <div
         className="nextra-codeblocks grid w-full grid-cols-2 [&_.highlighted]:!bg-pri-lighter/50 dark:[&_.highlighted]:!bg-neu-200/10"

src/components/index-page/graphql-advantages/precision.tsx

@@ -93,7 +93,7 @@ export function PrecisionFigure() {
     <div
       ref={ref}
       id="predictable-results"
-      className="nextra-codeblocks flex w-full max-w-[100vw] bg-gradient-to-b from-transparent to-sec-lighter px-[14px] py-[30px] *:w-1/2 dark:to-sec-darker/25 max-[360px]:px-0 sm:max-w-[calc(100vw-32px)] xl:px-[46px] max-[360px]:[&_:is(.rounded-t-md,pre)]:rounded-none [&_pre]:!h-48"
+      className="nextra-codeblocks flex w-full max-w-[100vw] bg-gradient-to-b from-transparent to-sec-lighter px-[14px] py-[30px] *:w-1/2 dark:to-sec-darker/25 max-[380px]:px-0 sm:max-w-[calc(100vw-32px)] xl:px-[46px] max-[380px]:[&_:is(.rounded-t-md,pre)]:rounded-none [&_pre]:!h-48"
       aria-hidden
     >
       <Pre data-filename="Query" className="p-4">

src/components/index-page/join-the-community.tsx

@@ -5,7 +5,7 @@ import { DiscordIcon } from "@/icons"
 
 export function JoinTheCommunity() {
   return (
-    <section className="gql-section max-sm:px-0 lg:pb-16 xl:pb-24">
+    <section className="gql-section max-sm:px-0 lg:pb-16 lg:max-xl:px-0 xl:pb-24">
       <div className="gql-container typography-body-lg flex bg-pri-dark text-white dark:bg-pri-darker max-lg:flex-col">
         <div className="border-pri-light p-6 max-lg:border-b lg:border-r lg:p-16">
           <h2 className="typography-h2 text-balance">Join the community</h2>

src/components/index-page/powered-by-community.tsx

@@ -4,7 +4,7 @@ import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.sv
 
 export function PoweredByCommunity() {
   return (
-    <section className="gql-section max-sm:px-0 lg:pb-16 xl:pb-24">
+    <section className="gql-section max-sm:px-0 lg:pb-16 lg:max-xl:px-0 xl:pb-24">
       <div className="gql-container dark typography-body-lg flex bg-pri-darker text-neu-900 max-lg:flex-col">
         <div className="border-pri-light p-6 max-lg:border-b lg:border-r lg:p-16">
           <h2 className="typography-h2 text-balance">

src/components/index-page/use-cases/arrow-right.svg

@@ -1,11 +1,11 @@
 "use client"
 
 import clsx from "clsx"
-import { useState } from "react"
+import { useState, Fragment } from "react"
 
 import { Button } from "@/app/conf/_design-system/button"
-import ArrowRightIcon from "./arrow-right.svg?svgr"
 import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
+import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
 
 import blurBean from "./blur-bean.webp"
 
@@ -29,28 +29,35 @@ const USE_CASES: UseCase[] = [
     description:
       "Fetch only the data you need to minimize payload size and round-trips. Build resilient UIs that work well on variable networks.",
     cta: "Mobile Patterns",
-    href: "/learn/best-practices#mobile",
+    href: "TODO",
   },
   {
     label: "A frontend-heavy app with advanced UI needs",
     description:
       "Co-locate queries with components and keep state consistent. Compose data from many backends without bespoke endpoints.",
     cta: "Frontend Integration Guide",
-    href: "/learn/queries#components",
+    href: "TODO",
   },
   {
     label: "An app with real-time updates",
     description:
       "Use subscriptions for low-latency updates while keeping the schema as the single contract for clients and servers.",
     cta: "Real-time with Subscriptions",
-    href: "/learn/subscriptions",
+    href: "TODO",
   },
   {
     label: "A simple full stack TypeScript app",
     description:
       "Strong types end-to-end with code generation and great DX. Ship faster without compromising correctness.",
     cta: "Full Stack TS Starter",
-    href: "/learn#typescript",
+    href: "TODO",
+  },
+  {
+    label: "An AI-powered app",
+    description:
+      "Build apps with soft core with GraphQL MCP, using GraphQL schema introspection to give access and teach an LLM about your data.",
+    cta: "MCP GraphQL",
+    href: "https://github.com/graphql/graphql-mcp",
   },
 ]
 
@@ -75,39 +82,71 @@ export function UseCases({
           </p>
 
           <div className="3xl:flex-1" />
-          <ul className="mt-8 divide-y divide-sec-dark border border-sec-dark lg:mt-16">
+          <div
+            role="tablist"
+            className="mt-8 divide-y divide-sec-dark border border-sec-dark max-lg:sr-only lg:mt-16"
+          >
             {USE_CASES.map((useCase, i) => (
-              <li key={useCase.label}>
+              <button
+                role="tab"
+                type="button"
+                key={useCase.label}
+                tabIndex={i === 0 ? 0 : -1}
+                onKeyDown={arrowsMoveSideways}
+                onPointerDown={() => setSelectedIndex(i)}
+                onFocus={() => setSelectedIndex(i)}
+                aria-selected={i === selectedIndex ? "true" : undefined}
+                className="gql-focus-visible group flex w-full items-center justify-between gap-6 border-b border-sec-dark px-3 py-4 text-left transition-colors hover:bg-sec-lighter aria-selected:bg-sec-base aria-selected:hover:bg-sec-lighter hover:dark:bg-neu-100/25 dark:aria-selected:bg-sec-darker"
+              >
+                <span className="typography-body-lg">{useCase.label}</span>
+                <ArrowDownIcon className="size-10 shrink-0 -rotate-90 text-sec-dark opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100 group-aria-selected:opacity-100 dark:text-neu-900" />
+              </button>
+            ))}
+          </div>
+          <div className="3xl:flex-1" />
+        </div>
+
+        <article className="relative flex h-auto flex-col bg-sec-base dark:bg-sec-darker">
+          <Stripes />
+          <div className="flex flex-1 justify-center overflow-hidden max-lg:flex-col lg:items-center">
+            {USE_CASES.map((useCase, i) => (
+              <Fragment key={useCase.label}>
                 <button
                   type="button"
-                  onClick={() => setSelectedIndex(i)}
+                  onPointerDown={() => setSelectedIndex(i)}
+                  onFocus={() => setSelectedIndex(i)}
                   aria-selected={i === selectedIndex ? "true" : undefined}
-                  className="group flex w-full items-center justify-between gap-6 px-3 py-4 text-left transition-colors hover:bg-sec-lighter aria-selected:bg-sec-base aria-selected:hover:bg-sec-lighter hover:dark:bg-neu-100/25 dark:aria-selected:bg-sec-darker"
+                  className="z-[1] flex w-full items-center justify-between gap-6 border-b border-sec-dark px-3 py-4 text-left first:border-t hover:bg-sec-light aria-selected:bg-sec-light dark:bg-sec-darker dark:hover:bg-neu-100/25 dark:aria-selected:bg-sec-darker max-lg:dark:bg-neu-50 lg:hidden"
                 >
-                  <span className="typography-body-lg">{useCase.label}</span>
-                  <ArrowRightIcon className="size-10 shrink-0 text-sec-dark opacity-0 transition-opacity group-hover:opacity-100 group-aria-selected:opacity-100 dark:text-neu-900" />
+                  <span className="typography-body-lg text-neu-900">
+                    {useCase.label}
+                  </span>
+                  <ArrowDownIcon className="size-6 shrink-0 text-sec-dark transition-transform [[aria-selected=false]>&]:rotate-180" />
                 </button>
-              </li>
+                <div
+                  role="tabpanel"
+                  className={clsx(
+                    "relative h-full flex-1 p-8 lg:p-12 xl:p-16",
+                    selectedIndex === i ? "border-b border-sec-dark" : "hidden",
+                  )}
+                >
+                  <div className="relative z-10 my-auto max-h-[528px] max-w-2xl">
+                    <h3 className="typography-body-lg text-sec-darker dark:text-sec-lighter max-lg:hidden">
+                      {useCase.label}
+                    </h3>
+                    <p className="typography-h3 text-neu-800 lg:mt-10 lg:max-xl:text-xl">
+                      {useCase.description}
+                    </p>
+                    <div className="mt-8 flex xl:mt-[120px]">
+                      <Button href={useCase.href} variant="primary">
+                        {useCase.cta}
+                        <ArrowDownIcon className="size-6 shrink-0 -rotate-90 text-neu-0" />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </Fragment>
             ))}
-          </ul>
-          <div className="3xl:flex-1" />
-        </div>
-
-        <article className="relative flex h-auto flex-col bg-sec-base p-8 dark:bg-sec-darker md:p-12 lg:p-16">
-          <Stripes />
-          <div className="z-10 my-auto max-h-[528px] max-w-2xl">
-            <h3 className="typography-body-lg text-sec-darker dark:text-sec-lighter">
-              {selected.label}
-            </h3>
-            <p className="typography-h3 mt-10 text-neu-800">
-              {selected.description}
-            </p>
-            <div className="mt-8 flex xl:mt-[120px]">
-              <Button href={selected.href} variant="primary">
-                {selected.cta}
-                <ArrowRightIcon className="size-6 shrink-0 text-neu-0" />
-              </Button>
-            </div>
           </div>
         </article>
       </div>
@@ -137,3 +176,19 @@ function Stripes() {
     </div>
   )
 }
+
+function arrowsMoveSideways(event: React.KeyboardEvent<HTMLButtonElement>) {
+  if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+    const previousElement = event.currentTarget.previousElementSibling
+    if (previousElement) {
+      event.preventDefault()
+      ;(previousElement as HTMLElement).focus()
+    }
+  } else if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+    const nextElement = event.currentTarget.nextElementSibling
+    if (nextElement) {
+      event.preventDefault()
+      ;(nextElement as HTMLElement).focus()
+    }
+  }
+}