broken our homepage into smaller components, finished styling our menu-item component

Author: buihuyhung

public/index.html

@@ -10,6 +10,10 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300"
+      rel="stylesheet"
+    />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.css

@@ -0,0 +1,3 @@
+body {
+  font-family: 'Open Sans Condensed';
+}

src/App.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import './App.css';
 
-import HomePage from './homepage.component';
+import HomePage from './pages/homepage/homepage.component';
 
 function App() {
   return (

src/components/directory/directory.component.jsx

@@ -0,0 +1,55 @@
+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
+        },
+        {
+          title: 'jackets',
+          imageUrl: 'https://i.ibb.co/px2tCc3/jackets.png',
+          id: 2
+        },
+        {
+          title: 'sneakers',
+          imageUrl: 'https://i.ibb.co/0jqHpnp/sneakers.png',
+          id: 3
+        },
+        {
+          title: 'womens',
+          imageUrl: 'https://i.ibb.co/GCCdy8t/womens.png',
+          size: 'large',
+          id: 4
+        },
+        {
+          title: 'mens',
+          imageUrl: 'https://i.ibb.co/R70vBrQ/men.png',
+          size: 'large',
+          id: 5
+        }
+      ]
+    };
+  }
+
+  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,20 @@
+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/homepage.styles.scss …mponents/menu-item/menu-item.styles.scsssrc/homepage.styles.scss renamed to src/components/menu-item/menu-item.styles.scss src/homepage.styles.scss renamed to src/components/menu-item/menu-item.styles.scss

@@ -1,17 +1,3 @@
-.homepage {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 20px 80px;
-}
-
-.directory-menu {
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-
 .menu-item {
   min-width: 30%;
   height: 240px;
@@ -21,6 +7,24 @@
   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;
@@ -30,6 +34,13 @@
     margin-left: 7.5px;
   }
 
+  .background-image {
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-position: center;
+  }
+
   .content {
     height: 90px;
     padding: 0 25px;
@@ -38,10 +49,13 @@
     align-items: center;
     justify-content: center;
     border: 1px solid black;
+    background-color: white;
+    opacity: 0.7;
+    position: absolute;
 
     .title {
       font-weight: bold;
-      margin-bottom: 6px;
+      margin: 0 6px 0;
       font-size: 22px;
       color: #4a4a4a;
     }

src/homepage.component.jsx

@@ -1,14 +1,14 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }

src/index.css

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import Directory from '../../components/directory/directory.component';
+
+import './homepage.styles.scss';
+
+const HomePage = () => (
+  <div className='homepage'>
+    <Directory />
+  </div>
+);
+
+export default HomePage;