From a95bc658a5138a52e42d76e61034e354f7078996 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Thu, 2 Jul 2020 09:27:04 +0300
Subject: [PATCH] books & articles pages

---
 src/components/Books/Books.js    | 42 ++++++++++++++++++
 src/components/Books/Books.scss  | 30 +++++++++++++
 src/images/books-icon__large.svg |  1 +
 src/pages/articles.js            | 75 ++++++++++++++++++++++++++++++++
 src/pages/books.js               | 29 ++++++++++++
 5 files changed, 177 insertions(+)
 create mode 100644 src/components/Books/Books.js
 create mode 100644 src/components/Books/Books.scss
 create mode 100644 src/images/books-icon__large.svg
 create mode 100644 src/pages/articles.js
 create mode 100644 src/pages/books.js

diff --git a/src/components/Books/Books.js b/src/components/Books/Books.js
new file mode 100644
index 0000000..9ed0762
--- /dev/null
+++ b/src/components/Books/Books.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import './Books.scss'
+
+import BooksIcon from '../../images/books-icon__large.svg'
+
+const Books = () => {
+  return (
+    <div className="books">
+      <div className="books-heading">
+        <BooksIcon />
+        <h1>Что почитать</h1>
+      </div>
+      <div className="books-description">
+        <p>
+          Здесь представлен список книг по программированию, которые стоило бы прочитать
+        </p>
+      </div>
+      <div className="books-inner inner">
+        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing.</h2>
+        <p>
+          <img src="https://i.imgur.com/2OMOIej.jpg" alt="book" />
+        </p>
+        <p>
+        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
+        </p>
+        <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>
+        <a href="/" target="_blank">купить на litres.ru</a>
+        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing.</h2>
+        <p>
+          <img src="https://i.imgur.com/2OMOIej.jpg" alt="book" />
+        </p>
+        <p>
+        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
+        </p>
+        <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>
+        <a href="/" target="_blank">купить на litres.ru</a>
+      </div>
+    </div>
+  )
+}
+
+export default Books
\ No newline at end of file
diff --git a/src/components/Books/Books.scss b/src/components/Books/Books.scss
new file mode 100644
index 0000000..08e24cb
--- /dev/null
+++ b/src/components/Books/Books.scss
@@ -0,0 +1,30 @@
+@import '../../styles/variables.scss';
+
+.books {
+  & .books-heading {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+    & svg {
+      margin-right: 15px;
+    }
+  }
+  & .books-description {
+    margin-bottom: 30px;
+  }
+  & .books-inner {
+    margin-bottom: 35px;
+  }
+}
+
+.dark {
+  & .books {
+    & p, h1, h2, h3, h4, h5, h6, ul, ol {
+      color: $white-clr;
+    }
+    & blockquote {
+      background: #2A2A2A;
+      color: $white-clr;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/images/books-icon__large.svg b/src/images/books-icon__large.svg
new file mode 100644
index 0000000..48064d4
--- /dev/null
+++ b/src/images/books-icon__large.svg
@@ -0,0 +1 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#books-icon__heading)"><path d="M13.3334 27.5556C13.3334 29.5191 12.6303 31.1111 10.6667 31.1111H4.4445C0.888943 31.1111 0.888943 18.6667 4.4445 18.6667H10.6667C12.6303 18.6667 13.3334 20.2587 13.3334 22.2222V27.5556Z" fill="#553788"></path><path d="M30.2222 29.3333H29.3333V20.4445H30.2222C30.4579 20.4445 30.684 20.3508 30.8507 20.1841C31.0174 20.0174 31.1111 19.7913 31.1111 19.5556C31.1111 19.3198 31.0174 19.0937 30.8507 18.927C30.684 18.7603 30.4579 18.6667 30.2222 18.6667H8.88883C5.33328 18.6667 5.33328 31.1111 8.88883 31.1111H30.2222C30.4579 31.1111 30.684 31.0175 30.8507 30.8508C31.0174 30.6841 31.1111 30.458 31.1111 30.2222C31.1111 29.9865 31.0174 29.7604 30.8507 29.5937C30.684 29.427 30.4579 29.3333 30.2222 29.3333Z" fill="#9266CC"></path><path d="M30.375 29.3334H9.77767C7.99989 29.3334 7.99989 20.4445 9.77767 20.4445H30.375C31.3563 20.4445 31.3563 29.3334 30.375 29.3334Z" fill="#CCD6DD"></path><path d="M10.2224 22.2222H30.978C30.858 21.1778 30.658 20.4445 30.3753 20.4445H9.77797C8.31041 20.4445 8.0553 26.496 9.01085 28.6116C8.66241 25.9813 9.06597 22.2222 10.2224 22.2222Z" fill="#99AAB5"></path><path d="M10.6664 7.10803C10.6664 8.05102 10.2918 8.95539 9.62505 9.62218C8.95826 10.289 8.05389 10.6636 7.11089 10.6636H3.55534C-0.000217021 10.6636 -0.000217021 0.885803 3.55534 0.885803H7.11089C8.05389 0.885803 8.95826 1.26041 9.62505 1.9272C10.2918 2.594 10.6664 3.49837 10.6664 4.44136V7.10803Z" fill="#226699"></path><path d="M27.5557 8.8858H26.6668V2.66358H27.5557C27.7914 2.66358 28.0175 2.56993 28.1842 2.40323C28.3509 2.23653 28.4446 2.01044 28.4446 1.77469C28.4446 1.53894 28.3509 1.31285 28.1842 1.14615C28.0175 0.979454 27.7914 0.885803 27.5557 0.885803H6.22233C2.66678 0.885803 2.66678 10.6636 6.22233 10.6636H27.5557C27.7914 10.6636 28.0175 10.5699 28.1842 10.4032C28.3509 10.2365 28.4446 10.0104 28.4446 9.77469C28.4446 9.53894 28.3509 9.31285 28.1842 9.14615C28.0175 8.97945 27.7914 8.8858 27.5557 8.8858Z" fill="#55ACEE"></path><path d="M27.7085 8.88653H7.11117C5.33339 8.88653 5.33339 2.66431 7.11117 2.66431H27.7085C28.6898 2.66431 28.6898 8.88653 27.7085 8.88653Z" fill="#CCD6DD"></path><path d="M7.11122 4.44129H28.3779C28.2765 3.44174 28.0543 2.66431 27.7085 2.66431H7.11122C6.05077 2.66431 5.62766 4.87576 5.83299 6.66252C5.97166 5.45595 6.39388 4.44129 7.11122 4.44129Z" fill="#99AAB5"></path><path d="M17.7776 15.1111C17.7776 16.0541 17.403 16.9585 16.7362 17.6253C16.0694 18.2921 15.1651 18.6667 14.2221 18.6667H5.33317C1.77761 18.6667 1.77761 10.6667 5.33317 10.6667H14.2221C15.1651 10.6667 16.0694 11.0413 16.7362 11.7081C17.403 12.3749 17.7776 13.2792 17.7776 14.2222V15.1111Z" fill="#F4900C"></path><path d="M31.1109 16.8889H30.2221V12.4445H31.1109C31.3467 12.4445 31.5728 12.3508 31.7395 12.1841C31.9062 12.0174 31.9998 11.7913 31.9998 11.5556C31.9998 11.3198 31.9062 11.0937 31.7395 10.927C31.5728 10.7603 31.3467 10.6667 31.1109 10.6667H13.3332C9.77762 10.6667 9.77762 18.6667 13.3332 18.6667H31.1109C31.3467 18.6667 31.5728 18.573 31.7395 18.4063C31.9062 18.2396 31.9998 18.0135 31.9998 17.7778C31.9998 17.542 31.9062 17.316 31.7395 17.1493C31.5728 16.9826 31.3467 16.8889 31.1109 16.8889Z" fill="#FFAC33"></path><path d="M31.2638 16.8869H14.222C12.4442 16.8869 12.4442 12.4445 14.222 12.4445H31.2638C32.2451 12.4445 32.2451 16.8869 31.2638 16.8869Z" fill="#CCD6DD"></path><path d="M14.2223 14.2207H31.9859C31.9281 13.2775 31.689 12.4445 31.2641 12.4445H14.2223C13.0899 12.4445 12.6819 14.2446 12.993 15.5528C13.169 14.8077 13.577 14.2207 14.2223 14.2207Z" fill="#99AAB5"></path></g><defs><clipPath id="books-icon__heading"><rect width="32" height="32" fill="white"></rect></clipPath></defs></svg>
\ No newline at end of file
diff --git a/src/pages/articles.js b/src/pages/articles.js
new file mode 100644
index 0000000..740e7d9
--- /dev/null
+++ b/src/pages/articles.js
@@ -0,0 +1,75 @@
+import React from "react"
+import { Link } from 'gatsby'
+import SEO from '../components/SEO/SEO'
+import Layout from '../components/Layout/Layout'
+import Articles from '../components/Articles/Articles'
+import Offers from '../components/Offers/Offers'
+import Newsletter from '../components/Newsletter/Newsletter'
+
+const ArticlesPage = () => {
+  return (
+    <Layout>
+      <SEO title='Статьи' />
+      <main>
+        <div className="container-fluid">
+          <div className="row">
+            <div className="col-md-9 col-xs-12">
+              <div className="articles">
+                <div className="articles-heading">
+                  <h1>Статьи</h1>
+                </div>
+                <div className="articles-categories">
+                  <div className="tag-item">
+                    <Link to='/'>Все</Link>
+                  </div>
+                  <div className="tag-item">
+                    <Link to='/'>Javascript</Link>
+                  </div>
+                  <div className="tag-item">
+                    <Link to='/'>GraphQL</Link>
+                  </div>
+                  <div className="tag-item">
+                    <Link to='/'>Reactjs</Link>
+                  </div>
+                  <div className="tag-item">
+                    <Link to='/'>SEO оптимизация</Link>
+                  </div>
+                  <div className="tag-item">
+                    <Link to='/'>Web разработка</Link>
+                  </div>
+                  <div className="tag-item">
+                    <Link to='/'>pet-проекты</Link>
+                  </div>
+                  <div className="tag-item">
+                    <Link to='/'>Nodejs</Link>
+                  </div>
+                  <div className="tag-item">
+                    <Link to='/'>ООП</Link>
+                  </div>
+                  <div className="tag-item">
+                    <Link to='/'>Новости</Link>
+                  </div>
+                </div>
+                <div className="articles-search">
+                  <input placeholder="Напишите сюда чтобы отфильтровать статьи" type="text" />
+                  <span>278</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="row">
+            <div className="col-md-9 col-xs-12">
+              <Articles /> 
+              <Newsletter />
+            </div>
+            <div className="col-md-3 col-xs-12">
+              <Offers /> 
+            </div>
+          </div>
+        </div>
+      </main>
+    </Layout>
+  )
+}
+
+export default ArticlesPage
diff --git a/src/pages/books.js b/src/pages/books.js
new file mode 100644
index 0000000..cfb4e12
--- /dev/null
+++ b/src/pages/books.js
@@ -0,0 +1,29 @@
+import React from "react"
+import SEO from '../components/SEO/SEO'
+import Layout from '../components/Layout/Layout'
+import Books from '../components/Books/Books'
+import Offers from '../components/Offers/Offers'
+import Newsletter from '../components/Newsletter/Newsletter'
+
+const BooksPage = () => {
+  return (
+    <Layout>
+      <SEO title='Ресурсы' />
+      <main>
+        <div className="container-fluid">
+          <div className="row">
+            <div className="col-md-9 col-xs-12">
+              <Books />
+              <Newsletter />
+            </div>
+            <div className="col-md-3 col-xs-12">
+              <Offers /> 
+            </div>
+          </div>
+        </div>
+      </main>
+    </Layout>
+  )
+}
+
+export default BooksPage