files arranged

src/App.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom"
 import { Navbar, Sidebar } from "./components";
-import { AdSuggestion, Cryptocurrency, DailyTask, Home, Logout, Rewards, Settings, Wallet } from "./pages";
+import { AdSuggestion, Cryptocurrency, DailyTask, Home, Logout, AdStatus, SuggestedAds, BitcoinPage, Rewards, Settings, ProfileDetail, NotificationPage, Wallet, Vote, AddProject } from "./pages";
 import "./App.css"
 
 function App() {
@@ -46,10 +46,19 @@ function App() {
                 <Route path="/rewards" element={<Rewards />} />
                 <Route path="/daily-tasks" element={<DailyTask />} />
                 <Route path="/cryptocurrency" element={<Cryptocurrency />} />
+                <Route path="cryptocurrency/bitcoin" element={<BitcoinPage />} />
                 <Route path="/wallet" element={<Wallet />} />
                 <Route path="/ad-suggestion" element={<AdSuggestion />} />
+                <Route path="/suggest-ads" element={<SuggestedAds />} />
+                <Route path="/ad-status" element={< AdStatus />} />
                 <Route path="/settings" element={<Settings />} />
+                <Route path="/Vote/add-project" element={<AddProject />} />
+                <Route path="/settings/profile-detail" element={<ProfileDetail />} />
+                <Route path="/notifications" element={<NotificationPage />} />
+                <Route path="/vote" element={<Vote />} />
                 <Route path="/logout" element={<Logout />} />
+
+
               </Routes>
             </div>
           </div>

src/components/AdSuggestion/AdSuggestionForms/SuggestAds.jsx

@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+import "./SuggestAds.css";
+import arrowback from "../../../data/arrow-left.png";
+import CryptoForm from "./CryptoForm";
+import IcoForm from "./IcoForm";
+import { NavLink } from "react-router-dom";
+
+export default function SuggestAds() {
+  const [suggestionForm, setSuggestionForm] = useState("cryptoform");
+
+  return (
+    <div className="suggestAd-container">
+      <span className="suggestAd-span">
+        <NavLink to='/ad-suggestion'>
+          <img src={arrowback} alt="navigate back arrow" />
+        </NavLink>
+
+        <h3>Suggest Ads</h3>
+      </span>
+      <p className="projectType">Project types</p>
+      <div className="suggestAd-buttons">
+        <button
+          onClick={() => {
+            setSuggestionForm("cryptoform");
+          }}
+          style={{
+            backgroundColor:
+              suggestionForm === "cryptoform" ? "#2793ff" : "#4b5768",
+          }}
+        >
+          Crypto Project
+        </button>
+        <button
+          onClick={() => {
+            setSuggestionForm("nftform");
+          }}
+          style={{
+            backgroundColor:
+              suggestionForm === "nftform" ? "#2793ff" : "#4b5768",
+          }}
+        >
+          NFT Project
+        </button>
+        <button
+          onClick={() => {
+            setSuggestionForm("icoform");
+          }}
+          style={{
+            backgroundColor:
+              suggestionForm === "icoform" ? "#2793ff" : "#4b5768",
+          }}
+        >
+          ICO Drop
+        </button>
+        <button
+          onClick={() => {
+            setSuggestionForm("metaverseform");
+          }}
+          style={{
+            backgroundColor:
+              suggestionForm === "metaverseform" ? "#2793ff" : "#4b5768",
+          }}
+        >
+          Metaverse Project
+        </button>
+      </div>
+      {suggestionForm === "cryptoform" && <CryptoForm />}
+      {suggestionForm === "icoform" && <IcoForm />}
+      {suggestionForm === "nftform" && <CryptoForm />}
+      {suggestionForm === "metaverseform" && <CryptoForm />}
+    </div>
+  );
+}

src/components/AdSuggestion/AdSuggestionStat/AdSuggestionStatus.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import "./AddSuggestionStatus.css";
+import arrowback from "../../../data/arrow-left.png";
+import { suggestionStatus } from "../../../data/data";
+import { NavLink } from "react-router-dom";
+
+export default function AdSuggestionStatus() {
+  const statusItems = (props) => {
+    return (
+      <div className="statusItem">
+        <div className="status-details">
+          <img src={props.img} alt="ad suggestion" />
+          <div className="status-detail">
+            <p>{props.name}</p>
+            <p>Collections</p>
+          </div>
+        </div>
+        <span className="status">
+          <img src={props.statusImg} alt="Ad status" />
+          {props.status}
+        </span>
+      </div>
+    );
+  };
+  return (
+    <div className="SuggestionStatus-container">
+      <span className="suggestAd-span">
+        <NavLink to='/ad-suggestion'>
+        <img src={arrowback} alt="navigate back arrow" />
+        </NavLink>
+
+        <h3>Ad Suggestion Status</h3>
+      </span>
+      <div className="suggestion-status">
+        {suggestionStatus.map(statusItems)}
+      </div>
+    </div>
+  );
+}

src/components/AdSuggestion/AddSuggestions.jsx

@@ -0,0 +1,82 @@
+import React from "react";
+import "./AddSuggestions.css";
+import { Link, NavLink } from "react-router-dom";
+import watch from "../../data/watch.png";
+import plus from "../../data/plus.png";
+import bell from "../../data/bell.png";
+import desk from "../../data/desk.png";
+import NftProjectAd from "./NftProjectAd";
+import CryptoProjectAd from "./CryptoProjectAd";
+import MetaverseProjects from "./MetaverseProjects";
+import IcoProjectAds from "./IcoProjectAds";
+
+export default function AddSuggestions() {
+  return (
+    <div className="add-suggestion-container">
+      <div className="add-suggestion-inner">
+        <div className="featured-ads">
+          <h3 className="featured-ads-h3">Featured Ads</h3>
+          <div className="featured-ads-btns">
+            <NavLink to="/ad-status">
+              <button className="status-btn">
+                <img src={watch} alt="ad status" />
+                Ad Status
+              </button>
+            </NavLink>
+            <NavLink to="/suggest-ads">
+              <button className="suggest-btn">
+                <img src={plus} alt="plus sign" />
+                Suggest Ads
+              </button>
+            </NavLink>
+          </div>
+        </div>
+        <div className="ad-boxes">
+          <div
+            className="ad-box-big"
+            style={{
+              backgroundImage: `url(${bell})`,
+              backgroundSize: "contain",
+              backgroundPosition: "right",
+              backgroundRepeat: "no-repeat",
+            }}
+          >
+            <div className="big-box-content">
+              <h3>The Right NFT At the festival</h3>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sodales
+                mollis quisque commodo facilisis adipiscing curabitur fringilla.
+                Elit netus sed sit fermentum vel ornare sit feugiat felis.
+              </p>
+              <Link to="/" className="ad-readmore-link">
+                Read More
+              </Link>
+            </div>
+          </div>
+          <div
+            className="ad-box-small"
+            style={{
+              backgroundImage: `url(${desk})`,
+              backgroundSize: "contain",
+              backgroundPosition: "bottom",
+              backgroundRepeat: "no-repeat",
+            }}
+          >
+            <h3>The Right NFT At the festival</h3>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sodales
+              mollis quisque commodo facilisis adipiscing curabitur fringilla.
+              Elit netus sed sit fermentum vel ornare sit feugiat felis.
+            </p>
+          </div>
+        </div>
+      </div>
+      <NftProjectAd />
+      <CryptoProjectAd />
+      <MetaverseProjects />
+      <IcoProjectAds />
+
+      {/* <SuggestAds.jsx /> <AdSuggestionStatus /> Render this component */}
+    </div>
+  );
+}

src/components/CryptoProjectAd.jsx → src/components/AdSuggestion/CryptoProjectAd.jsx

@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react'
 import "./CryptoProjectAd.css"
-import leftarrow from "../data/leftarrow.png"
-import rightarrow from "../data/rightarrow.png"
+import leftarrow from "../../data/leftarrow.png"
+import rightarrow from "../../data/rightarrow.png"
 import { motion } from "framer-motion"
-import { CrytoAd } from '../data/data'
+import { CrytoAd } from '../../data/data'
 
 export default function CryptoProjectAd() {
 

src/components/IcoProjectAds.jsx → src/components/AdSuggestion/IcoProjectAds.jsx

@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react'
 import "./IcoProjectAds.css"
-import leftarrow from "../data/leftarrow.png"
-import rightarrow from "../data/rightarrow.png"
+import leftarrow from "../../data/leftarrow.png"
+import rightarrow from "../../data/rightarrow.png"
 import { motion } from "framer-motion"
-import { IcoProjectAd } from '../data/data'
+import { IcoProjectAd } from '../../data/data'
 
 export default function IcoProjectAds() {
 

src/components/MetaverseProjects.jsx → src/components/AdSuggestion/MetaverseProjects.jsx

@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react'
 import "./MetaverseProjects.css"
-import leftarrow from "../data/leftarrow.png"
-import rightarrow from "../data/rightarrow.png"
+import leftarrow from "../../data/leftarrow.png"
+import rightarrow from "../../data/rightarrow.png"
 import { motion } from "framer-motion"
-import { MetaverseAd } from '../data/data'
+import { MetaverseAd } from '../../data/data'
 
 export default function MetaverseProjects() {
 

src/components/NftProjectAd.jsx → src/components/AdSuggestion/NftProjectAd.jsx

@@ -1,12 +1,10 @@
 import React, { useState, useEffect, useRef } from 'react'
 import "./NftProjectAd.css"
 import { motion } from "framer-motion"
-import heart from "../data/heart.png"
-import leftarrow from "../data/leftarrow.png"
-import rightarrow from "../data/rightarrow.png"
-import { NftAd } from '../data/data'
-
-
+import heart from "../../data/heart.png"
+import leftarrow from "../../data/leftarrow.png"
+import rightarrow from "../../data/rightarrow.png"
+import { NftAd } from '../../data/data'
 
 export default function NftProjectAd() {
     const [width, setWidth] = useState(0)