Merge pull request #47 from Vets-Who-Code/RouterCreated

Router Switch Created #33

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -2,14 +2,19 @@
 import "./App.css";
 import LandingPage from "./Components/LandingPage/LandingPage";
 import Nav from "./Components/Nav/Nav";
+import {Routes, Route } from "react-router-dom";
+import PersonalInfo from "./Components/PersonalInfo/PersonalInfo";
+import ErrorPage from "./Components/ErrorPage/ErrorPage";
 
 function App() {
   return (
     <div className="App">
-            <Nav />
-            <LandingPage />
-
-
+      <Nav />
+      <Routes>
+       <Route path="/" element={<LandingPage />} />
+       <Route path="/PersonalInfo" element={<PersonalInfo/>}/>
+       <Route path="*" element={<ErrorPage/>}/>
+      </Routes>
     </div>
   );
 }

src/Components/ErrorPage/ErrorPage.css

@@ -0,0 +1,113 @@
+.btn-gr{
+  width:auto;
+  height:46px;
+  font-size: 0.875rem;
+  background-color: var(--hashflag-red);
+  margin-left:20px;
+
+}
+.container{
+    width:100%;
+    max-width:1300px;
+    margin:0 auto;
+    height:calc(100vh - 72px);
+    display:flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+}
+
+
+
+.landing-text{
+    padding:1rem 1.5rem;    
+}
+
+/* .landing-text h1 span{
+    display: block;
+} */
+
+
+.landing-text h1{
+    text-align: center;
+    margin-bottom:2rem;
+}
+
+.landing-text p{
+    font-size: 1.3125rem;
+    margin-bottom:1rem;
+    line-height: 1.3;
+}
+
+.landing-image{
+    padding:1rem 1.5rem;
+    width:auto;
+    display:none;
+
+}
+
+.landing-btn button img#right-arrow{
+    width:15%;
+    margin-left:10px;
+}
+
+.btn{
+    padding: 12px 12px;
+    text-align: center;
+    margin-top: 2rem;
+    font-weight: 700;
+    cursor: pointer;
+    border: none;
+    border-radius: 4px;
+    transition: all 0.5s ease-in-out;
+    text-transform: capitalize;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--hashflag-white);
+  }
+  .btn:hover {
+    transform: scale(1.05);
+    box-shadow: 12px 12px 30px 20px rgba(0,0,0,0.1);
+
+  }
+
+
+  @media only screen and (min-width:768px){
+
+   .container{
+    margin-top:72px;
+   }
+    .landing-image{
+        display: block;
+
+    }
+
+}
+
+@media only screen and (min-width:1024px){
+
+    .landing-text h1{
+        text-align: left;
+    }
+    .container{
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    .landing-btn{
+        width:100%;
+        display: flex;
+        justify-content: flex-start;
+    }
+}
+
+@media only screen and (min-width:1440px){
+    .landing-text h1 span{
+        display: inline-block;
+    }
+    .container{
+        height:calc(100vh - 200px);
+    }
+}

src/Components/ErrorPage/ErrorPage.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import './ErrorPage.css'
+//for testing purposes... can leave or remove once deployed. 
+
+function ErrorPage() {
+    const navigate = useNavigate();
+  return (
+    <div>
+      <h1>Error! Page Not Found!</h1>
+      <button
+        className="btn btn-gr"
+        onClick={() => navigate('/',{ approved: true })}
+      >
+        Go Back
+      </button>
+    </div>
+  );
+}
+
+export default ErrorPage;

src/Components/LandingPage/LandingPage.js

@@ -1,10 +1,14 @@
 import React from "react";
 import '../LandingPage/LandingPage.css';
 import RightArrow from '../../images/right-arrow.png';
+import { useNavigate } from "react-router-dom"; 
+
 
 
 export default function LandingPage() {
+  const navigate = useNavigate()
   return (
+
     <>
       <div className="container">
         <div className="landing-text">
@@ -19,8 +23,8 @@ export default function LandingPage() {
 
           <p>Custom-tailor resumes for any job within minutes! Build an easily custimizable and simple resume in a few clicks!</p>
           <div className="landing-btn">
-            <a href="./App.js" target="_blank">
-            <button className="btn btn-gr">Get Started 
+            <a href="../PersonalInfo/" >
+            <button className="btn btn-gr" onClick={()=> navigate(1)}>Get Started 
             <img src={RightArrow} alt="" id="right-arrow" />
             </button>
 

src/Components/PersonalInfo/PersonalInfo.css

@@ -0,0 +1,112 @@
+.btn-gr{
+  width:auto;
+  height:46px;
+  font-size: 0.875rem;
+  background-color: var(--hashflag-red);
+
+}
+.container{
+    width:100%;
+    max-width:1300px;
+    margin:0 auto;
+    height:calc(100vh - 72px);
+    display:flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+}
+
+
+
+.landing-text{
+    padding:1rem 1.5rem;    
+}
+
+/* .landing-text h1 span{
+    display: block;
+} */
+
+
+.landing-text h1{
+    text-align: center;
+    margin-bottom:2rem;
+}
+
+.landing-text p{
+    font-size: 1.3125rem;
+    margin-bottom:1rem;
+    line-height: 1.3;
+}
+
+.landing-image{
+    padding:1rem 1.5rem;
+    width:auto;
+    display:none;
+
+}
+
+.landing-btn button img#right-arrow{
+    width:15%;
+    margin-left:10px;
+}
+
+.btn{
+    padding: 12px 12px;
+    text-align: center;
+    margin-top: 2rem;
+    font-weight: 700;
+    cursor: pointer;
+    border: none;
+    border-radius: 4px;
+    transition: all 0.5s ease-in-out;
+    text-transform: capitalize;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--hashflag-white);
+  }
+  .btn:hover {
+    transform: scale(1.05);
+    box-shadow: 12px 12px 30px 20px rgba(0,0,0,0.1);
+
+  }
+
+
+  @media only screen and (min-width:768px){
+
+   .container{
+    margin-top:72px;
+   }
+    .landing-image{
+        display: block;
+
+    }
+
+}
+
+@media only screen and (min-width:1024px){
+
+    .landing-text h1{
+        text-align: left;
+    }
+    .container{
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    .landing-btn{
+        width:100%;
+        display: flex;
+        justify-content: flex-start;
+    }
+}
+
+@media only screen and (min-width:1440px){
+    .landing-text h1 span{
+        display: inline-block;
+    }
+    .container{
+        height:calc(100vh - 200px);
+    }
+}

src/Components/PersonalInfo/PersonalInfo.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import PrevNextButton from '../PrevNextButton/PrevNextButton'
+import './PersonalInfo.css'
+
+function PersonalInfo() {
+  return (
+    <div>
+     <h1>Personal Info</h1>
+      <PrevNextButton />
+    </div>
+  );
+}
+
+export default PersonalInfo

src/Components/PrevNextButton/PrevNextButton.css

@@ -0,0 +1,8 @@
+
+.btn-gr{
+  width:auto;
+  height:46px;
+  font-size: 0.875rem;
+  background-color: var(--hashflag-red);
+
+}

src/Components/PrevNextButton/PrevNextButton.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { useNavigate } from "react-router-dom"; 
+import './PrevNextButton.css'
+import RightArrow from "../../images/right-arrow.png";
+
+
+function PrevNextButton() {
+  const navigate = useNavigate();
+  return (
+    <>
+      <div>
+        <button
+          className="btn btn-gr"
+          id="btn-blank"
+          onClick={() => navigate(-1)}
+        >
+          Prev
+        </button>
+        <button
+          className="btn btn-gr"
+          id="btn-next"
+          onClick={() => navigate(1)}
+        >
+          Next
+          <img src={RightArrow} alt="" id="right-arrow" />
+        </button>
+
+        <div></div>
+      </div>
+    </>
+  );
+}
+
+export default PrevNextButton;

src/index.js

@@ -2,12 +2,13 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { BrowserRouter as Router } from "react-router-dom";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
+  <Router>
     <App />
-  </React.StrictMode>
+  </Router>
 );
 
 // If you want to start measuring performance in your app, pass a function