feat (overview-page): judges, faqs, counter

2026-01-04 06:54:27 +01:00 · 2022-09-01 11:04:03 +03:00
parent 2dc324d94c
commit e6a19ecd6f
12 changed files with 285 additions and 55 deletions
--- a/src/Components/VoteButton/VoteButton.tsx
+++ b/src/Components/VoteButton/VoteButton.tsx
@@ -18,7 +18,7 @@ interface Particle {
    offsetY: number,
    color: string
    animation: 'fly-spark-1' | 'fly-spark-2',
-    animationSpeed: 1 | 2 | 3,
+    animationSpeed: number,
    scale: number
 }

@@ -108,11 +108,11 @@ export default function VoteButton({
            id: (Math.random() + 1).toString(),
            offsetX: random(-10, 99),
            offsetY: random(10, 90),
-            animation: randomItem(styles.fly_spark_1, styles.fly_spark_1),
+            animation: randomItem(styles.fly_spark_1, styles.fly_spark_1) as any,
            animationSpeed: randomItem(1, 1.5, 2),
            color: `hsl(0deg 86% ${random(50, 63)}%)`,
            scale: random(1, 1.5)
-        }))
+        } as const))

        // if on mobile screen, reduce number of sparks particles to 60%
        setSparks(oldSparks => [...oldSparks, ...newSparks])
--- a/src/features/Projects/pages/ProjectPage/VoteButton/VoteButton.tsx
+++ b/src/features/Projects/pages/ProjectPage/VoteButton/VoteButton.tsx
@@ -12,7 +12,7 @@ interface Particle {
    offsetX: number,
    color: '#ff6a00' | '#ff7717' | '#ff6217' | '#ff8217' | '#ff5717'
    animation: 'fly-spark-1' | 'fly-spark-2',
-    animationSpeed: 1 | 2 | 3,
+    animationSpeed: number,
    scale: number
 }

@@ -40,11 +40,11 @@ export default function VoteButton({ onVote = () => { }, ...props }: Props) {
        const newSpark = {
            id: Math.random().toString(),
            offsetX: random(1, 99),
-            animation: randomItem(styles.fly_spark_1, styles.fly_spark_1),
+            animation: randomItem(styles.fly_spark_1, styles.fly_spark_1) as any,
            animationSpeed: randomItem(1, 1.5, 2),
            color: randomItem('#ff6a00', '#ff7717', '#ff6217', '#ff8217', '#ff5717'),
            scale: random(1.2, 2.2)
-        };
+        } as const;

        // if on mobile screen, reduce number of sparks particles to 60%
        if (!isMobileScreen || Math.random() > .4) {
--- a/src/features/Tournaments/pages/OverviewPage/FAQsSection/FAQsSection.tsx
+++ b/src/features/Tournaments/pages/OverviewPage/FAQsSection/FAQsSection.tsx
@@ -0,0 +1,21 @@
+import React, { useMemo } from 'react'
+import Accordion from 'src/Components/Accordion/Accordion';
+import { Tournament } from 'src/graphql'
+
+interface Props {
+    faqs: Tournament['faqs']
+}
+
+
+export default function FAQsSection({ faqs }: Props) {
+
+
+    return (
+        <div>
+            <h2 className='text-body1 font-bolder text-gray-900 mb-4'>FAQs</h2>
+            <Accordion
+                items={faqs.map(faq => ({ heading: faq.question, content: <p className='whitespace-pre-line'>{faq.answer}</p> }))}
+            />
+        </div>
+    )
+}
--- a/src/features/Tournaments/pages/OverviewPage/JudgesSection/JudgesSection.tsx
+++ b/src/features/Tournaments/pages/OverviewPage/JudgesSection/JudgesSection.tsx
@@ -0,0 +1,34 @@
+import React, { useMemo } from 'react'
+import { Tournament } from 'src/graphql'
+
+interface Props {
+    judges: Tournament['judges']
+}
+
+const bgColors = ['#FDE68A', '#FECACA', '#BFDBFE', '#BBF7D0', '#DDD6FE', '#FBCFE8', '#FED7AA'];
+
+export default function JudgesSection({ judges }: Props) {
+
+    const colors = useMemo(() => {
+        return judges.map((_, i) => bgColors[i % bgColors.length])
+    }, [judges])
+
+    return (
+        <div>
+            <h2 className='text-body1 font-bolder text-gray-900 mb-16'>Judges</h2>
+            <div className="grid grid-cols-[repeat(auto-fit,minmax(167px,1fr))] gap-24">
+                {judges.map((judge, idx) => <div
+                    key={idx}
+                    className="p-16 rounded-16 flex flex-col justify-center items-center gap-16 md:gap-24"
+                    style={{ backgroundColor: colors[idx] }}
+                >
+                    <img src={judge.avatar} className='w-[100px] md:w-[128px] aspect-square object-contain' alt="" />
+                    <div className='text-center'>
+                        <p className='text-body4 font-medium'>{judge.name}</p>
+                        <p className='text-body4 mt-4'>{judge.jobTitle}</p>
+                    </div>
+                </div>)}
+            </div>
+        </div>
+    )
+}
--- a/src/features/Tournaments/pages/OverviewPage/OverviewPage.tsx
+++ b/src/features/Tournaments/pages/OverviewPage/OverviewPage.tsx
@@ -4,7 +4,10 @@ import Button from 'src/Components/Button/Button'
 import Card from 'src/Components/Card/Card'
 import Avatar from 'src/features/Profiles/Components/Avatar/Avatar'
 import { Tournament } from 'src/graphql'
+import FAQsSection from './FAQsSection/FAQsSection'
+import JudgesSection from './JudgesSection/JudgesSection'
 import PrizesSection from './PrizesSection/PrizesSection'
+import RegisterCard from './RegisterCard/RegisterCard'

 interface Props {
    data: Pick<Tournament,
@@ -13,6 +16,7 @@ interface Props {
        | "judges"
        | "start_date"
        | 'makers_count'
+        | 'faqs'
    >
 }

@@ -21,47 +25,14 @@ export default function OverviewPage({ data }: Props) {
        <Card className='flex flex-col gap-42'>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-24 items-start">
                <div className='md:col-span-2'>
-                    <h2 className='text-body2 font-bolder text-gray-900'>Tournament details</h2>
+                    <h2 className='text-body1 font-bolder text-gray-900'>Tournament details</h2>
                    <p className="text-body4 text-gray-600 mt-16 whitespace-pre-line">{data.description}</p>
                </div>
-                <Card onlyMd className='flex flex-col gap-24'>
-                    <div>
-                        <p className="text-body5 text-gray-600">
-                            <FaUsers className='text-body2 mr-4' /> <span className='align-middle'>+ {data.makers_count} makers</span>
-                        </p>
-                        <Button color='primary' fullWidth className='mt-16'>Register</Button>
-                    </div>
-                    <div>
-                        <p className="text-body5 text-gray-900 font-medium">
-                            Tournament starts in
-                        </p>
-                        <div className="grid grid-cols-3 gap-10 mt-16">
-                            <div className="border border-gray-200 rounded-10 flex flex-col py-10 justify-center items-center text-primary-600 text-body3 font-medium">
-                                17d
-                            </div>
-                            <div className="border border-gray-200 rounded-10 flex flex-col py-10 justify-center items-center text-primary-600 text-body3 font-medium">
-                                12h
-                            </div>
-                            <div className="border border-gray-200 rounded-10 flex flex-col py-10 justify-center items-center text-primary-600 text-body3 font-medium">
-                                36m
-                            </div>
-                        </div>
-                    </div>
-                    <div>
-                        <p className="text-body5 text-gray-900 font-medium">
-                            Sponsors
-                        </p>
-                        <div className="flex flex-wrap gap-12 mt-16">
-                            <Avatar width={42} src='https://i.pravatar.cc/150?id=70' />
-                            <Avatar width={42} src='https://i.pravatar.cc/150?id=80' />
-                            <Avatar width={42} src='https://i.pravatar.cc/150?id=90' />
-                            <Avatar width={42} src='https://i.pravatar.cc/150?id=100' />
-                        </div>
-                    </div>
-                </Card>
+                <RegisterCard makers_count={data.makers_count} start_date={data.start_date} />
            </div>
            <PrizesSection prizes={data.prizes} />
-
+            <JudgesSection judges={data.judges} />
+            <FAQsSection faqs={data.faqs} />
        </Card>
    )
 }
--- a/src/features/Tournaments/pages/OverviewPage/PrizesSection/PrizesSection.tsx
+++ b/src/features/Tournaments/pages/OverviewPage/PrizesSection/PrizesSection.tsx
@@ -9,8 +9,7 @@ interface Props {
 export default function PrizesSection({ prizes }: Props) {
  return (
    <div>
-
-      <h2 className='text-body2 font-bolder text-gray-900 mb-16'>Prizes</h2>
+      <h2 className='text-body1 font-bolder text-gray-900 mb-16'>Prizes</h2>
      <div className={styles.grid}>
        {prizes.map(prize => <div className='bg-gray-50 rounded-16 py-24 px-32'>
          <img src={prize.image} className=' max-w-[64px]' alt="" />
--- a/src/features/Tournaments/pages/OverviewPage/RegisterCard/RegisterCard.tsx
+++ b/src/features/Tournaments/pages/OverviewPage/RegisterCard/RegisterCard.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import { FaUsers } from 'react-icons/fa'
+import Button from 'src/Components/Button/Button'
+import Card from 'src/Components/Card/Card'
+import Avatar from 'src/features/Profiles/Components/Avatar/Avatar'
+import { useCountdown } from 'src/utils/hooks'
+
+interface Props {
+    start_date: string;
+    makers_count: number
+}
+
+export default function RegisterCard({ makers_count, start_date }: Props) {
+
+    const counter = useCountdown(start_date)
+
+    return (
+        <Card onlyMd className='flex flex-col gap-24'>
+            <div>
+                <p className="text-body5 text-gray-600">
+                    <FaUsers className='text-body2 mr-4' /> <span className='align-middle'>+ {makers_count} makers</span>
+                </p>
+                <Button color='primary' fullWidth className='mt-16'>Register</Button>
+            </div>
+            <div>
+                {counter.isExpired ?
+                    <p className="text-body3 text-gray-600 text-center">Tournament running!</p>
+                    :
+                    <>
+                        <p className="text-body5 text-gray-900 font-medium">
+                            Tournament starts in
+                        </p>
+                        <div className="grid grid-cols-3 gap-10 mt-16">
+                            <div className="border border-gray-200 rounded-10 flex flex-col py-10 justify-center items-center text-primary-600 text-body3 font-medium">
+                                {counter.days}d
+                            </div>
+                            <div className="border border-gray-200 rounded-10 flex flex-col py-10 justify-center items-center text-primary-600 text-body3 font-medium">
+                                {counter.hours}h
+                            </div>
+                            <div className="border border-gray-200 rounded-10 flex flex-col py-10 justify-center items-center text-primary-600 text-body3 font-medium">
+                                {counter.minutes}m
+                            </div>
+                        </div>
+                    </>
+                }
+            </div>
+            <div>
+                <p className="text-body5 text-gray-900 font-medium">
+                    Sponsors
+                </p>
+                <div className="flex flex-wrap gap-12 mt-16">
+                    <Avatar width={42} src='https://i.pravatar.cc/42?id=70' />
+                    <Avatar width={42} src='https://i.pravatar.cc/42?id=80' />
+                    <Avatar width={42} src='https://i.pravatar.cc/42?id=90' />
+                    <Avatar width={42} src='https://i.pravatar.cc/42?id=100' />
+                </div>
+            </div>
+        </Card>
+    )
+}
--- a/src/mocks/data/tournament.ts
+++ b/src/mocks/data/tournament.ts
@@ -41,7 +41,118 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Semper turpis est, ac e
    makers_count: 668,
    projects_count: 21,
    events: [],
-    faqs: [],
-    judges: [],
+    judges: [
+        {
+            name: "Ben Arc",
+            avatar: "https://s3-alpha-sig.figma.com/img/5e65/c22c/673b8f74ac43f024b036dbc4e6479e0d?Expires=1662940800&Signature=GR54s7FBcLGcPTVclWdmPjzU92tyrYpdUbbDUYKMUkdQbxq2yQlUhZ-AOLDHhOPY4P2G3aW2yT16b1AUbC8RBx1boH25MSrH-jpn6X57IJA-4ZeHP8zCo-yjTLpb8Gn~vudIi9rPfbwJ34stp-VeOAYMuOHlah3YO-B4MBsBv-NqhP7BMY4zz9vGdBLZhOjYQYdLZ2494Ae6L5FpD1ah3WD3U5qUN9dDvYvAtqYfhQeBOnsG6PfYoq8LouCuERC4S26BeooPg8UdGUCf324-SjEihCoL8mQFq80PSsaAZl5~EBOKRUx14FOprizMusaYN0K06E~fjDIDbM2Rmc9Xjg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+            jobTitle: "Maker"
+        },
+        {
+            name: "Ben Arc",
+            avatar: "https://s3-alpha-sig.figma.com/img/5e65/c22c/673b8f74ac43f024b036dbc4e6479e0d?Expires=1662940800&Signature=GR54s7FBcLGcPTVclWdmPjzU92tyrYpdUbbDUYKMUkdQbxq2yQlUhZ-AOLDHhOPY4P2G3aW2yT16b1AUbC8RBx1boH25MSrH-jpn6X57IJA-4ZeHP8zCo-yjTLpb8Gn~vudIi9rPfbwJ34stp-VeOAYMuOHlah3YO-B4MBsBv-NqhP7BMY4zz9vGdBLZhOjYQYdLZ2494Ae6L5FpD1ah3WD3U5qUN9dDvYvAtqYfhQeBOnsG6PfYoq8LouCuERC4S26BeooPg8UdGUCf324-SjEihCoL8mQFq80PSsaAZl5~EBOKRUx14FOprizMusaYN0K06E~fjDIDbM2Rmc9Xjg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+            jobTitle: "Maker"
+        },
+        {
+            name: "Ben Arc",
+            avatar: "https://s3-alpha-sig.figma.com/img/5e65/c22c/673b8f74ac43f024b036dbc4e6479e0d?Expires=1662940800&Signature=GR54s7FBcLGcPTVclWdmPjzU92tyrYpdUbbDUYKMUkdQbxq2yQlUhZ-AOLDHhOPY4P2G3aW2yT16b1AUbC8RBx1boH25MSrH-jpn6X57IJA-4ZeHP8zCo-yjTLpb8Gn~vudIi9rPfbwJ34stp-VeOAYMuOHlah3YO-B4MBsBv-NqhP7BMY4zz9vGdBLZhOjYQYdLZ2494Ae6L5FpD1ah3WD3U5qUN9dDvYvAtqYfhQeBOnsG6PfYoq8LouCuERC4S26BeooPg8UdGUCf324-SjEihCoL8mQFq80PSsaAZl5~EBOKRUx14FOprizMusaYN0K06E~fjDIDbM2Rmc9Xjg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+            jobTitle: "Maker"
+        },
+        {
+            name: "Ben Arc",
+            avatar: "https://s3-alpha-sig.figma.com/img/5e65/c22c/673b8f74ac43f024b036dbc4e6479e0d?Expires=1662940800&Signature=GR54s7FBcLGcPTVclWdmPjzU92tyrYpdUbbDUYKMUkdQbxq2yQlUhZ-AOLDHhOPY4P2G3aW2yT16b1AUbC8RBx1boH25MSrH-jpn6X57IJA-4ZeHP8zCo-yjTLpb8Gn~vudIi9rPfbwJ34stp-VeOAYMuOHlah3YO-B4MBsBv-NqhP7BMY4zz9vGdBLZhOjYQYdLZ2494Ae6L5FpD1ah3WD3U5qUN9dDvYvAtqYfhQeBOnsG6PfYoq8LouCuERC4S26BeooPg8UdGUCf324-SjEihCoL8mQFq80PSsaAZl5~EBOKRUx14FOprizMusaYN0K06E~fjDIDbM2Rmc9Xjg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+            jobTitle: "Maker"
+        },
+        {
+            name: "Ben Arc",
+            avatar: "https://s3-alpha-sig.figma.com/img/5e65/c22c/673b8f74ac43f024b036dbc4e6479e0d?Expires=1662940800&Signature=GR54s7FBcLGcPTVclWdmPjzU92tyrYpdUbbDUYKMUkdQbxq2yQlUhZ-AOLDHhOPY4P2G3aW2yT16b1AUbC8RBx1boH25MSrH-jpn6X57IJA-4ZeHP8zCo-yjTLpb8Gn~vudIi9rPfbwJ34stp-VeOAYMuOHlah3YO-B4MBsBv-NqhP7BMY4zz9vGdBLZhOjYQYdLZ2494Ae6L5FpD1ah3WD3U5qUN9dDvYvAtqYfhQeBOnsG6PfYoq8LouCuERC4S26BeooPg8UdGUCf324-SjEihCoL8mQFq80PSsaAZl5~EBOKRUx14FOprizMusaYN0K06E~fjDIDbM2Rmc9Xjg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+            jobTitle: "Maker"
+        },
+        {
+            name: "Ben Arc",
+            avatar: "https://s3-alpha-sig.figma.com/img/5e65/c22c/673b8f74ac43f024b036dbc4e6479e0d?Expires=1662940800&Signature=GR54s7FBcLGcPTVclWdmPjzU92tyrYpdUbbDUYKMUkdQbxq2yQlUhZ-AOLDHhOPY4P2G3aW2yT16b1AUbC8RBx1boH25MSrH-jpn6X57IJA-4ZeHP8zCo-yjTLpb8Gn~vudIi9rPfbwJ34stp-VeOAYMuOHlah3YO-B4MBsBv-NqhP7BMY4zz9vGdBLZhOjYQYdLZ2494Ae6L5FpD1ah3WD3U5qUN9dDvYvAtqYfhQeBOnsG6PfYoq8LouCuERC4S26BeooPg8UdGUCf324-SjEihCoL8mQFq80PSsaAZl5~EBOKRUx14FOprizMusaYN0K06E~fjDIDbM2Rmc9Xjg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+            jobTitle: "Maker"
+        },
+        {
+            name: "Ben Arc",
+            avatar: "https://s3-alpha-sig.figma.com/img/5e65/c22c/673b8f74ac43f024b036dbc4e6479e0d?Expires=1662940800&Signature=GR54s7FBcLGcPTVclWdmPjzU92tyrYpdUbbDUYKMUkdQbxq2yQlUhZ-AOLDHhOPY4P2G3aW2yT16b1AUbC8RBx1boH25MSrH-jpn6X57IJA-4ZeHP8zCo-yjTLpb8Gn~vudIi9rPfbwJ34stp-VeOAYMuOHlah3YO-B4MBsBv-NqhP7BMY4zz9vGdBLZhOjYQYdLZ2494Ae6L5FpD1ah3WD3U5qUN9dDvYvAtqYfhQeBOnsG6PfYoq8LouCuERC4S26BeooPg8UdGUCf324-SjEihCoL8mQFq80PSsaAZl5~EBOKRUx14FOprizMusaYN0K06E~fjDIDbM2Rmc9Xjg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+            jobTitle: "Maker"
+        },
+        {
+            name: "Ben Arc",
+            avatar: "https://s3-alpha-sig.figma.com/img/5e65/c22c/673b8f74ac43f024b036dbc4e6479e0d?Expires=1662940800&Signature=GR54s7FBcLGcPTVclWdmPjzU92tyrYpdUbbDUYKMUkdQbxq2yQlUhZ-AOLDHhOPY4P2G3aW2yT16b1AUbC8RBx1boH25MSrH-jpn6X57IJA-4ZeHP8zCo-yjTLpb8Gn~vudIi9rPfbwJ34stp-VeOAYMuOHlah3YO-B4MBsBv-NqhP7BMY4zz9vGdBLZhOjYQYdLZ2494Ae6L5FpD1ah3WD3U5qUN9dDvYvAtqYfhQeBOnsG6PfYoq8LouCuERC4S26BeooPg8UdGUCf324-SjEihCoL8mQFq80PSsaAZl5~EBOKRUx14FOprizMusaYN0K06E~fjDIDbM2Rmc9Xjg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+            jobTitle: "Maker"
+        },
+        {
+            name: "Ben Arc",
+            avatar: "https://s3-alpha-sig.figma.com/img/5e65/c22c/673b8f74ac43f024b036dbc4e6479e0d?Expires=1662940800&Signature=GR54s7FBcLGcPTVclWdmPjzU92tyrYpdUbbDUYKMUkdQbxq2yQlUhZ-AOLDHhOPY4P2G3aW2yT16b1AUbC8RBx1boH25MSrH-jpn6X57IJA-4ZeHP8zCo-yjTLpb8Gn~vudIi9rPfbwJ34stp-VeOAYMuOHlah3YO-B4MBsBv-NqhP7BMY4zz9vGdBLZhOjYQYdLZ2494Ae6L5FpD1ah3WD3U5qUN9dDvYvAtqYfhQeBOnsG6PfYoq8LouCuERC4S26BeooPg8UdGUCf324-SjEihCoL8mQFq80PSsaAZl5~EBOKRUx14FOprizMusaYN0K06E~fjDIDbM2Rmc9Xjg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+            jobTitle: "Maker"
+        },
+        {
+            name: "Ben Arc",
+            avatar: "https://s3-alpha-sig.figma.com/img/5e65/c22c/673b8f74ac43f024b036dbc4e6479e0d?Expires=1662940800&Signature=GR54s7FBcLGcPTVclWdmPjzU92tyrYpdUbbDUYKMUkdQbxq2yQlUhZ-AOLDHhOPY4P2G3aW2yT16b1AUbC8RBx1boH25MSrH-jpn6X57IJA-4ZeHP8zCo-yjTLpb8Gn~vudIi9rPfbwJ34stp-VeOAYMuOHlah3YO-B4MBsBv-NqhP7BMY4zz9vGdBLZhOjYQYdLZ2494Ae6L5FpD1ah3WD3U5qUN9dDvYvAtqYfhQeBOnsG6PfYoq8LouCuERC4S26BeooPg8UdGUCf324-SjEihCoL8mQFq80PSsaAZl5~EBOKRUx14FOprizMusaYN0K06E~fjDIDbM2Rmc9Xjg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+            jobTitle: "Maker"
+        },
+        {
+            name: "Ben Arc",
+            avatar: "https://s3-alpha-sig.figma.com/img/5e65/c22c/673b8f74ac43f024b036dbc4e6479e0d?Expires=1662940800&Signature=GR54s7FBcLGcPTVclWdmPjzU92tyrYpdUbbDUYKMUkdQbxq2yQlUhZ-AOLDHhOPY4P2G3aW2yT16b1AUbC8RBx1boH25MSrH-jpn6X57IJA-4ZeHP8zCo-yjTLpb8Gn~vudIi9rPfbwJ34stp-VeOAYMuOHlah3YO-B4MBsBv-NqhP7BMY4zz9vGdBLZhOjYQYdLZ2494Ae6L5FpD1ah3WD3U5qUN9dDvYvAtqYfhQeBOnsG6PfYoq8LouCuERC4S26BeooPg8UdGUCf324-SjEihCoL8mQFq80PSsaAZl5~EBOKRUx14FOprizMusaYN0K06E~fjDIDbM2Rmc9Xjg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+            jobTitle: "Maker"
+        },
+        {
+            name: "Ben Arc",
+            avatar: "https://s3-alpha-sig.figma.com/img/5e65/c22c/673b8f74ac43f024b036dbc4e6479e0d?Expires=1662940800&Signature=GR54s7FBcLGcPTVclWdmPjzU92tyrYpdUbbDUYKMUkdQbxq2yQlUhZ-AOLDHhOPY4P2G3aW2yT16b1AUbC8RBx1boH25MSrH-jpn6X57IJA-4ZeHP8zCo-yjTLpb8Gn~vudIi9rPfbwJ34stp-VeOAYMuOHlah3YO-B4MBsBv-NqhP7BMY4zz9vGdBLZhOjYQYdLZ2494Ae6L5FpD1ah3WD3U5qUN9dDvYvAtqYfhQeBOnsG6PfYoq8LouCuERC4S26BeooPg8UdGUCf324-SjEihCoL8mQFq80PSsaAZl5~EBOKRUx14FOprizMusaYN0K06E~fjDIDbM2Rmc9Xjg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+            jobTitle: "Maker"
+        },
+    ],

+    faqs: [
+        {
+            question: "What is Shock the Web?",
+            answer:
+                `Shock the Web is a virtual hackathon to promote, explore, build and design web applications that can interact with WebLN enabled wallets and browsers. We want to make building on bitcoin more accessible to the masses of web developers out there. 
+
+Bitcoin development can seem scary for new developers coming in, but it doesn't have to be. With the lightning network's toolkit and libraries a bunch of new opportunities are waiting to be explored. We hope these hackathons can be a chance for you to preview what is possible on bitcoin and the lightning network by fostering collaboration, hopefully shortening (or easing) any developer onboarding time, and helping you connect with other bitcoiners in a fun and friendly space.`
+        },
+        {
+            question: "When and where will it take place?",
+            answer:
+                `Shock the Web is a virtual hackathon to promote, explore, build and design web applications that can interact with WebLN enabled wallets and browsers. We want to make building on bitcoin more accessible to the masses of web developers out there. 
+
+Bitcoin development can seem scary for new developers coming in, but it doesn't have to be. With the lightning network's toolkit and libraries a bunch of new opportunities are waiting to be explored. We hope these hackathons can be a chance for you to preview what is possible on bitcoin and the lightning network by fostering collaboration, hopefully shortening (or easing) any developer onboarding time, and helping you connect with other bitcoiners in a fun and friendly space.`
+        },
+        {
+            question: "What will we be doing?",
+            answer:
+                `Shock the Web is a virtual hackathon to promote, explore, build and design web applications that can interact with WebLN enabled wallets and browsers. We want to make building on bitcoin more accessible to the masses of web developers out there. 
+
+Bitcoin development can seem scary for new developers coming in, but it doesn't have to be. With the lightning network's toolkit and libraries a bunch of new opportunities are waiting to be explored. We hope these hackathons can be a chance for you to preview what is possible on bitcoin and the lightning network by fostering collaboration, hopefully shortening (or easing) any developer onboarding time, and helping you connect with other bitcoiners in a fun and friendly space.`
+        },
+        {
+            question: "This is my first time hacking on lightning, will there be help?",
+            answer:
+                `Shock the Web is a virtual hackathon to promote, explore, build and design web applications that can interact with WebLN enabled wallets and browsers. We want to make building on bitcoin more accessible to the masses of web developers out there. 
+
+Bitcoin development can seem scary for new developers coming in, but it doesn't have to be. With the lightning network's toolkit and libraries a bunch of new opportunities are waiting to be explored. We hope these hackathons can be a chance for you to preview what is possible on bitcoin and the lightning network by fostering collaboration, hopefully shortening (or easing) any developer onboarding time, and helping you connect with other bitcoiners in a fun and friendly space.`
+        },
+        {
+            question: "This is my first time hacking on lightning, will there be help?",
+            answer:
+                `Shock the Web is a virtual hackathon to promote, explore, build and design web applications that can interact with WebLN enabled wallets and browsers. We want to make building on bitcoin more accessible to the masses of web developers out there. 
+
+Bitcoin development can seem scary for new developers coming in, but it doesn't have to be. With the lightning network's toolkit and libraries a bunch of new opportunities are waiting to be explored. We hope these hackathons can be a chance for you to preview what is possible on bitcoin and the lightning network by fostering collaboration, hopefully shortening (or easing) any developer onboarding time, and helping you connect with other bitcoiners in a fun and friendly space.`
+        },
+        {
+            question: "How many members can I have on my team?",
+            answer:
+                `Shock the Web is a virtual hackathon to promote, explore, build and design web applications that can interact with WebLN enabled wallets and browsers. We want to make building on bitcoin more accessible to the masses of web developers out there. 
+
+Bitcoin development can seem scary for new developers coming in, but it doesn't have to be. With the lightning network's toolkit and libraries a bunch of new opportunities are waiting to be explored. We hope these hackathons can be a chance for you to preview what is possible on bitcoin and the lightning network by fostering collaboration, hopefully shortening (or easing) any developer onboarding time, and helping you connect with other bitcoiners in a fun and friendly space.`
+        },
+        {
+            question: "Who will choose the winners?",
+            answer:
+                `Shock the Web is a virtual hackathon to promote, explore, build and design web applications that can interact with WebLN enabled wallets and browsers. We want to make building on bitcoin more accessible to the masses of web developers out there. 
+
+Bitcoin development can seem scary for new developers coming in, but it doesn't have to be. With the lightning network's toolkit and libraries a bunch of new opportunities are waiting to be explored. We hope these hackathons can be a chance for you to preview what is possible on bitcoin and the lightning network by fostering collaboration, hopefully shortening (or easing) any developer onboarding time, and helping you connect with other bitcoiners in a fun and friendly space.`
+        },
+    ],
 }]
--- a/src/mocks/data/users.ts
+++ b/src/mocks/data/users.ts
@@ -1,5 +1,5 @@
 import { Chance } from "chance";
-import { GenericMakerRole, MakerSkill, MyProfile, RoleLevelEnum, User } from "src/graphql";
+import { GenericMakerRole, MakerSkill, MyProfile, RoleLevelEnum, User, Tournament } from "src/graphql";
 import { randomItem, randomItems } from "src/utils/helperFunctions";
 import { posts } from "./posts";
 import { getCoverImage, getAvatarImage } from "./utils";
@@ -135,9 +135,9 @@ export const user: User & MyProfile = {
            thumbnail_image: getCoverImage(),
            start_date: new Date(2021, 3).toISOString(),
            end_date: new Date(2021, 4).toISOString(),
-            tags: [],
-            website: "https://breez-conf.com"
-        },
+            website: "https://breez-conf.com",
+
+        } as Tournament,
        {
            id: 2,
            title: "Shock the Web 3",
@@ -146,9 +146,9 @@ export const user: User & MyProfile = {
            thumbnail_image: getCoverImage(),
            start_date: new Date(2022, 7).toISOString(),
            end_date: new Date(2022, 11).toISOString(),
-            tags: [],
-            website: "https://shock-the-web.com"
-        },
+            website: "https://shock-the-web.com",
+
+        } as Tournament,
    ],
    similar_makers: [
        {
--- a/src/utils/helperFunctions.tsx
+++ b/src/utils/helperFunctions.tsx
@@ -8,7 +8,7 @@ export function random(min: number, max: number) {
  return Math.random() * (max - min) + min;
 }

-export function randomItem(...args: any[]) {
+export function randomItem<T>(...args: T[]): T {
  return args[Math.floor(Math.random() * args.length)];
 }

--- a/src/utils/hooks/index.ts
+++ b/src/utils/hooks/index.ts
@@ -12,4 +12,5 @@ export * from './useCurrentSection'
 export * from './usePreload'
 export * from './useCarousel'
 export * from './usePrompt'
+export * from './useCountdown'

--- a/src/utils/hooks/useCountdown.ts
+++ b/src/utils/hooks/useCountdown.ts
@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+
+const useCountdown = (targetDate: string | number | Date) => {
+    const countDownDate = new Date(targetDate).getTime();
+
+    const [countDown, setCountDown] = useState(
+        countDownDate - new Date().getTime()
+    );
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setCountDown(countDownDate - new Date().getTime());
+        }, 1000);
+
+        return () => clearInterval(interval);
+    }, [countDownDate]);
+
+    return getReturnValues(countDown);
+};
+
+const getReturnValues = (countDown: number) => {
+    // calculate time left
+    const days = Math.floor(countDown / (1000 * 60 * 60 * 24));
+    const hours = Math.floor(
+        (countDown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+    );
+    const minutes = Math.floor((countDown % (1000 * 60 * 60)) / (1000 * 60));
+    const seconds = Math.floor((countDown % (1000 * 60)) / 1000);
+
+    return { days, hours, minutes, seconds, isExpired: days + hours + minutes + seconds <= 0 };
+};
+
+export { useCountdown };