Match icons, improve styles

Author: hasparus

…onents/learn-aggregator/assets/board.svg …ents/learn-aggregator/assets/circuit.svgsrc/components/learn-aggregator/assets/board.svg renamed to src/components/learn-aggregator/assets/circuit.svg src/components/learn-aggregator/assets/board.svg renamed to src/components/learn-aggregator/assets/circuit.svg

@@ -35,12 +35,12 @@ export function TeaserSection({
   return (
     <section
       className={clsx(
-        "gql-container gql-section flex items-start gap-8 max-lg:flex-col lg:gap-12 xl:gap-16",
+        "gql-container gql-section flex items-start gap-8 max-lg:flex-col max-lg:pt-6 lg:gap-12 xl:gap-16",
         className,
       )}
       {...rest}
     >
-      <header className="flex max-w-[720px] flex-col gap-6 pt-6 text-left">
+      <header className="flex max-w-[720px] flex-col gap-6 text-left lg:max-w-[540px]">
         <div className="flex flex-col gap-6">
           <Eyebrow>{eyebrow}</Eyebrow>
           <h2 className="typography-h2 text-pretty text-neu-900">{title}</h2>
@@ -50,7 +50,7 @@ export function TeaserSection({
           {cta}
         </div>
       </header>
-      <ul className="flex flex-col gap-4 lg:gap-8">
+      <ul className="grid grid-cols-1 justify-stretch gap-4 sm:max-lg:grid-cols-2 lg:gap-8">
         {items.map((item, index) => {
           return (
             <TeaserSectionListItem
@@ -65,7 +65,7 @@ export function TeaserSection({
                   src={item.icon}
                   width={72}
                   height={72}
-                  className="aspect-square"
+                  className="aspect-square lg:size-[138px]"
                   loading={index < 2 && firstIconsEager ? "eager" : "lazy"}
                   alt=""
                 />
@@ -97,12 +97,12 @@ function TeaserSectionListItem({
   href,
 }: TeaserSectionListItemProps) {
   return (
-    <li className="text-neu-900">
+    <li className="flex text-neu-900">
       <a
         href={href}
-        className="gql-focus-visible grid border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_auto] hover:border-neu-300 hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_arrow''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"
+        className="gql-focus-visible grid border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:border-neu-300 hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"
       >
-        <div
+        <span
           className={clsx(
             "flex size-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] lg:size-[190px]",
             section === "getting-started" &&
@@ -112,24 +112,24 @@ function TeaserSectionListItem({
           )}
         >
           {icon}
-        </div>
+        </span>
 
-        <div className="flex flex-col gap-1 px-2 pt-2 [grid-area:header] lg:px-4 lg:pt-4">
-          <span className="typography-body-sm text-neu-700">
+        <span className="flex flex-col gap-1 px-2 pt-2 [grid-area:header] lg:px-4 lg:pt-4">
+          <span className="typography-body-sm text-neu-700 max-lg:typography-body-md">
             Lesson {number}
           </span>
-          <strong className="typography-h3 font-normal text-neu-900">
+          <span className="typography-h3 font-normal text-neu-900">
             {title}
-          </strong>
-        </div>
+          </span>
+        </span>
 
-        <p className="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:border-t max-lg:border-neu-200">
+        <p className="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200">
           {description}
         </p>
 
-        <div className="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] lg:flex">
+        <span className="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] lg:flex">
           <ArrowDownIcon className="size-8 shrink-0 -rotate-90" />
-        </div>
+        </span>
       </a>
     </li>
   )

src/components/learn-aggregator/index.tsx

@@ -69,16 +69,11 @@ const _items: Record<
     section: "getting-started",
   },
   // ---
-  "best-practices": {
-    description:
-      "Practical guidance for common GraphQL concerns like networking, authorization, and pagination.",
-    icon: new URL("./assets/books.svg", import.meta.url).href,
-    section: "best-practices",
-  },
+  "best-practices": null,
   "thinking-in-graphs": {
     description:
       "Learn how to shift your mindset from RESTful endpoints to graph-based thinking, aligning your schema with business logic and legacy systems.",
-    icon: new URL("./assets/layer.svg", import.meta.url).href,
+    icon: new URL("./assets/share.svg", import.meta.url).href,
     section: "best-practices",
   },
   "serving-over-http": {
@@ -102,25 +97,25 @@ const _items: Record<
   pagination: {
     description:
       "Discover different pagination strategies in GraphQL, from simple slicing to fully connected edges and nodes.",
-    icon: new URL("./assets/checkbox.svg", import.meta.url).href,
+    icon: new URL("./assets/layer.svg", import.meta.url).href,
     section: "best-practices",
   },
   "schema-design": {
     description:
       "Learn how to design clear, adaptable schemas — including versioning and thoughtful use of nullability.",
-    icon: new URL("./assets/cog-double.svg", import.meta.url).href,
+    icon: new URL("./assets/solve.svg", import.meta.url).href,
     section: "best-practices",
   },
   "global-object-identification": {
     description:
       "Use globally unique IDs and the Node interface to enable caching, refetching, and efficient schema traversal.",
-    icon: new URL("./assets/dna.svg", import.meta.url).href,
+    icon: new URL("./assets/product-check.svg", import.meta.url).href,
     section: "best-practices",
   },
   caching: {
     description:
       "Explore caching techniques and ID strategies that make client-side performance and object reuse more effective.",
-    icon: new URL("./assets/sync-square.svg", import.meta.url).href,
+    icon: new URL("./assets/books.svg", import.meta.url).href,
     section: "best-practices",
   },
   performance: {
@@ -138,13 +133,13 @@ const _items: Record<
   federation: {
     description:
       "Learn how GraphQL federation enables modular, scalable APIs by composing services into a unified schema.",
-    icon: new URL("./assets/globe.svg", import.meta.url).href,
+    icon: new URL("./assets/circuit.svg", import.meta.url).href,
     section: "best-practices",
   },
   "debug-errors": {
     description:
       "Learn about common 'graphql-http' errors and how to debug them.",
-    icon: new URL("./assets/solve.svg", import.meta.url).href,
+    icon: new URL("./assets/construction.svg", import.meta.url).href,
     section: "best-practices",
   },
 }

src/components/learn-aggregator/learn-pages.tsx

@@ -12,7 +12,7 @@ export function TocHero({ heading, text, children, decoration }: TocHeroProps) {
       {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>
-        <p className="typography-body-sm max-w-[80vw] text-pretty">{text}</p>
+        <p className="typography-body-md max-w-[80vw] text-pretty">{text}</p>
         {children}
       </div>
     </section>

src/components/toc-hero/index.tsx

@@ -33,7 +33,7 @@ import { NavbarFixed } from '../../components/navbar/navbar-fixed'
   description=
     "In this tutorial-style introduction to GraphQL, you'll learn the core concepts that power every GraphQL API. Follow a step-by-step path from basic queries to advanced features."
   cta={
-    <Button href="/learn/introduction" className='lg:w-fit'>
+    <Button href="/learn/introduction" className='md:w-fit'>
       Start learning
     </Button>
   }
@@ -48,7 +48,7 @@ import { NavbarFixed } from '../../components/navbar/navbar-fixed'
   description=
     "Here you'll explore real-world strategies for designing and operating GraphQL APIs. These guides will help you build for scale and safety."
   cta={
-    <Button href="/learn/best-practices" className='lg:w-fit'>
+    <Button href="/learn/best-practices" className='md:w-fit'>
       Explore all best practices
     </Button>
   }