Feature/react app working

.gitignore

@@ -0,0 +1 @@
+node_modules

package.json

@@ -9,7 +9,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1"
+    "react-scripts": "^4.0.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -2,7 +2,7 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  font-family: 'PT Sans', sans-serif;
+  font-family: "PT Sans", sans-serif;
 }
 
 .home,
@@ -17,7 +17,7 @@
 }
 
 .services {
-  background-image: url('/images/img-2.jpg');
+  background-image: url("/src/images/img-2.jpg");
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
@@ -26,7 +26,7 @@
 }
 
 .products {
-  background-image: url('/images/img-1.jpg');
+  background-image: url("/src/images/img-1.jpg");
   background-position: center;
   background-size: fill;
   background-repeat: no-repeat;
@@ -35,7 +35,7 @@
 }
 
 .sign-up {
-  background-image: url('/images/img-8.jpg');
+  background-image: url("/src/images/img-8.jpg");
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;

src/App.js

@@ -1,22 +1,22 @@
-import React from 'react';
-import Navbar from './components/Navbar';
-import './App.css';
-import Home from './components/pages/Home';
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
-import Services from './components/pages/Services';
-import Products from './components/pages/Products';
-import SignUp from './components/pages/SignUp';
+import React from "react";
+import Navbar from "./components/Navbar";
+import "./App.css";
+import Home from "./components/pages/Home";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import Services from "./components/pages/Services";
+import Products from "./components/pages/Products";
+import SignUp from "./components/pages/SignUp";
 
 function App() {
   return (
     <>
       <Router>
         <Navbar />
         <Switch>
-          <Route path='/' exact component={Home} />
-          <Route path='/services' component={Services} />
-          <Route path='/products' component={Products} />
-          <Route path='/sign-up' component={SignUp} />
+          <Route path="/" exact component={Home} />
+          <Route path="/services" component={Services} />
+          <Route path="/products" component={Products} />
+          <Route path="/sign-up" component={SignUp} />
         </Switch>
       </Router>
     </>

src/components/CardItem.js

@@ -1,20 +1,20 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React from "react";
+import { Link } from "react-router-dom";
 
 function CardItem(props) {
   return (
     <>
-      <li className='cards__item'>
-        <Link className='cards__item__link' to={props.path}>
-          <figure className='cards__item__pic-wrap' data-category={props.label}>
+      <li className="cards__item">
+        <Link className="cards__item__link" to={props.path}>
+          <figure className="cards__item__pic-wrap" data-category={props.label}>
             <img
-              className='cards__item__img'
-              alt='Travel Image'
+              className="cards__item__img"
+              alt="Travel Location"
               src={props.src}
             />
           </figure>
-          <div className='cards__item__info'>
-            <h5 className='cards__item__text'>{props.text}</h5>
+          <div className="cards__item__info">
+            <h5 className="cards__item__text">{props.text}</h5>
           </div>
         </Link>
       </li>

src/components/Cards.js

@@ -1,45 +1,45 @@
-import React from 'react';
-import './Cards.css';
-import CardItem from './CardItem';
+import React from "react";
+import "./Cards.css";
+import CardItem from "./CardItem";
 
 function Cards() {
   return (
-    <div className='cards'>
+    <div className="cards">
       <h1>Check out these EPIC Destinations!</h1>
-      <div className='cards__container'>
-        <div className='cards__wrapper'>
-          <ul className='cards__items'>
+      <div className="cards__container">
+        <div className="cards__wrapper">
+          <ul className="cards__items">
             <CardItem
-              src='images/img-9.jpg'
-              text='Explore the hidden waterfall deep inside the Amazon Jungle'
-              label='Adventure'
-              path='/services'
+              src="/images/img-9.jpg"
+              text="Explore the hidden waterfall deep inside the Amazon Jungle"
+              label="Adventure"
+              path="/services"
             />
             <CardItem
-              src='images/img-2.jpg'
-              text='Travel through the Islands of Bali in a Private Cruise'
-              label='Luxury'
-              path='/services'
+              src="/images/img-2.jpg"
+              text="Travel through the Islands of Bali in a Private Cruise"
+              label="Luxury"
+              path="/services"
             />
           </ul>
-          <ul className='cards__items'>
+          <ul className="cards__items">
             <CardItem
-              src='images/img-3.jpg'
-              text='Set Sail in the Atlantic Ocean visiting Uncharted Waters'
-              label='Mystery'
-              path='/services'
+              src="/images/img-3.jpg"
+              text="Set Sail in the Atlantic Ocean visiting Uncharted Waters"
+              label="Mystery"
+              path="/services"
             />
             <CardItem
-              src='images/img-4.jpg'
-              text='Experience Football on Top of the Himilayan Mountains'
-              label='Adventure'
-              path='/products'
+              src="/images/img-4.jpg"
+              text="Experience Football on Top of the Himilayan Mountains"
+              label="Adventure"
+              path="/products"
             />
             <CardItem
-              src='images/img-8.jpg'
-              text='Ride through the Sahara Desert on a guided camel tour'
-              label='Adrenaline'
-              path='/sign-up'
+              src="/images/img-.jpg"
+              text="Ride through the Sahara Desert on a guided camel tour"
+              label="Adrenaline"
+              path="/sign-up"
             />
           </ul>
         </div>

src/components/Footer.css

@@ -20,8 +20,8 @@
 }
 
 .footer-subscription > p {
-  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
-    'Lucida Sans', Arial, sans-serif;
+  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
+    "Lucida Sans", Arial, sans-serif;
 }
 
 .footer-subscription-heading {

src/components/Footer.js

@@ -1,114 +1,114 @@
-import React from 'react';
-import './Footer.css';
-import { Button } from './Button';
-import { Link } from 'react-router-dom';
+import React from "react";
+import "./Footer.css";
+import { Button } from "./Button";
+import { Link } from "react-router-dom";
 
 function Footer() {
   return (
-    <div className='footer-container'>
-      <section className='footer-subscription'>
-        <p className='footer-subscription-heading'>
+    <div className="footer-container">
+      <section className="footer-subscription">
+        <p className="footer-subscription-heading">
           Join the Adventure newsletter to receive our best vacation deals
         </p>
-        <p className='footer-subscription-text'>
+        <p className="footer-subscription-text">
           You can unsubscribe at any time.
         </p>
-        <div className='input-areas'>
+        <div className="input-areas">
           <form>
             <input
-              className='footer-input'
-              name='email'
-              type='email'
-              placeholder='Your Email'
+              className="footer-input"
+              name="email"
+              type="email"
+              placeholder="Your Email"
             />
-            <Button buttonStyle='btn--outline'>Subscribe</Button>
+            <Button buttonStyle="btn--outline">Subscribe</Button>
           </form>
         </div>
       </section>
-      <div class='footer-links'>
-        <div className='footer-link-wrapper'>
-          <div class='footer-link-items'>
+      <div class="footer-links">
+        <div className="footer-link-wrapper">
+          <div class="footer-link-items">
             <h2>About Us</h2>
-            <Link to='/sign-up'>How it works</Link>
-            <Link to='/'>Testimonials</Link>
-            <Link to='/'>Careers</Link>
-            <Link to='/'>Investors</Link>
-            <Link to='/'>Terms of Service</Link>
+            <Link to="/sign-up">How it works</Link>
+            <Link to="/">Testimonials</Link>
+            <Link to="/">Careers</Link>
+            <Link to="/">Investors</Link>
+            <Link to="/">Terms of Service</Link>
           </div>
-          <div class='footer-link-items'>
+          <div class="footer-link-items">
             <h2>Contact Us</h2>
-            <Link to='/'>Contact</Link>
-            <Link to='/'>Support</Link>
-            <Link to='/'>Destinations</Link>
-            <Link to='/'>Sponsorships</Link>
+            <Link to="/">Contact</Link>
+            <Link to="/">Support</Link>
+            <Link to="/">Destinations</Link>
+            <Link to="/">Sponsorships</Link>
           </div>
         </div>
-        <div className='footer-link-wrapper'>
-          <div class='footer-link-items'>
+        <div className="footer-link-wrapper">
+          <div class="footer-link-items">
             <h2>Videos</h2>
-            <Link to='/'>Submit Video</Link>
-            <Link to='/'>Ambassadors</Link>
-            <Link to='/'>Agency</Link>
-            <Link to='/'>Influencer</Link>
+            <Link to="/">Submit Video</Link>
+            <Link to="/">Ambassadors</Link>
+            <Link to="/">Agency</Link>
+            <Link to="/">Influencer</Link>
           </div>
-          <div class='footer-link-items'>
+          <div class="footer-link-items">
             <h2>Social Media</h2>
-            <Link to='/'>Instagram</Link>
-            <Link to='/'>Facebook</Link>
-            <Link to='/'>Youtube</Link>
-            <Link to='/'>Twitter</Link>
+            <Link to="/">Instagram</Link>
+            <Link to="/">Facebook</Link>
+            <Link to="/">Youtube</Link>
+            <Link to="/">Twitter</Link>
           </div>
         </div>
       </div>
-      <section class='social-media'>
-        <div class='social-media-wrap'>
-          <div class='footer-logo'>
-            <Link to='/' className='social-logo'>
+      <section class="social-media">
+        <div class="social-media-wrap">
+          <div class="footer-logo">
+            <Link to="/" className="social-logo">
               TRVL
-              <i class='fab fa-typo3' />
+              <i class="fab fa-typo3" />
             </Link>
           </div>
-          <small class='website-rights'>TRVL © 2020</small>
-          <div class='social-icons'>
+          <small class="website-rights">TRVL © 2020</small>
+          <div class="social-icons">
             <Link
-              class='social-icon-link facebook'
-              to='/'
-              target='_blank'
-              aria-label='Facebook'
+              class="social-icon-link facebook"
+              to="/"
+              target="_blank"
+              aria-label="Facebook"
             >
-              <i class='fab fa-facebook-f' />
+              <i class="fab fa-facebook-f" />
             </Link>
             <Link
-              class='social-icon-link instagram'
-              to='/'
-              target='_blank'
-              aria-label='Instagram'
+              class="social-icon-link instagram"
+              to="/"
+              target="_blank"
+              aria-label="Instagram"
             >
-              <i class='fab fa-instagram' />
+              <i class="fab fa-instagram" />
             </Link>
             <Link
-              class='social-icon-link youtube'
-              to='/'
-              target='_blank'
-              aria-label='Youtube'
+              class="social-icon-link youtube"
+              to="/"
+              target="_blank"
+              aria-label="Youtube"
             >
-              <i class='fab fa-youtube' />
+              <i class="fab fa-youtube" />
             </Link>
             <Link
-              class='social-icon-link twitter'
-              to='/'
-              target='_blank'
-              aria-label='Twitter'
+              class="social-icon-link twitter"
+              to="/"
+              target="_blank"
+              aria-label="Twitter"
             >
-              <i class='fab fa-twitter' />
+              <i class="fab fa-twitter" />
             </Link>
             <Link
-              class='social-icon-link twitter'
-              to='/'
-              target='_blank'
-              aria-label='LinkedIn'
+              class="social-icon-link twitter"
+              to="/"
+              target="_blank"
+              aria-label="LinkedIn"
             >
-              <i class='fab fa-linkedin' />
+              <i class="fab fa-linkedin" />
             </Link>
           </div>
         </div>