Improve the landing

Author: hasparus

src/_design-system/syntax/light.json

@@ -27,7 +27,7 @@
     "diffEditor.insertedTextBackground": "#b7e7a44b",
     "diffEditor.removedTextBackground": "#e597af52",
     "editor.background": "#ffffff",
-    "editor.foreground": "#6E7557",
+    "editor.foreground": "#4f533f",
     "editor.lineHighlightBorder": "#f2f2f2",
     "editorBracketMatch.background": "#E7F3FF",
     "editorBracketMatch.border": "#c8e1ff",
@@ -193,7 +193,6 @@
         "entity.name.tag.yaml",
         "support.function.node",
         "support.type.property-name.json",
-        "punctuation.separator.key-value",
         "punctuation.definition.template-expression"
       ],
       "settings": {
@@ -270,7 +269,6 @@
       "scope": [
         "punctuation.definition.arguments",
         "punctuation.definition.dict",
-        "punctuation.separator",
         "meta.function-call.arguments"
       ],
       "settings": {

src/components/code-blocks/index.tsx

@@ -15,8 +15,8 @@ import _V2 from "./v2.mdx"
 import _V3 from "./v3.mdx"
 import _V4 from "./v4.mdx"
 import _V5 from "./v5.mdx"
-import _Query from "./query.mdx"
-import _Schema from "./schema.mdx"
+export { default as Query } from "./query.mdx"
+export { default as Schema } from "./schema.mdx"
 import _QueryHeroFriends from "./query.hero-friends.mdx"
 import _ResponseHeroFriends from "./response.hero-friends.mdx"
 import _PredictableResult from "./predictable-result.mdx"
@@ -35,8 +35,6 @@ export const Code2 = () => <_Code2 components={components} />
 export const Code3 = () => <_Code3 components={components} />
 export const Code4 = () => <_Code4 components={components} />
 
-export const Query = () => <_Query components={components} />
-export const Schema = () => <_Schema components={components} />
 export const CodeA = () => <_CodeA components={components} />
 export const CodeB = () => <_CodeB components={components} />
 export const CodeC = () => <_CodeC components={components} />

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

@@ -0,0 +1,71 @@
+import { ComponentPropsWithoutRef, useEffect, useRef } from "react"
+import { clsx } from "clsx"
+import { Code } from "nextra/components"
+
+import { Pre } from "@/components/pre"
+
+import { Query, Schema } from "../../code-blocks"
+
+const components = {
+  pre: (props: ComponentPropsWithoutRef<typeof Pre>) => (
+    <Pre
+      {...props}
+      // todo: this bg style might need to become global for all code blocks
+      className={clsx(
+        props.className,
+        "!bg-neu-0/[.48] backdrop-blur-[6px] max-xs:[&_span]:!text-xs",
+      )}
+      tabIndex={-1}
+    />
+  ),
+  code: Code,
+}
+
+export function ConsistencyFigure() {
+  const queryRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    const [queryCode, responseCode] = queryRef.current!.querySelectorAll(
+      "code",
+    ) as unknown as HTMLElement[]
+    let line = 0
+    const typeLines = [1, 5, 6, 5, 7, 12, 13, 8, 17, 18, 19, 12]
+    const queryLines = [1, 2, 3, 4, 5, 6, 7, 9, 10, 11, 12, 13]
+    let timer: any
+
+    const highlightLine = () => {
+      // Reset previous line
+      queryCode.children[queryLines.at(line - 1)!].classList.remove(
+        "highlighted",
+      )
+      responseCode.children[typeLines.at(line - 1)!].classList.remove(
+        "highlighted",
+      )
+
+      // TODO: Whenever we're adding .highlighted, we should also ensure it's visible on screen.
+      // We can simplify this by scrolling to bottom in last 3 steps.
+      queryCode.children[queryLines.at(line)!].classList.add("highlighted")
+      responseCode.children[typeLines.at(line)!].classList.add("highlighted")
+      line = (line + 1) % typeLines.length
+
+      timer = setTimeout(highlightLine, 1_000 + Math.random() * 200)
+    }
+    highlightLine()
+    return () => clearTimeout(timer)
+  }, [])
+
+  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 xl:px-[46px] [&_pre]:!h-[420px]"
+    >
+      <div
+        className="nextra-codeblocks grid w-full grid-cols-2 [&_.highlighted]:!bg-pri-lighter/50 dark:[&_.highlighted]:!bg-neu-200/10"
+        aria-hidden
+        ref={queryRef}
+      >
+        <Query components={components} />
+        <Schema components={components} />
+      </div>
+    </section>
+  )
+}

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

@@ -1,10 +1,12 @@
 import { Button } from "@/app/conf/_design-system/button"
 import { SectionLabel } from "@/app/conf/_design-system/section-label"
 import { ReactNode } from "react"
+import { clsx } from "clsx"
 
 import { PrecisionFigure } from "./precision"
 import { OptimizationFigure } from "./optimization"
 import { ProductivityFigure } from "./productivity"
+import { ConsistencyFigure } from "./consistency"
 
 export function GraphQLAdvantages() {
   return (
@@ -48,8 +50,8 @@ export function GraphQLAdvantages() {
           <Subsection
             name="Consistency"
             bigText="Build confidently with a type-safe schema"
-            text="GraphQL APIs are structured around types and fields, not rigid endpoints. This ensures data consistency, self-documentation, and clear, actionable errors. Apps can use types to avoid writing manual parsing code."
-            figure={null}
+            text="GraphQL APIs are structured around types and fields, not endpoints. This ensures data consistency, self-documentation, and clear, actionable errors. Apps can use types to avoid writing manual parsing code."
+            figure={<ConsistencyFigure />}
             cta={
               <Button href="/learn/schema" variant="secondary">
                 Learn more about GraphQL schemas
@@ -93,26 +95,35 @@ function Subsection({
   cta,
   figure,
   text,
+  className,
 }: {
   name: string
   bigText: ReactNode
   cta: ReactNode
   figure: ReactNode
   text: ReactNode
+  className?: string
 }) {
   return (
-    <article className="grid gap-x-4 lg:grid-cols-2 lg:*:[grid-column:1] xl:gap-x-12">
+    <article
+      className={clsx(
+        "grid gap-x-4 lg:grid-cols-2 lg:*:[grid-column:1] xl:gap-x-16 2xl:gap-x-24",
+        className,
+      )}
+    >
       <h3 className="typography-body-sm size-min items-center justify-center bg-sec-light px-1 py-[1.5px] font-normal dark:bg-sec-darker">
         {name}
       </h3>
-      <strong className="typography-h3 mt-4 font-normal lg:mt-8">
+      <strong className="typography-h3 mt-4 text-balance font-normal lg:mt-8">
         {bigText}
       </strong>
-      <div className="flex max-lg:mt-6 max-sm:-mx-4 lg:row-start-1 lg:row-end-5 lg:![grid-column:2]">
+      <div className="flex max-lg:mt-6 max-sm:-mx-4 lg:row-start-1 lg:row-end-6 lg:![grid-column:2]">
         {figure}
       </div>
-      <p className="typography-body-lg my-6 lg:mb-4 lg:mt-8">{text}</p>
-      <div className="self-end lg:justify-self-start">{cta}</div>
+      <p className="typography-body-lg my-6 text-pretty lg:mb-4 lg:mt-8">
+        {text}
+      </p>
+      <div className="self-end lg:justify-self-start xl:mt-2">{cta}</div>
     </article>
   )
 }

src/components/index-page/index.tsx

@@ -1,7 +1,6 @@
 import { Hero } from "./hero"
 import { TrustedBy } from "./trusted-by"
 import { SingleRequest } from "./single-request"
-import { TypeSystem } from "./type-system"
 import { WithoutVersion } from "./without-version"
 import { BringYourOwnCode } from "./bring-your-own-code"
 import { WhoIsUsing } from "./who-is-using"
@@ -32,7 +31,6 @@ export function IndexPage() {
         </p>
       </section>
       <SingleRequest />
-      <TypeSystem />
       <WithoutVersion />
       <BringYourOwnCode />
       <WhoIsUsing />