Merge pull request #32 from hasparus/new-landing--a-proven-solution

new landing — proven solution

Author: hasparus

src/app/conf/_design-system/section-label.tsx

@@ -0,0 +1,25 @@
+import { clsx } from "clsx"
+import { ChevronRight } from "./pixelarticons/chevron-right"
+
+export function SectionLabel({
+  children,
+  className,
+  ...rest
+}: {
+  children: React.ReactNode
+  className?: string
+  rest?: React.HTMLAttributes<HTMLSpanElement>
+}) {
+  return (
+    <span
+      className={clsx(
+        "flex shrink-0 items-center gap-1 self-start whitespace-nowrap font-mono text-sm/none font-normal uppercase text-pri-base dark:text-pri-light",
+        className,
+      )}
+      {...rest}
+    >
+      <ChevronRight className="shrink-0 translate-y-[-0.5px]" />
+      {children}
+    </span>
+  )
+}

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

@@ -1,5 +1,5 @@
-import { ChevronRight } from "@/app/conf/_design-system/pixelarticons/chevron-right"
 import { Button } from "@/app/conf/_design-system/button"
+import { SectionLabel } from "@/app/conf/_design-system/section-label"
 
 import { CodeA, CodeB, CodeC } from "../code-blocks"
 
@@ -8,10 +8,7 @@ const TRY_IT_OUT_URL = "https://graphql.org/swapi-graphql"
 export function HowItWorks() {
   return (
     <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>
+      <SectionLabel className="mb-6">How it works</SectionLabel>
       <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 />} />
@@ -35,7 +32,7 @@ function ListItem({
 }) {
   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">
+      <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)] dark:before:bg-neu-50 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">

src/components/index-page/index.tsx

@@ -8,13 +8,15 @@ import { WithoutVersion } from "./without-version"
 import { BringYourOwnCode } from "./bring-your-own-code"
 import { WhoIsUsing } from "./who-is-using"
 import { HowItWorks } from "./how-it-works"
+import { ProvenSolution } from "./proven-solution"
 
 export function IndexPage() {
   return (
     <div className="bg-neu-0">
       <Hero />
       <TrustedBy />
       <HowItWorks />
+      <ProvenSolution />
       <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/proven-solution/blur-bean.webp

@@ -0,0 +1,127 @@
+import { ImageLoaded } from "@/app/conf/2025/components/image-loaded"
+import { Button } from "@/app/conf/_design-system/button"
+import { SectionLabel } from "@/app/conf/_design-system/section-label"
+import CheckIcon from "@/app/conf/_design-system/pixelarticons/check.svg?svgr"
+
+import blurBean from "./blur-bean.webp"
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
+
+export function ProvenSolution() {
+  return (
+    <section className="dark relative overflow-hidden bg-pri-dark text-white dark:bg-pri-darker">
+      <Stripes />
+      <div className="gql-container py-8 xl:py-16">
+        <div className="gql-section relative">
+          <SectionLabel className="mb-6 !text-sec-light">
+            Business perspective
+          </SectionLabel>
+          <h2 className="typography-h2 mb-6 lg:mb-16">
+            A proven solution for startups and enterprises
+          </h2>
+          <div className="mb-12 grid gap-y-6 lg:grid-cols-3 lg:backdrop-blur-[6.4px] lg:[&>*:not(:first-child)]:border-l-0">
+            <ProvenSolutionCard
+              title={
+                <>
+                  The best user{" "}
+                  <br className="@[530px]/card:hidden max-lg:hidden" />
+                  experience
+                </>
+              }
+              description="Deliver high-performing user experiences at scale. The world’s leading apps use GraphQL to create faster, more responsive digital experiences."
+              bullets={[
+                "Faster data retrieval and load times",
+                "Improved bandwith efficiency",
+              ]}
+            />
+            <ProvenSolutionCard
+              title={
+                <>
+                  Stability &{" "}
+                  <br className="@[530px]/card:hidden max-lg:hidden" />
+                  Security
+                </>
+              }
+              description="Protect your APIs while maintaining full visibility into data consumption. GraphQL allows you to monitor, secure, and optimize API usage while ensuring compliance."
+              bullets={[
+                "Stronger access control",
+                "Improved business intelligence & cost analysis",
+              ]}
+            />
+            <ProvenSolutionCard
+              title={
+                <>
+                  Efficient distributed{" "}
+                  <br className="@[530px]/card:hidden max-lg:hidden" />
+                  development
+                </>
+              }
+              description="Let your teams ship faster with GraphQL’s flexible, decoupled architecture. GraphQL allows frontend and backend teams to work independently and efficiently."
+              bullets={[
+                "More rapid iterations",
+                "Improved cross-team collaboration",
+              ]}
+            />
+          </div>
+          <Button
+            className="mx-auto mt-8 w-fit lg:mt-16"
+            // todo: this should link to the Business Agregator page
+            href="/learn"
+          >
+            Learn more
+          </Button>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function ProvenSolutionCard({
+  title,
+  description,
+  bullets,
+}: {
+  title: React.ReactNode
+  description: React.ReactNode
+  bullets: string[]
+}) {
+  return (
+    <div className="flex flex-col border border-pri-light bg-pri-lighter/20 @container/card dark:bg-pri-base/20 max-lg:backdrop-blur-[6.4px]">
+      <h3 className="border-b border-pri-light p-6 text-2xl @[331px]/card:typography-h3">
+        {title}
+      </h3>
+      <p className="typography-body-lg p-6">{description}</p>
+      <ul className="typography-body-md mt-auto flex flex-col gap-2 p-6 pt-0">
+        {bullets.map(bullet => (
+          <li key={bullet} className="flex items-center gap-2">
+            <CheckIcon className="size-4 shrink-0 text-sec-base" aria-hidden />
+            <span>{bullet}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+function Stripes() {
+  // todo: rotate to top right corner on mobile
+  return (
+    <ImageLoaded
+      role="presentation"
+      image={blurBean}
+      // eslint-disable-next-line tailwindcss/no-unnecessary-arbitrary-value
+      className="pointer-events-none absolute inset-0 opacity-0 transition-[translate] duration-[400ms] ease-linear [mask-position:center_calc(100%+65vw)] [mask-size:200%] data-[loaded=true]:opacity-100 max-lg:rotate-[180deg] max-lg:scale-x-[-1] lg:[mask-position:center_500px] lg:[mask-size:150%] xl:translate-y-1/2 xl:[mask-position:center_top] xl:max-3xl:translate-y-[50%]"
+      style={{
+        maskImage: `url(${blurBean.src})`,
+        WebkitMaskImage: `url(${blurBean.src})`,
+        maskRepeat: "no-repeat",
+        WebkitMaskRepeat: "no-repeat",
+      }}
+    >
+      {/* todo: ensure colors in dark mode are correct */}
+      <StripesDecoration
+        evenClassName="bg-[linear-gradient(180deg,hsl(var(--color-pri-light)/0.2)_20%,hsl(var(--color-pri-base))_150%)] dark:bg-[linear-gradient(180deg,hsl(var(--color-pri-base)/.9)_20%,hsl(var(--color-pri-darker))_150%)]"
+        oddClassName="bg-[linear-gradient(180deg,hsl(var(--color-pri-light))_20%,hsl(var(--color-pri-lighter)/.9)_150%)] dark:bg-[linear-gradient(180deg,hsl(var(--color-pri-darker)/.9)_20%,hsl(var(--color-pri-base)/.8)_150%)]"
+      />
+    </ImageLoaded>
+  )
+}

src/components/index-page/proven-solution/index.tsx

@@ -228,9 +228,7 @@ function BackdropBlur() {
   return (
     <>
       <div
-        // note: we can't use the background trick to reduce flickering, because we have many section
-        // background colors and big images, so we'd have to change the --bg var with javascript
-        className="pointer-events-none absolute inset-0 -z-10 h-[200%] backdrop-blur-[12.8px]"
+        className="pointer-events-none absolute inset-0 -z-10 h-[200%] backdrop-blur-[6.4px]"
         style={{
           maskImage: mask,
           WebkitMaskImage: mask,

src/components/navbar/navbar.tsx

@@ -150,7 +150,7 @@ div[id^="headlessui-menu-items"] {
 }
 
 ::selection {
-  @apply bg-primary/50 dark:bg-primary/50;
+  @apply bg-pri-base/25 dark:bg-pri-light/50;
 }
 
 @media (prefers-color-scheme: dark) {

src/globals.css

@@ -35,7 +35,7 @@ export default {
   },
   spec: {
     type: "page",
-    title: <span className="after:font-sans after:content-['_↗']">Spec</span>,
+    title: "Spec",
     href: "https://spec.graphql.org",
     newWindow: true,
   },
@@ -81,10 +81,10 @@ export default {
   conf: {
     type: "page",
     title: (
-      <span className="[a:has(>&)]:[a:has(>&)]:border [a:has(>&)]:border [a:has(>&)]:border-current [a:has(>&)]:text-pri-base dark:[a:has(>&)]:text-pri-light [a:hover:has(>&)]:border-transparent">
+      <Emphasis>
         GraphQLConf
         <span className="max-xl:hidden"> 2025</span>
-      </span>
+      </Emphasis>
     ),
     route: "/conf/2025",
   },
@@ -93,3 +93,11 @@ export default {
     title: "GraphQL.JS Tutorial",
   },
 }
+
+function Emphasis({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="[a:has(>&)]:[a:has(>&)]:border [a:has(>&)]:border [a:has(>&)]:border-current [a:has(>&)]:text-pri-base dark:[a:has(>&)]:text-pri-light [a:hover:has(>&)]:border-transparent">
+      {children}
+    </span>
+  )
+}