Finished Homepage

src/components/directory/directory.component.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import MenuItem from '../menu-item/menu-item.component'
+import './directory.styles.scss'
+
+class Directory extends React.Component {
+    constructor() {
+        super();
+
+        this.state = {
+            sections: [{
+                title: 'hats',
+                imageUrl: 'https://i.ibb.co/cvpntL1/hats.png',
+                id: 1,
+                linkUrl: 'shop/hats'
+            },
+            {
+                title: 'jackets',
+                imageUrl: 'https://i.ibb.co/px2tCc3/jackets.png',
+                id: 2,
+                linkUrl: 'shop/jackets'
+            },
+            {
+                title: 'sneakers',
+                imageUrl: 'https://i.ibb.co/0jqHpnp/sneakers.png',
+                id: 3,
+                linkUrl: 'shop/sneakers'
+            },
+            {
+                title: 'womens',
+                imageUrl: 'https://i.ibb.co/GCCdy8t/womens.png',
+                size: 'large',
+                id: 4,
+                linkUrl: 'shop/womens'
+            },
+            {
+                title: 'mens',
+                imageUrl: 'https://i.ibb.co/R70vBrQ/men.png',
+                size: 'large',
+                id: 5,
+                linkUrl: 'shop/mens'
+            }]
+        }
+    }
+    render() {
+        return (
+            <div className="directory-menu">
+                {
+                    this.state.sections.map(({ title, imageUrl, id, size }) => (
+                        <MenuItem key={id} title={title} imageUrl={imageUrl} size={size} />
+                    ))
+                }
+            </div>
+        );
+    }
+}
+
+export default Directory;

src/components/directory/directory.styles.scss

@@ -0,0 +1,6 @@
+.directory-menu {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }

src/components/menu-item/menu-item.component.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import './menu-item.styles.scss'
+
+const MenuItem = ({ title, imageUrl, size }) => (
+    <div
+        className={`${size} menu-item`}
+    >
+        <div
+            className="background-image"
+            style={{
+                backgroundImage: `url(${imageUrl})`
+            }}
+        />
+        <div className="content">
+            <h1 className="title">{title.toUpperCase()}</h1>
+            <span className="subtitle">SHOP NOW</span>
+        </div>
+    </div>
+)
+
+export default MenuItem;

src/components/menu-item/menu-item.styles.scss

@@ -0,0 +1,68 @@
+.menu-item {
+  min-width: 30%;
+  height: 240px;
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid black;
+  margin: 0 7.5px 15px;
+  overflow: hidden;
+
+  &:hover {
+    cursor: pointer;
+
+    & .background-image {
+      transform: scale(1.1);
+      transition: transform 6s cubic-bezier(0.25, 0.45, 0.45, 0.95);
+    }
+
+    & .content {
+      opacity: 0.9;
+    }
+  }
+
+  &.large {
+    height: 380px;
+  }
+
+  &:first-child {
+    margin-right: 7.5px;
+  }
+
+  &:last-child {
+    margin-left: 7.5px;
+  }
+
+  .background-image {
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-position: center;
+  }
+
+  .content {
+    height: 90px;
+    padding: 0 25px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid black;
+    background-color: white;
+    opacity: 0.7;
+    position: absolute;
+
+    .title {
+      font-weight: bold;
+      margin: 0 6px 0;
+      font-size: 22px;
+      color: #4a4a4a;
+    }
+
+    .subtitle {
+      font-weight: lighter;
+      font-size: 16px;
+    }
+  }
+}