first draft for style

Author: michelemazzucco

components/Button/Button.module.scss

@@ -0,0 +1,20 @@
+.buttonLink {
+  display: inline-block;
+  padding: .9rem 1.8rem;
+  border-radius: 3rem;
+  font-size: 1rem;
+  background: rgb(245,86,72);
+  background: linear-gradient(45deg, rgba(245,86,72,1) 0%,rgba(208,40,104,1) 100%);
+  text-decoration: none;
+  text-transform: uppercase;
+  color: #FFF;
+  font-family:'Futura PT W01 Demi', sans-serif;
+  letter-spacing: 1px;
+  box-shadow: 0 3px 30px -5px rgba(0,0,0,.5);
+  transition: .3s ease box-shadow;
+  cursor: pointer;
+}
+
+.buttonLink:hover {
+  box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);
+}

components/Button/index.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import style from './ButtonLink.module.css'
+
+const Button = ({ url, label }) => (
+  <a className={style.buttonLink} href={url}>{label}</a>
+)
+
+export default Button

components/ButtonLink/ButtonLink.module.css

@@ -0,0 +1,10 @@
+import React from 'react'
+//import Logo from './incode-logo.svg'
+
+const Header = () => (
+  <header>
+    <Logo />
+  </header>
+)
+
+export default Header

components/ButtonLink/index.js

@@ -0,0 +1,34 @@
+.hero {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+}
+
+.header {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  position: absolute;
+  text-align: center;
+}
+
+.title {
+  font-size: 4.5rem;
+  font-weight: normal;
+}
+
+.title strong {
+  font-weight: normal;
+  display: inline-block;
+  position: relative;
+}
+
+.title strong:before {
+  content: '';
+  display: block;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.3);
+  width: 100%;
+  bottom: .45rem;
+  position: absolute;
+}

components/Header/incode-logo.svg

@@ -1,13 +1,13 @@
 import React from 'react'
-import style from './Hero.module.scss'
+import style from './Hero.module.css'
 
-import Button from '../Button'
+import ButtonLink from '../ButtonLink'
 
 const Hero = () => (
   <section className={style.hero}>
     <header className={style.header}>
       <h1 className={style.title}>We build <strong>web</strong>, <strong>app</strong>, and <strong>experiences</strong></h1>
-      <Button url="http://www.google.com" label="Contact us" />
+      <ButtonLink url="http://www.google.com" label="Contact us" />
     </header>
   </section>
 )

components/Header/index.js

@@ -0,0 +1,8 @@
+body {
+  background: #1d1e3e;
+  color: #FFF;
+  font-size: 15px;
+  font-family:'Futura PT W01 Book', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}