Restructuring components and styling

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'
 

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;
+}

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

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;
-}

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>