diff --git a/frontend/src/App.js b/frontend/src/App.jsx similarity index 78% rename from frontend/src/App.js rename to frontend/src/App.jsx index 3e6df5c7..38fdbe28 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.jsx @@ -1,10 +1,9 @@ import React, { useState, useEffect } from 'react'; import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'; -import Header from './components/Header'; +import Header from './components/header/Header'; import Footer from './components/Footer'; -import Home from './pages/Home'; -import Login from './pages/Login'; -import LendingForm from './components/LendingForm'; +import Home from './pages/spotnet/Home'; +import Login from "./pages/Login"; import { connectWallet, logout } from './utils/wallet'; function App() { @@ -44,16 +43,7 @@ function App() {
{error &&
{error}
} - - - - - ) : ( - - ) - } /> + }/> : } diff --git a/frontend/src/App.test.js b/frontend/src/App.test.js deleted file mode 100644 index 1f03afee..00000000 --- a/frontend/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/frontend/src/assets/icons/rocket.svg b/frontend/src/assets/icons/rocket.svg new file mode 100644 index 00000000..c29e53c9 --- /dev/null +++ b/frontend/src/assets/icons/rocket.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/frontend/src/assets/images/logo.svg b/frontend/src/assets/images/logo.svg new file mode 100644 index 00000000..5a9b7c37 --- /dev/null +++ b/frontend/src/assets/images/logo.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/particles/deco.svg b/frontend/src/assets/particles/deco.svg new file mode 100644 index 00000000..e76c2887 --- /dev/null +++ b/frontend/src/assets/particles/deco.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/particles/small_star.svg b/frontend/src/assets/particles/small_star.svg new file mode 100644 index 00000000..ee842349 --- /dev/null +++ b/frontend/src/assets/particles/small_star.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/src/assets/particles/star.svg b/frontend/src/assets/particles/star.svg new file mode 100644 index 00000000..fa0b675c --- /dev/null +++ b/frontend/src/assets/particles/star.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/frontend/src/assets/particles/starknet.svg b/frontend/src/assets/particles/starknet.svg new file mode 100644 index 00000000..75413496 --- /dev/null +++ b/frontend/src/assets/particles/starknet.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js deleted file mode 100644 index 6798b39b..00000000 --- a/frontend/src/components/Header.js +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; - -function Header({ walletId, onConnectWallet, onLogout }) { - return ( -
-
- - Spotnet Logo - - Spotnet -
-
- {walletId ? ( -
-
- {`${walletId.slice(0, 4)}...${walletId.slice(-4)}`} -
- -
- ) : ( - - )} -
-
- ); -} - -export default Header; \ No newline at end of file diff --git a/frontend/src/components/header/Header.jsx b/frontend/src/components/header/Header.jsx new file mode 100644 index 00000000..1cecbf05 --- /dev/null +++ b/frontend/src/components/header/Header.jsx @@ -0,0 +1,41 @@ +import React from 'react'; +import './header.css' +import { ReactComponent as Logo } from "../../assets/images/logo.svg"; + +function Header({ walletId, onConnectWallet, onLogout }) { + return ( + + ); +} + +export default Header; \ No newline at end of file diff --git a/frontend/src/components/header/header.css b/frontend/src/components/header/header.css new file mode 100644 index 00000000..2063a4c1 --- /dev/null +++ b/frontend/src/components/header/header.css @@ -0,0 +1,101 @@ +@import url('https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap'); +:root{ + --text-font:'Rethink Sans',sans-serif; + --gradient: linear-gradient(73deg, #74D6FD 1.13%, #E01DEE 103.45%); + --secondary-color:#1A1C24; + --blue-color:#74D6FD; +} + +body{ + overflow-x: hidden; +} + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +a{ + text-decoration: none; +} + +li{ + list-style-type: none; +} + +nav { + height: 80px; + display: flex; + align-items: center; + width: 100vw; + justify-content: center; + background-color: var(--secondary-color); +} + +.list-items { + display: flex; + align-items: center; + justify-content: center; + background-color: transparent; + width: 97%; + height: 100px; + position: relative; +} + +.logo { + position: absolute; + left: 10px; +} + +.nav-items { + display: flex; + gap: 2.5em; + justify-content: center; +} + +.wallet-section { + position: absolute; + right: 10px; +} + +.nav-items a { + position: relative; + color: white; + font-family:var(--text-font); + font-size: 20px; +} + +.nav-items a:hover{ + color: var(--blue-color); +} + +.wallet-section button{ + background: transparent; + border-radius: 8px; + height: 52px; + width: 190px; + font-size: 20px; + font-family: var(--text-font); + border: 1px solid var(--blue-color); + color: white; + font-weight: 700; +} + +.wallet-container{ + display: flex; + gap: 10px; +} + +.wallet-id{ + background: var(--gradient); + border-radius: 8px; + height: 52px; + width: 190px; + font-size: 20px; + font-family: var(--text-font); + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; +} \ No newline at end of file diff --git a/frontend/src/index.css b/frontend/src/index.css index 6ff0dd02..e69de29b 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1,114 +0,0 @@ -/* General styles */ -html, body { - height: 100%; - margin: 0; - display: flex; - flex-direction: column; -} - -body { - background-color: #1A202C; - color: #E5E7EB; -} - -main { - flex: 1; - display: flex; - justify-content: center; - align-items: center; -} - -header { - padding: 1rem 0; - background-color: #1F2937; /* Match logo background */ -} - -header img { - max-height: 80px; - width: auto; /* Ensure aspect ratio */ -} - -.wallet-btn { - background-color: #9333EA; - color: white; - padding: 10px 20px; - font-size: 1rem; - font-weight: bold; - border-radius: 8px; - border: none; - transition: background-color 0.3s ease; -} - -.wallet-btn:hover { - background-color: #a555f8; -} - -/* Form container */ -.form-container { - background-color: #3B82F6; /* Light purple/blue background for the form */ - padding: 20px; - border-radius: 12px; - max-width: 500px; - margin: 0 auto; - box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); -} - -h2 { - color: white; - text-align: center; - margin-bottom: 20px; -} - -.form-label { - color: #E0E7FF; /* Lighter text */ -} - -.form-control, .form-select { - background-color: #1F2937; /* Darker fields */ - color: white; - border: none; - padding: 0.75rem; - border-radius: 6px; - margin-bottom: 15px; -} - -.form-control:focus, .form-select:focus { - box-shadow: 0 0 0 2px #9333EA; /* Purple focus border */ - outline: none; -} - -.btn-submit { - background-color: #9333EA; /* Purple Submit Button */ - color: white; - padding: 10px 20px; - width: 100%; - font-weight: bold; - border-radius: 8px; - border: none; - transition: background-color 0.3s ease; -} - -.btn-submit:hover { - background-color: #7C3AED; /* Slightly lighter purple */ -} - -/* Footer styling */ -footer { - background-color: #1F2937; - padding: 20px 0; - color: #E5E7EB; -} - -footer a { - color: #93C5FD; - margin: 0 15px; - text-decoration: none; -} - -footer a:hover { - color: #60A5FA; -} - -footer i { - margin-right: 8px; -} \ No newline at end of file diff --git a/frontend/src/logo.svg b/frontend/src/logo.svg deleted file mode 100644 index 9dfc1c05..00000000 --- a/frontend/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/src/pages/Home.js b/frontend/src/pages/Home.js deleted file mode 100644 index 05729eb1..00000000 --- a/frontend/src/pages/Home.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; - -const Home = () => { - return ( -
-

Welcome to Spotnet

-

You are now connected. You can use the form below to submit your lending details.

-
- ); -}; - -export default Home; \ No newline at end of file diff --git a/frontend/src/pages/spotnet/Home.jsx b/frontend/src/pages/spotnet/Home.jsx new file mode 100644 index 00000000..6eb0ec6c --- /dev/null +++ b/frontend/src/pages/spotnet/Home.jsx @@ -0,0 +1,86 @@ +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"; + +const Home = () => { + const starsData = [ + { top: 15, left: 20 }, + { top: 20, left: 40 }, + { top: 15, left: 70 }, + { top: 15, left: 0 }, + { top: 90, left: 80 }, + { top: 60, left: 85 }, + { top: 40, left: 106 }, + { top: 85, left: 100 }, + { top: 90, left: 0 }, + { top: 75, left: 20 }, + { top: 50, left: 5 }, + ]; + + const starData = [ + { top: 0, left: 5, size: 5 }, + { top: 26, left: 0, size: 7 }, + { top: 90, left: 10, size: 8 }, + { top: 0, left: 76, size: 8 }, + { top: 30, left: 88, size: 8 }, + { top: 70, left: 84 , size: 10}, + ] + + const decorationData = [ + { top: -9, left: -16, size: 50 }, + { top: -10, left: -45, size: 90 }, + { top: -35, left: 55, size: 65 }, + { top: -30, left: 50, size: 95 }, + ] + return ( +
+
+ {decorationData.map((decoration, index) => ( + + ))} +
+
+
+ {starsData.map((star, index) => ( + + ))} + {starData.map((star, index) => ( + + ))} + +
+

+ Earn by leveraging your assets + with Spotnet +

+
Maximize the potential of your resources and start earning today. + Join Spotnet and unlock new opportunities to grow your wealth! +
+ +
+
+ ); +}; + +export default Home; \ No newline at end of file diff --git a/frontend/src/pages/spotnet/home.css b/frontend/src/pages/spotnet/home.css new file mode 100644 index 00000000..ab8d3435 --- /dev/null +++ b/frontend/src/pages/spotnet/home.css @@ -0,0 +1,227 @@ +@import url('https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap'); +: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; +} + +body{ + background-color: var(--primary-color); + width: 100vw; +} + +.home{ + position: relative; + width: 100%; + display: flex; + right: 10px; + justify-content: center; + align-items: center; + flex-direction: column; + height: calc(100vh - 160px); +} + +.center-text{ + font-size: 70px; + font-weight: 600; + font-family: var(--text-font); + width: 800px; + margin: 0 auto; + color: white; + background-color: transparent; + text-align: center; +} + +.blue-color{ + color: var(--blue-color); +} + +.gradient{ + background: var(--gradient); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.home h5{ + color: darkgray; + width: 650px; + text-align: center; + font-size: 1em; + margin-top: 10px; +} + +.launch-button{ + background: var(--gradient); + border-radius: 8px; + height: 52px; + width: 400px; + font-size: 20px; + margin-top: 20px; + font-family: var(--text-font); + font-weight: 700; +} + +.top-gradient, .bottom-gradient{ + background: var(--gradient); + height: 100px; + width: 60%; + margin: 0; + border-radius:2000px 2000px 0 0; + filter:blur(100px); + z-index: -1; +} + +.top-gradient{ + position: absolute; + top: -50px; + left: 50%; + transform: translateX(-50%); +} + +.bottom-gradient{ + position: absolute; + bottom: -50px; + left: 50%; + transform: translateX(-50%); +} + +@media (min-width: 1800px) { + .home{ + background-color: transparent; + width: 125%; + position: relative; + right: 150px; + } + + .center-text { + font-size: 100px; + width: 1200px; + } + + .launch-button { + width: 650px; + font-size: 26px; + height: 70px; + } + + .home h5 { + font-size: 1.4em; + width: 800px; + } +} + +@media (max-width: 1800px) { + .home{ + background-color: transparent; + width: 120%; + position: relative; + right: 100px; + } + + .center-text { + font-size: 80px; + width: 1000px; + } + + .launch-button { + width: 550px; + font-size: 26px; + height: 60px; + } + + .home h5 { + font-size: 1.2em; + width: 700px; + } +} + +@media (max-width: 1710px) { + .home{ + width: 100%; + position: relative; + right: 20px; + } +} + +@media (max-width: 1440px) { + .home{ + position: relative; + left: 10px; + width: 97%; + } + .center-text { + font-size: 70px; + max-width: 750px; + } + + .launch-button { + width: 350px; + font-size: 18px; + } + + .home h5 { + font-size: 0.9em; + width: 600px; + } +} + +@media (max-width:1550px){ + .home{ + width: 100%; + } + .center-text { + font-size: 70px; + max-width: 750px; + } +} + +@media (max-width: 1400px) { + .home { + position: relative; + width: 105%; + background-color: transparent; + left: -10px; + } +} + +@media (max-width: 1280px) { + .home{ + width: 95%; + left: 15px; + } + + .center-text { + font-size: 50px; + max-width: 600px; + } + + .launch-button { + width: 300px; + font-size: 16px; + } + + .home h5 { + font-size: 0.85em; + width: 500px; + } +} + +@media (max-width: 1024px) { + .center-text { + font-size: 35px; + max-width: 500px; + } + + .launch-button { + width: 250px; + font-size: 14px; + } + + .home h5 { + font-size: 0.8em; + width: 450px; + } +} \ No newline at end of file diff --git a/frontend/src/reportWebVitals.js b/frontend/src/reportWebVitals.js deleted file mode 100644 index 5253d3ad..00000000 --- a/frontend/src/reportWebVitals.js +++ /dev/null @@ -1,13 +0,0 @@ -const reportWebVitals = onPerfEntry => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/frontend/src/setupTests.js b/frontend/src/setupTests.js deleted file mode 100644 index 8f2609b7..00000000 --- a/frontend/src/setupTests.js +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom';