chore: vip page and homepage button, homepage shrink, vip page content pending

Author: caiolima-stage

src/App.tsx

@@ -9,6 +9,7 @@ import { createOrGetWallet } from "./services/wallets";
 import { getAllNodes, startMiningV2 } from "./services/mining";
 import { CoNET_Data } from "./utils/globals";
 import { listenProfileVer } from "./services/listeners";
+import Vip from './pages/Vip';
 
 global.Buffer = require('buffer').Buffer;
 
@@ -39,6 +40,7 @@ function App() {
         <Routes>
           <Route path="/regions" element={<Region />}></Route>
           <Route path="/about" element={<About />}></Route>
+          <Route path="/vip" element={<Vip />}></Route>
           <Route path="/" element={<Home />}></Route>
         </Routes>
       </Router>

src/components/MiningStatus/index.css

@@ -10,6 +10,10 @@
   font-size: 10px;
 }
 
+.mining-status > div:first-of-type {
+  padding: 0px 14px;
+}
+
 .circle {
   width: 8px;
   height: 8px;

src/pages/Home/index.css

@@ -270,7 +270,6 @@ h1 span {
 
 .rs-wrapper > p {
   color: #e4e2e4;
-  margin-bottom: 16px;
   font-size: 11px;
   text-align: center;
 }
@@ -285,7 +284,7 @@ h1 span {
 .wallet-info-container {
   display: flex;
   flex-direction: column;
-  gap: 5px;
+  gap: 4px;
 }
 
 .wallet-info {
@@ -387,3 +386,13 @@ h1 span {
   font-size: 12px;
   color: #b1b1b2;
 }
+
+.vip-button {
+  width: 100%;
+  border: 0;
+  background: #2A3038;
+  padding: 12px 8px;
+  border-radius: 100px;
+  font-weight: 700;
+  color: #FFFFFF;
+}

src/pages/Home/index.tsx

@@ -369,7 +369,11 @@ const Home = () => {
             </div>
           </>
         )}
-      </div >
+
+        <button className="vip-button" onClick={() => navigate("/vip")}>
+          VIP
+        </button>
+      </div>
 
       <div className="footer">
         <div className="footer-content">

src/pages/Regions/index.tsx

@@ -29,12 +29,6 @@ const Region = () => {
 
       <div className="board">
         <div className="areas">
-          <button className="auto" onClick={() => handleRegion(-1)}>
-            <div>
-              <img src="/assets/auto.png" width={24} height={24} />
-              Auto Select
-            </div>
-          </button>
           <div style={{ display: "flex", flexDirection: 'column', gap: '12px', width: '100%', alignItems: 'center' }}>
             <p className="location">Locations</p>
             <div style={{ display: "flex", flexDirection: 'column', gap: '20px', width: '80%', alignItems: 'center' }}>

src/pages/Vip/index.css

@@ -0,0 +1,27 @@
+.vip {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+
+  width: 100%;
+  max-width: 360px;
+}
+
+.vip p {
+  width: 100%;
+  max-width: initial;
+}
+
+.vip h1, .vip h2, .vip p {
+  margin: 0;
+}
+
+.vip h1 {
+  margin-bottom: 24px;
+  color: #9FBFE5FE;
+}
+
+.vip h2 {
+  font-size: 16px;
+}

src/pages/Vip/index.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import Menu from '../../components/Menu';
+import "./index.css";
+
+const Vip = () => {
+  const [isMenuVisible, setIsMenuVisible] = useState<boolean>(false)
+
+  const toggleMenu = () => {
+    setIsMenuVisible(prevState => !prevState);
+  }
+
+  return (
+    <>
+      <div className="header">
+        <div className="header-content">
+          <div className="menu-icon" onClick={toggleMenu}>
+            <img src="/assets/menu.svg"></img>
+          </div>
+
+          <div>
+            <img src="/assets/header-title.svg"></img>
+          </div>
+
+          <div style={{ visibility: 'hidden' }}>
+            lang
+          </div>
+        </div>
+      </div>
+
+      <Menu isMenuVisible={isMenuVisible} toggleMenu={toggleMenu} />
+
+      <div className="vip">
+        <h1>Vip</h1>
+        <p>Silent Pass is the next-generation decentralized dVPN designed to provide maximum privacy, security, and ease of use.</p>
+        <p>Whether you're looking to browse the web safely or access content from anywhere, Silent Pass delivers a seamless experience without compromising your data.</p>
+        <h2>Key Features</h2>
+        <p>Decentralized VPN: Protect your privacy with no central servers—your data is never stored or tracked.</p>
+        <p>Completely Free: Enjoy a secure dVPN without any fees or hidden charges.</p>
+        <p>No Registration Needed: No email or phone number required. Simply download, click start, and you're connected!</p>
+        <p>Secure & Private: Silent Pass ensures that your internet connection is encrypted, keeping you safe from prying eyes.</p>
+      </div>
+    </>
+  );
+};
+
+export default Vip;