From 6b97b97823dadab6b66a4e55f54bfc22f4b7a636 Mon Sep 17 00:00:00 2001
From: Kamil Kisiela <kamil.kisiela@gmail.com>
Date: Tue, 26 Nov 2024 10:00:26 +0100
Subject: [PATCH] Dedicated section with link to /federation (#6038)

---
 .../web/docs/src/components/landing-page.tsx  | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/packages/web/docs/src/components/landing-page.tsx b/packages/web/docs/src/components/landing-page.tsx
index cc4288e91..06dc9062c 100644
--- a/packages/web/docs/src/components/landing-page.tsx
+++ b/packages/web/docs/src/components/landing-page.tsx
@@ -85,6 +85,7 @@ export function IndexPage(): ReactElement {
         <StatsItem label="Collected operations" value={350} suffix="B" />
       </StatsList>
       <UltimatePerformanceCards />
+      <LearnGraphQLFederationSection className="mx-4 md:mx-6" />
       <CompanyTestimonialsSection className="mx-4 mt-6 md:mx-6" />
       <GetStartedTodaySection className="mx-4 mt-6 md:mx-6" />
       <EnterpriseFocusedCards className="mx-4 my-6 md:mx-6" />
@@ -204,6 +205,29 @@ function UltimatePerformanceCards() {
   );
 }
 
+function LearnGraphQLFederationSection(props: { className?: string }) {
+  return (
+    <section className={cn('bg-green-1000 rounded-3xl p-24 text-center', props.className)}>
+      <Heading as="h2" size="md" className="flex items-center justify-center gap-4 text-white">
+        What Is GraphQL Federation?
+      </Heading>
+
+      <p className="mt-8 font-medium text-white/80">
+        Understand what federated GraphQL API is, how it works, and why it may be the right choice
+        for your API.
+      </p>
+      <CallToAction
+        variant="secondary"
+        href="/federation"
+        className="mx-auto mt-8"
+        title="Introduction to federated GraphQL APIs"
+      >
+        Introduction to Federation
+      </CallToAction>
+    </section>
+  );
+}
+
 function PerformanceListItemIcon() {
   return (
     <svg width="24" height="24" fill="currentColor">