Merge pull request #20 from djeck1432/feat/add-about-page

Feat/add about page

frontend/src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

frontend/src/App.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import Header from './components/header/Header';
 import Footer from './components/Footer';
-import Home from './pages/spotnet/Home';
+import SpotnetApp from './pages/spotnet/spotnet_app/SpotnetApp';
 import Login from "./pages/Login";
 import { connectWallet, logout } from './utils/wallet';
 
@@ -38,12 +38,12 @@ function App() {
 
   return (
     <Router>
-      <div className="App" style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+      <div className="App">
         <Header walletId={walletId} onConnectWallet={handleConnectWallet} onLogout={handleLogout} />
-        <main className="container my-5" style={{ flex: 1 }}>
+        <main className="container" style={{ flex: 1 }}>
           {error && <div className="alert alert-danger">{error}</div>}
           <Routes>
-            <Route index element={<Home />}/>
+            <Route index element={<SpotnetApp />}/>
             <Route
               path="/login"
               element={walletId ? <Navigate to="/" /> : <Login onConnectWallet={handleConnectWallet} />}

frontend/src/pages/spotnet/about/About.jsx

@@ -0,0 +1,79 @@
+import './about.css'
+import { ReactComponent as Star } from "../../../assets/particles/star.svg";
+import { ReactComponent as ZkLend } from "../../../assets/icons/zklend.svg";
+import { ReactComponent as BorrowUSDC } from "../../../assets/icons/borrow_usdc.svg"
+import { ReactComponent as EkuboSwap } from "../../../assets/icons/ekubo_swap.svg"
+import { ReactComponent as Repeat } from "../../../assets/icons/repeats.svg"
+import React from "react";
+const CardData = [
+    {
+        number: '1',
+        title: 'ZkLend ETH collateral',
+        description: 'ETH/STRK from your wallet is deposited as collateral on ZkLend.',
+        icon: ZkLend
+    },
+    {
+        number: '2',
+        title: 'Borrow USDC',
+        description: 'You borrow USDC against that collateral.',
+        icon: BorrowUSDC
+    },
+    {
+        number: '3',
+        title: 'Ekubo Swap',
+        description: 'The USDC is swapped back to ETH on Ekubo.',
+        icon: EkuboSwap
+    },
+    {
+        number: '4',
+        title: 'Repeats',
+        description: 'The process repeats, compounding up to five times.',
+        icon: Repeat
+    }
+]
+
+const About = () => {
+    const starData = [
+        { top: 10, left: 5, size: 5 },
+        { top: 85, left: 10, size: 10 },
+        { top: 7, left: 80, size: 8 },
+    ]
+    return (
+        <div className="about-container">
+            {starData.map((star, index) => (
+                <Star key={index} style={{
+                    position: 'absolute',
+                    top: `${star.top}%`,
+                    left: `${star.left}%`,
+                    width: `${star.size}%`,
+                    height: `${star.size}%`
+                }}/>
+            ))}
+            <h1 className="about-title">How it works</h1>
+            <div className="card-container flex">
+                <div className="card-gradients">
+                    <div className="card-gradient"></div>
+                    <div className="card-gradient"></div>
+                </div>
+                {CardData.map((card, index) => (
+                    <div key={index} className="card-about flex">
+                        <div className="card-number flex">
+                            <h2>{card.number}</h2>
+                        </div>
+                        <div className="card-icon">
+                            <card.icon />
+                        </div>
+                        <div className="card-title">
+                            <h4>{card.title}</h4>
+                        </div>
+                        <div className="card-description">
+                            <h6>{card.description}</h6>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export default About