From 18117f03ce89eda1cdb11f3540a6f91b33262ea1 Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Wed, 2 Oct 2024 21:35:10 +0900
Subject: [PATCH] chore: implement new requests

---
 hooks/useUTMSource.ts                       | 25 +++++++++++++++++++++
 src/components/Header/Navbar.tsx            |  2 +-
 src/components/Home/FAQSection.tsx          |  2 +-
 src/components/Home/ParticipantsSection.tsx | 12 ++++++++--
 src/pages/index.tsx                         |  3 +++
 5 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 hooks/useUTMSource.ts

diff --git a/hooks/useUTMSource.ts b/hooks/useUTMSource.ts
new file mode 100644
index 0000000..ac0f333
--- /dev/null
+++ b/hooks/useUTMSource.ts
@@ -0,0 +1,25 @@
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+
+const useUTMSource = () => {
+  const router = useRouter()
+  const { utm_source } = router.query
+
+  useEffect(() => {
+    if (utm_source) {
+      const links = document.querySelectorAll<HTMLAnchorElement>(
+        'a[href^="https://lu.ma/psc1"]',
+      )
+
+      links.forEach((link) => {
+        if (link && link.href) {
+          const url = new URL(link.href)
+          url.searchParams.set('utm_source', utm_source as string)
+          link.href = url.toString()
+        }
+      })
+    }
+  }, [utm_source])
+}
+
+export default useUTMSource
diff --git a/src/components/Header/Navbar.tsx b/src/components/Header/Navbar.tsx
index 8519ea4..782168a 100644
--- a/src/components/Header/Navbar.tsx
+++ b/src/components/Header/Navbar.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 
 export const navItems = [
   { name: 'Home', href: '/' },
-  { name: 'Speakers', href: '#participants' },
+  { name: 'Participants', href: '#participants' },
   { name: 'Collaborators', href: '#collaborators' },
   { name: 'About', href: '#about-logos' },
   { name: 'Articles', href: '#articles' },
diff --git a/src/components/Home/FAQSection.tsx b/src/components/Home/FAQSection.tsx
index 50f6f9d..3c5465d 100644
--- a/src/components/Home/FAQSection.tsx
+++ b/src/components/Home/FAQSection.tsx
@@ -28,7 +28,7 @@ const faqData: FAQItem[] = [
   {
     question: 'Is there parking on site?',
     answer:
-      'No. However, you can park your vehicle at Samyan Mirtown mall for an affordable day rate.',
+      'No. However, you can park your vehicle at Samyan Mitrtown mall for an affordable day rate.',
   },
   {
     question: 'What public transport is close to the venue?',
diff --git a/src/components/Home/ParticipantsSection.tsx b/src/components/Home/ParticipantsSection.tsx
index 4ea26d1..ebfa719 100644
--- a/src/components/Home/ParticipantsSection.tsx
+++ b/src/components/Home/ParticipantsSection.tsx
@@ -90,7 +90,7 @@ const speakersData: Speaker[] = [
     id: 9,
     initial: 'J',
     name: 'Janine Leger',
-    title: 'Founder',
+    title: 'Co-founder',
     org: 'EdgeCity',
     profileImage: '/assets/participants/janine.png',
     bio: "Janine Leger is the Co-founder of Edge City, an organisation that convenes builders across tech, science and society in pop-up villages around the globe. She's one of the co-creators of Zuzalu and led the Public Goods Funding team at Gitcoin.",
@@ -140,6 +140,14 @@ const speakersData: Speaker[] = [
     profileImage: '/assets/participants/yann.png',
     bio: 'Yann Aouidef is building the mechanism design of Kleros, considering law and economics, game theory, social choice theory, and economic experiments. Yann is a PhD candidate at the Paris Center in Law and Economics. His topic thesis is "Economics and Law of the Blockchain: Applications To Decentralized Justice Mechanisms".',
   },
+  {
+    id: 15,
+    initial: 'L',
+    name: 'Layer0x',
+    title: 'Legal Architect',
+    org: 'Powerhouse (MakerDAO spinoff)',
+    bio: 'Powerhouse builds operational and legal infrastructure as public goods for network organisations. As a legal architect for Sky (formerly MakerDAO) and Powerhouse itself, Layer0x handles legal system design for DAOs, i.e., frameworks, processes, and entities that fulfil legal functions, such as public procurement, fundraising, project management, IP management, insurance, and legal defence. This includes designing open-source hybrid techno-legal tools that will help DAOs derisk and operate efficiently at scale.',
+  },
 ]
 
 const ParticipantsSection: React.FC = () => {
@@ -153,7 +161,7 @@ const ParticipantsSection: React.FC = () => {
 
   return (
     <Section id="participants">
-      <SectionTitle>SPEAKERS</SectionTitle>
+      <SectionTitle>Participants</SectionTitle>
       <SpeakerGrid>
         {speakersData.map((speaker, index) => (
           <SpeakerCard
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index e329733..0bed231 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,7 +1,10 @@
 import { SEO } from '@/components/SEO'
 import HomeContainer from '@/containers/Home/HomeContainer'
+import useUTMSource from '../../hooks/useUTMSource'
 
 export default function HomePage() {
+  useUTMSource()
+
   return (
     <>
       <SEO />