Text and style changes

src/components/WorkStyle.js

@@ -18,7 +18,7 @@ const WorkStyle = ({ ...props }) => (
 
     <div className="mx-auto py-6 text-center border-grey-lighter">
       <div className="flex flex-wrap pt-6 text-grey-darker">
-        <div className="w-full md:w-1/2 p-6 md:border-r-2 border-grey-light">
+        <div className="w-full md:w-1/2 p-6 md:border-r-2 border-grey-lighter">
           <img src={HQCode} alt="High Quality Code" />
           <h3 className="text-xl my-2">High Quality Code</h3>
           <p className="leading-normal">
@@ -39,8 +39,8 @@ const WorkStyle = ({ ...props }) => (
           </p>
         </div>
       </div>
-      <div className="flex flex-wrap md:border-t-2 border-grey-light text-grey-darker text-grey-darker">
-        <div className="w-full md:w-1/2 p-4 md:border-r-2 border-grey-light">
+      <div className="flex flex-wrap md:border-t-2 border-grey-lighter text-grey-darker text-grey-darker">
+        <div className="w-full md:w-1/2 p-4 md:border-r-2 border-grey-lighter">
           <img src={ModernDevops} alt="High Quality Code" />
           <h3 className="text-xl my-2">Modern DevOps</h3>
           <p className="leading-normal">
@@ -62,8 +62,8 @@ const WorkStyle = ({ ...props }) => (
           </p>
         </div>
       </div>
-      <div className="flex flex-wrap md:border-t-2 border-grey-light text-grey-darker text-grey-darker">
-        <div className="w-full md:w-1/2 p-4 md:border-r-2 border-grey-light">
+      <div className="flex flex-wrap md:border-t-2 border-grey-lighter text-grey-darker text-grey-darker">
+        <div className="w-full md:w-1/2 p-4 md:border-r-2 border-grey-lighter">
           <img src={UXResearch} alt="High Quality Code" />
           <h3 className="text-xl my-2">UX testing/research</h3>
           <p className="leading-normal">

src/pages/about.js

@@ -6,9 +6,9 @@ import SectionIntro from '../components/SectionIntro'
 const AboutPage = () => (
   <div>
     <PageIntro
-      intro="THE TEAM"
+      intro="About Us"
       headline="Founded by Software Engineers"
-      text="Aenean eu nibh nisi. Etiam orci mauris, viverra sed turpis ac, viverra tristique odio. Proin suscipit nulla enim, ac tempus ante viverra quis."
+      text="focused on delivering solutions that make valuable impact"
       sectionClasses="mb-16 lg:mb-8"
     />
 
@@ -22,9 +22,7 @@ const AboutPage = () => (
     <section className="container mx-auto my-12 p-4">
       <SectionIntro
         headline="Our goal is long-term engagement"
-        text="We are a small company with a personal touch. We know our stuff. Our
-          people have T-shaped profiles which means that they combine a deep
-          specialism with a broad range of knowledge and skills"
+        text="We are a small company with a personal touch. We know our stuff. Our people have T-shaped profiles which means that they combine a deep specialism with a broad range of knowledge and skills"
       />
     </section>
   </div>

src/pages/contact.js

@@ -5,7 +5,7 @@ import SectionIntro from '../components/SectionIntro'
 
 const ContactPage = () => (
   <div>
-  <PageIntro intro="Contact" headline="Let's Connect" text="We're looking forward to build something awesome together" sectionClasses="mb-16 lg:mb-8" />
+  <PageIntro intro="Contact" headline="Let's Connect" text="and build something awesome together" sectionClasses="mb-16 lg:mb-8" />
 
   <section className="container mx-auto my-12 p-4">
         <SectionIntro

src/pages/index.js

@@ -79,11 +79,11 @@ const IndexPage = ({ ...props }) => (
         </div>
       </section>
 
-      <section className="container mx-auto text-center p-4 my-12">
+      <section className="container mx-auto max-w-lg 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 teams of various sizes. 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"
+          text="We think big, design smart and develop fast. We have helped organizations of various sizes bring life to ideas and existing products. We're now really interested in hearing how we can help you"
         />
         <div className="p-4 md:flex items-center max-w-full justify-center">
           <img
@@ -119,7 +119,7 @@ const IndexPage = ({ ...props }) => (
       <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"
+          headline="Occasionally we find the time to have fun and publish"
         />
         <div className="container mx-auto p-4 w-full md:flex md:flex-wrap items-stretch w-full">
           {props.data.allWordpressPost.edges.map(({ node }) => (

src/pages/services.js

@@ -8,7 +8,7 @@ const ServicesPage = () => (
   <div>
     <PageIntro
       intro="Services"
-      headline="Skilled & Creative Digital Agency"
+      headline="Experienced Digital Agency"
       text="with a mission is to make our clients stand out"
       sectionClasses="mb-16 lg:mb-8"
     />

src/templates/blog.js

@@ -9,7 +9,12 @@ class Blog extends Component {
     const data = this.props.data
     return (
       <main>
-        <PageIntro intro="Blog" headline="Occasionally we find the time to have fun and publish" sectionClasses="mb-16 lg:mb-4" />
+        <PageIntro
+          intro="Blog"
+          headline="We are busy creating great code"
+          text="but 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="mt-4 md:w-1/2 p-2">