diff --git a/src/app/conf/2025/components/top-minds/index.tsx b/src/app/conf/2025/components/top-minds/index.tsx new file mode 100644 index 0000000000..37328c4dc1 --- /dev/null +++ b/src/app/conf/2025/components/top-minds/index.tsx @@ -0,0 +1,166 @@ +import clsx from "clsx" +import { HTMLAttributes } from "react" +import Image from "next-image-export-optimizer" +import type { StaticImageData } from "next/image" + +import elizabethStone from "./speakers/elizabeth-stone.webp" +import kamilKisiela from "./speakers/kamil-kisiela.webp" +import rajeevRajan from "./speakers/rajeev-rajan.webp" +import tanmaiGopal from "./speakers/tanmai-gopal.webp" +import uriGoldshtein from "./speakers/uri-goldshtein.webp" +import TwitterIcon from "@/icons/twitter.svg" +import { Button } from "@/app/conf/_design-system/button" +import { BECOME_A_SPEAKER_LINK } from "../../links" + +interface TopMindsSectionProps extends HTMLAttributes { + hasSpeakersPage?: boolean +} + +export default function TopMindsSection({ + className, + hasSpeakersPage, + ...rest +}: TopMindsSectionProps) { + return ( +
+
+ {/* todo: remaining socials */} +

+ Meet the top industry minds +

+ + +
+ + + +
+ {hasSpeakersPage ? ( + + ) : ( + + )} +
+
+
+
+ ) +} + +function SpeakerCard({ + name, + title, + src, + twitter, + linkedin, + className, +}: { + name: string + title: string + src: string | StaticImageData + twitter?: string + linkedin?: string + className?: string +}) { + return ( +
+ +
+
+

{name}

+

{title}

+
+ {(linkedin || twitter) && ( +
+ {linkedin && ( + + + + )} + {twitter && ( + + + + )} +
+ )} +
+
+ ) +} + +function LinkedInIcon(props: HTMLAttributes) { + return ( + + + + ) +} diff --git a/src/app/conf/2025/components/top-minds/speakers/elizabeth-stone.webp b/src/app/conf/2025/components/top-minds/speakers/elizabeth-stone.webp new file mode 100644 index 0000000000..267cf36a33 Binary files /dev/null and b/src/app/conf/2025/components/top-minds/speakers/elizabeth-stone.webp differ diff --git a/src/app/conf/2025/components/top-minds/speakers/kamil-kisiela.webp b/src/app/conf/2025/components/top-minds/speakers/kamil-kisiela.webp new file mode 100644 index 0000000000..f4b7677a8a Binary files /dev/null and b/src/app/conf/2025/components/top-minds/speakers/kamil-kisiela.webp differ diff --git a/src/app/conf/2025/components/top-minds/speakers/rajeev-rajan.webp b/src/app/conf/2025/components/top-minds/speakers/rajeev-rajan.webp new file mode 100644 index 0000000000..7376c70845 Binary files /dev/null and b/src/app/conf/2025/components/top-minds/speakers/rajeev-rajan.webp differ diff --git a/src/app/conf/2025/components/top-minds/speakers/tanmai-gopal.webp b/src/app/conf/2025/components/top-minds/speakers/tanmai-gopal.webp new file mode 100644 index 0000000000..84030fbefa Binary files /dev/null and b/src/app/conf/2025/components/top-minds/speakers/tanmai-gopal.webp differ diff --git a/src/app/conf/2025/components/top-minds/speakers/uri-goldshtein.webp b/src/app/conf/2025/components/top-minds/speakers/uri-goldshtein.webp new file mode 100644 index 0000000000..5341e8428c Binary files /dev/null and b/src/app/conf/2025/components/top-minds/speakers/uri-goldshtein.webp differ diff --git a/src/app/conf/2025/page.tsx b/src/app/conf/2025/page.tsx index f2fa5e6c97..16cfc47bd3 100644 --- a/src/app/conf/2025/page.tsx +++ b/src/app/conf/2025/page.tsx @@ -10,6 +10,7 @@ import { Speakers } from "./speakers" import { RegisterToday } from "./components/register-today" import { Hero } from "./components/hero" import WhatToExpectSection from "./components/what-to-expect" +import TopMindsSection from "./components/top-minds" export const metadata: Metadata = { title: "GraphQLConf 2025 — Sept 08-10", @@ -22,6 +23,7 @@ export default function Page() {
+
diff --git a/src/app/conf/_design-system/button.tsx b/src/app/conf/_design-system/button.tsx index 8663ce59aa..81f39a82a0 100644 --- a/src/app/conf/_design-system/button.tsx +++ b/src/app/conf/_design-system/button.tsx @@ -56,7 +56,7 @@ export type ButtonProps = export function Button(props: ButtonProps) { const className = clsx( - "relative flex items-center justify-center gap-2.5 font-normal text-base/none text-neu-0 bg-neu-900 hover:bg-neu-800 active:bg-neu-700 font-sans h-14 px-8 data-[size=md]:h-12 data-[variant=secondary]:bg-neu-100 data-[variant=secondary]:text-neu-900 dark:data-[variant=secondary]:text-neu-0 data-[variant=secondary]:hover:bg-neu-200/75 data-[variant=secondary]:active:bg-neu-200/90 gql-focus-visible", + "relative flex items-center justify-center gap-2.5 font-normal text-base/none text-neu-0 bg-neu-900 hover:bg-neu-800 active:bg-neu-700 font-sans h-14 px-8 data-[size=md]:h-12 data-[variant=secondary]:bg-neu-100 data-[variant=secondary]:text-neu-900 data-[variant=secondary]:hover:bg-neu-200/75 data-[variant=secondary]:active:bg-neu-200/90 gql-focus-visible", props.className, )