wip

Author: hasparus

src/components/index-page/graphql-advantages/index.tsx

@@ -4,6 +4,7 @@ import { ReactNode } from "react"
 
 import { PrecisionFigure } from "./precision"
 import { OptimizationFigure } from "./optimization"
+import { ProductivityFigure } from "./productivity"
 
 export function GraphQLAdvantages() {
   return (
@@ -26,7 +27,7 @@ export function GraphQLAdvantages() {
             name="Optimization"
             bigText="Retrieve multiple resources in one request"
             text="GraphQL seamlessly follows relationships between data, eliminating multiple API calls. While typical REST APIs require loading from multiple URLs, GraphQL APIs get all the data your app needs in a single request. Ideal for complex queries and optimizing network performance."
-            figure={null}
+            figure={<OptimizationFigure />}
             cta={
               <Button href="/learn" variant="secondary">
                 Read the docs
@@ -37,7 +38,7 @@ export function GraphQLAdvantages() {
             name="Productivity"
             bigText="Move faster with powerful, community-built tools"
             text="Know exactly what you can request without leaving editor. Highlight potential issues before sending a query and take advantage of improved code intelligence. GraphQL makes it easy to build powerful tools. And many of them, like GraphiQL, are open source and built by the GraphQL community."
-            figure={null}
+            figure={<ProductivityFigure />}
             cta={
               <Button href="/community/tools-and-libraries" variant="secondary">
                 Explore GraphQL tools
@@ -59,7 +60,7 @@ export function GraphQLAdvantages() {
             name="Versionless"
             bigText="Evolve without versions"
             text="Add new fields and types without impacting existing queries. Deprecate outdated fields while keeping APIs clean and future-proof. By using a single evolving version, GraphQL APIs give apps continuous access to new features and encourage more maintainable server code."
-            figure={<OptimizationFigure />}
+            figure={null}
             cta={
               <Button
                 href="/learn/schema-design/#versioning"

src/components/index-page/graphql-advantages/optimization.svg

@@ -3,7 +3,7 @@ import OptimizationSvg from "./optimization.svg?svgr"
 export function OptimizationFigure() {
   return (
     <div
-      className="flex w-full bg-gradient-to-b from-transparent to-sec-lighter px-[14px] py-[30px] *:w-1/2 dark:to-sec-darker/25 xl:px-[46px] [&_pre]:!h-48"
+      className="flex w-full bg-gradient-to-b from-[hsla(75,57%,97%,0)] to-white px-[14px] py-[30px] dark:to-neu-100/20 xl:px-[46px] [&_pre]:!h-48"
       aria-hidden
     >
       <OptimizationSvg />

src/components/index-page/graphql-advantages/optimization.tsx

@@ -0,0 +1,31 @@
+const VIDEOS_DIR =
+  "https://github.com/graphql/graphql.github.io/raw/refs/heads/source/public/img"
+
+export function ProductivityFigure() {
+  return (
+    <div className="flex w-full items-center bg-gradient-to-b from-pri-lighter/[.05] to-pri-lighter/20 px-[14px] py-[30px] dark:from-sec-darker/[.01] dark:to-pri-light/5">
+      <div className="overflow-hidden rounded-lg shadow-[0px_0px_20px_0px_rgba(153,0,105,0.20)] dark:shadow-[0px_0px_20px_0px_hsl(218deg,60.3%,17.5%,.2)] dark:saturate-[.75]">
+        <video
+          disablePictureInPicture
+          autoPlay
+          muted
+          loop
+          playsInline
+          className="hidden dark:block"
+        >
+          <source src={`${VIDEOS_DIR}/graphiql-dark.mp4`} type="video/mp4" />
+        </video>
+        <video
+          disablePictureInPicture
+          autoPlay
+          muted
+          loop
+          playsInline
+          className="block dark:hidden"
+        >
+          <source src={`${VIDEOS_DIR}/graphiql-light.mp4`} type="video/mp4" />
+        </video>
+      </div>
+    </div>
+  )
+}

src/components/index-page/graphql-advantages/productivity.tsx

@@ -2,7 +2,6 @@ import { Hero } from "./hero"
 import { TrustedBy } from "./trusted-by"
 import { SingleRequest } from "./single-request"
 import { TypeSystem } from "./type-system"
-import { PowerFulTools } from "./powerful-tools"
 import { WithoutVersion } from "./without-version"
 import { BringYourOwnCode } from "./bring-your-own-code"
 import { WhoIsUsing } from "./who-is-using"
@@ -34,7 +33,6 @@ export function IndexPage() {
       </section>
       <SingleRequest />
       <TypeSystem />
-      <PowerFulTools />
       <WithoutVersion />
       <BringYourOwnCode />
       <WhoIsUsing />

src/components/index-page/index.tsx

@@ -21,35 +21,6 @@ export function PowerFulTools() {
           by leveraging your API’s type system.
         </p>
       </div>
-      <div className="overflow-hidden rounded-t-xl shadow-[0_0_0_1px_rgba(0,0,0,.2),0_16px_64px_rgba(0,0,0,.6)]">
-        <video
-          disablePictureInPicture
-          autoPlay
-          muted
-          loop
-          playsInline
-          className="hidden dark:block"
-        >
-          {/* todo: sync with main branch in graphql.org repo */}
-          <source
-            src="https://github.com/dimaMachina/graphql.github.io/raw/nextra/static/img/graphiql-dark.mp4"
-            type="video/mp4"
-          />
-        </video>
-        <video
-          disablePictureInPicture
-          autoPlay
-          muted
-          loop
-          playsInline
-          className="block dark:hidden"
-        >
-          <source
-            src="https://github.com/dimaMachina/graphql.github.io/raw/nextra/static/img/graphiql-light.mp4"
-            type="video/mp4"
-          />
-        </video>
-      </div>
     </section>
   )
 }

src/components/index-page/powerful-tools.tsx

@@ -23,6 +23,6 @@
       }
     ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/_design-system/syntax/index.js"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }