better visual hierarchy for front page

client/src/components/molecules/Asset.module.scss

@@ -35,6 +35,12 @@
     }
 }
 
+.minimal {
+    h1 {
+        margin-bottom: 0;
+    }
+}
+
 .assetList {
     > a {
         color: $brand-grey-dark;

client/src/components/molecules/Asset.tsx

@@ -2,10 +2,19 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 import moment from 'moment'
 import Dotdotdot from 'react-dotdotdot'
+import cx from 'classnames'
 import styles from './Asset.module.scss'
 import CategoryImage from '../atoms/CategoryImage'
 
-const AssetLink = ({ asset, list }: { asset: any; list?: boolean }) => {
+const AssetLink = ({
+    asset,
+    list,
+    minimal
+}: {
+    asset: any
+    list?: boolean
+    minimal?: boolean
+}) => {
     const { metadata } = asset.findServiceByType('Metadata')
     const { base } = metadata
 
@@ -22,17 +31,22 @@ const AssetLink = ({ asset, list }: { asset: any; list?: boolean }) => {
             </Link>
         </article>
     ) : (
-        <article className={styles.asset}>
+        <article
+            className={
+                minimal ? cx(styles.asset, styles.minimal) : styles.asset
+            }
+        >
             <Link to={`/asset/${asset.id}`}>
-                {base.categories && (
+                {base.categories && !minimal && (
                     <CategoryImage category={base.categories[0]} />
                 )}
                 <h1>{base.name}</h1>
 
-                <div className={styles.description}>
-                    <Dotdotdot clamp={3}>{base.description}</Dotdotdot>
-                </div>
-
+                {!minimal && (
+                    <div className={styles.description}>
+                        <Dotdotdot clamp={3}>{base.description}</Dotdotdot>
+                    </div>
+                )}
                 <footer className={styles.assetFooter}>
                     {base.categories && <div>{base.categories[0]}</div>}
                 </footer>

client/src/components/organisms/AssetsLatest.tsx

@@ -62,7 +62,7 @@ export default class AssetsLatest extends PureComponent<{}, AssetsLatestState> {
                     ) : latestAssets && latestAssets.length ? (
                         <div className={styles.latestAssets}>
                             {latestAssets.map((asset: any) => (
-                                <Asset key={asset.id} asset={asset} />
+                                <Asset key={asset.id} asset={asset} minimal />
                             ))}
                         </div>
                     ) : (

client/src/routes/Home.tsx

@@ -143,7 +143,7 @@ export default class Home extends Component<HomeProps, HomeState> {
                     <AssetsLatest />
                 </Content>
 
-                <Content>
+                <Content wide>
                     <h2 className={styles.title}>Explore Categories</h2>
                     <div className={styles.categories}>
                         <Market.Consumer>