Skip to content

Commit f082382

Browse files
bignimbusbignimbus
committed
Add a banner for NY GraphQL Day
1 parent a6b9982 commit f082382

4 files changed

Lines changed: 126 additions & 0 deletions

File tree

‎scripts/render-conference-kit-banners.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ type ColorScheme = "light" | "dark"
2727

2828
const BANNERS: ReadonlyArray<{ slug: string; colorScheme: ColorScheme }> = [
2929
{ slug: "amsterdam", colorScheme: "light" },
30+
{ slug: "nyc", colorScheme: "light" },
3031
// The language banner's inline `getCity` snippet uses shiki's dark token
3132
// colors; next-themes flips html.dark when prefers-color-scheme matches.
3233
{ slug: "language", colorScheme: "dark" },

‎src/app/conf/conference-kit/_components/nyc-banner.tsx‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import { CalendarIcon } from "@/app/conf/_design-system/pixelarticons/calendar-icon"
2+
import { PinIcon } from "@/app/conf/_design-system/pixelarticons/pin-icon"
3+
import { Tag } from "@/app/conf/_design-system/tag"
4+
import fostLogo from "@/app/day/2026/assets/fost-logo.avif"
5+
import nycImage from "./nyc.png"
6+
7+
import { BannerFrame } from "./banner-frame"
8+
import { QRCodeSVG } from "./qr-code"
9+
import { BlobStripes } from "./blob-stripes"
10+
import Image from "next/image"
11+
import { GraphQLWordmarkLogo } from "@/icons"
12+
13+
export function NycBanner() {
14+
return (
15+
<BannerFrame
16+
slug="nyc"
17+
caption="GraphQL Day NYC 2026"
18+
className="flex flex-col gap-7 bg-[#0A0B08] p-9 text-white"
19+
>
20+
<BlobStripes
21+
position="65% 35%"
22+
size="200%"
23+
stripeWidth="14px"
24+
evenClassName="bg-[linear-gradient(180deg,rgba(225,0,152,0.22)_0%,rgba(225,0,152,0.04)_100%)]"
25+
oddClassName="bg-[linear-gradient(180deg,rgba(225,0,152,0.06)_0%,rgba(132,0,89,0.18)_100%)]"
26+
/>
27+
28+
<div className="z-10 flex items-center">
29+
<GraphQLWordmarkLogo className="h-8 !fill-white" />
30+
</div>
31+
32+
<h2 className="z-10 m-0 mt-16 text-[60px] font-medium leading-[1.05] tracking-tight">
33+
GraphQL Day
34+
<br />
35+
NYC
36+
<br />
37+
2026
38+
</h2>
39+
40+
<div className="z-10">
41+
<p
42+
className="typography-body-lg m-0 text-white/80"
43+
style={{ lineHeight: 1.4, textWrap: "pretty" }}
44+
>
45+
Community-organized GraphQL events at conferences worldwide.
46+
</p>
47+
<div className="mt-4 flex items-center gap-1">
48+
<Tag color={"hsl(var(--color-pri-base))"}>talks</Tag>
49+
<Tag color={"hsl(var(--color-pri-dark))"}>demos</Tag>
50+
<Tag color={"hsl(var(--color-neu-500))"}>community</Tag>
51+
</div>
52+
</div>
53+
54+
<div className="flex-1" />
55+
<div
56+
className="z-10 mt-auto grid grid-cols-[44%_1fr] overflow-hidden border border-white/10 bg-white/[0.025]"
57+
style={{ height: 180 }}
58+
>
59+
<div className="relative overflow-hidden bg-pri-darker/15">
60+
<Image
61+
src={nycImage}
62+
alt="New York City skyline"
63+
fill
64+
sizes="250px"
65+
placeholder="empty"
66+
className="object-cover opacity-90"
67+
/>
68+
</div>
69+
<div className="flex flex-col gap-2 border-l border-white/10 p-[18px_18px_16px]">
70+
<div className="flex items-start gap-2.5">
71+
<CalendarIcon className="size-5 translate-y-0.5 text-pri-base" />
72+
<div className="typography-body-md">May 13–14, 2026</div>
73+
</div>
74+
<div className="flex items-start gap-2.5">
75+
<PinIcon className="size-5 translate-y-0.5 text-pri-base" />
76+
<div className="typography-body-md">
77+
New York City,
78+
<br />
79+
New York
80+
</div>
81+
</div>
82+
<div className="flex-1" />
83+
<div className="flex items-center gap-2 border-t border-white/5 pt-3.5">
84+
<span
85+
className="typography-menu translate-y-px text-xs text-white/60"
86+
style={{ letterSpacing: "0.04em" }}
87+
>
88+
hosted at
89+
</span>
90+
<Image
91+
src={fostLogo}
92+
alt="FOST"
93+
width={60}
94+
height={20}
95+
placeholder="empty"
96+
/>
97+
</div>
98+
</div>
99+
</div>
100+
101+
<div className="z-10 flex h-24 items-center gap-5 border border-white/10 bg-white/[0.02] p-3.5">
102+
<div className="min-w-0 flex-1">
103+
<div className="typography-menu text-xs text-white/60">
104+
Visit the event
105+
</div>
106+
<div
107+
className="mt-1 text-[22px] font-medium"
108+
style={{ letterSpacing: "-0.01em" }}
109+
>
110+
graphql.org/day/nyc
111+
</div>
112+
</div>
113+
<div className="flex size-[80px] shrink-0 items-center justify-center border-[1.5px] border-pri-base p-1">
114+
<QRCodeSVG
115+
value="https://graphql.org/day/2026/nyc/"
116+
size={68}
117+
color="#FAFCF4"
118+
/>
119+
</div>
120+
</div>
121+
</BannerFrame>
122+
)
123+
}

‎src/app/conf/conference-kit/_components/nyc.png‎

1.85 MB
Loading

‎src/app/conf/conference-kit/page.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Hero, HeroStripes } from "../2026/components/hero"
55
import { NavbarPlaceholder } from "../2026/components/navbar"
66

77
import { AmsterdamBanner } from "./_components/amsterdam-banner"
8+
import { NycBanner } from "./_components/nyc-banner"
89
import { LanguageBanner } from "./_components/language-banner"
910
import { AiHeroBanner } from "./_components/ai-hero-banner"
1011

@@ -46,6 +47,7 @@ export default function ConferenceKitPage() {
4647

4748
<div className="flex max-w-full gap-4 overflow-scroll p-4">
4849
<AmsterdamBanner />
50+
<NycBanner />
4951
<LanguageBanner />
5052
<AiHeroBanner />
5153
</div>

0 commit comments

Comments
 (0)