ReCoded-Org · louisrli · Jul 24, 2020 · Jul 19, 2020 · Jul 19, 2020 · Jul 19, 2020
diff --git a/package.json b/package.json
@@ -6,12 +6,14 @@
         "@testing-library/jest-dom": "^4.2.4",
         "@testing-library/react": "^9.3.2",
         "@testing-library/user-event": "^7.1.2",
+        "bootstrap": "^4.5.0",
         "firebase": "^7.16.0",
         "i18next": "^19.6.2",
         "i18next-browser-languagedetector": "^5.0.0",
         "react": "^16.13.1",
+        "react-bootstrap": "^1.2.2",
         "react-dom": "^16.13.1",
-        "react-i18next": "^9.0.10",
+        "react-i18next": "^11.7.0",
         "react-scripts": "3.4.1"
     },
     "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -22,6 +22,12 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link
+    rel="stylesheet"
+    href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
+    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
+    crossorigin="anonymous"
+  />
     <title>React App</title>
   </head>
   <body>

diff --git a/src/App.js b/src/App.js
@@ -1,9 +1,9 @@
 import React from 'react';
-
+import Home from './containers/home/Home'
 function App() {
   return (
     <div className="App">
-
+    <Home/>
     </div>
   );
 }

diff --git a/src/components/inspire/Inspire.css b/src/components/inspire/Inspire.css
@@ -0,0 +1,35 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
+
+.inspireHome{
+ font-family: 'Roboto', sans-serif;
+ text-align: center;
+}
+.inspireHeader{
+    font-size: 2.875rem;
+}
+.pinkSpanInspire{
+    color: #E87A80;
+}
+.purpleSpanInspire{
+    color: #6C567C;
+}
+.greyParaInspire{
+    color: #4A474D;
+    font-size: 1.875rem;
+}
+.inspireButton{
+  background-color: #6c567b;
+  color: white;
+  font-family: "Roboto";
+  cursor: pointer;
+  width: 18.75rem;
+  height: 6.25rem;
+  font-size: 3.75rem;
+  border-radius: 3.125rem;
+  border-style: hidden;
+  box-shadow: 0 0.6875rem 1.5rem -0.4375rem #b3b3b3;
+}
+.inspireButton:hover{
+background-color: #f8b195;
+}
diff --git a/src/components/inspire/Inspire.jsx b/src/components/inspire/Inspire.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import './Inspire.css'
+import Button from 'react-bootstrap/Button';
+
+
+export default function Inspire(props) {
+
+    return (
+        <div className='inspireHome'>
+            <h2 className="inspireHeader"><span className="purpleSpanInspire">{props.header1}</span> <span className="pinkSpanInspire">{props.header2}</span><span className="purpleSpanInspire">{props.header3}</span> <span className="pinkSpanInspire">{props.header4}</span></h2>
+            <p className="greyParaInspire"> {props.par1} <br />
+                {props.par2} <br />
+                {props.par3}</p>
+            <Button className="inspireButton">{props.button}</Button>{' '}
+
+        </div>
+    )
+}
diff --git a/src/components/inspire/Inspire.test.jsx b/src/components/inspire/Inspire.test.jsx
@@ -0,0 +1,8 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import Inspire from "./Inspire";
+
+it("renders with no crash", () => {
+    const div = document.createElement("div");
+    ReactDOM.render(<Inspire />, div)
+});
diff --git a/src/containers/home/home.jsx b/src/containers/home/home.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import Inspire from '../../components/inspire/Inspire';
+import { useTranslation } from 'react-i18next';
+
+export default function Home() {
+    const { t } = useTranslation();
+
+    return (
+        <div>
+            <Inspire
+                header1={t('home.inspire.header.header1')}
+                header2={t('home.inspire.header.header2')}
+                header3={t('home.inspire.header.header3')}
+                header4={t('home.inspire.header.header4')}
+                par1={t('home.inspire.paragraph.par1')}
+                par2={t('home.inspire.paragraph.par2')}
+                par3={t('home.inspire.paragraph.par3')}
+                button={t('home.inspire.button')}
+            />
+        </div>
+    )
+}
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -1 +1,19 @@
-{}
+
+{
+    "home": {
+        "inspire":{
+            "header":{
+                "header1":"Give hope.",
+                "header2":"Inspire.",
+                "header3":"Change lives.",
+                "header4":"Share your story today"
+            },
+            "paragraph":{
+                "par1":"YOU have a powerful story to share. Your story can help women and girls",
+                "par2":"around the world. Please help build our inspiring collection of stories by",
+                "par3":"sharing some aspects of your journey to empowerment"
+            },
+            "button":"Share"
+        }
+    }
+}