Skip to content
This repository has been archived by the owner on Jan 17, 2023. It is now read-only.

Commit

Permalink
Do Not Merge: Update Home Page Content
Browse files Browse the repository at this point in the history
  • Loading branch information
johngruen committed Oct 3, 2018
1 parent 74246d6 commit 91a548b
Show file tree
Hide file tree
Showing 6 changed files with 152 additions and 40 deletions.
4 changes: 3 additions & 1 deletion locales/en-US/server.ftl
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,9 @@ homePageCapturePage = Capture a Page
homePageCapturePageDescription = Use the buttons in the upper right to capture full pages. The Save Visible button will capture the area you can view without scrolling, and Save Full Page will capture everything on the page.
homePageSaveShare = Save and Share
# Note: Screenshots is an abbreviation for Firefox Screenshots, and should not be translated.
homePageSaveShareDescription = When you take a shot, Firefox posts your screenshot to your online Screenshots library and copies the link to your clipboard. We automatically store your screenshot for two weeks, but you can delete shots at any time or change the expiration date to keep them in your library for longer.
homePageShaveShareFavoriteDescription = Take your best shot. Then save it to the online Screenshots library, and Firefox copies the link to your clipboard for easy sharing. Shots in the library automatically expire after two weeks, but you can delete them at any time or choose to keep them longer.
homePageSignInTitle = Your Shots Everywhere
homePageSignInDescription = Sign in to Screenshots with your Firefox Account to access your shots everywhere you use Firefox. An added bonus: you can also save your favorite shots forever.
homePageLegalLink = Legal
homePagePrivacyLink = Privacy
homePageTermsLink = Terms
Expand Down
174 changes: 138 additions & 36 deletions server/src/pages/homepage/view.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,30 +15,53 @@ class Head extends React.Component {
render() {
return (
<reactruntime.HeadTemplate {...this.props}>
<link rel="stylesheet" href={this.props.staticLink("/static/css/home.css")} />
<script src={this.props.staticLink("/static/js/UITour-lib.js")} async></script>
<script src={this.props.staticLink("/static/js/homepage-bundle.js")} async></script>
<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<Localized id="homePageDescription" attrs={{content: true}}>
<meta name="description" content="Intuitive screenshots baked right into the browser. Capture, save and share screenshots as you browse the Web using Firefox." />
<link
rel="stylesheet"
href={this.props.staticLink("/static/css/home.css")}
/>
<script src={this.props.staticLink("/static/js/UITour-lib.js")} async />
<script
src={this.props.staticLink("/static/js/homepage-bundle.js")}
async
/>
<meta
name="viewport"
content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
<Localized id="homePageDescription" attrs={{ content: true }}>
<meta
name="description"
content="Intuitive screenshots baked right into the browser. Capture, save and share screenshots as you browse the Web using Firefox."
/>
</Localized>
<meta property="og:title" content={this.props.title} />
<meta property="og:url" content={this.props.backend} />
<Localized id="homePageDescription" attrs={{content: true}}>
<meta property="og:description" content="Intuitive screenshots baked right into the browser. Capture, save and share screenshots as you browse the Web using Firefox." />
<Localized id="homePageDescription" attrs={{ content: true }}>
<meta
property="og:description"
content="Intuitive screenshots baked right into the browser. Capture, save and share screenshots as you browse the Web using Firefox."
/>
</Localized>
<meta name="twitter:title" content={this.props.title} />
<Localized id="homePageDescription" attrs={{content: true}}>
<meta name="twitter:description" content="Intuitive screenshots baked right into the browser. Capture, save and share screenshots as you browse the Web using Firefox." />
<Localized id="homePageDescription" attrs={{ content: true }}>
<meta
name="twitter:description"
content="Intuitive screenshots baked right into the browser. Capture, save and share screenshots as you browse the Web using Firefox."
/>
</Localized>
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@firefox" />
<meta property="og:image" content={this.props.staticLink("/static/img/og-image.png")} />
<meta name="twitter:image" content={this.generateFullLink("/static/img/twitter-image.png")} />
<meta
property="og:image"
content={this.props.staticLink("/static/img/og-image.png")}
/>
<meta
name="twitter:image"
content={this.generateFullLink("/static/img/twitter-image.png")}
/>
</reactruntime.HeadTemplate>
);
}

}

Head.propTypes = {
Expand All @@ -57,9 +80,13 @@ class Body extends React.Component {
return null;
}
return (
<a href="https://www.mozilla.org/firefox/new/?utm_source=screenshots.firefox.com&utm_medium=referral&utm_campaign=screenshots-acquisition&utm_content=from-home" className="button primary download-firefox" onClick={this.onClickInstallFirefox.bind(this)}>
<a
href="https://www.mozilla.org/firefox/new/?utm_source=screenshots.firefox.com&utm_medium=referral&utm_campaign=screenshots-acquisition&utm_content=from-home"
className="button primary download-firefox"
onClick={this.onClickInstallFirefox.bind(this)}
>
<div className="button-icon">
<div className="button-icon-badge"></div>
<div className="button-icon-badge" />
</div>
<div className="button-copy">
<Localized id="homePageDownloadFirefoxTitle">
Expand All @@ -77,15 +104,22 @@ class Body extends React.Component {
const is57 = this.props.isFirefox && this.props.firefoxVersion >= 57;
return (
<reactruntime.BodyTemplate {...this.props}>
<HomePageHeader isOwner={this.props.showMyShots} isFirefox={this.props.isFirefox}
hasFxa={this.props.hasFxa} staticLink={this.props.staticLink}/>
<HomePageHeader
isOwner={this.props.showMyShots}
isFirefox={this.props.isFirefox}
hasFxa={this.props.hasFxa}
staticLink={this.props.staticLink}
/>
<div className="banner">
<div className="banner-image-back" />
<div className="banner-container">
<div className="banner-content">
<h1>Firefox Screenshots</h1>
<Localized id="gScreenshotsDescription">
<p>Screenshots made simple. Take, save, and share screenshots without leaving Firefox.</p>
<p>
Screenshots made simple. Take, save, and share screenshots
without leaving Firefox.
</p>
</Localized>
{this.renderGetFirefox()}
</div>
Expand All @@ -103,16 +137,27 @@ class Body extends React.Component {
</Localized>
{is57 ? (
<Localized id="homePageGetStartedDescriptionPageAction">
<p>Select the Screenshots icon from the page actions menu in the address bar, and the Screenshots menu will appear on top of your browser window.</p>
<p>
Select the Screenshots icon from the page actions menu in
the address bar, and the Screenshots menu will appear on top
of your browser window.
</p>
</Localized>
) : (
<Localized id="homePageGetStartedDescription">
<p>Find the new Screenshots icon on your toolbar. Select it, and the Screenshots menu will appear on top of your browser window.</p>
</Localized>
)
}
<Localized id="homePageGetStartedDescription">
<p>
Find the new Screenshots icon on your toolbar. Select it,
and the Screenshots menu will appear on top of your browser
window.
</p>
</Localized>
)}
</div>
<div className={classnames("section-image", "align-right", { "page-action": is57 })}></div>
<div
className={classnames("section-image", "align-right", {
"page-action": is57,
})}
/>
</div>
</section>
<section id="section-2">
Expand All @@ -122,45 +167,102 @@ class Body extends React.Component {
<h3>Capture a Region</h3>
</Localized>
<Localized id="homePageCaptureRegionDescription">
<p>Click and drag to select the area you want to capture. Or just hover and click — Screenshots will select the area for you. Like what you see? Select Save to access your screenshot online or the down arrow button to download it to your computer.</p>
<p>
Click and drag to select the area you want to capture. Or just
hover and click — Screenshots will select the area for you.
Like what you see? Select Save to access your screenshot
online or the down arrow button to download it to your
computer.
</p>
</Localized>
</div>
<div className="section-image align-left"></div>
<div className="section-image align-left" />
</div>
</section>
{is57 &&
{is57 && (
<section id="section-3">
<div className="container">
<div className="section-content align-left">
<Localized id="homePageCapturePage">
<h3>Capture a Page</h3>
</Localized>
<Localized id="homePageCapturePageDescription">
<p>Use the buttons in the upper right to capture full pages. The Save Visible button will capture the area you can view without scrolling, and the Save Full Page will capture everything on the page.</p>
<p>
Use the buttons in the upper right to capture full pages.
The Save Visible button will capture the area you can view
without scrolling, and the Save Full Page will capture
everything on the page.
</p>
</Localized>
</div>
<div className="section-image align-right"></div>
<div className="section-image align-right" />
</div>
</section>
}
)}
<section id="section-4">
<div className="container">
<div className={classnames("section-content", { "align-right": is57 }, { "align-left": !is57 })}>
<div
className={classnames(
"section-content",
{ "align-right": is57 },
{ "align-left": !is57 }
)}
>
<Localized id="homePageSaveShare">
<h3>Save and Share</h3>
</Localized>
<Localized id="homePageSaveShareDescription">
<p>When you take a shot, Firefox posts your screenshot to your online Screenshots library and copies the link to your clipboard. We automatically store your screenshot for two weeks, but you can delete shots at any time or change the expiration date to keep them in your library for longer. </p>
<Localized id="homePageShaveShareFavoriteDescription">
<p>
Take your best shot. Then save it to the online Screenshots
library, and Firefox copies the link to your clipboard for
easy sharing. Shots in the library automatically expire after
two weeks, but you can delete them at any time or choose to
keep them longer.
</p>
</Localized>
</div>
<div className={classnames("section-image", { "align-left": is57 }, { "align-right": !is57 })}></div>
<div
className={classnames(
"section-image",
{ "align-left": is57 },
{ "align-right": !is57 }
)}
/>
</div>
</section>
<section id="section-5">
<div className="container">
<div
className={classnames(
"section-content",
{ "align-left": is57 },
{ "align-right": !is57 }
)}
>
<Localized id="homePageSignInTitle">
<h3>Your Shots Everywhere</h3>
</Localized>
<Localized id="homePageSignInDescription">
<p>
Sign in to Screenshots with your Firefox Account to access
your shots everywhere you use Firefox. An added bonus: you can
also save your favorite shots forever.
</p>
</Localized>
</div>
<div
className={classnames(
"section-image",
{ "align-right": is57 },
{ "align-left": !is57 }
)}
/>
</div>
</section>
<Footer {...this.props} />
</reactruntime.BodyTemplate>
);
}

}

Body.propTypes = {
Expand Down
9 changes: 8 additions & 1 deletion static/css/home.scss
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,7 @@ section .container {
}

.section-content h3 {
font-size: 2.5em;
font-size: 2.2em;
font-weight: 400;
margin: 0;
}
Expand Down Expand Up @@ -276,6 +276,13 @@ section .container {
height: 533px;
}

#section-5 .section-image {
background-image: url("../img/landing-screenshots_image_05.svg");
background-position: 100% center;
background-repeat: no-repeat;
height: 533px;
}

/* These align-* layout styles are used for the onboarding tour sections */
.align-left {
order: 1;
Expand Down
2 changes: 1 addition & 1 deletion static/img/landing-screenshots_image_02.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion static/img/landing-screenshots_image_04.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions static/img/landing-screenshots_image_05.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 91a548b

Please sign in to comment.