From 0074bc5c9ab9c7b02dc8d9064fdffd69bca8009f Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Sat, 30 Jun 2018 15:28:45 +0200
Subject: [PATCH] Markup structure, add InfoBox components

---
 src/components/InfoBox.js      | 11 +++++++++
 src/components/IntroDefault.js |  7 ++----
 src/pages/index.js             | 41 +++++++++++++++++++++++++++++-----
 3 files changed, 49 insertions(+), 10 deletions(-)
 create mode 100644 src/components/InfoBox.js

diff --git a/src/components/InfoBox.js b/src/components/InfoBox.js
new file mode 100644
index 0000000..e3bf52a
--- /dev/null
+++ b/src/components/InfoBox.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import Link from 'gatsby-link'
+
+const InfoBox = ({ headline, text, classes }) => (
+  <div className={`${classes}`}>
+    <h3>{headline}</h3>
+    <p>{text}</p>
+  </div>
+)
+
+export default InfoBox
diff --git a/src/components/IntroDefault.js b/src/components/IntroDefault.js
index ded4f65..c38290d 100644
--- a/src/components/IntroDefault.js
+++ b/src/components/IntroDefault.js
@@ -1,14 +1,11 @@
 import React from 'react'
 import Link from 'gatsby-link'
 
-import Button from './Button'
-
-const IntroDefault = ({ intro, headline, text }) => (
-  <div className="max-w-xs">
+const IntroDefault = ({ intro, headline, text, classes }) => (
+  <div className={`${classes}`}>
     <h3>{intro}</h3>
     <h1>{headline}</h1>
     <p>{text}</p>
-    <Button text="Let's Get In Touch" url="/proposal" classes="rounded-full" />
   </div>
 )
 
diff --git a/src/pages/index.js b/src/pages/index.js
index d2c5ee9..cff74a5 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,14 +1,45 @@
 import React from 'react'
 
 import IntroDefault from '../components/IntroDefault'
-
+import InfoBox from '../components/InfoBox'
+import Button from '../components/Button'
 import ImgBuildSite from '../images/programming-company.svg'
 
 const IndexPage = () => (
-  <section className="lg:flex items-center p-3">
-    <IntroDefault 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." />
-    <img src={ImgBuildSite} className="overflow-hidden" />
-  </section>
+  <div>
+    <section className="lg:flex items-center p-3">
+      <div>
+        <IntroDefault intro="Welcome To Saburly" classes="lg:max-w-xs" 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 text="Let's Get In Touch" url="/proposal" classes="rounded-full" />
+      </div>
+      <img src={ImgBuildSite} className="overflow-hidden" />
+    </section>
+
+    <section className="text-center p-3">
+      <IntroDefault intro="Solutions" headline="Because beautiful code makes our heart pound" text="We have a passion for great software and design with the help of modern technologies. Custom end-to-end solutions is our speciality and our skilled team can even help you with initial analysis, architecture design, testing and deployments" />
+    </section>
+
+    <InfoBox headline="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." />
+
+    <InfoBox headline="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." />
+
+    <InfoBox headline="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." />
+
+    <Button text="More ABout What We Do" url="/services" classes="rounded-full" />
+    <Button text="How We Work" url="/work" classes="rounded-full" />
+
+    <section className="text-center p-3">
+      <IntroDefault intro="Showcase" headline="We don’t descriminate, all screens & devices are welcome" />
+    </section>
+
+    <section className="text-center p-3">
+      <IntroDefault 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" />
+    </section>
+
+    <section className="text-center p-3">
+      <IntroDefault intro="Blog & Social Media" headline="But occasionally we find the time to have fun and publish stuff" />
+    </section>
+  </div>
 )
 
 export default IndexPage