From bffb482b613814a256c83f722a920a8434ce84af Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Fri, 20 Sep 2019 19:00:43 +0400 Subject: [PATCH] Add about page --- components/about-header/index.js | 17 ++++++--- components/about-header/style.scss | 30 +++++++++++----- components/{footer => page-footer}/index.js | 4 +-- components/{footer => page-footer}/style.scss | 0 components/{header => page-header}/index.js | 4 +-- components/{header => page-header}/style.scss | 0 pages/about/index.js | 36 +++++++++++++++---- pages/about/style.scss | 8 +++++ pages/global.scss | 4 +++ pages/home/index.js | 10 +++--- pages/index.js | 6 ++-- pages/privacy/index.js | 8 ++--- pages/terms/index.js | 11 +++--- 13 files changed, 97 insertions(+), 41 deletions(-) rename components/{footer => page-footer}/index.js (97%) rename components/{footer => page-footer}/style.scss (100%) rename components/{header => page-header}/index.js (90%) rename components/{header => page-header}/style.scss (100%) diff --git a/components/about-header/index.js b/components/about-header/index.js index e3fceed34..ec32e8fa5 100644 --- a/components/about-header/index.js +++ b/components/about-header/index.js @@ -2,11 +2,18 @@ import './style.scss'; const AboutHeader = () => (
-
-

Hello, I'm Kamran Ahmed.

-

I created roadmap.sh to help people grow their careers.

- - +
+
+ +
+

Hello, I'm Kamran Ahmed.

+

I created roadmap.sh to help developers find their path if they are confused and help them grow in their career.

+ +
+
); diff --git a/components/about-header/style.scss b/components/about-header/style.scss index 2a4e437e9..e00a450e8 100644 --- a/components/about-header/style.scss +++ b/components/about-header/style.scss @@ -1,10 +1,12 @@ .about-header { - text-align: center; + text-align: left; padding: 70px 20px; margin: 0 auto; - .container { - max-width: 800px; + .author-info { + display: flex; + align-items: center; + flex-direction: row; } h2 { @@ -25,11 +27,21 @@ } .author-img { - height: 145px; - border-radius: 100%; - margin-top: 25px; - margin-bottom: -125px; - border: 10px solid white; - box-shadow: 0 1px 0 0 #dee2e6; + height: 160px; + margin-right: 25px; + margin-top: 8px; + border-radius: 9px; + } + + .author-links a { + display: inline-block; + margin-right: 5px; + background: #2d2d2d; + color: white; + padding: 5px 10px; + font-weight: 500; + margin-top: 12px; + border-radius: 5px; + text-decoration: none; } } \ No newline at end of file diff --git a/components/footer/index.js b/components/page-footer/index.js similarity index 97% rename from components/footer/index.js rename to components/page-footer/index.js index e5fbc3d0c..8083c854a 100644 --- a/components/footer/index.js +++ b/components/page-footer/index.js @@ -1,6 +1,6 @@ import './style.scss'; -const Footer = () => ( +const PageFooter = () => (
@@ -54,4 +54,4 @@ const Footer = () => (
); -export default Footer; \ No newline at end of file +export default PageFooter; \ No newline at end of file diff --git a/components/footer/style.scss b/components/page-footer/style.scss similarity index 100% rename from components/footer/style.scss rename to components/page-footer/style.scss diff --git a/components/header/index.js b/components/page-header/index.js similarity index 90% rename from components/header/index.js rename to components/page-header/index.js index dc4376dd7..3ec5ed9ec 100644 --- a/components/header/index.js +++ b/components/page-header/index.js @@ -1,6 +1,6 @@ import './style.scss'; -const Header = () => ( +const PageHeader = () => (
@@ -19,4 +19,4 @@ const Header = () => (
); -export default Header; \ No newline at end of file +export default PageHeader; \ No newline at end of file diff --git a/components/header/style.scss b/components/page-header/style.scss similarity index 100% rename from components/header/style.scss rename to components/page-header/style.scss diff --git a/pages/about/index.js b/pages/about/index.js index 25664e771..c1be3c1bc 100644 --- a/pages/about/index.js +++ b/pages/about/index.js @@ -1,16 +1,40 @@ import AboutHeader from '../../components/about-header'; -import Footer from '../../components/footer'; -import Header from '../../components/header'; +import PageFooter from '../../components/page-footer'; +import PageHeader from '../../components/page-header'; import './style.scss'; const About = () => (
-
+ -
- +
+
+
+

What is roadmap.sh?

+

Roadmap.sh is the community curated roadmaps and paths for the budding developers. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid assumenda iure maiores nemo nihil odio perspiciatis recusandae repellendus sed vero. Adipisci consectetur esse explicabo illum natus neque perferendis quis ullam.

+

If you really want to Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab asperiores commodi consequatur, culpa cumque dolorum, eos hic illo obcaecati odit quam quod reiciendis, rem reprehenderit saepe sed tempore tenetur vitae!

+
+
+
+
+

What are the plans for roadmap.sh?

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore eaque eius esse, facere id ipsum, minima nam, nisi quos reprehenderit saepe tempora vitae voluptate. Atque deleniti dolores eos laboriosam repellat.

+
+
+
+
+

What is the source of revenue?

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequuntur, harum impedit numquam porro quod unde! Aperiam dolorum ducimus expedita fugiat, impedit nesciunt, quaerat qui recusandae repellendus tenetur ut voluptatibus!

+
+
+
+
+

Can I contribute?

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequuntur, harum impedit numquam porro quod unde! Aperiam dolorum ducimus expedita fugiat, impedit nesciunt, quaerat qui recusandae repellendus tenetur ut voluptatibus!

+
+
-
+
); diff --git a/pages/about/style.scss b/pages/about/style.scss index e69de29bb..476387fc8 100644 --- a/pages/about/style.scss +++ b/pages/about/style.scss @@ -0,0 +1,8 @@ +.faq-item { + padding: 40px 20px; + + p:last-child { + margin-bottom: 0; + } +} + diff --git a/pages/global.scss b/pages/global.scss index 69e690508..b020ba426 100644 --- a/pages/global.scss +++ b/pages/global.scss @@ -1,3 +1,7 @@ +.container-small { + max-width: 800px; +} + .border-top { border-top: 1px solid #eaeaea; } diff --git a/pages/home/index.js b/pages/home/index.js index 087f54481..15c430b82 100644 --- a/pages/home/index.js +++ b/pages/home/index.js @@ -1,17 +1,17 @@ -import Header from '../../components/header/index'; import FeaturedContent from '../../components/featured-content'; -import './style.scss'; import HeroSection from '../../components/hero-section'; -import Footer from '../../components/footer'; +import PageFooter from '../../components/page-footer'; +import PageHeader from '../../components/page-header'; +import './style.scss'; const Home = (props) => (
-
+
-
+
); diff --git a/pages/index.js b/pages/index.js index 30926317d..6449e4e3d 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,10 +1,10 @@ import { library } from '@fortawesome/fontawesome-svg-core'; -import { faGithub, fab } from '@fortawesome/free-brands-svg-icons'; +import { faGithub, fab, faTwitter } from '@fortawesome/free-brands-svg-icons'; import { faArrowRight } from '@fortawesome/free-solid-svg-icons' -import 'bootstrap/dist/css/bootstrap.min.css'; -import './global.scss'; +import 'bootstrap/scss/bootstrap.scss'; import Home from './home/index'; +import './global.scss'; library.add(fab, faGithub, faArrowRight); diff --git a/pages/privacy/index.js b/pages/privacy/index.js index 33f9c3846..02fa42c9f 100644 --- a/pages/privacy/index.js +++ b/pages/privacy/index.js @@ -1,10 +1,10 @@ -import Header from '../../components/header'; -import Footer from '../../components/footer'; +import PageHeader from '../../components/page-header'; +import PageFooter from '../../components/page-footer'; import './style.scss'; const Privacy = () => (
-
+

Privacy Policy

@@ -59,7 +59,7 @@ const Privacy = () => (

If you have any questions or concerns regarding our privacy policies, please send us a detailed message to contact@roadmap.sh, and we will try to resolve your concerns.

-
+
); diff --git a/pages/terms/index.js b/pages/terms/index.js index 2f1643fb0..5bd02aa33 100644 --- a/pages/terms/index.js +++ b/pages/terms/index.js @@ -1,10 +1,10 @@ -import Header from '../../components/header'; -import Footer from '../../components/footer'; +import PageFooter from '../../components/page-footer'; +import PageHeader from '../../components/page-header'; import './style.scss'; const Terms = () => (
-
+

Terms of Service

@@ -140,10 +140,11 @@ const Terms = () => (

Miscellaneous. You will be responsible for paying, withholding, filing, and reporting all taxes, duties, and other governmental assessments associated with your activity in connection with the Services, provided that roadmap.sh may, in its sole discretion, do any of the foregoing on your behalf or for itself as it sees fit. The failure of either you or us to exercise, in any way, any right herein shall not be deemed a waiver of any further rights hereunder. If any provision of these Terms is found to be unenforceable or invalid, that provision will be limited or eliminated, to the minimum extent necessary, so that these Terms shall otherwise remain in full force and effect and enforceable. You and roadmap.sh agree that these Terms are the complete and exclusive statement of the mutual understanding between you and roadmap.sh, and that it supersedes and cancels all previous written and oral agreements, communications and other understandings relating to the subject - matter of these Terms. You hereby acknowledge and agree that you are not an employee, agent, partner, or joint venture of roadmap.sh, and you do not have any authority of any kind to bind roadmap.sh in any respect whatsoever. Except as expressly set forth in the section above regarding the Apple Application, you and roadmap.sh agree there are no third party beneficiaries intended under these Terms.

+ matter of these Terms. You hereby acknowledge and agree that you are not an employee, agent, partner, or joint venture of roadmap.sh, and you do not have any authority of any kind to bind roadmap.sh in any respect whatsoever. Except as expressly set forth in the section above regarding the Apple Application, you and roadmap.sh + agree there are no third party beneficiaries intended under these Terms.

-
);