Dev front

frontend/code/src/components/Home/LeaderBoard.tsx

@@ -0,0 +1,13 @@
+import { Chart } from './assets/Chart'
+import { Table } from './assets/Table'
+export const LeaderBoard = () => {
+    return (
+        <div className='flex flex-col rounded-2xl justify-start items-start mt-6 sm:h-full h-full w-full  bg-base-200 overflow-scroll scroll'>
+           <div className="flex justify-start items-start pl-2 pt-2 sm:pl-12 sm:pt-12 gap-x-4">
+               <Chart/> <span className='font-montserrat'>Leader Board </span>
+
+           </div>
+            <Table />
+        </div>
+    )
+}

frontend/code/src/components/Home/assets/Button.tsx

@@ -0,0 +1,20 @@
+export const Button = () => {
+    return (
+
+    <div className="flex absolute justify-center items-center left-[40%] sm:left-[41.4%] top-[60%] sm:top-3/4   w-[22vw] sm:w-[17.5vw]">
+        <span className="absolute text-white font-montserrat text-[1.4vw]">PLAY NOW</span>
+        <svg width="211" height="57" viewBox="0 0 211 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect x="0.84375" width="209.158" height="57" rx="6" fill="url(#paint0_linear_377_5387)"/>
+
+            <defs>
+            <linearGradient id="paint0_linear_377_5387" x1="105.423" y1="0" x2="105.423" y2="57" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#7940CF"/>
+            <stop offset="1" stopColor="#5921CB"/>
+            </linearGradient>
+            </defs>
+
+        </svg>
+
+    </div>
+    )
+}

frontend/code/src/components/Home/assets/Chart.tsx

@@ -0,0 +1,9 @@
+export const Chart = () => {
+    return (
+
+        <svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M16.8694 0C20.7805 0 22.9885 2.21835 23 6.1295V16.8705C23 20.7805 20.7805 23 16.8694 23H6.1295C2.21835 23 0 20.7805 0 16.8705V6.1295C0 2.21835 2.21835 0 6.1295 0H16.8694ZM12.075 4.7495C11.7519 4.554 11.3609 4.554 11.0515 4.7495C10.7399 4.94385 10.5685 5.3015 10.6019 5.658V17.3765C10.6605 17.871 11.0734 18.239 11.5564 18.239C12.052 18.239 12.4649 17.871 12.5109 17.3765V5.658C12.5569 5.3015 12.3855 4.94385 12.075 4.7495ZM6.7045 8.5215C6.394 8.326 6.00185 8.326 5.6925 8.5215C5.38085 8.717 5.2095 9.07235 5.244 9.43V17.3765C5.28885 17.871 5.70285 18.239 6.19735 18.239C6.693 18.239 7.10585 17.871 7.15185 17.3765V9.43C7.1875 9.07235 7.01385 8.717 6.7045 8.5215ZM17.3524 12.696C17.043 12.5005 16.652 12.5005 16.33 12.696C16.0184 12.8915 15.847 13.2354 15.893 13.6045V17.3765C15.939 17.871 16.3519 18.239 16.8475 18.239C17.3305 18.239 17.7434 17.871 17.802 17.3765V13.6045C17.8354 13.2354 17.664 12.8915 17.3524 12.696Z" fill="white"/>
+        </svg>
+
+    )
+}

frontend/code/src/components/Home/assets/Table.tsx

@@ -0,0 +1,67 @@
+import { Trophy } from './Trophy' 
+import { useState,useEffect } from 'react'
+
+
+
+
+
+export const Table = () =>
+{
+    const [users, setUsers] = useState<any | undefined>([])
+    useEffect( ()  => {
+
+            const fetchdata = async() =>{
+                for (let i = 0 ; i < 10 ; i++)
+                {
+                    let response = await fetch(`https://randomuser.me/api/`)
+                    let data  = await response.json()
+                    if (data.results && data.results.length > 0) {
+                        const newUser = data.results[0];
+                        setUsers((oldUsers : any) => [...oldUsers, newUser]);
+                        console.log(newUser)
+                    }
+                }
+            }
+
+                fetchdata().catch(console.error)
+
+    },[])
+    return (
+        <div className="overflow-x-auto w-full">
+          <table className="table w-full">
+            <thead>
+              <tr className='w-[80vw] flex justify-between px-10 items-center'>
+                <th>Place</th>
+                <th>User</th>
+                <th>Score</th>
+              </tr>
+            </thead>
+            <tbody className='flex flex-col justify-center items-center content-center gap-4'>
+              {users.map((x: any, index: number) => (
+                <tr
+                  key={index}
+                  className='bg-base-100 border-base-200 rounded-3xl w-[80vw] flex justify-between px-10 items-center'
+                >
+                  <td>
+                    <div className="flex items-center space-x-3">
+                      <div className='flex justify-center items-center gap-x-3'>
+                        <Trophy />
+                      </div>
+                    </div>
+                  </td>
+                  <td className='flex justify-start items-center gap-x-2'>
+                    <div className="avatar">
+                      <div className="mask mask-squircle w-12 h-12">
+                        <img src={x.picture.thumbnail} alt="Avatar Tailwind CSS Component" />
+                      </div>
+                    </div>
+                    <div className="flex font-montserrat ">{x.name.first}</div>
+                  </td>
+                  <td>24</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      );
+}

frontend/code/src/components/Home/assets/Trophy.tsx

@@ -0,0 +1,9 @@
+export const Trophy = () => {
+    return (
+
+        <svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M25.0906 2.90323C25.1875 1.93548 25.1875 1.06452 25.1875 0H5.8125C5.8125 1.06452 5.8125 1.93548 5.90938 2.90323H0V3.87097C0 12.4839 10.9469 18.5806 13.5625 19.9355V23.2258C13.5625 24.871 12.3031 26.129 10.6563 26.129H8.71875V30H22.2812V26.129H20.3438C18.6969 26.129 17.4375 24.871 17.4375 23.2258V19.9355C20.0531 18.5806 31 12.4839 31 3.87097V2.90323H25.0906ZM2.03438 4.83871H6.10313C6.49063 9.19355 7.55625 12.2903 8.71875 14.5161C5.61875 12.0968 2.42188 8.70968 2.03438 4.83871ZM22.3781 14.5161C23.5406 12.2903 24.6063 9.19355 24.9938 4.83871H29.0625C28.5781 8.70968 25.3813 12.0968 22.3781 14.5161Z" fill="#7138CE"/>
+        </svg>
+
+    )
+}

frontend/code/src/components/Home/index.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react'
+import {Layout} from '../Layout/'
+import { Button } from './assets/Button'
+import  Hero  from './assets/Hero.png'
+import { LeaderBoard } from './LeaderBoard'
+export const Home : FC = () : JSX.Element =>{
+    return (
+        <Layout>
+            <div className="flex flex-col items-center h-screen w-full sm:gap-y-8 gap-y-2">
+                <div className='flex justify-center relative items-start pt-6 h-2/6 max-h-36 sm:max-h-96 w-[100vw] sm:h-3/4 sm:w-[90vw]'>
+                    <img className='object-fit h-full w-full px-12' src={Hero} alt="bg hero" />
+                    <Button/>
+                </div>
+                <div className='flex justify-center relative items-start pt-6 h-3/6 px-12 w-[100vw] sm:h-3/4 sm:w-[90vw]'>
+                    <LeaderBoard/>
+
+                </div>
+
+            </div>
+
+        </Layout>
+    )
+}

frontend/code/src/components/Layout/Assets/Dash.tsx

@@ -1,10 +1,12 @@
 export const Dash =  () => {
     return (
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <rect x="4" y="4" width="6" height="7" rx="1" stroke="#BDBDBD" stroke-width="2" stroke-linejoin="round"/>
-        <rect x="4" y="15" width="6" height="5" rx="1" stroke="#BDBDBD" stroke-width="2" stroke-linejoin="round"/>
-        <rect x="14" y="4" width="6" height="5" rx="1" stroke="#BDBDBD" stroke-width="2" stroke-linejoin="round"/>
-        <rect x="14" y="13" width="6" height="7" rx="1" stroke="#BDBDBD" stroke-width="2" stroke-linejoin="round"/>
-        </svg>
+        <div className="h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center">
+            <svg  width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect  x="4" y="4" width="6" height="7" rx="1" stroke="#BDBDBD" strokeWidth="2" strokeLinejoin="round"/>
+            <rect x="4" y="15" width="6" height="5" rx="1" stroke="#BDBDBD" strokeWidth="2" strokeLinejoin="round"/>
+            <rect x="14" y="4" width="6" height="5" rx="1" stroke="#BDBDBD" strokeWidth="2" strokeLinejoin="round"/>
+            <rect x="14" y="13" width="6" height="7" rx="1" stroke="#BDBDBD" strokeWidth="2" strokeLinejoin="round"/>
+            </svg>
+        </div>
     )
 }

frontend/code/src/components/Layout/Assets/Game.tsx

@@ -0,0 +1,10 @@
+export const Game = () => {
+    return (
+        <div className="h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center ">
+            <svg   width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M7.79142 0C8.29642 0 8.69321 0.401326 8.69321 0.885278C8.69321 1.23939 8.9938 1.52268 9.35452 1.52268H10.5449C12.3605 1.53448 13.8394 2.98634 13.8514 4.7569V4.98117C14.9937 4.98117 16.1359 5.00477 17.2902 5.01658C21.4625 5.01658 24.5045 7.99111 24.5045 12.0988V17.3751C24.5045 21.4828 21.4625 24.4573 17.2902 24.4573C15.6189 24.4927 13.9476 24.5045 12.2643 24.5045C10.5809 24.5045 8.88559 24.4927 7.21428 24.4573C3.04202 24.4573 0 21.4828 0 17.3751V12.0988C0 7.99111 3.04202 5.01658 7.2263 5.01658C8.80142 4.99297 10.4126 4.96936 12.0478 4.96936V4.7687C12.0478 3.95424 11.3625 3.29324 10.5449 3.29324H9.35452C7.99583 3.29324 6.88964 2.20729 6.88964 0.885278C6.88964 0.401326 7.29845 0 7.79142 0ZM8.68118 11.7211C8.17618 11.7211 7.7794 12.1224 7.7794 12.6064V13.8458H6.50488C6.0119 13.8458 5.60309 14.2471 5.60309 14.731C5.60309 15.2268 6.0119 15.6163 6.50488 15.6163H7.7794V16.8675C7.7794 17.3515 8.17618 17.7528 8.68118 17.7528C9.17416 17.7528 9.58297 17.3515 9.58297 16.8675V15.6163H10.8455C11.3384 15.6163 11.7473 15.2268 11.7473 14.731C11.7473 14.2471 11.3384 13.8458 10.8455 13.8458H9.58297V12.6064C9.58297 12.1224 9.17416 11.7211 8.68118 11.7211ZM18.1319 15.9114H18.0117C17.5054 15.9114 17.1099 16.3127 17.1099 16.7967C17.1099 17.2924 17.5054 17.682 18.0117 17.682H18.1319C18.6249 17.682 19.0337 17.2924 19.0337 16.7967C19.0337 16.3127 18.6249 15.9114 18.1319 15.9114ZM16.0758 11.8509H15.9556C15.4506 11.8509 15.0538 12.2523 15.0538 12.7362C15.0538 13.232 15.4506 13.6215 15.9556 13.6215H16.0758C16.5688 13.6215 16.9776 13.232 16.9776 12.7362C16.9776 12.2523 16.5688 11.8509 16.0758 11.8509Z" fill="#BDBDBD"/>
+            </svg>
+        </div>
+
+    )
+}

frontend/code/src/components/Layout/Assets/Logo.tsx

@@ -1,6 +1,6 @@
 export const Logo = () => {
     return (
-        <svg className="p-1 fixed left-3 z-100 w-20" width="95" height="51" viewBox="0 0 95 51" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+        <svg className=" sm:w-20  w-14 hover:fill-primary  hover:cursor-pointer" width="95" height="51" viewBox="0 0 95 51" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
         <path d="M33.203 31.5552C29.731 31.5316 26.8972 34.3197 26.8735 37.7827C26.8498 41.2458 29.6452 44.0722 33.1172 44.0959C36.5892 44.1195 39.423 41.3313 39.4467 37.8683C39.4704 34.4053 36.675 31.5788 33.203 31.5552Z" fill="white"/>
         <path d="M23.7568 49.8316L25.2388 50.844L29.9719 43.9511L28.49 42.9387L23.7568 49.8316Z" fill="white"/>
         <path d="M3.98999 28.56V10.9558H7.58099L7.72181 13.765L7.0177 13.5543C7.12723 13.0705 7.44017 12.6179 7.95652 12.1965C8.48852 11.7751 9.16134 11.4318 9.97499 11.1665C10.7886 10.8855 11.6805 10.7451 12.6506 10.7451C13.9806 10.7451 15.1463 11.0182 16.1478 11.5644C17.1648 12.1107 17.9472 12.8676 18.4948 13.8352C19.0581 14.7872 19.3398 15.9031 19.3398 17.1828C19.3398 18.4469 19.0581 19.5628 18.4948 20.5304C17.9315 21.498 17.1413 22.2549 16.1243 22.8012C15.1072 23.3474 13.9337 23.6205 12.6037 23.6205C11.6336 23.6205 10.7417 23.48 9.92805 23.1991C9.1144 22.9026 8.44158 22.528 7.90958 22.0754C7.37758 21.6073 7.04899 21.1391 6.92381 20.6709L7.79223 20.3431V28.56H3.98999ZM11.6883 20.4602C12.4863 20.4602 13.1826 20.3275 13.7772 20.0622C14.3718 19.7813 14.8334 19.3989 15.162 18.9151C15.4906 18.4157 15.6549 17.8383 15.6549 17.1828C15.6549 16.5273 15.4906 15.9577 15.162 15.4739C14.8491 14.9745 14.3875 14.5921 13.7772 14.3268C13.1826 14.0459 12.4863 13.9054 11.6883 13.9054C10.8747 13.9054 10.1628 14.0459 9.55252 14.3268C8.95793 14.6077 8.49634 14.9979 8.16776 15.4973C7.83917 15.9811 7.67487 16.5429 7.67487 17.1828C7.67487 17.8383 7.83917 18.4157 8.16776 18.9151C8.49634 19.3989 8.95793 19.7813 9.55252 20.0622C10.1628 20.3275 10.8747 20.4602 11.6883 20.4602ZM46.1088 23.4098V10.9792H49.6763L49.8172 14.1863L48.8079 14.4204C49.0583 13.765 49.4338 13.1641 49.9345 12.6179C50.4509 12.056 51.1002 11.6034 51.8826 11.2601C52.6649 10.9012 53.5333 10.7217 54.4878 10.7217C55.6613 10.7217 56.6471 10.948 57.4451 11.4006C58.2431 11.8532 58.8455 12.4774 59.2523 13.2734C59.6748 14.0693 59.886 14.9745 59.886 15.9889V23.4098H56.1307V16.6912C56.1307 16.1294 56.0056 15.6377 55.7552 15.2164C55.5049 14.7794 55.1606 14.4516 54.7225 14.2332C54.2844 13.9991 53.7759 13.882 53.1969 13.882C52.6649 13.882 52.1955 13.9756 51.7887 14.1629C51.3819 14.3346 51.0298 14.5687 50.7325 14.8652C50.4509 15.1461 50.2396 15.4505 50.0988 15.7782C49.958 16.1059 49.8876 16.4337 49.8876 16.7614V23.4098H48.0099C47.431 23.4098 46.9772 23.4098 46.6486 23.4098C46.3357 23.4098 46.1557 23.4098 46.1088 23.4098ZM79.1294 28.7941C77.7212 28.7941 76.4616 28.638 75.3506 28.3259C74.2397 28.0137 73.34 27.6392 72.6515 27.2022L73.9424 24.4867C74.2866 24.6427 74.6856 24.8144 75.1394 25.0017C75.6088 25.189 76.133 25.345 76.7119 25.4699C77.2909 25.6103 77.9324 25.6806 78.6365 25.6806C79.4658 25.6806 80.1778 25.5323 80.7723 25.2358C81.3669 24.9393 81.8207 24.5023 82.1336 23.9248C82.4622 23.363 82.6265 22.6529 82.6265 21.7945V20.3899L83.3541 20.507C83.2289 21.0064 82.8847 21.4746 82.3214 21.9116C81.7738 22.333 81.0696 22.6763 80.2091 22.9416C79.3641 23.1913 78.4488 23.3162 77.463 23.3162C76.1643 23.3162 75.0142 23.0587 74.0128 22.5436C73.0114 22.0286 72.2291 21.3029 71.6658 20.3665C71.1181 19.4301 70.8443 18.3533 70.8443 17.136C70.8443 15.8718 71.1338 14.7638 71.7127 13.8118C72.3073 12.8442 73.1209 12.0873 74.1536 11.541C75.1863 10.9948 76.3677 10.7217 77.6977 10.7217C78.0889 10.7217 78.527 10.7685 79.0121 10.8621C79.5128 10.9402 80.0135 11.065 80.5142 11.2367C81.0305 11.3928 81.5078 11.5878 81.9459 11.8219C82.384 12.0404 82.7361 12.3057 83.0021 12.6179C83.2837 12.93 83.4402 13.2577 83.4715 13.6011L82.6969 13.7884L82.8378 10.9792H86.4053V21.7243C86.4053 22.8948 86.2097 23.9248 85.8185 24.8144C85.443 25.704 84.9188 26.4453 84.246 27.0383C83.5888 27.6314 82.8221 28.0684 81.9459 28.3493C81.0696 28.6458 80.1308 28.7941 79.1294 28.7941ZM78.7539 20.4134C79.5832 20.4134 80.2873 20.2807 80.8662 20.0154C81.4608 19.7345 81.9224 19.3521 82.251 18.8683C82.5796 18.3689 82.7439 17.7993 82.7439 17.1594C82.7439 16.5039 82.5796 15.9343 82.251 15.4505C81.9224 14.9667 81.4608 14.5843 80.8662 14.3034C80.2873 14.0225 79.5832 13.882 78.7539 13.882C77.9246 13.882 77.1892 14.0225 76.5476 14.3034C75.9218 14.5843 75.4367 14.9667 75.0925 15.4505C74.7482 15.9343 74.5761 16.5039 74.5761 17.1594C74.5761 17.7993 74.7482 18.3689 75.0925 18.8683C75.4367 19.3521 75.9218 19.7345 76.5476 20.0154C77.1892 20.2807 77.9246 20.4134 78.7539 20.4134Z" fill="white"/>

frontend/code/src/components/Layout/Assets/Message.tsx

@@ -0,0 +1,11 @@
+export const Message  = () => {
+    return (
+        <div className="h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center ">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M19.3259 5.77772C20 6.78661 20 8.19108 20 11C20 13.8089 20 15.2134 19.3259 16.2223C19.034 16.659 18.659 17.034 18.2223 17.3259C17.3409 17.9148 16.1577 17.9892 14 17.9986V18L12.8944 20.2111C12.5259 20.9482 11.4741 20.9482 11.1056 20.2111L10 18V17.9986C7.8423 17.9892 6.65907 17.9148 5.77772 17.3259C5.34096 17.034 4.96596 16.659 4.67412 16.2223C4 15.2134 4 13.8089 4 11C4 8.19108 4 6.78661 4.67412 5.77772C4.96596 5.34096 5.34096 4.96596 5.77772 4.67412C6.78661 4 8.19108 4 11 4H13C15.8089 4 17.2134 4 18.2223 4.67412C18.659 4.96596 19.034 5.34096 19.3259 5.77772Z" stroke="#BDBDBD" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                <path d="M9 9L15 9" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M9 13H12" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+        </div>
+    )
+}

frontend/code/src/components/Layout/Assets/Out.tsx

@@ -0,0 +1,11 @@
+
+export const Out = () => {
+    return (
+        <div className="h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center ">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M7 7.13193V6.61204C7 4.46614 7 3.3932 7.6896 2.79511C8.37919 2.19703 9.44136 2.34877 11.5657 2.65224L15.8485 3.26408C18.3047 3.61495 19.5327 3.79039 20.2664 4.63628C21 5.48217 21 6.72271 21 9.20377V14.7962C21 17.2773 21 18.5178 20.2664 19.3637C19.5327 20.2096 18.3047 20.385 15.8485 20.7359L11.5657 21.3478C9.44136 21.6512 8.37919 21.803 7.6896 21.2049C7 20.6068 7 19.5339 7 17.388V17.066" stroke="#BDBDBD" stroke-width="2"/>
+            <path d="M16 12L16.7809 11.3753L17.2806 12L16.7809 12.6247L16 12ZM4 13C3.44771 13 3 12.5523 3 12C3 11.4477 3.44771 11 4 11V13ZM12.7809 6.3753L16.7809 11.3753L15.2191 12.6247L11.2191 7.6247L12.7809 6.3753ZM16.7809 12.6247L12.7809 17.6247L11.2191 16.3753L15.2191 11.3753L16.7809 12.6247ZM16 13H4V11H16V13Z" fill="#BDBDBD"/>
+            </svg>
+        </div>
+    )
+}

frontend/code/src/components/Layout/Assets/Profile.tsx

@@ -0,0 +1,10 @@
+
+export const Profile = () => {
+    return (
+    <div className="h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center ">
+        <svg width="19" height="24" viewBox="0 0 19 24" fill="#BDBDBD" xmlns="http://www.w3.org/2000/svg">
+        <path d="M9.3615 15.416C14.4385 15.416 18.723 16.241 18.723 19.4239C18.723 22.608 14.4104 23.4037 9.3615 23.4037C4.28566 23.4037 0 22.5788 0 19.3958C0 16.2117 4.31259 15.416 9.3615 15.416ZM9.3615 0C12.8008 0 15.5565 2.75465 15.5565 6.19152C15.5565 9.6284 12.8008 12.3842 9.3615 12.3842C5.92337 12.3842 3.16654 9.6284 3.16654 6.19152C3.16654 2.75465 5.92337 0 9.3615 0Z" fill="#BDBDBD"/>
+        </svg>
+    </div>
+    )
+}

frontend/code/src/components/Layout/Assets/Search.tsx

@@ -0,0 +1,10 @@
+import {BiSearch} from 'react-icons/bi'
+
+export const Search = () => {
+    return (
+        <div className='hidden sm:flex sm:items-center absolute pr-24 '>
+            <input type="text" placeholder="Search" className={`input w-60 mr-4 h-12`}/>
+            <div className='relative right-12 top-0 w-12 '><BiSearch size="1.4em" /></div>
+        </div> 
+    )
+}