Various design improvements

src/pages/about.js

@@ -20,7 +20,7 @@ class AboutPage extends Component {
       <div>
         <PageIntro
           headline="Founded by developers"
-          text="...We know the challenges and pitfalls when creating modern software. ...Focused on creating solutions that make valuable impact"
+          text="Saburly was founded in 2017 by experienced software developers that understand what it takes to create modern digital solutions. Our focus is on gathering and guiding the best talents in the industry in order to create digital experiences that make valuable impact."
           image={IntroImage}
           imgClasses="border-white border-8 rounded postImgContainer -mb-12"
         />

src/pages/contact.js

@@ -11,7 +11,7 @@ import FormImage from '../images/contact-web-consultancy.svg'
 const ContactPage = () => (
   <div>
     <PageIntro
-      headline="Let's discover possibilities"
+      headline="Let's connect & discover possibilities"
       text="We are always on a lookout for exciting challenges. Feel free to contact us if you want to start something great or just find out more about what we do."
       sectionClasses="lg:mb-8"
       image={ContactImage}
@@ -106,14 +106,19 @@ const ContactPage = () => (
     </section>
 
     <section className="bg-contact-form">
-      <form className="mx-auto pt-16 p-6 max-w-md">
+      <form
-        <SectionIntro headline="Let's Connect" light />
+        action="https://formspree.io/info@saburly.com"
+        className="mx-auto pt-16 p-6 max-w-md"
+        method="POST"
+      >
+        <SectionIntro headline="Send us a message" light />
         <div className="flex flex-wrap">
           <input
             className="appearance-none bg-transparent border-contact block w-full text-white py-2 border-grey-light"
             id="grid-first-name"
             type="text"
             placeholder="Name"
+            name="name"
             required
           />
 
@@ -122,6 +127,7 @@ const ContactPage = () => (
             id="grid-first-name"
             type="text"
             placeholder="Email"
+            name="_replyto"
             required
           />
 
@@ -129,13 +135,15 @@ const ContactPage = () => (
             className="appearance-none bg-transparent border-contact block w-full text-white py-2 border-grey-light"
             id="grid-last-name"
             type="text"
-            placeholder="Message..."
+            name="message"
+            placeholder="Project description or message"
             required
           />
         </div>
 
         <button
           className="mt-4 shadow bg-teal hover:bg-teal-light text-white py-2 px-4 rounded"
+          value="Send"
           type="submit"
         >
           Send

src/pages/index.js

@@ -30,7 +30,7 @@ const IndexPage = ({ ...props }) => (
       <h2 className="text-black pt-1 pb-2">
         We{' '}
         <Typed
-          strings={['discover', 'code', 'design', 'maintain']}
+          strings={['imagine', 'develop', 'design', 'maintain']}
           typeSpeed={100}
           backSpeed={50}
           backDelay={3000}
@@ -112,7 +112,7 @@ const IndexPage = ({ ...props }) => (
       </section>
 
       <section className="text-center p-8 relative bg-saburly-lighter">
-        <SectionIntro headline="Occasionally we find the time to publish" />
+        <SectionIntro headline="Occasionally we have fun & publish" />
         <div className="container mx-auto 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">

src/styles/general.css

@@ -102,3 +102,11 @@
 .typed-cursor {
   color: #8e7cb7;
 }
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  color: #032363 !important;
+}

src/templates/blog.js

@@ -10,8 +10,8 @@ class Blog extends Component {
     return (
       <main>
         <PageIntro
-          headline="We are busy coding"
+          headline="Bugs keep us busy"
-          text="but occasionally we find the time to have fun & publish"
+          text="but occasionally we have fun & 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">

src/templates/post-default.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react'
 import Helmet from 'react-helmet'
 class PostDefault extends Component {
   render() {
@@ -9,23 +9,30 @@ class PostDefault extends Component {
           title={`${data.wordpressPost.title} - Saburly.com`}
           meta={[
             { name: 'description', content: 'We code & design great software' },
-            { name: 'keywords', content: 'software, design, coding, programming, code, consulting' },
+            {
+              name: 'keywords',
+              content:
+                'software, design, coding, programming, code, consulting',
+            },
           ]}
         />
-        <h1>Specific Post - {data.wordpressPost.title}</h1>
+        <main className="container mx-auto p-4 sm:p-10">
-        <h1>Slug - {data.wordpressPost.slug}</h1>
+          <h1>Specific Post - {data.wordpressPost.title}</h1>
-        <div dangerouslySetInnerHTML={{
+          <h1>Slug - {data.wordpressPost.slug}</h1>
-          __html: data.wordpressPost.content
+          <div
-        }}
+            dangerouslySetInnerHTML={{
-        />
+              __html: data.wordpressPost.content,
+            }}
+          />
+        </main>
       </div>
-    );
+    )
   }
 }
 
 export const query = graphql`
   query PostDefaultQuery($slug: String!) {
-    wordpressPost(slug: {eq: $slug}) {
+    wordpressPost(slug: { eq: $slug }) {
       title
       slug
       content
@@ -33,4 +40,4 @@ export const query = graphql`
   }
 `
 
-export default PostDefault;
+export default PostDefault