diff --git a/gatsby-node.ts b/gatsby-node.ts index 60d2dbb63d..fc2f1ed73a 100644 --- a/gatsby-node.ts +++ b/gatsby-node.ts @@ -182,6 +182,13 @@ export const createPages: GatsbyNode["createPages"] = async ({ context: { schedule }, }) + createPage({ + path: "/conf", + component: path.resolve("./src/templates/conf.tsx"), + context: { + schedule: withSpeakerInfo(schedule.filter(session => session.speakers)), + }, + }) // Create schedule page createPage({ path: "/conf/sessions", diff --git a/package.json b/package.json index ce920501f6..135d8666c0 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "graphql": "16.6.0" }, "dependencies": { + "react-medium-image-zoom": "5.1.8", "@graphql-tools/schema": "10.0.0", "@headlessui/react": "^1.7.17", "@heroicons/react": "^2.0.18", diff --git a/src/components/Conf/About/index.tsx b/src/components/Conf/About/index.tsx index b182cd91f4..bceac19b80 100644 --- a/src/components/Conf/About/index.tsx +++ b/src/components/Conf/About/index.tsx @@ -1,5 +1,6 @@ -import { CheckCircledIcon } from "@radix-ui/react-icons" -import React from "react" +import React, { ComponentProps } from "react" +import ConfImage from "../../../../static/img/conf/Gallery/8.jpg" +import ConfImage2 from "../../../../static/img/conf/Gallery/9.jpg" const list = [ { title: "Cloud Engineering" }, @@ -14,61 +15,58 @@ const list = [ const whyAttend = [ { title: ( - - Learn about the latest developments - in GraphQL and related technologies, including GraphQL Core and beyond. - + <> + Learn about the latest developments in GraphQL and related + technologies, including GraphQL Core and beyond. + ), }, { title: ( - - Discover best practices and - real-world use cases through engaging presentations and panel - discussions. - + <> + Discover best practices and real-world use cases through engaging + presentations and panel discussions. + ), }, { title: ( - - Connect with leading companies that - are using GraphQL to transform their businesses and industries. - + <> + Connect with leading companies that are using GraphQL to + transform their businesses and industries. + ), }, { title: ( - - Build your skills and deepen your - understanding of GraphQL through workshops, tutorials, and code labs. - + <> + Build your skills and deepen your understanding of GraphQL + through workshops, tutorials, and code labs. + ), }, { title: ( - - Network with a diverse and vibrant - community of professionals who are passionate about GraphQL and its - potential. - + <> + Network with a diverse and vibrant community of professionals who + are passionate about GraphQL and its potential. + ), }, ] -const AboutSection = () => { +const classes = { + title: "md:text-center text-4xl font-bold mb-20 mt-0", +} + +export default function About() { return ( -
-
-

- About -

-

- GRAPHQLCONF | SEP 19 – 21 -

-
-
-

+

+
+

About

+
+
+

GraphQLConf – is the official conference produced by the GraphQL Foundation that brings together the global community of GraphQL developers, leaders and innovators to further the education, @@ -82,32 +80,40 @@ const AboutSection = () => { that have enabled the ease of adoption, implementation and management of GraphQL.

-

+

+ GraphQL Conf Image +
+ +
+ +
+

In the 3 days of workshops, keynotes and talks from the ecosystems, GraphQLConf aims to be the forum where we bring the community together to share and learn about what’s working and where we need to innovate & collaborate to help business succeed with GraphQL.

-
-
-

+

GraphQLConf is particularly relevant for engineers, architects, and managers involved in:

-
    +
      {list.map((item, index) => ( -
    • - +
    • + {item.title}
      • ))}
    -

    +

    It is also a great place for GraphQL contributors, service providers, and those exploring GraphQL to learn about the technology, build connections within the community, and increase @@ -115,97 +121,41 @@ const AboutSection = () => {

-

- Why Attend? -

-
-

- GraphQLConf is particularly relevant for engineers, architects, and - managers involved in: -

-
    - {whyAttend.map((item, index) => ( -
  • - - {item.title} -
    • - ))} -
-
+
+
+

Why Attend?

+
    + {whyAttend.map((item, index) => ( +
  • + + {item.title} +
    • + ))} +
- //
- //
- //
- //
- //
- //

- // About - //

- //

- // GRAPHQLCONF | SEP 19 – 21 - //

- - //
- //
- //
- //
- // logo-color - //
- //
- //
- //
- //

- // GraphQLConf is particularly relevant for engineers, architects, - // and managers involved in: - //

- //
    - // {list.map((item, index) => ( - //
  • - // - // - // - // - // - // - // {item.title} - // - // - //
    • - // ))} - //
- //

- // It is also a great place for GraphQL contributors, service - // providers, and those exploring GraphQL to learn about the - // technology, build connections within the community, and increase - // their knowledge about GraphQL powered application development. - //

- //

- // WHY ATTEND? - //

- - //
- //
- //
- //
- //
) } -export default AboutSection +function CheckIcon(props: ComponentProps<"svg">) { + return ( + + + + + ) +} diff --git a/src/components/Conf/Footer/index.tsx b/src/components/Conf/Footer/index.tsx index b0d3dc50bb..4ba5ee7be7 100644 --- a/src/components/Conf/Footer/index.tsx +++ b/src/components/Conf/Footer/index.tsx @@ -1,7 +1,6 @@ import React from "react" import SocialIcons from "../SocialIcons" import SponsorsConf from "../Sponsors" -import PartnersConf from "../Partners" const links = [ [ @@ -20,58 +19,47 @@ const links = [ ], ] -const FooterConf = ({ includeSponors = true, includePartners = true }) => { +const FooterConf = ({ includeSponors = true }) => { return ( <> {includeSponors && } - {includePartners && } -