Skip to content

Commit b4071cc

Browse files
hasparushasparus
committed
Add Sponsors section
1 parent 891acb7 commit b4071cc

File tree

2 files changed

+191
-2
lines changed

2 files changed

+191
-2
lines changed

‎src/app/conf/2025/components/sponsors.tsx

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
import Stellate from "public/img/conf/Sponsors/Stellate.svg"
2+
import Postman from "public/img/conf/Sponsors/Postman.svg"
3+
import Solo from "public/img/conf/Sponsors/Solo.svg"
4+
import Hasura from "public/img/conf/Sponsors/Hasura.svg"
5+
import TheGraph from "public/img/conf/Sponsors/TheGraph.svg"
6+
import TheGuild from "public/img/conf/Sponsors/TheGuild.svg"
7+
import Hygraph from "public/img/conf/Sponsors/Hygraph.svg"
8+
import StepZen from "public/img/conf/Sponsors/StepZen.svg"
9+
import Inigo from "public/img/conf/Sponsors/Inigo.svg"
10+
import Neo4j from "public/img/conf/Sponsors/Neo4j.svg"
11+
import WunderGraph from "public/img/conf/Sponsors/WunderGraph.svg"
12+
import Graphabase from "public/img/conf/Sponsors/Graphabase.svg"
13+
import GraphQLWeekly from "public/img/conf/Partners/GraphQLWeekly.svg"
14+
import GraphQLWTF from "public/img/conf/Partners/GraphQLwtf.svg"
15+
import EscapeTechnologies from "public/img/conf/Partners/EscapeTechnologies.svg"
16+
import AmsterdamGraphQL from "public/img/conf/Partners/AmsterdamGraphQL.svg"
17+
import BangkokGraphQL from "public/img/conf/Partners/BangkokGraphQL.svg"
18+
import TypeGraphQL from "public/img/conf/Partners/TypeGraphQL.svg"
19+
import { clsx } from "clsx"
20+
import NextImage from "next-image-export-optimizer"
21+
22+
interface Image {
23+
icon: string
24+
name: string
25+
link: string
26+
}
27+
28+
const sponsorDiamond: Image[] = [
29+
{ icon: Hasura, name: "Hasura", link: "https://hasura.io" },
30+
{ icon: Postman, name: "Postman", link: "https://postman.com" },
31+
{ icon: TheGuild, name: "The Guild", link: "https://the-guild.dev" },
32+
]
33+
34+
const sponsorPlatinum: Image[] = [
35+
{ icon: Hygraph, name: "Hygraph", link: "https://hygraph.com" },
36+
{ icon: Solo, name: "Solo.io", link: "https://solo.io" },
37+
]
38+
39+
const sponsorGold: Image[] = [
40+
{ icon: StepZen, name: "StepZen", link: "https://stepzen.com" },
41+
{ icon: Inigo, name: "Inigo", link: "https://inigo.io" },
42+
{ icon: TheGraph, name: "The Graph", link: "https://thegraph.com" },
43+
]
44+
45+
const sponsorSilver: Image[] = [
46+
{ icon: Graphabase, name: "Graphabase", link: "https://graphabase.com" },
47+
{ icon: Neo4j, name: "Neo4j", link: "https://neo4j.com" },
48+
{ icon: Stellate, name: "Stellate", link: "https://stellate.co" },
49+
{ icon: WunderGraph, name: "WunderGraph", link: "https://wundergraph.com" },
50+
]
51+
52+
const workshopDaySponsors: Image[] = [
53+
{ icon: TheGuild, name: "The Guild", link: "https://the-guild.dev" },
54+
]
55+
56+
const mediaPartners: Image[] = [
57+
{ icon: GraphQLWTF, name: "GraphQLWTF", link: "https://graphql.wtf" },
58+
{
59+
icon: GraphQLWeekly,
60+
name: "GraphQLWeekly",
61+
link: "https://graphqlweekly.com",
62+
},
63+
]
64+
65+
const communityPartners: Image[] = [
66+
{
67+
icon: AmsterdamGraphQL,
68+
name: "Amsterdam GraphQL",
69+
link: "https://meetup.com/amsterdam-graphql-meetup",
70+
},
71+
{
72+
icon: BangkokGraphQL,
73+
name: "Bangkok GraphQL",
74+
link: "https://meetup.com/graphql-bangkok",
75+
},
76+
{
77+
icon: EscapeTechnologies,
78+
name: "EscapeTechnologies",
79+
link: "https://escape.tech",
80+
},
81+
{ icon: TypeGraphQL, name: "TypeGraphQL", link: "https://typegraphql.com" },
82+
]
83+
84+
function List({
85+
items,
86+
className,
87+
linkClassName,
88+
}: {
89+
className?: string
90+
items: Image[]
91+
linkClassName?: string
92+
}) {
93+
return (
94+
<div className={clsx("grid w-full gap-7", className)}>
95+
{items.map(({ link, icon, name }, i) => (
96+
<a
97+
key={i}
98+
className={clsx(
99+
"relative shrink-0 rounded-md bg-[#251f30]",
100+
"flex justify-center",
101+
"border border-solid border-transparent hover:border-primary focus:border-primary",
102+
"transition-colors",
103+
"shadow-md outline-none hover:shadow-primary/20 focus:shadow-primary/20",
104+
linkClassName,
105+
)}
106+
href={link}
107+
target="_blank"
108+
rel="noreferrer"
109+
title={name}
110+
>
111+
<NextImage
112+
alt={`${name} logo`}
113+
src={icon}
114+
className="h-auto shrink lg:max-w-60"
115+
/>
116+
<span className="absolute right-5 top-5 font-sans leading-none text-white lg:text-2xl">
117+
↗
118+
</span>
119+
</a>
120+
))}
121+
</div>
122+
)
123+
}
124+
125+
const classes = {
126+
heading:
127+
"text-center text-primary text-2xl lg:text-3xl font-bold mb-10 mt-20",
128+
title: "md:text-center text-white conf-heading",
129+
}
130+
131+
export interface SponsorsProps {
132+
heading?: string
133+
}
134+
135+
export function Sponsors({ heading }: SponsorsProps) {
136+
return (
137+
<section className="bg-conf-black">
138+
<h2 className="typography-h2">{heading}</h2>
139+
<div className="conf-block container">
140+
<h1 className={classes.title}>Sponsors</h1>
141+
<h3 className={classes.heading}>Diamond</h3>
142+
<List
143+
items={sponsorDiamond}
144+
className="grid-cols-1"
145+
linkClassName="p-8 lg:p-16 h-28 lg:h-[220px]"
146+
/>
147+
<h3 className={classes.heading}>Platinum</h3>
148+
<List
149+
items={sponsorPlatinum}
150+
className="grid-cols-2"
151+
linkClassName="p-8 lg:py-14 h-28 lg:h-[210px]"
152+
/>
153+
<h3 className={classes.heading}>Gold</h3>
154+
<List
155+
items={sponsorGold}
156+
className="grid-cols-2 xl:grid-cols-3"
157+
linkClassName="p-8 lg:py-14 h-28 lg:h-[170px]"
158+
/>
159+
<h3 className={classes.heading}>Silver</h3>
160+
<List
161+
items={sponsorSilver}
162+
className="grid-cols-2 xl:grid-cols-4"
163+
linkClassName="p-6 lg:p-10 h-28 lg:h-[155px]"
164+
/>
165+
<h3 className={classes.heading}>Workshop Day Sponsor</h3>
166+
<List
167+
items={workshopDaySponsors}
168+
className="mx-auto grid-cols-2 lg:w-1/2 lg:grid-cols-1"
169+
linkClassName="p-8 lg:p-10 h-28 lg:h-[155px]"
170+
/>
171+
</div>
172+
<div className="container py-24">
173+
<h1 className={classes.title}>Partners</h1>
174+
<h3 className={classes.heading}>Media Partners</h3>
175+
<List
176+
items={mediaPartners}
177+
className="mx-auto grid-cols-2 xl:w-1/2"
178+
linkClassName="p-9 lg:p-12 h-28 lg:h-[155px]"
179+
/>
180+
<h3 className={classes.heading}>Community Partners</h3>
181+
<List
182+
items={communityPartners}
183+
className="grid-cols-2 xl:grid-cols-4"
184+
linkClassName="p-6 lg:p-10 h-28 lg:h-[155px]"
185+
/>
186+
</div>
187+
</section>
188+
)
189+
}

‎src/app/conf/2025/page.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ import { Sponsor } from "./sponsorship"
55
import { Venue } from "./venue"
66
import { FAQ } from "./faq"
77
import { Register } from "./register"
8-
import { Sponsors } from "./sponsors"
98
import { Speakers } from "./speakers"
109
import { RegisterToday } from "./components/register-today"
1110
import { Hero } from "./components/hero"
1211
import WhatToExpectSection from "./components/what-to-expect"
1312
import TopMindsSection from "./components/top-minds"
1413
import { GetYourTicket } from "./components/get-your-ticket"
1514
import { RegisterSection } from "./components/register-section"
15+
import { Sponsors } from "./components/sponsors"
1616

1717
export const metadata: Metadata = {
1818
title: "GraphQLConf 2025 — Sept 08-10",
@@ -30,9 +30,9 @@ export default function Page() {
3030
<GetYourTicket />
3131
<div className="gql-conf-container text-neu-900">
3232
<RegisterSection />
33+
<Sponsors heading="Thanks to our 2024 sponsors!" />
3334
</div>
3435
<div className="container my-20 flex flex-col gap-20 md:my-32 md:gap-32 [.light_&_.text-white]:text-neu-900 [.light_&_[alt='Grafbase_logo']]:invert">
35-
<Sponsors />
3636
<Sponsor />
3737
<Speakers />
3838
<Register />

0 commit comments

Comments
 (0)