Spiff up landing page a little

src/App.scss

@@ -36,8 +36,6 @@ a {
   }
 }
 
-
-
 .App {
   min-height: 100vh;
 }

src/components/Calculator.scss

@@ -14,7 +14,3 @@
     }
   }
 }
-
-.index__class-picker {
-  margin: 2em 0;
-}

src/components/ClassPicker.scss

@@ -16,6 +16,10 @@
       opacity: 1;
     }
 
+    &:last-child {
+      margin-right: 0;
+    }
+
     &--active {
       opacity: 1;
     }

src/containers/Home.scss

@@ -0,0 +1,16 @@
+.home {
+  &__class-picker {
+    margin: 2em 0;
+    transform: translateY(0);
+    
+    &--highlight {
+      transition: all .4s ease-out;
+      transform: translateY(35vh);
+    }
+  }
+
+  &__class-picker-title {
+    text-align: center;
+    margin-bottom: 2em;
+  }
+}

src/containers/Home.tsx

@@ -1,3 +1,4 @@
+import './Home.scss'
 import React from 'react'
 import { connect } from 'react-redux'
 import { match } from 'react-router-dom'
@@ -9,6 +10,7 @@ import { AppState } from '../store'
 import { setClass, setPoints } from '../store/calculator/actions'
 import { Points } from '../store/calculator/types'
 import { decodeKnownTalents, encodeKnownTalents } from '../lib/tree'
+import classNames from 'classnames'
 
 interface Props extends RouteComponentProps {
   match: match<{ 
@@ -88,13 +90,21 @@ export class Home extends React.PureComponent<Props> {
       return null
     }
 
+    const classPickerCn = classNames('home__class-picker', { 
+      'home__class-picker--highlight': !selectedClass
+    })
+
     return (
-      <div className="container index">
+      <div className="container home">
-        <ClassPicker 
+        <div className={classPickerCn}>
-          className="index__class-picker"
+          {!selectedClass &&
-          center 
+            <h3 className="home__class-picker-title">Choose your class</h3>
-          selected={selectedClass} 
+          }
-        />
+          <ClassPicker
+            center 
+            selected={selectedClass} 
+          />
+        </div>
   
         {currentClass && 
           <Calculator