[FRONTEND] Build Landing Page #2

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,11 +1,23 @@
-import './App.css'
+import './index.css'
+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'
 
 function App() {
   return (
     <>
-      <div>
-        <h1>WinSaved</h1>
+      <div className='bg-[#030B1E] h-screen'>
+        <Navbar />
+        <Heropage />
+        <Metrics />
       </div>
+
+      <div className='bg-[#030B1E]'>
+        <Content />
+      </div>
+      <Footer />
     </>
   )
 }

frontend/src/components/Content.tsx

@@ -0,0 +1,35 @@
+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,50 @@
+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,22 @@
+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-[#020a1dde]">
+            <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;

frontend/src/components/Nav.tsx

@@ -0,0 +1,21 @@
+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-5">
+                <p>Home</p>
+                <p>Winners</p>
+                <p>Docs</p>
+            </div>
+
+            <div>
+                <button className="bg-[#2594E4] py-2 px-3 rounded-lg">Launch DApp</button>
+            </div>
+        </div>
+    );
+}
+
+export default Navbar;

frontend/src/index.css

@@ -1,68 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
+  background-color: black;
+}

frontend/tailwind.config.js

@@ -0,0 +1,24 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        'custom-radial': 'radial-gradient(circle at 25% 40%, #02C0FF 0%, #001F40 40%, transparent 80%), radial-gradient(circle at 75% 75%, #02C0FF 0%, #001F40 25%, #020a1dde 60%)',
+      },
+      animation: {
+        'slow-bounce': 'bounce 2s infinite',
+      },
+      keyframes: {
+        bounce: {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-10px)' },
+        },
+      },
+    },
+  },
+  plugins: [],
+};