added product-list, product,footer,search bar components

package.json

@@ -13,15 +13,18 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "jsdom": "^16.2.2",
+    "mdbreact": "^4.27.0",
     "mocha": "^8.0.1",
     "node-sass": "^4.14.1",
     "quik": "^1.0.1",
     "react": "^16.13.1",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.13.1",
     "react-hook-form": "^5.7.2",
+    "react-native-elements": "^2.0.2",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "react-sticky-footer": "^0.1.0-rc3"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -0,0 +1,13 @@
+body{
+    font-family: 'Open Sans Condensed';
+    padding: 10px 60px;
+   }
+
+   a{
+       text-decoration: none;
+       color: black;
+   }
+
+   *{
+       box-sizing: border-box;
+   }

src/components/form-input/form-input.component.jsx

@@ -10,10 +10,11 @@ const FormInput = ({handleChange, label, ...otherProps}) =>(
            ( <label className={`${otherProps.value.length ? 'shrink': ''} form-input-label `}>
                 {label}
             </label>
+
            )
             :null 
         }
-        
+
     </div>
 );
 

src/components/header/header.component.jsx

@@ -4,14 +4,13 @@ import {Link} from 'react-router-dom';
 import './header.styles.scss';
 
 const Header = ({currentUser, hidden}) => (
-    //add sign in and sign up functionality and link 
     <div className='header'>
         <Link className='logo-container' to="/">
             <div className='logo'> our logo here </div>
         </Link>
         <div className='options'>
             <Link className='option' to='/signin'>
-             SIGN IN
+             SIGN IN/SIGN UP
             </Link>
             <Link className='option' to='/companies'>
              BLACK COMPANIES

src/components/product-list/product-list.component.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import './product-list.styles.scss';
+import {Product} from '../../components/product/product.component';
+
+
+
+export const ProductList = () => (
+    //holder 
+
+    <div className='product-list'>
+        <Product/>
+    </div>
+);
+

src/components/product-list/product-list.styles.scss

@@ -0,0 +1,7 @@
+.product-list {
+    width: 85vw;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-gap: 20px;
+  }

src/components/product/product.component.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import './product.styles.scss';
+
+export const Product = () => (
+    //holder 
+    <div className='product'>
+        product 1
+    </div>
+);

src/components/product/product.styles.scss

@@ -0,0 +1,15 @@
+.product{
+    transition: box-shadow .3s;
+    width: 300px;
+    height: 400px;
+    margin: 50px;
+    border-radius:10px;
+    border: 1px solid #ccc;
+    background: #fff;
+    float: left;
+
+}
+.product:hover {
+    box-shadow: 0 0 11px rgba(33,33,33,.2); 
+
+  }

src/components/search-bar/search-bar.component.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import './search-bar.styles.scss';
+
+export  const SearchBar = () => (
+    // <input  
+    //     className='search'
+    //     type='search' 
+    //     placeholder='Type here ...'
+    //     autocomplete="on" 
+    // />
+
+    <form className='search-form'>
+        <div className='business-search'>
+            <div className='search-element'>
+                <label className='search-label'> Type here</label>
+                <input 
+                    className='search-input'
+                    type='text'
+                    autocomplete='on'
+                    placeholder='Company or Product'
+                />
+            </div>
+            <div className='search-element'>
+                <label className='search-label'> Location</label>
+                <input 
+                    className='search-input'
+                    type='text'
+                    autocomplete='on'
+                    placeholder='City, State'
+                />
+            </div>
+            <a type="submit" class="search-button">Search</a>
+        </div>
+    </form>
+)
+
+export default SearchBar;

src/components/search-bar/search-bar.styles.scss

@@ -0,0 +1,63 @@
+// *, *::before, *::after { box-sizing: border-box; }
+.search-form{
+  width: 97%;
+  margin-bottom: 5px;
+}
+.business-search {
+  display: flex;
+  align-items: center;
+  background: white;
+  border-radius: 5px;
+  margin: 0 auto;
+  box-shadow: rgba(0,0,0,.172549) 0 6px 12px 0;
+  cursor: pointer;
+}
+
+.search-element {
+  display: flex;
+  flex-grow: 2;
+  flex-direction: column;
+  border-right: 1px solid rgba(10,10,10,.1);
+  padding: 1em;
+}
+
+.search-label {
+  font-weight: 700;
+}
+
+.search-input {
+  border: none;
+  appearance: none;
+  outline: none;
+  width: 100%;
+  font-size: 1.2em;
+  line-height: 1.2em;
+  margin-top: 5px;
+}
+
+.search-input:focus {
+  box-shadow: 0px 2px 0px 0px tomato;
+}
+
+.search-button {
+  display: inline-block;
+  flex-grow: 1;
+  height: 80px;
+  line-height: 80px;
+  padding: 0 2em;
+  text-align: center;
+  font-size: 1.2em;
+  font-weight: 100;
+  border: 0;
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+  color: white;
+  background-color:orangered;
+  transition: background-color 0.8s ease;
+}
+
+.search-button:hover {
+  background-color: HSLA(345, 100%, 60%, 1.00);
+}

src/components/sign-up/sign-up.component.jsx

@@ -5,9 +5,7 @@ import CustomButton from '../custom-button/custom-button.component';
 
 import './sign-up.styles.scss';
 
-const validEmailRegex = RegExp(
-    /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i
-  );
+const validEmailRegex = RegExp(/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i);
 
 
 class SignUp extends React.Component{
@@ -77,10 +75,11 @@ class SignUp extends React.Component{
                 : '';
             break;
            case 'confirmPassword':
-               errors.confirmPassword =
+            errors.confirmPassword =
                value.length >= 8 
                 ? 'Password must be at least 8 characters long!'
                 : '';
+            break;
           default:
             break;
         }
@@ -89,7 +88,7 @@ class SignUp extends React.Component{
     }
 
     render(){
-        const {displayName,email,password,confirmPassword,errors } = this.state;
+        const {displayName,email,password,confirmPassword, errors } = this.state;
        return(
         <div className='sign-up'>
             <h2 className='title'>I do not have an account</h2>
@@ -103,7 +102,6 @@ class SignUp extends React.Component{
                     onChange = {this.handleChange}
                     label='Display Name'
                     required
-
                 />
                 <FormInput
                     type='email'

src/pages/footerpage/footerpage.component.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { MDBCol, MDBContainer, MDBRow, MDBFooter } from "mdbreact";
+
+const FooterPage = () => {
+  return (
+    <MDBFooter color="blue" className="font-small pt-4 mt-4 ">
+      <MDBContainer fluid className="text-center text-md-left">
+        <MDBRow>
+          <MDBCol md="6">
+            <h5 className="title">Footer Content</h5>
+            <p>
+              Here you can use rows and columns here to organize your footer
+              content.
+            </p>
+          </MDBCol>
+          <MDBCol md="6">
+            <h5 className="title">Links</h5>
+            <ul>
+              <li className="list-unstyled">
+                <a href="#!">Link 1</a>
+              </li>
+              <li className="list-unstyled">
+                <a href="#!">Link 2</a>
+              </li>
+              <li className="list-unstyled">
+                <a href="#!">Link 3</a>
+              </li>
+              <li className="list-unstyled">
+                <a href="#!">Link 4</a>
+              </li>
+            </ul>
+          </MDBCol>
+        </MDBRow>
+      </MDBContainer>
+      <div className="footer-copyright text-center py-3">
+        <MDBContainer fluid>
+          &copy; {new Date().getFullYear()} Copyright: <a href="https://www.mdbootstrap.com"> MDBootstrap.com </a>
+          <p>social media links</p>
+        </MDBContainer>
+      </div>
+    </MDBFooter>
+  );
+}
+
+export default FooterPage;

src/pages/footerpage/footerpage.styles.scss

@@ -0,0 +1,3 @@
+.thefooter{
+    border-top: orange;
+}

src/pages/homepage/homepage.component.jsx

@@ -1,11 +1,19 @@
 import React from 'react';
+import {SearchBar} from '../../components/search-bar/search-bar.component.jsx';
+import {ProductList} from '../../components/product-list/product-list.component';
+import FooterPage from '../../pages/footerpage/footerpage.component';
 
 import './homepage.styles.scss';
 
 const HomePage = () => (
     //This is the directory for blackspace
-    <div className='homepage'> business directory
-
+    <div className='homepage'> 
+    {/* this section has a list of 4 categories of businesses */}
+        {/* <div className='categories'>add popular categories here</div> */}
+        <SearchBar/>
+        <ProductList/>
+        {/* <div className='other options'> space for more product seelctions </div> */}
+        <FooterPage/>
     </div>
 );
 

src/pages/homepage/homepage.styles.scss

@@ -2,5 +2,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 20px 80px;
+    padding: 3px 3px;
+    width: 95%;
+    margin-bottom: 25px;
   }