Devcon 7 - Design updates (#278)

* Devcon 7 - Design updates
2026-01-09 14:18:02 -05:00 · 2025-02-14 12:51:36 +00:00
parent ec8b74e585
commit eb0437b18b
28 changed files with 539 additions and 312 deletions
--- a/app/[lang]/devcon-7/page.tsx
+++ b/app/[lang]/devcon-7/page.tsx
@@ -1,17 +1,19 @@
-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'
+
+import { Devcon7Slider } from './sections/Devcon7Slider'

 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,
      },
@@ -23,9 +25,12 @@ export default async function DevconPage() {
  return (
    <>
      <div className="flex flex-col lg:pb-[120px]">
-        <Devcon7Header />
+        <div className="flex flex-col">
+          <Devcon7Header />
+          <Devcon7Slider />
+        </div>
+
        <div className="flex flex-col gap-10 lg:gap-14 pt-8 lg:pt-[60px] mx-auto max-w-[950px]">
-          <Devcon7Booths />
          <Devcon7Section />
        </div>
      </div>
--- a/app/[lang]/devcon-7/sections/Devcon7Header.tsx
+++ b/app/[lang]/devcon-7/sections/Devcon7Header.tsx
@@ -1,8 +1,8 @@
-import Image from "next/image"
+import Image from 'next/image'

 export const Devcon7Header = () => {
  return (
-    <div className="relative h-[180px] lg:h-[300px]">
+    <div className="relative h-[135px] lg:h-[135px]">
      <Image
        src="/images/devcon-7-mobile.svg"
        alt="Devcon 7 Banner"
--- a/app/[lang]/devcon-7/sections/Devcon7Section.tsx
+++ b/app/[lang]/devcon-7/sections/Devcon7Section.tsx
@@ -1,27 +1,36 @@
-"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 { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { events } from '@/data/events/devcon-7'
+import { cva } from 'class-variance-authority'
+import { Button } from '@/components/ui/button'
+import { useTranslation } from '@/app/i18n/client'

-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,67 +51,91 @@ 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 ?? "#"}
-          target="_blank"
-          className="text-[22px] leading-[24px] text-tuatara-950 underline font-display hover:text-anakiwa-500 font-bold duration-200"
-        >
-          {event?.title}
-        </Link>
+      <div className="flex flex-col justify-start gap-[10px] lg:order-2 order-2">
+        <div className="flex items-center justify-between">
+          <Link
+            href={event?.url ?? '#'}
+            target="_blank"
+            className="text-[22px] inline-flex leading-[24px] text-tuatara-950 underline font-display hover:text-anakiwa-500 font-bold duration-200"
+          >
+            {event?.title}
+          </Link>
+          <button
+            className="lg:hidden flex"
+            onClick={() => {
+              setIsOpen(!isOpen)
+            }}
+          >
+            {isOpen ? (
+              <Icons.minus
+                className={cn(
+                  'size-5 ml-auto',
+                  'transition-transform duration-200'
+                )}
+              />
+            ) : (
+              <Icons.plus
+                className={cn(
+                  'size-5 ml-auto',
+                  'transition-transform duration-200'
+                )}
+              />
+            )}
+          </button>
+        </div>
        <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">
            {event?.description}
          </span>
+          <div className="pt-2 flex lg:!hidden">
+            {event?.youtubeLink && (
+              <iframe
+                width="100%"
+                height="230"
+                src={getYouTubeEmbedURL(event?.youtubeLink) ?? ''}
+                allowFullScreen
+                style={{ borderRadius: '10px', overflow: 'hidden' }}
+              />
+            )}
+          </div>
        </div>
      </div>

-      <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>
-            )
-          })}
-        </div>
-        <button
-          className="lg:hidden flex"
-          onClick={() => {
-            setIsOpen(!isOpen)
-          }}
-        >
-          {isOpen ? (
-            <Icons.minus
-              className={cn(
-                "size-5 ml-auto",
-                "transition-transform duration-200"
-              )}
-            />
-          ) : (
-            <Icons.plus
-              className={cn(
-                "size-5 ml-auto",
-                "transition-transform duration-200"
-              )}
+      <div className="relative lg:order-3 grid gap-5 pb-3 lg:pb-0 grid-cols-[1fr_32px] lg:grid-cols-1">
+        <div className="hidden lg:flex flex-wrap lg:flex-col gap-1">
+          {event?.youtubeLink && (
+            <iframe
+              width="240"
+              height="140"
+              src={getYouTubeEmbedURL(event?.youtubeLink) ?? ''}
+              allowFullScreen
+              style={{ borderRadius: '10px', overflow: 'hidden' }}
            />
          )}
-        </button>
+        </div>
      </div>

      <div className="order-4 lg:flex hidden"></div>
@@ -110,20 +143,25 @@ const EventCard = ({ event = {}, speakers = [], location = "" }: any) => {
  )
 }

-export const Devcon7Section = () => {
+export const Devcon7Section = ({ lang }: any) => {
+  const { t } = useTranslation(lang, 'devcon-7')
+
  return (
    <div className="flex flex-col gap-10 relative">
-      <div className="flex flex-col lg:container">
+      <div className="flex flex-col gap-3 lg:gap-10 lg:container">
        <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>
--- a/app/[lang]/devcon-7/sections/Devcon7Slider.tsx
+++ b/app/[lang]/devcon-7/sections/Devcon7Slider.tsx
@@ -0,0 +1,88 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import Slider from 'react-slick'
+
+import 'slick-carousel/slick/slick.css'
+import 'slick-carousel/slick/slick-theme.css'
+import Image from 'next/image'
+
+const AnySlider = Slider as any
+
+export const Devcon7Slider = () => {
+  const settings = {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 4.2,
+    slidesToScroll: 1,
+    autoplay: true,
+    responsive: [
+      {
+        breakpoint: 1400,
+        settings: {
+          slidesToShow: 5.4,
+          slidesToScroll: 1,
+          infinite: true,
+          dots: true,
+        },
+      },
+      {
+        breakpoint: 1024,
+        settings: {
+          slidesToShow: 4.2,
+          slidesToScroll: 1,
+          infinite: true,
+          dots: true,
+        },
+      },
+      {
+        breakpoint: 600,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+          initialSlide: 1,
+        },
+      },
+    ],
+    appendDots: (dots: React.ReactNode) => (
+      <div
+        style={{
+          borderRadius: '10px',
+          padding: '10px',
+        }}
+      >
+        <ul style={{ margin: '0px' }}> {dots} </ul>
+      </div>
+    ),
+    customPaging: (i: number) => <div className="h-4 w-4 rounded-full  mt-5" />,
+  }
+
+  const images = [
+    '/images/devcon-7/devcon-7-overview-1.jpg',
+    '/images/devcon-7/devcon-7-overview-2.jpg',
+    '/images/devcon-7/devcon-7-overview-3.jpg',
+    '/images/devcon-7/devcon-7-overview-4.jpg',
+    '/images/devcon-7/devcon-7-overview-5.jpg',
+    '/images/devcon-7/devcon-7-overview-6.jpg',
+  ]
+
+  return (
+    <AnySlider {...settings}>
+      {images.map((image, index) => (
+        <div
+          key={index}
+          className="relative h-[320px] w-full bg-cover bg-center overflow-hidden"
+          style={{ backgroundImage: `url(${image})` }}
+        >
+          <Image
+            src={image}
+            alt={`Devcon 7 Overview ${index + 1}`}
+            fill
+            className="object-cover w-full"
+          />
+        </div>
+      ))}
+    </AnySlider>
+  )
+}
--- a/app/[lang]/page.tsx
+++ b/app/[lang]/page.tsx
@@ -105,8 +105,6 @@ export default function IndexPage({ params: { lang } }: any) {

        <WhatWeDo lang={lang} />

-        <ConnectWithUs lang={lang} />
-
        <Banner
          title={common('connectWithUs')}
          subtitle={common('connectWithUsDescription')}
--- a/app/[lang]/projects/page.tsx
+++ b/app/[lang]/projects/page.tsx
@@ -1,30 +1,30 @@
-import { Suspense } from "react"
-import { Metadata } from "next"
+import { Suspense } from 'react'
+import { Metadata } from 'next'

-import { AppContent } from "@/components/ui/app-content"
-import { Label } from "@/components/ui/label"
-import { Divider } from "@/components/divider"
-import ProjectFiltersBar from "@/components/project/project-filters-bar"
-import { ProjectList } from "@/components/project/project-list"
-import { ProjectResultBar } from "@/components/project/project-result-bar"
-import { useTranslation } from "@/app/i18n"
+import { AppContent } from '@/components/ui/app-content'
+import { Label } from '@/components/ui/label'
+import { Divider } from '@/components/divider'
+import ProjectFiltersBar from '@/components/project/project-filters-bar'
+import { ProjectList } from '@/components/project/project-list'
+import { ProjectResultBar } from '@/components/project/project-result-bar'
+import { useTranslation } from '@/app/i18n'

 export const metadata: Metadata = {
-  title: "Project Library",
+  title: 'Project Library',
  description:
-    "PSE supports projects working on theoretical cryptography research, protocol development, open source tooling, experimental applications, and more.",
+    'PSE supports projects working on theoretical cryptography research, protocol development, open source tooling, experimental applications, and more.',
 }

 export default async function ProjectsPage({ params: { lang } }: any) {
-  const { t } = await useTranslation(lang, "projects-page")
+  const { t } = await useTranslation(lang, 'projects-page')

  return (
-    <Divider.Section>
-      <div className="bg-cover-gradient">
-        <AppContent className="flex flex-col gap-4 py-10">
-          <Label.PageTitle label={t("title")} />
+    <div className="flex flex-col">
+      <div className="w-full bg-cover-gradient border-b border-tuatara-300">
+        <AppContent className="flex flex-col gap-4 py-10 w-full">
+          <Label.PageTitle label={t('title')} />
          <h6 className="font-sans text-base font-normal text-tuatara-950 md:text-[18px] md:leading-[27px] md:max-w-[700px]">
-            {t("subtitle")}
+            {t('subtitle')} ss
          </h6>
        </AppContent>
      </div>
@@ -38,6 +38,6 @@ export default async function ProjectsPage({ params: { lang } }: any) {
        </Suspense>
        <ProjectList lang={lang} />
      </AppContent>
-    </Divider.Section>
+    </div>
  )
 }
--- a/app/i18n/locales/en/news-section.json
+++ b/app/i18n/locales/en/news-section.json
@@ -6,6 +6,6 @@
  "read": "Read",
  "attend": "Attend",
  "recentUpdates": "Recent Updates",
-  "seeAllUpdates": "See all updates",
+  "seeAllUpdates": "See more announcements on Discord",
  "repostOnSocial": "Repost on {{socialName}}"
-}
+}
--- a/app/i18n/locales/es/news-section.json
+++ b/app/i18n/locales/es/news-section.json
@@ -6,6 +6,6 @@
  "read": "Leer",
  "attend": "Asistir",
  "recentUpdates": "Recent Updates",
-  "seeAllUpdates": "See all updates",
+  "seeAllUpdates": "See more announcements on Discord",
  "repostOnSocial": "Repost on {{socialName}}"
-}
+}
--- a/app/i18n/locales/ko/news-section.json
+++ b/app/i18n/locales/ko/news-section.json
@@ -6,6 +6,6 @@
  "read": "Read",
  "attend": "Attend",
  "recentUpdates": "Recent Updates",
-  "seeAllUpdates": "See all updates",
+  "seeAllUpdates": "See more announcements on Discord",
  "reportOnSocial": "Report on {{socialName}}"
-}
+}
--- a/app/i18n/locales/zh-TW/news-section.json
+++ b/app/i18n/locales/zh-TW/news-section.json
@@ -6,6 +6,6 @@
  "read": "閱讀",
  "attend": "參加",
  "recentUpdates": "Recent Updates",
-  "seeAllUpdates": "See all updates",
+  "seeAllUpdates": "See more announcements on Discord",
  "repostOnSocial": "Repost on {{socialName}}"
-}
+}
--- a/components/banner.tsx
+++ b/components/banner.tsx
@@ -1,6 +1,6 @@
-import { ReactNode } from "react"
+import { ReactNode } from 'react'

-import { AppContent } from "./ui/app-content"
+import { AppContent } from './ui/app-content'

 type BannerProps = {
  title: ReactNode
@@ -10,11 +10,11 @@ type BannerProps = {

 const Banner = ({ title, subtitle, children }: BannerProps) => {
  return (
-    <section className="relative bg-cover-gradient text-center">
+    <section className="relative bg-white text-center">
      <div className="py-16">
        <AppContent className="flex flex-col gap-6">
          <div className="flex flex-col items-center text-center">
-            {typeof title === "string" ? (
+            {typeof title === 'string' ? (
              <h6 className="py-4 font-sans text-base font-bold uppercase tracking-[4px] text-tuatara-950">
                {title}
              </h6>
@@ -30,6 +30,6 @@ const Banner = ({ title, subtitle, children }: BannerProps) => {
  )
 }

-Banner.displayName = "Banner"
+Banner.displayName = 'Banner'

 export { Banner }
--- a/components/divider.tsx
+++ b/components/divider.tsx
@@ -1,17 +1,17 @@
-import { HTMLAttributes } from "react"
+import { HTMLAttributes } from 'react'

-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'

 const Section = ({ children, className }: HTMLAttributes<HTMLDivElement>) => {
  return (
-    <div className={cn("divide-y divide-tuatara-300", className)}>
+    <div className={cn('divide-y divide-tuatara-300 w-full', className)}>
      {children}
    </div>
  )
 }

 const Divider = {
-  displayName: "Divider",
+  displayName: 'Divider',
  Section,
 }

--- a/components/sections/NewsSection.tsx
+++ b/components/sections/NewsSection.tsx
@@ -105,7 +105,7 @@ export const NewsSection = ({ lang }: NewsSectionProps) => {
          </div>
          <Link
            href={siteConfig?.links?.discordAnnouncementChannel}
-            className="ml-auto flex items-center gap-1"
+            className="mx-auto flex items-center gap-1"
            target="_blank"
            rel="noopener noreferrer"
            passHref
--- a/components/sections/WhatWeDo.tsx
+++ b/components/sections/WhatWeDo.tsx
@@ -1,48 +1,44 @@
-"use client"
+'use client'

-import { LangProps } from "@/types/common"
-import { useTranslation } from "@/app/i18n/client"
+import { LangProps } from '@/types/common'
+import { useTranslation } from '@/app/i18n/client'

-import { Icons } from "../icons"
-import { AppContent } from "../ui/app-content"
+import { Icons } from '../icons'
+import { AppContent } from '../ui/app-content'

-type WhatWeDoContent = {
-  title: string
-  description: string
-  icon: any
-}
+type WhatWeDoContent = { title: string; description: string; icon: any }

-export const WhatWeDo = ({ lang }: LangProps["params"]) => {
-  const { t } = useTranslation(lang, "what-we-do-section")
+export const WhatWeDo = ({ lang }: LangProps['params']) => {
+  const { t } = useTranslation(lang, 'what-we-do-section')

  const content: WhatWeDoContent[] = [
    {
-      title: t("privacy.title"),
-      description: t("privacy.description"),
+      title: t('privacy.title'),
+      description: t('privacy.description'),
      icon: Icons.privacy,
    },
    {
-      title: t("scaling.title"),
-      description: t("scaling.description"),
+      title: t('scaling.title'),
+      description: t('scaling.description'),
      icon: Icons.scaling,
    },
    {
-      title: t("explorations.title"),
-      description: t("explorations.description"),
+      title: t('explorations.title'),
+      description: t('explorations.description'),
      icon: Icons.explorations,
    },
  ]

  return (
    <div className="bg-cover-gradient">
-      <AppContent className="mx-auto max-w-[978px]">
+      <AppContent className="mx-auto">
        <section className="flex flex-col gap-16 py-16 md:pb-24">
          <div className="flex flex-col text-center">
            <h6 className="py-6 font-sans text-base font-bold uppercase tracking-[4px] text-tuatara-950">
-              {t("whatWeDo")}
+              {t('whatWeDo')}
            </h6>
            <h3 className="font-display text-[18px] font-bold text-tuatara-950 md:text-3xl">
-              {t("whatWeDoDescription")}
+              {t('whatWeDoDescription')}
            </h3>
          </div>
          <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
@@ -52,7 +48,9 @@ export const WhatWeDo = ({ lang }: LangProps["params"]) => {
                key={index}
              >
                <div className="flex items-center gap-2">
-                  <item.icon />
+                  <div className="w-4">
+                    <item.icon />
+                  </div>
                  <h6 className="font-sans text-base font-bold uppercase tracking-[4px] text-anakiwa-700">
                    {item.title}
                  </h6>
--- a/components/ui/label.tsx
+++ b/components/ui/label.tsx
@@ -1,15 +1,15 @@
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'

 interface LabelProps {
  label: React.ReactNode
  className?: string
 }

-const SectionTitle = ({ label, className = "" }: LabelProps) => {
+const SectionTitle = ({ label, className = '' }: LabelProps) => {
  return (
    <span
      className={cn(
-        "font-sans text-base font-bold uppercase leading-[24px] tracking-[3.36px] text-tuatara-950",
+        'font-sans text-base font-bold uppercase leading-[24px] tracking-[3.36px] text-tuatara-950',
        className
      )}
    >
@@ -18,16 +18,21 @@ const SectionTitle = ({ label, className = "" }: LabelProps) => {
  )
 }

-const MainPageTitle = ({ label }: LabelProps) => {
+const MainPageTitle = ({ label, className = '' }: LabelProps) => {
  return (
-    <span className="text-4xl font-bold break-words font-display text-tuatara-950 lg:text-6xl xl:text-7xl">
+    <span
+      className={cn(
+        'text-4xl font-bold break-words font-display text-tuatara-950 lg:text-6xl xl:text-7xl',
+        className
+      )}
+    >
      {label}
    </span>
  )
 }

 const Label = {
-  displayName: "Label",
+  displayName: 'Label',
  PageTitle: MainPageTitle,
  Section: SectionTitle,
 }
--- a/data/events/devcon-7.ts
+++ b/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',
    },
  },
 ]
--- a/hooks/useAppSettings.ts
+++ b/hooks/useAppSettings.ts
@@ -28,6 +28,7 @@ export function useAppSettings(lang: LocaleTypes) {
    {
      title: t('menu.programs'),
      href: '/programs',
+      onlyFooter: true,
    },
    {
      title: t('menu.about'),
--- a/locales/en/devcon-7.json
+++ b/locales/en/devcon-7.json
@@ -0,0 +1,3 @@
+{
+  "showMore": "Show More"
+}
--- a/package.json
+++ b/package.json
@@ -48,9 +48,11 @@
    "react-i18next": "^14.0.0",
    "react-icons": "^5.3.0",
    "react-markdown": "^8.0.7",
+    "react-slick": "^0.30.3",
    "react-use": "^17.4.0",
    "remark-gfm": "^3.0.1",
    "sharp": "^0.33.2",
+    "slick-carousel": "^1.8.1",
    "tailwind-merge": "^1.12.0",
    "tailwindcss-animate": "^1.0.5",
    "zustand": "^4.4.1"
@@ -61,6 +63,7 @@
    "@types/node": "^17.0.45",
    "@types/react": "^18.2.7",
    "@types/react-dom": "^18.2.4",
+    "@types/react-slick": "^0.23.13",
    "@typescript-eslint/parser": "^5.59.7",
    "autoprefixer": "^10.4.14",
    "eslint": "^9.19.0",
--- a/public/images/devcon-7-desktop.svg
+++ b/public/images/devcon-7-desktop.svg
--- a/public/images/devcon-7/devcon-7-overview-1.jpg
+++ b/public/images/devcon-7/devcon-7-overview-1.jpg
--- a/public/images/devcon-7/devcon-7-overview-2.jpg
+++ b/public/images/devcon-7/devcon-7-overview-2.jpg
--- a/public/images/devcon-7/devcon-7-overview-3.jpg
+++ b/public/images/devcon-7/devcon-7-overview-3.jpg
--- a/public/images/devcon-7/devcon-7-overview-4.jpg
+++ b/public/images/devcon-7/devcon-7-overview-4.jpg
--- a/public/images/devcon-7/devcon-7-overview-5.jpg
+++ b/public/images/devcon-7/devcon-7-overview-5.jpg
--- a/public/images/devcon-7/devcon-7-overview-6.jpg
+++ b/public/images/devcon-7/devcon-7-overview-6.jpg
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -76,6 +76,14 @@
  }
 }

+.slick-dots ul li div {
+  background: #C2E8F5 !important;
+}
+
+.slick-dots li.slick-active div {
+  background: #29acce !important;
+}
+
@layer base {
  * {
    @apply border-border;
@@ -86,7 +94,9 @@
  }
  body {
    @apply font-sans bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
+    font-feature-settings:
+      'rlig' 1,
+      'calt' 1;
  }
  h1,
  h2,
@@ -108,24 +118,24 @@
 * Custom styles for Markdown component
 */
@layer base {
-  table[data-component="table"] {
+  table[data-component='table'] {
    @apply overflow-hidden !border !border-solid !border-tuatara-300 rounded-lg table-auto bg-white;
  }

-  table[data-component="table"] tr {
+  table[data-component='table'] tr {
    @apply !divide-solid !divide-x !divide-tuatara-300;
  }

-  table[data-component="table"] thead > tr > th {
+  table[data-component='table'] thead > tr > th {
    @apply px-4 py-1 text-sm font-medium text-left text-anakiwa-500;
    @apply border border-tuatara-300;
  }

-  table[data-component="table"] tbody > tr > td {
+  table[data-component='table'] tbody > tr > td {
    @apply px-4 py-1 text-sm font-medium text-left text-tuatara-700;
  }

-  table[data-component="table"] tbody > tr:not(:last-child) {
+  table[data-component='table'] tbody > tr:not(:last-child) {
    @apply border-b border-tuatara-300;
  }
 }
@@ -139,32 +149,32 @@
 }

 /*Accordion open state*/
-.accordion > [data-state="open"] [data-icon="minus"] {
+.accordion > [data-state='open'] [data-icon='minus'] {
  @apply block;
 }
-.accordion > [data-state="open"] [data-icon="plus"] {
+.accordion > [data-state='open'] [data-icon='plus'] {
  @apply hidden;
 }

 /*Accordion close state*/
-.accordion > [data-state="closed"] [data-icon="plus"] {
+.accordion > [data-state='closed'] [data-icon='plus'] {
  @apply block;
 }
-.accordion > [data-state="closed"] [data-icon="minus"] {
+.accordion > [data-state='closed'] [data-icon='minus'] {
  @apply hidden;
 }

 /*Accordion hover state content*/
-.accordion.hover-icon > [data-state="closed"] [data-icon="plus"] {
+.accordion.hover-icon > [data-state='closed'] [data-icon='plus'] {
  @apply hidden;
 }
-.accordion.hover-icon > [data-state="closed"]:hover [data-icon="plus"] {
+.accordion.hover-icon > [data-state='closed']:hover [data-icon='plus'] {
  @apply block;
 }

 /*Accordion hover state content*/
@media screen and (max-width: 768px) {
-  .accordion.hover-icon > [data-state="closed"] [data-icon="plus"] {
+  .accordion.hover-icon > [data-state='closed'] [data-icon='plus'] {
    @apply block;
  }
 }
--- a/yarn.lock
+++ b/yarn.lock
@@ -1018,9 +1018,9 @@
  integrity sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==

 "@types/node@*":
-  version "22.13.1"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.13.1.tgz#a2a3fefbdeb7ba6b89f40371842162fac0934f33"
-  integrity sha512-jK8uzQlrvXqEU91UxiK5J7pKHyzgnI1Qnl0QDHIgVGuolJhRb9EEl28Cj9b3rGR8B2lhFCtvIm5os8lFnO/1Ew==
+  version "22.13.2"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.13.2.tgz#6f401c5ccadac75354f5652128e9fcc3b0cf23b7"
+  integrity sha512-Z+r8y3XL9ZpI2EY52YYygAFmo2/oWfNSj4BCpAXE2McAexDk8VcnBMGC9Djn9gTKt4d2T/hhXqmPzo4hfIXtTg==
  dependencies:
    undici-types "~6.20.0"

@@ -1039,6 +1039,13 @@
  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.5.tgz#45f9f87398c5dcea085b715c58ddcf1faf65f716"
  integrity sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==

+"@types/react-slick@^0.23.13":
+  version "0.23.13"
+  resolved "https://registry.yarnpkg.com/@types/react-slick/-/react-slick-0.23.13.tgz#037434e73a58063047b121e08565f7185d811f36"
+  integrity sha512-bNZfDhe/L8t5OQzIyhrRhBr/61pfBcWaYJoq6UDqFtv5LMwfg4NsVDD2J8N01JqdAdxLjOt66OZEp6PX+dGs/A==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*":
  version "19.0.8"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.0.8.tgz#7098e6159f2a61e4f4cef2c1223c044a9bec590e"
@@ -1504,9 +1511,9 @@ busboy@1.6.0:
    streamsearch "^1.1.0"

 call-bind-apply-helpers@^1.0.0, call-bind-apply-helpers@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz#32e5892e6361b29b0b545ba6f7763378daca2840"
-  integrity sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz#4b5428c222be985d79c3d82657479dbe0b59b2d6"
+  integrity sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==
  dependencies:
    es-errors "^1.3.0"
    function-bind "^1.1.2"
@@ -1587,6 +1594,11 @@ class-variance-authority@^0.4.0:
  resolved "https://registry.yarnpkg.com/class-variance-authority/-/class-variance-authority-0.4.0.tgz#2ff1b5a836a68ce7a2dac0cc12f6fdc50e47f666"
  integrity sha512-74enNN8O9ZNieycac/y8FxqgyzZhZbxmCitAtAeUrLPlxjSd5zA7LfpprmxEcOmQBnaGs5hYhiSGnJ0mqrtBLQ==

+classnames@^2.2.5:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
+
 cli-cursor@^5.0.0:
  version "5.0.0"
  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-5.0.0.tgz#24a4831ecf5a6b01ddeb32fb71a4b2088b0dce38"
@@ -1908,9 +1920,9 @@ eastasianwidth@^0.2.0:
  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==

 electron-to-chromium@^1.5.73:
-  version "1.5.97"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.97.tgz#5c4a4744c79e7c85b187adf5160264ac130c776f"
-  integrity sha512-HKLtaH02augM7ZOdYRuO19rWDeY+QSJ1VxnXFa/XDFLf07HvM90pALIJFgrO+UVaajI3+aJMMpojoUTLZyQ7JQ==
+  version "1.5.98"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.98.tgz#bdd59c95042fa8f6483893602b1530c8752baebc"
+  integrity sha512-bI/LbtRBxU2GzK7KK5xxFd2y9Lf9XguHooPYbcXWy6wUoT8NMnffsvRhPmSeUHLSDKAEtKuTaEtK4Ms15zkIEA==

 emoji-regex@^10.3.0:
  version "10.4.0"
@@ -1927,6 +1939,11 @@ emoji-regex@^9.2.2:
  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==

+enquire.js@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/enquire.js/-/enquire.js-2.1.6.tgz#3e8780c9b8b835084c3f60e166dbc3c2a3c89814"
+  integrity sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==
+
 entities@^4.2.0, entities@^4.5.0:
  version "4.5.0"
  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
@@ -2604,9 +2621,9 @@ globals@^14.0.0:
  integrity sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==

 globals@^15.14.0:
-  version "15.14.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-15.14.0.tgz#b8fd3a8941ff3b4d38f3319d433b61bbb482e73f"
-  integrity sha512-OkToC372DtlQeje9/zHIo5CT8lRP/FUgEOKBEhU4e0abL7J7CD24fD9ohiLN5hagG/kWCYj4K5oaxxtj2Z0Dig==
+  version "15.15.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-15.15.0.tgz#7c4761299d41c32b075715a4ce1ede7897ff72a8"
+  integrity sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==

 globalthis@^1.0.4:
  version "1.0.4"
@@ -3131,6 +3148,13 @@ json-stable-stringify-without-jsonify@^1.0.1:
  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
  integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==

+json2mq@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a"
+  integrity sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==
+  dependencies:
+    string-convert "^0.2.0"
+
 json5@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
@@ -3240,6 +3264,11 @@ lodash.clone@^4.5.0:
  resolved "https://registry.yarnpkg.com/lodash.clone/-/lodash.clone-4.5.0.tgz#195870450f5a13192478df4bc3d23d2dea1907b6"
  integrity sha512-GhrVeweiTD6uTmmn5hV/lzgCQhccwReIVRLHp7LT4SopOjqEZ5BbX8b5WWEtAKasjmy8hR7ZPwsYlxRCku5odg==

+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
+
 lodash.isequal@^4.5.0:
  version "4.5.0"
  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
@@ -4171,9 +4200,9 @@ prelude-ls@^1.2.1:
  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==

 prettier@^3.4.2:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.5.0.tgz#50325a28887c6dfdf2ca3f8eaba02b66a8429ca7"
-  integrity sha512-quyMrVt6svPS7CjQ9gKb3GLEX/rl3BCL2oa/QkNcXv4YNVBC9olt3s+H7ukto06q7B1Qz46PbrKLO34PR6vXcA==
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.5.1.tgz#22fac9d0b18c0b92055ac8fb619ac1c7bef02fb7"
+  integrity sha512-hPpFQvHwL3Qv5AdRvBFMhnKo4tYxp0ReXiPn2bxkiohEX6mBeBwEpBSQTkD458RaaDKQMYSp4hX4UtfUTA5wDw==

 process@^0.11.10:
  version "0.11.10"
@@ -4289,6 +4318,17 @@ react-remove-scroll@^2.6.3:
    use-callback-ref "^1.3.3"
    use-sidecar "^1.1.3"

+react-slick@^0.30.3:
+  version "0.30.3"
+  resolved "https://registry.yarnpkg.com/react-slick/-/react-slick-0.30.3.tgz#3af5846fcbc04c681f8ba92f48881a0f78124a27"
+  integrity sha512-B4x0L9GhkEWUMApeHxr/Ezp2NncpGc+5174R02j+zFiWuYboaq98vmxwlpafZfMjZic1bjdIqqmwLDcQY0QaFA==
+  dependencies:
+    classnames "^2.2.5"
+    enquire.js "^2.1.6"
+    json2mq "^0.2.0"
+    lodash.debounce "^4.0.8"
+    resize-observer-polyfill "^1.5.0"
+
 react-style-singleton@^2.2.2, react-style-singleton@^2.2.3:
  version "2.2.3"
  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.3.tgz#4265608be69a4d70cfe3047f2c6c88b2c3ace388"
@@ -4422,7 +4462,7 @@ remark-rehype@^10.0.0:
    mdast-util-to-hast "^12.1.0"
    unified "^10.0.0"

-resize-observer-polyfill@^1.5.1:
+resize-observer-polyfill@^1.5.0, resize-observer-polyfill@^1.5.1:
  version "1.5.1"
  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
@@ -4701,6 +4741,11 @@ slice-ansi@^7.1.0:
    ansi-styles "^6.2.1"
    is-fullwidth-code-point "^5.0.0"

+slick-carousel@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/slick-carousel/-/slick-carousel-1.8.1.tgz#a4bfb29014887bb66ce528b90bd0cda262cc8f8d"
+  integrity sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==
+
 source-map-js@^1.0.2, source-map-js@^1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
@@ -4765,6 +4810,11 @@ string-argv@^0.3.2:
  resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
  integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==

+string-convert@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
+  integrity sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==
+
 "string-width-cjs@npm:string-width@^4.2.0":
  version "4.2.3"
  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"