Restructuring components and styling

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