Add Join the Community section

Author: hasparus

src/app/conf/2025/components/testimonials/index.tsx

@@ -113,9 +113,9 @@ export function TestimonialAuthor({
           alt={author.name}
           width={128}
           height={128}
-          className="size-16 saturate-0 xl:size-32"
+          className="size-16 saturate-[.1] xl:size-32"
         />
-        <div className="absolute inset-0 z-[1] bg-pri-darker mix-blend-plus-lighter" />
+        <div className="absolute inset-0 z-[1] bg-pri-darker opacity-80 mix-blend-plus-lighter" />
         <Stripes />
       </div>
       <AuthorNameAndRole author={author} className="contents md:hidden" />

src/components/index-page/index.tsx

@@ -1,13 +1,13 @@
 import { Hero } from "./hero"
 import { TrustedBy } from "./trusted-by"
-import { SingleRequest } from "./single-request"
 import { BringYourOwnCode } from "./bring-your-own-code"
 import { HowItWorks } from "./how-it-works"
 import { ProvenSolution } from "./proven-solution"
 import { FivePillars } from "./five-pillars"
 import { PoweredByCommunity } from "./powered-by-community"
 import { GraphQLAdvantages } from "./graphql-advantages"
 import { QuotesFromTheIndustry } from "./quotes-from-the-industry"
+import { JoinTheCommunity } from "./join-the-community"
 
 export function IndexPage() {
   return (
@@ -20,7 +20,7 @@ export function IndexPage() {
       <PoweredByCommunity />
       <GraphQLAdvantages />
       <QuotesFromTheIndustry />
-      <SingleRequest />
+      <JoinTheCommunity />
       <BringYourOwnCode />
     </div>
   )

src/components/index-page/join-the-community.tsx

@@ -0,0 +1,37 @@
+import { Anchor } from "@/app/conf/_design-system/anchor"
+
+import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
+import { DiscordIcon } from "@/icons"
+
+export function JoinTheCommunity() {
+  return (
+    <section className="gql-section lg:pb-16 xl:pb-24">
+      <div className="gql-container typography-body-lg flex bg-pri-dark text-white dark:bg-pri-darker 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">Join the community</h2>
+          <p className="mt-8">
+            GraphQL is community-driven, backed by thousands of developers and
+            companies worldwide. Become part of a network shaping the future of
+            API development.
+          </p>
+        </div>
+        <div className="flex flex-col *:flex-1">
+          <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"
+          >
+            Discord
+            <DiscordIcon className="size-8 fill-white" />
+          </Anchor>
+          <Anchor
+            href="/community/events"
+            className="flex items-center justify-between gap-4 whitespace-pre 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 community resources
+            <ArrowDownIcon className="size-10 -rotate-90 text-pri-light" />
+          </Anchor>
+        </div>
+      </div>
+    </section>
+  )
+}