diff --git a/src/app/colors.css b/src/app/colors.css index 591e86651c..a3ca69e689 100644 --- a/src/app/colors.css +++ b/src/app/colors.css @@ -24,18 +24,16 @@ --color-neu-900: 75 15% 5%; } -@media (prefers-color-scheme: dark) { - :root { - --color-neu-900: 0 0% 100%; - --color-neu-800: 75 57% 97%; - --color-neu-700: 75 15% 95%; - --color-neu-600: 77 14% 90%; - --color-neu-500: 76 14% 85%; - --color-neu-400: 77 14% 80%; - --color-neu-300: 74 14% 70%; - --color-neu-200: 76 15% 60%; - --color-neu-100: 76 15% 40%; - --color-neu-50: 77 14% 20%; - --color-neu-0: 75 15% 5%; - } +html.dark { + --color-neu-900: 0 0% 100%; + --color-neu-800: 75 57% 97%; + --color-neu-700: 75 15% 95%; + --color-neu-600: 77 14% 90%; + --color-neu-500: 76 14% 85%; + --color-neu-400: 77 14% 80%; + --color-neu-300: 74 14% 70%; + --color-neu-200: 76 15% 60%; + --color-neu-100: 76 15% 40%; + --color-neu-50: 77 14% 20%; + --color-neu-0: 75 15% 5%; } diff --git a/src/app/conf/2025/assets/graphql-foundation-wordmark.svg b/src/app/conf/2025/assets/graphql-foundation-wordmark.svg new file mode 100644 index 0000000000..556ab3f50b --- /dev/null +++ b/src/app/conf/2025/assets/graphql-foundation-wordmark.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/conf/2025/components/hero/blur-bean-cropped.webp b/src/app/conf/2025/components/hero/blur-bean-cropped.webp new file mode 100644 index 0000000000..41785f9cbd Binary files /dev/null and b/src/app/conf/2025/components/hero/blur-bean-cropped.webp differ diff --git a/src/app/conf/2025/components/hero/hero-photo.jpeg b/src/app/conf/2025/components/hero/hero-photo.jpeg new file mode 100644 index 0000000000..5e9fed6fd0 Binary files /dev/null and b/src/app/conf/2025/components/hero/hero-photo.jpeg differ diff --git a/src/app/conf/2025/components/hero/image-loaded.tsx b/src/app/conf/2025/components/hero/image-loaded.tsx new file mode 100644 index 0000000000..e1486b7618 --- /dev/null +++ b/src/app/conf/2025/components/hero/image-loaded.tsx @@ -0,0 +1,21 @@ +"use client" + +import type { StaticImageData } from "next/image" +import { useEffect, useState } from "react" + +export interface ImageLoadedProps extends React.HTMLAttributes { + image: string | StaticImageData +} + +export function ImageLoaded({ image, ...rest }: ImageLoadedProps) { + const [loaded, setLoaded] = useState(false) + + useEffect(() => { + const img = new Image() + const src = typeof image === "string" ? image : image.src + img.src = src + img.onload = () => setLoaded(true) + }, [image]) + + return
+} diff --git a/src/app/conf/2025/components/hero/index.tsx b/src/app/conf/2025/components/hero/index.tsx new file mode 100644 index 0000000000..adab4cdc89 --- /dev/null +++ b/src/app/conf/2025/components/hero/index.tsx @@ -0,0 +1,113 @@ +import { clsx } from "clsx" +import Image from "next-image-export-optimizer" +import { CalendarIcon } from "../../pixelarticons/calendar-icon" +import { PinIcon } from "../../pixelarticons/pin-icon" +import { GET_TICKETS_LINK } from "../../links" +import { Button } from "../../../_design-system/button" +import graphqlFoundationWordmarkSvg from "../../assets/graphql-foundation-wordmark.svg" +import heroPhoto from "./hero-photo.jpeg" +import blurBean from "./blur-bean-cropped.webp" +import { ImageLoaded } from "./image-loaded" + +export function Hero() { + return ( +
+
+ +
+
+

+ GraphQLConf + 2025 +

+
+ + hosted by + + GraphQL Foundation +
+
+ +
+ + +
+
+
+
+ five speakers at GraphQLConf 2024 +
+
+ ) +} + +function DateAndLocation() { + return ( +
+
+ + + - + +
+
+ +
+ Amsterdam, Netherlands +
+
+
+ ) +} + +function Stripes() { + const maskEven = + "repeating-linear-gradient(to right, transparent, transparent 12px, black 12px, black 24px)" + const maskOdd = + "repeating-linear-gradient(to right, black, black 12px, transparent 12px, transparent 24px)" + + return ( + +
+
+ + ) +} diff --git a/src/app/conf/2025/register-today/index.tsx b/src/app/conf/2025/components/register-today/index.tsx similarity index 76% rename from src/app/conf/2025/register-today/index.tsx rename to src/app/conf/2025/components/register-today/index.tsx index 3aaf09cae4..30539999d5 100644 --- a/src/app/conf/2025/register-today/index.tsx +++ b/src/app/conf/2025/components/register-today/index.tsx @@ -1,7 +1,8 @@ import { clsx } from "clsx" import NextImage from "next-image-export-optimizer" -import { Button } from "../../_design-system/button" +import { Button } from "../../../_design-system/button" +import { GET_TICKETS_LINK, BECOME_A_SPEAKER_LINK } from "../../links" import speakerImage from "./speaker.webp" @@ -36,13 +37,8 @@ export function RegisterToday({ className }: RegisterTodayProps) {

- - +
diff --git a/src/app/conf/2025/register-today/speaker.webp b/src/app/conf/2025/components/register-today/speaker.webp similarity index 100% rename from src/app/conf/2025/register-today/speaker.webp rename to src/app/conf/2025/components/register-today/speaker.webp diff --git a/src/app/conf/2025/layout.tsx b/src/app/conf/2025/layout.tsx index b7734d1ab8..5cc02638a8 100644 --- a/src/app/conf/2025/layout.tsx +++ b/src/app/conf/2025/layout.tsx @@ -6,7 +6,9 @@ import { GraphQLConf, HostedByGraphQLFoundation } from "@/icons" import NextLink from "next/link" import { NewFontsStyleTag } from "../../fonts" import "../../colors.css" -import "../../typography.css" + +// @ts-expect-error: we want to import the same version as Nextra for the main page +import { ThemeProvider } from "next-themes" export const metadata = { description: @@ -54,7 +56,9 @@ export default function Layout({ ]} is2025 /> -
{children}
+ +
{children}
+