import React from 'react'

import logo from './societyofsocks-white.png'
import background from './hero-background-wood.jpg'
import styles from './style.module.css'

export default function Hero(){
  return (
    <div className={styles.hero}>
      <div style={{backgroundImage: `url(${background})`}}>
        <img className={styles.icon} src={logo}/>
        <div className={styles.content}>
          <h2>Your Socks. Your Style.</h2>
          <p>Are you tired of plain (boring) white socks?  We've got you covered.</p>
          <p>At Society of Socks we strive to give every design a unique personality that is sure to stand out from the crowd.</p>
          <p>So find your style, and wear them with pride.  They're your socks, shouldn't they fit you?</p>
        </div>
      </div>
    </div>
  )
}