Skip to content

Commit ef26ba2

Browse files
hasparushasparus
committed
Add more sections to the FOST page
1 parent d67e15a commit ef26ba2

File tree

1 file changed

+210
-2
lines changed

1 file changed

+210
-2
lines changed

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

Lines changed: 210 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@ import { Metadata } from "next"
22
import Image from "next-image-export-optimizer"
33

44
import { Button } from "@/app/conf/_design-system/button"
5+
import { Accordion } from "@/app/conf/_design-system/accordion"
56

67
import { Hero, HeroStripes } from "../../components/hero"
78
import { NavbarPlaceholder } from "../../components/navbar"
89
import { CalendarIcon } from "../../../_design-system/pixelarticons/calendar-icon"
910
import { PinIcon } from "../../../_design-system/pixelarticons/pin-icon"
11+
import { CtaCardSection } from "../../components/cta-card-section"
1012

1113
import heroPhoto from "./hero-photo.webp"
1214

@@ -43,7 +45,7 @@ export default function ResourcesPage() {
4345
src={heroPhoto}
4446
width={1920}
4547
height={560}
46-
alt="a black and white photo of CNIT in La Defense, Paris"
48+
alt="five speakers at GraphQLConf 2024"
4749
className="mx-auto h-[560px] w-[1920px] max-w-full object-cover"
4850
/>
4951
</div>
@@ -63,7 +65,27 @@ export default function ResourcesPage() {
6365
</Button>
6466
</div>
6567
</Hero>
66-
<main className="gql-all-anchors-focusable gql-conf-navbar-strip text-neu-900 before:bg-white/40 before:dark:bg-blk/30"></main>
68+
<main className="gql-all-anchors-focusable gql-conf-navbar-strip text-neu-900 before:bg-white/40 before:dark:bg-blk/30">
69+
<div className="gql-container">
70+
<AboutEventSection />
71+
<WhatToExpectSection />
72+
<ExpertMeetupSection />
73+
<VenueAndLocationSection />
74+
</div>
75+
<CtaCardSection
76+
title="Join the community"
77+
description="Meet the experts, share best practices, and discover the latest innovations shaping the future of APIs."
78+
>
79+
<div className="flex gap-4 max-sm:flex-col sm:items-center">
80+
<Button href={CFP_LINK} variant="primary">
81+
Submit a proposal
82+
</Button>
83+
<Button href={TICKETS_LINK} variant="secondary">
84+
Get your tickets
85+
</Button>
86+
</div>
87+
</CtaCardSection>
88+
</main>
6789
</>
6890
)
6991
}
@@ -82,3 +104,189 @@ function HeroDateAndLocation() {
82104
</div>
83105
)
84106
}
107+
108+
function AboutEventSection() {
109+
return (
110+
<section className="gql-section flex gap-6 max-md:flex-col">
111+
<h3 className="typography-h2 md:flex-1">About GraphQL Day</h3>
112+
<div className="flex flex-col gap-6 md:flex-1">
113+
<p className="typography-body-lg">
114+
Join us for a special GraphQL Day as part of the Future of Software
115+
Week, co-located with API Days Paris. This focused event brings
116+
together GraphQL practitioners, innovators, and thought leaders for a
117+
day of deep technical discussions and hands-on learning.
118+
</p>
119+
<p className="typography-body-lg">
120+
Whether you're already using GraphQL in production or just getting
121+
started, this is your opportunity to connect with the community, share
122+
best practices, and discover the latest developments in the GraphQL
123+
ecosystem.
124+
</p>
125+
</div>
126+
</section>
127+
)
128+
}
129+
130+
function WhatToExpectSection() {
131+
return (
132+
<section className="gql-section flex gap-6 max-md:flex-col">
133+
<h3 className="typography-h2 md:flex-1">What to expect</h3>
134+
<ul className="flex flex-col gap-6 uppercase md:flex-1">
135+
<ListItem number="8+" text="Expert talks" />
136+
<ListItem number="12+" text="Speakers" />
137+
<ListItem number="3" text="Lightning talks" />
138+
<ListItem number="2" text="Panel discussions" />
139+
<ListItem number="300+" text="Attendees" />
140+
</ul>
141+
</section>
142+
)
143+
}
144+
145+
function ListItem({ number, text }: { number: string | number; text: string }) {
146+
return (
147+
<li className="list-none bg-gradient-to-r from-[#CDF27E] p-6 dark:from-[#507501]">
148+
<span className="inline-block text-[72px]/none [text-box:trim-both_cap_alphabetic]">
149+
{number}
150+
</span>{" "}
151+
<span className="typography-menu mb-2 inline-block">{text}</span>
152+
</li>
153+
)
154+
}
155+
156+
function ExpertMeetupSection() {
157+
return (
158+
<section className="gql-section">
159+
<h3 className="typography-h2 mb-12">
160+
Meet the experts, share your experience
161+
</h3>
162+
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
163+
<ExpertCard
164+
title="Technical Deep Dives"
165+
description="Learn advanced patterns, performance optimization techniques, and architectural decisions from teams running GraphQL at scale."
166+
/>
167+
<ExpertCard
168+
title="Best Practices Exchange"
169+
description="Share your learnings and challenges with fellow practitioners. Discover how others solve common GraphQL problems."
170+
/>
171+
<ExpertCard
172+
title="Innovation Showcase"
173+
description="Explore cutting-edge tools, upcoming features, and experimental approaches that are shaping GraphQL's future."
174+
/>
175+
<ExpertCard
176+
title="Community Building"
177+
description="Connect with the European GraphQL community. Build relationships that extend beyond the conference."
178+
/>
179+
<ExpertCard
180+
title="Hands-on Learning"
181+
description="Interactive sessions where you can experiment with new tools and techniques in real-time."
182+
/>
183+
<ExpertCard
184+
title="Q&A Sessions"
185+
description="Direct access to library maintainers and core contributors. Get your specific questions answered."
186+
/>
187+
</div>
188+
</section>
189+
)
190+
}
191+
192+
function ExpertCard({
193+
title,
194+
description,
195+
}: {
196+
title: string
197+
description: string
198+
}) {
199+
return (
200+
<article className="flex flex-col gap-4 border border-neu-200 p-6 dark:border-neu-700">
201+
<h4 className="typography-h3">{title}</h4>
202+
<p className="typography-body-md text-neu-700 dark:text-neu-300">
203+
{description}
204+
</p>
205+
</article>
206+
)
207+
}
208+
209+
function VenueAndLocationSection() {
210+
return (
211+
<section className="gql-section">
212+
<h3 className="typography-h2 mb-12">Venue & Location</h3>
213+
<div className="flex gap-x-12 gap-y-10 max-lg:flex-col">
214+
<article className="flex flex-col gap-6 lg:flex-1">
215+
<h4 className="typography-h3">
216+
Centre of New Industries and Technologies
217+
</h4>
218+
<p className="typography-body-lg">
219+
Located in Puteaux, commune in the western suburbs of Paris, CNIT is
220+
an iconic venue offering state-of-the-art facilities and easy access
221+
to public transportation, making it perfect for technology
222+
conferences.
223+
</p>
224+
<div className="typography-body-lg">
225+
<address className="not-italic">
226+
Centre des nouvelles industries et technologies (CNIT)
227+
<br />
228+
2 Pl. de la Défense
229+
<br />
230+
92800 Puteaux, France
231+
</address>
232+
</div>
233+
<Button href="https://maps.app.goo.gl/example" className="w-fit">
234+
View on Google Maps
235+
</Button>
236+
</article>
237+
238+
<div className="lg:flex-1">
239+
<h4 className="typography-h3 mb-6">Getting There</h4>
240+
<Accordion
241+
items={[
242+
{
243+
title: "By Metro/RER",
244+
description: (
245+
<>
246+
Take RER A or Metro Line 1 to "La Défense" station.
247+
<br />
248+
The venue is directly accessible from the station.
249+
</>
250+
),
251+
},
252+
{
253+
title: "From Airports",
254+
description: (
255+
<>
256+
<strong>Charles de Gaulle:</strong> Take RER B to
257+
Châtelet-Les Halles, then RER A to La Défense (45 minutes
258+
total).
259+
<br />
260+
<strong>Orly:</strong> Take Orlyval to Antony, then RER B to
261+
Châtelet, then RER A to La Défense (60 minutes total).
262+
</>
263+
),
264+
},
265+
{
266+
title: "Parking",
267+
description: (
268+
<>
269+
Multiple parking facilities available in La Défense.
270+
<br />
271+
We recommend using public transportation when possible.
272+
<br />
273+
Early booking recommended for parking spaces.
274+
</>
275+
),
276+
},
277+
]}
278+
/>
279+
</div>
280+
</div>
281+
<iframe
282+
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1311.5979270428409!2d2.2390248!3d48.8926045!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66502128aae1f%3A0xe5e22af4aa16ed38!2sWestfield%20CNIT!5e0!3m2!1sen!2spl!4v1756917405738!5m2!1sen!2spl"
283+
width="100%"
284+
height="450"
285+
allowFullScreen
286+
loading="lazy"
287+
referrerPolicy="no-referrer-when-downgrade"
288+
className="mt-4"
289+
/>
290+
</section>
291+
)
292+
}

0 commit comments

Comments
 (0)