New page: marketplace

- subpages: home, favourites, item, category
diff --git a/erpnext/public/less/hub.less b/erpnext/public/less/hub.less
index ef08fde..48d52ca 100644
--- a/erpnext/public/less/hub.less
+++ b/erpnext/public/less/hub.less
@@ -1,18 +1,15 @@
 @import "../../../../frappe/frappe/public/less/variables.less";
 
-body[data-route^="Hub/"] {
-	.hub-icon {
-		width: 40px;
-		height: 40px;
+body[data-route^="marketplace/"] {
+	.layout-side-section {
+		padding-top: 25px;
+		padding-right: 25px;
 	}
 
 	.layout-main-section {
 		border: none;
-	}
-
-	.frappe-list {
-		padding-top: 25px;
 		font-size: @text-medium;
+		padding-top: 25px;
 
 		@media (max-width: @screen-xs) {
 			padding-left: 20px;
@@ -26,17 +23,32 @@
 		border-radius: 4px;
 		overflow: hidden;
 		cursor: pointer;
+
+		&:hover .hub-card-overlay {
+			display: block;
+		}
 	}
 
 	.hub-card-header {
 		padding: 12px 15px;
 		height: 60px;
+		border-bottom: 1px solid @border-color;
 	}
 
 	.hub-card-body {
+		position: relative;
 		height: 200px;
 	}
 
+	.hub-card-overlay {
+		display: none;
+		position: absolute;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.1);
+	}
+
 	.hub-card-image {
 		min-width: 100%;
 		width: 100%;
@@ -73,6 +85,30 @@
 		}
 	}
 
+	.hub-item-image {
+		border: 1px solid @border-color;
+		border-radius: 4px;
+		overflow: hidden;
+		height: 200px;
+		width: 200px;
+		display: flex;
+		align-items: center;
+	}
+
+	.hub-item-seller img {
+		width: 50px;
+		height: 50px;
+		border-radius: 4px;
+		border: 1px solid @border-color;
+	}
+}
+
+body[data-route^="Hub/"] {
+	.hub-icon {
+		width: 40px;
+		height: 40px;
+	}
+
 	.img-wrapper {
 		border: 1px solid #d1d8dd;
 		border-radius: 3px;