Add Integration figure, improve padding

Author: hasparus

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

@@ -8,6 +8,7 @@ import { OptimizationFigure } from "./optimization"
 import { ProductivityFigure } from "./productivity"
 import { ConsistencyFigure } from "./consistency"
 import { VersionlessFigure } from "./versionless"
+import { IntegrationFigure } from "./integration"
 
 export function GraphQLAdvantages() {
   return (
@@ -77,7 +78,7 @@ export function GraphQLAdvantages() {
             name="Integration"
             bigText="Bring your own data and code"
             text="GraphQL is storage-agnostic — integrate databases, REST APIs, and third-party services into a single, cohesive data layer. Write GraphQL APIs that leverage your existing data and code with GraphQL engines available in many languages."
-            figure={null}
+            figure={<IntegrationFigure />}
             cta={
               <Button href="/learn" variant="secondary">
                 Learn more about this

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

@@ -0,0 +1,45 @@
+export function IntegrationFigure() {
+  const languages = [
+    "C SHARP",
+    "NODE.JS",
+    "PYTHON",
+    "RUST",
+    "POSTGRES",
+    "JAVASCRIPT",
+  ]
+
+  return (
+    <div
+      className="flex min-h-[300px] w-full flex-col items-center justify-center bg-gradient-to-b from-[hsla(75,57%,97%,0)] to-white px-[14px] py-[30px] dark:to-neu-100/20 xl:px-[46px]"
+      aria-hidden
+    >
+      <div className="flex w-full items-center justify-center bg-pri-lighter/50 px-10 py-6 dark:bg-pri-base/15">
+        <span className="font-mono text-xs font-normal uppercase tracking-wide text-pri-base dark:text-pri-light">
+          GRAPHQL
+        </span>
+      </div>
+
+      <div className="relative mt-5 w-full overflow-hidden [mask-image:linear-gradient(to_right,transparent,white_23%,white_77%,transparent)]">
+        <div
+          className="flex animate-scroll gap-3"
+          style={
+            {
+              "--animation-duration": "30s",
+            } as React.CSSProperties
+          }
+        >
+          {[...languages, ...languages].map((language, index) => (
+            <div
+              key={index}
+              className="flex shrink-0 items-center justify-center bg-sec-lighter px-10 py-6 dark:bg-sec-darker/30"
+            >
+              <span className="font-mono text-xs font-normal uppercase tracking-wide text-sec-dark dark:text-sec-light">
+                {language}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/index-page/powered-by-community.tsx

@@ -4,7 +4,7 @@ import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.sv
 
 export function PoweredByCommunity() {
   return (
-    <section className="gql-section">
+    <section className="gql-section lg:pb-16 xl:pb-24">
       <div className="gql-container typography-body-lg flex bg-pri-darker text-white max-lg:flex-col">
         <div className="border-pri-light p-6 max-lg:border-b lg:border-r lg:p-16">
           <h2 className="typography-h2 text-balance">