Skip to content

Commit b6e8cbe

Browse files
hasparushasparus
committed
Reuse Hero component
1 parent 50e37bd commit b6e8cbe

File tree

5 files changed

+77
-101
lines changed

5 files changed

+77
-101
lines changed

‎src/app/conf/2025/components/hero/hero-image.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Image from "next-image-export-optimizer"
2+
3+
import heroPhoto from "./hero-photo.jpeg"
4+
5+
export function HeroImage() {
6+
return (
7+
<div className="z-[2] bg-blk">
8+
<Image
9+
src={heroPhoto}
10+
width={1920}
11+
height={560}
12+
alt="five speakers at GraphQLConf 2024"
13+
className="mx-auto h-[560px] w-[1920px] max-w-full object-cover"
14+
/>
15+
</div>
16+
)
17+
}

‎src/app/conf/2025/components/hero/index.tsx

Lines changed: 28 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,52 @@
1-
import Image from "next-image-export-optimizer"
2-
3-
import { Button } from "../../../_design-system/button"
41
import { CalendarIcon } from "../../pixelarticons/calendar-icon"
5-
import { GET_TICKETS_LINK } from "../../links"
62
import { PinIcon } from "../../pixelarticons/pin-icon"
7-
import graphqlFoundationWordmarkSvg from "../../assets/graphql-foundation-wordmark.svg"
3+
import GraphQLFoundationWordmark from "../../assets/graphql-foundation-wordmark.svg?svgr"
84

95
import { ImageLoaded } from "../image-loaded"
106
import blurBean from "./blur-bean-cropped.webp"
11-
import heroPhoto from "./hero-photo.jpeg"
127

13-
export function Hero() {
8+
export function Hero({
9+
pageName,
10+
year,
11+
children,
12+
bottom,
13+
}: {
14+
pageName?: string
15+
year: string
16+
children: React.ReactNode
17+
bottom?: React.ReactNode
18+
}) {
1419
return (
1520
<article className="gql-conf-navbar-strip relative isolate flex flex-col justify-center bg-pri-base text-neu-0 selection:bg-blk/40 before:bg-white/30 dark:bg-pri-darker dark:text-neu-900 dark:selection:bg-white/40 before:dark:bg-blk/40">
1621
<article className="relative">
1722
<HeroStripes />
1823
<div className="gql-conf-container mx-auto flex max-w-full flex-col gap-12 overflow-hidden p-4 pt-6 sm:p-8 sm:pt-12 md:gap-12 md:bg-left md:p-12 lg:px-24 lg:pb-16 lg:pt-24">
1924
<div className="flex gap-10 max-md:flex-col md:justify-between">
20-
<h1 className="flex flex-wrap gap-2 typography-d1">
21-
<span>GraphQLConf</span>
22-
<span className="text-sec-base">2025</span>
23-
</h1>
25+
{pageName ? (
26+
<div>
27+
<span className="text-sec-base typography-h3">
28+
GraphQLConf {year}
29+
</span>
30+
<h1 className="typography-d1">{pageName}</h1>
31+
</div>
32+
) : (
33+
<h1 className="flex flex-wrap gap-2 typography-d1">
34+
<span>GraphQLConf</span>
35+
<span className="text-sec-base">{year}</span>
36+
</h1>
37+
)}
2438
<div className="flex h-min items-center gap-4">
2539
<span className="whitespace-pre typography-body-sm">
2640
hosted by
2741
</span>
28-
<img
29-
src={graphqlFoundationWordmarkSvg.src}
30-
alt="GraphQL Foundation"
31-
width={128}
32-
height={34.877}
33-
/>
42+
<GraphQLFoundationWordmark width={128} height={34.877} />
3443
</div>
3544
</div>
3645

37-
<div className="flex flex-col gap-8">
38-
<HeroDateAndLocation />
39-
<Button className="md:w-fit" href={GET_TICKETS_LINK}>
40-
Get your tickets
41-
</Button>
42-
</div>
46+
<div className="flex flex-col gap-8">{children}</div>
4347
</div>
4448
</article>
45-
<div className="z-[2] bg-blk">
46-
<Image
47-
src={heroPhoto}
48-
width={1920}
49-
height={560}
50-
alt="five speakers at GraphQLConf 2024"
51-
className="mx-auto h-[560px] w-[1920px] max-w-full object-cover"
52-
/>
53-
</div>
49+
{bottom}
5450
</article>
5551
)
5652
}

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Venue } from "./venue"
44
import { FAQ } from "./faq"
55
import { CallForProposals } from "./components/call-for-proposals"
66
import { RegisterToday } from "./components/register-today"
7-
import { Hero } from "./components/hero"
7+
import { Hero, HeroDateAndLocation } from "./components/hero"
88
import WhatToExpectSection from "./components/what-to-expect"
99
import TopMindsSection from "./components/top-minds"
1010
import { GetYourTicket } from "./components/get-your-ticket"
@@ -16,6 +16,7 @@ import { CtaCardSection } from "./components/cta-card-section"
1616
import { Button } from "../_design-system/button"
1717
import { GET_TICKETS_LINK } from "./links"
1818
import { GalleryStrip } from "./components/gallery-strip"
19+
import { HeroImage } from "./components/hero/hero-image"
1920

2021
export const metadata: Metadata = {
2122
title: "GraphQLConf 2025 — Sept 08-10",
@@ -30,7 +31,12 @@ const HERO_MARQUEE_ITEMS = [
3031
export default function Page() {
3132
return (
3233
<main className="gql-all-anchors-focusable">
33-
<Hero />
34+
<Hero year="2025" bottom={<HeroImage />}>
35+
<HeroDateAndLocation />
36+
<Button className="md:w-fit" href={GET_TICKETS_LINK}>
37+
Get your tickets
38+
</Button>
39+
</Hero>
3440
<div className="gql-conf-container gql-conf-navbar-strip text-neu-900 before:bg-white/40 before:dark:bg-blk/30">
3541
<MarqueeRows
3642
variant="primary"

‎src/app/conf/2025/schedule/page.tsx

Lines changed: 9 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,9 @@ import { schedule } from "../_data"
44
import { ScheduleList } from "./_components/schedule-list"
55
import { filterCategories2024 } from "./_components/filter-categories"
66
import { eventsColors } from "../utils"
7-
import { HeroStripes } from "../components/hero"
87
import { Button } from "../../_design-system/button"
98
import { GET_TICKETS_LINK } from "../links"
10-
import graphqlFoundationWordmarkSvg from "../assets/graphql-foundation-wordmark.svg"
9+
import { Hero } from "../components/hero"
1110

1211
const year = "2025"
1312

@@ -18,27 +17,15 @@ export const metadata: Metadata = {
1817
export default function SchedulePage() {
1918
return (
2019
<main className="gql-all-anchors-focusable bg-neu-50 dark:bg-neu-0">
21-
<ScheduleHero year={year} />
20+
<Hero pageName="Schedule" year={year}>
21+
<div className="mt-[18px] flex gap-4">
22+
<Button href={GET_TICKETS_LINK}>Get your tickets</Button>
23+
<Button variant="tertiary" href={`/conf/${year}/speakers`}>
24+
See the speakers
25+
</Button>
26+
</div>
27+
</Hero>
2228
<div className="gql-conf-container gql-conf-section">
23-
<a
24-
href="https://graphqlconf2024.sched.com"
25-
target="_blank"
26-
rel="noreferrer"
27-
className="mb-8 block w-fit decoration-neu-400 typography-link"
28-
>
29-
Bookmark sessions & plan your days on Sched
30-
<svg
31-
fill="none"
32-
xmlns="http://www.w3.org/2000/svg"
33-
viewBox="0 0 24 24"
34-
className="m-1 mb-2 inline-block size-4"
35-
>
36-
<path
37-
d="M21 11V3h-8v2h4v2h-2v2h-2v2h-2v2H9v2h2v-2h2v-2h2V9h2V7h2v4h2zM11 5H3v16h16v-8h-2v6H5V7h6V5z"
38-
fill="currentColor"
39-
/>
40-
</svg>
41-
</a>
4229
<ScheduleList
4330
filterCategories={filterCategories2024}
4431
eventsColors={eventsColors}
@@ -49,37 +36,3 @@ export default function SchedulePage() {
4936
</main>
5037
)
5138
}
52-
53-
function ScheduleHero({ year }: { year: "2025" }) {
54-
return (
55-
<article className="gql-conf-navbar-strip relative isolate flex flex-col justify-center bg-pri-base text-neu-0 selection:bg-blk/40 before:bg-white/30 dark:bg-pri-darker dark:text-neu-900 dark:selection:bg-white/40 before:dark:bg-blk/40">
56-
<HeroStripes />
57-
<div className="gql-conf-container mx-auto flex max-w-full flex-col gap-12 overflow-hidden p-4 pt-6 sm:p-8 sm:pt-12 md:gap-12 md:bg-left md:p-12 lg:px-24 lg:pb-16 lg:pt-24">
58-
<div className="flex gap-10 max-md:flex-col md:justify-between">
59-
<div>
60-
<span className="text-sec-base typography-h3">
61-
GraphQLConf {year}
62-
</span>
63-
<h1 className="typography-d1">Schedule</h1>
64-
</div>
65-
<div className="flex h-min items-center gap-4">
66-
<span className="whitespace-pre typography-body-sm">hosted by</span>
67-
<img
68-
src={graphqlFoundationWordmarkSvg.src}
69-
alt="GraphQL Foundation"
70-
width={128}
71-
height={34.877}
72-
/>
73-
</div>
74-
</div>
75-
76-
<div className="flex flex-row gap-4 pt-[18px]">
77-
<Button href={GET_TICKETS_LINK}>Get your tickets</Button>
78-
<Button variant="secondary" href={`/conf/${year}/speakers`}>
79-
See the speakers
80-
</Button>
81-
</div>
82-
</div>
83-
</article>
84-
)
85-
}

‎src/app/conf/2025/speakers/page.tsx

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,35 @@
11
import { Metadata } from "next"
22
import { speakers } from "../_data"
33
import { Speaker } from "@/app/conf/_components/speakers/speaker"
4+
import { Hero } from "../components/hero"
5+
import { Button } from "../../_design-system/button"
6+
import { GET_TICKETS_LINK } from "../links"
47

58
export const metadata: Metadata = {
69
title: "Speakers",
710
}
811

912
export default function Page() {
13+
const year = "2025"
14+
1015
return (
11-
<div className='bg-[url("/img/conf/golden-gate-bridge.png")] bg-contain bg-no-repeat'>
12-
<div className="flex w-full justify-center">
13-
<div className="xs:px-0 prose px-2 py-20 md:container lg:prose-lg">
14-
<h1 className="text-white">GraphQLConf 2024 Speakers</h1>
15-
<p className="text-white sm:w-2/3">
16-
Meet the unique lineup of insightful speakers we've carefully
17-
chosen, who are primed to share their groundbreaking ideas and
18-
innovative practices in the realm of GraphQL at the conference.
19-
</p>
16+
<main className="gql-all-anchors-focusable bg-neu-50 dark:bg-neu-0">
17+
<Hero pageName="Speakers" year={year}>
18+
<div className="mt-[18px] flex gap-4">
19+
<Button href={GET_TICKETS_LINK}>Get your tickets</Button>
20+
<Button variant="tertiary" href={`/conf/${year}/schedule`}>
21+
See the schedule
22+
</Button>
2023
</div>
21-
</div>
24+
</Hero>
25+
2226
<div className="bg-white">
2327
<section className="conf-block container flex flex-wrap justify-center gap-8 lg:justify-between">
2428
{speakers.map(speaker => (
2529
<Speaker key={speaker.username} {...speaker} year="2024" />
2630
))}
2731
</section>
2832
</div>
29-
</div>
33+
</main>
3034
)
3135
}

0 commit comments

Comments
 (0)