From 8cf49540f9d96f147674eb2c0e2144371b63e41c Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Wed, 4 Sep 2019 16:32:25 +0400 Subject: [PATCH] Add links in hero section --- components/hero-section/index.js | 4 ++- components/hero-section/style.scss | 23 +++++++++++---- next.config.js | 16 +++++++++- package.json | 6 +++- pages/index.js | 7 +++-- yarn.lock | 47 +++++++++++++++++++++++++++--- 6 files changed, 89 insertions(+), 14 deletions(-) diff --git a/components/hero-section/index.js b/components/hero-section/index.js index b56d8b756..140cd57b5 100644 --- a/components/hero-section/index.js +++ b/components/hero-section/index.js @@ -1,3 +1,4 @@ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import './style.scss'; const HeroSection = () => ( @@ -8,7 +9,8 @@ const HeroSection = () => (
Register - + +
); diff --git a/components/hero-section/style.scss b/components/hero-section/style.scss index dae1950d1..87d0a6aae 100644 --- a/components/hero-section/style.scss +++ b/components/hero-section/style.scss @@ -1,16 +1,17 @@ .hero-section { text-align: center; - padding: 70px 20px; + padding: 80px 20px; h1 { font-size: 35px; font-weight: 700; - margin-bottom: 8px; + margin-bottom: 10px; } p { color: #333; - margin-bottom: 25px; + font-weight: 500; + margin-bottom: 35px; } .register-form { @@ -21,21 +22,33 @@ .email-input { border: 3px solid #000000; - border-radius: 3px; outline: none; padding: 5px 13px; - min-width: 300px; + min-width: 320px; } input, .btn { + border-radius: 0; height: 100%; } + .icon-link { + color: #000000; + margin-left: 15px; + } + .btn { display: flex; align-items: center; margin-left: 15px; + margin-right: 8px; padding: 5px 15px; } + + svg { + display: flex; + width: 30px; + height: 30px; + } } } \ No newline at end of file diff --git a/next.config.js b/next.config.js index 1048792a0..271a883cc 100644 --- a/next.config.js +++ b/next.config.js @@ -1,4 +1,18 @@ const withSass = require('@zeit/next-sass'); const withCSS = require('@zeit/next-css'); -module.exports = withCSS(withSass()); \ No newline at end of file +module.exports = withCSS(withSass({ + webpack(config, options) { + config.module.rules.push({ + test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/, + use: { + loader: 'url-loader', + options: { + limit: 100000, + }, + }, + }); + + return config + }, +})); \ No newline at end of file diff --git a/package.json b/package.json index 29cc849f9..05b82f8ed 100644 --- a/package.json +++ b/package.json @@ -9,11 +9,15 @@ "start": "next start" }, "dependencies": { - "@fortawesome/fontawesome-free": "^5.10.2", + "@fortawesome/fontawesome-svg-core": "^1.2.22", + "@fortawesome/free-brands-svg-icons": "^5.10.2", + "@fortawesome/free-solid-svg-icons": "^5.10.2", + "@fortawesome/react-fontawesome": "^0.1.4", "@zeit/next-css": "latest", "@zeit/next-sass": "^1.0.1", "autoprefixer": "^9.6.1", "bootstrap": "^4.3.1", + "font-awesome": "^4.7.0", "next": "^9.0.4", "node-sass": "^4.12.0", "postcss-css-variables": "^0.13.0", diff --git a/pages/index.js b/pages/index.js index 1bd54ee3a..9e91ba90f 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,9 +1,12 @@ -import 'bootstrap/dist/css/bootstrap.min.css'; +import { library } from '@fortawesome/fontawesome-svg-core'; +import { faGithub, fab } from '@fortawesome/free-brands-svg-icons'; +import 'bootstrap/dist/css/bootstrap.min.css'; import './global.scss'; - import Home from './home/index'; +library.add(fab, faGithub); + const Index = () => (
diff --git a/yarn.lock b/yarn.lock index 449784fc3..456fdf1a8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -797,10 +797,39 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" -"@fortawesome/fontawesome-free@^5.10.2": +"@fortawesome/fontawesome-common-types@^0.2.22": + version "0.2.22" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.22.tgz#3f1328d232a0fd5de8484d833c8519426f39f016" + integrity sha512-QmEuZsipX5/cR9JOg0fsTN4Yr/9lieYWM8AQpmRa0eIfeOcl/HLYoEa366BCGRSrgNJEexuvOgbq9jnJ22IY5g== + +"@fortawesome/fontawesome-svg-core@^1.2.22": + version "1.2.22" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.22.tgz#9a6117c96c8b823c7d531000568ac75c3c02e123" + integrity sha512-Q941E4x8UfnMH3308n0qrgoja+GoqyiV846JTLoCcCWAKokLKrixCkq6RDBs8r+TtAWaLUrBpI+JFxQNX/WNPQ== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.22" + +"@fortawesome/free-brands-svg-icons@^5.10.2": version "5.10.2" - resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.10.2.tgz#27e02da1e34b50c9869179d364fb46627b521130" - integrity sha512-9pw+Nsnunl9unstGEHQ+u41wBEQue6XPBsILXtJF/4fNN1L3avJcMF/gGF86rIjeTAgfLjTY9ndm68/X4f4idQ== + resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.10.2.tgz#01a227e37ca96237a5a9e8681d926a36fd6195c0" + integrity sha512-r5Dxr2h8f9bEI7F/gj/2v1OX9S6DMif9ZKR2VFQCSXHwahojLlOWnFILYsrjhzOISESkh6WDL9IOdkdbKM7KPw== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.22" + +"@fortawesome/free-solid-svg-icons@^5.10.2": + version "5.10.2" + resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.10.2.tgz#61bcecce3aa5001fd154826238dfa840de4aa05a" + integrity sha512-9Os/GRUcy+iVaznlg8GKcPSQFpIQpAg14jF0DWsMdnpJfIftlvfaQCWniR/ex9FoOpSEOrlXqmUCFL+JGeciuA== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.22" + +"@fortawesome/react-fontawesome@^0.1.4": + version "0.1.4" + resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.4.tgz#18d61d9b583ca289a61aa7dccc05bd164d6bc9ad" + integrity sha512-GwmxQ+TK7PEdfSwvxtGnMCqrfEm0/HbRHArbUudsYiy9KzVCwndxa2KMcfyTQ8El0vROrq8gOOff09RF1oQe8g== + dependencies: + humps "^2.0.1" + prop-types "^15.5.10" "@webassemblyjs/ast@1.8.5": version "1.8.5" @@ -2378,6 +2407,11 @@ flush-write-stream@^1.0.0: inherits "^2.0.3" readable-stream "^2.3.6" +font-awesome@^4.7.0: + version "4.7.0" + resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133" + integrity sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM= + for-in@^0.1.3: version "0.1.8" resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1" @@ -2735,6 +2769,11 @@ https-browserify@^1.0.0: resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73" integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM= +humps@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/humps/-/humps-2.0.1.tgz#dd02ea6081bd0568dc5d073184463957ba9ef9aa" + integrity sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao= + iconv-lite@0.4.24, iconv-lite@^0.4.4: version "0.4.24" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b" @@ -4277,7 +4316,7 @@ prop-types-exact@1.2.0: object.assign "^4.1.0" reflect.ownkeys "^0.2.0" -prop-types@15.7.2, prop-types@^15.6.2: +prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.6.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==