import React from 'react';
import styled from 'styled-components';

export default ({ onClickScroll }) => {

  const Arrow = styled.div`
    bottom: 40px;
    cursor: pointer;
    fill: #000;
    font-size: ${30 / 16}rem;
    left: 50%;
    position: absolute;
    transform: translateX(-50%) rotate(90deg);
  `;

  const Header = styled.h1`
    margin-top: 0;
  `;

  const Subheader = styled.h2`
    margin: 0;
  `;

  const Wrapper = styled.div`
    align-items: center;
    background-color: papayawhip;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
    padding: 20px;
  `;

  return (
    <Wrapper>
      <Header>✌&#xFE0E; ☺&#xFE0E;</Header>
      <Subheader>I'm a Front-End Web Engineer based in New York.</Subheader>
      <Arrow onClick={onClickScroll}>
        ➱&#xFE0E;
      </Arrow>
    </Wrapper>
  );
};

@@ -388,17 +388,17 @@
 styled.h
-2
+3
 %60%0A    ma
@@ -401,16 +401,20 @@
   margin
+-top
 : 0;%0A  %60
@@ -617,25 +617,409 @@
 ng: 20px;%0A  
-%60
+  text-align: center;%0A  %60;%0A%0A  const emailLink =%0A    %3Ca%0A      href=%22mailto:hello@briankuzma.com%22%0A      target=%22_blank%22%3E%0A      email%0A    %3C/a%3E;%0A%0A  const linkedInLink =%0A    %3Ca%0A      href=%22https://www.linkedin.com/in/briankuzma/%22%0A      target=%22_blank%22%3E%0A      LinkedIn%0A    %3C/a%3E;%0A%0A  const gitHubLink =%0A    %3Ca%0A      href=%22https://github.com/bkuzma%22%0A      target=%22_blank%22%3E%0A      GitHub%0A    %3C/a%3E
 ;%0A%0A  return 
@@ -1094,16 +1094,25 @@
 bheader%3E
+%0A        
 I'm a Fr
@@ -1150,16 +1150,23 @@
 ew York.
+%0A      
 %3C/Subhea
@@ -1166,24 +1166,242 @@
 /Subheader%3E%0A
+      %3Cp%3E%0A        I build web applications using technologies like%0A        React, Redux, ES7, Webpack, and more.%0A      %3C/p%3E%0A      %3Cp%3E%0A        Find me on %7BlinkedInLink%7D, %7BgitHubLink%7D,%0A        or %7BemailLink%7D.%0A      %3C/p%3E%0A
       %3CArrow

add some copy and contact links to Landing Tile