From eaf84693386b0c6c3cd65bd36ffb210101916217 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 25 Jul 2025 16:03:31 +0200
Subject: [PATCH] Add Quotes From Industry section

---
 .../2025/components/testimonials/index.tsx    | 63 ++++++++++------
 src/components/index-page/index.tsx           | 12 +--
 .../index-page/quotes-from-the-industry.tsx   | 73 +++++++++++++++++++
 3 files changed, 117 insertions(+), 31 deletions(-)
 create mode 100644 src/components/index-page/quotes-from-the-industry.tsx

diff --git a/src/app/conf/2025/components/testimonials/index.tsx b/src/app/conf/2025/components/testimonials/index.tsx
index 42a7aaa92c..1c2bf019e0 100644
--- a/src/app/conf/2025/components/testimonials/index.tsx
+++ b/src/app/conf/2025/components/testimonials/index.tsx
@@ -6,7 +6,7 @@ import maskBlur from "./mask.webp"
 
 export interface TestimonialsProps extends React.HTMLAttributes<HTMLElement> {}
 
-interface Testimonial {
+export interface Testimonial {
   quote: string
   author: {
     name: string
@@ -60,30 +60,51 @@ export function Testimonials({ className, ...rest }: TestimonialsProps) {
       <h2 className="typography-h2 text-center text-neu-800">
         How was the previous edition?
       </h2>
-      <div className="flex w-full snap-x snap-mandatory flex-row gap-10 overflow-x-auto px-4 py-6 lg:mt-16 lg:py-16">
-        {testimonials.map((testimonial, i) => (
-          <div
-            key={i}
-            className="flex shrink-0 snap-start flex-row-reverse items-center gap-6 max-md:flex-col md:px-10"
-          >
-            <div>
-              <p className="typography-body-lg max-w-[calc(100vw-32px)] !leading-[1.1] max-md:text-center md:max-w-[544px]">
-                {testimonial.quote}
-              </p>
-              <AuthorNameAndRole
-                author={testimonial.author}
-                className="mt-4 max-md:hidden"
-              />
-            </div>
-            <TestimonialAuthor author={testimonial.author} />
-          </div>
-        ))}
-      </div>
+      <TestimonialsList testimonials={testimonials} />
     </section>
   )
 }
 
-function TestimonialAuthor({ author }: { author: Testimonial["author"] }) {
+export function TestimonialsList({
+  testimonials,
+  className,
+}: {
+  testimonials: Testimonial[]
+  className?: string
+}) {
+  return (
+    <div
+      className={clsx(
+        "flex w-full snap-x snap-mandatory flex-row gap-10 overflow-x-auto px-4 py-6 lg:mt-16 lg:py-16",
+        className,
+      )}
+    >
+      {testimonials.map((testimonial, i) => (
+        <div
+          key={i}
+          className="flex shrink-0 snap-start flex-row-reverse items-center gap-6 max-md:flex-col md:px-10"
+        >
+          <div>
+            <p className="typography-body-lg max-w-[calc(100vw-32px)] !leading-[1.1] max-md:text-center md:max-w-[544px]">
+              {testimonial.quote}
+            </p>
+            <AuthorNameAndRole
+              author={testimonial.author}
+              className="mt-4 max-md:hidden"
+            />
+          </div>
+          <TestimonialAuthor author={testimonial.author} />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function TestimonialAuthor({
+  author,
+}: {
+  author: Testimonial["author"]
+}) {
   return (
     <div className="relative flex shrink-0 flex-col items-center justify-center whitespace-pre md:px-6 lg:h-full lg:px-8">
       <div className="relative bg-neu-500 dark:bg-neu-200 dark:opacity-90">
diff --git a/src/components/index-page/index.tsx b/src/components/index-page/index.tsx
index 26109e0e9b..8439a19373 100644
--- a/src/components/index-page/index.tsx
+++ b/src/components/index-page/index.tsx
@@ -7,6 +7,7 @@ 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"
 
 export function IndexPage() {
   return (
@@ -18,16 +19,7 @@ export function IndexPage() {
       <FivePillars />
       <PoweredByCommunity />
       <GraphQLAdvantages />
-      <section className="conf-block container flex max-w-3xl flex-col items-center text-center">
-        <h2>A query language for your API</h2>
-        <p>
-          GraphQL is a query language for APIs and a runtime for fulfilling
-          those queries with your existing data. GraphQL provides a complete and
-          understandable description of the data in your API, gives clients the
-          power to ask for exactly what they need and nothing more, makes it
-          easier to evolve APIs over time, and enables powerful developer tools.
-        </p>
-      </section>
+      <QuotesFromTheIndustry />
       <SingleRequest />
       <BringYourOwnCode />
     </div>
diff --git a/src/components/index-page/quotes-from-the-industry.tsx b/src/components/index-page/quotes-from-the-industry.tsx
new file mode 100644
index 0000000000..e336be9b52
--- /dev/null
+++ b/src/components/index-page/quotes-from-the-industry.tsx
@@ -0,0 +1,73 @@
+import {
+  TestimonialsList,
+  type Testimonial,
+} from "@/app/conf/2025/components/testimonials"
+import { SectionLabel } from "@/app/conf/_design-system/section-label"
+
+const testimonials: Testimonial[] = [
+  {
+    quote:
+      "GraphQL is evolving to new use cases every day and it's really a competitive advantage to experience them first hand with everyone that matters.",
+    author: {
+      name: "Vincent Desmares",
+      role: "Teamstarter, CTO",
+      avatar:
+        "https://avatars.sched.co/d/cc/21066875/avatar.jpg.320x320px.jpg?f80",
+    },
+  },
+  {
+    quote:
+      "GraphQL is evolving to new use cases every day and it's really a competitive advantage to experience them first hand with everyone that matters.",
+    author: {
+      name: "Vincent Desmares",
+      role: "Teamstarter, CTO",
+      avatar:
+        "https://avatars.sched.co/d/cc/21066875/avatar.jpg.320x320px.jpg?f80",
+    },
+  },
+  {
+    quote:
+      "GraphQL is evolving to new use cases every day and it's really a competitive advantage to experience them first hand with everyone that matters.",
+    author: {
+      name: "Vincent Desmares",
+      role: "Teamstarter, CTO",
+      avatar:
+        "https://avatars.sched.co/d/cc/21066875/avatar.jpg.320x320px.jpg?f80",
+    },
+  },
+  {
+    quote:
+      "GraphQL is evolving to new use cases every day and it's really a competitive advantage to experience them first hand with everyone that matters.",
+    author: {
+      name: "Vincent Desmares",
+      role: "Teamstarter, CTO",
+      avatar:
+        "https://avatars.sched.co/d/cc/21066875/avatar.jpg.320x320px.jpg?f80",
+    },
+  },
+  {
+    quote:
+      "GraphQL is evolving to new use cases every day and it's really a competitive advantage to experience them first hand with everyone that matters.",
+    author: {
+      name: "Vincent Desmares",
+      role: "Teamstarter, CTO",
+      avatar:
+        "https://avatars.sched.co/d/cc/21066875/avatar.jpg.320x320px.jpg?f80",
+    },
+  },
+]
+
+export function QuotesFromTheIndustry() {
+  return (
+    <div className="gql-container py-8 max-md:px-4 md:pb-16 md:pt-24 md:[mask-image:linear-gradient(to_right,transparent,black_5%,black_95%,transparent)]">
+      <div className="gql-section !py-0">
+        <SectionLabel>Quotes from the industry</SectionLabel>
+        <h2 className="typography-h2 mt-6">Loved by world-class devs</h2>
+      </div>
+      <TestimonialsList
+        testimonials={testimonials}
+        className="lg:!mt-0 lg:*:px-16"
+      />
+    </div>
+  )
+}