Added Components, Links, Styling and Rearrange files (#421)

* Added preexisting pages and moved files

* Resolved changes - file naming, formatting, match project conventions and co locating

* removed import statements

* resolve 404 issue, placed resume-builder.js (landing page) in pages folder, place components in individual folder, updated _app.js

* resolved failing check , moved resume pages to proper directory, added more links with proper path names

* removed error.js, added Link component and light styling to pages

* changed class names in media queries

* snapshot update

Co-authored-by: Ken <[email protected]>
Co-authored-by: Ken <[email protected]>

.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  parser: 'babel/eslint-parser',
+  parser: '@babel/eslint-parser',
   extends: [
     'eslint:recommended',
     'plugin:prettier/recommended',

src/assets/css/resume-builder.css

@@ -0,0 +1,186 @@
+/*  Styling for the 4 components are located within this single file
+    - Global Component Styling 
+    - Landing.css
+    - ResumeInput.css
+    - Confirmation.css
+    - Error.css
+*/
+
+/* Global Styling between components */
+
+.resume-wrapper {
+    width:auto;
+    max-width:1300px;
+    margin:0 auto;
+    height:auto;
+    display:flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+/* .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);
+} */
+
+/* .btn-ld : add extra link / description */
+.btn-ld {
+    height:26px;
+    width:auto;
+    background-color: var(--blue);
+    font-size: 11px;
+}
+
+/* .btn-gr : get started / generate resume */
+.btn-gr {
+    color: var(--element-4);
+    text-transform: uppercase;
+    font-weight: 700;
+    border-radius: 4px;
+    background-color: var(--primary-1);
+}
+
+/* .btn-cr : create resume */  
+.btn-cr {
+    width:auto;
+    height:auto;
+    padding:6px 12px;
+    text-transform: uppercase;
+    font-weight: 700;
+    border-radius: 4px;
+    color: var(--element-4);
+    background-color: var(--primary-1);
+}
+
+
+/*  Landing Page start */
+
+.landing-text {
+    width:100%;
+    max-width: 800px;
+    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{
+    width:auto;
+    height:auto;
+}
+
+.landing-btn button img#right-arrow {
+    width:15%;
+    margin-left:10px;
+}
+
+@media only screen and (min-width:768px){
+    .resume-wrapper{
+    margin-top:72px;
+    }
+    .landing-image {
+        display: block;  
+    }
+
+}
+
+@media only screen and (min-width:1024px){
+    .resume-wrapper{
+        flex-direction: row;
+        justify-content: space-between;
+    }
+    .landing-text h1 {
+        text-align: left;
+    }
+
+    .landing-btn {
+        width:100%;
+        display: flex;
+        justify-content: flex-start;
+    }
+}
+
+@media only screen and (min-width:1440px){
+    .landing-text h1 span {
+        display: inline-block;
+    }
+    .resume-wrapper {
+        height:calc(100vh - 200px);
+
+    }
+}
+/*  Landing page end */
+
+/*  ResumeInput  start*/
+/*  ResumeInput  end*/
+
+/*  Confirmation start */
+
+.rc-response, .dwnld-error {
+    padding:1rem 1.5rem;
+    text-align: center;
+}
+
+.rc-response h1 {
+    text-transform: uppercase;
+    margin:1rem 0;
+}
+
+.rc-response h3 {
+line-height: 1.2;
+}
+
+.rc-response__action {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.rc-response__action a {
+    margin:1rem 0;
+}
+
+.dwnld-error a#dwnld-error__link {
+    color:var(--hashflag-red);
+}
+/*  Confirmation end */
+
+/*  Error start*/
+/*  Error end*/

src/assets/index.css

@@ -13,3 +13,4 @@
 @import 'css/pagination.css';
 @import 'css/toggle.css';
 @import 'css/video.css';
+@import 'css/resume-builder.css'

src/components/Nav/Nav.js

@@ -293,6 +293,13 @@ function Nav() {
                 </a>
               </Link>
             </li>
+            <li role="menuitem" className="nav" onClick={resetNavigation}>
+              <Link href="/resume-builder">
+                <a>
+                  <span>Resume Builder</span>
+                </a>
+              </Link>
+            </li>
             <li role="menuitem" className="nav" onClick={resetNavigation}>
               <Link href="/contact">
                 <a>

src/pages/_app.js

@@ -24,6 +24,7 @@ import '../assets/css/card.css'
 import '../assets/css/board.css'
 import '../assets/css/code-of-conduct.css'
 import '../assets/css/job-form.css'
+import '../assets/css/resume-builder.css'
 
 const G_TAG_KEY = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS
 

src/pages/confirmation.js

@@ -0,0 +1,41 @@
+import CheckCircle from '../images/check-circle.png'
+import Image from 'next/image'
+import Link from 'next/link'
+import { NextSeo } from 'next-seo'
+import PageHeader from '@/components/PageHeader'
+
+function Confirmation() {
+  return (
+    <>
+      <NextSeo title="Confirmation" />
+      <PageHeader />
+      <div className="resume-container">
+        <div className="rc-response">
+          <Image src={CheckCircle} alt="Green Check" />
+          <h1>Here's Your Resume!</h1>
+          <h3>Now that you have an awesome resume, time to go get that dream job!</h3>
+          <div className="rc-response__action">
+            <Link href="/resume-builder" passHref>
+              <button className="btn btn-cr">Create New Resume</button>
+            </Link>
+            <Link href="/" passHref>
+              <a id="rtrn-vwc">Back to VWC</a>
+            </Link>
+          </div>
+        </div>
+
+        <div className="dwnld-error">
+          <p>
+            If your resume did not automatically download,{' '}
+            <a href=" " id="dwnld-error__link">
+              click here
+            </a>{' '}
+            to download it.
+          </p>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Confirmation