code in Quiz area can be copied to clipboard now.

app/[lang]/(web)/(base page)/(learn)/web3mooc./components/Content/Overview.tsx

@@ -60,19 +60,22 @@ const Overview: React.FC<OverviewProp> = () => {
 
       <div className="flex h-[498px] flex-col justify-between">
         <h1 className="text-h3">{t(overviewData.name)}</h1>
-        <div className="body-m">
+        <div className="body-s">
           <p className="mb-[0px] text-neutral-medium-gray">{t('ntuCourse.date')}</p>
           <p>{overviewData.date}</p>
         </div>
-        <div className="body-m ">
+        <div className="body-s">
           <p className="mb-[0px] text-neutral-medium-gray">{t('ntuCourse.time')}</p>
           <p className="leading-[140%]">{overviewData.time}</p>
+          <p className="text-[.75rem] leading-[140%] text-neutral-medium-gray">
+            {`Please review individual lecture schedule under Syllabus as speakers are from different time zones.`}
+          </p>
         </div>
-        <div className="body-m">
+        <div className="body-s">
           <p className="mb-[0px] text-neutral-medium-gray">{t('ntuCourse.overview.format')}</p>
           <p>{overviewData.format}</p>
         </div>
-        <div className="body-m">
+        <div className="body-s">
           <p className="mb-[0px] text-neutral-medium-gray">{t('ntuCourse.overview.hosts')}</p>
           <div className="flex items-center gap-[20px]">
             <Image src={HackLogo} height={28} alt="hack_logo" />
@@ -81,7 +84,7 @@ const Overview: React.FC<OverviewProp> = () => {
             </div>
           </div>
         </div>
-        <div className="body-m">
+        <div className="body-s">
           <p className="mb-[0px] text-neutral-medium-gray">{t('ntuCourse.overview.discussionGroups')}</p>
           <div className="flex items-center gap-[40px]">
             {overviewData.discussionGroups.map((v) => (

app/[lang]/(web)/(base page)/(learn)/web3mooc./constants/data.tsx

@@ -41,7 +41,7 @@ export const titleTxtData = [
 export const overviewData = {
   name: 'ntuCourse.overview.title',
   date: 'Weekly sessions from 5/28-9/24/2024',
-  time: '9-10 am SGT, Tuesday / 9-10 pm EST, Monday (*Please review individual lecture schedule under Syllabus as speakers are from different time zones).',
+  time: '9-10 am SGT, Tuesday / 9-10 pm EST, Monday',
   format: 'Hybrid (In-person at NTU and Online over ZOOM)',
   discussionGroups: [
     {
@@ -85,7 +85,7 @@ export const syllabusData = [
     description:
       'This introductory session is dedicated to bridging the gap between Web2 and Web3. In this session, students will review key Web3 concepts, learn key differences between Web2 and Web3, explore the Ethereum ecosystem, and discover how to begin building in this transformative new space as a Web3 developer.',
     speaker: 'Austin Griffith, Ethereum Foundation',
-    video: '',
+    video: 'https://drive.google.com/file/d/1efRXsQZL_nkLS1ZXMLEYswNsuUYKXp1c/view',
     slide: '',
     expand: false
   },
@@ -95,8 +95,9 @@ export const syllabusData = [
     description:
       'Gain a comprehensive understanding of the current Web3 ecosystem. Explore different blockchain ecosystems and key protocols and standards, with an emphasis on infrastructure.',
     speaker: 'Dr. Michael Yuan, Gaianet',
-    video: '',
-    slide: '',
+    video: 'https://drive.google.com/file/d/1VK6U3CGXRavinw5BWSb0BTaYyYHrB0h_/view?usp=drive_link',
+    slide:
+      'https://docs.google.com/presentation/d/1EUlPND_1HO0HyiEhfcWM2pF-LlcaPyxRfMMG3-UH15c/edit#slide=id.g2dc6d916b77_1_2',
     expand: false
   },
   {

app/[lang]/(web)/(base page)/(learn)/web3mooc/components/Content/Overview.tsx

@@ -60,19 +60,22 @@ const Overview: React.FC<OverviewProp> = () => {
 
       <div className="flex h-[498px] flex-col justify-between">
         <h1 className="text-h3">{t(overviewData.name)}</h1>
-        <div className="body-m">
+        <div className="body-s">
           <p className="mb-[0px] text-neutral-medium-gray">{t('ntuCourse.date')}</p>
           <p>{overviewData.date}</p>
         </div>
-        <div className="body-m ">
+        <div className="body-s">
           <p className="mb-[0px] text-neutral-medium-gray">{t('ntuCourse.time')}</p>
           <p className="leading-[140%]">{overviewData.time}</p>
+          <p className="text-[.75rem] leading-[140%] text-neutral-medium-gray">
+            {`Please review individual lecture schedule under Syllabus as speakers are from different time zones.`}
+          </p>
         </div>
-        <div className="body-m">
+        <div className="body-s">
           <p className="mb-[0px] text-neutral-medium-gray">{t('ntuCourse.overview.format')}</p>
           <p>{overviewData.format}</p>
         </div>
-        <div className="body-m">
+        <div className="body-s">
           <p className="mb-[0px] text-neutral-medium-gray">{t('ntuCourse.overview.hosts')}</p>
           <div className="flex items-center gap-[20px]">
             <Image src={HackLogo} height={28} alt="hack_logo" />
@@ -81,7 +84,7 @@ const Overview: React.FC<OverviewProp> = () => {
             </div>
           </div>
         </div>
-        <div className="body-m">
+        <div className="body-s">
           <p className="mb-[0px] text-neutral-medium-gray">{t('ntuCourse.overview.discussionGroups')}</p>
           <div className="flex items-center gap-[40px]">
             {overviewData.discussionGroups.map((v) => (

app/[lang]/(web)/(base page)/(learn)/web3mooc/constants/data.tsx

@@ -41,7 +41,7 @@ export const titleTxtData = [
 export const overviewData = {
   name: 'ntuCourse.overview.title',
   date: 'Weekly sessions from 5/28-9/24/2024',
-  time: '9-10 am SGT, Tuesday / 9-10 pm EST, Monday (*Please review individual lecture schedule under Syllabus as speakers are from different time zones).',
+  time: '9-10 am SGT, Tuesday / 9-10 pm EST, Monday',
   format: 'Hybrid (In-person at NTU and Online over ZOOM)',
   discussionGroups: [
     {
@@ -85,7 +85,7 @@ export const syllabusData = [
     description:
       'This introductory session is dedicated to bridging the gap between Web2 and Web3. In this session, students will review key Web3 concepts, learn key differences between Web2 and Web3, explore the Ethereum ecosystem, and discover how to begin building in this transformative new space as a Web3 developer.',
     speaker: 'Austin Griffith, Ethereum Foundation',
-    video: '',
+    video: 'https://drive.google.com/file/d/1efRXsQZL_nkLS1ZXMLEYswNsuUYKXp1c/view',
     slide: '',
     expand: false
   },
@@ -95,8 +95,9 @@ export const syllabusData = [
     description:
       'Gain a comprehensive understanding of the current Web3 ecosystem. Explore different blockchain ecosystems and key protocols and standards, with an emphasis on infrastructure.',
     speaker: 'Dr. Michael Yuan, Gaianet',
-    video: '',
-    slide: '',
+    video: 'https://drive.google.com/file/d/1VK6U3CGXRavinw5BWSb0BTaYyYHrB0h_/view?usp=drive_link',
+    slide:
+      'https://docs.google.com/presentation/d/1EUlPND_1HO0HyiEhfcWM2pF-LlcaPyxRfMMG3-UH15c/edit#slide=id.g2dc6d916b77_1_2',
     expand: false
   },
   {

app/[lang]/(web)/(base page)/(resource)/hackathon/components/HackathonBox/OnGoing/OnGoingHackathonCard/index.tsx

@@ -143,7 +143,7 @@ const OnGoingHackathonCard: React.FC<OnGoingHackathonCardProp> = ({ hackathon })
           </div>
           <div>
             <p className="mb-[8px]">{t('participants')}</p>
-            <p className="body-xl-bold text-neutral-off-black">{separationNumber(hackathon.members?.length || 0)}</p>
+            <p className="body-xl-bold text-neutral-off-black">{separationNumber(hackathon.memberCount || 0)}</p>
           </div>
           <div>
             <p className="mb-[8px]">{t('totalPrize')}</p>

app/[lang]/(web)/(base page)/(resource)/hackathon/components/HackathonBox/Past/PastHackathonCard/index.tsx

@@ -61,7 +61,7 @@ const PastHackathonCard: FC<PastHackathonCardProps> = ({ hackathon, isVoting })
                   <span className="body-m-bold text-neutral-off-black">
                     {hackathon.version === 'old'
                       ? hackathon.participants
-                      : separationNumber(hackathon.members?.length || 0)}
+                      : separationNumber(hackathon.memberCount || 0)}
                   </span>
                 </div>
                 <div>

app/[lang]/(web)/(base page)/(resource)/hackathon/projects/[projectId]/components/Content/Overview.tsx

@@ -11,6 +11,7 @@ import Link from 'next/link';
 import MenuLink from '@/constants/MenuLink';
 import { DiGithubBadge } from 'react-icons/di';
 import { IoIosArrowForward } from 'react-icons/io';
+import { cn } from '@/helper/utils';
 
 interface OverviewProp {
   project: ProjectType;
@@ -23,6 +24,9 @@ const Overview: React.FC<OverviewProp> = ({ project, hackathon }) => {
   const newGithubLink = useMemo(() => {
     return /^[http]/.test(project.githubLink) ? project.githubLink : `https://${project.githubLink}`;
   }, [project]);
+
+  const showGithubModule = project.isOpenSource && project.githubLink;
+
   return (
     <div className="flex flex-col gap-[32px]">
       <div className="flex gap-[24px]">
@@ -37,35 +41,51 @@ const Overview: React.FC<OverviewProp> = ({ project, hackathon }) => {
         </div>
       </div>
       <div className="flex h-[45px] [&>div]:flex [&>div]:h-full [&>div]:items-center [&>div]:gap-[12px]">
-        <div className="max-w-[40%] overflow-hidden pr-[32px]">
+        <div className={cn('flex w-fit pr-8', showGithubModule ? 'max-w-[25%]' : '')}>
           <Image src={IconHackathon} width={26} alt="hackathon-icon" />
-          <div className="flex-1">
+          <div className="flex flex-1 flex-col truncate">
             <p className="body-xs text-neutral-medium-gray">{t('navbar.resources.hackathon')}</p>
             <Link
               href={`${MenuLink.HACKATHON}/${hackathon?.alias}`}
               title={project.hackathonName}
-              className="underline-m w-full truncate"
+              className="underline-m w-full whitespace-nowrap"
             >
               {project.hackathonName}
             </Link>
           </div>
         </div>
-        <div className="border-l border-neutral-rich-gray px-[32px] ">
+
+        <div
+          className={cn(
+            'flex w-fit border-l border-neutral-rich-gray px-[32px]',
+            showGithubModule ? 'max-w-[25%]' : ''
+          )}
+        >
           <Image src={IconPrizeTrack} width={24} alt="prize-icon" />
-          <div className="">
+          <div className="flex flex-1 flex-col">
             <p className="body-xs text-neutral-medium-gray">{t('projectsDetail.prizeTrack')}</p>
-            <p>{project.prizeTrack || '-'}</p>
+            <p className="line-clamp-1 w-full" title={project.prizeTrack?.split(',').join(', ')}>
+              {project.prizeTrack?.split(',').join(', ') || '-'}
+            </p>
           </div>
         </div>
-        <div className="max-w-[30%] overflow-hidden border-l border-neutral-rich-gray px-[32px] ">
+
+        <div
+          className={cn(
+            'flex w-fit  border-l border-neutral-rich-gray pl-[32px]',
+            showGithubModule ? 'max-w-[25%] pr-[32px]' : ''
+          )}
+        >
           <Image src={IconHackathonTrack} width={31} alt="hackathon-track-icon" />
-          <div className="">
+          <div className="flex-1">
             <p className="body-xs text-neutral-medium-gray">{t('projectsDetail.hackathonTrack')}</p>
-            <div className="flex gap-[4px]">{project.tracks?.map((v) => <span key={v}>{v}</span>)}</div>
+            <p className="line-clamp-1" title={project.tracks?.join(', ')}>
+              {project.tracks?.join(', ')}
+            </p>
           </div>
         </div>
-        {project.githubLink && (
-          <div className="border-l border-neutral-rich-gray pl-[32px]">
+        {showGithubModule && (
+          <div className="max-w-[25%] border-l  border-neutral-rich-gray pl-[32px]">
             <DiGithubBadge size={40} />
             <div className="">
               <p className="body-xs text-neutral-medium-gray ">{t('projectsDetail.openSource')}</p>

app/[lang]/(web)/(base page)/(resource)/hackathon/projects/[projectId]/edit/components/Content/Info/ProjectPrizeTrackRadio/index.tsx

@@ -1,6 +1,7 @@
 import { cn } from '@/helper/utils';
 import { UseFormReturn } from 'react-hook-form';
 import { FormSchema } from '../../constants';
+import { useState } from 'react';
 
 interface ProjectTypeRadioProps {
   form: UseFormReturn<FormSchema, any, undefined>;
@@ -9,6 +10,8 @@ interface ProjectTypeRadioProps {
 }
 
 const ProjectPrizeTrackRadio = ({ form, tracks, isClose }: ProjectTypeRadioProps) => {
+  const [selectTracks, setSelectTracks] = useState<string[]>(form.watch('prizeTrack').split(','));
+  console.log(selectTracks);
   return (
     <div className="flex w-full flex-col gap-3">
       <p className="body-m text-left text-neutral-rich-gray">Which Hackathon Track Do You Belong To</p>
@@ -19,12 +22,20 @@ const ProjectPrizeTrackRadio = ({ form, tracks, isClose }: ProjectTypeRadioProps
               key={track}
               onClick={() => {
                 if (isClose) return;
-                form.setValue('prizeTrack', track);
+                let newTracks = [...selectTracks];
+                if (selectTracks.includes(track)) {
+                  newTracks = selectTracks.filter((t) => t !== track);
+                  form.setValue('prizeTrack', newTracks.join(','));
+                } else {
+                  newTracks = selectTracks.concat(track);
+                  form.setValue('prizeTrack', newTracks.join(','));
+                }
+                setSelectTracks(newTracks);
                 form.trigger('prizeTrack');
               }}
               className={cn(
                 `body-m flex h-[50px]  w-full  items-center justify-center gap-3 rounded-[8px] border-[3px] border-neutral-off-white px-5 py-3`,
-                form.watch('prizeTrack') === track
+                selectTracks.includes(track)
                   ? 'border-yellow-dark bg-yellow-extra-light shadow-[0px_0px_8px_0px_rgba(249,216,28,0.30)]'
                   : 'bg-neutral-white',
                 isClose ? 'cursor-not-allowed' : 'cursor-pointer'

app/[lang]/(web)/(base page)/(resource)/hackathon/projects/[projectId]/edit/components/Content/Info/ProjectTrackRadio/index.tsx

@@ -16,7 +16,7 @@ const ProjectTrackRadio = ({ form, tracks, isClose }: ProjectTypeRadioProps) =>
   return (
     <div className="flex w-full flex-col gap-3">
       <p className="body-m text-left text-neutral-rich-gray">{`Which Hackathon Track Do You Belong To (Please elect all that apply)`}</p>
-      <div className="flex w-full justify-between gap-5">
+      <div className="flex w-full flex-wrap gap-5 [&>div]:w-[calc((100%-80px)/5)]">
         {tracks.map((track) => {
           return (
             <div

app/[lang]/(web)/(other)/form/hackathon/[hackathonId]/register/components/FormComponent/SubmitReview/index.tsx

@@ -1,4 +1,4 @@
-import { FC, useRef } from 'react';
+import { FC, useRef, useState } from 'react';
 import { FormComponentProps } from '..';
 import Image from 'next/image';
 import { HackathonTeamDetail } from '@/service/webApi/resourceStation/type';
@@ -29,9 +29,12 @@ const SubmitReview: FC<Omit<FormComponentProps, 'type' | 'onNext'>> = ({
   const { redirectToUrl } = useRedirect();
   const { name, contractInfo, bio, submissionType, isRegister } = formState;
   const confirmModalRef = useRef<ConfirmModalRef>(null);
+  const [allowContract, setAllowContract] = useState(true);
   const { runAsync, loading } = useRequest(
     () => {
-      return webApi.resourceStationApi.registerHackathon(simpleHackathonInfo.id);
+      return webApi.resourceStationApi.registerHackathon(simpleHackathonInfo.id, {
+        allowContract: allowContract
+      });
     },
     {
       manual: true,
@@ -230,6 +233,60 @@ const SubmitReview: FC<Omit<FormComponentProps, 'type' | 'onNext'>> = ({
         <h4 className="text-h4 mb-9 text-center text-neutral-black">
           Do you want to {isRegister ? 'update' : 'register'} this hackathon?
         </h4>
+        {!isRegister && (
+          <>
+            <p className="body-s text-center">
+              Consensys is committed to protecting and respecting your privacy, and we’ll only use your personal
+              information to provide the products, services, and information you requested from us. From time to time,
+              we would like to contact you about our products and services, as well as other content that may be of
+              interest to you. If you consent to us contacting you for this purpose:
+            </p>
+            {/* <div className="mt-6 flex justify-center gap-2 text-neutral-rich-gray">
+              <span
+                className="body-s flex h-[22px] w-[22px] items-center justify-center rounded-[2px] border-[2px] border-neutral-black text-neutral-black"
+                onClick={() => {
+                  setConsent(!consent);
+                }}
+              >
+                <span
+                  className={cn(
+                    'inline-block h-[14px] w-[14px] rounded-[2px] bg-neutral-black',
+                    consent ? 'inline-block' : 'hidden'
+                  )}
+                ></span>
+              </span>
+              <span>Yes, I consent.</span>
+            </div> */}
+            <div className="mt-6 flex w-full justify-between gap-5 px-10">
+              <div
+                onClick={() => {
+                  setAllowContract(true);
+                }}
+                className={cn(
+                  `body-m flex h-[50px]  w-full cursor-pointer items-center justify-center gap-3 rounded-[8px] border-[3px] border-neutral-off-white px-5 py-3`,
+                  allowContract === true
+                    ? 'border-yellow-dark bg-yellow-extra-light shadow-[0px_0px_8px_0px_rgba(249,216,28,0.30)]'
+                    : ''
+                )}
+              >
+                <span>Yes</span>
+              </div>
+              <div
+                onClick={() => {
+                  setAllowContract(false);
+                }}
+                className={cn(
+                  `body-m flex h-[50px]  w-full cursor-pointer items-center justify-center gap-3 rounded-[8px] border-[3px] border-neutral-off-white px-5 py-3`,
+                  allowContract === false
+                    ? 'border-yellow-dark bg-yellow-extra-light shadow-[0px_0px_8px_0px_rgba(249,216,28,0.30)]'
+                    : ''
+                )}
+              >
+                <span>No</span>
+              </div>
+            </div>
+          </>
+        )}
       </ConfirmModal>
     </div>
   );

app/[lang]/(web)/(other)/form/hackathon/[hackathonId]/submission/[projectId]/components/FormComponent/InfoForm/DetailIntroName/index.tsx

@@ -20,7 +20,7 @@ const DetailIntroName: FC<DetailIntroNameProps> = ({ form }) => {
               {'Detailed Intro of Your Project'}
             </FormLabel>
             <span className="caption-14pt text-neutral-rich-gray">
-              <span className={form.watch('detailedIntro').length > 120 ? 'text-status-error' : ''}>
+              <span className={form.watch('detailedIntro').length > 600 ? 'text-status-error' : ''}>
                 {form.watch('detailedIntro').length}
               </span>
               /600

app/[lang]/(web)/(other)/form/hackathon/[hackathonId]/submission/[projectId]/components/FormComponent/InfoForm/ProjectTrackRadio/index.tsx

@@ -17,7 +17,7 @@ const ProjectTrackRadio = ({ form, tracks }: ProjectTypeRadioProps) => {
       <p className="body-m text-left text-neutral-rich-gray">
         {`Which Hackathon Track Do You Belong To (Please select all that apply)`}
       </p>
-      <div className="flex w-full justify-between gap-5">
+      <div className="flex w-full flex-wrap gap-5">
         {tracks.map((track) => {
           return (
             <div
@@ -35,7 +35,7 @@ const ProjectTrackRadio = ({ form, tracks }: ProjectTypeRadioProps) => {
                 form.trigger('track');
               }}
               className={cn(
-                `body-m flex h-[50px]  w-full cursor-pointer items-center justify-center gap-3 rounded-[8px] border-[3px] border-neutral-off-white px-5 py-3`,
+                `body-m flex w-full max-w-[8.0625rem] cursor-pointer items-center justify-center gap-3 rounded-[8px] border-[3px] border-neutral-off-white px-5 py-3`,
                 selectTracks.includes(track.value)
                   ? 'border-yellow-dark bg-yellow-extra-light shadow-[0px_0px_8px_0px_rgba(249,216,28,0.30)]'
                   : ''