Add basic home page and fix charts list

src/Components/chart/chart.css

@@ -1,7 +1,7 @@
 .chart {
     width: 18em;
     padding: 0;
-    margin: 0;
+    margin: 15px;
     background-color: #f97e8e;
     border-radius: 1em;
     border-bottom: 0.3em solid #A32D44;

src/Components/navbar/navbar.jsx

@@ -1,11 +1,10 @@
-import { Fragment } from 'react'
-import { Disclosure, Menu, Transition } from '@headlessui/react'
-import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/react/24/outline'
+import { Disclosure } from '@headlessui/react'
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
 import Logo from './../../assets/maimai.png'
 
 const navigation = [
-  { name: 'Home', href: '/', current: true },
-  { name: 'Charts', href: '/charts', current: false },
+  { name: 'Home', href: '/' },
+  { name: 'Charts', href: '/charts' },
 ]
 
 function classNames(...classes) {
@@ -20,7 +19,6 @@ function Navbar() {
           <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
             <div className="relative flex h-16 items-center justify-between">
               <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
-                {/* Mobile menu button*/}
                 <Disclosure.Button className="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
                   <span className="sr-only">Open main menu</span>
                   {open ? (
@@ -35,12 +33,12 @@ function Navbar() {
                   <img
                     className="block h-8 w-auto lg:hidden"
                     src={Logo}
-                    alt="Your Company"
+                    alt="Maimai"
                   />
                   <img
                     className="hidden h-8 w-auto lg:block"
                     src={Logo}
-                    alt="Your Company"
+                    alt="Maimai"
                   />
                 </div>
                 <div className="hidden sm:ml-6 sm:block">
@@ -50,10 +48,10 @@ function Navbar() {
                         key={item.name}
                         href={item.href}
                         className={classNames(
-                          item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
+                          item.href === window.location.pathname ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
                           'rounded-md px-3 py-2 text-sm font-medium'
                         )}
-                        aria-current={item.current ? 'page' : undefined}
+                        aria-current={item.href === window.location.pathname ? 'page' : undefined}
                       >
                         {item.name}
                       </a>
@@ -72,11 +70,11 @@ function Navbar() {
                   as="a"
                   href={item.href}
                   className={classNames(
-                    item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
+                    item.href === window.location.pathname ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
                     'block rounded-md px-3 py-2 text-base font-medium'
                   )}
-                  aria-current={item.current ? 'page' : undefined}
-                >
+                  aria-current={item.href === window.location.pathname ? 'page' : undefined}
+                  >
                   {item.name}
                 </Disclosure.Button>
               ))}

src/Route/Charts/Charts.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: row;
   justify-content: space-around;
+  flex-wrap: wrap;
   padding: 10px;
   margin: 0;
 }

src/Route/Index/Index.jsx

@@ -1,9 +1,62 @@
 import './Index.css';
+import Yuki from './../../assets/yuki.png';
+import { getFirestore, collection, addDoc, getDocs } from "firebase/firestore";
+import { useEffect, useState } from 'react';  
 
 function Index() {
+
+  const [charts, setCharts] = useState([]);
+
+  const getCharts = async () => {
+    const db = getFirestore();
+    const chartRef = collection(db, "Chart");
+    const snapshot = await getDocs(chartRef);
+    const charts = snapshot.docs.map(doc => doc.data());
+
+    return charts;
+  }
+
+  useEffect(() => {
+    async function fetchData() {
+      const data = await getCharts();
+      setCharts(data);
+    }
+    fetchData();
+  }, []);
+
   return (
     <div className="App">
-        <p>Hello world</p>
+        <div className="flex justify-center">
+          <div className="w-6/12 h-80 bg-gray-200 rounded-lg border-2 border-indigo-800 m-2 flex flex-row justify-around">
+            <img src={Yuki} alt="Yuki" />
+            <div className="flex items-center">
+              <div className="flex flex-col">
+                <div className="flex">
+                  <span className="font-bold text-sm m-2">
+                    <span className="text-indigo-500 text-xl">{charts.length}</span> Charts
+                  </span>
+                  <span className="font-bold text-sm m-2">
+                    <span className="text-indigo-500 text-xl">0</span> Score
+                  </span>
+                </div>
+                <div>
+                  <p className="text-md">
+                    Welcome to MaiScore, a website that allows you to view your score from Maimai.
+                    You will be able to submit your score for each chart and see other score from other players.
+                  </p>
+                </div>
+                <div>
+                  <button className="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded m-2">
+                    <a href="/charts">Charts</a>
+                  </button>
+                  <button className="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded m-2">
+                    <a href="/how-to">How to submit</a>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
     </div>      
   );
 }

src/index.css

@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;

src/router.jsx

@@ -17,6 +17,10 @@ const router = [
       path: "/charts/:chartId/score",
       element: <ChartScore />,
     },
+    {
+      path: "/how-to",
+      element:<div>How to - Work In progress</div>,
+    },
     {
       path: "/admin/charts/add",
       element: <AddChart />,