InspireHome

package.json

@@ -6,13 +6,16 @@
         "@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-scripts": "3.4.1"
+        "react-i18next": "^11.7.0",
+        "react-scripts": "3.4.1",
+        "react-test-renderer": "^16.13.1"
     },
     "scripts": {
         "start": "react-scripts start",

public/index.html

@@ -4,10 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Women Empowerment"
-    />
+    <meta name="description" content="Women Empowerment" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/App.js

@@ -1,7 +1,12 @@
 import React from "react";
+import Home from "./containers/home/home";
 
 function App() {
-  return <div className="App"></div>;
+  return (
+    <div className="App">
+      <Home />
+    </div>
+  );
 }
 
 export default App;

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,21 @@
+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,14 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import Inspire from "./Inspire";
+import renderer from "react-test-renderer";
+
+it("renders with no crash", () => {
+  const div = document.createElement("div");
+  ReactDOM.render(<Inspire />, div);
+});
+
+it("renders correctly", () => {
+  const tree = renderer.create(<Inspire />).toJSON();
+  expect(tree).toMatchSnapshot();
+});

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

@@ -0,0 +1,40 @@
+// 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

@@ -0,0 +1,20 @@
+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
+        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>
+  );
+}

src/locales/en.json

@@ -1 +1,14 @@
-{}
+{
+  "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"
+    }
+  }
+}