began layout and design of home page

client/src/components/greeting.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+export default function Greeting() {
+
+    return (
+        <Container>
+
+            <Row>
+
+                <Col className='text-center'>
+
+                    <h1
+                        className='pt-5'
+                    >
+                        The <span className='highlight'>Criminal</span> Minds API
+                    </h1>
+
+                    <p>
+                        Checkout the <a href='https://criminalmindsapi.azurewebsites.net' rel='noreferrer' target='_blank' className='highlight'>documentation</a>.
+                    </p>
+
+                </Col>
+
+            </Row>
+            
+        </Container>
+    );
+
+}

client/src/components/navbar.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 import Navbar from 'react-bootstrap/Navbar';
 import Nav from 'react-bootstrap/Nav';
 import { NavLink } from 'react-router-dom';
@@ -8,36 +8,53 @@ export default function NavBar() {
 
     return (
         <Navbar
-            expand="sm" 
-            variant="light"
+            expand='sm'
+            variant='light'
         >
             <Container fluid>
+
                 <Navbar.Brand
-                    href="/"
-                    className="pt-0"
+                    href='/'
+                    className='pt-0'
                 >
-                    criminalmindsapi
+                    <span className='highlight'>criminal</span>mindsapi
                 </Navbar.Brand>
-                <Navbar.Toggle aria-controls="basic-navbar-nav"/>
+
+                <Navbar.Toggle aria-controls='basic-navbar-nav'/>
+                
                 <Navbar.Collapse>
-                    <Nav>
+
+                    <Nav className='ms-auto'>
+
+                        <NavLink
+                            to='/'
+                            className='nav-link link-dark'
+                        >
+                            Home
+                        </NavLink>
+
                         <NavLink
                             to='/About'
-                            className="nav-link link-dark"
+                            className='nav-link link-dark'
                         >
                             About
                         </NavLink>
+
                         <a
-                            href="https://criminalmindsapi.azurewebsites.net"
+                            href='https://criminalmindsapi.azurewebsites.net'
                             rel='noreferrer'
                             target='_blank'
-                            className="nav-link link-dark"
+                            className='nav-link link-dark'
                         >
                             Documentation
                         </a>
+
                     </Nav>
+
                 </Navbar.Collapse>
+
             </Container>
+            
         </Navbar>
     )
 

client/src/pages/about.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 export default function About() {
     return (

client/src/pages/home.js

@@ -1,9 +1,11 @@
-import React from "react";
+import React from 'react';
+
+import Greeting from '../components/greeting';
 
 export default function Home() {
     return (
         <>
-            <h1>Home</h1>
+            <Greeting/>
         </>
     );
 }

client/src/styles/app.css

@@ -0,0 +1,14 @@
+/* Bootstrap Overrides */
+
+.navbar-toggler:focus,
+.navbar-toggerl:active:focus {
+
+    box-shadow: none;
+
+}
+
+/* App Specific */
+
+.highlight {
+    color: #912718;
+}