Prize UI Integrations

frontend/src/App.tsx

@@ -1,24 +1,33 @@
-import './index.css'
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
 import Navbar from './components/Nav'
 import Heropage from './components/Hero'
 import Metrics from './components/Metrics'
 import Content from './components/Content'
 import Footer from './components/Footer'
+import Dapp from './DApp/page'
 
 function App() {
   return (
-    <>
-      <div className="bg-[#030B1E] h-screen bg-hero-semi-circle">
-        <Navbar />
-        <Heropage />
-      </div>
-      <Metrics />
+    <Router>
+      <Routes>
+        <Route
+          path="/"
+          element={
+            <div className="bg-[#030B1E] h-screen bg-hero-semi-circle">
+              <Navbar />
+              <Heropage />
+              <Metrics />
+              <div className="bg-[#030B1E]">
+                <Content />
+              </div>
+              <Footer />
+            </div>
+          }
+        />
 
-      <div className="bg-[#030B1E]">
-        <Content />
-      </div>
-      <Footer />
-    </>
+        <Route path="/DApp" element={<Dapp />} />
+      </Routes>
+    </Router>
   )
 }
 

frontend/src/DApp/HeroPage.tsx

@@ -0,0 +1,22 @@
+import Pools from './Pools'
+
+const HeroPage = () => {
+  return (
+    <div>
+      <div className="text-center pt-20 flex justify-center pb-8">
+        <h1 className="text-[45px] w-[25%] leading-tight">
+          <span className="opacity-60">Save your deposit. Win up to</span>{' '}
+          <em>$362,497</em>
+        </h1>
+      </div>
+
+      <button className="bg-[#2594E4] py-2 px-3 rounded-lg text-sm mx-auto block">
+        Connect Wallet
+      </button>
+
+      <Pools />
+    </div>
+  )
+}
+
+export default HeroPage

frontend/src/DApp/Navbar.tsx

@@ -0,0 +1,23 @@
+const Navbar = () => {
+  return (
+    <div className="flex justify-between items-center py-10 px-28">
+      <div>
+        <p className="font-bold text-lg">LOGO</p>
+      </div>
+
+      <div className="flex space-x-[5rem] text-sm">
+        <p>Prizes</p>
+        <p>Vault</p>
+        <p>Account</p>
+      </div>
+
+      <div>
+        <button className="bg-[#2594E4] py-2 px-3 rounded-lg text-sm">
+          Connect Wallet
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default Navbar

frontend/src/DApp/Pools.tsx

@@ -0,0 +1,54 @@
+import Poolscard from './PoolsCard'
+
+const Pools = () => {
+  return (
+    <div className="flex justify-center items-center my-14">
+      <div className="grid grid-cols-3 gap-6 w-full max-w-6xl">
+        <Poolscard
+          prize="$200,000"
+          equivalent="200 ETH"
+          view="Click to view"
+          network="Ethereum"
+          networkIcon="../../public/Images/eth.png"
+        />
+        <Poolscard
+          prize="$100,000"
+          equivalent="100 ETH"
+          view="Click to view"
+          network="Ethereum"
+          networkIcon="../../public/Images/eth.png"
+        />
+        <Poolscard
+          prize="$200,000"
+          equivalent="200 ETH"
+          view="Click to view"
+          network="Base"
+          networkIcon="../../public/Images/base.png"
+        />
+        <Poolscard
+          prize="$200,000"
+          equivalent="200 ETH"
+          view="Click to view"
+          network="Ethereum"
+          networkIcon="../../public/Images/usdc.png"
+        />
+        <Poolscard
+          prize="$200,000"
+          equivalent="200 ETH"
+          view="Click to view"
+          network="Arbitrum"
+          networkIcon="../../public/Images/arb.png"
+        />
+        <Poolscard
+          prize="$200,000"
+          equivalent="200 ETH"
+          view="Click to view"
+          network="Ethereum"
+          networkIcon="../../public/Images/usdc.png"
+        />
+      </div>
+    </div>
+  )
+}
+
+export default Pools

frontend/src/DApp/PoolsCard.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+
+interface PoolscardProps {
+  prize: string
+  view: string
+  equivalent: string
+  network: string
+  networkIcon: string
+}
+
+const Poolscard: React.FC<PoolscardProps> = ({
+  view,
+  prize,
+  equivalent,
+  network,
+  networkIcon,
+}) => {
+  return (
+    <div className="bg-[#0e1e2d]/40 shadow-md rounded-3xl px-6 py-4 m-4 min-w-[350px] border border-gray-500 ">
+      <div className="flex items-center mb-4 justify-between">
+        <p>Grand Prize</p>
+        <div className="flex items-center border border-gray-500 px-2 py-1 rounded-xl">
+          <img
+            src={networkIcon}
+            alt={`${network} icon`}
+            className="w-5 h-5 mr-2 my-2"
+          />
+          <h2 className="text-sm font-semibold">{network}</h2>
+        </div>
+      </div>
+      <div className="bg-[#19394c] px-3 py-3 rounded-lg text-center">
+        <p className="mb-2 text-[#a4b0b7]">
+          <span className="font-bold text-3xl tracking-wide">{prize}</span>
+        </p>
+        <p className="mb-2 text-[#a4b0b7]">
+          <span className="font-bold">{equivalent}</span>
+        </p>
+      </div>
+      <p className="text-[#81868e] text-center mt-3">
+        <span className="font text-sm">{view}</span>
+      </p>
+    </div>
+  )
+}
+
+export default Poolscard

frontend/src/DApp/page.tsx

@@ -0,0 +1,15 @@
+import Navbar from './Navbar'
+import HeroPage from './HeroPage'
+import Footer from '../components/Footer'
+
+const DApp = () => {
+  return (
+    <div className="bg-[#030B1E] bg-hero-semi-circle">
+      <Navbar />
+      <HeroPage />
+      <Footer />
+    </div>
+  )
+}
+
+export default DApp

frontend/src/components/Nav.tsx

@@ -1,3 +1,5 @@
+import { Link } from 'react-router-dom'
+
 const Navbar = () => {
   return (
     <div className="flex justify-between items-center py-10 px-28">
@@ -12,6 +14,11 @@ const Navbar = () => {
       </div>
 
       <div>
+        <Link to="/DApp">
+          <button className="bg-[#2594E4] py-2 px-3 rounded-lg">
+            Launch DApp
+          </button>
+        </Link>
         <button className="bg-[#2594E4] py-2 px-3 rounded-lg">
           Launch DApp
         </button>