new landing — hero

next.config.js

@@ -9,6 +9,7 @@ import fs from "fs"
 const vercelJSON = JSON.parse(fs.readFileSync("./vercel.json", "utf-8"))
 
 const withNextra = nextra({
+  autoImportThemeStyle: false,
   theme: "nextra-theme-docs",
   themeConfig: "./theme.config.tsx",
   mdxOptions: {

package.json

@@ -48,12 +48,13 @@
     "next-query-params": "^5.0.1",
     "next-sitemap": "^4.2.3",
     "next-with-less": "^3.0.1",
-    "nextra": "3.0.0-alpha.28",
-    "nextra-theme-docs": "3.0.0-alpha.28",
+    "nextra": "^3",
+    "nextra-theme-docs": "^3",
     "numbro": "2.5.0",
     "p-limit": "^4.0.0",
     "parser-front-matter": "1.6.4",
     "postcss": "^8.4.49",
+    "postcss-import": "^16.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-medium-image-zoom": "5.2.13",
@@ -97,7 +98,7 @@
   },
   "pnpm": {
     "patchedDependencies": {
-      "nextra@3.0.0-alpha.28": "patches/nextra@3.0.0-alpha.22.patch"
+      "nextra": "patches/nextra.patch"
     }
   }
 }

patches/nextra.patch

@@ -0,0 +1,26 @@
+diff --git a/dist/client/components/image.js b/dist/client/components/image.js
+index 239d72f5921e2d1b7359e569ae5b74c12d7c9d8a..ebeb619da1e3ccb7722e9388c92c1e2192527027 100644
+--- a/dist/client/components/image.js
++++ b/dist/client/components/image.js
+@@ -1,5 +1,5 @@
+ import { jsx } from "react/jsx-runtime";
+-import NextImage from "next/image";
++import NextImage from "next-image-export-optimizer";
+ import { forwardRef } from "react";
+ const Image = forwardRef((props, ref) => {
+   const ComponentToUse = typeof props.src === "object" ? NextImage : "img";
+diff --git a/dist/client/normalize-pages.js b/dist/client/normalize-pages.js
+index 15afee0c1de26f47d781f423e5ec32e33ad925d3..fefd01736bd2b778df275bf50ac48384d5f63845 100644
+--- a/dist/client/normalize-pages.js
++++ b/dist/client/normalize-pages.js
+@@ -103,7 +103,9 @@ The field key "${metaKey}.items.${key}" in \`_meta\` file refers to a page that
+     }
+     if (item) continue;
+     if (typeof window === "undefined") {
+-      const isValid = metaItem.type === "separator" || metaItem.type === "menu" || metaItem.href;
++      const isValid = metaItem.type === "separator" || metaItem.type === "menu" || metaItem.href
++      // workaround
++      || metaKey === 'conf';
+       if (!isValid) {
+         throw new Error(
+           `Validation of "_meta" file has failed.

postcss.config.cjs

@@ -5,5 +5,6 @@ module.exports = {
     "tailwindcss/nesting": {},
     tailwindcss: {},
     autoprefixer: {},
+    "postcss-import": {},
   },
 }

src/components/index-page/hero.tsx

@@ -1,49 +1,59 @@
-import Link from "next/link"
-import { CodeA, CodeB, CodeC } from "../code-blocks"
-import { GraphQLLogo } from "@/icons"
-import { clsx } from "clsx"
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
+import CheckIcon from "@/app/conf/_design-system/pixelarticons/check.svg?svgr"
+import { Button } from "@/app/conf/_design-system/button"
+import { ImageLoaded } from "@/app/conf/2025/components/image-loaded"
+
+import logoBlurred from "./hero/logo-blurred.png"
 
 export function Hero() {
   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 className="flex flex-col items-center gap-2 max-xl:w-full max-md:grow">
-            <GraphQLLogo className="w-24" />
-            <h1 className="text-3xl text-primary">GraphQL</h1>
-          </div>
-
-          <div>
-            <h3>Describe your data</h3>
-            <CodeA />
-          </div>
+    <div className="relative bg-neu-0">
+      <div className="gql-conf-container flex flex-col-reverse lg:grid lg:grid-cols-2">
+        <div className="flex max-w-4xl flex-col justify-center gap-4 p-4 lg:min-h-[800px] xl:gap-8 xl:py-24 xl:pl-24 xl:pr-10">
+          <h1 className="typography-h1 max-w-3xl text-neu-900">
+            The query language for modern APIs
+          </h1>
 
-          <div>
-            <h3>Ask for what you want</h3>
-            <CodeB />
-          </div>
+          <ul className="flex flex-col gap-2">
+            {[
+              "Deliver high-performance user experience at scale",
+              "Secure and stabilize your API with a strongly typed schema and validated queries",
+              "Reduce dependencies through efficient, distributed development",
+            ].map((item, index) => (
+              <li key={index} className="flex items-start gap-1">
+                <CheckIcon className="size-6 shrink-0 text-pri-base max-lg:mt-px" />
+                <p className="text-pretty text-neu-800">{item}</p>
+              </li>
+            ))}
+          </ul>
 
-          <div>
-            <h3>Get predictable results</h3>
-            <CodeC />
+          <div className="flex items-center gap-4">
+            <Button href="/learn" className="max-sm:w-full">
+              Learn more
+            </Button>
           </div>
-        </section>
-
-        <Link
-          className="index-button mx-auto mt-10 block w-fit border-white text-white"
-          href="/learn"
-        >
-          Get Started
-        </Link>
+        </div>
+        <HeroStripes />
       </div>
     </div>
   )
 }
+
+function HeroStripes() {
+  return (
+    <div className="pointer-events-none relative overflow-hidden max-lg:h-[210px]">
+      <ImageLoaded
+        image={logoBlurred}
+        className="relative h-full bg-gradient-to-b from-pri-base to-pri-lighter opacity-0 transition-opacity duration-[1.5s] [mask-position:center_12%] [mask-size:110%] data-[loaded=true]:opacity-100 dark:to-pri-base lg:[mask-position:7%_7%] lg:[mask-size:200%]"
+        style={{
+          maskImage: `url(${logoBlurred.src})`,
+          maskRepeat: "no-repeat",
+        }}
+      />
+      <StripesDecoration
+        stripeWidth="5px"
+        oddClassName="bg-gradient-to-b from-sec-base to-pri-lighter dark:from-sec-darker dark:to-pri-darker"
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,43 @@
+import Link from "next/link"
+import { CodeA, CodeB, CodeC } from "../code-blocks"
+import { clsx } from "clsx"
+
+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>
+
+          <div>
+            <h3>Ask for what you want</h3>
+            <CodeB />
+          </div>
+
+          <div>
+            <h3>Get predictable results</h3>
+            <CodeC />
+          </div>
+        </section>
+
+        <Link
+          className="index-button mx-auto mt-10 block w-fit border-white text-white"
+          href="/TODO"
+        >
+          Try it out live
+        </Link>
+      </div>
+    </div>
+  )
+}

src/components/index-page/index.tsx

@@ -6,11 +6,13 @@ import { PowerFulTools } from "./powerful-tools"
 import { WithoutVersion } from "./without-version"
 import { BringYourOwnCode } from "./bring-your-own-code"
 import { WhoIsUsing } from "./who-is-using"
+import { HowItWorks } from "./how-it-works"
 
 export function IndexPage() {
   return (
     <div className="index">
       <Hero />
+      <HowItWorks />
       <section className="conf-block container flex max-w-3xl flex-col items-center text-center">
         <h2>A query language for your API</h2>
         <p>

src/globals.css

@@ -1,6 +1,13 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "./nextra-theme-docs.css";
+@import "tailwindcss/base";
+@import "tailwindcss/utilities";
+@import "tailwindcss/components";
+
+/* #region nextra tweaks (preferably removed later, replaced with components) */
+.nextra-nav-container > nav > div:nth-child(2) {
+  margin-right: auto;
+}
+/* #endregion nextra tweaks */
 
 :root {
   --foreground-rgb: 0, 0, 0;
@@ -286,20 +293,6 @@ div[id^="headlessui-menu-items"] {
   @apply rounded border border-current px-2.5 py-1 text-sm font-bold transition-colors;
 }
 
-.index {
-  p {
-    @apply mb-5 max-w-2xl text-lg lg:text-xl/9;
-  }
-
-  h2 {
-    @apply mb-10 text-balance text-3xl font-bold lg:text-5xl;
-  }
-
-  pre {
-    @apply bg-white;
-  }
-}
-
 .add,
 .remove {
   @apply shadow-[2px_0_currentColor_inset];