Skip to content

Commit c05afc3

Browse files
leebyronleebyron
authored
Polish on conf site (#1390)
* Colocate location, reorder content * fix mobile layout * main page polish, mobile layout fix * fix faq/speak * button style * fix buttons * fix icons
1 parent 60b0062 commit c05afc3

File tree

13 files changed

+104
-107
lines changed

13 files changed

+104
-107
lines changed

‎src/components/Conf/About/index.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,44 +14,44 @@ const list = [
1414
const whyAttend = [
1515
{
1616
title: (
17-
<p>
17+
<span>
1818
<span className="font-bold">Learn</span> about the latest developments
1919
in GraphQL and related technologies, including GraphQL Core and beyond.
20-
</p>
20+
</span>
2121
),
2222
},
2323
{
2424
title: (
25-
<p>
25+
<span>
2626
<span className="font-bold">Discover</span> best practices and
2727
real-world use cases through engaging presentations and panel
2828
discussions.
29-
</p>
29+
</span>
3030
),
3131
},
3232
{
3333
title: (
34-
<p>
34+
<span>
3535
<span className="font-bold">Connect</span> with leading companies that
3636
are using GraphQL to transform their businesses and industries.
37-
</p>
37+
</span>
3838
),
3939
},
4040
{
4141
title: (
42-
<p>
42+
<span>
4343
<span className="font-bold">Build</span> your skills and deepen your
4444
understanding of GraphQL through workshops, tutorials, and code labs.
45-
</p>
45+
</span>
4646
),
4747
},
4848
{
4949
title: (
50-
<p>
50+
<span>
5151
<span className="font-bold">Network</span> with a diverse and vibrant
5252
community of professionals who are passionate about GraphQL and its
5353
potential.
54-
</p>
54+
</span>
5555
),
5656
},
5757
]

‎src/components/Conf/Button/index.tsx‎

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,17 @@ interface Props {
1010

1111
const ButtonConf = ({ text, href, target, className, onWhiteBg }: Props) => {
1212
return (
13-
<button
13+
<a
1414
className={
15-
`transition ease-in-out no-underline inline-flex text-center ${
16-
onWhiteBg ? "bg-[#0e031c]" : "bg-white"
17-
} border-0 py-2 px-6 focus:outline-none hover:drop-shadow-md hover:scale-105 rounded text-lg ` +
18-
(className ?? "")
15+
`block cursor-pointer transition ease-in-out no-underline inline-flex text-center border-0 py-2 px-6 no-underline hover:no-underline focus:outline-none hover:drop-shadow-md hover:[transform:scale(1.05)] rounded text-sm sm:text-base font-medium whitespace-nowrap ${
16+
onWhiteBg ? "bg-[#B48EF1] text-white" : "bg-white text-black"
17+
} ${className ?? ""}`
1918
}
19+
href={href}
20+
target={target}
2021
>
21-
<a
22-
className={`text-sm sm:text-base font-medium whitespace-nowrap cursor-pointer ${
23-
onWhiteBg ? "text-white" : "text-black"
24-
} no-underline hover:no-underline`}
25-
href={href}
26-
target={target}
27-
>
28-
{text}
29-
</a>
30-
</button>
22+
{text}
23+
</a>
3124
)
3225
}
3326

‎src/components/Conf/Footer/index.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,22 @@ import SocialIcons from "../SocialIcons"
33

44
const links = [
55
[
6-
{ text: "GraphQLConf", href: "/conf/" },
6+
{ text: "Attend", href: "/conf/#attend" },
77
{ text: "Speakers", href: "/conf/#speakers" },
88
{ text: "Schedule", href: "/conf/#schedule" },
99
{ text: "Location", href: "/conf/#location" },
1010
],
1111
[
12-
{ text: "Register", href: "/conf/#register" },
1312
{ text: "Speak", href: "/conf/speak/" },
1413
{ text: "Sponsor", href: "/conf/sponsor/" },
14+
{ text: "FAQ", href: "/conf/faq/" },
15+
{ text: "Contact Us", href: "/conf/faq/#contact" },
1516
],
1617
[
17-
{ text: "FAQ", href: "/conf/faq/" },
18+
{ text: "GraphQL", href: "/" },
19+
{ text: "GraphQL Foundation", href: "/foundation/" },
1820
{ text: "Code of Conduct", href: "/conf/faq/#codeofconduct" },
1921
{ text: "Diversity & Inclusion", href: "/conf/faq/#dni" },
20-
{ text: "Contact Us", href: "/conf/faq/#contact" },
2122
],
2223
]
2324

‎src/components/Conf/Header/index.tsx‎

Lines changed: 8 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,35 +2,26 @@ import React from "react"
22
import ButtonConf from "../Button"
33

44
interface LinkItem {
5-
section: string
65
text: string
76
href: string
87
noMobile?: boolean
98
}
109

1110
const links: LinkItem[] = [
12-
{
13-
section: "Register",
14-
text: "Register",
15-
href: "/conf/#register",
16-
},
17-
{ section: "Speak", text: "Speak", href: "/conf/speak/" },
18-
{
19-
section: "Sponsor",
20-
text: "Sponsor",
21-
href: "/conf/sponsor/",
22-
},
23-
{ section: "FAQ", text: "FAQ", href: "/conf/faq/" },
11+
{ text: "Attend", href: "/conf/#attend" },
12+
{ text: "Speak", href: "/conf/speak/" },
13+
{ text: "Sponsor", href: "/conf/sponsor/" },
14+
{ text: "FAQ", href: "/conf/faq/" },
2415
]
2516

2617
const HeaderConf = () => {
2718
return (
2819
<header className="bg-[#0E031C] gap-2 shadow-lg px-5 h-[70px]">
29-
<div className="container flex items-center h-full gap-5">
30-
<a href="/conf/" className="shrink-0">
20+
<div className="container flex items-center h-full gap-5 max-sm:justify-center">
21+
<a href="/conf/" className="shrink-0 max-sm:hidden">
3122
<img
3223
src="/img/conf/graphql-conf-logo-simple.svg"
33-
className="max-md:w-24"
24+
className="mt-[5px] mr-2 max-md:w-24"
3425
/>
3526
</a>
3627
{links.map(link => (
@@ -43,7 +34,7 @@ const HeaderConf = () => {
4334
</a>
4435
))}
4536
<ButtonConf
46-
text="Register Now!"
37+
text="Buy a Ticket!"
4738
href="https://cvent.me/4zbxz9"
4839
target="_blank"
4940
className="ml-auto max-sm:hidden"

‎src/components/Conf/Pricing/index.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react"
22
import { CheckCircledIcon } from "@radix-ui/react-icons"
3+
import ButtonConf from "../Button"
34

45
interface Pricing {
56
title: string
@@ -48,14 +49,12 @@ const includes = [
4849

4950
const PricingConf = () => {
5051
return (
51-
<div id="register">
52+
<div id="attend">
5253
<div className="bg-[#0E031C] container mt-10 mb-6">
5354
<div className="flex flex-col text-center w-full">
54-
<h1 className="text-4xl text-white font-bold">
55-
Pricing &amp; Registration
56-
</h1>
55+
<h1 className="text-4xl text-white font-bold">Attend</h1>
5756
</div>
58-
<div className="max-w-[80ch] mx-auto">
57+
<div className="mx-auto">
5958
<div className="flex max-md:flex-wrap gap-8 mt-8">
6059
{pricing.map((pricing, i) => (
6160
<a
@@ -78,12 +77,19 @@ const PricingConf = () => {
7877
</a>
7978
))}
8079
</div>
80+
<div className="my-8 flex justify-center">
81+
<ButtonConf
82+
text="Buy a Ticket!"
83+
href="https://cvent.me/4zbxz9"
84+
target="_blank"
85+
/>
86+
</div>
8187
<div className="w-full">
8288
<div className="mx-auto flex flex-col items-center text-center">
8389
<h3 className="sm:text-2xl text-xl font-medium text-white mt-6 mb-2">
8490
What's included?
8591
</h3>
86-
<div className="grid grid-cols-2 w-[fit-content]">
92+
<div className="md:grid md:grid-cols-2 w-[fit-content]">
8793
{includes.map((include, i) => (
8894
<div
8995
key={i}

‎src/components/Conf/SF/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,9 @@ const images: Image[] = [
4040
]
4141
const SFConf = () => {
4242
return (
43-
<div className="bg-white pb-10 pt-8">
44-
<h1 className="text-4xl text-center mb-5 text-[#0E031C] font-bold pb-6">
45-
About San Francisco
43+
<div className="pb-10 pt-8">
44+
<h1 className="text-4xl text-white text-center mb-5 text-[#0E031C] font-bold pb-6">
45+
About San Francisco Bay Area
4646
</h1>
4747
<div className="flex flex-wrap w-full justify-center">
4848
{images.map((image, i) => (

‎src/components/Conf/Schedule/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,12 @@ const ScheduleGlanceConf = () => {
2929
<div className="mx-auto w-full grid grid-rows-1 md:grid-cols-3 justify-center gap-8 mb-5">
3030
{Days.map((day, i) => (
3131
<div key={i}>
32-
<div className="h-full mx-auto w-64 p-4 overflow-hidden bg-[#251C39] shadow-lg rounded-2xl">
32+
<div className="h-full mx-auto w-64 px-4 overflow-hidden bg-[#251C39] shadow-lg rounded-2xl">
3333
<div className="p-4">
3434
<p className="text-2xl text-center text-white font-bold mb-2">
3535
{day.date}
3636
</p>
37-
<ul className="list-disc pl-6 marker:text-[#B48EF1]">
37+
<ul className="list-disc pl-0 marker:text-[#B48EF1]">
3838
{day.list.map((item, i) => (
3939
<li key={i} className="text-white mb-2">
4040
{item}

‎src/components/Conf/Section/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ interface Props {
1010
const SectionConf = ({ id, title, children }: Props): JSX.Element => (
1111
<div key={id} id={id}>
1212
<h2>
13-
<a href={`#${id}`}>{title}</a>
13+
<a href={`#${id}`} className="no-underline">{title}</a>
1414
</h2>
1515
{children}
1616
</div>

‎src/components/Conf/Speakers/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ const SpeakersConf = () => {
6363
className="shrink-0 rounded-full h-36 w-36 object-cover object-center"
6464
/>
6565
<div className="bg-[#55ACEF] h-8 w-8 flex items-center justify-center rounded-full absolute bottom-0 right-0">
66-
<a href={speaker.twitter} target="_blank">
66+
<a href={speaker.twitter} target="_blank" className="h-[20px]">
6767
<TwitterLogoIcon className="text-white h-5 w-5" />
6868
</a>
6969
</div>

‎src/components/Conf/Venue/index.tsx‎

Lines changed: 46 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -6,36 +6,46 @@ import { ReactComponent as ParkingIcon } from "../../../../static/img/conf/parki
66
const VenueConf = () => {
77
return (
88
<div id="location">
9-
<h1 className="text-4xl text-white font-bold mt-8 mb-6 mx-auto text-center">
9+
<h1 className="text-4xl text-white font-bold mb-8 mx-auto text-center">
1010
Location &amp; Venue
1111
</h1>
12+
<div className="container">
13+
<p className="max-w-prose mx-auto text-white">
14+
GraphQLConf 2023 is hosted in the San Francisco Bay Area, where
15+
GraphQL was first created. It's hosted at the{" "}
16+
<a
17+
href="https://www.hyatt.com/en-US/hotel/california/hyatt-regency-san-francisco-airport/sfobu"
18+
target="_blank"
19+
className="font-bold"
20+
>
21+
Hyatt Regency SFO
22+
</a>{" "}
23+
hotel in Burlingame, CA.
24+
</p>
25+
<img
26+
src="/img/conf/sf-hotel-image.png"
27+
className="object-cover w-[300px] h-[180px] md:w-[500px] md:h-[300px] rounded-xl my-8 block mx-auto"
28+
/>
29+
</div>
1230
<div className="container flex flex-wrap">
1331
<div className="sm:w-full grid grid-rows-1 md:grid-cols-2 gap-20">
1432
<div>
1533
<h3 className="sm:text-2xl text-xl font-medium text-white mt-6 mb-4">
16-
Hotel Information
34+
Venue Information
1735
</h3>
18-
<p className="leading-relaxed mb-3 text-white text-base">
19-
Please note, rooms will most likely sell out in advance of the
20-
room block close dates listed below. We encourage you to book
21-
early to secure a room at the conference rate
22-
<br />
23-
<br />
24-
<span className="font-bold">Important:</span> The Linux Foundation
25-
will never reach out to attendees by phone to make hotel
26-
reservations for our conferences. Please be advised that the most
27-
secure way to book in our discounted room block is by using the
28-
direct booking link provided below or by calling the hotel
29-
directly. If you receive a phone call or email from someone
30-
claiming to be with The Linux Foundation or the hotel and they
31-
attempt to sell you a hotel room, please email us at{" "}
36+
<p>
3237
<a
38+
target="_blank"
3339
className="font-bold text-[#B48EF1]"
34-
href="mailto:[email protected]"
40+
href="https://www.hyatt.com/en-US/hotel/california/hyatt-regency-san-francisco-airport/sfobu"
3541
>
36-
[email protected]
42+
Hyatt Regency SFO
43+
</a>
44+
</p>
45+
<p>
46+
<a target="_blank" href="https://goo.gl/maps/czbwwNL28YYYpw8W8">
47+
1333 Old Bayshore Hwy Burlingame, CA 94010
3748
</a>
38-
.
3949
</p>
4050
<h3 className="sm:text-2xl text-xl font-medium text-white mt-6 mb-4">
4151
Welcome to all
@@ -67,38 +77,34 @@ const VenueConf = () => {
6777
</div>
6878
<div>
6979
<h3 className="sm:text-2xl text-xl font-medium text-white mt-6 mb-4">
70-
Venue Information
80+
Hotel Information
7181
</h3>
72-
<p className="max-w-prose mx-auto text-white">
73-
GraphQLConf 2023 is hosted in the San Francisco Bay Area, where
74-
GraphQL was first created, at the{" "}
75-
<a
76-
href="https://www.hyatt.com/en-US/hotel/california/hyatt-regency-san-francisco-airport/sfobu"
77-
target="_blank"
78-
className="font-bold"
79-
>
80-
Hyatt Regency SFO
81-
</a>
82-
.
82+
<p className="leading-relaxed mb-3 text-white text-base">
83+
Please note, rooms will most likely sell out in advance of the
84+
room block close dates listed below. We encourage you to book
85+
early to secure a room at the conference rate
8386
<br />
8487
<br />
88+
<span className="font-bold">Important:</span> The Linux Foundation
89+
will never reach out to attendees by phone to make hotel
90+
reservations for our conferences. Please be advised that the most
91+
secure way to book in our discounted room block is by using the
92+
direct booking link provided below or by calling the hotel
93+
directly. If you receive a phone call or email from someone
94+
claiming to be with The Linux Foundation or the hotel and they
95+
attempt to sell you a hotel room, please email us at{" "}
8596
<a
86-
target="_blank"
8797
className="font-bold text-[#B48EF1]"
88-
href="https://www.hyatt.com/en-US/hotel/california/hyatt-regency-san-francisco-airport/sfobu"
98+
href="mailto:[email protected]"
8999
>
90-
HYATT REGENCY SAN FRANCISCO AIRPORT
100+
[email protected]
91101
</a>
92-
<p>1333 Old Bayshore Hwy Burlingame, CA 94010</p>
93-
<img
94-
src="/img/conf/sf-hotel-image.png"
95-
className="object-cover w-[500px] h-[300px] rounded-xl mt-8"
96-
/>
102+
.
97103
</p>
98104
</div>
99105
</div>
100106
</div>
101-
<div className="container flex max-lg:flex-col w-full gap-14 pt-16 pb-24">
107+
<div className="container flex max-lg:flex-col w-full gap-14 pt-16">
102108
{[
103109
{
104110
title: "Public Transportation",

0 commit comments

Comments
 (0)