Skip to content
This repository was archived by the owner on Apr 26, 2024. It is now read-only.

Homepage text removal #677

Merged
benhalverson merged 6 commits into from
May 6, 2020
Merged

Homepage text removal #677

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0a208a7
refactor(homepage): Removed lorem text and company logos
benhalverson May 4, 2020
6b68e44
style(homepage): Removed unused styles
benhalverson May 4, 2020
cfd7c1b
refactor(homepage): Removed announcement banner
benhalverson May 4, 2020
5de3458
refactor(header): Updated docs and download links
benhalverson May 4, 2020
4412c8a
Merge branch 'staging' of github.com:nodejs/nodejs.dev into homepage-…
benhalverson May 6, 2020
9ead6dc
refactor(homepage): Bringing back the logos to the homepage
benhalverson May 6, 2020
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
4 changes: 2 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 5 additions & 0 deletions src/components/Header/Header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.activeStyleTab {
font-weight: 'var(--font-weight-semibold)';
color: 'var(--color-text-accent)';
border-bottom: 'var(--space-04) inset var(--color-text-accent)';
}
34 changes: 9 additions & 25 deletions src/components/Header/__tests__/__snapshots__/header.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,7 @@ exports[`Tests for Header component renders correctly 1`] = `
className="nav__tabs"
>
<a
activeStyle={
Object {
"borderBottom": "var(--space-04) inset var(--color-text-accent)",
"color": "var(--color-text-accent)",
"fontWeight": "var(--font-weight-semibold)",
}
}
className="activeStyleTab"
href="/learn"
partiallyActive={true}
>
Expand All @@ -46,15 +40,10 @@ exports[`Tests for Header component renders correctly 1`] = `
className="nav__tabs"
>
<a
activeStyle={
Object {
"borderBottom": "var(--space-04) inset var(--color-text-accent)",
"color": "var(--color-text-accent)",
"fontWeight": "var(--font-weight-semibold)",
}
}
href="/docs"
partiallyActive={true}
className="activeStyleTab"
href="https://nodejs.org/en/docs/"
rel="noopener noreferrer"
target="_blank"
>
Documentation
</a>
Expand All @@ -63,15 +52,10 @@ exports[`Tests for Header component renders correctly 1`] = `
className="nav__tabs"
>
<a
activeStyle={
Object {
"borderBottom": "var(--space-04) inset var(--color-text-accent)",
"color": "var(--color-text-accent)",
"fontWeight": "var(--font-weight-semibold)",
}
}
href="/download"
partiallyActive={true}
className="activeStyleTab"
href="https://nodejs.org/en/download/"
rel="noopener noreferrer"
target="_blank"
>
Download
</a>
Expand Down
26 changes: 15 additions & 11 deletions src/components/Header/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,6 @@ import logoLight from '../../images/logos/nodejs-logo-light-mode.svg';
import logoDark from '../../images/logos/nodejs-logo-dark-mode.svg';
import defaultDarkModeController from '../../util/darkModeController';

const activeStyleTab = {
fontWeight: 'var(--font-weight-semibold)',
color: 'var(--color-text-accent)',
borderBottom: 'var(--space-04) inset var(--color-text-accent)',
};

interface Props {
darkModeController?: typeof defaultDarkModeController;
}
Expand All @@ -35,19 +29,29 @@ const Header = ({

<ul className="nav__tabs__container">
<li className="nav__tabs">
<Link to="/learn" activeStyle={activeStyleTab} partiallyActive>
<Link to="/learn" className="activeStyleTab" partiallyActive>
Learn
</Link>
</li>
<li className="nav__tabs">
<Link to="/docs" activeStyle={activeStyleTab} partiallyActive>
<a
className="activeStyleTab"
target="_blank"
href="https://nodejs.org/en/docs/"
rel="noopener noreferrer"
>
Documentation
</Link>
</a>
</li>
<li className="nav__tabs">
<Link to="/download" activeStyle={activeStyleTab} partiallyActive>
<a
href="https://nodejs.org/en/download/"
className="activeStyleTab"
target="_blank"
rel="noopener noreferrer"
>
Download
</Link>
</a>
</li>
</ul>

Expand Down
76 changes: 4 additions & 72 deletions src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,41 +6,16 @@ import '../util/konami';

import '../styles/index.scss';

import featureImg from '../images/placeholder-img.png';

import leafsIllustrationFront from '../images/illustrations/leafs-front.svg';
import leafsIllustrationMiddle from '../images/illustrations/leafs-middle.svg';
import leafsIllustrationBack from '../images/illustrations/leafs-back.svg';
import dotsIllustration from '../images/illustrations/dots.svg';
import logoImg1 from '../images/logos/ibm-logo.svg';
import logoImg2 from '../images/logos/linkedin-logo.svg';
import logoImg3 from '../images/logos/microsoft-logo.svg';
import logoImg4 from '../images/logos/netflix-logo.svg';
import logoImg5 from '../images/logos/paypal-logo.svg';

import GetStartedIllustration1 from '../images/illustrations/beginners-guide-illustration.svg';
import GetStartedIllustration2 from '../images/illustrations/do-more-illustration.svg';

import pentagonIllustration1 from '../images/illustrations/pentagon-illustration1.svg';
import pentagonIllustration2 from '../images/illustrations/pentagon-illustration2.svg';
import leafsIllustrationFront from '../images/illustrations/leafs-front.svg';
import leafsIllustrationMiddle from '../images/illustrations/leafs-middle.svg';
import leafsIllustrationBack from '../images/illustrations/leafs-back.svg';
import dotsIllustration from '../images/illustrations/dots.svg';
import Banner from '../components/Banner';

const nodeFeature1 =
'Lorem ipsum dolor amet pug vape +1 poke pour-over kitsch tacos meh. ';
const nodeFeature2 =
'Lorem ipsum dolor amet pug vape +1 poke pour-over kitsch tacos meh. ';
const nodeFeature3 =
'Lorem ipsum dolor amet pug vape +1 poke pour-over kitsch tacos meh. ';

const NodeFeature = ({ img, featureText }: Props): JSX.Element => {
return (
<div className="node-features__feature">
<img src={img} alt="node feature" />
<p className="t-caption">{featureText}</p>
</div>
);
};

export default function Index(): JSX.Element {
const title = 'Run JavaScript Everywhere.';
const subTitle =
Expand All @@ -49,7 +24,6 @@ export default function Index(): JSX.Element {

return (
<Layout title={title} description={description}>
<Banner />
<div className="home-page">
<Hero title={title} subTitle={subTitle} />

Expand All @@ -61,12 +35,6 @@ export default function Index(): JSX.Element {
<img className="dots" src={dotsIllustration} alt="" />
</section>

<section className="node-features">
<NodeFeature img={featureImg} featureText={nodeFeature1} />
<NodeFeature img={featureImg} featureText={nodeFeature2} />
<NodeFeature img={featureImg} featureText={nodeFeature3} />
</section>

<section className="trusted-by">
<h4 className="t-headline">
Trusted by development teams around the world
Expand All @@ -81,46 +49,10 @@ export default function Index(): JSX.Element {
</div>
</section>

<section className="get-started-callouts">
<Link to="/learn" className="get-started-callout">
<img src={GetStartedIllustration1} alt="" />
<h5 className="t-headline">A beginner’s guide</h5>
<p>
Lorem ipsum dolor amet pug vape +1 poke pour-over kitsch tacos
meh.
</p>
</Link>

<Link to="/docs" className="get-started-callout">
<img src={GetStartedIllustration2} alt="" />
<h5 className="t-headline">Do even more with Node</h5>
<p>
Lorem ipsum dolor amet pug vape +1 poke pour-over kitsch tacos
meh.
</p>
</Link>
</section>

<Link to="/learn" className="btn-primary">
Get Started
</Link>
</div>
<img
className="pentagon-illustration-big1"
src={pentagonIllustration1}
alt=""
/>
<img
className="pentagon-illustration-big2"
src={pentagonIllustration2}
alt=""
/>
<div className="double-background" />
</Layout>
);
}

interface Props {
img: string;
featureText: string;
}
109 changes: 16 additions & 93 deletions src/styles/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,29 +6,6 @@
--section-margin-bottom: 340px;
}

.pentagon-illustration-big1 {
position: absolute;
top: 1200px;
z-index: -1;
right: 0;
}

.pentagon-illustration-big2 {
position: absolute;
z-index: -2;
left: 0;
bottom: -2000px;
}

.double-background {
position: absolute;
width: 100%;
height: 1954px;
top: 808px;
background: var(--color-fill-canvas);
z-index: -10;
}

.node-demo-container {
position: relative;
}
Expand Down Expand Up @@ -78,30 +55,24 @@
z-index: -4;
}

.node-features {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
margin-bottom: var(--section-margin-bottom);
}

.node-features__feature {
max-width: 188px;
color: var(--color-text-secondary);

> p {
margin-top: var(--space-16);
}
}

.see-more-events {
margin-top: var(--space-48);
color: var(--pink5);
.btn-primary {
display: block;
width: 141px;
margin: 0 auto;
cursor: pointer;
border: none;
box-sizing: border-box;
padding: var(--space-08) var(--space-24);
font-weight: var(--font-weight-semibold);
background: var(--color-fill-action);
color: var(--black0);
border-radius: var(--space-04);
text-decoration: none;
line-height: var(--line-height-body1);

span {
margin-left: var(--space-08);
&:hover,
&:focus {
color: var(--black0);
}
}

Expand All @@ -124,54 +95,6 @@
}
}

.get-started-callouts {
width: 100%;
display: flex;
flex-direction: row;
text-align: center;
justify-content: space-between;
margin-bottom: var(--space-80);
}

.get-started-callout {
text-decoration: none;
display: flex;
flex-direction: column;

h5 {
color: var(--color-text-primary);
margin: 0;
margin-top: var(--space-24);
}

p {
margin-top: var(--space-16);
color: var(--color-text-secondary);
width: 422px;
}
}

.btn-primary {
display: block;
width: 141px;
margin: 0 auto;
cursor: pointer;
border: none;
box-sizing: border-box;
padding: var(--space-08) var(--space-24);
font-weight: var(--font-weight-semibold);
background: var(--color-fill-action);
color: var(--black0);
border-radius: var(--space-04);
text-decoration: none;
line-height: var(--line-height-body1);

&:hover,
&:focus {
color: var(--black0);
}
}

@keyframes leafs-animation {
50% {
transform: rotate(5deg);
Expand Down