webapp

1
import React from 'react';
2
import './Footer.css';
3
import { Button } from './Button';
4
import { Link } from 'react-router-dom';
5

6
function Footer() {
7
  return (
8
    <div className='footer-container'>
9
      <section className='footer-subscription'>
10
        <p className='footer-subscription-heading'>
11
          Join the Adventure newsletter to receive our best vacation deals
12
        </p>
13
        <p className='footer-subscription-text'>
14
          You can unsubscribe at any time.
15
        </p>
16
        <div className='input-areas'>
17
          <form>
18
            <input
19
              className='footer-input'
20
              name='email'
21
              type='email'
22
              placeholder='Your Email'
23
            />
24
            <Button buttonStyle='btn--outline'>Subscribe</Button>
25
          </form>
26
        </div>
27
      </section>
28
      <div class='footer-links'>
29
        <div className='footer-link-wrapper'>
30
          <div class='footer-link-items'>
31
            <h2>About Us</h2>
32
            <Link to='/sign-up'>How it works</Link>
33
            <Link to='/'>Testimonials</Link>
34
            <Link to='/'>Careers</Link>
35
            <Link to='/'>Investors</Link>
36
            <Link to='/'>Terms of Service</Link>
37
          </div>
38
          <div class='footer-link-items'>
39
            <h2>Contact Us</h2>
40
            <Link to='/'>Contact</Link>
41
            <Link to='/'>Support</Link>
42
            <Link to='/'>Destinations</Link>
43
            <Link to='/'>Sponsorships</Link>
44
          </div>
45
        </div>
46
        <div className='footer-link-wrapper'>
47
          <div class='footer-link-items'>
48
            <h2>Videos</h2>
49
            <Link to='/'>Submit Video</Link>
50
            <Link to='/'>Ambassadors</Link>
51
            <Link to='/'>Agency</Link>
52
            <Link to='/'>Influencer</Link>
53
          </div>
54
          <div class='footer-link-items'>
55
            <h2>Social Media</h2>
56
            <Link to='/'>Instagram</Link>
57
            <Link to='/'>Facebook</Link>
58
            <Link to='/'>Youtube</Link>
59
            <Link to='/'>Twitter</Link>
60
          </div>
61
        </div>
62
      </div>
63
      <section class='social-media'>
64
        <div class='social-media-wrap'>
65
          <div class='footer-logo'>
66
            <Link to='/' className='social-logo'>
67
              TRVL
68
              <i class='fab fa-typo3' />
69
            </Link>
70
          </div>
71
          <small class='website-rights'>TRVL © 2020</small>
72
          <div class='social-icons'>
73
            <Link
74
              class='social-icon-link facebook'
75
              to='/'
76
              target='_blank'
77
              aria-label='Facebook'
78
            >
79
              <i class='fab fa-facebook-f' />
80
            </Link>
81
            <Link
82
              class='social-icon-link instagram'
83
              to='/'
84
              target='_blank'
85
              aria-label='Instagram'
86
            >
87
              <i class='fab fa-instagram' />
88
            </Link>
89
            <Link
90
              class='social-icon-link youtube'
91
              to='/'
92
              target='_blank'
93
              aria-label='Youtube'
94
            >
95
              <i class='fab fa-youtube' />
96
            </Link>
97
            <Link
98
              class='social-icon-link twitter'
99
              to='/'
100
              target='_blank'
101
              aria-label='Twitter'
102
            >
103
              <i class='fab fa-twitter' />
104
            </Link>
105
            <Link
106
              class='social-icon-link twitter'
107
              to='/'
108
              target='_blank'
109
              aria-label='LinkedIn'
110
            >
111
              <i class='fab fa-linkedin' />
112
            </Link>
113
          </div>
114
        </div>
115
      </section>
116
    </div>
117
  );
118
}
119

120
export default Footer;
121