import React from "react" import { graphql, useStaticQuery } from "gatsby" import styled from "styled-components" import bg from "../images/bg.jpg" import Header from "./header" import Board from "./board" import { trackCustomEvent } from "gatsby-plugin-google-analytics" import cross from "../images/decorations/cross.svg" import tick from "../images/decorations/tick.svg" import circle from "../images/decorations/circle.svg" const StyledHero = styled.section` background-image: url(${bg}); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; height: fit-content; display: flex; justify-content: flex-start; align-items: center; flex-direction: column; .hero { &__container { justify-content: flex-start; position: relative; width: 100%; margin-top: 100px; } &__desc { width: 38%; margin: 50px 0; color: #bdbdbd; text-align: justify; } } .container__hero--secondary { border-left: 1px solid #212121; display: flex; justify-content: center; margin: 5rem 0; } .colored { text-shadow: 0px 0px 10px black; } ` const StyledContainer = styled.div` display: flex; justify-content: center; align-items: flex-start; flex-direction: column; .decoration { position: absolute; &__cross { left: 50%; top: 0; transition: 0.2s; filter: drop-shadow(0px 0px 15px #ff5252); &:hover { transform: rotate(180deg); transition: 0.2s; filter: none; } } &__tick { left: 35%; bottom: 10%; transition: 0.2s; filter: drop-shadow(0px 0px 15px #02d463); &:hover { transform: scale(0.9); transition: 0.2s; filter: none; } } &__circle { left: 85%; top: 30%; transition: 0.2s; filter: drop-shadow(0px 0px 15px #00cde2); &:hover { transform: scale(1.1); transition: 0.2s; filter: none; } } } ` export default function Hero() { const data = useStaticQuery(graphql` query { site { siteMetadata { author role } } } `) const { author, role } = data.site.siteMetadata return ( <StyledHero id="home"> <Header /> <div className="container hero__container"> <div className="container__hero--secondary container--secondary"> <StyledContainer className="container--primary"> <p className="colored" data-sal="slide-up" data-sal-easing="ease"> Hi, I am </p> <h1 data-sal="slide-up" data-sal-delay="100" data-sal-easing="ease"> {author} </h1> <h2 data-sal="slide-up" data-sal-delay="200" data-sal-easing="ease" className="hero__sub" > {role} </h2> <p data-sal="slide-up" data-sal-delay="300" data-sal-easing="ease" className="hero__desc section__desc" > I specialize in designing, building, shipping, and scaling beautiful, usable products with blazing-fast efficiency. </p> <div data-sal="slide-up" data-sal-delay="400" data-sal-easing="ease" > <a href="#contact" className="btn btn--primary" onClick={e => { e.preventDefault() trackCustomEvent({ category: "Get in touch Button", action: "Click", label: "Gatsby Google Analytics Get in touch Button", }) }} > Get in touch </a> </div> <img className="decoration decoration__cross" src={cross} alt="cross" loading="lazy" /> <img className="decoration decoration__tick" src={tick} alt="tick" loading="lazy" /> <img className="decoration decoration__circle" src={circle} alt="circle" loading="lazy" /> </StyledContainer> </div> <Board /> </div> </StyledHero> ) }