Skip to content

Commit c6ab3ec

Browse files
dimaMachinadimaMachina
authored
fixes for conference page (graphql#1386)
1 parent 4c5f38b commit c6ab3ec

File tree

17 files changed

+288
-303
lines changed

17 files changed

+288
-303
lines changed

‎src/assets/css/_css/index.less

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ div.index {
1515
color: #fff;
1616
text-align: center;
1717
max-width: none;
18-
margin-top: 30px;
1918

2019
& > a {
2120
color: white;

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

Lines changed: 37 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,13 @@ import { CheckCircledIcon } from "@radix-ui/react-icons"
22
import React from "react"
33

44
const list = [
5-
{
6-
title: "Cloud Engineering",
7-
},
8-
{
9-
title: "Software Development",
10-
},
11-
{
12-
title: "Platform Engineering",
13-
},
14-
{
15-
title: "Data Engineering",
16-
},
17-
{
18-
title: "Technology Architecture",
19-
},
20-
{
21-
title: "Data Architecture",
22-
},
23-
{
24-
title: "Product Management",
25-
},
5+
{ title: "Cloud Engineering" },
6+
{ title: "Software Development" },
7+
{ title: "Platform Engineering" },
8+
{ title: "Data Engineering" },
9+
{ title: "Technology Architecture" },
10+
{ title: "Data Architecture" },
11+
{ title: "Product Management" },
2612
]
2713

2814
const whyAttend = [
@@ -35,31 +21,48 @@ const whyAttend = [
3521
),
3622
},
3723
{
38-
title: <p>
39-
<span className="font-bold">Discover</span> best practices and real-world use cases through engaging presentations and panel discussions.
40-
</p>
24+
title: (
25+
<p>
26+
<span className="font-bold">Discover</span> best practices and
27+
real-world use cases through engaging presentations and panel
28+
discussions.
29+
</p>
30+
),
4131
},
4232
{
43-
title:
44-
<p><span className="font-bold">Connect</span> with leading companies that are using GraphQL to transform their businesses and industries.</p>,
33+
title: (
34+
<p>
35+
<span className="font-bold">Connect</span> with leading companies that
36+
are using GraphQL to transform their businesses and industries.
37+
</p>
38+
),
4539
},
4640
{
47-
title:
41+
title: (
4842
<p>
49-
<span className="font-bold">Build</span> your skills and deepen your understanding of GraphQL through workshops, tutorials, and code labs.
50-
</p>,
43+
<span className="font-bold">Build</span> your skills and deepen your
44+
understanding of GraphQL through workshops, tutorials, and code labs.
45+
</p>
46+
),
5147
},
5248
{
53-
title:
54-
<p><span className="font-bold">Network</span> with a diverse and vibrant community of professionals who are passionate about GraphQL and its potential.</p>,
49+
title: (
50+
<p>
51+
<span className="font-bold">Network</span> with a diverse and vibrant
52+
community of professionals who are passionate about GraphQL and its
53+
potential.
54+
</p>
55+
),
5556
},
5657
]
5758

5859
const AboutSection = () => {
5960
return (
60-
<div className="w-full bg-white flex items-center align-center py-10">
61-
<div className="mx-auto w-3/4">
62-
<h1 className="text-center text-4xl text-[#0E031C] font-bold mt-10">About</h1>
61+
<div className="bg-white py-10">
62+
<div className="container">
63+
<h1 className="text-center text-4xl text-[#0E031C] font-bold mt-10">
64+
About
65+
</h1>
6366
<h3 className="text-center text-sm mt-4 mb-10">
6467
GRAPHQLCONF | SEP 19 – 21
6568
</h3>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const links = [
2424
const FooterConf = () => {
2525
return (
2626
<footer className="text-gray-600 bg-[#0E031C]">
27-
<div className="container px-5 py-24 mx-auto flex md:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
27+
<div className="container py-24 flex md:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
2828
<div className="w-64 shrink-0 md:mx-0 mx-auto text-center md:text-left">
2929
<a
3030
href="/conf/"
@@ -53,7 +53,7 @@ const FooterConf = () => {
5353
</div>
5454
</div>
5555
<div>
56-
<div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
56+
<div className="container py-4 flex flex-wrap flex-col sm:flex-row">
5757
<p className="text-white text-sm text-center sm:text-left">
5858
Copyright © {`${new Date().getFullYear()}`} The GraphQL Foundation.
5959
All rights reserved.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const links: LinkItem[] = [
2626
const HeaderConf = () => {
2727
return (
2828
<header className="bg-[#0E031C] gap-2 shadow-lg px-5 h-[70px]">
29-
<div className="container mx-auto flex items-center h-full gap-5">
29+
<div className="container flex items-center h-full gap-5">
3030
<a href="/conf/" className="shrink-0">
3131
<img
3232
src="/img/conf/graphql-conf-logo-simple.svg"

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

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -49,34 +49,33 @@ const includes = [
4949
const PricingConf = () => {
5050
return (
5151
<div id="register">
52-
<div className="bg-[#0E031C] w-full mt-10 mb-6">
52+
<div className="bg-[#0E031C] container mt-10 mb-6">
5353
<div className="flex flex-col text-center w-full">
5454
<h1 className="text-4xl text-white font-bold">
5555
Pricing &amp; Registration
5656
</h1>
5757
</div>
5858
<div className="max-w-[80ch] mx-auto">
59-
<div className="mx-auto w-full grid grid-rows-1 md:grid-cols-3 justify-center text-center gap-8 mt-8">
59+
<div className="flex max-md:flex-wrap gap-8 mt-8">
6060
{pricing.map((pricing, i) => (
61-
<div key={i}>
62-
<a
63-
href="https://cvent.me/4zbxz9"
64-
target="_blank"
65-
className="block mx-auto w-64 p-6 overflow-hidden bg-[#251C39] shadow-xl rounded-2xl focus:outline-none hover:drop-shadow-lg hover:scale-[102%] hover:no-underline focus:no-underline transition ease-in-out"
66-
>
67-
<div>
68-
<div className="text-center text-3xl text-white font-bold mb-2">
69-
{pricing.title}
70-
</div>
71-
<div className="text-white text-center text-sm">
72-
{pricing.date}
73-
</div>
74-
<div className="text-[#B48EF1] mt-4 p-4 rounded-full text-center text-4xl text-white font-extrabold">
75-
{pricing.price}
76-
</div>
61+
<a
62+
key={i}
63+
href="https://cvent.me/4zbxz9"
64+
target="_blank"
65+
className="block mx-auto w-64 p-6 overflow-hidden bg-[#251C39] shadow-xl rounded-2xl focus:outline-none hover:drop-shadow-lg hover:scale-[102%] hover:no-underline focus:no-underline transition ease-in-out"
66+
>
67+
<div>
68+
<div className="text-center text-3xl text-white font-bold mb-2">
69+
{pricing.title}
7770
</div>
78-
</a>
79-
</div>
71+
<div className="text-white text-center text-sm">
72+
{pricing.date}
73+
</div>
74+
<div className="text-[#B48EF1] mt-4 p-4 rounded-full text-center text-4xl font-extrabold">
75+
{pricing.price}
76+
</div>
77+
</div>
78+
</a>
8079
))}
8180
</div>
8281
<div className="w-full">
@@ -95,7 +94,9 @@ const PricingConf = () => {
9594
height={20}
9695
width={20}
9796
/>
98-
<p className="leading-relaxed text-base md:text-md">{include.title}</p>
97+
<p className="leading-relaxed text-base md:text-md">
98+
{include.title}
99+
</p>
99100
</div>
100101
))}
101102
</div>

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

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React from "react"
2-
import { AspectRatio } from '../../aspect-ratio'
2+
import { AspectRatio } from "../../aspect-ratio"
33

44
interface Image {
55
src: string
66
name: string
77
description: string
88
link: string
99
}
10+
1011
const images: Image[] = [
1112
{
1213
src: "https://events.linuxfoundation.org/wp-content/uploads/2022/12/San-Francisco-Golden-Gate-Bridge-unsplash.jpg",
@@ -43,12 +44,10 @@ const SFConf = () => {
4344
<h1 className="text-4xl text-center mb-5 text-[#0E031C] font-bold pb-6">
4445
About San Francisco
4546
</h1>
46-
<div className="flex flex-wrap w-full justify-center">
47-
{images.map((image, i) => (
48-
<div key={i} className="lg:w-1/5 sm:w-full mx-5 mb-5">
49-
<div className="max-w-sm">
50-
<AspectRatio title={image.name} src={image.src} href={image.link} />
51-
</div>
47+
<div className="container flex max-xl:flex-wrap justify-center gap-10 ">
48+
{images.map(image => (
49+
<div key={image.name} className="max-w-sm w-full">
50+
<AspectRatio title={image.name} src={image.src} href={image.link} />
5251
</div>
5352
))}
5453
</div>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,14 @@ const Days: Day[] = [
2121
const ScheduleGlanceConf = () => {
2222
return (
2323
<div id="schedule">
24-
<div className="bg-[#0E031C] max-w-[80ch] mt-20 mb-6 mx-auto">
24+
<div className="bg-[#0E031C] mt-20 mb-6 container">
2525
<div className="text-center mx-auto text-white">
2626
<h1 className="text-4xl text-white font-bold mb-8">Schedule</h1>
2727
</div>
28-
<div className="grid grid-rows-1 md:grid-cols-3 justify-center gap-8 mb-5">
28+
<div className="flex max-md:flex-wrap justify-center gap-8 mb-5">
2929
{Days.map((day, i) => (
3030
<div key={i}>
31-
<div className="h-full w-64 p-4 overflow-hidden bg-[#251C39] shadow-lg rounded-2xl">
31+
<div className="h-full p-4 overflow-hidden bg-[#251C39] shadow-lg rounded-2xl">
3232
<div className="p-4">
3333
<p className="text-2xl text-center text-white font-bold mb-2">
3434
{day.date}

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

Lines changed: 13 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,35 @@
11
import React from "react"
2+
import { ReactComponent as GitHubIcon } from "../../../../static/img/logos/github.svg"
3+
import { ReactComponent as DiscordIcon } from "../../../../static/img/logos/discord.svg"
4+
import { ReactComponent as TwitterIcon } from "../../../../static/img/logos/twitter.svg"
25

36
const SocialIcons = () => {
47
return (
58
<>
6-
<a
9+
<a
710
className="ml-5 mt-3 text-white cursor-pointer"
811
href="https://github.com/graphql"
912
target="_blank"
1013
>
11-
{/* Github */}
12-
<svg
13-
fill="currentColor"
14-
stroke="currentColor"
15-
strokeLinecap="round"
16-
strokeLinejoin="round"
17-
strokeWidth="0"
18-
className="w-5 h-5"
19-
viewBox="0 0 24 24"
20-
>
21-
<path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z" />
22-
</svg>
14+
<GitHubIcon className="h-5 w-auto" />
2315
</a>
2416
<a
2517
className="ml-5 mt-3 text-white cursor-pointer"
26-
href="https://discord.graphql.org/"
18+
href="https://discord.graphql.org/"
2719
target="_blank"
2820
>
29-
{/* Discord */}
30-
<svg
31-
fill="currentColor"
32-
stroke="currentColor"
33-
strokeLinecap="round"
34-
strokeLinejoin="round"
35-
strokeWidth="0"
36-
className="w-5 h-5"
37-
viewBox="0 0 24 24"
38-
>
39-
<path d="M19.98,5.69c-1.68-1.34-4.08-1.71-5.12-1.82h-0.04c-0.16,0-0.31,0.09-0.36,0.24c-0.09,0.23,0.05,0.48,0.28,0.52 c1.17,0.24,2.52,0.66,3.75,1.43c0.25,0.15,0.31,0.49,0.11,0.72c-0.16,0.18-0.43,0.2-0.64,0.08C15.56,5.38,12.58,5.3,12,5.3 S8.44,5.38,6.04,6.86C5.83,6.98,5.56,6.96,5.4,6.78C5.2,6.55,5.26,6.21,5.51,6.06c1.23-0.77,2.58-1.19,3.75-1.43 c0.23-0.04,0.37-0.29,0.28-0.52c-0.05-0.15-0.2-0.24-0.36-0.24H9.14C8.1,3.98,5.7,4.35,4.02,5.69C3.04,6.6,1.09,11.83,1,16.46 c0,0.31,0.08,0.62,0.26,0.87c1.17,1.65,3.71,2.64,5.63,2.78c0.29,0.02,0.57-0.11,0.74-0.35c0.01,0,0.01-0.01,0.02-0.02 c0.35-0.48,0.14-1.16-0.42-1.37c-1.6-0.59-2.42-1.29-2.47-1.34c-0.2-0.18-0.22-0.48-0.05-0.68c0.18-0.2,0.48-0.22,0.68-0.04 c0.03,0.02,2.25,1.91,6.61,1.91s6.58-1.89,6.61-1.91c0.2-0.18,0.5-0.16,0.68,0.04c0.17,0.2,0.15,0.5-0.05,0.68 c-0.05,0.05-0.87,0.75-2.47,1.34c-0.56,0.21-0.77,0.89-0.42,1.37c0.01,0.01,0.01,0.02,0.02,0.02c0.17,0.24,0.45,0.37,0.74,0.35 c1.92-0.14,4.46-1.13,5.63-2.78c0.18-0.25,0.26-0.56,0.26-0.87C22.91,11.83,20.96,6.6,19.98,5.69z M8.89,14.87 c-0.92,0-1.67-0.86-1.67-1.91c0-1.06,0.75-1.92,1.67-1.92c0.93,0,1.67,0.86,1.67,1.92C10.56,14.01,9.82,14.87,8.89,14.87z M15.11,14.87c-0.93,0-1.67-0.86-1.67-1.91c0-1.06,0.74-1.92,1.67-1.92c0.92,0,1.67,0.86,1.67,1.92 C16.78,14.01,16.03,14.87,15.11,14.87z" />
40-
</svg>
21+
<DiscordIcon className="h-5 w-auto" />
4122
</a>
4223
<a
4324
className="ml-5 mt-3 text-white cursor-pointer"
4425
href="https://twitter.com/graphql"
4526
target="_blank"
4627
>
47-
{/* Twitter */}
48-
<svg
49-
fill="currentColor"
50-
strokeLinecap="round"
51-
strokeLinejoin="round"
52-
strokeWidth="2"
53-
className="w-5 h-5"
54-
viewBox="0 0 24 24"
55-
>
56-
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
57-
</svg>
28+
<TwitterIcon className="h-5 w-auto" />
5829
</a>
5930
<a
6031
className="ml-5 mt-3 text-white cursor-pointer"
61-
href="https://www.linkedin.com/company/graphql-foundation/"
32+
href="https://linkedin.com/company/graphql-foundation"
6233
target="_blank"
6334
>
6435
{/* LinkedIn */}
@@ -75,12 +46,12 @@ const SocialIcons = () => {
7546
stroke="none"
7647
d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
7748
/>
78-
<circle cx="4" cy="4" r="2" stroke="none"/>
49+
<circle cx="4" cy="4" r="2" stroke="none" />
7950
</svg>
8051
</a>
8152
<a
8253
className="ml-5 mt-3 text-white cursor-pointer"
83-
href="https://www.youtube.com/@GraphQLFoundation"
54+
href="https://youtube.com/@GraphQLFoundation"
8455
target="_blank"
8556
>
8657
{/* YouTube */}
@@ -100,7 +71,7 @@ const SocialIcons = () => {
10071
</a>
10172
<a
10273
className="ml-5 mt-3 text-white cursor-pointer"
103-
href="https://www.facebook.com/groups/graphql.community/"
74+
href="https://facebook.com/groups/graphql.community"
10475
target="_blank"
10576
>
10677
{/* Facebook */}
@@ -112,7 +83,7 @@ const SocialIcons = () => {
11283
className="w-5 h-5"
11384
viewBox="0 0 24 24"
11485
>
115-
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/>
86+
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
11687
</svg>
11788
</a>
11889
</>

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

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -52,33 +52,27 @@ const SpeakersConf = () => {
5252
<div className="text-center mx-auto text-white">
5353
<h1 className="text-4xl text-white font-bold my-4">Speakers</h1>
5454
</div>
55-
<div className="flex justify-center items-center md:items-start flex-col md:flex-row flex-wrap gap-0 md:gap-4">
55+
<div className="flex justify-center items-start flex-wrap">
5656
{speakers.map((speaker, i) => (
5757
<div key={i} className="p-4 w-[220px]">
5858
<div className="h-full flex flex-col items-center text-center">
5959
<div className="relative">
6060
<img
6161
alt={speaker.name}
62-
className="shrink-0 rounded-full h-36 w-36 object-cover object-center"
6362
src={speaker.image}
63+
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">
6666
<a href={speaker.twitter} target="_blank">
67-
<TwitterLogoIcon
68-
className="text-white"
69-
width={20}
70-
height={20}
71-
/>
67+
<TwitterLogoIcon className="text-white h-5 w-5" />
7268
</a>
7369
</div>
7470
</div>
75-
<div className="w-full">
76-
<div className="text-lg text-white font-bold mt-3">
77-
{speaker.name}
78-
</div>
79-
<div className="text-gray-400 text-sm my-2">
80-
{speaker.title}
81-
</div>
71+
<div className="text-lg text-white font-bold mt-3">
72+
{speaker.name}
73+
</div>
74+
<div className="text-gray-400 text-sm my-2">
75+
{speaker.title}
8276
</div>
8377
</div>
8478
</div>

0 commit comments

Comments
 (0)