Skip to content

Commit 021a5d1

Browse files
dimaMachinadimaMachina
authored
post event landing (graphql#1584)
1 parent 42cf16e commit 021a5d1

File tree

157 files changed

+1222
-12633
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

157 files changed

+1222
-12633
lines changed

‎gatsby-node.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,13 @@ export const createPages: GatsbyNode["createPages"] = async ({
182182
context: { schedule },
183183
})
184184

185+
createPage({
186+
path: "/conf",
187+
component: path.resolve("./src/templates/conf.tsx"),
188+
context: {
189+
schedule: withSpeakerInfo(schedule.filter(session => session.speakers)),
190+
},
191+
})
185192
// Create schedule page
186193
createPage({
187194
path: "/conf/sessions",

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"graphql": "16.6.0"
1818
},
1919
"dependencies": {
20+
"react-medium-image-zoom": "5.1.8",
2021
"@graphql-tools/schema": "10.0.0",
2122
"@headlessui/react": "^1.7.17",
2223
"@heroicons/react": "^2.0.18",

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

Lines changed: 87 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { CheckCircledIcon } from "@radix-ui/react-icons"
2-
import React from "react"
1+
import React, { ComponentProps } from "react"
2+
import ConfImage from "../../../../static/img/conf/Gallery/8.jpg"
3+
import ConfImage2 from "../../../../static/img/conf/Gallery/9.jpg"
34

45
const list = [
56
{ title: "Cloud Engineering" },
@@ -14,61 +15,58 @@ const list = [
1415
const whyAttend = [
1516
{
1617
title: (
17-
<span>
18-
<span className="font-bold">Learn</span> about the latest developments
19-
in GraphQL and related technologies, including GraphQL Core and beyond.
20-
</span>
18+
<>
19+
<b>Learn</b> about the latest developments in GraphQL and related
20+
technologies, including GraphQL Core and beyond.
21+
</>
2122
),
2223
},
2324
{
2425
title: (
25-
<span>
26-
<span className="font-bold">Discover</span> best practices and
27-
real-world use cases through engaging presentations and panel
28-
discussions.
29-
</span>
26+
<>
27+
<b>Discover</b> best practices and real-world use cases through engaging
28+
presentations and panel discussions.
29+
</>
3030
),
3131
},
3232
{
3333
title: (
34-
<span>
35-
<span className="font-bold">Connect</span> with leading companies that
36-
are using GraphQL to transform their businesses and industries.
37-
</span>
34+
<>
35+
<b>Connect</b> with leading companies that are using GraphQL to
36+
transform their businesses and industries.
37+
</>
3838
),
3939
},
4040
{
4141
title: (
42-
<span>
43-
<span className="font-bold">Build</span> your skills and deepen your
44-
understanding of GraphQL through workshops, tutorials, and code labs.
45-
</span>
42+
<>
43+
<b>Build</b> your skills and deepen your understanding of GraphQL
44+
through workshops, tutorials, and code labs.
45+
</>
4646
),
4747
},
4848
{
4949
title: (
50-
<span>
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-
</span>
50+
<>
51+
<b>Network</b> with a diverse and vibrant community of professionals who
52+
are passionate about GraphQL and its potential.
53+
</>
5554
),
5655
},
5756
]
5857

59-
const AboutSection = () => {
58+
const classes = {
59+
title: "md:text-center text-4xl font-bold mb-20 mt-0",
60+
}
61+
62+
export default function About() {
6063
return (
61-
<div className="bg-white py-10">
62-
<div className="container">
63-
<h1 className="text-center text-4xl text-[#171E26] font-bold mt-10">
64-
About
65-
</h1>
66-
<h3 className="text-center text-sm mt-4 mb-10">
67-
GRAPHQLCONF | SEP 19 – 21
68-
</h3>
69-
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 w-full">
70-
<div className="text-base leading-8 text-gray-700 flex gap-10 flex-col">
71-
<p>
64+
<div className="bg-gray-100">
65+
<div className="container py-24">
66+
<h2 className={classes.title}>About</h2>
67+
<div className="grid lg:grid-cols-2 gap-14 xl:gap-28 mb-20">
68+
<div>
69+
<p className="mt-0">
7270
GraphQLConf – is the official conference produced by the GraphQL
7371
Foundation that brings together the global community of GraphQL
7472
developers, leaders and innovators to further the education,
@@ -82,130 +80,82 @@ const AboutSection = () => {
8280
that have enabled the ease of adoption, implementation and
8381
management of GraphQL.
8482
</p>
85-
<p>
83+
</div>
84+
<img
85+
src={ConfImage}
86+
className="rounded-md w-full object-cover aspect-video"
87+
alt="GraphQL Conf Image"
88+
/>
89+
</div>
90+
91+
<div className="grid lg:grid-cols-2 gap-14 xl:gap-28 reverse">
92+
<img
93+
src={ConfImage2}
94+
className="max-lg:order-2 rounded-md w-full object-cover aspect-square"
95+
/>
96+
<div>
97+
<p className="mt-0">
8698
In the 3 days of workshops, keynotes and talks from the
8799
ecosystems, GraphQLConf aims to be the forum where we bring the
88100
community together to share and learn about what’s working and
89101
where we need to innovate & collaborate to help business succeed
90102
with GraphQL.
91103
</p>
92-
</div>
93-
<div>
94-
<p className="font-bold">
104+
<p className="font-bold mt-14">
95105
GraphQLConf is particularly relevant for engineers, architects,
96106
and managers involved in:
97107
</p>
98-
<ul role="list" className="mt-8 space-y-4">
108+
<ul className="grid md:grid-cols-2 ml-0 mb-14">
99109
{list.map((item, index) => (
100-
<li key={index} className="flex gap-2 items-center">
101-
<CheckCircledIcon
102-
className="text-[--rhodamine]"
103-
height={20}
104-
width={20}
105-
/>
110+
<li key={index} className="flex gap-2 md:items-center">
111+
<CheckIcon className="shrink-0 text-[--rhodamine]" />
106112
<span className="font-bold">{item.title}</span>
107113
</li>
108114
))}
109115
</ul>
110-
<p className="mt-8">
116+
<p>
111117
It is also a great place for GraphQL contributors, service
112118
providers, and those exploring GraphQL to learn about the
113119
technology, build connections within the community, and increase
114120
their knowledge about GraphQL powered application development.
115121
</p>
116122
</div>
117123
</div>
118-
<h1 className="text-center text-4xl text-[#171E26] font-bold my-8">
119-
Why Attend?
120-
</h1>
121-
<div className="w-full md:w-1/2 mx-auto">
122-
<p className="font-bold">
123-
GraphQLConf is particularly relevant for engineers, architects, and
124-
managers involved in:
125-
</p>
126-
<ul role="list" className="mt-8 space-y-4">
127-
{whyAttend.map((item, index) => (
128-
<li key={index} className="flex gap-2">
129-
<CheckCircledIcon
130-
className="text-[--rhodamine]"
131-
height={30}
132-
width={40}
133-
/>
134-
{item.title}
135-
</li>
136-
))}
137-
</ul>
138-
</div>
124+
</div>
125+
<div className="container py-24">
126+
<h2 className={classes.title}>Why Attend?</h2>
127+
<ul
128+
role="list"
129+
className="grid sm:grid-cols-2 md:grid-cols-3 ml-0 gap-5 lg:gap-14"
130+
>
131+
{whyAttend.map((item, index) => (
132+
<li key={index} className="flex gap-4">
133+
<CheckIcon className="text-[--rhodamine] shrink-0" />
134+
<span>{item.title}</span>
135+
</li>
136+
))}
137+
</ul>
139138
</div>
140139
</div>
141-
// <div className="bg-white relative isolate overflow-hidden px-6 py-24 sm:py-32 lg:overflow-visible lg:px-0">
142-
// <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-start lg:gap-y-10">
143-
// <div className="lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:mx-auto lg:grid lg:w-full lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8">
144-
// <div className="lg:pr-4">
145-
// <div className="lg:max-w-lg">
146-
// <p className="text-2xl font-bold leading-7 text-[#862e69]">
147-
// About
148-
// </p>
149-
// <h1 className=" text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
150-
// GRAPHQLCONF | SEP 19 – 21
151-
// </h1>
152-
153-
// </div>
154-
// </div>
155-
// </div>
156-
// <div className="-ml-12 -mt-12 p-12 lg:sticky lg:top-4 lg:col-start-2 lg:row-span-2 lg:row-start-1 lg:overflow-hidden">
157-
// <img
158-
// className="w-[36rem] max-w-none rounded-xl sm:w-[36rem]"
159-
// src="/img/conf/graphql-conf-footer.png"
160-
// alt="logo-color"
161-
// />
162-
// </div>
163-
// <div className="lg:col-span-2 lg:col-start-1 lg:row-start-2 lg:mx-auto lg:grid lg:w-full lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8">
164-
// <div className="lg:pr-4">
165-
// <div className="max-w-xl text-base leading-7 text-gray-700 lg:max-w-lg">
166-
// <p>
167-
// GraphQLConf is particularly relevant for engineers, architects,
168-
// and managers involved in:
169-
// </p>
170-
// <ul role="list" className="mt-8 space-y-8 text-gray-600">
171-
// {list.map((item, index) => (
172-
// <li key={index} className="flex gap-x-3">
173-
// <svg
174-
// fill="none"
175-
// stroke="currentColor"
176-
// stroke-linecap="round"
177-
// stroke-linejoin="round"
178-
// stroke-width="3"
179-
// className="text-[#862e69] w-6 h-6 flex-shrink-0 mr-4"
180-
// viewBox="0 0 24 24"
181-
// >
182-
// <path d="M22 11.08V12a10 10 0 11-5.93-9.14"></path>
183-
// <path d="M22 4L12 14.01l-3-3"></path>
184-
// </svg>
185-
// <span>
186-
// <strong className="font-semibold text-gray-900">
187-
// {item.title}
188-
// </strong>
189-
// </span>
190-
// </li>
191-
// ))}
192-
// </ul>
193-
// <p className="mt-8">
194-
// It is also a great place for GraphQL contributors, service
195-
// providers, and those exploring GraphQL to learn about the
196-
// technology, build connections within the community, and increase
197-
// their knowledge about GraphQL powered application development.
198-
// </p>
199-
// <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900">
200-
// WHY ATTEND?
201-
// </h2>
202-
203-
// </div>
204-
// </div>
205-
// </div>
206-
// </div>
207-
// </div>
208140
)
209141
}
210142

211-
export default AboutSection
143+
function CheckIcon(props: ComponentProps<"svg">) {
144+
return (
145+
<svg
146+
width="26"
147+
height="26"
148+
viewBox="0 0 26 26"
149+
fill="currentColor"
150+
xmlns="http://www.w3.org/2000/svg"
151+
{...props}
152+
>
153+
<circle cx="12.6743" cy="12.7295" r="12.6743" />
154+
<path
155+
d="M7.34351 12.3985L10.8974 16.1893L18.0051 9.26965"
156+
stroke="white"
157+
strokeWidth="3"
158+
/>
159+
</svg>
160+
)
161+
}

0 commit comments

Comments
 (0)