forked from mozilla/testpilot
-
Notifications
You must be signed in to change notification settings - Fork 0
/
LandingPage.js
99 lines (87 loc) · 4.01 KB
/
LandingPage.js
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
import React from 'react';
import { connect } from 'react-redux';
import Footer from '../components/Footer';
import ExperimentRowCard from '../components/ExperimentRowCard';
import MainInstallButton from '../components/MainInstallButton';
import { getExperiments } from '../reducers/experiments';
export default connect(
state => ({
experiments: getExperiments(state.experiments),
isFirefox: state.browser.isFirefox,
hasAddon: state.addon.hasAddon,
installed: state.addon.installed
})
)((props) => <LandingPage {...props} />);
class LandingPage extends React.Component {
render() {
const { dispatch, experiments, hasAddon, isFirefox } = this.props;
return (
<section data-hook="landing-page">
<header id="main-header" className="responsive-content-wrapper">
<h1>
<a href="/" className="wordmark" data-l10n-id="siteName">Firefox Test Pilot</a>
</h1>
</header>
<div className="split-banner responsive-content-wrapper">
<div className="copter-wrapper fly-up">
<div className="copter"></div>
</div>
<div className="intro-text">
<h2 className="banner">
<span data-l10n-id="landingIntroLead" className="block lead-in">Go beyond . . . </span>
<span data-l10n-id="landingIntroOne" className="block">Test new features.</span>
<span data-l10n-id="landingIntroTwo" className="block">Give your feedback.</span>
<span data-l10n-id="landingIntroThree" className="block">Help build Firefox.</span>
</h2>
</div>
</div>
<div className="centered-banner responsive-content-wrapper">
<MainInstallButton dispatch={dispatch} hasAddon={hasAddon} isFirefox={isFirefox}
eventCategory="HomePage Interactions" />
</div>
<div className="transparent-container">
<div className="responsive-content-wrapper delayed-fade-in">
<h2 className="card-list-header" data-l10n-id="landingExperimentsTitle">Try out the latest experimental features</h2>
<div data-hook="experiment-list">
<div className="card-list experiments">
{ experiments.map((experiment, key) =>
<ExperimentRowCard key={key} dispatch={dispatch}
experiment={experiment} hasAddon={hasAddon}
eventCategory="HomePage Interactions" />) }
</div>
</div>
</div>
</div>
<div className="responsive-content-wrapper delayed-fade-in">
<h2 className="card-list-header" data-l10n-id="landingCardListTitle">Get started in 3 easy steps</h2>
<div id="how-to" className="card-list">
<div className="card">
<div className="card-icon add-on-icon large"></div>
<div className="card-copy large" data-l10n-id="landingCardOne">Get the Test Pilot add-on</div>
</div>
<div className="card">
<div className="card-icon test-pilot-icon large"></div>
<div className="card-copy large" data-l10n-id="landingCardTwo">Enable experimental features</div>
</div>
<div className="card">
<div className="card-icon chat-icon large"></div>
<div className="card-copy large" data-l10n-id="landingCardThree">Tell us what you think</div>
</div>
</div>
<div className="centered-banner responsive-content-wrapper">
<MainInstallButton dispatch={dispatch} hasAddon={hasAddon} isFirefox={isFirefox}
eventCategory="HomePage Interactions" />
</div>
</div>
<footer id="main-footer" className="responsive-content-wrapper">
<Footer />
</footer>
</section>
);
}
}
LandingPage.propTypes = {
hasAddon: React.PropTypes.bool,
isFirefox: React.PropTypes.bool,
experiments: React.PropTypes.array
};