complete basic components

package.json

@@ -5,6 +5,7 @@
   "version": "0.1.0",
   "author": "Kyle Mathews <[email protected]>",
   "dependencies": {
+    "bootstrap": "^4.4.1",
     "gatsby": "^2.19.7",
     "gatsby-image": "^2.2.39",
     "gatsby-plugin-manifest": "^2.2.39",
@@ -15,6 +16,7 @@
     "gatsby-transformer-sharp": "^2.3.13",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
+    "react-bootstrap": "^1.0.0-beta.16",
     "react-dom": "^16.12.0",
     "react-helmet": "^5.2.1"
   },

src/components/call-to-action.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import Form from 'react-bootstrap/Form'
+import Col from 'react-bootstrap/Col'
+import Row from 'react-bootstrap/Row'
+import Button from 'react-bootstrap/Button'
+
+const CallToAction = () => (
+  <Form style={{marginBottom: '2rem', marginTop: '2rem'}}>
+    <Form.Group as={Row}>
+      <Form.Label column sm={2}>Request a demo</Form.Label>
+      <Col sm={8}>
+        <Form.Control type="email" placeholder="Email" />
+      </Col>
+      <Col sm={2}>
+      <Button type="submit">Submit</Button>
+      </Col>
+    </Form.Group>
+  </Form>
+)
+export default CallToAction

src/components/head-line.js

@@ -0,0 +1,9 @@
+import Jumbotron from 'react-bootstrap/Jumbotron'
+import React from 'react';
+
+const HeadLine = () =>(
+  <Jumbotron>
+    <h1>Contingent Workforce Management</h1>
+  </Jumbotron>
+)
+export default HeadLine

src/components/head-nav.js

@@ -0,0 +1,16 @@
+import Navbar from 'react-bootstrap/Navbar'
+import Nav from 'react-bootstrap/Nav'
+import React from 'react'
+
+const HeadNav = () => (
+  <Navbar className="d-flex justify-content-between">
+    <Navbar.Brand href='#'>Lome</Navbar.Brand>
+    <Nav >
+    <Nav.Link>Product</Nav.Link>
+    <Nav.Link>Pricing</Nav.Link>
+    <Nav.Link>Request Demo</Nav.Link>
+    <Nav.Link>Login</Nav.Link>
+    </Nav>
+  </Navbar>
+)
+export default HeadNav

src/components/industries.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import Row from 'react-bootstrap/Row'
+import Col from 'react-bootstrap/Col'
+import Card from 'react-bootstrap/Card'
+
+const Industries =()=>(
+  <div style={{marginBottom: '2rem'}}>
+    <Row>
+      <Col><Card body>Autonomous Vehicles</Card></Col>
+      <Col><Card body>Academia</Card></Col>
+      <Col><Card body>Defence</Card></Col>
+    </Row>
+    <Row>
+      <Col><Card body>Healthcare</Card></Col>
+      <Col><Card body>Finance</Card></Col>
+      <Col><Card body>Retail</Card></Col>
+    </Row>
+  </div>
+)
+export default Industries

src/components/layout.js

@@ -11,7 +11,6 @@ import { useStaticQuery, graphql } from "gatsby"
 
 import Header from "./header"
 import "./layout.css"
-
 const Layout = ({ children }) => {
   const data = useStaticQuery(graphql`
     query SiteTitleQuery {
@@ -25,19 +24,13 @@ const Layout = ({ children }) => {
 
   return (
     <>
-      <Header siteTitle={data.site.siteMetadata.title} />
-      <div
-        style={{
-          margin: `0 auto`,
-          maxWidth: 960,
-          padding: `0 1.0875rem 1.45rem`,
-        }}
-      >
+
+      <div>
         <main>{children}</main>
         <footer>
-          © {new Date().getFullYear()}, Built with
+          © Lome
           {` `}
-          <a href="https://www.gatsbyjs.org">Gatsby</a>
+          <a href="https://www.gatsbyjs.org">Privacy & Terms</a>
         </footer>
       </div>
     </>

src/components/pricing.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import Card from 'react-bootstrap/Card'
+import Col from 'react-bootstrap/Col'
+import Row from 'react-bootstrap/Row'
+
+const Pricing = () => (
+  <Row style={{marginBottom: '2rem'}}>
+    <Col>
+      <Card>
+        <Card.Body>
+          <Card.Title>$500 USD/Month</Card.Title>
+          <Card.Text>Data Analyst</Card.Text>
+        </Card.Body>
+      </Card>
+    </Col>
+    <Col>
+    <Card>
+    <Card.Body>
+      <Card.Title>$100 USD/Month</Card.Title>
+      <Card.Text>Vendor Relationship Manager</Card.Text>
+    </Card.Body>
+  </Card>
+    </Col>
+    <Col>
+    <Card>
+    <Card.Body>
+      <Card.Title>$1 USD/Month</Card.Title>
+      <Card.Text>Contingent Worker Dashboard</Card.Text>
+    </Card.Body>
+  </Card>
+    </Col>
+  </Row>
+)
+
+export default Pricing