Leaderboard Page

website/src/App.js

@@ -1,17 +1,19 @@
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import './App.css';
-import WebCam from './components/camera';
-import Ranks from './components/ranks';
+import Home from './Pages/Home';
+import Leaderboard from './Pages/Leaderboard';
 import UserProfile from './Pages/Profile';
+import Navbar from './components/navbar';
 
 function App() {
   return (
     <Router>
     <div className="App">
+      <Navbar />
       <Routes>
-        <Route path='/' element={<WebCam />}/>
-        <Route path='/ranks' element={<Ranks />} />
+        <Route path='/' element={<Home />}/>
+        <Route path='/ranks' element={<Leaderboard />} />
         <Route path='/profile' element={<UserProfile />} />      
       </Routes>
     </div>

website/src/Pages/Home.css

@@ -0,0 +1,160 @@
+.photo-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 9px 12px;
+    gap: 8px;
+    height: 40px;
+    width: 172px;
+    border: none;
+    background: #FF2849;
+    border-radius: 20px;
+    cursor: pointer;
+    margin-left: 42vw;
+    margin-top: 3%;
+    position: relative;
+  }
+
+  .lable {
+    line-height: 22px;
+    font-size: 17px;
+    color: #fff;
+    font-family: sans-serif;
+    letter-spacing: 1px;
+  }
+
+  .photo-button:hover {
+    background: #e52441;
+  }
+
+  .photo-button:hover .svg-icon {
+    animation: flickering 2s linear infinite;
+  }
+
+  @keyframes flickering {
+    0% {
+      opacity: 1;
+    }
+
+    50% {
+      opacity: 1;
+    }
+
+    52% {
+      opacity: 1;
+    }
+
+    54% {
+      opacity: 0;
+    }
+
+    56% {
+      opacity: 1;
+    }
+
+    90% {
+      opacity: 1;
+    }
+
+    92% {
+      opacity: 0;
+    }
+
+    94% {
+      opacity: 1;
+    }
+
+    96% {
+      opacity: 0;
+    }
+
+    98% {
+      opacity: 1;
+    }
+
+    99% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+
+
+/* Home page animations */
+.bubble {
+  position: absolute;
+  background-color: rgba(7, 125, 255, 0.3);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  animation: bounce 6s infinite;
+  opacity: 0.4; 
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
+}
+
+
+.bubble1 {
+  left: 5%;
+  bottom: 50%;
+  animation-delay: 0s;
+  background: linear-gradient(to bottom right, blue, red, white);
+}
+
+.bubble2 {
+  left: 40%;
+  animation-delay: 1s;
+}
+
+.bubble3 {
+  left: 70%;
+  animation-delay: 2s;
+}
+
+
+@keyframes bounce {
+  0%, 100% {
+     transform: translateY(0);
+  }
+  50% {
+     transform: translateY(-30px);
+  }
+
+}
+
+
+/* @keyframes glow {
+  from {
+     box-shadow: 0 0 20px rgba(87, 148, 228, 0.5);
+  }
+  to {
+     box-shadow: 0 0 40px rgba(234, 216, 157, 0.4);
+  }
+} */
+
+
+.effect-wrap .effect {
+  position: absolute;
+  z-index: -1;
+}
+
+.effect-1 {
+  position: relative;
+  width: 30px;
+  height: 30px;
+  border: 4px solid #8a49ff;
+  left: 90%;
+  bottom: 10%;
+  animation: spin 10s linear infinite;
+}
+
+@keyframes spin{
+  0%{
+      transform: rotate(0deg);
+  }
+  100%{
+      transform:rotate(360deg) ;
+  }
+}