chore: update agenda

package.json

@@ -52,7 +52,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "clsx": "^1.2.1",
+    "clsx": "^2.1.1",
     "dotenv": "^16.3.1",
     "dotenv-cli": "^7.2.1",
     "eslint": "^8",

public/assets/lightning-talks/4seas.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.5263 4C35.8096 4.03712 36.0937 4.0678 36.3758 4.11194C38.0357 4.37263 39.5087 5.05097 40.7853 6.13817C42.4547 7.56002 43.5141 9.35303 43.867 11.5196C44.3218 14.3121 43.6138 16.7925 41.6888 18.8854C40.1951 20.5095 38.3142 21.4479 36.1674 21.8837C35.2752 22.0649 34.3716 22.0947 33.4654 22.104C32.5113 22.1137 31.5568 22.1149 30.6036 22.1517C29.79 22.1832 28.9826 22.289 28.224 22.6134C27.6841 22.8443 27.1977 23.1702 26.7346 23.5259C26.4227 23.7655 26.4388 24.2521 26.7504 24.4938C27.718 25.2444 28.7897 25.7403 30.0312 25.8014C30.7553 25.8371 31.4797 25.8648 32.2043 25.8856C33.1044 25.9113 34.0089 25.8771 34.904 25.9549C37.532 26.1831 39.8291 27.1689 41.6666 29.0996C42.9792 30.4785 43.7553 32.1268 43.9441 34.0277C44.2131 36.7322 43.4139 39.0972 41.5821 41.0965C40.1515 42.6584 38.3692 43.6079 36.2706 43.9019C33.6215 44.2731 31.2587 43.5936 29.2492 41.8108C27.5906 40.339 26.6145 38.4662 26.1497 36.3131C25.9629 35.4475 25.9103 34.5698 25.903 33.6869C25.8942 32.645 25.8898 31.6028 25.8489 30.562C25.8165 29.7387 25.725 28.9116 25.3552 28.1623C25.1114 27.6681 24.8 27.2034 24.4858 26.7483C24.2554 26.4146 23.7626 26.4236 23.5138 26.7466C22.826 27.6403 22.3164 28.6159 22.2334 29.7645C22.1785 30.5261 22.1407 31.2895 22.1162 32.0526C22.0855 33.0062 22.1276 33.9648 22.0478 34.9135C21.8265 37.5438 20.8414 39.8457 18.9 41.6723C17.1206 43.3467 14.9823 44.1182 12.5414 43.9797C8.42543 43.7456 4.99323 40.7967 4.19285 36.7638C3.62427 33.8988 4.31095 31.3339 6.27947 29.1548C7.50928 27.7932 9.04779 26.9056 10.7982 26.3778C11.8588 26.058 12.9445 25.9119 14.0512 25.9072C14.9715 25.9031 15.8917 25.9043 16.8117 25.8821C17.693 25.8607 18.5703 25.7871 19.4207 25.5252C19.958 25.3598 20.4239 25.0605 20.8867 24.7542C21.0004 24.6791 21.1126 24.6017 21.2217 24.5201C21.5862 24.2481 21.5856 23.7658 21.2299 23.4861C20.1959 22.6731 19.0275 22.2218 17.71 22.1742C17.0049 22.1488 16.2992 22.1306 15.5938 22.1134C14.7911 22.0938 13.9863 22.1046 13.1854 22.0555C11.7211 21.9661 10.3314 21.5756 9.02352 20.9096C7.63878 20.2043 6.47006 19.2399 5.56911 17.9659C4.70909 16.749 4.19226 15.3987 4.05721 13.9126C3.81429 11.2402 4.60269 8.89974 6.40692 6.92348C7.86679 5.32481 9.69061 4.37994 11.8415 4.08271C12.0713 4.05085 12.3022 4.02747 12.5326 4C12.8638 4 13.1947 4 13.5259 4C13.5727 4.00877 13.6195 4.01929 13.6668 4.02601C14.0615 4.08125 14.4611 4.11164 14.8499 4.19465C16.6418 4.57721 18.1531 5.46101 19.387 6.81008C21.0109 8.58585 21.8575 10.7033 22.0493 13.0834C22.1182 13.9406 22.084 14.8057 22.1089 15.667C22.1314 16.445 22.16 17.2233 22.2042 18.0004C22.274 19.2288 22.7605 20.2952 23.5103 21.2521C23.7608 21.5718 24.2557 21.5911 24.4834 21.2582C24.8091 20.7821 25.1327 20.2961 25.3815 19.7782C25.7448 19.0213 25.8191 18.1872 25.8504 17.3589C25.8822 16.5175 25.8796 15.6749 25.8863 14.8326C25.8942 13.8439 25.9205 12.8572 26.1184 11.8831C26.5613 9.70199 27.5207 7.79909 29.1653 6.27466C30.4726 5.06266 32.0132 4.32733 33.7826 4.08271C34.0033 4.05231 34.2246 4.02747 34.4459 4C34.8063 4 35.1665 4 35.5269 4L35.5263 4Z" fill="black"/>
+</svg>

public/assets/lightning-talks/registry-chain.svg

@@ -0,0 +1,15 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_4121_9141" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="2" y="3" width="44" height="43">
+<path d="M45.0009 3H2.99911V45.0018H45.0009V3Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_4121_9141)">
+<path d="M23.0894 39.3256C13.723 39.3256 6.33072 32.3113 6.33072 23.4489C6.33072 14.4606 13.807 7.57227 23.0894 7.57227C31.5738 7.57227 36.53 10.5964 39.4701 15.2586C40.9402 17.5687 41.6542 20.2988 41.6542 23.4489C41.6542 29.7912 38.5041 34.5374 33.2958 37.2675C30.7337 38.6116 27.3316 39.3256 23.0894 39.3256ZM22.0814 37.3935C29.6837 37.3935 35.984 31.2193 35.984 23.4909C35.984 15.8466 29.7257 9.58835 22.0814 9.58835C14.311 9.58835 8.3048 16.0566 8.3048 23.4909C8.3048 28.4471 10.9509 33.1093 15.1931 35.5454C17.3352 36.7635 19.6033 37.3935 22.0814 37.3935Z" fill="white"/>
+<mask id="mask1_4121_9141" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="5" y="6" width="38" height="35">
+<path d="M42.9499 6.28516H5.04988V40.5756H42.9499V6.28516Z" fill="white"/>
+<path d="M23.0893 39.3256C13.7229 39.3256 6.33064 32.3113 6.33064 23.4489C6.33064 14.4606 13.807 7.57227 23.0893 7.57227C31.5737 7.57227 36.5299 10.5964 39.47 15.2586C40.9401 17.5687 41.6541 20.2988 41.6541 23.4489C41.6541 29.7912 38.504 34.5374 33.2958 37.2675C30.7337 38.6116 27.3315 39.3256 23.0893 39.3256ZM22.0813 37.3935C29.6836 37.3935 35.9839 31.2193 35.9839 23.4909C35.9839 15.8466 29.7256 9.58835 22.0813 9.58835C14.311 9.58835 8.30472 16.0566 8.30472 23.4909C8.30472 28.4471 10.9508 33.1093 15.193 35.5454C17.3351 36.7635 19.6032 37.3935 22.0813 37.3935Z" fill="black"/>
+</mask>
+<g mask="url(#mask1_4121_9141)">
+<path d="M39.4701 15.2586L38.4292 15.915L38.4306 15.9171L38.4319 15.9193L39.4701 15.2586ZM33.2958 37.2676L32.7245 36.1777L32.7242 36.1779L33.2958 37.2676ZM15.193 35.5455L14.5803 36.6126L14.5825 36.6139L14.5848 36.6151L15.193 35.5455ZM23.0894 38.0951C14.3396 38.0951 7.5612 31.5705 7.5612 23.449H5.10016C5.10016 33.0522 13.1063 40.5562 23.0894 40.5562V38.0951ZM7.5612 23.449C7.5612 15.2116 14.4129 8.80284 23.0894 8.80284V6.3418C13.2011 6.3418 5.10016 13.7096 5.10016 23.449H7.5612ZM23.0894 8.80284C31.2266 8.80284 35.7519 11.6696 38.4292 15.915L40.5109 14.6023C37.308 9.52328 31.9209 6.3418 23.0894 6.3418V8.80284ZM38.4319 15.9193C39.7553 17.9988 40.4236 20.4902 40.4236 23.449H42.8847C42.8847 20.1075 42.125 17.1386 40.5082 14.598L38.4319 15.9193ZM40.4236 23.449C40.4236 29.3128 37.5462 33.6502 32.7245 36.1777L33.8671 38.3574C39.4619 35.4247 42.8847 30.2697 42.8847 23.449H40.4236ZM32.7242 36.1779C30.3942 37.4002 27.2067 38.0951 23.0894 38.0951V40.5562C27.4564 40.5562 31.0732 39.823 33.8674 38.3572L32.7242 36.1779ZM22.0813 38.6241C30.356 38.6241 37.2144 31.9062 37.2144 23.491H34.7534C34.7534 30.5324 29.0113 36.163 22.0813 36.163V38.6241ZM37.2144 23.491C37.2144 15.1671 30.4052 8.35788 22.0813 8.35788V10.8189C29.0461 10.8189 34.7534 16.5262 34.7534 23.491H37.2144ZM22.0813 8.35788C13.5977 8.35788 7.07424 15.4113 7.07424 23.491H9.53528C9.53528 16.702 15.0243 10.8189 22.0813 10.8189V8.35788ZM7.07424 23.491C7.07424 28.8756 9.94546 33.951 14.5803 36.6126L15.8058 34.4784C11.9563 32.2678 9.53528 28.0188 9.53528 23.491H7.07424ZM14.5848 36.6151C16.9036 37.9337 19.3803 38.6241 22.0813 38.6241V36.163C19.8262 36.163 17.7666 35.5934 15.8013 34.4758L14.5848 36.6151Z" fill="black"/>
+</g>
+</g>
+</svg>

src/components/Cards/SpeakerCard.tsx

@@ -10,6 +10,7 @@ interface SpeakerCardProps {
   bio: string
   expanded: boolean
   onToggle: () => void
+  noSeeMore?: boolean
   className?: string
 }
 
@@ -22,6 +23,7 @@ const SpeakerCard: React.FC<SpeakerCardProps> = ({
   bio,
   expanded,
   onToggle,
+  noSeeMore,
   className,
 }) => {
   return (
@@ -34,9 +36,11 @@ const SpeakerCard: React.FC<SpeakerCardProps> = ({
         <SpeakerTitle>{title}</SpeakerTitle>
         <SpeakerOrg titleLines={title.includes('\n') ? 1 : 2}>{org}</SpeakerOrg>
         <SpeakerBio expanded={expanded}>{bio}</SpeakerBio>
-        <ReadMoreButton onClick={onToggle}>
-          {expanded ? 'Read less' : 'Read more'}
-        </ReadMoreButton>
+        {noSeeMore ? null : (
+          <ReadMoreButton onClick={onToggle}>
+            {expanded ? 'Read less' : 'Read more'}
+          </ReadMoreButton>
+        )}
       </CardContent>
     </CardWrapper>
   )

src/components/Footer/Footer.tsx

@@ -18,10 +18,18 @@ const Footer: React.FC = () => {
       </TopSection>
       <BottomSection>
         <BusinessUnits>
-          Built by{' '}
-          <Link href="https://free.technology/" target="_blank">
-            IFT
-          </Link>
+          <div>
+            Built by{' '}
+            <Link href="https://free.technology/" target="_blank">
+              IFT
+            </Link>
+          </div>
+          <div>
+            Organised by{' '}
+            <Link href="https://logos.co/" target="_blank">
+              Logos
+            </Link>
+          </div>
         </BusinessUnits>
         <LegalLinks />
         <InfraLinks />
@@ -34,7 +42,7 @@ const FooterWrapper = styled.footer`
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  margin-top: 66px;
+  margin-top: 200px;
 
   a {
     text-decoration: underline;
@@ -59,7 +67,7 @@ const FooterWrapper = styled.footer`
   }
 
   @media (max-width: 768px) {
-    margin-top: 96px;
+    margin-top: 182px;
   }
 `
 
@@ -117,7 +125,7 @@ const BottomSection = styled.section`
   }
 `
 
-const BusinessUnits = styled.p`
+const BusinessUnits = styled.div`
   color: #000;
   font-size: 14px;
   width: 50%;

src/components/Header/Navbar.tsx

@@ -3,15 +3,15 @@ import Link from 'next/link'
 import React from 'react'
 
 export const navItems = [
-  { name: 'Participants', href: '#participants' },
   { name: 'Collaborators', href: '#collaborators' },
+  { name: 'Participants', href: '#participants' },
   { name: 'About', href: '#about-logos' },
+  { name: 'Agenda', href: '#agenda' },
+  { name: 'Lightning Talks', href: '#lightning-talks' },
   { name: 'Articles', href: '#articles' },
-  { name: 'Merchandise', href: '#merchandise' },
   // { name: 'Location', href: '#location' },
   // { name: 'Programme', href: '#programme' },
   { name: 'FAQs', href: '#faqs' },
-  { name: 'Lightning Talks', href: '#lightning-talks' },
 ]
 
 const Navbar: React.FC = () => {

src/components/Home/AgendasSection.tsx

@@ -1,146 +1,379 @@
 import { agendaData } from '@/configs/data.configs'
+import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
+import { useState } from 'react'
 import { Section, SectionTitle } from './StyledComponents'
 
-const StyledTable = styled.table`
+type Session = {
+  title: string
+  speakers: string[]
+  startTime: string
+  endTime: string
+  shrink?: boolean
+  highlight?: boolean
+  merged?: boolean
+  removeBorderRight?: boolean
+  gray?: boolean
+}
+
+type AgendaColumnProps = {
+  sessions: Session[]
+  columnKey: string
+  mobileSelected: string
+  seeMore: boolean
+}
+
+const AgendasSection: React.FC = () => {
+  const [mobileSelected, setMobileSelected] = useState('mainStage')
+  const [seeMore, setSeeMore] = useState(false)
+
+  return (
+    <Section id="agenda">
+      <SectionTitle>Agenda</SectionTitle>
+      <StyledTable>
+        <HeaderContainer>
+          <div></div>
+          <ColumnButton
+            isMobileActive={mobileSelected === 'mainStage'}
+            onClick={() => setMobileSelected('mainStage')}
+          >
+            Main Stage
+          </ColumnButton>
+          <div></div>
+          <ColumnButton
+            isMobileActive={mobileSelected === 'demoRoom'}
+            onClick={() => setMobileSelected('demoRoom')}
+          >
+            Demo Room
+          </ColumnButton>
+          <div></div>
+          <ColumnButton
+            isMobileActive={mobileSelected === 'roundTable'}
+            onClick={() => setMobileSelected('roundTable')}
+          >
+            Round Table
+          </ColumnButton>
+        </HeaderContainer>
+        <Items>
+          <SessionColumn
+            sessions={agendaData.mainStage}
+            columnKey="mainStage"
+            mobileSelected={mobileSelected}
+            seeMore={seeMore}
+          />
+          <SessionColumn
+            sessions={agendaData.demoRoom}
+            columnKey="demoRoom"
+            mobileSelected={mobileSelected}
+            seeMore={seeMore}
+          />
+          <SessionColumn
+            sessions={agendaData.roundTable}
+            columnKey="roundTable"
+            mobileSelected={mobileSelected}
+            seeMore={seeMore}
+          />
+          {!seeMore && <Gradient></Gradient>}
+        </Items>
+        <SeeMoreButton onClick={() => setSeeMore((prev) => !prev)}>
+          {seeMore ? 'See Less' : 'See More'}
+        </SeeMoreButton>
+      </StyledTable>
+    </Section>
+  )
+}
+
+const SessionColumn: React.FC<AgendaColumnProps> = ({
+  sessions,
+  columnKey,
+  mobileSelected,
+  seeMore,
+  ...props
+}) => {
+  const groupSessions = (sessions: Session[]) => {
+    const groupedSessions: { session: Session; count: number }[] = []
+
+    for (let i = 0; i < sessions.length; i++) {
+      if (
+        groupedSessions.length > 0 &&
+        groupedSessions[groupedSessions.length - 1].session.title ===
+          sessions[i].title &&
+        JSON.stringify(
+          groupedSessions[groupedSessions.length - 1].session.speakers,
+        ) === JSON.stringify(sessions[i].speakers) &&
+        groupedSessions[groupedSessions.length - 1].session.startTime ===
+          sessions[i].startTime &&
+        groupedSessions[groupedSessions.length - 1].session.endTime ===
+          sessions[i].endTime
+      ) {
+        groupedSessions[groupedSessions.length - 1].count += 1
+      } else {
+        groupedSessions.push({ session: sessions[i], count: 1 })
+      }
+    }
+    return groupedSessions
+  }
+
+  const groupedSessions = groupSessions(
+    seeMore ? sessions : sessions.slice(0, 4),
+  )
+
+  return (
+    <Column
+      {...props}
+      mobileSelected={mobileSelected === columnKey ? true : false}
+    >
+      {groupedSessions.map(({ session, count }, index) => (
+        <SessionItem
+          key={`${columnKey}-${index}`}
+          count={count}
+          hasBorderRight={columnKey !== 'roundTable'}
+          hasBorderBottom={!(index === groupedSessions.length - 1)}
+          mobileRemove={session.title?.length === 0}
+          shrink={session.shrink}
+          highlight={session.highlight}
+          merged={session.merged}
+          removeBorderRight={session.removeBorderRight}
+          gray={session.gray}
+        >
+          <TimeSlot
+            count={count}
+            shrink={session.shrink}
+            merged={session.merged}
+          >
+            {session.shrink
+              ? session.startTime
+              : session.title?.length > 0
+              ? `${session.startTime} - ${session.endTime}`
+              : ''}
+          </TimeSlot>
+          <TableData>
+            <TableContent>
+              <h4>{session.title}</h4>
+              <div>
+                {session.speakers.map((speaker, i) => (
+                  <SpeakerInfo key={i}>
+                    {speaker}
+                    {i !== session.speakers.length - 1 && ', '}
+                  </SpeakerInfo>
+                ))}
+              </div>
+            </TableContent>
+          </TableData>
+        </SessionItem>
+      ))}
+    </Column>
+  )
+}
+
+const StyledTable = styled.div`
   width: 100%;
   border-collapse: collapse;
+  margin-top: 24px;
+  position: relative;
 
   h4 {
     font-size: 18px;
     text-transform: uppercase;
     text-overflow: ellipsis;
     min-height: 80px;
+    white-space: pre-wrap;
   }
 
-  tbody {
-    border: 1px dashed #000;
+  @media (max-width: ${breakpoints.sm}px) {
+    h4 {
+      font-size: 14px;
+      min-height: unset;
+      padding-bottom: 16px;
+    }
   }
 `
 
-const TableHeader = styled.th`
-  padding: 10px;
-  font-weight: bold;
-  text-align: center;
-  font-weight: 400;
+const HeaderContainer = styled.div`
+  display: grid;
+  grid-template-columns: 52px 1fr 52px 1fr 52px 1fr;
+
+  @media (max-width: 1024px) {
+    display: flex;
+    width: 100%;
+  }
 `
 
-const TableRow = styled.tr``
+const ColumnButton = styled.button<{ isMobileActive: boolean }>`
+  font-size: 14px;
+  text-transform: uppercase;
+  text-align: center;
+  margin-bottom: 18px;
+  border: none;
+  background: none;
 
-const TableData = styled.td`
-  padding: 24px;
-  font-size: 12px;
-  height: 190px;
-  border-bottom: 1px dashed #000;
-  width: 33%;
+  @media (max-width: 1024px) {
+    background-color: ${({ isMobileActive }) =>
+      isMobileActive ? '#000' : 'transparent'};
+
+    color: ${({ isMobileActive }) => (isMobileActive ? '#fff' : '#000')};
+
+    border-radius: 56px;
+    font-size: 12px;
+    line-height: 16px;
+    padding: 10px 16px;
+    cursor: pointer;
+  }
+`
+
+const Items = styled.div`
+  display: flex;
+  gap: 1px;
+  border: 1px dashed #000;
+  position: relative;
+`
+
+const Column = styled.div<{ mobileSelected: boolean }>`
+  display: flex;
+  flex-direction: column;
+  width: calc(100% / 3);
+
+  @media (max-width: 1024px) {
+    display: ${({ mobileSelected }) => (mobileSelected ? 'flex' : 'none')};
+    width: 100%;
+  }
+`
+
+const SessionItem = styled.div<{
+  count: number
+  hasBorderRight: boolean
+  hasBorderBottom: boolean
+  mobileRemove: boolean
+  shrink?: boolean
+  highlight?: boolean
+  merged?: boolean
+  removeBorderRight?: boolean
+  gray?: boolean
+}>`
+  display: flex;
+  align-items: center;
+  height: ${({ count, shrink }) => (shrink ? 76 : 190 * count)}px;
+
+  border-bottom: ${({ hasBorderBottom }) =>
+    hasBorderBottom ? '1px dashed #000' : 'none'};
+
+  border-right: ${({ hasBorderRight, merged, removeBorderRight }) =>
+    merged || removeBorderRight
+      ? '1px solid #fafafa'
+      : hasBorderRight
+      ? '1px dashed #000'
+      : 'none'};
+
+  background-color: ${({ highlight, gray }) =>
+    highlight || gray ? '#fafafa' : '#fff'};
+
+  color: ${({ merged }) => (merged ? '#fafafa' : '#000')};
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    height: ${({ shrink }) => (shrink ? '76px' : '156px')};
+
+    display: ${({ mobileRemove }) => (mobileRemove ? 'none' : 'flex')};
+    color: #000;
+  }
 `
+
+const TimeSlot = styled.div<{
+  count: number
+  shrink?: boolean
+  merged?: boolean
+}>`
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
 
-const TimeSlot = styled.td`
   font-size: 14px;
-  padding: 0px 15px 0px 16px;
   writing-mode: vertical-rl;
   transform: rotate(180deg);
   text-align: center;
   width: 52px;
+  height: ${({ count, shrink }) => (shrink ? 75 : 189 * count)}px;
   background-color: #fafafa;
 
-  border-bottom: 1px dashed #000;
-  border-left: 1px dashed #000;
+  border-left: ${({ merged }) =>
+    merged ? '1px solid #fafafa' : '1px dashed #000'};
+
+  @media (max-width: 1024px) {
+    height: ${({ shrink }) => (shrink ? '75px' : '154px')};
+    color: #000;
+    border-left: 1px dashed #000;
+  }
+`
+
+const TableData = styled.div`
+  font-size: 12px;
+  padding: 24px;
+  height: 100%;
+
+  overflow-y: scroll;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  -ms-overflow-style: none;
 `
 
 const SpeakerInfo = styled.span`
-  font-size: 10px;
-  opacity: 0.5;
-  margin-top: 5px;
   font-size: 14px;
+  opacity: 0.5;
+  text-transform: uppercase;
+
+  @media (max-width: ${breakpoints.sm}px) {
+    font-size: 12px;
+  }
 `
 
 const TableContent = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  gap: 24px;
   height: 100%;
 `
 
-const AgendasSection = () => {
-  return (
-    <Section id="about-logos">
-      <SectionTitle>About</SectionTitle>
-      <StyledTable>
-        <thead>
-          <TableRow>
-            <TableHeader></TableHeader>
-            <TableHeader>Main Stage</TableHeader>
-            <TableHeader></TableHeader>
-            <TableHeader>Demo Room</TableHeader>
-            <TableHeader></TableHeader>
-            <TableHeader>Round Table</TableHeader>
-          </TableRow>
-        </thead>
-        <tbody>
-          {agendaData.map((item, index) => (
-            <TableRow key={index}>
-              <TimeSlot>{item.time}</TimeSlot>
-              <TableData>
-                {item.sessions.mainStage && (
-                  <TableContent>
-                    <h4>{item.sessions.mainStage.title}</h4>
-                    <div>
-                      {item.sessions.mainStage.speakers.map((speaker, i) => (
-                        <SpeakerInfo key={i}>
-                          {speaker}
-                          {i !== item.sessions.mainStage.speakers.length - 1 &&
-                            ', '}
-                        </SpeakerInfo>
-                      ))}
-                    </div>
-                  </TableContent>
-                )}
-              </TableData>
-              <TimeSlot>{item.time}</TimeSlot>
-              <TableData>
-                {item.sessions.demoRoom && (
-                  <TableContent>
-                    <h4>{item.sessions.demoRoom.title}</h4>
-                    <div>
-                      {item?.sessions?.demoRoom?.speakers.map((speaker, i) => (
-                        <SpeakerInfo key={i}>
-                          {speaker}
-                          {item.sessions.demoRoom &&
-                            i !== item.sessions.demoRoom.speakers.length - 1 &&
-                            ', '}
-                        </SpeakerInfo>
-                      ))}
-                    </div>
-                  </TableContent>
-                )}
-              </TableData>
-              <TimeSlot>{item.time}</TimeSlot>
-              <TableData>
-                {item.sessions.roundTable && (
-                  <TableContent>
-                    <h4>{item.sessions.roundTable.title}</h4>
-                    <div>
-                      {item.sessions.roundTable.speakers.map((speaker, i) => (
-                        <SpeakerInfo key={i}>
-                          {speaker}
-                          {item.sessions.roundTable &&
-                            i !==
-                              item.sessions.roundTable?.speakers?.length - 1 &&
-                            ', '}
-                        </SpeakerInfo>
-                      ))}
-                    </div>
-                  </TableContent>
-                )}
-              </TableData>
-            </TableRow>
-          ))}
-        </tbody>
-      </StyledTable>
-    </Section>
-  )
-}
+const SeeMoreButton = styled.button`
+  display: block;
+  width: 460px;
+  height: 88px;
+  background: white;
+  border: 1px solid #000;
+  color: black;
+  font-size: 14px;
+  line-height: 20px;
+  margin-top: 24px;
+  margin-inline: auto;
+  padding: 10px 40px;
+  text-transform: uppercase;
+  cursor: pointer;
+
+  @media (max-width: ${breakpoints.sm}px) {
+    width: 100%;
+    height: 44px;
+    padding: 6px 12px;
+    justify-content: center;
+    align-items: center;
+    margin-top: 16px;
+  }
+`
+
+const Gradient = styled.div`
+  position: absolute;
+  width: calc(100% + 8px);
+  left: -4px;
+  bottom: -4px;
+  height: 750px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 57.5%, #fff 100%);
+  z-index: 1000;
+
+  @media (max-width: 1024px) {
+    height: 200px;
+  }
+`
 
 export default AgendasSection

src/components/Home/ArticlesSection.tsx

@@ -80,7 +80,11 @@ const ArticlesSection: React.FC = () => {
           <ArticleItem key={index}>
             {article.image && (
               <CustomLink href={article.href} target="_blank">
-                <ArticleImage src={article.image} alt={article.title} />
+                <ArticleImage
+                  src={article.image}
+                  alt={article.title}
+                  loading="lazy"
+                />
               </CustomLink>
             )}
             <ArticleContent>

src/components/Home/FAQSection.tsx

@@ -13,7 +13,7 @@ const faqData: FAQItem[] = [
   {
     question: 'What should I expect at the event?',
     answer:
-      "Parallel Society Congress is not another crypto conference. The main stage will host inspiring and illuminating talks; the coalition room will feature interactive workshops, demos, and learning; and engaging activations will animate each of the venue's three floors.\n\nThe spacious ground floor area will be open to hang out, network, eat, and drink while you connect with potential collaborators for your alternate-future-building project. We encourage you to engage with the activities you're most passionate about.",
+      "Parallel Society Congress is not another crypto conference. The main stage will host inspiring and illuminating talks; the demo room and round table will feature interactive workshops, demos, and learning; and engaging activations will animate each of the venue's three floors.\n\nThe spacious ground floor area will be open to hang out, network, eat, and drink while you connect with potential collaborators for your alternate-future-building project. We encourage you to engage with the activities you're most passionate about.",
   },
   {
     question:
@@ -26,10 +26,6 @@ const faqData: FAQItem[] = [
     answer:
       'All registration and ticketing will take place through our <a href="https://lu.ma/psc1" target="_blank">Luma page.</a>',
   },
-  {
-    question: 'Is there disabled access?',
-    answer: 'Yes',
-  },
   {
     question: 'Is there parking on site?',
     answer:

src/components/Home/HomePage.tsx

@@ -25,11 +25,12 @@ const HomePage: React.FC = () => {
         <HeroSection />
         <VideoSection />
         {/* <EventInfoSection /> */}
-        <ParticipantsSection />
         <PartnersSection />
+        <ParticipantsSection />
         <AboutLogosSection />
         <AgendasSection />
         {/* <ProgrammeSection /> */}
+        <LightningTalksSection />
         <ArticlesSection />
         <MerchandiseSection />
         {/* <LocationSection /> */}
@@ -38,7 +39,6 @@ const HomePage: React.FC = () => {
         <CustomLink href="https://lu.ma/psc1" target="_blank">
           <RegisterButton id="tickets">REGISTER FOR TICKETS</RegisterButton>
         </CustomLink>
-        <LightningTalksSection />
       </Main>
       <Footer />
     </Container>

src/components/Home/LightningTalksSection.tsx

@@ -1,11 +1,43 @@
 import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
+import clsx from 'clsx'
 import React, { useState } from 'react'
 import Markdown from 'react-markdown'
 import rehypeRaw from 'rehype-raw'
 import LightningTalksModal from '../Modals/LightningTalksModal'
 import { Section } from './StyledComponents'
 
+const presentationData = [
+  {
+    src: '/assets/lightning-talks/liberland.svg',
+    alt: 'Liberland',
+    name: 'Liberland',
+  },
+  {
+    src: '/assets/lightning-talks/zuitzerland.svg',
+    alt: 'Zuitzerland',
+    name: 'Zuitzerland',
+    isLong: true,
+  },
+  {
+    src: '/assets/lightning-talks/gelephu-mindfulness-city.svg',
+    alt: 'Gelephu Mindfulness City',
+    name: 'Gelephu Mindfulness City',
+  },
+  {
+    src: '/assets/lightning-talks/registry-chain.svg',
+    alt: 'RegistryChain',
+    name: 'RegistryChain',
+  },
+  {
+    src: '/assets/lightning-talks/zu-grama.svg',
+    alt: 'Zu-grama',
+    name: 'Zu-grama',
+    isLong: true,
+  },
+  { src: '/assets/lightning-talks/4seas.svg', alt: '4Seas', name: '4Seas' },
+]
+
 const LightningTalksSection: React.FC = () => {
   const [openModal, setOpenModal] = useState(false)
 
@@ -17,26 +49,40 @@ const LightningTalksSection: React.FC = () => {
       />
       <Section id="lightning-talks">
         <Container>
+          <Title>Lightning Talks</Title>
           <Wrapper>
-            <Title>Lightning Talks</Title>
             <Content>
               <Paragraph rehypePlugins={[rehypeRaw]}>
                 {`Do you have an alternative governance project you want to share with aligned and empathetic thinkers? Do you need collaborators, feedback, or just a forum to hone your pitch?
 
 Following our open-source principles, Parallel Society Congress offers a space for lightning talks. The goal is to spotlight innovative teams pushing the frontier of the post-nation-state movement.`}
               </Paragraph>
-              <Divider></Divider>
               <Paragraph rehypePlugins={[rehypeRaw]}>
                 {`We welcome projects in any stage of development from the following areas: cyberstates / network states, charter cities, pop-up communities, SEZs, special administrative zones, network nations, decentralised governance, or the technology needed to support any of the above.
 
 You can present a pitch, a new feature of an established initiative, a project overview, or just a promising idea. Apply below and come share your vision with the community.`}
               </Paragraph>
-
-              <SubmitButton onClick={() => setOpenModal(true)}>
-                Submit
-              </SubmitButton>
             </Content>
           </Wrapper>
+          <PresentedBy>
+            <p className="title">Presentations by:</p>
+            <div className="grid">
+              {presentationData.map(({ src, alt, name, isLong }) => (
+                <div key={name} className="grid-item">
+                  <div
+                    className={clsx(
+                      'grid-img-container',
+                      isLong && 'long-image',
+                    )}
+                  >
+                    <img src={src} alt={alt} />
+                  </div>
+                  <p>{name}</p>
+                </div>
+              ))}
+            </div>
+          </PresentedBy>
+          <SubmitButton onClick={() => setOpenModal(true)}>Submit</SubmitButton>
         </Container>
       </Section>
     </>
@@ -48,17 +94,14 @@ const Container = styled.div`
     text-decoration: none;
   }
 
-  margin-top: 216px;
-
   @media (max-width: ${breakpoints.sm}px) {
     margin-top: 156px;
   }
 `
 
 const Wrapper = styled.div`
-  border-top: 1px dashed #000;
   display: flex;
-  min-height: 460px;
+  margin-top: 24px;
 
   a {
     text-decoration: underline;
@@ -84,7 +127,6 @@ const Title = styled.h2`
   line-height: normal;
   text-transform: uppercase;
   width: 50%;
-  border-right: 1px dashed #000;
 
   @media (max-width: ${breakpoints.sm}px) {
     width: 100%;
@@ -93,21 +135,21 @@ const Title = styled.h2`
 `
 
 const Content = styled.div`
-  width: 50%;
+  display: flex;
+  gap: 16px;
   white-space: pre-wrap;
-  padding-top: 24px;
-  padding-left: 24px;
 
   @media (max-width: ${breakpoints.sm}px) {
     width: 100%;
     padding-left: 0;
-    border-top: 1px dashed #000;
+    flex-direction: column;
   }
 `
 
 const Paragraph = styled(Markdown)`
   font-size: 16px;
   line-height: 24px;
+  width: 50%;
 
   @media (max-width: 768px) {
     font-size: 14px;
@@ -116,35 +158,118 @@ const Paragraph = styled(Markdown)`
   }
 `
 
-const Divider = styled.div`
-  height: 1px;
-  /* border-top: 1px dashed #000; */
-  margin: 16px 0;
-`
+// const Divider = styled.div`
+//   height: 1px;
+//   /* border-top: 1px dashed #000; */
+//   margin: 16px 0;
+// `
 
-const MobileReadMore = styled.p`
-  display: none;
+const PresentedBy = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  margin-top: 24px;
 
   @media (max-width: 768px) {
-    display: block;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px;
-    text-decoration-line: underline;
-    text-overflow: ellipsis;
+    flex-direction: column;
+  }
+
+  .title {
+    font-size: 16px;
+    line-height: 24px;
+    text-transform: uppercase;
+  }
+
+  .grid {
+    border-top: 1px dashed #000;
+    border-bottom: 1px dashed #000;
+
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+
+    row-gap: 8px;
+    column-gap: 40px;
+
+    padding-block: 16px;
+
+    @media (max-width: ${breakpoints.sm}px) {
+      overflow-x: auto;
+      grid-template-columns: repeat(3, 1fr);
+      overflow-y: hidden;
+
+      column-gap: 8px;
+      row-gap: 14px;
+
+      .grid {
+        padding-block: 6px;
+      }
+    }
+  }
+
+  .long-image {
+    width: 110px;
+  }
+
+  .grid-img-container {
+    display: flex;
+    gap: 40px;
+    align-items: center;
+  }
+
+  .grid-item {
+    height: 64px;
+    padding: 14px 8px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    p {
+      font-size: 14px;
+      line-height: 16px;
+      margin-left: 32px;
+    }
+
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+
+    @media (max-width: ${breakpoints.sm}px) {
+      width: 267px;
+
+      flex-shrink: 0;
+
+      p {
+        width: auto;
+      }
+    }
   }
 `
 
-const MobileReadMoreWithMargin = styled(MobileReadMore)`
-  margin-bottom: 24px;
-`
+// const MobileReadMore = styled.p`
+//   display: none;
+
+//   @media (max-width: 768px) {
+//     display: block;
+//     font-size: 14px;
+//     font-style: normal;
+//     font-weight: 400;
+//     line-height: 20px;
+//     text-decoration-line: underline;
+//     text-overflow: ellipsis;
+//   }
+// `
+
+// const MobileReadMoreWithMargin = styled(MobileReadMore)`
+//   margin-bottom: 24px;
+// `
 
 const SubmitButton = styled.button`
   display: flex;
-  padding: 10px 40px;
   justify-content: center;
   align-items: center;
+  width: 460px;
+  height: 88px;
 
   font-size: 14px;
   font-weight: 400;
@@ -155,9 +280,19 @@ const SubmitButton = styled.button`
   color: white;
   border: none;
 
-  margin-top: 40px;
+  margin: 64px auto 0;
 
   cursor: pointer;
+
+  @media (max-width: ${breakpoints.sm}px) {
+    width: 100%;
+    height: 44px;
+
+    font-size: 12px;
+    line-height: 16px;
+
+    margin: 40px auto 0;
+  }
 `
 
 export default LightningTalksSection

src/components/Home/MerchandiseSection.tsx

@@ -96,7 +96,7 @@ const MerchandiseSection: React.FC = () => {
           .slice(0, showAll ? merchandiseData.length : 3)
           .map((item, index) => (
             <ProductItem key={index}>
-              <ProductImage src={item.image} alt={item.name} />
+              <ProductImage src={item.image} alt={item.name} loading="lazy" />
               <ProductInfo>
                 <ProductName>{item.name}</ProductName>
                 {/* <ProductPrice>{item.price}</ProductPrice> */}

src/components/Home/ParticipantsSection.tsx

@@ -13,6 +13,7 @@ interface Speaker {
   org: string
   profileImage?: string
   bio: string
+  noSeeMore?: boolean
 }
 
 const speakersData: Speaker[] = [
@@ -70,6 +71,24 @@ const speakersData: Speaker[] = [
     profileImage: '/assets/participants/david-casey.png',
     bio: "A four-time founder, David Casey enjoys working at the ecosystem level to engineer systemic change and currently is a Director at Funding the Commons, which aims to accelerate blockchain-based public goods funding. In 2013, David became interested in blockchain technology's utility for cross-border payments within one of his own companies. By 2015, he deployed his first blockchain-based asset using Bitcoin’s Colored Coins protocol. Within the blockchain industry, David has worn multiple hats, including roles as a founder and CEO.",
   },
+  {
+    id: 'edan-yago',
+    initial: 'E',
+    name: 'Edan Yago',
+    title: 'CEO & Co-founder',
+    org: 'BitcoinOS',
+    profileImage: '/assets/participants/edan-yago.jpg',
+    bio: 'Edan Yago is CEO and Co-founder of BitcoinOS, the smart contract operating system for Bitcoin. He is also an early core contributor to Sovryn, a decentralised Layer 2 Bitcoin trading and lending and asset management platform. As an anti-finance financier and radical optimist, he is a passionate advocate for the mass adoption of open, borderless and incorruptible finance. Yago is a believer in both the reliable permanence of Bitcoin and the decentralised innovation of crypto.',
+  },
+  {
+    id: 'eric-alston',
+    initial: 'E',
+    name: 'Eric Alston',
+    title: 'Scholar in Residence',
+    org: 'University of Colorado Boulder',
+    profileImage: '/assets/participants/eric-alston.jpg',
+    bio: 'Eric Alston is a Scholar in Residence in the Finance Division at University of Colorado Boulder. Eric’s research applies methodologies and concepts from institutional & organisational analysis and law & economics to studies of constitutions, economic rights on frontiers, and digital governance. Eric is also currently engaged in governance design for several distributed network projects.',
+  },
   {
     id: 'eva-klaus',
     initial: 'E',
@@ -133,6 +152,15 @@ const speakersData: Speaker[] = [
     profileImage: '/assets/participants/jarrad-hope.png',
     bio: 'Jarrad Hope came to Bitcoin in early 2011 through agorism, counter-economics, and crypto anarchy. Seeing that Bitcoin could operate a monetary policy in a hostile environment, he began to view public blockchains as a voluntary social order, one that did not depend on a monopoly of violence. From there, he participated in early attempts to generalise the Bitcoin script to advance institutional libertarianism, ultimately becoming an early contributor to Ethereum. While advancing privacy technologies through the development of the e2e and p2p private messaging client and super app Status, Jarrad realised that privacy technologies are not enough and now advocates for self-sovereign crypto networks and the realisation of a latent cypherpunk dream, the cryptostate.',
   },
+  {
+    id: 'joe-nakamoto',
+    initial: 'J',
+    name: 'Joe Nakamoto',
+    title: 'Host, Parallel Society Congress',
+    org: 'Independent Journalist',
+    profileImage: '/assets/participants/joe-nakamoto.jpg',
+    bio: 'Joe Nakamoto is a journalist is a journalist, documentary maker & MC. As an independent journalist, Joe pushes the boundaries of Bitcoin content, giving away free Sats to strangers and shooting Youtube-friendly challenge videos. Joe is multi-lingual and travels the world trying to make sense of Bitcoin.',
+  },
   {
     id: 'kelsie-nabbens',
     initial: 'K',
@@ -178,6 +206,15 @@ const speakersData: Speaker[] = [
     profileImage: '/assets/participants/mark-lutter.png',
     bio: 'Mark Lutter is the founder and Executive Chairman of the Charter Cities Institute, a nonprofit building the ecosystem for charter cities. He is also the founder and CEO of Braavos Cities, a charter city development company. He has a PhD in economics from George Mason University and has been published or quoted in the New Yorker, Chicago Tribune, Financial Times, and other publications.',
   },
+  {
+    id: 'michel-bauwens',
+    initial: 'M',
+    name: 'Michel Bauwens',
+    title: 'Founder',
+    org: 'P2P Foundation',
+    profileImage: '/assets/participants/michel-bauwens.jpg',
+    bio: "Michel Bauwens is a Belgian who moved to Chiang Mai in 2003. He has been specialising in documenting the emergence and transformative capacity of peer to peer dynamics and commons-based resources at wiki.p2pfoundation.net. In this capacity, he has advised governments (Ecuador) and cities about commons-based policies, worked for the European labour mutual SMart, and participated in the Pontifical Academy of Social Sciences inside the Vatican. He was the first person to tweet about Bitcoin and the host of Satoshi's White Paper.",
+  },
   {
     id: 'peter-ludlow',
     initial: 'P',
@@ -242,12 +279,12 @@ const speakersData: Speaker[] = [
     bio: 'William is the CEO of Cryptic Labs (RNS.ID), leading the Palau Digital Residency Program. He advises at Universidade NOVA de Lisboa, Harvard Blockchain Club, and previously at Stanford DTI. He pioneers secure digital identity solutions, driving innovation in the global identity space.',
   },
   {
-    id: 'yan-mastrosova',
+    id: 'yana-matrosova',
     initial: 'V',
-    name: 'Yana Mastrosova',
+    name: 'Yana Matrosova',
     title: 'Software Developer',
     org: 'Nym',
-    profileImage: '/assets/participants/yan-mastrosova.jpg',
+    profileImage: '/assets/participants/yana-matrosova.jpg',
     bio: 'Yana is a Software Developer at Nym, deeply engaged with the Ukrainian Nym community. She also contributes to RawBox, a community-driven project focused on building a router that runs on the native Nym mixnet. Additionally, Yana is a core contributor to the "Women In Privacy" initiative, advocating for privacy for women and non-binary in the digital space.',
   },
   {

src/components/Home/StyledComponents.tsx

@@ -6,7 +6,7 @@ export const Section = styled.section`
   scroll-margin-top: 80px;
 
   @media (max-width: 768px) {
-    margin-top: 56px;
+    margin-top: 64px;
   }
 `
 

src/configs/data.configs.ts

@@ -35,58 +35,340 @@ export const FooterLinksItems: {
   },
 }
 
-export const agendaData = [
-  {
-    time: '11:00',
-    sessions: {
-      mainStage: {
-        title: 'WELCOME',
-        speakers: ['Joe Nakamoto'],
-      },
-      demoRoom: null,
-      roundTable: null,
+export const agendaData = {
+  mainStage: [
+    {
+      title: 'Doors Open',
+      speakers: [],
+      startTime: '10:30',
+      endTime: '11:00',
+      shrink: true,
+      highlight: true,
+      removeBorderRight: true,
     },
-  },
-  {
-    time: '11:10',
-    sessions: {
-      mainStage: {
-        title: 'LOGOS WELCOME',
-        speakers: ['Jarrad Hope'],
-      },
-      demoRoom: null,
-      roundTable: null,
+    {
+      title: 'Welcome',
+      speakers: ['Joe Nakamoto', 'Jarrad Hope'],
+      startTime: '11:00',
+      endTime: '11:30',
     },
-  },
-  {
-    time: '11:30',
-    sessions: {
-      mainStage: {
-        title: 'FAREWELL TO WESTPHALIA; BEYOND THE NATION STATE',
-        speakers: ['Tom W. Bell', 'Jarrad Hope', 'Peter Ludlow'],
-      },
-      demoRoom: {
-        title: 'KEYCARD PRO: A NEXT-GENERATION HARDWARE WALLET',
-        speakers: ['Guy Louis Grau'],
-      },
-      roundTable: null,
+    {
+      title: 'Farewell to Westphalia: Post Nation State Governance',
+      speakers: ['Jarrad Hope', 'Tom W. Bell', 'Peter Ludlow'],
+      startTime: '11:30',
+      endTime: '12:30',
     },
-  },
-  {
-    time: '12:30',
-    sessions: {
-      mainStage: {
-        title: 'LUNCH',
-        speakers: ['Chill Zone'],
-      },
-      demoRoom: {
-        title: 'LUNCH',
-        speakers: ['Chill Zone'],
-      },
-      roundTable: {
-        title: 'LUNCH',
-        speakers: ['Chill Zone'],
-      },
+    {
+      title: 'Lunch',
+      speakers: ['Chill Zone'],
+      startTime: '12:30',
+      endTime: '13:30',
+      highlight: true,
+      removeBorderRight: true,
     },
-  },
-]
+    {
+      title: 'Accessing Justice via Decentralised Legal Systems',
+      speakers: ['Federico Ast', 'Eric Alston', 'Layer0x', 'Kelsie Nabben'],
+      startTime: '13:30',
+      endTime: '14:30',
+    },
+    {
+      title: 'How Bitcoin Changed Emerging Markets',
+      speakers: ['Joe Nakamoto', 'Edan Yago'],
+      startTime: '14:30',
+      endTime: '15:00',
+    },
+    {
+      title: 'Zanzalu: Building a Growth Ecosystem in Africa',
+      speakers: ['Eva Klaus', 'Mark Lutter'],
+      startTime: '15:00',
+      endTime: '16:00',
+    },
+    {
+      title: 'Zanzalu: Building a Growth Ecosystem in Africa',
+      speakers: ['Eva Klaus', 'Mark Lutter'],
+      startTime: '15:00',
+      endTime: '16:00',
+    },
+    {
+      title: 'Coffee Break',
+      speakers: ['Chill Zone'],
+      startTime: '16:00',
+      endTime: '16:30',
+      gray: true,
+    },
+    {
+      title: 'How Governments Can Benefit from Parallel Societies',
+      speakers: ['Angelo Alessio', 'William Wang'],
+      startTime: '16:30',
+      endTime: '17:00',
+    },
+    {
+      title: 'How to Start Your Own Pop-up Village',
+      speakers: [
+        'Audrey Tang',
+        'Timour Koster',
+        'Veronica Schrenk',
+        'Eva Klaus',
+      ],
+      startTime: '17:00',
+      endTime: '18:00',
+    },
+    {
+      title: 'Regenerative Public Goods for Sustainable Communities',
+      speakers: ['Michel Bauwens', 'David Casey', 'Kevin Owocki'],
+      startTime: '18:00',
+      endTime: '19:00',
+    },
+    {
+      title: 'Closing Message',
+      speakers: [''],
+      startTime: '19:00',
+      endTime: '19:10',
+    },
+    {
+      title: 'Thai Food market & Drinks',
+      speakers: ['chill zone'],
+      startTime: '19:10',
+      endTime: '21:00',
+      highlight: true,
+      removeBorderRight: true,
+    },
+    {
+      title: 'The Paradise Bangkok Molam International Band',
+      speakers: [''],
+      startTime: '20:30',
+      endTime: '21:30',
+    },
+    {
+      title: 'Drinks',
+      speakers: ['chill zone'],
+      startTime: '21:00',
+      endTime: '22:00',
+      highlight: true,
+      removeBorderRight: true,
+    },
+  ],
+  demoRoom: [
+    {
+      title: 'Doors Open',
+      speakers: [],
+      startTime: '10:30',
+      endTime: '11:00',
+      shrink: true,
+      highlight: true,
+      merged: true,
+    },
+    {
+      title: '',
+      speakers: [''],
+      startTime: '',
+      endTime: '',
+    },
+    {
+      title: 'Keycard Pro: A Next-Generation Hardware Wallet',
+      speakers: ['Guy Louis Grau'],
+      startTime: '11:45',
+      endTime: '12:30',
+    },
+    {
+      title: 'Lunch',
+      speakers: ['Chill Zone'],
+      startTime: '12:30',
+      endTime: '13:30',
+      highlight: true,
+      merged: true,
+    },
+    {
+      title: 'How Might We Solve Local Economic Challenges Together',
+      speakers: ['Andrej Berlin'],
+      startTime: '13:30',
+      endTime: '14:30',
+    },
+    {
+      title: 'Building Real-World Blockchain Pilots: Partnerships for Impact',
+      speakers: ['David Casey'],
+      startTime: '14:30',
+      endTime: '15:00',
+    },
+    {
+      title: 'Common Knowledge Machines',
+      speakers: ['Puja Ohlhaver'],
+      startTime: '15:00',
+      endTime: '15:30',
+    },
+    {
+      title: 'Coffee Break',
+      speakers: ['Chill Zone'],
+      startTime: '15:30',
+      endTime: '16:00',
+      gray: true,
+      removeBorderRight: true,
+    },
+    {
+      title: 'Codex Demo: Durable Archiving for Network Societies',
+      speakers: ['Aqeel Mohammad', 'Arnaud Deville'],
+      startTime: '16:00',
+      endTime: '17:00',
+    },
+    {
+      title: 'Codex Demo: Durable Archiving for Network Societies',
+      speakers: ['Aqeel Mohammad', 'Arnaud Deville'],
+      startTime: '16:00',
+      endTime: '17:00',
+    },
+    {
+      title: 'Kleros Dispute Resolution: From Disagreements to Resolution',
+      speakers: ['Yann Aouidef'],
+      startTime: '17:00',
+      endTime: '18:00',
+    },
+    {
+      title: 'Parallel Society Tech: State of the Art and Future',
+      speakers: ['Franck Royer', 'Kieran Mesquita', "Rachel-Rose O'Leary"],
+      startTime: '18:00',
+      endTime: '19:00',
+    },
+    {
+      title: '',
+      speakers: [''],
+      startTime: '',
+      endTime: '',
+    },
+    {
+      title: 'Thai Food market & Drinks',
+      speakers: ['chill zone'],
+      startTime: '19:10',
+      endTime: '21:00',
+      highlight: true,
+      merged: true,
+    },
+    {
+      title: '',
+      speakers: [''],
+      startTime: '',
+      endTime: '',
+    },
+    {
+      title: 'Drinks',
+      speakers: ['chill zone'],
+      startTime: '21:00',
+      endTime: '22:00',
+      highlight: true,
+      merged: true,
+    },
+  ],
+  roundTable: [
+    {
+      title: 'Doors Open',
+      speakers: [],
+      startTime: '10:30',
+      endTime: '11:00',
+      shrink: true,
+      highlight: true,
+      merged: true,
+    },
+    {
+      title: '',
+      speakers: [''],
+      startTime: '',
+      endTime: '',
+    },
+    {
+      title: '',
+      speakers: [''],
+      startTime: '',
+      endTime: '',
+    },
+    {
+      title: 'Lunch',
+      speakers: ['Chill Zone'],
+      startTime: '12:30',
+      endTime: '13:30',
+      highlight: true,
+      merged: true,
+    },
+    {
+      title: 'Sovereign Tools: Workshop by Women in Web3 Privacy',
+      speakers: ['Evin McMullen', 'Henry de Valence', 'Yana Matrosova'],
+      startTime: '13:30',
+      endTime: '15:30',
+    },
+    {
+      title: 'Sovereign Tools: Workshop by Women in Web3 Privacy',
+      speakers: ['Evin McMullen', 'Henry de Valence', 'Yana Matrosova'],
+      startTime: '13:30',
+      endTime: '15:30',
+    },
+    {
+      title: 'Sovereign Tools: Workshop by Women in Web3 Privacy',
+      speakers: ['Evin McMullen', 'Henry de Valence', 'Yana Matrosova'],
+      startTime: '13:30',
+      endTime: '15:30',
+    },
+    {
+      title: 'Coffee Break',
+      speakers: ['Chill Zone'],
+      startTime: '15:30',
+      endTime: '16:00',
+      highlight: true,
+      merged: true,
+    },
+    {
+      title:
+        'Lightning Talks:\n\n4Seas,\nGelephu Mindfulness City,\nLiberland,\nRegistryChain,\nZu-Grama,\nZuitzerland',
+      speakers: [''],
+      startTime: '16:00',
+      endTime: '19:00',
+    },
+    {
+      title:
+        'Lightning Talks:\n\n4Seas,\nGelephu Mindfulness City,\nLiberland,\nRegistryChain,\nZu-Grama,\nZuitzerland',
+      speakers: [''],
+      startTime: '16:00',
+      endTime: '19:00',
+    },
+    {
+      title:
+        'Lightning Talks:\n\n4Seas,\nGelephu Mindfulness City,\nLiberland,\nRegistryChain,\nZu-Grama,\nZuitzerland',
+      speakers: [''],
+      startTime: '16:00',
+      endTime: '19:00',
+    },
+    {
+      title:
+        'Lightning Talks:\n\n4Seas,\nGelephu Mindfulness City,\nLiberland,\nRegistryChain,\nZu-Grama,\nZuitzerland',
+      speakers: [''],
+      startTime: '16:00',
+      endTime: '19:00',
+    },
+    {
+      title: '',
+      speakers: [''],
+      startTime: '',
+      endTime: '',
+    },
+    {
+      title: 'Thai Food market & Drinks',
+      speakers: ['chill zone'],
+      startTime: '19:10',
+      endTime: '21:00',
+      highlight: true,
+      merged: true,
+    },
+    {
+      title: '',
+      speakers: [''],
+      startTime: '',
+      endTime: '',
+    },
+    {
+      title: 'Drinks',
+      speakers: ['chill zone'],
+      startTime: '21:00',
+      endTime: '22:00',
+      highlight: true,
+      merged: true,
+    },
+  ],
+}

src/pages/world-debt.tsx

@@ -0,0 +1,80 @@
+import styled from '@emotion/styled'
+import { useEffect, useState } from 'react'
+
+const numberWithCommas = (x: number) => {
+  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+}
+
+export default function WorldDebt() {
+  const [debt, setDebt] = useState(72748553737909)
+
+  //   async function fetchDebtData() {
+  //     try {
+  //       const response = await fetch(
+  //         'https://api.worldbank.org/v2/country/all/indicator/DT.DOD.DECT.CD?format=json&date=2022:2023&per_page=500',
+  //       )
+  //       const data = await response.json()
+
+  //       const debtData = data[1]
+
+  //       // Calculate the total debt by summing up the values
+  //       const totalDebt = debtData.reduce((sum, country) => {
+  //         return sum + (country.value || 0)
+  //       }, 0)
+
+  //       setDebt(totalDebt)
+  //     } catch (error) {
+  //       console.error('Error fetching data:', error)
+  //     }
+  //   }
+
+  //   useEffect(() => {
+  //     fetchDebtData()
+  //   }, [])
+
+  useEffect(() => {
+    if (debt === null) return
+
+    const interval = setInterval(() => {
+      setDebt(
+        // increase 0.00000000005% of the debt every 2 seconds
+        debt + debt * 0.0000000000005,
+      )
+    }, 2000)
+
+    return () => clearInterval(interval)
+  }, [debt])
+
+  return (
+    <Background>
+      <Content>
+        <h1>World Debt Clock</h1>
+        <p>${numberWithCommas(debt).split('.')[0]}</p>
+      </Content>
+    </Background>
+  )
+}
+
+const Background = styled.div`
+  width: 100vw;
+  height: 100vh;
+  background-color: #000;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  h1 {
+    font-size: 52px;
+    text-align: center;
+  }
+
+  p {
+    font-size: 60px;
+    text-align: center;
+    margin-top: 20px;
+    font-weight: bold;
+  }
+`
+
+const Content = styled.div``

yarn.lock

@@ -1336,10 +1336,10 @@ client-only@0.0.1:
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
-clsx@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
-  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
 
 cmd-shim@^6.0.0:
   version "6.0.3"