Added BlockQuote component lib and it's storybook.

src/app.js → src/App.js

@@ -4,7 +4,7 @@ import { hot } from 'react-hot-loader/root';
 
 import Header from './components/Header';
 import Footer from './components/Footer';
-import Home from './containers/home';
+import Home from './containers/Home';
 import About from './containers/about';
 import Service from './containers/service';
 import Contact from './containers/contact';

src/component-lib/BlockQuote/BlockQuote.js

@@ -0,0 +1,98 @@
+import React, { useContext } from 'react';
+import styled, { css, ThemeContext } from 'styled-components';
+
+function BlockQuote({ text, footer, size, children }) {
+  const supportedSizes = ['xsmall', 'small', 'medium', 'large', 'xlarge'];
+  // Set the default size.
+  size = supportedSizes.includes(size) ? size : 'medium';
+
+  const theme = useContext(ThemeContext);
+  const Quote = styled.blockquote`
+    position: relative;
+    background: ${theme.global.colors['light-3']};
+    color: ${theme.global.colors.text.light};
+    p::before {
+      display: block;
+      position: absolute;
+      color: ${theme.global.colors.text.light};
+      content: '\\201C';
+    }
+
+    ${size === 'xsmall' &&
+      css`
+        margin: 0.05em 0;
+        padding: 1em 1.5em;
+        line-height: 1.05;
+        p::before {
+          padding-left: 10px;
+          font-size: 45px;
+          left: -8px;
+          top: 3px;
+        }
+      `};
+
+    ${size === 'small' &&
+      css`
+        margin: 0.15em 0;
+        padding: 1em 2.5em;
+        line-height: 1.25;
+        p::before {
+          padding-left: 10px;
+          font-size: 60px;
+          left: -4px;
+          top: -5px;
+        }
+      `};
+
+    ${size === 'medium' &&
+      css`
+        margin: 0.25em 0;
+        padding: 1.5em 3.5em;
+        line-height: 1.45;
+        p::before {
+          padding-left: 10px;
+          font-size: 80px;
+          left: -4px;
+          top: -20px;
+        }
+      `};
+
+    ${size === 'large' &&
+      css`
+        margin: 0.35em 0;
+        padding: 1.5em 4.5em;
+        line-height: 1.65;
+        p::before {
+          padding-left: 10px;
+          font-size: 100px;
+          left: 5px;
+          top: -35px;
+        }
+      `};
+
+    ${size === 'xlarge' &&
+      css`
+        margin: 0.45em 0;
+        padding: 1.5em 5.5em;
+        line-height: 1.85;
+        p::before {
+          padding-left: 10px;
+          font-size: 120px;
+          left: 9px;
+          top: -50px;
+        }
+      `};
+  `;
+  if (text) {
+    return (
+      <Quote>
+        <p>{text}</p>
+        {footer && <footer>{footer}</footer>}
+      </Quote>
+    );
+  } else {
+    return <Quote>{children}</Quote>;
+  }
+}
+
+export default BlockQuote;

src/component-lib/BlockQuote/BlockQuote.stories.js

@@ -0,0 +1,68 @@
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+import { Grommet } from 'grommet';
+
+import { powerTheme } from '../../themes';
+
+import BlockQuote from './BlockQuote';
+
+storiesOf('component-lib/BlockQuote', module)
+  .add('default', () => {
+    return (
+      <Grommet full theme={powerTheme}>
+        <BlockQuote
+          text="Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced."
+          footer="—Aldous Huxley"></BlockQuote>
+      </Grommet>
+    );
+  })
+  .add('xsmall', () => {
+    return (
+      <Grommet full theme={powerTheme}>
+        <BlockQuote
+          text="Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced."
+          footer="—Aldous Huxley"
+          size="xsmall"></BlockQuote>
+      </Grommet>
+    );
+  })
+  .add('small', () => {
+    return (
+      <Grommet full theme={powerTheme}>
+        <BlockQuote
+          text="Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced."
+          footer="—Aldous Huxley"
+          size="small"></BlockQuote>
+      </Grommet>
+    );
+  })
+  .add('medium', () => {
+    return (
+      <Grommet full theme={powerTheme}>
+        <BlockQuote
+          text="Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced."
+          footer="—Aldous Huxley"
+          size="medium"></BlockQuote>
+      </Grommet>
+    );
+  })
+  .add('large', () => {
+    return (
+      <Grommet full theme={powerTheme}>
+        <BlockQuote
+          text="Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced."
+          footer="—Aldous Huxley"
+          size="large"></BlockQuote>
+      </Grommet>
+    );
+  })
+  .add('xlarge', () => {
+    return (
+      <Grommet full theme={powerTheme}>
+        <BlockQuote
+          text="Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced."
+          footer="—Aldous Huxley"
+          size="xlarge"></BlockQuote>
+      </Grommet>
+    );
+  });

src/component-lib/BlockQuote/index.js

@@ -0,0 +1 @@
+export { default } from './BlockQuote';

src/components/Greetings/Greetings.js

@@ -1,24 +1,26 @@
-import React from "react";
+import React from 'react';
+import { Heading, Text } from 'grommet';
+import BlockQuote from '../../component-lib/BlockQuote';
 
 function Greeting() {
   return (
     <header className="jumbotron my-4">
-      <h3 className="display-4">Greetings from Marvel Universe!</h3>
+      <Heading level={3} margin="none">
+        <strong>Greetings from Marvel Universe!</strong>
+      </Heading>
       {/* <p className="lead">
         In its 10 years, 3 phases and 18 films, the Marvel Cinematic Universe has dominated our
         screens (and our lives) with epic action sequences, hilarious moments, and lovable heroes. However, as
         well as being raucous fun, the films have often provided tidbits of wisdom. Here are my picks of the
         inspiring, helpful and memorable quotes from the MCU that actually offer some life advice.
       </p> */}
-      <p className="lead">
-        <i>
-          <b>“Compromise where you can, but where you can’t, don’t. Even if everyone is telling you that
-              something wrong is something right. Even if the whole world is telling you to move. It is your
-              duty to plant yourself like a tree, to look them in the eye and say, no, you move.” – Sharon
-              Carter (Captain America: Civil War, 2016)
-            </b>
-        </i>
-      </p>
+      <BlockQuote
+        text="Compromise where you can, but where you can’t, don’t. Even if
+      everyone is telling you that something wrong is something right.
+      Even if the whole world is telling you to move. It is your duty to
+      plant yourself like a tree, to look them in the eye and say, no, you
+      move."
+        footer=" – Sharon Carter (Captain America: Civil War, 2016)"></BlockQuote>
       <button className="btn grad-btn btn-lg">Find a Match!</button>
     </header>
   );

src/index.js

@@ -5,7 +5,7 @@ import { createStore } from 'redux';
 import { Grommet, grommet } from 'grommet';
 import * as serviceWorker from './serviceWorker';
 
-import App from './app';
+import App from './App';
 import reducer from './reducers';
 import { powerTheme } from './themes';