From 6469d1bcfadfcac54ff1806c75ae8dc6e65f535d Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Fri, 6 Jul 2018 17:33:36 +0200
Subject: [PATCH] Restructuring components and styling

---
 src/components/Button.js               |  2 +-
 src/components/Header.css              | 15 ++++++++
 src/components/PageIntro.js            | 41 +++++++++++++++++++++
 src/components/SideMenu.css            | 15 --------
 src/components/SideMenu.js             |  8 ++---
 src/layouts/index.js                   |  2 +-
 src/pages/index.js                     | 50 +++++---------------------
 src/styles/{custom.css => general.css} |  0
 8 files changed, 71 insertions(+), 62 deletions(-)
 create mode 100644 src/components/PageIntro.js
 rename src/styles/{custom.css => general.css} (100%)

diff --git a/src/components/Button.js b/src/components/Button.js
index bb0b9bd..3ea783d 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -2,7 +2,7 @@ import React from 'react'
 import Link from 'gatsby-link'
 
 let defaultClasses =
-  'px-6 py-2 leading-none inline-block text-sm no-underline uppercase'
+  'px-8 py-3 leading-none inline-block text-sm no-underline uppercase'
 
 let standardBtn = 'border hover:bg-teal hover:text-white hover:border-teal'
 
diff --git a/src/components/Header.css b/src/components/Header.css
index 72eefb2..5b1b41a 100644
--- a/src/components/Header.css
+++ b/src/components/Header.css
@@ -46,3 +46,18 @@
   -webkit-transform-origin: 15% 95%;
   transform-origin: 15% 95%;
 }
+
+.panel:before {
+  content: '';
+  background-color: rgba(0, 0, 0, 0);
+  transition: background-color 0.5s ease-in-out;
+}
+
+.panel-open:before {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+}
diff --git a/src/components/PageIntro.js b/src/components/PageIntro.js
new file mode 100644
index 0000000..aac3197
--- /dev/null
+++ b/src/components/PageIntro.js
@@ -0,0 +1,41 @@
+import React from 'react'
+
+import SectionIntro from './SectionIntro'
+import Button from './Button'
+
+const PageIntro = ({ ...props }) => (
+  <section className="bg-saburly-indigo relative">
+    <div className="container mx-auto flex lg:flex-row flex-col flex-col-reverse p-4">
+      <div className="text-center lg:text-left lg:mt-4">
+        <SectionIntro
+          light
+          intro="Welcome To Saburly"
+          classes="lg:text-left lg:max-w-xs content-center"
+          headline="We build the right software for your needs"
+          text="We are a team of creative, open minded, skilled and passionate engineers that ship success every day."
+        />
+        <Button
+          filled
+          text="Let's Build Together"
+          url="/proposal"
+          classes="shadow-md hover:shadow-lg rounded-full mt-4 font-light btn-saburly-green mb-20"
+        />
+      </div>
+      <img
+        src={props.image}
+        className="lg:-mt-4 md:max-w-md xl:max-w-full z-10"
+        alt="Software Development Agency"
+      />
+    </div>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400.8 96.4">
+      <title>bg-saburly-white</title>
+      <path
+        d="M417.7,96.4C655.2,93.3,743.6,0,983.1,0h417.7V96.4H417.7Z"
+        transform="translate(0 0)"
+        style={{ fill: '#fff' }}
+      />
+    </svg>
+  </section>
+)
+
+export default PageIntro
diff --git a/src/components/SideMenu.css b/src/components/SideMenu.css
index 6b7f4b7..94e087c 100644
--- a/src/components/SideMenu.css
+++ b/src/components/SideMenu.css
@@ -36,18 +36,3 @@
 .slideout-open .slideout-menu {
   display: block;
 }
-
-.panel:before {
-  content: '';
-  background-color: rgba(0, 0, 0, 0);
-  transition: background-color 0.5s ease-in-out;
-}
-
-.panel-open:before {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 99;
-}
diff --git a/src/components/SideMenu.js b/src/components/SideMenu.js
index fb1206a..8f2ec8f 100644
--- a/src/components/SideMenu.js
+++ b/src/components/SideMenu.js
@@ -50,22 +50,22 @@ class SideMenu extends Component {
           >
             X
           </button>
-          <Link to="/">
+          <Link to="/" className="no-underline">
             <li className="text-right no-underline text-2xl uppercase p-2 text-white">
               Home
             </li>
           </Link>
-          <Link to="/services">
+          <Link to="/services" className="no-underline">
             <li className="text-right no-underline text-2xl uppercase p-2 text-white">
               What We Do
             </li>
           </Link>
-          <Link to="/about">
+          <Link to="/about" className="no-underline">
             <li className="text-right no-underline text-2xl uppercase p-2 text-white">
               Team
             </li>
           </Link>
-          <Link to="/blog">
+          <Link to="/blog" className="no-underline">
             <li className="text-right no-underline text-2xl uppercase p-2 text-white">
               Blog
             </li>
diff --git a/src/layouts/index.js b/src/layouts/index.js
index 1a98bc0..4249d98 100644
--- a/src/layouts/index.js
+++ b/src/layouts/index.js
@@ -6,7 +6,7 @@ import Header from '../components/Header'
 import Footer from '../components/Footer'
 import SideMenu from '../components/SideMenu'
 import '../styles/index.css'
-import '../styles/custom.css'
+import '../styles/general.css'
 
 const Layout = ({ children, data }) => (
   <div className="font-sans mx-auto">
diff --git a/src/pages/index.js b/src/pages/index.js
index 49829f4..f58a784 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -5,6 +5,7 @@ import InfoBox from '../components/InfoBox'
 import Button from '../components/Button'
 import Card from '../components/Card'
 import Service from '../components/Service'
+import PageIntro from '../components/PageIntro'
 
 import ImgIntro from '../images/software-consulting.svg'
 import ImgDesign from '../images/ux-ui-design-agency.svg'
@@ -17,42 +18,10 @@ import LogoCoor from '../images/logo-coor-color.svg'
 
 const IndexPage = ({ ...props }) => (
   <main>
-    <section className="bg-saburly-indigo relative">
-      <div className="container mx-auto flex lg:flex-row flex-col flex-col-reverse p-4">
-        <div className="text-center lg:text-left lg:mt-4">
-          <SectionIntro
-            light
-            intro="Welcome To Saburly"
-            classes="lg:text-left lg:max-w-xs content-center"
-            headline="We build the right software for your needs"
-            text="We are a team of creative, open minded, skilled and passionate engineers that ship success every day."
-          />
-          <Button
-            filled
-            text="Let's Build Together"
-            url="/proposal"
-            classes="shadow-md hover:shadow-lg rounded-full mt-4 font-light btn-saburly-green mb-20"
-          />
-        </div>
-        <img
-          src={ImgIntro}
-          className="lg:-mt-4 md:max-w-md xl:max-w-full z-10"
-          alt="Software Development Agency"
-        />
-      </div>
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400.8 96.4">
-        <title>bg-saburly-white</title>
-        <path
-          d="M417.7,96.4C655.2,93.3,743.6,0,983.1,0h417.7V96.4H417.7Z"
-          transform="translate(0 0)"
-          style={{ fill: '#fff' }}
-        />
-      </svg>
-    </section>
+    <PageIntro image={ImgIntro} />
 
-    <section className="text-center mt-12 mb-12 p-3">
+    <section className="container mx-auto text-center my-12 p-4">
       <SectionIntro
-        classes="max-w-lg m-auto"
         intro="Services"
         headline="Because beautiful code makes our heart pound"
         text="We have a passion for great software and design with the help of modern technologies. Our speciality is custom end-to-end solutions and our skilled team can even help you with initial analysis, architecture design, testing and deployments"
@@ -88,7 +57,7 @@ const IndexPage = ({ ...props }) => (
         text="We develop for both iOS and Android. For iOS we use Swift and Objective-C. Android applications are built in Java and Kotlin. We also enjoy working with React Native technology because it allows writing native apps for both platform at once"
       />
 
-      <div className="p-8 text-center lg:flex justify-center">
+      <div className="py-8 text-center lg:flex justify-center">
         <Button
           standard
           text="More About What We Do"
@@ -104,14 +73,13 @@ const IndexPage = ({ ...props }) => (
       </div>
     </section>
 
-    <section className="text-center p-3 mt-8">
+    <section className="container mx-auto text-center p-4 my-12">
       <SectionIntro
-        classes="max-w-lg m-auto"
         intro="Clients"
         headline="With ambitious projects comes great responsibility"
         text="We think big, design smart and develop fast for all projects and teams. Currently we’re serving everything from global leaders to startups and we tailor our processes based on your scale and needs. We have helped some of the worlds leading enterprises and businesses bring ideas to life and we’re really interested in hearing what we can help you with"
       />
-      <div className="p-4 lg:flex items-center max-w-full  justify-center">
+      <div className="p-4 md:flex items-center max-w-full justify-center">
         <img
           src={LogoIBM}
           className="opacity-50 hover:opacity-100 client-logo p-1"
@@ -138,16 +106,16 @@ const IndexPage = ({ ...props }) => (
         filled
         text="Get a free proposal"
         url="/proposal"
-        classes="shadow-md hover:shadow-lg rounded-full mt-4 font-light btn-saburly-green mb-20"
+        classes="shadow-md hover:shadow-lg rounded-full mt-4 font-light btn-saburly-green"
       />
     </section>
 
-    <section className="container mx-auto text-center p-3">
+    <section className="container mx-auto text-center p-4">
       <SectionIntro
         intro="Blog & Social Media"
         headline="But occasionally we find the time to have fun and publish stuff"
       />
-      <div className="lg:flex justify-center mt-8">
+      <div className="container mx-auto p-4 w-full md:flex md:flex-wrap items-stretch w-full">
         {props.data.allWordpressPost.edges.map(({ node }) => (
           <div key={node.id} className="md:w-1/2 p-2">
             <Card
diff --git a/src/styles/custom.css b/src/styles/general.css
similarity index 100%
rename from src/styles/custom.css
rename to src/styles/general.css