button routing

my-app/package.json

@@ -34,5 +34,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "react-router-dom": "^6.16.0"
   }
 }

my-app/src/App.js

@@ -2,11 +2,17 @@ import logo from "./logo.svg";
 import "./App.css";
 import Home from "./components/home/home";
 import Main from "./components/about/main";
+import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
 
 function App() {
   return (
     <div className="App">
-      <Main />
+      <Router>
+        <Routes>
+          <Route path="/main" element={<Main />} />
+          <Route path="/" element={<Home />} />
+        </Routes>
+      </Router>
     </div>
   );
 }

my-app/src/components/about/main.css

@@ -77,11 +77,13 @@
 
 .buttonText {
   color: white;
+  background-color: rgba(255, 255, 255, 0);
   font-size: 18px;
   font-family: "Inter";
   font-weight: 600;
   line-height: 28px;
   word-wrap: break-word;
+  border: none;
 }
 
 .mainTitle {

my-app/src/components/about/main.js

@@ -5,13 +5,23 @@ import nytImage from "../../assets/nyt.png";
 import foxImage from "../../assets/fox.webp";
 import washingtonImage from "../../assets/washington.png";
 import cnnImage from "../../assets/CNN_International_logo.svg.png";
+import { inputValue } from "../home/home";
+import { Routes, Route, useNavigate, BrowserRouter } from "react-router-dom";
 
 const Main = () => {
+  const navigate = useNavigate();
+
+  const goHome = () => {
+    navigate("/");
+  };
+
   return (
     <>
       <div className="main">
         <div className="buttonContainer">
-          <div className="buttonText">Back</div>
+          <button className="buttonText" onClick={goHome}>
+            Back
+          </button>
         </div>
         <div className="mainTitle">Israel and Palestine Conflict</div>
         <div className="timelineContainer">

my-app/src/components/home/home.css

@@ -8,11 +8,11 @@
 
 .title {
   text-align: center;
-  margin-top: 30vh;
   font-family: Merriweather Sans;
   font-size: 70px;
   font-weight: 700;
   margin: 0 auto;
+  margin-top: 30vh;
 }
 
 .subtitle {
@@ -63,3 +63,8 @@
   height: 20px;
   width: 20px;
 }
+
+.p {
+  text-align: center;
+  color: rgb(40, 39, 39);
+}

my-app/src/components/home/home.js

@@ -2,34 +2,43 @@ import React from "react";
 import "./home.css";
 import { useState } from "react";
 import btn from "../../assets/Vectorinputicon.png";
+import { Routes, Route, useNavigate, BrowserRouter } from "react-router-dom";
+import Main from "../about/main";
 
 const Home = () => {
   const [inputValue, setInputValue] = useState("");
+  const navigate = useNavigate();
 
   const handleInputChange = (e) => {
     setInputValue(e.target.value);
   };
 
+  const goMain = () => {
+    navigate("/main");
+  };
+
   return (
-    <section>
-      <div className="title">SpectrumAI</div>
-      <div className="subtitle"> Experience multiple perspectives </div>
-      <div className="input">
-        <div className="inputBoxContainer">
-          <input
-            className="inputBox"
-            type="text"
-            value={inputValue}
-            onChange={handleInputChange}
-            placeholder="What do you want to know?"
-          />
-          <button className="inputBtn">
-            <img className="inputImg" alt="go" src={btn}></img>
-          </button>
+    <>
+      <section>
+        <div className="title">SpectrumAI</div>
+        <div className="subtitle"> Experience multiple perspectives </div>
+        <div className="input">
+          <div className="inputBoxContainer">
+            <input
+              className="inputBox"
+              type="text"
+              value={inputValue}
+              onChange={handleInputChange}
+              placeholder="What do you want to know?"
+            />
+            <button className="inputBtn" onClick={goMain}>
+              <img className="inputImg" alt="go" src={btn}></img>
+            </button>
+            <p className="p">Learn more about: {inputValue}</p>
+          </div>
         </div>
-        {/* <p>You typed: {inputValue}</p>*/} .
-      </div>
-    </section>
+      </section>
+    </>
   );
 };
 

my-app/src/index.js

@@ -1,10 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <App />
@@ -15,5 +15,3 @@ root.render(
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
-
-