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

Jump to bottom

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 1 commit
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.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
165 changes: 87 additions & 78 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,25 +27,78 @@ 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__design">
<header className="jp-jetpack-connect__header">
<h2 className="jp-jetpack-connect__container-subtitle" title="lightning fast optimized images with Jetpack Photon">
{ __( 'Design the perfect website' ) }
</h2>
<p className="jp-jetpack-connect__description">
{ __(
'Bring your ideas to life with elegant and professional designs and code-free ' +
'customization tools.'
) }
</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 WordPress themes" className="dops-section-header__label">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't we make those titles translatable as well?

{ __( 'Professional themes' ) }
</h3>
<div className="jp-jetpack-connect__feature-content">
<p>
{ __( '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 customization tools" className="dops-section-header__label">
{ __( 'Code-free customization' ) }
</h3>
<div className="jp-jetpack-connect__feature-content">
<p>
{ __( '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 performance features" className="dops-section-header__label">
{ __( 'Speed up your site' ) }
</h3>
<div className="jp-jetpack-connect__feature-content">
<p>
{ __( 'Deliver blazing fast images and video and improve site load times.' ) }
</p>
</div>
</div>
</div>
</div>
</Card>

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

<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' ) }
{ __( 'Increase traffic and revenue' ) }
</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.' ) }
{ __( '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" className="jp-jetpack-connect__header-img" /> {/* defining width and height for IE here */}
Expand All @@ -56,141 +109,97 @@ const JetpackConnect = React.createClass( {
<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 Publicize feature" className="dops-section-header__label">
{ __( 'Publicize', { context: 'Header. Noun: Publicize 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="Automated social marketing">
{ __( 'Automated social marketing.' ) }
</h4>
<p>
{ __( 'Use Publicize to automatically share your posts with friends, followers, and the world.' ) }
{ __( '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 Sharing and Like features" className="dops-section-header__label">
{ __( 'Sharing & Like Buttons' ) }
<h3 title="Jetpack's publicize features" className="dops-section-header__label">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we capitalize Publicize?

{ __( 'Automated marketing' ) }
</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.' ) }
{ __( '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 Related Posts feature" className="dops-section-header__label">
{ __( 'Related Posts', { context: 'Header. Noun: Related posts 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="Increase page views">
{ __( 'Increase page views.' ) }
</h4>
<p>
{ __( 'Keep visitors engaged by giving them more to share and read with Related Posts.' ) }
{ __( 'Monetize your site with high-quality ads and take PayPal payments.' ) }
</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__security">

<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="Keep your site safe, 24/7">
{ __( 'Keep your site safe, 24/7' ) }
</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.'
'Automatic defense against hacks, malware, spam, data loss, and downtime.'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should it be "defends" here?

) }
</p>
</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 monitor feature" className="dops-section-header__label">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we capitalize Monitor here?

{ __( 'Monitor', { context: 'Header. Noun: Monitor is a module of Jetpack.' } ) }
</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.'
'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 Monitor features" className="dops-section-header__label">
{ __( 'Monitor', { context: 'Header. Noun: Monitor is a module of Jetpack.' } ) }
<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">
<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.' ) }
{ __(
'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 Manage feature" className="dops-section-header__label">
{ __( 'Manage', { context: 'Header. Noun: Manage is a module of Jetpack.' } ) }
<h3 title="Jetpack's backup feature" className="dops-section-header__label">
{ __( 'Backup and restore' ) }
</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.' ) }
{ __(
'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__feature">
<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>
<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.'
) }
</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>
</Card>
<Card className="jp-jetpack-connect__cta">
<p className="jp-jetpack-connect__description">
{ __(
Expand All @@ -201,7 +210,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 Down