webapp

1
import React from 'react';
2
import '../App.css';
3
import { Button } from './Button';
4
import './HeroSection.css';
5

6
function HeroSection() {
7
  return (
8
    <div className='hero-container'>
9
      <video src='/videos/video-1.mp4' autoPlay loop muted />
10
      <h1>ADVENTURE AWAITS</h1>
11
      <p>What are you waiting for?</p>
12
      <div className='hero-btns'>
13
        <Button
14
          className='btns'
15
          buttonStyle='btn--outline'
16
          buttonSize='btn--large'
17
        >
18
          GET STARTED
19
        </Button>
20
        <Button
21
          className='btns'
22
          buttonStyle='btn--primary'
23
          buttonSize='btn--large'
24
          onClick={console.log('hey')}
25
        >
26
          WATCH TRAILER <i className='far fa-play-circle' />
27
        </Button>
28
        <Button className='btns' buttonSize='btn--large'>SIGN UP</Button>
29
      </div>
30
    </div>
31
  );
32
}
33

34
export default HeroSection;
35