Make the hero look like on designs

Author: hasparus

package.json

@@ -54,6 +54,7 @@
     "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",

pnpm-lock.yaml

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

postcss.config.cjs

@@ -1,46 +1,58 @@
-import Link from "next/link"
-import { GraphQLLogo } from "@/icons"
 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="relative min-h-screen bg-neu-0">
-      <HeroStripes />
-
-      <div className="flex max-w-4xl flex-col gap-10 py-24 pl-24 pr-10">
-        <h1 className="typography-h1 max-w-3xl text-neu-900">
-          The query language for modern APIs
-        </h1>
+    <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>
 
-        <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-center gap-1">
-              <CheckIcon className="size-6 shrink-0 text-pri-base" />
-              <p className="typography-body-sm text-neu-800">{item}</p>
-            </li>
-          ))}
-        </ul>
+          <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 className="flex items-center gap-4">
-          <Button href="/learn">Get Started</Button>
+          <div className="flex items-center gap-4">
+            <Button href="/learn" className="max-sm:w-full">
+              Learn more
+            </Button>
+          </div>
         </div>
+        <HeroStripes />
       </div>
     </div>
   )
 }
 
 function HeroStripes() {
   return (
-    <div className="pointer-events-none absolute right-0 top-0 h-full overflow-hidden">
+    <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"
+        oddClassName="bg-gradient-to-b from-sec-base to-pri-lighter dark:from-sec-darker dark:to-pri-darker"
       />
     </div>
   )

src/components/index-page/hero.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/hero/logo-blurred.png

@@ -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/components/index-page/how-it-works.tsx

@@ -1,10 +1,14 @@
-@layer l-base, l-nextra;
-
-@import "tailwindcss/base" layer(l-base);
-@import "nextra-theme-docs/style.css" layer(l-nextra);
+@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;
   --background-start-rgb: 214, 219, 220;