Prize UI Integrations

frontend/package.json

@@ -22,6 +22,7 @@
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
     "eslint": "^9.18.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
@@ -31,6 +32,8 @@
     "eslint-plugin-react-refresh": "^0.4.16",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "globals": "^15.14.0",
+    "postcss": "^8.5.1",
+    "tailwindcss": "^3.4.17",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.2",
     "vite": "^6.0.5"

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/App.tsx

@@ -1,13 +1,34 @@
-import './App.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>
-        <h1>WinSaved</h1>
-      </div>
-    </>
-  )
+    <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>
+          }
+        />
+
+        <Route path="/DApp" element={<Dapp />} />
+      </Routes>
+    </Router>
+  );
 }
 
-export default App
+export default App;

frontend/src/DApp/HeroPage.tsx

@@ -0,0 +1,19 @@
+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,20 @@
+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,30 @@
+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/Content.tsx

@@ -0,0 +1,36 @@
+const Content = () => {
+  return (
+    <div className="py-20 bg-custom-radial group">
+      <div>
+        <h1 className="text-4xl text-center font-semibold pb-8">
+          WinSave is for Saving & Winning
+        </h1>
+        {/* Parent container */}
+        <div className="flex justify-center my-20 space-x-[-5%] group-hover:space-x-8 transition-all duration-300">
+          {/* Card 1 */}
+          <div className="bg-[#232429]/40 text-white w-fit px-8 py-20 border border-[#FAFAFA52] rounded-2xl transform rotate-[-20deg] group-hover:rotate-0 z-10 transition-transform duration-300">
+            <p className="font-bold text-2xl">Deposit</p>
+            <p>Deposit for a chance to win big</p>
+            <img src="../../public/Images/mail.png" alt="" />
+          </div>
+
+          {/* Card 2 */}
+          <div className="bg-[#0F1725] text-white w-fit px-12 py-20 border border-[#FAFAFA52] rounded-2xl z-50 transform group-hover:rotate-0 transition-transform duration-300">
+            <p className="font-bold text-2xl">Win Prizes</p>
+            <p>Deposit for a chance to win big</p>
+            <img src="../../public/Images/percentage.png" alt="" />
+          </div>
+
+          {/* Card 3 */}
+          <div className="bg-[#232429]/40 text-white w-fit px-8 py-20 border border-[#FAFAFA52] rounded-2xl transform rotate-[20deg] group-hover:rotate-0 z-10 transition-transform duration-300">
+            <p className="font-bold text-2xl">No Loss</p>
+            <p>Deposit for a chance to win big</p>
+            <img src="../../public/Images/safe.png" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Content

frontend/src/components/Footer.tsx

@@ -0,0 +1,58 @@
+const Footer = () => {
+  const footerSections = [
+    {
+      title: 'COMPANY',
+      links: ['About Us', 'Partnerships', 'Games', 'Branding', 'FAQ'],
+    },
+    {
+      title: 'SOCIAL',
+      links: ['Facebook', 'Twitter', 'Instagram', 'TikTok', 'Our Discord'],
+    },
+    {
+      title: 'SUPPORTED GAMES',
+      links: [
+        'League of Legends',
+        'Counter-Strike 2',
+        'Valorant',
+        'TeamFight Tactics',
+        'Apex Legends',
+      ],
+    },
+  ]
+
+  return (
+    <footer className="bg-[#030817] py-12">
+      <div className="container mx-auto px-6">
+        <div className="flex flex-wrap">
+          {/* Logo Section */}
+          <div className="w-full md:w-1/4 mb-8 md:mb-0">
+            <span className="text-[#02C0FF] text-xl font-semibold">LOGO</span>
+          </div>
+
+          {/* Links Sections */}
+          {footerSections.map((section, index) => (
+            <div key={index} className="w-full md:w-1/4 mb-8 md:mb-0">
+              <h3 className="text-white text-sm font-medium mb-4">
+                {section.title}
+              </h3>
+              <ul className="space-y-2">
+                {section.links.map((link, linkIndex) => (
+                  <li key={linkIndex}>
+                    <a
+                      href="#"
+                      className="text-gray-400 hover:text-white text-sm transition-colors duration-200"
+                    >
+                      {link}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer

frontend/src/components/Hero.tsx

@@ -0,0 +1,49 @@
+const Heropage = () => {
+  return (
+    <div className="my-20 relative py-24">
+      <div className="flex justify-center items-center">
+        <h1 className="text-[90px] font-semibold w-[45%] text-center leading-[80px]">
+          The #1 Protocol for Real Adoption
+        </h1>
+      </div>
+      <p className="text-center pt-4 text-white/80">
+        The permissionless protocol 86,000 people are using to win by saving
+      </p>
+
+      <div className="flex justify-center items-center mt-10">
+        <button className="bg-[#2594E4] py-2 px-3 rounded-lg">
+          Launch DApp
+        </button>
+      </div>
+      <img
+        src="/Images/gemstoneblue.png"
+        alt="Gem Stone"
+        className="absolute right-[25%] top-[2%]"
+      />
+      <img
+        src="/Images/starknet.png"
+        alt="Starknet"
+        className="absolute right-[18%] top-[30%] animate-slow-bounce"
+        width={70}
+      />
+      <img
+        src="/Images/starknet.png"
+        alt="Starknet"
+        className="absolute top-[30%] left-[10%] animate-slow-bounce"
+        width={120}
+      />
+      <img
+        src="/Images/goldcoin.png"
+        alt="Gold coin"
+        className="absolute right-[25%] bottom-[10%]"
+      />
+      <img
+        src="/Images/diamondblue.png"
+        alt="Diamond Blue"
+        className="absolute left-[15%] bottom-0"
+      />
+    </div>
+  )
+}
+
+export default Heropage

frontend/src/components/Metrics.tsx

@@ -0,0 +1,24 @@
+const Metrics = () => {
+  return (
+    <div className="flex justify-around py-10 px-40 text-white text-2xl bg-[#010a1d]">
+      <div className="flex flex-col text-center">
+        <p className="text-3xl">$5.1 Million</p>
+        <p className="text-sm text-white/60">Total Prizes Awarded</p>
+      </div>
+      <div className="flex flex-col text-center">
+        <p className="text-3xl">$21 Million</p>
+        <p className="text-sm text-white/60">Locked with WinSaved</p>
+      </div>
+      <div className="flex flex-col text-center">
+        <p className="text-3xl">86,000+</p>
+        <p className="text-sm text-white/60">Unique Wallets</p>
+      </div>
+      <div className="flex flex-col text-center">
+        <p className="text-3xl">0</p>
+        <p className="text-sm text-white/60">Losses</p>
+      </div>
+    </div>
+  )
+}
+
+export default Metrics