Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bring disconnected landing page in line with new site content #8565

Merged
merged 2 commits into from
Jan 29, 2018
Merged

Bring disconnected landing page in line with new site content #8565

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0bd0bd0
Bring disconnected landing page in line with new site content
richardmuscat Jan 19, 2018
480ec8b
Fixed i18n in the Jetpack Connect landing page.
zinigor Jan 26, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
181 changes: 100 additions & 81 deletions _inc/client/components/jetpack-connect/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,170 +27,189 @@ const JetpackConnect = React.createClass( {

<Card className="jp-jetpack-connect__cta">
<p className="jp-jetpack-connect__description">
{ __( 'Please connect to or create a WordPress.com account to start using Jetpack. This will enable powerful security, traffic, and customization services.' ) }
{ __( 'Hassle-free design, marketing, and security for your WordPress site. Connect Jetpack to a WordPress.com account to start building your own success story.' ) }
</p>
<ConnectButton from="landing-page-top">
<p>
<a href={ newAccountUrl } className="jp-jetpack-connect__link">
{ __( 'No account? Create one for free' ) }
{ __( 'No account? Create one for free.' ) }
</a>
</p>
</ConnectButton>
</Card>

<Card className="jp-jetpack-connect__feature jp-jetpack-connect__traffic">

<Card className="jp-jetpack-connect__feature jp-jetpack-connect__design">
<header className="jp-jetpack-connect__header">
<h2 className="jp-jetpack-connect__container-subtitle" title="Drive more traffic to your site with Jetpack">
{ __( 'Drive more traffic to your site' ) }
<h2 className="jp-jetpack-connect__container-subtitle" title={ __( 'WordPress themes and customization tools for designing your site.' ) }>
{ __( 'Design the perfect website' ) }
</h2>
<p className="jp-jetpack-connect__description">
{ __( 'Jetpack has many traffic and engagement tools to help you get more viewers to your site and keep them there.' ) }
{ __(
'Bring your ideas to life with elegant and professional designs and code-free ' +
'customization tools.'
) }
</p>
<div className="jp-jetpack-connect__header-img-container">
<img src={ imagePath + 'long-clouds.svg' } width="1160" height="63" alt="Decoration: Jetpack clouds" className="jp-jetpack-connect__header-img" /> {/* defining width and height for IE here */}
<img src={ imagePath + 'stat-bars.svg' } width="400" alt="Decoration: Jetpack bar graph" className="jp-jetpack-connect__header-img" />
</div>
</header>

<div className="jp-jetpack-connect__interior-container">
<img src={ imagePath + 'feature-photon-med.jpg' }
srcSet={ `${ imagePath }feature-photon-sm.jpg 600w, ${ imagePath }feature-photon-med.jpg 770w, ${ imagePath }feature-photon-lrg.jpg 1200w` }
className="jp-jetpack-connect__feature-image" alt={ __( "Jetpack's photon serves up lightning fast, optimized images" ) } />

<div className="jp-jetpack-connect__feature-list">
<div className="jp-jetpack-connect__feature-list-column">
<h3 title="Jetpack's Publicize feature" className="dops-section-header__label">
{ __( 'Publicize', { context: 'Header. Noun: Publicize is a module of Jetpack' } ) }
<h3 title={ __( "Jetpack's WordPress themes" ) } className="dops-section-header__label">
{ __( 'Professional themes' ) }
</h3>
<div className="jp-jetpack-connect__feature-content">
<h4 className="jp-jetpack-connect__feature-content-title" title="Automated social marketing">
{ __( 'Automated social marketing.' ) }
</h4>
<p>
{ __( 'Use Publicize to automatically share your posts with friends, followers, and the world.' ) }
{ __( 'Find the perfect design for your site from hundreds of available themes.' ) }
</p>
</div>
</div>
<div className="jp-jetpack-connect__feature-list-column">
<h3 title="Jetpack's Sharing and Like features" className="dops-section-header__label">
{ __( 'Sharing & Like Buttons' ) }
<h3 title={ __( "Jetpack's customization tools" ) } className="dops-section-header__label">
{ __( 'Code-free customization' ) }
</h3>
<div className="jp-jetpack-connect__feature-content">
<h4 className="jp-jetpack-connect__feature-content-title" title="Build a community">
{ __( 'Build a community.' ) }
</h4>
<p>
{ __( 'Give visitors the tools to share and subscribe to your content.' ) }
{ __( 'Customize your site with endless widget options, image galleries, and embedded media.' ) }
</p>
</div>
</div>
<div className="jp-jetpack-connect__feature-list-column">
<h3 title="Jetpack's Related Posts feature" className="dops-section-header__label">
{ __( 'Related Posts', { context: 'Header. Noun: Related posts is a module of Jetpack.' } ) }
<h3 title={ __( "Jetpack's performance features" ) } className="dops-section-header__label">
{ __( 'Speed up your site' ) }
</h3>
<div className="jp-jetpack-connect__feature-content">
<h4 className="jp-jetpack-connect__feature-content-title" title="Increase page views">
{ __( 'Increase page views.' ) }
</h4>
<p>
{ __( 'Keep visitors engaged by giving them more to share and read with Related Posts.' ) }
{ __( 'Deliver blazing fast images and video and improve site load times.' ) }
</p>
</div>
</div>
</div>

<h2 className="jp-jetpack-connect__container-subtitle" title="Track your growth">
{ __( 'Track your growth' ) }
</h2>
<p className="jp-jetpack-connect__description">
{ __(
'Jetpack harnesses the power of WordPress.com to show you detailed insights about your visitors, ' +
'what they’re reading, and where they’re coming from.'
) }
</p>

<img src={ imagePath + 'stats-example-med.png' }
srcSet={ `${imagePath}stats-example-sm.png 445w, ${imagePath}stats-example-med.png 770w, ${imagePath}stats-example-lrg.png 1200w` }
className="jp-jetpack-connect__feature-image" alt="Jetpack statistics and traffic insights graph" />
</div>
</Card>
<Card className="jp-jetpack-connect__feature">

<Card className="jp-jetpack-connect__feature jp-jetpack-connect__traffic">

<header className="jp-jetpack-connect__header">
<h2 className="jp-jetpack-connect__container-subtitle" title="Site security and peace of mind with Jetpack">
{ __( 'Site security and peace of mind' ) }
<h2 className="jp-jetpack-connect__container-subtitle" title={ __( 'Drive more traffic to your site with Jetpack' ) }>
{ __( 'Increase traffic and revenue' ) }
</h2>
<p className="jp-jetpack-connect__description">
{ __(
'Jetpack blocks malicious log in attempts, lets you know if your site goes down, ' +
'and can automatically update your plugins, so you don’t have to worry.'
) }
{ __( 'Reach more people and earn money with automated marketing tools.' ) }
</p>
<div className="jp-jetpack-connect__header-img-container">
<img
src={ imagePath + 'long-clouds.svg' }
width="1160" height="63"
alt={ __( 'Decoration: Jetpack clouds', { context: 'Image alternate text.' } ) }
className="jp-jetpack-connect__header-img"
/> {/* defining width and height for IE here */}
<img
src={ imagePath + 'stat-bars.svg' }
width="400"
alt={ __( 'Decoration: Jetpack bar graph', { context: 'Image alternate text.' } ) }
className="jp-jetpack-connect__header-img"
/>
</div>
</header>

<div className="jp-jetpack-connect__interior-container">
<div className="jp-jetpack-connect__feature-list">
<div className="jp-jetpack-connect__feature-list-column">
<h3 title="Jetpack's Protect feature" className="dops-section-header__label">
{ __( 'Protect', { context: 'Header. Noun: Protect is a module of Jetpack.' } ) }
<h3 title={ __( "Jetpack's site stats feature" ) } className="dops-section-header__label">
{ __( 'Track your growth' ) }
</h3>
<div className="jp-jetpack-connect__feature-content">
<h4 className="jp-jetpack-connect__feature-content-title" title="Block site attacks">
{ __( 'Block site attacks.' ) }
</h4>
<p>
{ __(
'Gain peace of mind with Protect, the tool that has blocked billions of ' +
'login attacks across millions of sites.'
) }
{ __( 'Keep an eye on your success with simple, concise, and mobile-friendly stats.' ) }
</p>
</div>
</div>
<div className="jp-jetpack-connect__feature-list-column">
<h3 title="Jetpack's Monitor features" className="dops-section-header__label">
{ __( 'Monitor', { context: 'Header. Noun: Monitor is a module of Jetpack.' } ) }
<h3 title={ __( "Jetpack's publicize features" ) } className="dops-section-header__label">
{ __( 'Automated marketing' ) }
</h3>
<div className="jp-jetpack-connect__feature-content">
<h4 className="jp-jetpack-connect__feature-content-title" title="Live site monitoring">
{ __( 'Live site monitoring.' ) }
</h4>
<p>
{ __( 'Stress less. Monitor will send you real-time alerts if your site ever goes down.' ) }
{ __( 'Schedule social media posts in advance, show related content, and give better search results.' ) }
</p>
</div>
</div>
<div className="jp-jetpack-connect__feature-list-column">
<h3 title="Jetpack's Manage feature" className="dops-section-header__label">
{ __( 'Manage', { context: 'Header. Noun: Manage is a module of Jetpack.' } ) }
<h3 title={ __( "Jetpack's ads and PayPal features" ) } className="dops-section-header__label">
{ __( 'Generate revenue' ) }
</h3>
<div className="jp-jetpack-connect__feature-content">
<h4 className="jp-jetpack-connect__feature-content-title" title="Automatic site updates">
{ __( 'Automatic site updates.' ) }
</h4>
<p>
{ __( 'Never fall behind on a security release or waste time updating multiple sites.' ) }
{ __( 'Monetize your site with high-quality ads and take PayPal payments.' ) }
</p>
</div>
</div>
</div>

</div>
</Card>
<Card className="jp-jetpack-connect__feature">

<Card className="jp-jetpack-connect__feature jp-jetpack-connect__security">

<header className="jp-jetpack-connect__header">
<h2 className="jp-jetpack-connect__container-subtitle" title="lightning fast optimized images with Jetpack Photon">
{ __( 'Lightning fast, optimized images' ) }
<h2 className="jp-jetpack-connect__container-subtitle" title={ __( 'Keep your site safe, 24/7' ) }>
{ __( 'Keep your site safe, 24/7' ) }
</h2>
<p className="jp-jetpack-connect__description">
{ __(
'Jetpack utilizes the state-of-the-art WordPress.com content delivery network to load your ' +
'gorgeous imagery super fast. Optimized for any device, and its completely free.'
'Automatic defense against hacks, malware, spam, data loss, and downtime.'
) }
</p>
</header>

<div className="jp-jetpack-connect__interior-container">
<img src={ imagePath + 'feature-photon-med.jpg' }
srcSet={ `${imagePath}feature-photon-sm.jpg 600w, ${imagePath}feature-photon-med.jpg 770w, ${imagePath}feature-photon-lrg.jpg 1200w` }
className="jp-jetpack-connect__feature-image" alt="Jetpacks photon serves up lightning fast, optimized images" />
<div className="jp-jetpack-connect__feature-list">
<div className="jp-jetpack-connect__feature-list-column">
<h3 title={ __( "Jetpack's monitor feature" ) } className="dops-section-header__label">
{ __( 'Monitor', { context: 'Header. Noun: Monitor is a module of Jetpack.' } ) }
</h3>
<div className="jp-jetpack-connect__feature-content">
<p>
{ __(
'Be alerted about any unexpected downtime the moment it happens.'
) }
</p>
</div>
</div>
<div className="jp-jetpack-connect__feature-list-column">
<h3 title={ __( "Jetpack's Protect features" ) } className="dops-section-header__label">
{ __( 'Protect', { context: 'Header. Noun: Protect is a module of Jetpack.' } ) }
</h3>
<div className="jp-jetpack-connect__feature-content">
<p>
{ __(
'Guard your site against brute force login attacks, spam, and harmful' +
'malware injections.'
) }
</p>
</div>
</div>
<div className="jp-jetpack-connect__feature-list-column">
<h3 title="Jetpack's backup feature" className="dops-section-header__label">
{ __( 'Backup and restore' ) }
</h3>
<div className="jp-jetpack-connect__feature-content">
<p>
{ __(
'Automatic, real-time backups mean your entire site is always ready ' +
'to be restored.'
) }
</p>
</div>
</div>
</div>
</div>
</Card>

<Card className="jp-jetpack-connect__cta">
<p className="jp-jetpack-connect__description">
{ __(
Expand All @@ -201,7 +220,7 @@ const JetpackConnect = React.createClass( {
<ConnectButton from="landing-page-bottom">
<p>
<a href={ newAccountUrl } className="jp-jetpack-connect__link">
{ __( 'No account? Create one for free' ) }
{ __( 'No account? Create one for free.' ) }
</a>
</p>
</ConnectButton>
Expand All @@ -215,6 +234,6 @@ export default connect(
state => {
return {
connectUrl: getConnectUrl( state )
}
};
}
)( JetpackConnect );