Add Powered by the Community card

Author: hasparus

src/components/index-page/index.tsx

@@ -10,6 +10,7 @@ import { WhoIsUsing } from "./who-is-using"
 import { HowItWorks } from "./how-it-works"
 import { ProvenSolution } from "./proven-solution"
 import { FivePillars } from "./five-pillars"
+import { PoweredByCommunity } from "./powered-by-community"
 
 export function IndexPage() {
   return (
@@ -19,6 +20,7 @@ export function IndexPage() {
       <HowItWorks />
       <ProvenSolution />
       <FivePillars />
+      <PoweredByCommunity />
       <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/powered-by-community.tsx

@@ -0,0 +1,46 @@
+import { Anchor } from "@/app/conf/_design-system/anchor"
+
+import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
+
+export function PoweredByCommunity() {
+  return (
+    <section className="gql-section">
+      <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">
+            Powered by the community
+          </h2>
+          <p className="mt-8">
+            GraphQL is an ecosystem shaped by thousands of collaborating
+            developers and companies around the world. From solo contributors to
+            full-time maintainers, the GraphQL community builds libraries, runs
+            meetups, funds innovation and helps move the technology forward.
+          </p>
+        </div>
+        <div>
+          <Anchor
+            href="/community/tools-and-libraries"
+            className="flex items-center justify-between gap-4 whitespace-pre border-b border-pri-light px-6 py-8 hover:bg-white/10 lg:h-1/3 lg:px-8 lg:pr-12 xl:gap-6"
+          >
+            Browse libraries
+            <ArrowDownIcon className="size-10 -rotate-90 text-pri-light" />
+          </Anchor>
+          <Anchor
+            href="/community/events"
+            className="flex items-center justify-between gap-4 whitespace-pre border-b border-pri-light px-6 py-8 hover:bg-white/10 lg:h-1/3 lg:px-8 lg:pr-12 xl:gap-6"
+          >
+            Explore events & meetups
+            <ArrowDownIcon className="size-10 -rotate-90 text-pri-light" />
+          </Anchor>
+          <Anchor
+            href="/community/foundation"
+            className="flex items-center justify-between gap-4 whitespace-pre px-6 py-8 hover:bg-white/10 lg:h-1/3 lg:px-8 lg:pr-12 xl:gap-6"
+          >
+            Learn about GraphQL Foundation
+            <ArrowDownIcon className="size-10 -rotate-90 text-pri-light" />
+          </Anchor>
+        </div>
+      </div>
+    </section>
+  )
+}