how it works page added

djeck1432 · Oct 2, 2024 · a3b0d1f · a3b0d1f
1 parent 2fd8877
commit a3b0d1f
Show file tree

Hide file tree

Showing 11 changed files with 222 additions and 47 deletions.
diff --git a/frontend/src/App.css b/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);
-  }
-}

diff --git a/frontend/src/App.jsx b/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} />}

diff --git a/frontend/src/assets/icons/borrow_usdc.svg b/frontend/src/assets/icons/borrow_usdc.svg
diff --git a/frontend/src/assets/icons/ekubo_swap.svg b/frontend/src/assets/icons/ekubo_swap.svg
diff --git a/frontend/src/assets/icons/repeats.svg b/frontend/src/assets/icons/repeats.svg
diff --git a/frontend/src/assets/icons/zklend.svg b/frontend/src/assets/icons/zklend.svg
diff --git a/frontend/src/pages/spotnet/about/About.jsx b/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
diff --git a/frontend/src/pages/spotnet/about/about.css b/frontend/src/pages/spotnet/about/about.css
@@ -0,0 +1,102 @@
+:root{
+    --text-font:'Rethink Sans',sans-serif;
+    --gradient: linear-gradient(73deg, #74D6FD 1.13%, #E01DEE 103.45%);
+    --secondary-color:#1A1C24;
+    --blue-color:#74D6FD;
+    --primary-color:#0B0C10;
+}
+
+.flex{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.about-container{
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 102vh;
+    width: 117%;
+    right: 9.2%;
+    background-color: var(--primary-color);
+}
+
+.about-title{
+    text-align: center;
+    font-family: var(--text-font);
+    color: white;
+    margin-top: 20px;
+}
+
+.card-about{
+    width: 350px;
+    height: 400px;
+    background: linear-gradient(0deg, rgba(72, 143, 162, 0.03) 0%, rgba(72, 143, 162, 0.03) 100%), linear-gradient(123deg, rgba(116, 214, 253, 0.50) 0.63%, rgba(11, 12, 16, 0.50) 100.03%);
+    flex-direction: column;
+    border-radius: 20px;
+    border: 0.5px solid #74D6FD;
+    box-shadow: 0px 3.75px 3.75px 0px rgba(0, 0, 0, 0.15), 3.75px 3.75px 9.375px 0px rgba(153, 234, 255, 0.25) inset;
+    backdrop-filter: blur(21.09375px);
+}
+
+.card-container{
+    flex-grow: 1;
+    gap: 20px;
+    position: relative;
+}
+
+.card-description h6{
+    text-align: center;
+    color: darkgray;
+    font-weight: 400;
+}
+
+.card-about > *{
+    color: white;
+}
+
+.card-number{
+    position: absolute;
+    top: -25px;
+    left: 0;
+    width: 100%;
+    text-align: center;
+}
+
+.card-number h2{
+    border: 1px solid var(--blue-color);
+    margin: 0 auto;
+    padding: 5px;
+    width: 70px;
+    background-color: var(--primary-color);
+    border-radius: 10px;
+}
+
+.card-gradient:nth-child(1){
+    position: absolute;
+    top: 80px;
+    left: -40px;
+    width: 232px;
+    height: 208px;
+    flex-shrink: 0;
+    border-radius: 2000px;
+    background: var(--gradient, linear-gradient(73deg, #74D6FD 1.13%, #E01DEE 103.45%));
+    /* Blur */
+    filter: blur(80px);
+}
+
+.card-gradient:nth-child(2){
+    position: absolute;
+    right: -50px;
+    bottom: 70px;
+    width: 232px;
+    height: 208px;
+    flex-shrink: 0;
+    border-radius: 2000px;
+    background: var(--gradient, linear-gradient(73deg, #74D6FD 1.13%, #E01DEE 103.45%));
+    /* Blur */
+    filter: blur(80px);
+}
diff --git a/frontend/src/pages/spotnet/Home.jsx → frontend/src/pages/spotnet/home/Home.jsx b/frontend/src/pages/spotnet/Home.jsx → frontend/src/pages/spotnet/home/Home.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import './home.css'
-import { ReactComponent as SmallStar } from "../../assets/particles/small_star.svg";
-import { ReactComponent as Star } from "../../assets/particles/star.svg";
-import { ReactComponent as Decoration } from "../../assets/particles/deco.svg";
-import { ReactComponent as Starknet } from "../../assets/particles/starknet.svg";
-import { ReactComponent as Rocket } from "../../assets/icons/rocket.svg";
+import { ReactComponent as SmallStar } from "../../../assets/particles/small_star.svg";
+import { ReactComponent as Star } from "../../../assets/particles/star.svg";
+import { ReactComponent as Decoration } from "../../../assets/particles/deco.svg";
+import { ReactComponent as Starknet } from "../../../assets/particles/starknet.svg";
+import { ReactComponent as Rocket } from "../../../assets/icons/rocket.svg";
 
 const Home = () => {
     const starsData = [

diff --git a/frontend/src/pages/spotnet/home.css → frontend/src/pages/spotnet/home/home.css b/frontend/src/pages/spotnet/home.css → frontend/src/pages/spotnet/home/home.css
diff --git a/frontend/src/pages/spotnet/spotnet_app/SpotnetApp.jsx b/frontend/src/pages/spotnet/spotnet_app/SpotnetApp.jsx
@@ -0,0 +1,13 @@
+import Home from '../home/Home'
+import About from '../about/About'
+
+const SpotnetApp = () =>{
+    return (
+        <div className='spotnet-app'>
+            <Home />
+            <About />
+        </div>
+    )
+}
+
+export default SpotnetApp;