Skip to content

Commit 6c02ba6

Browse files
hasparushasparus
committed
Restyle the Sponsorship perks section
1 parent d53e958 commit 6c02ba6

File tree

6 files changed

+169
-89
lines changed

6 files changed

+169
-89
lines changed

‎src/app/conf/2025/components/become-a-sponsor/blur-blob.webp

616 KB
Binary file not shown.

‎src/app/conf/2025/components/become-a-sponsor/index.tsx

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
import clsx from "clsx"
2+
3+
import { Button } from "../../../_design-system/button"
4+
5+
import blurBlob from "./blur-blob.webp"
6+
import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
7+
8+
export function BecomeASponsor() {
9+
return (
10+
<section id="sponsors" className="relative">
11+
<Stripes />
12+
<div className="gql-conf-container gql-conf-section xl:py-16 2xl:px-64">
13+
<header className="flex flex-col gap-x-48 gap-y-4 md:flex-row md:items-end md:justify-between">
14+
<div>
15+
<h2 className="typography-h2">Become a Sponsor</h2>
16+
<p className="mt-6 text-pretty typography-body-lg">
17+
Connect with the global GraphQL community and showcase your brand
18+
to industry leaders and decision-makers.
19+
</p>
20+
</div>
21+
<Button
22+
variant="primary"
23+
href="https://events.linuxfoundation.org/sponsor-GraphQLConf-25?utm_source=graphql_conf_2025&utm_medium=website&utm_campaign=sponsor_section"
24+
target="_blank"
25+
rel="noreferrer"
26+
className="shrink-0"
27+
>
28+
Download the Prospectus
29+
</Button>
30+
</header>
31+
<dl className="relative z-10 mt-10 border border-neu-300 md:backdrop-blur-[6.4px] xl:mt-16">
32+
<DefinitionListItem
33+
term="Brand Visibility"
34+
definition="Showcase your brand to thousands of GraphQL enthusiasts and decision-makers."
35+
/>
36+
<DefinitionListItem
37+
term="Lead Generation"
38+
definition="Connect with potential customers and partners in the GraphQL ecosystem."
39+
/>
40+
<DefinitionListItem
41+
term="Thought Leadership"
42+
definition="Position your company as a leader in the GraphQL space."
43+
/>
44+
<DefinitionListItem
45+
term="Talent Acquisition"
46+
definition="Meet and recruit top GraphQL developers and engineers."
47+
/>
48+
<DefinitionListItem
49+
term="Product Feedback"
50+
definition="Gather valuable feedback from the GraphQL community."
51+
/>
52+
<DefinitionListItem
53+
term="Community Impact"
54+
definition="Support and shape the future of GraphQL technology."
55+
/>
56+
</dl>
57+
</div>
58+
</section>
59+
)
60+
}
61+
62+
function DefinitionListItem({
63+
className,
64+
term,
65+
definition,
66+
}: {
67+
className?: string
68+
term: string
69+
definition: string
70+
}) {
71+
return (
72+
<div
73+
className={clsx(
74+
className,
75+
"flex border-b border-neu-300 last:border-b-0 max-sm:flex-col",
76+
)}
77+
>
78+
<dt className="flex min-w-[320px] shrink-0 items-center whitespace-pre border-b border-neu-300 p-4 typography-body-lg max-sm:w-full sm:border-b-0 sm:border-r">
79+
{term}
80+
</dt>
81+
<dd className="flex items-center p-4 typography-body-md">{definition}</dd>
82+
</div>
83+
)
84+
}
85+
86+
function Stripes() {
87+
return (
88+
<div
89+
role="presentation"
90+
// prettier-ignore
91+
// false positive
92+
// eslint-disable-next-line tailwindcss/no-contradicting-classname
93+
className="pointer-events-none absolute inset-0
94+
[--start-1:hsl(var(--color-sec-lighter))]
95+
[--end-1:hsl(hsl(320deg_100%_96%/.8)]
96+
dark:[--start-1:hsl(var(--color-sec-lighter))]
97+
dark:[--end-1:hsl(var(--color-pri-lighter)/.2)]
98+
99+
[--start-2:#FFEAF8]
100+
[--end-2:hsl(var(--color-neu-0))]
101+
dark:[--start-2:rgba(255,204,239,.1)]
102+
dark:[--end-2:hsl(var(--color-pri-lighter)/.4)]
103+
104+
translate-y-12
105+
106+
[mask-size:120%]
107+
3xl:[mask-size:2000px] 2xl:opacity-50
108+
max-md:[mask-size:600%] max-md:opacity-50
109+
"
110+
style={{
111+
maskImage: `url(${blurBlob.src})`,
112+
WebkitMaskImage: `url(${blurBlob.src})`,
113+
maskPosition: "center",
114+
WebkitMaskPosition: "center",
115+
maskRepeat: "no-repeat",
116+
WebkitMaskRepeat: "no-repeat",
117+
}}
118+
>
119+
<StripesDecoration
120+
evenClassName="bg-[linear-gradient(180deg,var(--start-1)_-200%,var(--end-1)_100%)]"
121+
oddClassName="bg-[linear-gradient(180deg,var(--start-2)_0%,var(--end-2)_100%)]"
122+
/>
123+
</div>
124+
)
125+
}

‎src/app/conf/2025/components/marquee-rows/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export function MarqueeRows({
3333
return (
3434
<section
3535
className={clsx(
36-
"relative font-mono text-xl/none md:text-[56px]/none",
36+
"relative font-mono text-xl/none md:text-[56px]/none 3xl:[mask-image:linear-gradient(to_right,transparent,black_5%,black_95%,transparent)]",
3737
variant === "primary" ? "text-pri-base" : "text-neu-900",
3838
className,
3939
)}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const sponsorTiers: Tier[] = [
4343

4444
export function Sponsors({ heading }: SponsorsProps) {
4545
return (
46-
<section className="gql-conf-section mx-auto w-fit max-w-full py-16">
46+
<section className="gql-conf-section mx-auto py-16 2xl:px-64">
4747
<h1 className="typography-h2">{heading}</h1>
4848

4949
<div className="mt-10 md:mt-16">

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

Lines changed: 42 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Metadata } from "next"
2-
import { Sponsor } from "./sponsorship"
2+
import { BecomeASponsor } from "./components/become-a-sponsor"
33
import { Venue } from "./venue"
44
import { FAQ } from "./faq"
55
import { CallForProposals } from "./components/call-for-proposals"
@@ -40,38 +40,47 @@ export default function Page() {
4040
<div className="gql-conf-navbar-strip before:bg-white/40 before:dark:bg-pri-dark/[0.45]">
4141
<GetYourTicket />
4242
</div>
43-
<div className="gql-conf-container gql-conf-navbar-strip text-neu-900 before:bg-white/50 before:dark:bg-blk/30">
44-
<RegisterSection />
45-
<Sponsors heading="Sponsors" />
46-
<Sponsor />
47-
<CallForProposals />
48-
<MarqueeRows
49-
variant="secondary"
50-
items={[
51-
["AMSTERDAM", "SEPTEMBER 2025", "THREE DAYS", "PAKHUIS DE ZWIJGER"],
52-
[
53-
"THREE DAYS",
54-
"PAKHUIS DE ZWIJGER",
55-
"NETHERLANDS",
56-
"PIET HEINKADE 179",
57-
],
58-
[
59-
"NETHERLANDS",
60-
"10 YEARS OF GRAPHQL",
61-
"8-10 SEPTEMBER",
62-
"AMSTERDAM",
63-
],
64-
]}
65-
className="my-8 xl:mb-16 xl:mt-10 2xl:mb-24"
66-
/>
67-
<Venue />
68-
<GraphQLFoundationCard />
69-
<FAQ />
70-
<MarqueeRows
71-
variant="secondary"
72-
items={HERO_MARQUEE_ITEMS}
73-
className="my-8 xl:my-16"
74-
/>
43+
<div className="gql-conf-navbar-strip text-neu-900 before:bg-white/50 before:dark:bg-blk/30">
44+
<div className="gql-conf-container">
45+
<RegisterSection />
46+
<Sponsors heading="Sponsors" />
47+
</div>
48+
<BecomeASponsor />
49+
<div className="gql-conf-container">
50+
<CallForProposals />
51+
<MarqueeRows
52+
variant="secondary"
53+
items={[
54+
[
55+
"AMSTERDAM",
56+
"SEPTEMBER 2025",
57+
"THREE DAYS",
58+
"PAKHUIS DE ZWIJGER",
59+
],
60+
[
61+
"THREE DAYS",
62+
"PAKHUIS DE ZWIJGER",
63+
"NETHERLANDS",
64+
"PIET HEINKADE 179",
65+
],
66+
[
67+
"NETHERLANDS",
68+
"10 YEARS OF GRAPHQL",
69+
"8-10 SEPTEMBER",
70+
"AMSTERDAM",
71+
],
72+
]}
73+
className="my-8 xl:mb-16 xl:mt-10 2xl:mb-24"
74+
/>
75+
<Venue />
76+
<GraphQLFoundationCard />
77+
<FAQ />
78+
<MarqueeRows
79+
variant="secondary"
80+
items={HERO_MARQUEE_ITEMS}
81+
className="my-8 xl:my-16"
82+
/>
83+
</div>
7584
</div>
7685
</main>
7786
)

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

Lines changed: 0 additions & 54 deletions
This file was deleted.

0 commit comments

Comments
 (0)