/
Footer.jsx
129 lines (123 loc) · 4.04 KB
/
Footer.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import React from 'react';
import { Link } from 'react-router-dom';
import { Input, Image, List } from 'semantic-ui-react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
faFacebookF,
faPinterestP,
faTwitter,
} from '@fortawesome/free-brands-svg-icons';
import LogoImage from '@plone-collective/volto-educal-theme/../theme/themes/educal/assets/images/logo/logo-2.png';
// Let's avoid responsiveness for now
// xxl ration 3:2:2:4
const Footer = () => (
<footer className="footerSuperRoot">
<div className="footerRoot">
<div className="footerMain">
<div className="footerMainLeftSide">
<Image src={LogoImage} />
<div className="footerCompanyDescription">
Great lesson ideas and lesson plans for ESL teachers! Educators can
customize lesson plans to best.
</div>
<div className="footerSocialButtonDiv">
<Link
className="footerSocialButton"
to={{
pathname: '//www.facebook.com/',
}}
target="_blank"
>
<FontAwesomeIcon icon={faFacebookF} />
</Link>
<Link
className="footerSocialButton footerTwitterButton"
to={{
pathname: '//www.twitter.com/',
}}
target="_blank"
>
<FontAwesomeIcon icon={faTwitter} />
</Link>
<Link
className="footerSocialButton footerPinterestButton"
to={{
pathname: '//www.pinterest.com/',
}}
target="_blank"
>
<FontAwesomeIcon icon={faPinterestP} />
</Link>
</div>
</div>
<div className="footerNavLinkColumn">
<p className="footerMainHeading">Company</p>
<List link as="ul">
{/* You can uncomment the code to add login link. */}
{/* <List.Item as="li">
<a href="/login">Login</a>
</List.Item> */}
{/* Customize the links as per your need. */}
<List.Item as="li">
<a href="/">About</a>
</List.Item>
<List.Item as="li">
<a href="/">Courses</a>
</List.Item>
<List.Item as="li">
<a href="/">Events</a>
</List.Item>
<List.Item as="li">
<a href="/">Instructor</a>
</List.Item>
<List.Item as="li">
<a href="/">Career</a>
</List.Item>
<List.Item as="li">
<a href="/">Become a Teacher</a>
</List.Item>
<List.Item as="li">
<a href="/">Contact</a>
</List.Item>
</List>
</div>
<div className="footerNavLinkColumn">
<p className="footerMainHeading">Platform</p>
<List link as="ul">
<List.Item as="li">
<a href="/">Browse Library</a>
</List.Item>
<List.Item as="li">
<a href="/">Library</a>
</List.Item>
<List.Item as="li">
<a href="/">Partners</a>
</List.Item>
<List.Item as="li">
<a href="/">News & Blogs</a>
</List.Item>
<List.Item as="li">
<a href="/">FAQs</a>
</List.Item>
<List.Item as="li">
<a href="/">Tutorials</a>
</List.Item>
</List>
</div>
<div className="footerMainRightSide">
<p className="footerMainHeading">Subscribe</p>
<Input
type="email"
action={{ icon: 'arrow right' }}
placeholder="Your email address"
/>
<p className="footerSmallText">
Get the latest news and updates right at your inbox.
</p>
</div>
</div>
<div className="footerAttribution">Powered by Plone CMS and Volto!</div>
</div>
</footer>
);
export default Footer;