Add features

Author: nchan0154

src/components/public/feature/feature.scss

@@ -1,37 +1,36 @@
 .feature {
-  margin: 1.5rem auto;
+  margin: 2.5rem auto;
   width: 15rem;
   text-align: center;
-  letter-spacing: 1px;
 }
 
 .iconWrapper {
-  margin: 0 auto;
-  width: 10rem;
-  height: 10rem;
+  margin: 0 auto 1rem;
+  width: 1.75rem;
+  height: 1.75rem;
 }
 
-@media (min-width: 25em) {
-
-  .feature {
-    lost-column: 1/2 2 2rem;
-  }
-
-} 
+.text {
+  margin: 0;
+}
 
-@media (min-width: 40em) {
+@media (min-width: 25em) {
 
   .feature {
-    lost-column: 1/3 3 2rem;
+    lost-column: 1/2 2 4rem flex;
   }
 
 }
 
-@media (min-width: 75em) {
+@media (min-width: 48em) {
 
   .feature {
-    lost-column: 1/6 6 3rem;
+    display: flex;
     text-align: left;
   }
 
-}
+  .iconWrapper {
+    flex: 0 0 1.75rem;
+    margin: 0 1rem 0 0;
+  }
+}

src/components/public/feature/index.js

@@ -8,7 +8,10 @@ const Feature = props => (
     <div className={styles.iconWrapper}>
       {props.icon}
     </div>
-    <p className={styles.text}>{props.text}</p>
+    <div className={styles.textWrapper}>
+    <h3 className={styles.text}>{props.text}</h3>
+    <p className={styles.description}>{props.description}</p>
+    </div>
   </li>
 );
 

src/pages/public/home/features.js

@@ -1,30 +1,29 @@
 import React from 'react';
 
-import IconCapture from './ic_capture.svg';
-import IconPermissions from './ic_permissions.svg';
-import IconScaling from './ic_scaling.svg';
-import IconMethods from './ic_methods.svg';
-import IconFocus from './ic_focus.svg';
-import IconTouch from './ic_touch.svg';
+import IconSimple from './ic_simple.svg';
+import IconTested from './ic_tested.svg';
+import IconDualCam from './ic_dual_cam.svg';
+import IconVR from './ic_vr_addons.svg';
 
 export default [
   {
-    icon: <IconCapture />,
-    text: 'Seamless image and video capture',
-  }, {
-    icon: <IconPermissions />,
-    text: 'Auto permission handling',
-  }, {
-    icon: <IconScaling />,
-    text: 'Auto preview scaling',
-  }, {
-    icon: <IconMethods />,
-    text: 'Multiple capture methods',
-  }, {
-    icon: <IconFocus />,
-    text: 'Built-in continuous focus',
-  }, {
-    icon: <IconTouch />,
-    text: 'Built-in tap to focus',
+    icon: <IconSimple />,
+    text: 'Easy to implement',
+    description: 'Some text goes here. Some text goes here. Some text goes here.'
+  },
+  {
+    icon: <IconTested />,
+    text: 'Extensively Tested',
+    description: 'Some text goes here.'
+  },
+  {
+    icon: <IconDualCam />,
+    text: 'All Camera Features',
+    description: 'Some text goes here.'
+  },
+  {
+    icon: <IconVR />,
+    text: 'Addons Support',
+    description: 'Some text goes here.'
   },
 ];

src/pages/public/home/features.scss

@@ -0,0 +1,24 @@
+.heading {
+	flex: 1 1 100%;
+}
+
+.list {
+	flex: 1 1 100%;
+}
+
+.heading {
+	margin-bottom: 3rem;
+}
+
+
+@media (min-width: 62em) {
+	.heading {
+		flex: 1 1 33%;
+		padding-right: 3rem;
+		margin-bottom: 0;
+	}
+
+	.list {
+		flex: 1 1 66%;
+	}
+}

static/ic_dual_cam.svg renamed to src/pages/public/home/ic_dual_cam.svg

@@ -14,6 +14,7 @@ import features from './features';
 import sponsors from './sponsors';
 
 import styles from './home.scss';
+import featureStyles from './features.scss';
 import intro from './intro.scss';
 
 function scrollDown () {
@@ -41,16 +42,22 @@ const Home = () => (
     </section>
     <section id="features" className={styles.section}>
       <div className="container">
-        <h2 className={styles.heading}>Features</h2>
-        <ul className={`${styles.list} ${styles.flexWrapper}`}>
-          {features.map(feature => (
-            <Feature
-              key={feature.text}
-              text={feature.text}
-              icon={feature.icon}
-            />
-          ))}
-        </ul>
+        <div className={featureStyles.main}>
+          <h2 className='heading--small'>Features</h2>
+          <div className={styles.flexWrapper}>
+            <p className={`heading--large ${featureStyles.heading}`}>High-level, simple, and extremely performant</p>
+            <ul className={`${styles.list} ${styles.flexWrapper} ${featureStyles.list}`}>
+              {features.map(feature => (
+                <Feature
+                  key={feature.text}
+                  text={feature.text}
+                  description={feature.description}
+                  icon={feature.icon}
+                />
+              ))}
+            </ul>
+          </div>
+        </div>
       </div>
     </section>
     <section className={styles.section}>

static/ic_simple.svg renamed to src/pages/public/home/ic_simple.svg

@@ -51,6 +51,7 @@ a {
 }
 
 .heading--large {
+  color: $dark-grey;
   font-size: 2rem;
   font-weight: 100;
   line-height: 1.2;
@@ -59,3 +60,10 @@ a {
     font-size: 3rem;
   }
 }
+
+.heading--small {
+  font-size: 1rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05rem;
+}

static/ic_tested.svg renamed to src/pages/public/home/ic_tested.svg

@@ -3,3 +3,4 @@ $light-grey: #CFD8DC;
 $mid-grey: #77829b;
 $dark-grey: #3E445B;
 $primary: #6b60e9;
+