From 5b627dc6861e389c1398607701927a2e9224deef Mon Sep 17 00:00:00 2001 From: Saihajpreet Singh Date: Wed, 18 Dec 2024 17:40:30 +0000 Subject: [PATCH 1/3] bunch of improvements --- next-env.d.ts | 2 +- src/app/conf/2025/faq.tsx | 83 ++++++ src/app/conf/2025/page.tsx | 314 ++++------------------- src/app/conf/2025/past-sponsors.tsx | 137 ++++++++++ src/app/conf/2025/register.tsx | 48 ++++ src/app/conf/2025/sponsors.tsx | 208 --------------- src/app/conf/2025/sponsorship.tsx | 54 ++++ src/app/conf/2025/venue.tsx | 104 ++++++++ src/app/conf/_components/grid-button.tsx | 19 +- 9 files changed, 484 insertions(+), 485 deletions(-) create mode 100644 src/app/conf/2025/faq.tsx create mode 100644 src/app/conf/2025/past-sponsors.tsx create mode 100644 src/app/conf/2025/register.tsx delete mode 100644 src/app/conf/2025/sponsors.tsx create mode 100644 src/app/conf/2025/sponsorship.tsx create mode 100644 src/app/conf/2025/venue.tsx diff --git a/next-env.d.ts b/next-env.d.ts index fd36f9494e..725dd6f245 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -3,4 +3,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. +// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information. diff --git a/src/app/conf/2025/faq.tsx b/src/app/conf/2025/faq.tsx new file mode 100644 index 0000000000..cee170f4a1 --- /dev/null +++ b/src/app/conf/2025/faq.tsx @@ -0,0 +1,83 @@ +import { ArrowRight } from "lucide-react" + +import styles from "./index.module.css" + +const FAQS = [ + { + question: "When will speakers and the agenda be announced?", + answer: + "Stay tuned to our social media channels and website for updates on speakers and the agenda.", + }, + { + question: "Can I sponsor the event?", + answer: + 'Yes! We offer various sponsorship packages. See this section for more information.', + }, + { + question: "Are there group discounts for teams?", + answer: + 'If you have a group of 5 or more people, you can receive a 10% discount on all passes. All pass types must be the same, and all registrations must be processed under one group registration and must be paid with the same credit card. To create a group, select “Add Another Person” to your registration. When 5 or more people are added the 10% discount will be automatically applied. Contact us for any questions.', + }, + { + question: "What is the refund and cancellation policy?", + answer: `If you must cancel for any reason, please sign back into your registration, click the “Register/Modify” button and select “Unregister.” If you need further assistance, contact us.

Refunds will only be issued for cancellations received two weeks prior to the event start date, including bulk ticket request refunds, and will appear as a credit on the card's statement 7-10 business days after cancellation. Individual refund requests for late cancellations due to sickness or emergency will be considered on a case by case basis - contact us.

Refunds can only be issued on the card the original payment was made.`, + }, + { + question: "Can I transfer my registration?", + answer: + "If you are unable to attend, you may substitute another attendee in lieu of cancellation. To substitute an attendee, sign back into your registration, click the “Register/Modify”, and select “Transfer Registration” on your confirmation page.", + }, + { + question: "Can I get certificate of attendance?", + answer: + 'To request a Certificate of Attendance, please submit a request here. Please Note: We verify attendance through the registration system, and Certificate of Attendance letters are sent out after the event is completed.', + }, + { + question: "Cannot find the answer to your question?", + answer: + 'You are welcome to email us graphqlconf@graphql.org.', + }, +] + +export function FAQ() { + return ( +
+
+
+

+ Frequently +
+ Asked Questions +

+

+ PLEASE CONTACT{" "} + + graphqlconf@graphql.org + +

+
+ +
+ {FAQS.map((faq, index) => ( +
+ + + {faq.question} + +

+

+ ))} +
+
+
+ ) +} diff --git a/src/app/conf/2025/page.tsx b/src/app/conf/2025/page.tsx index 354cba2867..1f5a2d96eb 100644 --- a/src/app/conf/2025/page.tsx +++ b/src/app/conf/2025/page.tsx @@ -1,18 +1,12 @@ import { Metadata } from "next" import { HostedByGraphQLFoundation } from "@/icons" -import { Sponsors } from "./sponsors" import { Rubik } from "next/font/google" -import GridButton from "../_components/grid-button" -import { InfoGrid } from "../_components/info-grid" -import { - BusFront, - TicketsPlane, - SquareParking, - ExternalLink, - ArrowRight, -} from "lucide-react" -import styles from "./index.module.css" -import clsx from "clsx" +import { GridButton } from "../_components/grid-button" +import { Sponsor } from "./sponsorship" +import { Venue } from "./venue" +import { FAQ } from "./faq" +import { Register } from "./register" +import { PastSponsors } from "./past-sponsors" const rubik = Rubik({ weight: ["700", "600", "500", "400", "300"], @@ -23,181 +17,47 @@ export const metadata: Metadata = { title: "GraphQLConf 2025 — Sept 08-10", } -const HOTELS = [ - { - name: "Mövenpick Hotel Amsterdam City Centre", - link: "https://movenpick.accor.com/en/europe/netherlands/amsterdam/hotel-amsterdam.html?utm_source=google&utm_medium=local&utm_campaign=hotel-MHR-Amsterdam-city-center&y_source=1_MTUzNjI2OTgtNzE1LWxvY2F0aW9uLndlYnNpdGU%3D", - description: - "Piet Heinkade 11\n1019 BR Amsterdam, Netherlands\nPhone: +31 20 519 1200", - }, - { - name: "Inntel Hotels Amsterdam Landmark", - link: "https://www.inntelhotelsamsterdamlandmark.nl/", - description: - "VOC-kade 600\n1018 LG Amsterdam, Netherlands\n Phone: +31 20 227 2550", - }, - { - name: "DoubleTree by Hilton Amsterdam Central Station", - link: "https://www.hilton.com/en/hotels/amscsdi-doubletree-amsterdam-centraal-station/?SEO_id=GMB-EMEA-DI-AMSCSDI", - description: - "Oosterdoksstraat 4 \n1011 DK Amsterdam, Netherlands\nPhone: +31 20 530 0800", - }, -] - -const HOW_TO_GET_TO_VENUE = [ - { - title: "Public Transportation", - description: - 'Take tram 26 from Amsterdam Central Station to the "Rietlandpark" stop. The venue is a 5-minute walk from there.', - icon: , - }, - { - title: "Airport Information", - description: - "Amsterdam Airport Schiphol is about 20 km from the venue. Take a direct train to Amsterdam Central Station, then follow the public transportation instructions.", - icon: , - }, - { - title: "Parking at venue", - description: - "Limited parking is available at the venue. We recommend using public transportation when possible.", - icon: , - }, -] - -function Venue() { +function Hero() { return ( -
-

Venue

-
-
-

Conference

-

- Pakhuis De Zwijger -
Piet Heinkade 179, 1019 HC
- Amsterdam, Netherlands -

-
-

- How to get to the venue? -

- {HOW_TO_GET_TO_VENUE.map(({ title, description, icon }) => ( -
-
- {icon} -
{title}
-
-

{description}

-
- ))} -
-
- -
-

Hotel Information

-

- The Linux Foundation has not contracted rooms at these properties - and cannot guarantee rates or availability. -

-
- {HOTELS.map(hotel => ( -
- - - {hotel.name} - - - -

{hotel.description}

-
- ))} -
+
+
+
+

+ GraphQLConf 2025 +

+ + + September 08 - 10, 2025 | Amsterdam, Netherlands +
+
) } -const FAQS = [ - { - question: "When will speakers and the agenda be announced?", - answer: - "Stay tuned to our social media channels and website for updates on speakers and the agenda.", - }, - { - question: "Can I sponsor the event?", - answer: - 'Yes! We offer various sponsorship packages. See this section for more information.', - }, - { - question: "Are there group discounts for teams?", - answer: - 'If you have a group of 5 or more people, you can receive a 10% discount on all passes. All pass types must be the same, and all registrations must be processed under one group registration and must be paid with the same credit card. To create a group, select “Add Another Person” to your registration. When 5 or more people are added the 10% discount will be automatically applied. Contact us for any questions.', - }, - { - question: "What is the refund and cancellation policy?", - answer: `If you must cancel for any reason, please sign back into your registration, click the “Register/Modify” button and select “Unregister.” If you need further assistance, contact us.

Refunds will only be issued for cancellations received two weeks prior to the event start date, including bulk ticket request refunds, and will appear as a credit on the card's statement 7-10 business days after cancellation. Individual refund requests for late cancellations due to sickness or emergency will be considered on a case by case basis - contact us.

Refunds can only be issued on the card the original payment was made.`, - }, - { - question: "Can I transfer my registration?", - answer: - "If you are unable to attend, you may substitute another attendee in lieu of cancellation. To substitute an attendee, sign back into your registration, click the “Register/Modify”, and select “Transfer Registration” on your confirmation page.", - }, - { - question: "Can I get certificate of attendance?", - answer: - 'To request a Certificate of Attendance, please submit a request here. Please Note: We verify attendance through the registration system, and Certificate of Attendance letters are sent out after the event is completed.', - }, - { - question: "Cannot find the answer to your question?", - answer: - 'You are welcome to email us graphqlconf@graphql.org.', - }, -] - -function FAQSection() { +function Intro() { return ( -
-
-
-

- Frequently -
- Asked Questions -

-

- PLEASE CONTACT{" "} - - graphqlconf@graphql.org - -

-
+
+

+ Celebrating 10 Years of GraphQL. Three transformative days of expert + insights and innovation to shape the next decade of APIs together! +

-
- {FAQS.map((faq, index) => ( -
- - - {faq.question} - -

-

- ))} -
-
-
+ +
) } @@ -207,96 +67,22 @@ export default function Page() { style={{ fontFamily: rubik.style.fontFamily, }} + className="text-white" > -
-
-
-

- GraphQLConf 2025 -

- - - September 08 - 10, 2025 | Amsterdam, Netherlands - -
-
- -
- -
-

- Celebrating 10 Years of GraphQL. Three transformative days of expert - insights and innovation to shape the next decade of APIs together! -

+ +
+ + + -
- - - - - -
- graphql_events@linuxfoundation.org`, - }, - { - title: "Speakers", - description: `You should have received a registration link in your acceptance email. If you did not, please contact cfp@linuxfoundation.org for more details.`, - }, - { - title: "Sponsors", - description: `A registration link was shared in an email to your company's sponsorship contact. Please reach out to your company’s sponsorship contact if you need to register as a Sponsor. For further questions, please email events@linuxfoundation.org.`, - }, - ]} + id="speakers" + title="Notify Me About Speaking" + href="https://forms.gle/jRsE2u8pokLX93RGA" /> - - + + +
- - - - ) } diff --git a/src/app/conf/2025/past-sponsors.tsx b/src/app/conf/2025/past-sponsors.tsx new file mode 100644 index 0000000000..1d07e6bdf5 --- /dev/null +++ b/src/app/conf/2025/past-sponsors.tsx @@ -0,0 +1,137 @@ +import Stellate from "public/img/conf/Sponsors/Stellate.svg" +import Hasura from "public/img/conf/Sponsors/Hasura.svg" +import TheGuild from "public/img/conf/Sponsors/TheGuild.svg" +import Apollo from "public/img/conf/Sponsors/Apollo.svg" +import Tyk from "public/img/conf/Sponsors/Tyk.svg" +import IBM from "public/img/conf/Sponsors/IBM.svg" +import Graphweaver from "public/img/conf/Sponsors/Graphweaver.svg" + +import { clsx } from "clsx" +import NextImage from "next-image-export-optimizer" + +interface Image { + icon: string + name: string + link: string +} + +const sponsorDiamond: Image[] = [ + { icon: TheGuild, name: "The Guild", link: "https://the-guild.dev" }, + { icon: IBM, name: "IBM", link: "https://www.ibm.com/products/api-connect" }, +] + +const sponsorPlatinum: Image[] = [] + +const sponsorGold: Image[] = [ + { icon: Apollo, name: "Apollo", link: "https://www.apollographql.com/" }, + { icon: Graphweaver, name: "Graphweaver", link: "https://graphweaver.com" }, + { icon: Hasura, name: "Hasura", link: "https://hasura.io" }, +] + +const sponsorSilver: Image[] = [ + { icon: Stellate, name: "Stellate", link: "https://stellate.co" }, + { icon: Tyk, name: "Tyk", link: "https://tyk.io/" }, +] + +function List({ + items, + className, + linkClassName, +}: { + className?: string + items: Image[] + linkClassName?: string +}) { + return ( +
+ {items.map(({ link, icon, name }, i) => ( + + + + ↗ + + + ))} +
+ ) +} + +export function PastSponsors() { + return ( +
+

Thanks to our 2024 sponsors!

+ {sponsorDiamond.length > 0 && ( + <> +
+
+

DIAMOND

+
+ + + )} + {sponsorPlatinum.length > 0 && ( + <> +
+
+

PLATINUM

+
+ + + )} + {sponsorGold.length > 0 && ( + <> +
+
+

GOLD

+
+ + + )} + {sponsorSilver.length > 0 && ( + <> +
+
+

SILVER

+
+ + + )} +
+ ) +} diff --git a/src/app/conf/2025/register.tsx b/src/app/conf/2025/register.tsx new file mode 100644 index 0000000000..c7725892e8 --- /dev/null +++ b/src/app/conf/2025/register.tsx @@ -0,0 +1,48 @@ +import { InfoGrid } from "../_components/info-grid" + +export function Register() { + return ( +
+ graphql_events@linuxfoundation.org`, + }, + { + title: "Speakers", + description: `You should have received a registration link in your acceptance email. If you did not, please contact cfp@linuxfoundation.org for more details.`, + }, + { + title: "Sponsors", + description: `A registration link was shared in an email to your company's sponsorship contact. Please reach out to your company’s sponsorship contact if you need to register as a Sponsor. For further questions, please email events@linuxfoundation.org.`, + }, + ]} + /> + + +
+ ) +} diff --git a/src/app/conf/2025/sponsors.tsx b/src/app/conf/2025/sponsors.tsx deleted file mode 100644 index 1c5ed7efae..0000000000 --- a/src/app/conf/2025/sponsors.tsx +++ /dev/null @@ -1,208 +0,0 @@ -import Stellate from "public/img/conf/Sponsors/Stellate.svg" -import Hasura from "public/img/conf/Sponsors/Hasura.svg" -import TheGuild from "public/img/conf/Sponsors/TheGuild.svg" -import Apollo from "public/img/conf/Sponsors/Apollo.svg" -import Tyk from "public/img/conf/Sponsors/Tyk.svg" -import IBM from "public/img/conf/Sponsors/IBM.svg" -import Graphweaver from "public/img/conf/Sponsors/Graphweaver.svg" - -import { clsx } from "clsx" -import NextImage from "next-image-export-optimizer" -import { Rubik } from "next/font/google" -import { InfoGrid } from "../_components/info-grid" - -const rubik = Rubik({ - weight: ["700", "600", "500", "400", "300"], - subsets: ["latin"], -}) - -interface Image { - icon: string - name: string - link: string -} - -const sponsorDiamond: Image[] = [ - { icon: TheGuild, name: "The Guild", link: "https://the-guild.dev" }, - { icon: IBM, name: "IBM", link: "https://www.ibm.com/products/api-connect" }, -] - -const sponsorPlatinum: Image[] = [] - -const sponsorGold: Image[] = [ - { icon: Apollo, name: "Apollo", link: "https://www.apollographql.com/" }, - { icon: Graphweaver, name: "Graphweaver", link: "https://graphweaver.com" }, - { icon: Hasura, name: "Hasura", link: "https://hasura.io" }, -] - -const sponsorSilver: Image[] = [ - { icon: Stellate, name: "Stellate", link: "https://stellate.co" }, - { icon: Tyk, name: "Tyk", link: "https://tyk.io/" }, -] - -function List({ - items, - className, - linkClassName, -}: { - className?: string - items: Image[] - linkClassName?: string -}) { - return ( -
- {items.map(({ link, icon, name }, i) => ( - - - - ↗ - - - ))} -
- ) -} - -const classes = { - heading: - "text-center text-primary text-2xl lg:text-3xl font-bold mb-10 mt-20", - title: "text-white conf-heading mb-12", -} - -export function Sponsors() { - return ( -
-
-

Thanks to our 2024 sponsors!

- {sponsorDiamond.length && ( - <> -
-
-

DIAMOND

-
- - - )} - {sponsorPlatinum.length && ( - <> -
-
-

PLATINUM

-
- - - )} - {sponsorGold.length && ( - <> -
-
-

GOLD

-
- - - )} - {sponsorSilver.length && ( - <> -
-
-

SILVER

-
- - - )} -
- - -
- ) -} diff --git a/src/app/conf/2025/sponsorship.tsx b/src/app/conf/2025/sponsorship.tsx new file mode 100644 index 0000000000..ebd99a92bd --- /dev/null +++ b/src/app/conf/2025/sponsorship.tsx @@ -0,0 +1,54 @@ +import { InfoGrid } from "../_components/info-grid" + +export function Sponsor() { + return ( +
+ + + +
+ ) +} diff --git a/src/app/conf/2025/venue.tsx b/src/app/conf/2025/venue.tsx new file mode 100644 index 0000000000..5a6c60dc96 --- /dev/null +++ b/src/app/conf/2025/venue.tsx @@ -0,0 +1,104 @@ +import { + BusFront, + ExternalLink, + SquareParking, + TicketsPlane, +} from "lucide-react" + +const HOTELS = [ + { + name: "Mövenpick Hotel Amsterdam City Centre", + link: "https://movenpick.accor.com/en/europe/netherlands/amsterdam/hotel-amsterdam.html?utm_source=google&utm_medium=local&utm_campaign=hotel-MHR-Amsterdam-city-center&y_source=1_MTUzNjI2OTgtNzE1LWxvY2F0aW9uLndlYnNpdGU%3D", + description: + "Piet Heinkade 11\n1019 BR Amsterdam, Netherlands\nPhone: +31 20 519 1200", + }, + { + name: "Inntel Hotels Amsterdam Landmark", + link: "https://www.inntelhotelsamsterdamlandmark.nl/", + description: + "VOC-kade 600\n1018 LG Amsterdam, Netherlands\n Phone: +31 20 227 2550", + }, + { + name: "DoubleTree by Hilton Amsterdam Central Station", + link: "https://www.hilton.com/en/hotels/amscsdi-doubletree-amsterdam-centraal-station/?SEO_id=GMB-EMEA-DI-AMSCSDI", + description: + "Oosterdoksstraat 4 \n1011 DK Amsterdam, Netherlands\nPhone: +31 20 530 0800", + }, +] + +const HOW_TO_GET_TO_VENUE = [ + { + title: "Public Transportation", + description: + 'Take tram 26 from Amsterdam Central Station to the "Rietlandpark" stop. The venue is a 5-minute walk from there.', + icon: , + }, + { + title: "Airport Information", + description: + "Amsterdam Airport Schiphol is about 20 km from the venue. Take a direct train to Amsterdam Central Station, then follow the public transportation instructions.", + icon: , + }, + { + title: "Parking at venue", + description: + "Limited parking is available at the venue. We recommend using public transportation when possible.", + icon: , + }, +] + +export function Venue() { + return ( +
+

Venue

+
+
+

Conference

+

+ Pakhuis De Zwijger +
Piet Heinkade 179, 1019 HC
+ Amsterdam, Netherlands +

+
+

+ How to get to the venue? +

+ {HOW_TO_GET_TO_VENUE.map(({ title, description, icon }) => ( +
+
+ {icon} +
{title}
+
+

{description}

+
+ ))} +
+
+ +
+

Hotel Information

+

+ The Linux Foundation has not contracted rooms at these properties + and cannot guarantee rates or availability. +

+
+ {HOTELS.map(hotel => ( +
+ + + {hotel.name} + + + +

{hotel.description}

+
+ ))} +
+
+
+
+ ) +} diff --git a/src/app/conf/_components/grid-button.tsx b/src/app/conf/_components/grid-button.tsx index d0c1942bb1..d2bafcf803 100644 --- a/src/app/conf/_components/grid-button.tsx +++ b/src/app/conf/_components/grid-button.tsx @@ -1,18 +1,14 @@ import React from "react" -type GridButtonProps = { - title: string - href: string - disabled?: boolean - id?: string -} - -const GridButton: React.FC = ({ +export function GridButton({ title, href, - disabled, id, -}) => { +}: { + title: string + href: string + id?: string +}) { return (
= ({ >
))} = ({ ) } -export default GridButton From 50d15a8915c64486bca2a93adf5c3f5c19ca9127 Mon Sep 17 00:00:00 2001 From: Saihajpreet Singh Date: Wed, 18 Dec 2024 17:47:42 +0000 Subject: [PATCH 2/3] refactor past sponsor creation --- src/app/conf/2025/past-sponsors.tsx | 104 +++++++++++----------------- 1 file changed, 42 insertions(+), 62 deletions(-) diff --git a/src/app/conf/2025/past-sponsors.tsx b/src/app/conf/2025/past-sponsors.tsx index 1d07e6bdf5..cc15a1e67e 100644 --- a/src/app/conf/2025/past-sponsors.tsx +++ b/src/app/conf/2025/past-sponsors.tsx @@ -9,28 +9,46 @@ import Graphweaver from "public/img/conf/Sponsors/Graphweaver.svg" import { clsx } from "clsx" import NextImage from "next-image-export-optimizer" -interface Image { +type LogosType = { icon: string name: string link: string } -const sponsorDiamond: Image[] = [ - { icon: TheGuild, name: "The Guild", link: "https://the-guild.dev" }, - { icon: IBM, name: "IBM", link: "https://www.ibm.com/products/api-connect" }, -] - -const sponsorPlatinum: Image[] = [] - -const sponsorGold: Image[] = [ - { icon: Apollo, name: "Apollo", link: "https://www.apollographql.com/" }, - { icon: Graphweaver, name: "Graphweaver", link: "https://graphweaver.com" }, - { icon: Hasura, name: "Hasura", link: "https://hasura.io" }, -] - -const sponsorSilver: Image[] = [ - { icon: Stellate, name: "Stellate", link: "https://stellate.co" }, - { icon: Tyk, name: "Tyk", link: "https://tyk.io/" }, +const SPONSORS: Array<{ + title: string + logos: Array +}> = [ + { + title: "Diamond", + logos: [ + { icon: TheGuild, name: "The Guild", link: "https://the-guild.dev" }, + { + icon: IBM, + name: "IBM", + link: "https://www.ibm.com/products/api-connect", + }, + ], + }, + { + title: "Gold", + logos: [ + { icon: Apollo, name: "Apollo", link: "https://www.apollographql.com/" }, + { + icon: Graphweaver, + name: "Graphweaver", + link: "https://graphweaver.com", + }, + { icon: Hasura, name: "Hasura", link: "https://hasura.io" }, + ], + }, + { + title: "Silver", + logos: [ + { icon: Stellate, name: "Stellate", link: "https://stellate.co" }, + { icon: Tyk, name: "Tyk", link: "https://tyk.io/" }, + ], + }, ] function List({ @@ -39,7 +57,7 @@ function List({ linkClassName, }: { className?: string - items: Image[] + items: Array linkClassName?: string }) { return ( @@ -80,58 +98,20 @@ export function PastSponsors() { return (

Thanks to our 2024 sponsors!

- {sponsorDiamond.length > 0 && ( + {SPONSORS.map(({ title, logos }, i) => ( <>
-
-

DIAMOND

+ {/* Square box */} +
+

{title}

- )} - {sponsorPlatinum.length > 0 && ( - <> -
-
-

PLATINUM

-
- - - )} - {sponsorGold.length > 0 && ( - <> -
-
-

GOLD

-
- - - )} - {sponsorSilver.length > 0 && ( - <> -
-
-

SILVER

-
- - - )} + ))}
) } From 534de09c214048ee5baf28cd4528c78d9c7069b4 Mon Sep 17 00:00:00 2001 From: Saihajpreet Singh Date: Wed, 18 Dec 2024 18:06:16 +0000 Subject: [PATCH 3/3] prettier --- src/app/conf/_components/grid-button.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/conf/_components/grid-button.tsx b/src/app/conf/_components/grid-button.tsx index d2bafcf803..c75d9b704b 100644 --- a/src/app/conf/_components/grid-button.tsx +++ b/src/app/conf/_components/grid-button.tsx @@ -47,4 +47,3 @@ export function GridButton({
) } -