InspireHome

.prettierrc

@@ -1,7 +1,7 @@
-{
-  "printWidth": 100,
-  "trailingComma": "all",
-  "tabWidth": 2,
-  "semi": true,
-  "singleQuote": true
+{ 
+ "printWidth": 100,
+ "trailingComma": "all",
+ "tabWidth": 2, 
+ "semi": true, 
+ "singleQuote": true
 }

package.json

@@ -1,52 +1,54 @@
 {
-  "name": "digital-world",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@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": "^11.7.0",
-    "react-scripts": "3.4.1",
-    "react-test-renderer": "^16.13.1"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "fix": "prettier --write 'src/**/*.js*' 'src/**/*.css' '!src/**/*/*.snap'"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.6.0",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-react": "^7.20.3",
-    "prettier": "^2.0.5",
-    "pretty-quick": "^2.0.1"
-  }
-}
+
+    "name": "digital-world",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "@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": "^11.7.0",
+        "react-scripts": "3.4.1",
+        "react-test-renderer": "^16.13.1"
+    },
+    "scripts": {
+        "start": "react-scripts start",
+        "build": "react-scripts build",
+        "test": "react-scripts test",
+        "eject": "react-scripts eject",
+        "fix": "prettier --write 'src/**/*.js*' 'src/**/*.css' '!src/**/*/*.snap'" 
+    },
+    "eslintConfig": {
+        "extends": "react-app"
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "devDependencies": {
+        "babel-eslint": "^10.1.0",
+        "eslint": "^6.6.0",
+        "eslint-config-airbnb": "^18.2.0",
+        "eslint-config-prettier": "^6.11.0",
+        "eslint-plugin-import": "^2.22.0",
+        "eslint-plugin-react": "^7.20.3",
+        "jest": "^24.9.0",
+        "prettier": "^2.0.5",
+        "pretty-quick": "^2.0.1"
+    }
+}

src/App.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import 'bootstrap/dist/css/bootstrap.min.css';
 import Home from './containers/home/Home';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 function App() {
   return (

src/components/inspire/Inspire.css

@@ -0,0 +1,37 @@
+.inspireContainer {
+  text-align: center;
+  margin: 0 15%;
+}
+
+.inspireHeader {
+  font-size: 2.875rem;
+}
+
+.pinkInspire {
+  color: #e87a80;
+}
+
+.purpleInspire {
+  color: #6c567c;
+}
+
+.heroText {
+  color: #4a474d;
+  font-size: 1.875rem;
+}
+
+.inspireButton {
+  background-color: #6c567b;
+  color: white;
+  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;
+}

src/components/inspire/Inspire.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import './Inspire.css';
+import Button from 'react-bootstrap/Button';
+
+export default function Inspire(props) {
+  return (
+    <div className="inspireContainer" data-testid="inspireContainer">
+      <h2 className="inspireHeader">
+        <span className="purpleInspire">{props.header0}</span>{' '}
+        <span className="pinkInspire">{props.header1}</span>
+        <span className="purpleInspire">{props.header2}</span>{' '}
+        <span className="pinkInspire">{props.header3}</span>
+      </h2>
+      <p className="heroText">
+        {props.heroText} <br />
+      </p>
+      <Button className="inspireButton">{props.button}</Button>
+    </div>
+  );
+}

src/components/inspire/Inspire.test.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import Inspire from './Inspire';
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  const tree = renderer.create(<Inspire />).toJSON();
+  expect(tree).toMatchSnapshot();
+});

src/components/inspire/__snapshots__/Inspire.test.jsx.snap

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="inspireContainer"
+  data-testid="inspireContainer"
+>
+  <h2
+    className="inspireHeader"
+  >
+    <span
+      className="purpleInspire"
+    />
+
+    <span
+      className="pinkInspire"
+    />
+    <span
+      className="purpleInspire"
+    />
+
+    <span
+      className="pinkInspire"
+    />
+  </h2>
+  <p
+    className="heroText"
+  >
+
+    <br />
+  </p>
+  <button
+    className="inspireButton btn btn-primary"
+    disabled={false}
+    type="button"
+  />
+</div>
+`;

src/containers/home/Home.jsx

@@ -1,12 +1,22 @@
 import React from 'react';
+import Inspire from '../../components/inspire/Inspire';
+import { useTranslation } from 'react-i18next';
 import Quotes from '../../components/quotes/Quotes';
 
-const Home = () => {
+export default function Home() {
+  const { t } = useTranslation();
+
   return (
     <div>
       <Quotes />
+      <Inspire
+        header0={t('home.inspire.header.header0')}
+        header1={t('home.inspire.header.header1')}
+        header2={t('home.inspire.header.header2')}
+        header3={t('home.inspire.header.header3')}
+        heroText={t('home.inspire.heroText')}
+        button={t('home.inspire.button')}
+      />
     </div>
   );
-};
-
-export default Home;
+}

src/locales/en.json

@@ -1,5 +1,15 @@
 {
   "home": {
+    "inspire": {
+      "header": {
+        "header0": "Give hope.",
+        "header1": "Inspire.",
+        "header2": "Change lives.",
+        "header3": "Share your story today"
+      },
+      "heroText": "YOU have a powerful story to share. Your story can help women and girls around the world. Please help build our inspiring collection of stories by, sharing some aspects of your journey to empowerment",
+      "button": "Share"
+    },
     "quotes": {
       "sayHerName": {
         "hashtag": "#SayHerName",