diff --git a/public/images/hats.png b/public/images/hats.png new file mode 100644 index 0000000..f05a415 Binary files /dev/null and b/public/images/hats.png differ diff --git a/public/images/jackets.png b/public/images/jackets.png new file mode 100644 index 0000000..eea735a Binary files /dev/null and b/public/images/jackets.png differ diff --git a/public/images/men.png b/public/images/men.png new file mode 100644 index 0000000..e671361 Binary files /dev/null and b/public/images/men.png differ diff --git a/public/images/shop-img/hats/blue-beanie.png b/public/images/shop-img/hats/blue-beanie.png new file mode 100644 index 0000000..a2279b9 Binary files /dev/null and b/public/images/shop-img/hats/blue-beanie.png differ diff --git a/public/images/shop-img/hats/blue-snapback.png b/public/images/shop-img/hats/blue-snapback.png new file mode 100644 index 0000000..2c7fb9c Binary files /dev/null and b/public/images/shop-img/hats/blue-snapback.png differ diff --git a/public/images/shop-img/hats/brown-brim.png b/public/images/shop-img/hats/brown-brim.png new file mode 100644 index 0000000..a56bcb3 Binary files /dev/null and b/public/images/shop-img/hats/brown-brim.png differ diff --git a/public/images/shop-img/hats/brown-cowboy.png b/public/images/shop-img/hats/brown-cowboy.png new file mode 100644 index 0000000..5312e23 Binary files /dev/null and b/public/images/shop-img/hats/brown-cowboy.png differ diff --git a/public/images/shop-img/hats/green-beanie.png b/public/images/shop-img/hats/green-beanie.png new file mode 100644 index 0000000..db7c5c7 Binary files /dev/null and b/public/images/shop-img/hats/green-beanie.png differ diff --git a/public/images/shop-img/hats/grey-brim.png b/public/images/shop-img/hats/grey-brim.png new file mode 100644 index 0000000..f2bd183 Binary files /dev/null and b/public/images/shop-img/hats/grey-brim.png differ diff --git a/public/images/shop-img/hats/palm-tree-cap.png b/public/images/shop-img/hats/palm-tree-cap.png new file mode 100644 index 0000000..62bb3c4 Binary files /dev/null and b/public/images/shop-img/hats/palm-tree-cap.png differ diff --git a/public/images/shop-img/hats/red-beanie.png b/public/images/shop-img/hats/red-beanie.png new file mode 100644 index 0000000..c11ed2c Binary files /dev/null and b/public/images/shop-img/hats/red-beanie.png differ diff --git a/public/images/shop-img/hats/wolf-cap.png b/public/images/shop-img/hats/wolf-cap.png new file mode 100644 index 0000000..769ce10 Binary files /dev/null and b/public/images/shop-img/hats/wolf-cap.png differ diff --git a/public/images/shop-img/jackets/black-shearling.png b/public/images/shop-img/jackets/black-shearling.png new file mode 100644 index 0000000..80ebabc Binary files /dev/null and b/public/images/shop-img/jackets/black-shearling.png differ diff --git a/public/images/shop-img/jackets/blue-jean-jacket.png b/public/images/shop-img/jackets/blue-jean-jacket.png new file mode 100644 index 0000000..5ffe43f Binary files /dev/null and b/public/images/shop-img/jackets/blue-jean-jacket.png differ diff --git a/public/images/shop-img/jackets/brown-shearling.png b/public/images/shop-img/jackets/brown-shearling.png new file mode 100644 index 0000000..bdbbde4 Binary files /dev/null and b/public/images/shop-img/jackets/brown-shearling.png differ diff --git a/public/images/shop-img/jackets/brown-trench.png b/public/images/shop-img/jackets/brown-trench.png new file mode 100644 index 0000000..30c9da2 Binary files /dev/null and b/public/images/shop-img/jackets/brown-trench.png differ diff --git a/public/images/shop-img/jackets/grey-jean-jacket.png b/public/images/shop-img/jackets/grey-jean-jacket.png new file mode 100644 index 0000000..d01af6e Binary files /dev/null and b/public/images/shop-img/jackets/grey-jean-jacket.png differ diff --git a/public/images/shop-img/mens/camo-vest.png b/public/images/shop-img/mens/camo-vest.png new file mode 100644 index 0000000..8507682 Binary files /dev/null and b/public/images/shop-img/mens/camo-vest.png differ diff --git a/public/images/shop-img/mens/floral-shirt.png b/public/images/shop-img/mens/floral-shirt.png new file mode 100644 index 0000000..5709bf1 Binary files /dev/null and b/public/images/shop-img/mens/floral-shirt.png differ diff --git a/public/images/shop-img/mens/long-sleeve.png b/public/images/shop-img/mens/long-sleeve.png new file mode 100644 index 0000000..cddc896 Binary files /dev/null and b/public/images/shop-img/mens/long-sleeve.png differ diff --git a/public/images/shop-img/mens/pink-shirt.png b/public/images/shop-img/mens/pink-shirt.png new file mode 100644 index 0000000..93ab5d4 Binary files /dev/null and b/public/images/shop-img/mens/pink-shirt.png differ diff --git a/public/images/shop-img/mens/polka-dot-shirt.png b/public/images/shop-img/mens/polka-dot-shirt.png new file mode 100644 index 0000000..3bbf8e5 Binary files /dev/null and b/public/images/shop-img/mens/polka-dot-shirt.png differ diff --git a/public/images/shop-img/mens/roll-up-jean-shirt.png b/public/images/shop-img/mens/roll-up-jean-shirt.png new file mode 100644 index 0000000..7192324 Binary files /dev/null and b/public/images/shop-img/mens/roll-up-jean-shirt.png differ diff --git a/public/images/shop-img/sneakers/adidas-nmd.png b/public/images/shop-img/sneakers/adidas-nmd.png new file mode 100644 index 0000000..c33bde2 Binary files /dev/null and b/public/images/shop-img/sneakers/adidas-nmd.png differ diff --git a/public/images/shop-img/sneakers/black-converse.png b/public/images/shop-img/sneakers/black-converse.png new file mode 100644 index 0000000..768b622 Binary files /dev/null and b/public/images/shop-img/sneakers/black-converse.png differ diff --git a/public/images/shop-img/sneakers/nike-brown.png b/public/images/shop-img/sneakers/nike-brown.png new file mode 100644 index 0000000..ba6fd68 Binary files /dev/null and b/public/images/shop-img/sneakers/nike-brown.png differ diff --git a/public/images/shop-img/sneakers/nike-funky.png b/public/images/shop-img/sneakers/nike-funky.png new file mode 100644 index 0000000..fc2603d Binary files /dev/null and b/public/images/shop-img/sneakers/nike-funky.png differ diff --git a/public/images/shop-img/sneakers/nikes-red.png b/public/images/shop-img/sneakers/nikes-red.png new file mode 100644 index 0000000..0663685 Binary files /dev/null and b/public/images/shop-img/sneakers/nikes-red.png differ diff --git a/public/images/shop-img/sneakers/timberlands.png b/public/images/shop-img/sneakers/timberlands.png new file mode 100644 index 0000000..2b240fe Binary files /dev/null and b/public/images/shop-img/sneakers/timberlands.png differ diff --git a/public/images/shop-img/sneakers/white-nike-high-tops.png b/public/images/shop-img/sneakers/white-nike-high-tops.png new file mode 100644 index 0000000..db890f7 Binary files /dev/null and b/public/images/shop-img/sneakers/white-nike-high-tops.png differ diff --git a/public/images/shop-img/sneakers/yeezy.png b/public/images/shop-img/sneakers/yeezy.png new file mode 100644 index 0000000..161d856 Binary files /dev/null and b/public/images/shop-img/sneakers/yeezy.png differ diff --git a/public/images/shop-img/womens/blue-tank.png b/public/images/shop-img/womens/blue-tank.png new file mode 100644 index 0000000..1d257ba Binary files /dev/null and b/public/images/shop-img/womens/blue-tank.png differ diff --git a/public/images/shop-img/womens/floral-blouse.png b/public/images/shop-img/womens/floral-blouse.png new file mode 100644 index 0000000..324397e Binary files /dev/null and b/public/images/shop-img/womens/floral-blouse.png differ diff --git a/public/images/shop-img/womens/floral-skirt.png b/public/images/shop-img/womens/floral-skirt.png new file mode 100644 index 0000000..b9e019b Binary files /dev/null and b/public/images/shop-img/womens/floral-skirt.png differ diff --git a/public/images/shop-img/womens/red-polka-dot-dress.png b/public/images/shop-img/womens/red-polka-dot-dress.png new file mode 100644 index 0000000..0d10dd6 Binary files /dev/null and b/public/images/shop-img/womens/red-polka-dot-dress.png differ diff --git a/public/images/shop-img/womens/striped-sweater.png b/public/images/shop-img/womens/striped-sweater.png new file mode 100644 index 0000000..ec20437 Binary files /dev/null and b/public/images/shop-img/womens/striped-sweater.png differ diff --git a/public/images/shop-img/womens/white-vest.png b/public/images/shop-img/womens/white-vest.png new file mode 100644 index 0000000..d5f0d39 Binary files /dev/null and b/public/images/shop-img/womens/white-vest.png differ diff --git a/public/images/shop-img/womens/yellow-track-suit.png b/public/images/shop-img/womens/yellow-track-suit.png new file mode 100644 index 0000000..aaecee3 Binary files /dev/null and b/public/images/shop-img/womens/yellow-track-suit.png differ diff --git a/public/images/sneakers.png b/public/images/sneakers.png new file mode 100644 index 0000000..d2a3996 Binary files /dev/null and b/public/images/sneakers.png differ diff --git a/public/images/womens.png b/public/images/womens.png new file mode 100644 index 0000000..1a2d2f9 Binary files /dev/null and b/public/images/womens.png differ diff --git a/src/App.css b/src/App.css index c1dbc07..7c56ec5 100644 --- a/src/App.css +++ b/src/App.css @@ -1,3 +1,4 @@ body{ font-family: 'Open Sans Condensed'; + padding: 20px 60px; } \ No newline at end of file diff --git a/src/App.js b/src/App.js index 8a730e8..522ea19 100644 --- a/src/App.js +++ b/src/App.js @@ -1,21 +1,16 @@ import React from 'react'; import HomePage from './pages/homepage/homepage.component'; import { Route,Switch } from 'react-router-dom'; +import ShopPage from './pages/shop/shop.component'; import './App.css'; -const HatsPage = () => ( -
-

HATS PAGE

-
- -) function App() { return (
- +
); diff --git a/src/components/collection-items/collection-item.styles.scss b/src/components/collection-items/collection-item.styles.scss new file mode 100644 index 0000000..85382d8 --- /dev/null +++ b/src/components/collection-items/collection-item.styles.scss @@ -0,0 +1,32 @@ +.collection-item { + width: 22%; + display: flex; + flex-direction: column; + height: 350px; + align-items: center; + + .image { + width: 100%; + height: 95%; + background-size: cover; + background-position: center; + margin-bottom: 5px; + } + + .collection-footer { + width: 100%; + height: 5%; + display: flex; + justify-content: space-between; + font-size: 18px; + + .name { + width: 90%; + margin-bottom: 15px; + } + + .price { + width: 10%; + } + } +} diff --git a/src/components/collection-items/collection-items.component.jsx b/src/components/collection-items/collection-items.component.jsx new file mode 100644 index 0000000..712e82b --- /dev/null +++ b/src/components/collection-items/collection-items.component.jsx @@ -0,0 +1,16 @@ +import React from 'react'; +import './collection-item.styles.scss'; + +const CollectionItem = ({id, name, price, imageUrl}) => ( +
+
+
+ {name} + {price} +
+
+) +export default CollectionItem; \ No newline at end of file diff --git a/src/components/directory/directory.component.jsx b/src/components/directory/directory.component.jsx index 2208b3e..575745b 100644 --- a/src/components/directory/directory.component.jsx +++ b/src/components/directory/directory.component.jsx @@ -7,37 +7,43 @@ class Directory extends React.Component { super(); this.state = { sections : [ - { - title: 'hats', - imageUrl: 'https://i.ibb.co/cvpntL1/hats.png', - id: 1, - linkUrl: 'shop/hats' + { + title: 'hats', + // imageUrl: 'https://i.ibb.co/cvpntL1/hats.png', + imageUrl: 'images/hats.png', // local file in public/images/ + id: 1, + linkUrl: 'shop/hats' + }, { - title: 'jackets', - imageUrl: 'https://i.ibb.co/px2tCc3/jackets.png', - id: 2, - linkUrl: 'shop/jackets' + title: 'jackets', + // imageUrl: 'https://i.ibb.co/px2tCc3/jackets.png', + imageUrl: 'images/jackets.png', // local file in public/images/ + id: 2, + linkUrl: 'shop/jackets' }, { - title: 'sneakers', - imageUrl: 'https://i.ibb.co/0jqHpnp/sneakers.png', - id: 3, - linkUrl: 'shop/sneakers' + title: 'sneakers', + // imageUrl: 'https://i.ibb.co/0jqHpnp/sneakers.png', + imageUrl: 'images/sneakers.png', // local file in public/images/ + id: 3, + linkUrl: 'shop/sneakers' }, { - title: 'womens', - imageUrl: 'https://i.ibb.co/GCCdy8t/womens.png', - size: 'large', - id: 4, - linkUrl: 'shop/womens' + title: 'womens', + // imageUrl: 'https://i.ibb.co/GCCdy8t/womens.png', + imageUrl: 'images/womens.png', // local file in public/images/ + size: 'large', + id: 4, + linkUrl: 'shop/womens' }, { - title: 'mens', - imageUrl: 'https://i.ibb.co/R70vBrQ/men.png', - size: 'large', - id: 5, - linkUrl: 'shop/mens' + title: 'mens', + // imageUrl: 'https://i.ibb.co/R70vBrQ/men.png', + imageUrl: 'images/men.png', // local file in public/images/ + size: 'large', + id: 5, + linkUrl: 'shop/mens' } ] } diff --git a/src/components/preview-collection/collection-preview.styles.scss b/src/components/preview-collection/collection-preview.styles.scss new file mode 100644 index 0000000..89e17a1 --- /dev/null +++ b/src/components/preview-collection/collection-preview.styles.scss @@ -0,0 +1,15 @@ +.collection-preview { + display: flex; + flex-direction: column; + margin-bottom: 30px; + + .title { + font-size: 28px; + margin-bottom: 25px; + } + + .preview { + display: flex; + justify-content: space-between; + } +} diff --git a/src/components/preview-collection/preview-collection-component.jsx b/src/components/preview-collection/preview-collection-component.jsx new file mode 100644 index 0000000..ddd0a0c --- /dev/null +++ b/src/components/preview-collection/preview-collection-component.jsx @@ -0,0 +1,20 @@ +import React from 'react' +import './collection-preview.styles.scss'; + +import CollectionItem from '../collection-items/collection-items.component'; + + +const CollectionPreview = ({title, items}) => ( +
+

{title.toUpperCase()}

+
+ {items + .filter((item,idx) => idx <4) + .map(({id,...restOfProps})=>( + + ))} +
+
+) + +export default CollectionPreview; \ No newline at end of file diff --git a/src/pages/shop/shop.component.jsx b/src/pages/shop/shop.component.jsx new file mode 100644 index 0000000..c1f44de --- /dev/null +++ b/src/pages/shop/shop.component.jsx @@ -0,0 +1,24 @@ +import React from 'react'; +import ShopData from './shop.data'; +import CollectionPreview from '../../components/preview-collection/preview-collection-component'; + +class ShopPage extends React.Component { + constructor(props){ + super(props); + this.state = { + collections:ShopData + } + } + render(){ + const {collections} = this.state; + return( +
+ {collections.map(({id, ...othersProps})=>( + + ))} +
+ + ) + } +} +export default ShopPage; \ No newline at end of file diff --git a/src/pages/shop/shop.data.js b/src/pages/shop/shop.data.js new file mode 100644 index 0000000..96c9bca --- /dev/null +++ b/src/pages/shop/shop.data.js @@ -0,0 +1,283 @@ +const ShopData = [ + { + id: 1, + title: 'Hats', + routeName: 'hats', + items: [ + { + id: 1, + name: 'Brown Brim', + // imageUrl: 'https://i.ibb.co/ZYW3VTp/brown-brim.png', + imageUrl: "/images/shop-img/hats/brown-brim.png", + price: 25 + }, + { + id: 2, + name: 'Blue Beanie', + // imageUrl: 'https://i.ibb.co/ypkgK0X/blue-beanie.png', + imageUrl: "/images/shop-img/hats/blue-beanie.png", + price: 18 + }, + { + id: 3, + name: 'Brown Cowboy', + // imageUrl: 'https://i.ibb.co/QdJwgmp/brown-cowboy.png', + imageUrl: "/images/shop-img/hats/brown-cowboy.png", + price: 35 + }, + { + id: 4, + name: 'Grey Brim', + // imageUrl: 'https://i.ibb.co/RjBLWxB/grey-brim.png', + imageUrl: "/images/shop-img/hats/grey-brim.png", + price: 25 + }, + { + id: 5, + name: 'Green Beanie', + // imageUrl: 'https://i.ibb.co/YTjW3vF/green-beanie.png', + imageUrl: "/images/shop-img/hats/green-beanie.png", + price: 18 + }, + { + id: 6, + name: 'Palm Tree Cap', + // imageUrl: 'https://i.ibb.co/rKBDvJX/palm-tree-cap.png', + imageUrl: "/images/shop-img/hats/palm-tree-cap.png", + price: 14 + }, + { + id: 7, + name: 'Red Beanie', + // imageUrl: 'https://i.ibb.co/bLB646Z/red-beanie.png', + imageUrl: "/images/shop-img/hats/red-beanie.png", + price: 18 + }, + { + id: 8, + name: 'Wolf Cap', + // imageUrl: 'https://i.ibb.co/1f2nWMM/wolf-cap.png', + imageUrl: "/images/shop-img/hats/wolf-cap.png", + price: 14 + }, + { + id: 9, + name: 'Blue Snapback', + // imageUrl: 'https://i.ibb.co/X2VJP2W/blue-snapback.png', + imageUrl: "/images/shop-img/hats/blue-snapback.png", + price: 16 + } + ] + }, + { + id: 2, + title: 'Sneakers', + routeName: 'sneakers', + items: [ + { + id: 10, + name: 'Adidas NMD', + // imageUrl: 'https://i.ibb.co/0s3pdnc/adidas-nmd.png', + imageUrl: "/images/shop-img/sneakers/adidas-nmd.png", + price: 220 + }, + { + id: 11, + name: 'Adidas Yeezy', + // imageUrl: 'https://i.ibb.co/dJbG1cT/yeezy.png', + imageUrl: "/images/shop-img/sneakers/yeezy.png", + price: 280 + }, + { + id: 12, + name: 'Black Converse', + // imageUrl: 'https://i.ibb.co/bPmVXyP/black-converse.png', + imageUrl: "/images/shop-img/sneakers/black-converse.png", + price: 110 + }, + { + id: 13, + name: 'Nike White AirForce', + // imageUrl: 'https://i.ibb.co/1RcFPk0/white-nike-high-tops.png', + imageUrl: "/images/shop-img/sneakers/white-nike-high-tops.png", + price: 160 + }, + { + id: 14, + name: 'Nike Red High Tops', + // imageUrl: 'https://i.ibb.co/QcvzydB/nikes-red.png', + imageUrl: "/images/shop-img/sneakers/nikes-red.png", + price: 160 + }, + { + id: 15, + name: 'Nike Brown High Tops', + // imageUrl: 'https://i.ibb.co/fMTV342/nike-brown.png', + imageUrl: "/images/shop-img/sneakers/nike-brown.png", + price: 160 + }, + { + id: 16, + name: 'Air Jordan Limited', + // imageUrl: 'https://i.ibb.co/w4k6Ws9/nike-funky.png', + imageUrl: "/images/shop-img/sneakers/nike-funky.png", + price: 190 + }, + { + id: 17, + name: 'Timberlands', + // imageUrl: 'https://i.ibb.co/Mhh6wBg/timberlands.png', + imageUrl: "/images/shop-img/sneakers/timberlands.png", + price: 200 + } + ] + }, + { + id: 3, + title: 'Jackets', + routeName: 'jackets', + items: [ + { + id: 18, + name: 'Black Jean Shearling', + // imageUrl: 'https://i.ibb.co/XzcwL5s/black-shearling.png', + imageUrl: "/images/shop-img/jackets/black-shearling.png", + price: 125 + }, + { + id: 19, + name: 'Blue Jean Jacket', + // imageUrl: 'https://i.ibb.co/mJS6vz0/blue-jean-jacket.png', + imageUrl: "/images/shop-img/jackets/blue-jean-jacket.png", + price: 90 + }, + { + id: 20, + name: 'Grey Jean Jacket', + // imageUrl: 'https://i.ibb.co/N71k1ML/grey-jean-jacket.png', + imageUrl: "/images/shop-img/jackets/grey-jean-jacket.png", + price: 90 + }, + { + id: 21, + name: 'Brown Shearling', + // imageUrl: 'https://i.ibb.co/s96FpdP/brown-shearling.png', + imageUrl: "/images/shop-img/jackets/brown-shearling.png", + price: 165 + }, + { + id: 22, + name: 'Tan Trench', + // imageUrl: 'https://i.ibb.co/M6hHc3F/brown-trench.png', + imageUrl: "/images/shop-img/jackets/brown-trench.png", + price: 185 + } + ] + }, + { + id: 4, + title: 'Womens', + routeName: 'womens', + items: [ + { + id: 23, + name: 'Blue Tanktop', + // imageUrl: 'https://i.ibb.co/7CQVJNm/blue-tank.png', + imageUrl: "/images/shop-img/womens/blue-tank.png", + price: 25 + }, + { + id: 24, + name: 'Floral Blouse', + // imageUrl: 'https://i.ibb.co/4W2DGKm/floral-blouse.png', + imageUrl: "/images/shop-img/womens/floral-blouse.png", + price: 20 + }, + { + id: 25, + name: 'Floral Dress', + // imageUrl: 'https://i.ibb.co/KV18Ysr/floral-skirt.png', + imageUrl: "/images/shop-img/womens/floral-skirt.png", + price: 80 + }, + { + id: 26, + name: 'Red Dots Dress', + // imageUrl: 'https://i.ibb.co/N3BN1bh/red-polka-dot-dress.png', + imageUrl: "/images/shop-img/womens/red-polka-dot-dress.png", + price: 80 + }, + { + id: 27, + name: 'Striped Sweater', + // imageUrl: 'https://i.ibb.co/KmSkMbH/striped-sweater.png', + imageUrl: "/images/shop-img/womens/striped-sweater.png", + price: 45 + }, + { + id: 28, + name: 'Yellow Track Suit', + // imageUrl: 'https://i.ibb.co/v1cvwNf/yellow-track-suit.png', + imageUrl: "/images/shop-img/womens/yellow-track-suit.png", + price: 135 + }, + { + id: 29, + name: 'White Blouse', + // imageUrl: 'https://i.ibb.co/qBcrsJg/white-vest.png', + imageUrl: "/images/shop-img/womens/white-vest.png", + price: 20 + } + ] + }, + { + id: 5, + title: 'Mens', + routeName: 'mens', + items: [ + { + id: 30, + name: 'Camo Down Vest', + // imageUrl: 'https://i.ibb.co/xJS0T3Y/camo-vest.png', + imageUrl: "/images/shop-img/mens/camo-vest.png", + price: 325 + }, + { + id: 31, + name: 'Floral T-shirt', + // imageUrl: 'https://i.ibb.co/qMQ75QZ/floral-shirt.png', + imageUrl: "/images/shop-img/mens/floral-shirt.png", + price: 20 + }, + { + id: 32, + name: 'Black & White Longsleeve', + // imageUrl: 'https://i.ibb.co/55z32tw/long-sleeve.png', + imageUrl: "/images/shop-img/mens/long-sleeve.png", + price: 25 + }, + { + id: 33, + name: 'Pink T-shirt', + // imageUrl: 'https://i.ibb.co/RvwnBL8/pink-shirt.png', + imageUrl: "/images/shop-img/mens/pink-shirt.png", + price: 25 + }, + { + id: 34, + name: 'Jean Long Sleeve', + // imageUrl: 'https://i.ibb.co/VpW4x5t/roll-up-jean-shirt.png', + imageUrl: "/images/shop-img/mens/roll-up-jean-shirt.png", + price: 40 + }, + { + id: 35, + name: 'Burgundy T-shirt', + // imageUrl: 'https://i.ibb.co/mh3VM1f/polka-dot-shirt.png', + imageUrl: "/images/shop-img/mens/polka-dot-shirt.png", + price: 25 + } + ] + } + ]; + export default ShopData;