update landing page copy to reflect api producers/consumers messaging

src/components/index-page/bring-your-own-code.tsx

@@ -17,16 +17,18 @@ export function BringYourOwnCode() {
           </p>
         </div>
       </section>
-      <InfiniteMovingCards
-        direction="right"
-        speed="normal"
-        className="mx-auto [&_pre]:h-[calc(100%-48px)] [&_div.nextra-code]:h-full"
-      >
-        <Code1 />
-        <Code2 />
-        <Code3 />
-        <Code4 />
-      </InfiniteMovingCards>
+      <div className="container overflow-scroll scrollbar-hide">
+        <InfiniteMovingCards
+          direction="right"
+          speed="normal"
+          className="mx-auto [&_pre]:h-[calc(100%-48px)] [&_div.nextra-code]:h-full"
+        >
+          <Code1 />
+          <Code2 />
+          <Code3 />
+          <Code4 />
+        </InfiniteMovingCards>
+      </div>
     </>
   )
 }

src/components/index-page/hero.tsx

@@ -2,43 +2,42 @@ import Link from "next/link"
 import { CodeA, CodeB, CodeC } from "../code-blocks"
 import { GraphQLLogo } from "@/icons"
 import { clsx } from "clsx"
+import NextImage from "next-image-export-optimizer"
+import ArchImg from "public/img/diagrams/graphql-client-server.png"
+import { arch } from "os"
 
 export function Hero() {
   return (
-    <div className="[background:url('/img/graph-wash.png'),#171e26_repeat_center_center] xl:py-20">
-      <div className="container conf-block">
+    <div className="xl:py-12">
+      <div className="relative conf-block">
         <section
           className={clsx(
-            "flex-wrap gap-14 justify-center items-center flex max-sm:flex-col",
-            "[&_h3]:text-white [&_h3]:text-2xl 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 */,
+            "container flex gap-14 max-sm:flex-col",
           )}
         >
-          <div className="max-md:grow max-xl:w-full flex flex-col items-center gap-2">
+          <div className="max-md:grow max-xl:w-full flex flex-col items-center left-1">
             <GraphQLLogo className="w-24" />
             <h1 className="text-primary text-3xl">GraphQL</h1>
           </div>
 
-          <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 className="left-1">
+            <h2>A query language for your API</h2>
+            <p className="left-1">
+              GraphQL is a query language for APIs and a runtime for fulfilling
+              those queries with your existing data. GraphQL provides a complete and
+              understandable description of the data in your API, gives clients the
+              power to ask for exactly what they need and nothing more, makes it
+              easier to evolve APIs over time, and enables powerful developer tools.
+            </p>
           </div>
+          <NextImage
+            src={ArchImg}
+            alt="GraphQL Client Server Architecture"
+            className="max-w-full"
+          />
         </section>
-
         <Link
-          className="text-white border-white index-button block w-fit mx-auto mt-10"
+          className="text-black border-black index-button block w-fit mx-auto mt-10"
           href="/learn"
         >
           Get Started

src/components/index-page/index.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link"
+import NextImage from "next-image-export-optimizer"
 import { Hero } from "./hero"
 import { PredictableResults } from "./predictable-results"
 import { SingleRequest } from "./single-request"
@@ -6,27 +8,42 @@ import { PowerFulTools } from "./powerful-tools"
 import { WithoutVersion } from "./without-version"
 import { BringYourOwnCode } from "./bring-your-own-code"
 import { WhoIsUsing } from "./who-is-using"
+import SupergraphImg from "public/img/diagrams/supergraph.png"
 
 export function IndexPage() {
   return (
     <div className="index">
       <Hero />
-      <section className="text-center flex flex-col container items-center conf-block max-w-3xl">
-        <h2>A query language for your API</h2>
-        <p>
-          GraphQL is a query language for APIs and a runtime for fulfilling
-          those queries with your existing data. GraphQL provides a complete and
-          understandable description of the data in your API, gives clients the
-          power to ask for exactly what they need and nothing more, makes it
-          easier to evolve APIs over time, and enables powerful developer tools.
+      <section className="flex flex-col container">
+        <h2>GraphQL for API consumers</h2>
+        <p>GraphQL transforms the way API consumers access and interact with data, efficiently fetch the right slice of data. Whether you are building consumer facing applications or internal apps, GraphQL provides a seamless and efficient way to consume APIs. 
         </p>
+        <PredictableResults />
+        <SingleRequest />
+        <PowerFulTools />
+      </section>
+      <section className="flex flex-col container">
+        <h2>GraphQL for API producers</h2>
+        <p>GraphQL provides API producers with a powerful framework for designing flexible and maintainable APIs. By defining a single, unified schema, producers can easily integrate data from multiple sources, simplifying API management. GraphQL provides a single endpoint with elevated semantic context on the data being served.
+        </p>
+        <TypeSystem />
+        <BringYourOwnCode />
+        <WithoutVersion />
+      </section>
+      <section className="flex flex-col container conf-block lg:flex-row">
+        <div>
+          <h2>GraphQL is the lingua franca for API producers</h2>
+          <p>GraphQL provides a unified semantic layer that consolidates multiple discrete resources. GraphQL enables federation across multiple services and data providing a "Supergraph" experience.
+          </p>
+        </div>
+        <div>
+        <NextImage
+          src={SupergraphImg}
+          alt="GraphQL Supergraph"
+          className=""
+        />
+        </div>
       </section>
-      <PredictableResults />
-      <SingleRequest />
-      <TypeSystem />
-      <PowerFulTools />
-      <WithoutVersion />
-      <BringYourOwnCode />
       <WhoIsUsing />
     </div>
   )