Devcon 7 - Design updates

app/[lang]/devcon-7/page.tsx

@@ -1,17 +1,17 @@
-import React from "react"
-import { Metadata } from "next"
+import React from 'react'
+import { Metadata } from 'next'
 
-import { Devcon7Booths } from "./sections/Devcon7Booths"
-import { Devcon7Header } from "./sections/Devcon7Header"
-import { Devcon7Section } from "./sections/Devcon7Section"
+import { Devcon7Booths } from './sections/Devcon7Booths'
+import { Devcon7Header } from './sections/Devcon7Header'
+import { Devcon7Section } from './sections/Devcon7Section'
 
 export const metadata: Metadata = {
-  title: "Devon 7",
-  description: "PSE x Devcon 7 Southeast Asia",
+  title: 'Devon 7',
+  description: 'PSE x Devcon 7 Southeast Asia',
   openGraph: {
     images: [
       {
-        url: "/devcon-7-cover.png",
+        url: '/devcon-7-cover.png',
         width: 1200,
         height: 630,
       },
@@ -25,7 +25,6 @@ export default async function DevconPage() {
       <div className="flex flex-col lg:pb-[120px]">
         <Devcon7Header />
         <div className="flex flex-col gap-10 lg:gap-14 pt-8 lg:pt-[60px] mx-auto max-w-[950px]">
-          <Devcon7Booths />
           <Devcon7Section />
         </div>
       </div>

app/[lang]/devcon-7/sections/Devcon7Section.tsx

@@ -1,27 +1,34 @@
-"use client"
+'use client'
 
-import { useState } from "react"
-import Link from "next/link"
-import { events } from "@/data/events/devcon-7"
-import { cva } from "class-variance-authority"
+import { useState } from 'react'
+import Link from 'next/link'
+import { events } from '@/data/events/devcon-7'
+import { cva } from 'class-variance-authority'
 
-import { cn } from "@/lib/utils"
-import { Icons } from "@/components/icons"
+import { cn } from '@/lib/utils'
+import { Icons } from '@/components/icons'
 
-const tableSection = cva("lg:grid lg:grid-cols-[200px_1fr_160px_20px] lg:gap-8")
+const tableSection = cva('lg:grid lg:grid-cols-[200px_1fr_160px_20px] lg:gap-8')
 const tableSectionTitle = cva(
-  "text-anakiwa-500 text-base lg:text-xs font-sans leading-5 tracking-[2.5px] uppercase font-bold lg:pb-3"
+  'text-anakiwa-500 text-base lg:text-xs font-sans leading-5 tracking-[2.5px] uppercase font-bold lg:pb-3'
 )
 
-const EventCard = ({ event = {}, speakers = [], location = "" }: any) => {
+const EventCard = ({ event = {}, speakers = [], location = '' }: any) => {
   const [isOpen, setIsOpen] = useState(false)
 
+  const getYouTubeEmbedURL = (url: string) => {
+    const match = url.match(
+      /(?:youtube\.com\/(?:watch\?v=|live\/)|youtu\.be\/)([^?&]+)/
+    )
+    return match ? `https://www.youtube.com/embed/${match[1]}` : null
+  }
+
   return (
     <div
       className={cn(
-        "flex flex-col gap-3",
+        'flex flex-col gap-3',
         tableSection(),
-        "py-4 px-6 lg:p-0 lg:pt-[30px] lg:pb-5 border-b border-b-tuatara-200"
+        'py-4 px-6 lg:p-0 lg:pt-[30px] lg:pb-5 border-b border-b-tuatara-200'
       )}
     >
       <div className="flex flex-col gap-1 order-3 lg:order-1">
@@ -42,12 +49,25 @@ const EventCard = ({ event = {}, speakers = [], location = "" }: any) => {
                 {location}
               </span>
             </div>
+            <div className="flex flex-wrap lg:flex-col gap-1 pt-1">
+              {speakers?.map((speaker: any, index: number) => {
+                return (
+                  <Link
+                    key={index}
+                    className="text-sm text-anakiwa-500 underline break-all"
+                    href={speaker.url ?? '#'}
+                  >
+                    {speaker.label}
+                  </Link>
+                )
+              })}
+            </div>
           </div>
         </div>
       </div>
       <div className="flex flex-col gap-[10px] lg:order-2 order-2">
         <Link
-          href={event?.url ?? "#"}
+          href={event?.url ?? '#'}
           target="_blank"
           className="text-[22px] leading-[24px] text-tuatara-950 underline font-display hover:text-anakiwa-500 font-bold duration-200"
         >
@@ -55,10 +75,10 @@ const EventCard = ({ event = {}, speakers = [], location = "" }: any) => {
         </Link>
         <div
           className={cn(
-            "lg:max-h-none lg:opacity-100 lg:block",
-            "transition-all duration-300 overflow-hidden",
-            isOpen ? "max-h-[1000px] opacity-100" : "max-h-0 opacity-0",
-            "lg:transition-none lg:overflow-visible"
+            'lg:max-h-none lg:opacity-100 lg:block',
+            'transition-all duration-300 overflow-hidden',
+            isOpen ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0',
+            'lg:transition-none lg:overflow-visible'
           )}
         >
           <span className="text-base leading-6 text-tuatara-950 font-sans font-normal">
@@ -69,17 +89,15 @@ const EventCard = ({ event = {}, speakers = [], location = "" }: any) => {
 
       <div className="lg:order-3 order-1 grid gap-5 pb-3 lg:pb-0 grid-cols-[1fr_32px] lg:grid-cols-1">
         <div className="flex flex-wrap lg:flex-col gap-1">
-          {speakers?.map((speaker: any, index: number) => {
-            return (
-              <Link
-                key={index}
-                className="text-sm text-anakiwa-500 underline break-all"
-                href={speaker.url ?? "#"}
-              >
-                {speaker.label}
-              </Link>
-            )
-          })}
+          {event?.youtubeLink && (
+            <iframe
+              width="240"
+              height="140"
+              src={getYouTubeEmbedURL(event?.youtubeLink) ?? ''}
+              allowFullScreen
+              style={{ borderRadius: '10px', overflow: 'hidden' }}
+            />
+          )}
         </div>
         <button
           className="lg:hidden flex"
@@ -90,15 +108,15 @@ const EventCard = ({ event = {}, speakers = [], location = "" }: any) => {
           {isOpen ? (
             <Icons.minus
               className={cn(
-                "size-5 ml-auto",
-                "transition-transform duration-200"
+                'size-5 ml-auto',
+                'transition-transform duration-200'
               )}
             />
           ) : (
             <Icons.plus
               className={cn(
-                "size-5 ml-auto",
-                "transition-transform duration-200"
+                'size-5 ml-auto',
+                'transition-transform duration-200'
               )}
             />
           )}
@@ -113,17 +131,29 @@ const EventCard = ({ event = {}, speakers = [], location = "" }: any) => {
 export const Devcon7Section = () => {
   return (
     <div className="flex flex-col gap-10 relative">
-      <div className="flex flex-col lg:container">
+      <div className="flex flex-col gap-10 lg:container">
+        <div className="grid grid-cols-2 lg:grid-cols-3 gap-2 pt-10 container lg:!px-0">
+          <div className="h-[230px] w-full rounded-[10px] bg-cover aspect-video bg-center bg-[url('/images/devcon-7/devcon-7-overview-1.jpg')]"></div>
+          <div className="h-[230px] w-full rounded-[10px] bg-cover aspect-video bg-center bg-[url('/images/devcon-7/devcon-7-overview-2.jpg')]"></div>
+          <div className="h-[230px] w-full rounded-[10px] bg-cover aspect-video bg-center bg-[url('/images/devcon-7/devcon-7-overview-3.jpg')]"></div>
+          <div className="h-[230px] w-full rounded-[10px] bg-cover aspect-video bg-center bg-[url('/images/devcon-7/devcon-7-overview-4.jpg')]"></div>
+          <div className="h-[230px] w-full rounded-[10px] bg-cover aspect-video bg-center bg-[url('/images/devcon-7/devcon-7-overview-5.jpg')]"></div>
+          <div className="h-[230px] w-full rounded-[10px] bg-cover aspect-video bg-center bg-[url('/images/devcon-7/devcon-7-overview-6.jpg')]"></div>
+        </div>
+        {/* Table header is hidden following new design */}
         <div
-          className={cn(tableSection(), "lg:border-b lg:border-anakiwa-200")}
+          className={cn(
+            tableSection(),
+            '!hidden lg:border-b lg:border-anakiwa-200'
+          )}
         >
-          <div className={cn(tableSectionTitle(), "lg:flex hidden")}>
+          <div className={cn(tableSectionTitle(), 'lg:flex hidden')}>
             Details
           </div>
-          <div className={cn(tableSectionTitle(), "lg:text-left text-center")}>
+          <div className={cn(tableSectionTitle(), 'lg:text-left text-center')}>
             Talks
           </div>
-          <div className={cn(tableSectionTitle(), "lg:flex hidden")}>
+          <div className={cn(tableSectionTitle(), 'lg:flex hidden')}>
             Speakers
           </div>
           <div className="lg:flex hidden"></div>

data/events/devcon-7.ts

@@ -1,245 +1,277 @@
 export const events = [
   {
-    location: "Ethereum Cypherpunk Congress",
-    speakers: [{ url: "#", label: "Althea" }],
+    location: 'Ethereum Cypherpunk Congress',
+    speakers: [{ url: '#', label: 'Althea' }],
     event: {
-      title: "Datapalooza",
+      title: 'Datapalooza',
       description:
-        "Data can be useful, and also dangerous. This talk will raise questions and concerns that data enthusiasts might want to consider.",
-      url: "https://lu.ma/qwvo9tgo",
-      date: "Sunday, Nov 10",
-      time: "4:30 PM - 5:00 PM",
+        'Data can be useful, and also dangerous. This talk will raise questions and concerns that data enthusiasts might want to consider.',
+      url: 'https://lu.ma/qwvo9tgo',
+      date: 'Sunday, Nov 10',
+      time: '4:30 PM - 5:00 PM',
+      youtubeLink:
+        'https://www.youtube.com/live/rGE_RDumZGg?si=1jxvatPDl0bwNpfO',
     },
   },
   {
-    location: "Ethereum Cypherpunk Congress",
-    speakers: [{ url: "https://x.com/samonchain", label: "@samonchain" }],
+    location: 'Ethereum Cypherpunk Congress',
+    speakers: [{ url: 'https://x.com/samonchain', label: '@samonchain' }],
     event: {
       title: "What's next for PSE",
       description:
-        "2024 has brought a lot of changes to the Privacy + Scaling Explorations team. Hear from our new team learn about the past, present and future of PSE.",
-      url: "https://congress.web3privacy.info/",
-      date: "Monday, Nov 11",
-      time: "TBA",
+        '2024 has brought a lot of changes to the Privacy + Scaling Explorations team. Hear from our new team learn about the past, present and future of PSE.',
+      url: 'https://congress.web3privacy.info/',
+      date: 'Monday, Nov 11',
+      time: 'TBA',
+      youtubeLink:
+        'https://www.youtube.com/live/rGE_RDumZGg?si=1jxvatPDl0bwNpfO',
     },
   },
   {
-    location: "Lightning Talk - Stage 4",
-    speakers: [{ url: "https://x.com/0xjei", label: "@0xjei" }],
+    location: 'Lightning Talk - Stage 4',
+    speakers: [{ url: 'https://x.com/0xjei', label: '@0xjei' }],
     event: {
-      title: "The combination of ZKP +/- MPC +/- FHE",
+      title: 'The combination of ZKP +/- MPC +/- FHE',
       description:
-        "This talk will provide you with the necessary intuition to understand when you should use ZKP, MPC or FHE, or any combination of them.",
-      url: "https://app.devcon.org/schedule/XPLVT8",
-      date: "Tuesday, Nov 12",
-      time: "12:40 PM - 12:50 PM",
+        'This talk will provide you with the necessary intuition to understand when you should use ZKP, MPC or FHE, or any combination of them.',
+      url: 'https://app.devcon.org/schedule/XPLVT8',
+      date: 'Tuesday, Nov 12',
+      time: '12:40 PM - 12:50 PM',
+      youtubeLink:
+        'https://www.youtube.com/live/rGE_RDumZGg?si=1jxvatPDl0bwNpfO',
     },
   },
   {
-    location: "Lightning Talk - Stage 4",
-    speakers: [{ url: "https://x.com/cperezz19", label: "@cperezz19" }],
+    location: 'Lightning Talk - Stage 4',
+    speakers: [{ url: 'https://x.com/cperezz19', label: '@cperezz19' }],
     event: {
       title:
-        "MP-FHE experiments. Our learnings trying to find the next big tech to focus on.",
+        'MP-FHE experiments. Our learnings trying to find the next big tech to focus on.',
       description:
-        "This talk mainly focuses on showcasing the work that some PSE members did while starting to dive into MPC-FHE during Q2 2024. This work is composed by various explorations within the MPC-FHE realm that move towards different directions and goals. From FHE compilers to FFT Bootstrapping GPU optimization proposals, passing by FHE Game demos and many application level implementations, the talk aims to reach beginner-advanced audience on the research/product paths that we have explored so far.",
-      url: "https://app.devcon.org/schedule/9JYWVP",
-      date: "Tuesday, Nov 12",
-      time: "1:10 PM - 1:20 PM",
+        'This talk mainly focuses on showcasing the work that some PSE members did while starting to dive into MPC-FHE during Q2 2024. This work is composed by various explorations within the MPC-FHE realm that move towards different directions and goals. From FHE compilers to FFT Bootstrapping GPU optimization proposals, passing by FHE Game demos and many application level implementations, the talk aims to reach beginner-advanced audience on the research/product paths that we have explored so far.',
+      url: 'https://app.devcon.org/schedule/9JYWVP',
+      date: 'Tuesday, Nov 12',
+      time: '1:10 PM - 1:20 PM',
+      youtubeLink:
+        'https://www.youtube.com/live/rGE_RDumZGg?si=1jxvatPDl0bwNpfO',
     },
   },
   {
-    location: "Lightning Talk - Stage 4",
-    speakers: [{ url: "https://x.com/leolarav", label: "@leolarav" }],
+    location: 'Lightning Talk - Stage 4',
+    speakers: [{ url: 'https://x.com/leolarav', label: '@leolarav' }],
     event: {
-      title: "Modern ZKP Compilers",
+      title: 'Modern ZKP Compilers',
       description:
-        "At PSE we have done much ZKP advanced development. From that learning we are building a language and compiler, that is summarizing much of this learning. We answer questions like: Are compilers necessary in a zkVM world? What is the role of a compiler in ZKP development? What are its most common components? How different ways can this problem be approached? In this advanced talk, we will learn how we compile arbitrary boolean expressions, or how the Schwartz–Zippel lemma can be used to optimize.",
-      url: "https://app.devcon.org/schedule/CV7QXP",
-      date: "Tuesday, Nov 12",
-      time: "1:30 PM - 1:40 PM",
+        'At PSE we have done much ZKP advanced development. From that learning we are building a language and compiler, that is summarizing much of this learning. We answer questions like: Are compilers necessary in a zkVM world? What is the role of a compiler in ZKP development? What are its most common components? How different ways can this problem be approached? In this advanced talk, we will learn how we compile arbitrary boolean expressions, or how the Schwartz–Zippel lemma can be used to optimize.',
+      url: 'https://app.devcon.org/schedule/CV7QXP',
+      date: 'Tuesday, Nov 12',
+      time: '1:30 PM - 1:40 PM',
+      youtubeLink:
+        'https://www.youtube.com/live/rGE_RDumZGg?si=1jxvatPDl0bwNpfO',
     },
   },
   {
-    location: "Lightning Talk - Stage 4",
-    speakers: [{ url: "https://x.com/andyguzmaneth", label: "@andyguzmaneth" }],
+    location: 'Lightning Talk - Stage 4',
+    speakers: [{ url: 'https://x.com/andyguzmaneth', label: '@andyguzmaneth' }],
     event: {
       title:
         "The Blind Man's Elephant: a product vision towards private identities",
       description:
-        "A short talk introducing the concepts of key principles we want to achieve in private ZK identities. Sparkling concepts like SSI and DIDs and why blockchains are the best way to ensure that. Finally it concludes with simple ZK and data-structure constructions and different alternatives that are seeking to provide this characteristics. In short, this is a lightning overview of the space of ZK, its desired features and different approaches to achieve them.",
-      url: "https://app.devcon.org/schedule/GSZKVK",
-      date: "Tuesday, Nov 12",
-      time: "2:10 PM - 2:20 PM",
+        'A short talk introducing the concepts of key principles we want to achieve in private ZK identities. Sparkling concepts like SSI and DIDs and why blockchains are the best way to ensure that. Finally it concludes with simple ZK and data-structure constructions and different alternatives that are seeking to provide this characteristics. In short, this is a lightning overview of the space of ZK, its desired features and different approaches to achieve them.',
+      url: 'https://app.devcon.org/schedule/GSZKVK',
+      date: 'Tuesday, Nov 12',
+      time: '2:10 PM - 2:20 PM',
+      youtubeLink:
+        'https://www.youtube.com/live/rGE_RDumZGg?si=1jxvatPDl0bwNpfO',
     },
   },
   {
-    location: "Lightning Talk - Stage 4",
+    location: 'Lightning Talk - Stage 4',
     speakers: [
-      { url: "https://x.com/moven0831", label: "@moven0831" },
-      { url: "https://x.com/vivi4322", label: "@vivi4322" },
+      { url: 'https://x.com/moven0831', label: '@moven0831' },
+      { url: 'https://x.com/vivi4322', label: '@vivi4322' },
     ],
     event: {
-      title: "Mopro: Make Client-side Proving on Mobile Easy",
+      title: 'Mopro: Make Client-side Proving on Mobile Easy',
       description:
-        "Mopro is a toolkit for ZK app development on mobile. Mopro makes client-side proving on mobile simple. Mopro aims to connect different adapters with different platforms. In this talk, we will share: - How to use Mopro to develop your own ZK mobile app. - What is the current development progress, including the current supported proving systems, supported platforms, and mobile GPU exploration results. - Moreover, we will share the challenges that Mopro faces and our future roadmap.",
-      url: "https://app.devcon.org/schedule/BZWFEM",
-      date: "Tuesday, Nov 12",
-      time: "2:50 PM - 3:00 PM",
+        'Mopro is a toolkit for ZK app development on mobile. Mopro makes client-side proving on mobile simple. Mopro aims to connect different adapters with different platforms. In this talk, we will share: - How to use Mopro to develop your own ZK mobile app. - What is the current development progress, including the current supported proving systems, supported platforms, and mobile GPU exploration results. - Moreover, we will share the challenges that Mopro faces and our future roadmap.',
+      url: 'https://app.devcon.org/schedule/BZWFEM',
+      date: 'Tuesday, Nov 12',
+      time: '2:50 PM - 3:00 PM',
+      youtubeLink:
+        'https://www.youtube.com/live/rGE_RDumZGg?si=1jxvatPDl0bwNpfO',
     },
   },
   {
-    location: "Talk - Stage 3",
+    location: 'Talk - Stage 3',
     speakers: [
-      { url: "https://x.com/atheartengineer", label: "@atheartengineer" },
-      { url: "#", label: "Ying Tong" },
+      { url: 'https://x.com/atheartengineer', label: '@atheartengineer' },
+      { url: '#', label: 'Ying Tong' },
     ],
     event: {
-      title: "Introduction to Cryptography, New and Old",
+      title: 'Introduction to Cryptography, New and Old',
       description: `Data can be useful, and also dangerous. This talk will raise questions and concerns that data enthusiasts might want to consider.`,
-      url: "https://app.devcon.org/schedule/R3JC8U",
-      date: "Tuesday, Nov 12",
-      time: "4:30 PM - 4:55 PM",
+      url: 'https://app.devcon.org/schedule/R3JC8U',
+      date: 'Tuesday, Nov 12',
+      time: '4:30 PM - 4:55 PM',
+      youtubeLink:
+        'https://www.youtube.com/live/rGE_RDumZGg?si=1jxvatPDl0bwNpfO',
     },
   },
   {
-    location: "Talk - Stage 3",
+    location: 'Talk - Stage 3',
     speakers: [
-      { url: "https://x.com/yush_g", label: "@yush_g" },
-      { url: "https://x.com/sorasue77", label: "@sorasue77" },
+      { url: 'https://x.com/yush_g', label: '@yush_g' },
+      { url: 'https://x.com/sorasue77', label: '@sorasue77' },
     ],
     event: {
-      title: "ZK Email: Fast Proofs and Production-Ready Account Recovery",
+      title: 'ZK Email: Fast Proofs and Production-Ready Account Recovery',
       description:
-        "We discuss progress that ZK Email has made in making new proofs really easy, as well as interesting new on-chain directions for email-triggered transactions. We’ll go over proof registries, email-based multisig signers, and email guardians for account recovery in production.",
-      url: "https://app.devcon.org/schedule/WNQBQH",
-      date: "Wednesday, Nov 13",
-      time: "10:30 AM - 11:00 AM",
+        'We discuss progress that ZK Email has made in making new proofs really easy, as well as interesting new on-chain directions for email-triggered transactions. We’ll go over proof registries, email-based multisig signers, and email guardians for account recovery in production.',
+      url: 'https://app.devcon.org/schedule/WNQBQH',
+      date: 'Wednesday, Nov 13',
+      time: '10:30 AM - 11:00 AM',
+      youtubeLink:
+        'https://www.youtube.com/live/rGE_RDumZGg?si=1jxvatPDl0bwNpfO',
     },
   },
   {
-    location: "Talk - Classroom A",
-    speakers: [{ url: "https://x.com/viv_boops", label: "@viv_boops" }],
+    location: 'Talk - Classroom A',
+    speakers: [{ url: 'https://x.com/viv_boops', label: '@viv_boops' }],
     event: {
-      title: "Digital Pheromones: MPC for Human Connection & Coordination",
+      title: 'Digital Pheromones: MPC for Human Connection & Coordination',
       description:
         "Recent MPC research from Cursive and PSE enables a new concept called 'digital pheromones': the ability to produce lightweight, privacy-preserving signals that people can use to coordinate safely and efficiently. The primary result we will cover is Trinity, a new 2PC scheme with nearly ideal UX/DevX, built on the trio of PLONK, Garbled Circuits, and KZG Witness Encryption. We will do a live demo with attendees and explore what a future filled with digital pheromones will enable!",
-      url: "https://app.devcon.org/schedule/LMCG3V",
-      date: "Wednesday, Nov 13",
-      time: "3:20 PM - 3:50 PM",
+      url: 'https://app.devcon.org/schedule/LMCG3V',
+      date: 'Wednesday, Nov 13',
+      time: '3:20 PM - 3:50 PM',
+      youtubeLink:
+        'https://www.youtube.com/live/rGE_RDumZGg?si=1jxvatPDl0bwNpfO',
     },
   },
   {
-    location: "Panel - Stage 1",
+    location: 'Panel - Stage 1',
     speakers: [
-      { url: "https://x.com/turboblitzzz", label: "@turboblitzzz" },
-      { url: "https://x.com/7pastelblackcat", label: "@7pastelblackcat" },
-      { url: "https://x.com/michaelelliot", label: "@michaelelliot" },
-      { url: "https://x.com/0xnicoshark", label: "@0xnicoshark" },
-      { url: "https://x.com/yanis_mezn", label: "@yanis_mezn" },
+      { url: 'https://x.com/turboblitzzz', label: '@turboblitzzz' },
+      { url: 'https://x.com/7pastelblackcat', label: '@7pastelblackcat' },
+      { url: 'https://x.com/michaelelliot', label: '@michaelelliot' },
+      { url: 'https://x.com/0xnicoshark', label: '@0xnicoshark' },
+      { url: 'https://x.com/yanis_mezn', label: '@yanis_mezn' },
     ],
     event: {
-      title: "Utilizing National IDs in the Ethereum Ecosystem",
+      title: 'Utilizing National IDs in the Ethereum Ecosystem',
       description:
-        "This panel brings together developers of MynaWallet, Anon-Aadhaar, Proof of Passport, and zkPassport, who are exploring and developing applications that utilize government-issued IDs in the Ethereum ecosystem. We will discuss the characteristics of each ID system and what functions can be realized using tech stacks in the Ethereum ecosystem and cryptographic technology.",
-      url: "https://app.devcon.org/schedule/PR78EL",
-      date: "Thursday, Nov 14",
-      time: "9:45 AM - 10:45 AM",
+        'This panel brings together developers of MynaWallet, Anon-Aadhaar, Proof of Passport, and zkPassport, who are exploring and developing applications that utilize government-issued IDs in the Ethereum ecosystem. We will discuss the characteristics of each ID system and what functions can be realized using tech stacks in the Ethereum ecosystem and cryptographic technology.',
+      url: 'https://app.devcon.org/schedule/PR78EL',
+      date: 'Thursday, Nov 14',
+      time: '9:45 AM - 10:45 AM',
+      youtubeLink:
+        'https://www.youtube.com/live/rGE_RDumZGg?si=1jxvatPDl0bwNpfO',
     },
   },
   {
-    location: "Panel - Stage 6",
+    location: 'Panel - Stage 6',
     speakers: [
-      { url: "https://github.com/ed255", label: "@ed255" },
-      { url: "https://x.com/janmajlaya_mall", label: "@janmajlaya_mall" },
-      { url: "https://x.com/veronica241", label: "@veronica241" },
+      { url: 'https://github.com/ed255', label: '@ed255' },
+      { url: 'https://x.com/janmajlaya_mall', label: '@janmajlaya_mall' },
+      { url: 'https://x.com/veronica241', label: '@veronica241' },
     ],
     event: {
-      title: "Multi-Party FHE for Multi-Player Privacy",
+      title: 'Multi-Party FHE for Multi-Player Privacy',
       description:
         "Privacy is an unsolved challenge for blockchains and decentralized systems. ZK cryptography gets us there partially, but not all the way. ZK enables 'single-player private state,' and certain other kinds of privacy are impossible to realize with ZKPs alone. Panelists, the cryptography library devs, infrastructure builders, and application devs who have recently started to explore programmable encryption will discuss MP-FHE as one such tool for achieving more general privacy capabilities.",
-      url: "https://app.devcon.org/schedule/S9S8M9",
-      date: "Thursday, Nov 14",
-      time: "1:00 PM - 2:00 PM",
+      url: 'https://app.devcon.org/schedule/S9S8M9',
+      date: 'Thursday, Nov 14',
+      time: '1:00 PM - 2:00 PM',
+      youtubeLink:
+        'https://www.youtube.com/live/rGE_RDumZGg?si=1jxvatPDl0bwNpfO',
     },
   },
   {
-    location: "Workshop - Classroom E",
-    speakers: [{ url: "https://x.com/yush_g", label: "@yush_g" }],
+    location: 'Workshop - Classroom E',
+    speakers: [{ url: 'https://x.com/yush_g', label: '@yush_g' }],
     event: {
       title:
-        "Build Your Own ZK Email Proofs, ZK Email Login, or ZK Account Recovery Module in 1.5 Hours",
+        'Build Your Own ZK Email Proofs, ZK Email Login, or ZK Account Recovery Module in 1.5 Hours',
       description:
-        "We explain how to use a variety of ZK email-related SDKs, creating new proofs only using TypeScript or Solidity, whichever the developer is most familiar with. We will define new proofs in 5 minutes via sdk.prove.email, complete Solidity ZK email verifications via our generic relayer, and ideate your own projects!",
-      url: "https://app.devcon.org/schedule/DZVPRH",
-      date: "Thursday, Nov 14",
-      time: "1:30 PM - 3:00 PM",
+        'We explain how to use a variety of ZK email-related SDKs, creating new proofs only using TypeScript or Solidity, whichever the developer is most familiar with. We will define new proofs in 5 minutes via sdk.prove.email, complete Solidity ZK email verifications via our generic relayer, and ideate your own projects!',
+      url: 'https://app.devcon.org/schedule/DZVPRH',
+      date: 'Thursday, Nov 14',
+      time: '1:30 PM - 3:00 PM',
+      youtubeLink:
+        'https://www.youtube.com/live/rGE_RDumZGg?si=1jxvatPDl0bwNpfO',
     },
   },
   {
-    location: "Lightning Talk - Stage 4",
+    location: 'Lightning Talk - Stage 4',
     speakers: [
-      { url: "https://x.com/chihchengliang", label: "@chihchengliang" },
+      { url: 'https://x.com/chihchengliang', label: '@chihchengliang' },
     ],
     event: {
       title: "Little Things We've Learned About FHE",
       description:
-        "Recently, at PSE, we have been exploring the field of cryptography, specifically focusing on Fully Homomorphic Encryption (FHE). FHE enables secure interactions with encrypted data between different parties. In this presentation, we will introduce key concepts and essential information tailored for developers and application designers. This will help them quickly grasp the fundamentals without getting bogged down by complex mathematical details.",
-      url: "https://app.devcon.org/schedule/9JFDZA",
-      date: "Thursday, Nov 14",
-      time: "4:00 PM - 4:30 PM",
+        'Recently, at PSE, we have been exploring the field of cryptography, specifically focusing on Fully Homomorphic Encryption (FHE). FHE enables secure interactions with encrypted data between different parties. In this presentation, we will introduce key concepts and essential information tailored for developers and application designers. This will help them quickly grasp the fundamentals without getting bogged down by complex mathematical details.',
+      url: 'https://app.devcon.org/schedule/9JFDZA',
+      date: 'Thursday, Nov 14',
+      time: '4:00 PM - 4:30 PM',
+      youtubeLink:
+        'https://www.youtube.com/live/rGE_RDumZGg?si=1jxvatPDl0bwNpfO',
     },
   },
   {
-    location: "Lightning Talk - Classroom E",
-    speakers: [{ url: "https://x.com/sinu_eth", label: "@sinu_eth" }],
+    location: 'Lightning Talk - Classroom E',
+    speakers: [{ url: 'https://x.com/sinu_eth', label: '@sinu_eth' }],
     event: {
-      title: "TLSNotary: Applying MPC and Interactive ZK to Prove Web2 Data",
+      title: 'TLSNotary: Applying MPC and Interactive ZK to Prove Web2 Data',
       description:
-        "Diving into TLSNotary, a protocol which leverages multi-party computation and interactive ZK to prove the authenticity and provenance of any data on the web to another party. Summary: 1. What it is and what it can do. 2. High-level overview of how it works 3. Details on the underlying MPC and ZK protocols that we use 4. How to use it.",
-      url: "https://app.devcon.org/schedule/RTVKJC",
-      date: "Thursday, Nov 14",
-      time: "4:30 PM - 4:40 PM",
+        'Diving into TLSNotary, a protocol which leverages multi-party computation and interactive ZK to prove the authenticity and provenance of any data on the web to another party. Summary: 1. What it is and what it can do. 2. High-level overview of how it works 3. Details on the underlying MPC and ZK protocols that we use 4. How to use it.',
+      url: 'https://app.devcon.org/schedule/RTVKJC',
+      date: 'Thursday, Nov 14',
+      time: '4:30 PM - 4:40 PM',
+      youtubeLink:
+        'https://www.youtube.com/live/rGE_RDumZGg?si=1jxvatPDl0bwNpfO',
     },
   },
   {
-    location: "Workshop - Classroom E",
+    location: 'Workshop - Classroom E',
     speakers: [
-      { url: "https://x.com/sinu_eth", label: "@sinu_eth" },
-      { url: "https://x.com/heechkau", label: "@heechkau" },
-      { url: "https://x.com/0xtsukino", label: "@0xtsukino" },
+      { url: 'https://x.com/sinu_eth', label: '@sinu_eth' },
+      { url: 'https://x.com/heechkau', label: '@heechkau' },
+      { url: 'https://x.com/0xtsukino', label: '@0xtsukino' },
     ],
     event: {
-      title: "Unlock Web2 Data with TLSNotary: Hands-On Workshop",
+      title: 'Unlock Web2 Data with TLSNotary: Hands-On Workshop',
       description:
-        "Join our hands-on workshop to master TLSNotary! Dive into multi-party-TLS and learn to prove and verify online data authenticity to a third-party verifier while ensuring privacy. We’ll start with small examples in Rust and build up to custom browser extensions in TypeScript to collect and verify private user data.",
-      url: "https://app.devcon.org/schedule/VPMQGM",
-      date: "Thursday, Nov 14",
-      time: "4:40 PM - 6:10 PM",
+        'Join our hands-on workshop to master TLSNotary! Dive into multi-party-TLS and learn to prove and verify online data authenticity to a third-party verifier while ensuring privacy. We’ll start with small examples in Rust and build up to custom browser extensions in TypeScript to collect and verify private user data.',
+      url: 'https://app.devcon.org/schedule/VPMQGM',
+      date: 'Thursday, Nov 14',
+      time: '4:40 PM - 6:10 PM',
+      youtubeLink:
+        'https://www.youtube.com/live/rGE_RDumZGg?si=1jxvatPDl0bwNpfO',
     },
   },
 ]
 
 export const booths = [
   {
-    image: "/images/impact-booth.svg",
-    title: "PSE Impact Booth",
+    image: '/images/impact-booth.svg',
+    title: 'PSE Impact Booth',
     description:
-      "We are hosting open office hours at Devcon so you can ask questions, try out demos, and deep-dive into our projects. There will be representatives from MACI, TLSNotary, Semaphore, EcoDev, DevRel, Grants, Research and more all week. Come learn about the growing field of advanced cryptography!",
-    date: "Nov 12 - 15",
-    location: "S1-07 and S1-08",
+      'We are hosting open office hours at Devcon so you can ask questions, try out demos, and deep-dive into our projects. There will be representatives from MACI, TLSNotary, Semaphore, EcoDev, DevRel, Grants, Research and more all week. Come learn about the growing field of advanced cryptography!',
+    date: 'Nov 12 - 15',
+    location: 'S1-07 and S1-08',
   },
   {
-    image: "/images/cryptographic-connections.svg",
-    title: "Cryptographic Connections",
+    image: '/images/cryptographic-connections.svg',
+    title: 'Cryptographic Connections',
     description:
-      "Throughout history, humans have used patterns, symbols, and codes to forge meaningful connections. This exhibit by Cursive explores cryptography not just as mathematical formulas, but as a deeply human art form.",
-    date: "Nov 12 - 15",
-    location: "Near Devcon Entrance",
+      'Throughout history, humans have used patterns, symbols, and codes to forge meaningful connections. This exhibit by Cursive explores cryptography not just as mathematical formulas, but as a deeply human art form.',
+    date: 'Nov 12 - 15',
+    location: 'Near Devcon Entrance',
     learMore: {
-      description: "Learn more here:",
-      label: "cursive.team",
-      url: "https://x.com/cursive_team/status/1853780464512946589?s=46",
+      description: 'Learn more here:',
+      label: 'cursive.team',
+      url: 'https://x.com/cursive_team/status/1853780464512946589?s=46',
     },
   },
 ]