Draft Proven Solution section

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/index.tsx

@@ -0,0 +1,17 @@
+import { Button } from "@/app/conf/_design-system/button"
+import { SectionLabel } from "@/app/conf/_design-system/section-label"
+
+export function ProvenSolution() {
+  return (
+    <section className="gql-container gql-section xl:py-20">
+      <SectionLabel className="mb-6">Business perspective</SectionLabel>
+      <h2 className="typography-h2 mb-6 lg:mb-16">
+        A proven solution for startups and enterprises
+      </h2>
+
+      <Button className="mx-auto mt-8 w-fit lg:mt-16" href="/learn">
+        Learn more
+      </Button>
+    </section>
+  )
+}

src/globals.css

@@ -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) {