workshop page new section

src/assets/data/workshops/free-workshops.json

@@ -0,0 +1,75 @@
+[
+  {
+    "headline": "Free remote workshop - April 22",
+    "paragraph": "From half-day to full-day lessons, you'll learn in hours what our instructors have mastered over years. Friday, April 22. See the /about/faq/workshops section for answers to common questions."
+  },
+  {
+    "workshops": [
+      {
+        "name": "Jesse Martin",
+        "company": "Hasura",
+        "title": "Developer Relations",
+        "workshopTitle": "Build an opinionated, type-safe, production-ready, application-stack for all your projects",
+        "time": "10am Pacific",
+        "date": "Friday, April 22",
+        "length": "3 hours",
+        "level": "Intermediate/Advanced",
+        "headline": "A personal framework for nearly any type of application.",
+        "scheduleOneParagraphAbstract": "Spend more time writing React by spending less-time on the backend. With Hasura, we'll do just that.",
+        "paragraphOne": "Build powerful apps, simply, and unerstand all the moving parts - in three hours",
+        "bulletsOne": [
+          "Generated Backends",
+          "Generated SDKs.",
+          "Event hooks",
+          "Real-time subscriptions",
+          "Built-in CI/CD.",
+          "OSS at the Core."
+        ],
+        "paragraphTwo": "Design, build, and ship faster with tools that get out of your way.",
+        "bulletsTwo": [
+          "Thinking about the problem.",
+          "Architecting the API.",
+          "Generate the API.",
+          "Define the logic.",
+          "Generate the SDK.",
+          "Connect to React.",
+          "Deploy to the Cloud.",
+          "Rinse and Repeat."
+        ],
+        "paragraphThree": "In three hours you'll have a framework with swappable components that let you evolve, iterate, and ship products faster than ever before. We have lots of fun, make lots of jokes, and will undoubtedly 'move fast' and break plenty of things. But we'll learn along the way, and every question is welcome!",
+        "bio": "Jesse Martin is a product-focused devl-rel who specializes in the 'why' of building software. With experience across the entire stack and every department in the company, he provides an insightful take on modern software development.",
+        "photo": ""
+      },
+      {
+        "name": "Guillaume Bibeau-Laviolette (Gui)",
+        "company": "Vercel",
+        "title": "Solutions Architect",
+        "workshopTitle": "Basics of Next.js and optimizing for the web",
+        "time": "10:0am",
+        "date": "Friday, April 22",
+        "length": "6 hours",
+        "level": "Novice/Intermediate",
+        "headline": "Get hungry for performance",
+        "scheduleOneParagraphAbstract": "Learn how to build performant Next.js applications.",
+        "paragraphOne": "Next.js the React production framework. Learn how teams are creating and iterating products using Next.js, and how to optimize for the web.",
+        "bulletsOne": [
+          "Aurtomatic image optimization",
+          "Zero configuration to get started",
+          "Hybrid apps with static and server-side rendering",
+          "Easy to use API and data fetching",
+          "File-system based routing"
+        ],
+        "paragraphTwo": "Making a Next.js application is easy but to harness the full power there are a few things you need to know. We will dive into the different methods recommended by the Vercel team to keep your application performant.",
+        "bulletsTwo": [
+          "Being close to your users with Middleware",
+          "Adopting a static first mentality and combining data fetching strategies",
+          "Reusing layouts and components in different pages",
+          "Configure your API routes to be as fast as possible",
+          "Finding the best services for your application"
+        ],
+        "paragraphThree": "By using Next.js and Supabase we will learn how to go fast to production with your latest product idea!",
+        "bio": "Gui is a jack of all trades developper having worked everywhere along the stack. He specializes in building fast and performant web applications. He loves to contribute to the web3 ecosystem to ensure the best possible user experience."
+      }
+    ]
+  }
+]

src/components/Workshops/Section/WorkshopContent/WorkshopItem/WorkshopDetails/Header/index.css

@@ -22,7 +22,7 @@
 
 .workshop-item-details-time-hour {
   border: 1px solid var(--color-border-gray);
-  height: 64px;
+  min-height: 64px;
 }
 
 .workshop-item-details-time-tod {

src/components/Workshops/Section/WorkshopContent/WorkshopItem/WorkshopDetails/index.js

@@ -21,7 +21,7 @@ const WorkshopDetails = ({
       bulletsOne={bulletsOne}
       bulletsTwo={bulletsTwo}
     />
-    <WorkshopsDetailBuyTickets href={buyTicketsUri} />
+    { buyTicketsUri && <WorkshopsDetailBuyTickets href={buyTicketsUri}/> }
   </div>
 )
 

src/components/Workshops/Section/WorkshopContent/index.js

@@ -1,7 +1,9 @@
 import React from 'react'
 import WorkshopItem from './WorkshopItem'
 import workshopsData from '../../../../assets/data/workshops/workshops.json'
+import freeWorkshopsData from '../../../../assets/data/workshops/free-workshops.json'
 import SPEAKER_IMG_MAP from './image-map'
+import SPEAKER_IMG_PLACEHOLDER from '../../../../assets/images/Speakers/speaker-tbd.jpg'
 import './index.css'
 
 const WorkshopHeader = ({ title, description }) => (
@@ -28,11 +30,16 @@ const Workshops = ({ items }) => (
   </div>
 )
 
-const WorkshopContent = ({ header, workshops }) => (
+const WorkshopContent = ({ workshop, freeWorkshop }) => (
   <section className='workshop-content'>
-    <WorkshopHeader title={header.title} description={header.description} />
+    <WorkshopHeader title={workshop.header.title} description={workshop.header.description} />
     <Workshops
-      items={workshops}
+      items={workshop.workshops}
+    />
+    {/* Free workshop */}
+    <WorkshopHeader title={freeWorkshop.header.title} description={freeWorkshop.header.description} />
+    <Workshops
+      items={freeWorkshop.workshops}
     />
   </section>
 )
@@ -49,15 +56,20 @@ const getWorkshopsData = (jsonData) => {
       title: head.headline,
       description: head.paragraph || []
     },
-    workshops: tail.map(item => ({
-      ...item,
-      photo: SPEAKER_IMG_MAP[item.name.toLowerCase().split(' ').join('-')]
-    }))
+    workshops: tail.map(item => {
+      const imageSpeaker = SPEAKER_IMG_MAP[item.name.toLowerCase().split(' ').join('-')] || SPEAKER_IMG_PLACEHOLDER
+
+      return {
+        ...item,
+        photo: imageSpeaker
+      }
+    })
   }
 }
 
 WorkshopContent.defaultProps = {
-  ...getWorkshopsData(workshopsData)
+  workshop: { ...getWorkshopsData(workshopsData) },
+  freeWorkshop: { ...getWorkshopsData(freeWorkshopsData) }
 }
 
 export default WorkshopContent