From 9a25ba2633794b64d62d1d4cdd52696b643a6d27 Mon Sep 17 00:00:00 2001 From: Vincent Endrahadi Date: Mon, 11 May 2020 20:26:12 +0700 Subject: [PATCH] fix(learn): improve landing page (#38695) --- client/src/assets/images/AmazonLogo.js | 73 +++++++++++ client/src/assets/images/AppleLogo.js | 27 ++++ client/src/assets/images/AsFeatureLogo.js | 124 ++++++++++++++++++ client/src/assets/images/GoogleLogo.js | 31 +++++ client/src/assets/images/MicrosoftLogo.js | 30 +++++ client/src/assets/images/SpotifyLogo.js | 24 ++++ client/src/assets/images/index.js | 15 +++ client/src/components/Intro/index.js | 6 +- .../landing/components/CompanyLogos.js | 26 ++++ .../landing/components/companyLogos.css | 32 +++++ client/src/components/landing/index.js | 27 ++-- client/src/components/landing/landing.css | 11 +- client/src/components/layouts/global.css | 5 +- cypress/integration/landing.js | 2 +- 14 files changed, 414 insertions(+), 19 deletions(-) create mode 100644 client/src/assets/images/AmazonLogo.js create mode 100644 client/src/assets/images/AppleLogo.js create mode 100644 client/src/assets/images/AsFeatureLogo.js create mode 100644 client/src/assets/images/GoogleLogo.js create mode 100644 client/src/assets/images/MicrosoftLogo.js create mode 100644 client/src/assets/images/SpotifyLogo.js create mode 100644 client/src/assets/images/index.js create mode 100644 client/src/components/landing/components/CompanyLogos.js create mode 100644 client/src/components/landing/components/companyLogos.css diff --git a/client/src/assets/images/AmazonLogo.js b/client/src/assets/images/AmazonLogo.js new file mode 100644 index 00000000000..a2cfdc49156 --- /dev/null +++ b/client/src/assets/images/AmazonLogo.js @@ -0,0 +1,73 @@ +/* eslint-disable max-len */ +import React from 'react'; + +const propTypes = {}; + +function SpotifyLogo(props) { + return ( + + ); +} + +SpotifyLogo.displayName = 'SpotifyLogo'; +SpotifyLogo.propTypes = propTypes; + +export default SpotifyLogo; diff --git a/client/src/assets/images/AppleLogo.js b/client/src/assets/images/AppleLogo.js new file mode 100644 index 00000000000..642b4b8b02e --- /dev/null +++ b/client/src/assets/images/AppleLogo.js @@ -0,0 +1,27 @@ +/* eslint-disable max-len */ +import React from 'react'; + +const propTypes = {}; + +function AppleLogo(props) { + return ( + + ); +} + +AppleLogo.displayName = 'AppleLogo'; +AppleLogo.propTypes = propTypes; + +export default AppleLogo; diff --git a/client/src/assets/images/AsFeatureLogo.js b/client/src/assets/images/AsFeatureLogo.js new file mode 100644 index 00000000000..6aec0e12eb0 --- /dev/null +++ b/client/src/assets/images/AsFeatureLogo.js @@ -0,0 +1,124 @@ +/* eslint-disable max-len */ +import React from 'react'; + +const propTypes = {}; + +function AsSeenLogo(props) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +AsSeenLogo.displayName = 'AsSeenLogo'; +AsSeenLogo.propTypes = propTypes; + +export default AsSeenLogo; diff --git a/client/src/assets/images/GoogleLogo.js b/client/src/assets/images/GoogleLogo.js new file mode 100644 index 00000000000..3226a46fce9 --- /dev/null +++ b/client/src/assets/images/GoogleLogo.js @@ -0,0 +1,31 @@ +/* eslint-disable max-len */ +import React from 'react'; + +const propTypes = {}; + +function GoogleLogo(props) { + return ( + + ); +} + +GoogleLogo.displayName = 'GoogleLogo'; +GoogleLogo.propTypes = propTypes; + +export default GoogleLogo; diff --git a/client/src/assets/images/MicrosoftLogo.js b/client/src/assets/images/MicrosoftLogo.js new file mode 100644 index 00000000000..47516d7a09a --- /dev/null +++ b/client/src/assets/images/MicrosoftLogo.js @@ -0,0 +1,30 @@ +/* eslint-disable max-len */ +import React from 'react'; + +const propTypes = {}; + +function MicrosoftLogo(props) { + return ( + + ); +} + +MicrosoftLogo.displayName = 'MicrosoftLogo'; +MicrosoftLogo.propTypes = propTypes; + +export default MicrosoftLogo; diff --git a/client/src/assets/images/SpotifyLogo.js b/client/src/assets/images/SpotifyLogo.js new file mode 100644 index 00000000000..67d3554c9f4 --- /dev/null +++ b/client/src/assets/images/SpotifyLogo.js @@ -0,0 +1,24 @@ +/* eslint-disable max-len */ +import React from 'react'; + +const propTypes = {}; + +function SpotifyLogo(props) { + return ( + + ); +} + +SpotifyLogo.displayName = 'SpotifyLogo'; +SpotifyLogo.propTypes = propTypes; + +export default SpotifyLogo; diff --git a/client/src/assets/images/index.js b/client/src/assets/images/index.js new file mode 100644 index 00000000000..cd717ffafdb --- /dev/null +++ b/client/src/assets/images/index.js @@ -0,0 +1,15 @@ +import AppleLogo from './AppleLogo.js'; +import AmazonLogo from './AmazonLogo.js'; +import MicrosoftLogo from './MicrosoftLogo.js'; +import SpotifyLogo from './SpotifyLogo.js'; +import GoogleLogo from './GoogleLogo.js'; +import AsFeatureLogo from './AsFeatureLogo.js'; + +export { + AmazonLogo, + AppleLogo, + MicrosoftLogo, + SpotifyLogo, + GoogleLogo, + AsFeatureLogo +}; diff --git a/client/src/components/Intro/index.js b/client/src/components/Intro/index.js index 7d03941d647..bd72c727fc2 100644 --- a/client/src/components/Intro/index.js +++ b/client/src/components/Intro/index.js @@ -92,7 +92,7 @@ function Intro({ Welcome to freeCodeCamp.org -

Learn to code.

+

Learn to code at home.

Build projects.

Earn certifications.

@@ -106,8 +106,10 @@ function Intro({

Microsoft

Spotify

+ - + +