From 0a208a7cbc7a674b33dc6a6695542673f17a798e Mon Sep 17 00:00:00 2001 From: Ben Halverson Date: Sun, 3 May 2020 22:56:02 -0700 Subject: [PATCH 1/5] refactor(homepage): Removed lorem text and company logos --- src/pages/index.tsx | 85 --------------------------------------------- 1 file changed, 85 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 279185d1bd..6c2d11e658 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -6,41 +6,12 @@ import '../util/konami'; import '../styles/index.scss'; -import featureImg from '../images/placeholder-img.png'; - -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 ( -
- node feature -

{featureText}

-
- ); -}; - export default function Index(): JSX.Element { const title = 'Run JavaScript Everywhere.'; const subTitle = @@ -61,66 +32,10 @@ export default function Index(): JSX.Element { -
- - - -
- -
-

- Trusted by development teams around the world -

-

Including IBM, LinkedIn, Microsoft, Netflix, and PayPal.

-
- ibm logo - linkedin logo - microsoft logo - netflix logo - paypal logo -
-
- -
- - -
A beginner’s guide
-

- Lorem ipsum dolor amet pug vape +1 poke pour-over kitsch tacos - meh. -

- - - - -
Do even more with Node
-

- Lorem ipsum dolor amet pug vape +1 poke pour-over kitsch tacos - meh. -

- -
- Get Started - - -
); } - -interface Props { - img: string; - featureText: string; -} From 6b68e442f471083483aaf681ef1e2e4d04b19281 Mon Sep 17 00:00:00 2001 From: Ben Halverson Date: Sun, 3 May 2020 23:07:11 -0700 Subject: [PATCH 2/5] style(homepage): Removed unused styles --- src/styles/index.scss | 96 ------------------------------------------- 1 file changed, 96 deletions(-) diff --git a/src/styles/index.scss b/src/styles/index.scss index 54a8dbad84..62cbdf258b 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -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; } @@ -78,79 +55,6 @@ 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); - display: block; - - span { - margin-left: var(--space-08); - } -} - -.trusted-by { - margin-bottom: var(--section-margin-bottom); - text-align: center; - width: 100%; - - p { - color: var(--color-text-secondary); - margin-bottom: var(--space-64); - } - - .logos-container { - display: flex; - align-items: center; - flex-direction: row; - justify-content: space-between; - filter: grayscale(1); - } -} - -.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; From cfd7c1bb4e876d287c1c9a6bd702c529b49538b7 Mon Sep 17 00:00:00 2001 From: Ben Halverson Date: Sun, 3 May 2020 23:09:31 -0700 Subject: [PATCH 3/5] refactor(homepage): Removed announcement banner --- src/pages/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 6c2d11e658..d7640c6e97 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -10,7 +10,6 @@ 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'; export default function Index(): JSX.Element { const title = 'Run JavaScript Everywhere.'; @@ -20,7 +19,6 @@ export default function Index(): JSX.Element { return ( -
From 5de3458b67495afdf8dbb3292698bde395011e4f Mon Sep 17 00:00:00 2001 From: Ben Halverson Date: Sun, 3 May 2020 23:27:01 -0700 Subject: [PATCH 4/5] refactor(header): Updated docs and download links --- src/components/Header/Header.scss | 5 +++ .../__snapshots__/header.test.tsx.snap | 34 +++++-------------- src/components/Header/index.tsx | 26 ++++++++------ 3 files changed, 29 insertions(+), 36 deletions(-) create mode 100644 src/components/Header/Header.scss diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss new file mode 100644 index 0000000000..30ed943d7c --- /dev/null +++ b/src/components/Header/Header.scss @@ -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)'; +} diff --git a/src/components/Header/__tests__/__snapshots__/header.test.tsx.snap b/src/components/Header/__tests__/__snapshots__/header.test.tsx.snap index 84efecf7a2..176df13222 100644 --- a/src/components/Header/__tests__/__snapshots__/header.test.tsx.snap +++ b/src/components/Header/__tests__/__snapshots__/header.test.tsx.snap @@ -29,13 +29,7 @@ exports[`Tests for Header component renders correctly 1`] = ` className="nav__tabs" > @@ -46,15 +40,10 @@ exports[`Tests for Header component renders correctly 1`] = ` className="nav__tabs" > Documentation @@ -63,15 +52,10 @@ exports[`Tests for Header component renders correctly 1`] = ` className="nav__tabs" > Download diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index b8c4b04bb0..19955ad0b0 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -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; } @@ -35,19 +29,29 @@ const Header = ({ From 9ead6dc34eb4377a268dfb8a2788fdab46a4cbfb Mon Sep 17 00:00:00 2001 From: Ben Halverson Date: Wed, 6 May 2020 01:45:18 -0700 Subject: [PATCH 5/5] refactor(homepage): Bringing back the logos to the homepage --- package-lock.json | 4 ++-- src/pages/index.tsx | 19 +++++++++++++++++++ src/styles/index.scss | 19 +++++++++++++++++++ 3 files changed, 40 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index cdeb644161..36e3c0a91e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21486,7 +21486,7 @@ "markdown-table": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-1.1.3.tgz", - "integrity": "sha512-1RUZVgQlpJSPWYbFSpmudq5nHY1doEIv89gBtF0s4gW1GF2XorxcA/70M5vq7rLv0a6mhOUccRsqkwhwLCIQ2Q==" + "integrity": "sha1-n8tpvP24cXv9A5jG7C2TA2743mA=" }, "md5": { "version": "2.2.1", @@ -23382,7 +23382,7 @@ "parse-entities": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-1.2.2.tgz", - "integrity": "sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==", + "integrity": "sha1-wxvw9lO2ZhNU+Jc1WcuG3R1e31A=", "requires": { "character-entities": "^1.0.0", "character-entities-legacy": "^1.0.0", diff --git a/src/pages/index.tsx b/src/pages/index.tsx index d7640c6e97..91528c8620 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -10,6 +10,11 @@ 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'; export default function Index(): JSX.Element { const title = 'Run JavaScript Everywhere.'; @@ -30,6 +35,20 @@ export default function Index(): JSX.Element { +
+

+ Trusted by development teams around the world +

+

Including IBM, LinkedIn, Microsoft, Netflix, and PayPal.

+
+ ibm logo + linkedin logo + microsoft logo + netflix logo + paypal logo +
+
+ Get Started diff --git a/src/styles/index.scss b/src/styles/index.scss index 62cbdf258b..c48e50c19c 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -76,6 +76,25 @@ } } +.trusted-by { + margin-bottom: var(--section-margin-bottom); + text-align: center; + width: 100%; + + p { + color: var(--color-text-secondary); + margin-bottom: var(--space-64); + } + + .logos-container { + display: flex; + align-items: center; + flex-direction: row; + justify-content: space-between; + filter: grayscale(1); + } +} + @keyframes leafs-animation { 50% { transform: rotate(5deg);