diff --git a/public/index.html b/public/index.html index aa069f2..cd16b89 100644 --- a/public/index.html +++ b/public/index.html @@ -24,6 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> + React App diff --git a/src/App.js b/src/App.js index 429b6ba..e8abdf5 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,6 @@ import React from 'react'; import './App.scss'; -import HomePage from './homepage.component'; +import HomePage from './pages/homepage/homepage.component'; function App() { return ( diff --git a/src/App.scss b/src/App.scss index e69de29..69e1036 100644 --- a/src/App.scss +++ b/src/App.scss @@ -0,0 +1,3 @@ +body { + font-family: 'Open Sans Condensed', sans-serif; +} \ No newline at end of file diff --git a/src/components/directory/directory.component.jsx b/src/components/directory/directory.component.jsx new file mode 100644 index 0000000..f688c31 --- /dev/null +++ b/src/components/directory/directory.component.jsx @@ -0,0 +1,63 @@ +import React, { Component } from 'react'; +import MenuItem from '../menu-item/menu-item.component'; +import './directory.styles.scss'; + +class Directory extends 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 ( +
+ {this.state.sections.map(({ title, imageUrl, size, id, linkUrl }) => ( + + ))} +
+ ); + } +} + + +export default Directory; \ No newline at end of file diff --git a/src/components/directory/directory.styles.scss b/src/components/directory/directory.styles.scss new file mode 100644 index 0000000..384c637 --- /dev/null +++ b/src/components/directory/directory.styles.scss @@ -0,0 +1,6 @@ +.directory-menu { + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} \ No newline at end of file diff --git a/src/components/menu-item/menu-item.component.jsx b/src/components/menu-item/menu-item.component.jsx new file mode 100644 index 0000000..5d293e6 --- /dev/null +++ b/src/components/menu-item/menu-item.component.jsx @@ -0,0 +1,18 @@ +import React from 'react'; +import './menu-item.styles.scss'; + +const MenuItem = ({ title, imageUrl, size }) => ( +
+
+ +
+

{title}

+ SHOP NOW +
+
+); + +export default MenuItem; \ No newline at end of file diff --git a/src/homepage.styles.scss b/src/components/menu-item/menu-item.styles.scss similarity index 57% rename from src/homepage.styles.scss rename to src/components/menu-item/menu-item.styles.scss index 9d31165..27f4a56 100644 --- a/src/homepage.styles.scss +++ b/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,22 @@ justify-content: center; border: 1px solid black; margin: 0 7.5px 15px; + background-position: center; + background-size: cover; + 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; + } + } &:first-child { margin-right: 7.5px; @@ -30,6 +32,15 @@ margin-left: 7.5px; } + &.large { + height: 380px; + } + + .background-image { + height: 100%; + width: 100%; + } + .content { height: 90px; padding: 0 25px; @@ -38,17 +49,24 @@ align-items: center; justify-content: center; border: 1px solid black; + text-transform: uppercase; + background-color: white; + opacity: 0.8; + position: absolute; .title { font-weight: bold; margin-bottom: 6px; font-size: 22px; color: #4a4a4a; + } .subtitle { font-weight: lighter; font-size: 16px; } + + } } \ No newline at end of file diff --git a/src/homepage.component.jsx b/src/homepage.component.jsx deleted file mode 100644 index 82dbddb..0000000 --- a/src/homepage.component.jsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; -import './homepage.styles.scss'; - -const HomePage = () => ( -
-
-
-
-

- HATS -

- SHOP NOW -
-
-
-
-

- JACKETS -

- SHOP NOW -
-
-
-
-

- SNEAKERS -

- SHOP NOW -
-
-
-
-

- WOMEN -

- SHOP NOW -
-
-
-
-

- MEN -

- SHOP NOW -
-
-
-
-) - -export default HomePage; \ No newline at end of file diff --git a/src/pages/homepage/homepage.component.jsx b/src/pages/homepage/homepage.component.jsx new file mode 100644 index 0000000..4db8b5d --- /dev/null +++ b/src/pages/homepage/homepage.component.jsx @@ -0,0 +1,11 @@ +import React from 'react'; +import './homepage.styles.scss'; +import Directory from '../../components/directory/directory.component'; + +const HomePage = () => ( +
+ +
+) + +export default HomePage; \ No newline at end of file diff --git a/src/pages/homepage/homepage.styles.scss b/src/pages/homepage/homepage.styles.scss new file mode 100644 index 0000000..8905e30 --- /dev/null +++ b/src/pages/homepage/homepage.styles.scss @@ -0,0 +1,6 @@ +.homepage { + display: flex; + flex-direction: column; + align-items: center; + padding: 20px 80px; +}