#25 Add a 'Featured DApps' Component to be displayed at the top of th… (#28)

* #25 Add a 'Featured DApps' Component to be displayed at the top of the Home Screen

* Update changes

* Update headlines

src/common/assets/images/fallback.svg

@@ -0,0 +1,3 @@
+<svg width="335" height="160" viewBox="0 0 335 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="335" height="160" rx="12" fill="#4360DF"/>
+</svg>

src/common/components/FeatureDapps/FeatureDapps.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import ReactImageFallback from 'react-image-fallback'
+import styles from './FeatureDapps.module.scss'
+import fallbackBanner from '../../assets/images/fallback.svg'
+import icon from '../../assets/images/icon.svg'
+
+const FeatureDapps = props => {
+  return (
+    <>
+      <div className={styles.grid}>
+        {props.featured.map((dapp, index) => (
+          <div className={styles.dapp} key={index}>
+            <ReactImageFallback
+              src={dapp.banner}
+              className={styles.banner}
+              alt={`${dapp.name} banner`}
+              fallbackImage={fallbackBanner}
+            />
+            <div className={styles.dapp_details}>
+              <ReactImageFallback
+                className={styles.dapp_details__image}
+                src={dapp.icon}
+                alt={`${dapp.name} icon`}
+                fallbackImage={icon}
+              />
+              <div>
+                <p className={styles.dapp_details__header}>{dapp.name}</p>
+                <span className={styles.dapp_details__description}>
+                  {dapp.description}
+                </span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  )
+}
+
+export default FeatureDapps

src/common/components/FeatureDapps/FeatureDapps.module.scss

@@ -0,0 +1,66 @@
+@import '../../../common/styles/variables';
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: unset;
+  margin: 0 calculateRem(10) calculateRem(30) calculateRem(10);
+  overflow-x: scroll;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+
+  @media (min-width: $desktop) {
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: unset;
+    overflow-x: hidden;
+  }
+}
+
+.dapp {
+  font-family: $font;
+  background: $background;
+  display: flex;
+  flex-direction: column;
+  margin: 0 calculateRem(20) calculateRem(20) calculateRem(20);
+}
+
+.banner {
+  max-width: calculateRem(400);
+  max-height: calculateRem(400);
+  width: 70vw;
+  margin-top: calculateRem(30);
+  margin-right: calculateRem(16);
+  border-radius: 1%;
+}
+
+.dapp_details {
+  display: flex;
+  flex-direction: row;
+}
+
+.dapp_details__image {
+  max-width: calculateRem(40);
+  max-height: calculateRem(40);
+  margin-top: calculateRem(10);
+  margin-right: calculateRem(16);
+  border-radius: 50%;
+}
+
+.dapp_details__header {
+  color: $headline-color;
+  font-size: calculateRem(15);
+  line-height: calculateRem(22);
+  margin-bottom: calculateRem(2);
+  margin-top: calculateRem(12);
+  font-weight: 500;
+}
+
+.dapp_details__description {
+  color: $text-color;
+  font-size: calculateRem(13);
+  line-height: calculateRem(18);
+  margin-bottom: calculateRem(2);
+  margin-top: 0;
+  max-height: calculateRem(40);
+  overflow-y: hidden;
+}

src/common/components/FeatureDapps/index.js

@@ -0,0 +1,3 @@
+import FeatureDapps from './FeatureDapps'
+
+export default FeatureDapps

src/common/data/featured.js

@@ -0,0 +1,29 @@
+import CryptoKittiesBanner from '../assets/images/featured/crytokittes_banner.png'
+import CryptoKittiesLogo from '../assets/images/featured/cryptokitties_logo.png'
+import AirswapBanner from '../assets/images/featured/airswap_banner.png'
+import AirswapLogo from '../assets/images/featured/airswap_logo.png'
+import KyberBanner from '../assets/images/featured/kyber_banner.png'
+import KyberLogo from '../assets/images/featured/kyber_logo.png'
+
+const featuredDapps = [
+  {
+    name: 'CryptoKittes',
+    description: 'Get purring with two new crypto influencer Kitties',
+    banner: CryptoKittiesBanner,
+    icon: CryptoKittiesLogo,
+  },
+  {
+    name: 'Airswap',
+    description: 'Get purring with two new crypto influencer Kitties',
+    banner: AirswapBanner,
+    icon: AirswapLogo,
+  },
+  {
+    name: 'Kyber',
+    description: 'Get purring with two new crypto influencer Kitties',
+    banner: KyberBanner,
+    icon: KyberLogo,
+  },
+]
+
+export default featuredDapps

src/modules/Categories/Categories.jsx

@@ -12,7 +12,7 @@ const Categories = props => {
   return (
     <>
       <div className={styles.header}>
-        <h2 className={styles.headline}>Discover DApps</h2>
+        <h2 className={styles.headline}>Categories</h2>
         <ViewAll size="large" />
       </div>
       <div className={styles.categories}>

src/modules/Home/Home.jsx

@@ -1,9 +1,11 @@
 import React from 'react'
 import RecentlyAdded from '../RecentlyAdded'
-import HighestRanked from '../HighestRanked'
 import Categories from '../Categories'
+import FeaturedDapps from '../../common/components/FeatureDapps'
 import Footer from '../Footer'
 import LoadingHome from '../LoadingHome'
+import featured from '../../common/data/featured'
+import styles from './Home.module.scss'
 
 class Home extends React.Component {
   constructor(props) {
@@ -29,8 +31,11 @@ class Home extends React.Component {
       <>
         {loaded && (
           <>
+            <div className={styles.header}>
+              <h2 className={styles.headline}>Discover</h2>
+            </div>
+            <FeaturedDapps featured={featured} />
             <Categories />
-            <HighestRanked />
             <RecentlyAdded />
             <Footer />
           </>

src/modules/Home/Home.module.scss

@@ -0,0 +1,11 @@
+@import '../../common/styles/variables';
+
+.header {
+  margin: calculateRem(15);
+}
+
+.headline {
+  font-family: $font;
+  font-size: calculateRem(17);
+  margin: 0;
+}