From 81ab174b02b270e9a97685ccf4cea98d4005b5d5 Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Sat, 7 Jul 2018 00:07:28 +0200
Subject: [PATCH] Restructuring and layout fixes

---
 src/components/Header.js    |   2 -
 src/components/PageIntro.js |  18 +--
 src/pages/index.js          | 232 ++++++++++++++++++------------------
 src/templates/blog.js       |   4 +-
 4 files changed, 129 insertions(+), 127 deletions(-)

diff --git a/src/components/Header.js b/src/components/Header.js
index 4d675a5..149a6ca 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -11,7 +11,6 @@ let menuClasses =
 class Header extends Component {
   render() {
     return (
-      <div>
         <header className="bg-saburly-indigo">
           <nav className="container mx-auto flex items-center justify-between lg:p-6 p-4">
             <Link to="/">
@@ -50,7 +49,6 @@ class Header extends Component {
             </div>
           </nav>
         </header>
-      </div>
     )
   }
 }
diff --git a/src/components/PageIntro.js b/src/components/PageIntro.js
index 465411d..1d6f265 100644
--- a/src/components/PageIntro.js
+++ b/src/components/PageIntro.js
@@ -10,17 +10,19 @@ const PageIntro = ({ ...props }) => (
         <SectionIntro
           light
           intro={props.intro}
-          classes="lg:text-left lg:max-w-xs content-center"
+          classes={`lg:text-left lg:max-w-sm content-center ${
+            props.sectionClasses
+          }`}
           headline={props.headline}
           text={props.text}
         />
-        { props.button && 
-        <Button
-          text={props.buttonText}
-          url={props.url}
-          classes={props.buttonClasses}
-        />
-        }
+        {props.button && (
+          <Button
+            text={props.buttonText}
+            url={props.url}
+            classes={props.buttonClasses}
+          />
+        )}
       </div>
       {props.image && (
         <img
diff --git a/src/pages/index.js b/src/pages/index.js
index a01b917..166dfb2 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -16,130 +16,132 @@ import LogoKinnarps from '../images/logo-kinnarps-color.svg'
 import LogoCoor from '../images/logo-coor-color.svg'
 
 const IndexPage = ({ ...props }) => (
-  <main>
-    <PageIntro button buttonText="Let's Build Together" buttonUrl="/proposal" buttonClasses="text-white shadow-md hover:shadow-lg rounded-full mt-4 font-light btn-saburly-green mb-20" intro="Welcome To Saburly" 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" image={ImgIntro} />
+  <div>
+    <PageIntro button buttonText="Let's Build Together" url="/proposal" buttonClasses="text-white shadow-md hover:shadow-lg rounded-full mt-4 font-light btn-saburly-green mb-20" intro="Welcome To Saburly" 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 daily" image={ImgIntro} />
 
-    <section className="container mx-auto text-center my-12 p-4">
-      <SectionIntro
-        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"
-      />
-    </section>
-
-    <section className="bg-saburly-indigolight relative">
-      <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' }}
+    <main>
+      <section className="container mx-auto text-center my-12 p-4">
+        <SectionIntro
+          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"
         />
-      </svg>
+      </section>
 
-      <Service
-        img={ImgDesign}
-        title="UX & UI Design"
-        text="Our approach is simple: focus on how people will actually use the products. We offer prototyping, UI and UX design for web and mobile products. We shape UX through research, data & content analysis"
-      />
+      <section className="bg-saburly-indigolight relative">
+        <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>
 
-      <Service
-        reversed
-        img={ImgFullstack}
-        title="Fullstack Web Development"
-        text="We build web applications using the technologies such as JavaScript, React, Ruby on Rails, Python, Node.js, and Elixir. We write high-quality code that is maintainable and will stand the test of time"
-      />
+        <Service
+          img={ImgDesign}
+          title="UX & UI Design"
+          text="Our approach is simple: focus on how people will actually use the products. We offer prototyping, UI and UX design for web and mobile products. We shape UX through research, data & content analysis"
+        />
 
-      <Service
-        img={ImgMobile}
-        imgClasses="max-h-sm"
-        title="Mobile Development"
-        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"
-      />
+        <Service
+          reversed
+          img={ImgFullstack}
+          title="Fullstack Web Development"
+          text="We build web applications using the technologies such as JavaScript, React, Ruby on Rails, Python, Node.js, and Elixir. We write high-quality code that is maintainable and will stand the test of time"
+        />
 
-      <div className="py-8 text-center lg:flex justify-center">
+        <Service
+          img={ImgMobile}
+          imgClasses="max-h-sm"
+          title="Mobile Development"
+          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="py-8 text-center lg:flex justify-center">
+          <Button
+            standard
+            text="More About What We Do"
+            url="/services"
+            classes="m-1 rounded-full hover:shadow-md text-grey-darker hover:shadow"
+          />
+          <Button
+            standard
+            text="How We Work"
+            url="/how-we-work"
+            classes="m-1 rounded-full hover:shadow-md text-grey-darker hover:shadow"
+          />
+        </div>
+      </section>
+
+      <section className="container mx-auto text-center p-4 my-12">
+        <SectionIntro
+          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 md:flex items-center max-w-full justify-center">
+          <img
+            src={LogoIBM}
+            className="opacity-50 hover:opacity-100 client-logo p-1"
+            alt="IBM Logo"
+          />
+          <img
+            src={LogoRicoh}
+            className="opacity-50 hover:opacity-100 client-logo p-1"
+            alt="Ricoh Logo"
+          />
+          <img
+            src={LogoCoor}
+            className="opacity-50 hover:opacity-100 client-logo p-1"
+            alt="Coor Logo"
+          />
+          <img
+            src={LogoKinnarps}
+            className="opacity-50 hover:opacity-100 client-logo p-1"
+            alt="Kinnarps Logo"
+          />
+        </div>
+
+        <Button
+          filled
+          text="Get a free proposal"
+          url="/proposal"
+          classes="text-white shadow-md hover:shadow-lg rounded-full mt-4 font-light btn-saburly-green"
+        />
+      </section>
+
+      <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="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
+                url={`blog/${node.slug}`}
+                title={node.title}
+                date={node.date}
+                excerpt={node.excerpt}
+                image={
+                  node.featured_media
+                    ? node.featured_media.localFile.childImageSharp.resolutions
+                    : undefined
+                }
+              />
+            </div>
+          ))}
+        </div>
         <Button
           standard
-          text="More About What We Do"
-          url="/services"
-          classes="m-1 rounded-full hover:shadow-md text-grey-darker hover:shadow"
+          text="More Posts"
+          url="/blog"
+          classes="mt-2 mb-8 hover:shadow-md rounded-full text-grey-darker"
         />
-        <Button
-          standard
-          text="How We Work"
-          url="/how-we-work"
-          classes="m-1 rounded-full hover:shadow-md text-grey-darker hover:shadow"
-        />
-      </div>
-    </section>
-
-    <section className="container mx-auto text-center p-4 my-12">
-      <SectionIntro
-        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 md:flex items-center max-w-full justify-center">
-        <img
-          src={LogoIBM}
-          className="opacity-50 hover:opacity-100 client-logo p-1"
-          alt="IBM Logo"
-        />
-        <img
-          src={LogoRicoh}
-          className="opacity-50 hover:opacity-100 client-logo p-1"
-          alt="Ricoh Logo"
-        />
-        <img
-          src={LogoCoor}
-          className="opacity-50 hover:opacity-100 client-logo p-1"
-          alt="Coor Logo"
-        />
-        <img
-          src={LogoKinnarps}
-          className="opacity-50 hover:opacity-100 client-logo p-1"
-          alt="Kinnarps Logo"
-        />
-      </div>
-
-      <Button
-        filled
-        text="Get a free proposal"
-        url="/proposal"
-        classes="text-white shadow-md hover:shadow-lg rounded-full mt-4 font-light btn-saburly-green"
-      />
-    </section>
-
-    <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="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
-              url={`blog/${node.slug}`}
-              title={node.title}
-              date={node.date}
-              excerpt={node.excerpt}
-              image={
-                node.featured_media
-                  ? node.featured_media.localFile.childImageSharp.resolutions
-                  : undefined
-              }
-            />
-          </div>
-        ))}
-      </div>
-      <Button
-        standard
-        text="More Posts"
-        url="/blog"
-        classes="mt-2 mb-8 hover:shadow-md rounded-full text-grey-darker"
-      />
-    </section>
-  </main>
+      </section>
+    </main>
+  </div>
 )
 
 export const query = graphql`
diff --git a/src/templates/blog.js b/src/templates/blog.js
index 4a9be0c..81a15a0 100644
--- a/src/templates/blog.js
+++ b/src/templates/blog.js
@@ -9,10 +9,10 @@ class Blog extends Component {
     const data = this.props.data
     return (
       <div>
-        <PageIntro intro="Blog" headline="Occasionally we find the time to have fun and publish" />
+        <PageIntro intro="Blog" headline="Occasionally we find the time to have fun and publish" sectionClasses="mb-16 lg:mb-4" />
         <div className="container mx-auto p-4 w-full md:flex md:flex-wrap items-stretch w-full">
           {data.allWordpressPost.edges.map(({ node }) => (
-            <div key={node.id} className="md:w-1/2 p-2">
+            <div key={node.id} className="mt-4 md:w-1/2 p-2">
               <Card
                 url={`blog/${node.slug}`}
                 title={node.title}