Merge pull request #31 from hasparus/new-landing--a-graphql-query

new landing — a graphql query

Author: hasparus

next.config.js

@@ -3,9 +3,10 @@
 import nextra from "nextra"
 import path from "node:path"
 import withLess from "next-with-less"
-import { remarkGraphiQLComment } from "./src/remark-graphiql-comment.js"
 import fs from "fs"
 
+import { remarkGraphiQLComment } from "./src/remark-graphiql-comment.js"
+
 const vercelJSON = JSON.parse(fs.readFileSync("./vercel.json", "utf-8"))
 
 const withNextra = nextra({

pnpm-lock.yaml

@@ -1,43 +1,46 @@
-import Link from "next/link"
+import { ChevronRight } from "@/app/conf/_design-system/pixelarticons/chevron-right"
+import { Button } from "@/app/conf/_design-system/button"
+
 import { CodeA, CodeB, CodeC } from "../code-blocks"
-import { clsx } from "clsx"
+
+const TRY_IT_OUT_URL = "https://graphql.org/swapi-graphql"
 
 export function HowItWorks() {
   return (
-    <div className="[background:url('/img/graph-wash.png'),#171e26_repeat_center_center] xl:py-20">
-      <div className="conf-block container">
-        <section
-          className={clsx(
-            "flex flex-wrap items-center justify-center gap-14 max-sm:flex-col",
-            "[&_h3]:text-2xl [&_h3]:text-white max-lg:[&_h3]:text-center",
-            "[&_pre]:!bg-transparent [&_pre]:ring-0 [&_pre_span]:text-[--shiki-dark]",
-            "[&_h3]:font-extralight",
-            "[&_code]:whitespace-pre-wrap" /* fix scroll on mobile for code-blocks */,
-          )}
-        >
-          <div>
-            <h3>Describe your data</h3>
-            <CodeA />
-          </div>
+    <section className="gql-container gql-section xl:py-20">
+      <span className="mb-6 flex w-[80px] shrink-0 items-center gap-1 self-start whitespace-nowrap font-mono text-sm/none font-normal uppercase text-pri-base">
+        <ChevronRight className="shrink-0 translate-y-[-0.5px]" />
+        How it works
+      </span>
+      <h2 className="typography-h2 mb-6 lg:mb-16">A GraphQL Query</h2>
+      <ol className="gql-radial-gradient list-none gap-px max-md:bg-gradient-to-r max-md:from-transparent max-md:via-neu-400 max-md:to-transparent lg:grid lg:grid-cols-3">
+        <ListItem text="Describe your data" code={<CodeA />} />
+        <ListItem text="Ask for what you want" code={<CodeB />} />
+        <ListItem text="Get predictable results" code={<CodeC />} />
+      </ol>
 
-          <div>
-            <h3>Ask for what you want</h3>
-            <CodeB />
-          </div>
-
-          <div>
-            <h3>Get predictable results</h3>
-            <CodeC />
-          </div>
-        </section>
+      <Button className="mx-auto mt-8 w-fit lg:mt-16" href={TRY_IT_OUT_URL}>
+        Try it out live
+      </Button>
+    </section>
+  )
+}
 
-        <Link
-          className="index-button mx-auto mt-10 block w-fit border-white text-white"
-          href="/TODO"
-        >
-          Try it out live
-        </Link>
+function ListItem({
+  text,
+  code,
+}: {
+  text: React.ReactNode
+  code: React.ReactNode
+}) {
+  return (
+    <li className="[counter-increment:list-item]">
+      <div className="typography-body-md bg-neu-0 py-4 before:typography-body-sm before:mr-2 before:inline-flex before:size-5 before:translate-y-[-0.5px] before:items-center before:justify-center before:bg-neu-200 before:p-1 before:text-neu-800 before:content-[counter(list-item)] md:py-6 md:before:ml-6">
+        {text}
+      </div>
+      <div className="mt-px bg-neu-0 md:pl-2 md:pt-2 max-md:[&_code>span]:!pl-0 [&_pre]:ring-0">
+        {code}
       </div>
-    </div>
+    </li>
   )
 }

public/img/graph-wash.png

@@ -11,7 +11,7 @@ import { HowItWorks } from "./how-it-works"
 
 export function IndexPage() {
   return (
-    <div className="index">
+    <div className="bg-neu-0">
       <Hero />
       <TrustedBy />
       <HowItWorks />

src/components/index-page/how-it-works.tsx

@@ -115,7 +115,7 @@ export function TrustedBy() {
       </div>
       <div
         className={clsx(
-          "my-6 grid grid-cols-2 justify-center gap-px md:my-12 md:grid-cols-5 xl:my-16",
+          "gql-radial-gradient my-6 grid grid-cols-2 justify-center gap-px md:my-12 md:grid-cols-5 xl:my-16",
           styles.logos,
         )}
       >
@@ -125,7 +125,7 @@ export function TrustedBy() {
             href={href}
             target="_blank"
             rel="noreferrer"
-            className="group flex shrink-0 items-center justify-center bg-neu-0 p-10 before:inset-2 hover:before:bg-neu-100 dark:hover:before:bg-[#202219]"
+            className="group relative flex shrink-0 items-center justify-center bg-neu-0 p-10 *:z-[1] before:absolute before:inset-2 hover:before:bg-neu-100/50 dark:hover:before:bg-[#202219]"
           >
             <Component />
           </a>

src/components/index-page/index.tsx

@@ -1,20 +1,15 @@
 .logos {
-  background-image: radial-gradient(
-    ellipse at 50% 50%,
-    hsl(var(--color-neu-600)) 0%,
-    transparent 75%
-  );
-  background-size: 100% 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-
   & .shopify > svg {
     transition: opacity 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
   }
 
   & > a {
     transition: background-color 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
 
+    &::before {
+      transition: background-color 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
+    }
+
     & :is(svg, path) {
       transition: fill 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
     }

src/components/index-page/trusted-by/index.tsx

@@ -520,6 +520,17 @@ div[id^="headlessui-menu-items"] {
   --navbar-h: var(--nextra-navbar-height);
 }
 
+.gql-radial-gradient {
+  background-image: radial-gradient(
+    ellipse at 50% 50%,
+    hsl(var(--color-neu-600)) 0%,
+    transparent 75%
+  );
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
 :root {
   --navbar-h: 70px;
 }