Skip to content

Commit cf2baad

Browse files
hasparushasparus
authored
Merge pull request #36 from hasparus/new-landing--quotes-from-the-industry
Add Quotes From Industry section
2 parents af82b64 + eaf8469 commit cf2baad

File tree

3 files changed

+117
-31
lines changed

3 files changed

+117
-31
lines changed

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

Lines changed: 42 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import maskBlur from "./mask.webp"
66

77
export interface TestimonialsProps extends React.HTMLAttributes<HTMLElement> {}
88

9-
interface Testimonial {
9+
export interface Testimonial {
1010
quote: string
1111
author: {
1212
name: string
@@ -60,30 +60,51 @@ export function Testimonials({ className, ...rest }: TestimonialsProps) {
6060
<h2 className="typography-h2 text-center text-neu-800">
6161
How was the previous edition?
6262
</h2>
63-
<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">
64-
{testimonials.map((testimonial, i) => (
65-
<div
66-
key={i}
67-
className="flex shrink-0 snap-start flex-row-reverse items-center gap-6 max-md:flex-col md:px-10"
68-
>
69-
<div>
70-
<p className="typography-body-lg max-w-[calc(100vw-32px)] !leading-[1.1] max-md:text-center md:max-w-[544px]">
71-
{testimonial.quote}
72-
</p>
73-
<AuthorNameAndRole
74-
author={testimonial.author}
75-
className="mt-4 max-md:hidden"
76-
/>
77-
</div>
78-
<TestimonialAuthor author={testimonial.author} />
79-
</div>
80-
))}
81-
</div>
63+
<TestimonialsList testimonials={testimonials} />
8264
</section>
8365
)
8466
}
8567

86-
function TestimonialAuthor({ author }: { author: Testimonial["author"] }) {
68+
export function TestimonialsList({
69+
testimonials,
70+
className,
71+
}: {
72+
testimonials: Testimonial[]
73+
className?: string
74+
}) {
75+
return (
76+
<div
77+
className={clsx(
78+
"flex w-full snap-x snap-mandatory flex-row gap-10 overflow-x-auto px-4 py-6 lg:mt-16 lg:py-16",
79+
className,
80+
)}
81+
>
82+
{testimonials.map((testimonial, i) => (
83+
<div
84+
key={i}
85+
className="flex shrink-0 snap-start flex-row-reverse items-center gap-6 max-md:flex-col md:px-10"
86+
>
87+
<div>
88+
<p className="typography-body-lg max-w-[calc(100vw-32px)] !leading-[1.1] max-md:text-center md:max-w-[544px]">
89+
{testimonial.quote}
90+
</p>
91+
<AuthorNameAndRole
92+
author={testimonial.author}
93+
className="mt-4 max-md:hidden"
94+
/>
95+
</div>
96+
<TestimonialAuthor author={testimonial.author} />
97+
</div>
98+
))}
99+
</div>
100+
)
101+
}
102+
103+
export function TestimonialAuthor({
104+
author,
105+
}: {
106+
author: Testimonial["author"]
107+
}) {
87108
return (
88109
<div className="relative flex shrink-0 flex-col items-center justify-center whitespace-pre md:px-6 lg:h-full lg:px-8">
89110
<div className="relative bg-neu-500 dark:bg-neu-200 dark:opacity-90">

‎src/components/index-page/index.tsx

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { ProvenSolution } from "./proven-solution"
77
import { FivePillars } from "./five-pillars"
88
import { PoweredByCommunity } from "./powered-by-community"
99
import { GraphQLAdvantages } from "./graphql-advantages"
10+
import { QuotesFromTheIndustry } from "./quotes-from-the-industry"
1011

1112
export function IndexPage() {
1213
return (
@@ -18,16 +19,7 @@ export function IndexPage() {
1819
<FivePillars />
1920
<PoweredByCommunity />
2021
<GraphQLAdvantages />
21-
<section className="conf-block container flex max-w-3xl flex-col items-center text-center">
22-
<h2>A query language for your API</h2>
23-
<p>
24-
GraphQL is a query language for APIs and a runtime for fulfilling
25-
those queries with your existing data. GraphQL provides a complete and
26-
understandable description of the data in your API, gives clients the
27-
power to ask for exactly what they need and nothing more, makes it
28-
easier to evolve APIs over time, and enables powerful developer tools.
29-
</p>
30-
</section>
22+
<QuotesFromTheIndustry />
3123
<SingleRequest />
3224
<BringYourOwnCode />
3325
</div>

‎src/components/index-page/quotes-from-the-industry.tsx

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import {
2+
TestimonialsList,
3+
type Testimonial,
4+
} from "@/app/conf/2025/components/testimonials"
5+
import { SectionLabel } from "@/app/conf/_design-system/section-label"
6+
7+
const testimonials: Testimonial[] = [
8+
{
9+
quote:
10+
"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.",
11+
author: {
12+
name: "Vincent Desmares",
13+
role: "Teamstarter, CTO",
14+
avatar:
15+
"https://avatars.sched.co/d/cc/21066875/avatar.jpg.320x320px.jpg?f80",
16+
},
17+
},
18+
{
19+
quote:
20+
"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.",
21+
author: {
22+
name: "Vincent Desmares",
23+
role: "Teamstarter, CTO",
24+
avatar:
25+
"https://avatars.sched.co/d/cc/21066875/avatar.jpg.320x320px.jpg?f80",
26+
},
27+
},
28+
{
29+
quote:
30+
"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.",
31+
author: {
32+
name: "Vincent Desmares",
33+
role: "Teamstarter, CTO",
34+
avatar:
35+
"https://avatars.sched.co/d/cc/21066875/avatar.jpg.320x320px.jpg?f80",
36+
},
37+
},
38+
{
39+
quote:
40+
"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.",
41+
author: {
42+
name: "Vincent Desmares",
43+
role: "Teamstarter, CTO",
44+
avatar:
45+
"https://avatars.sched.co/d/cc/21066875/avatar.jpg.320x320px.jpg?f80",
46+
},
47+
},
48+
{
49+
quote:
50+
"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.",
51+
author: {
52+
name: "Vincent Desmares",
53+
role: "Teamstarter, CTO",
54+
avatar:
55+
"https://avatars.sched.co/d/cc/21066875/avatar.jpg.320x320px.jpg?f80",
56+
},
57+
},
58+
]
59+
60+
export function QuotesFromTheIndustry() {
61+
return (
62+
<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)]">
63+
<div className="gql-section !py-0">
64+
<SectionLabel>Quotes from the industry</SectionLabel>
65+
<h2 className="typography-h2 mt-6">Loved by world-class devs</h2>
66+
</div>
67+
<TestimonialsList
68+
testimonials={testimonials}
69+
className="lg:!mt-0 lg:*:px-16"
70+
/>
71+
</div>
72+
)
73+
}

0 commit comments

Comments
 (0)