Restructuring and styling services and index pages

src/components/Card.js

@@ -4,7 +4,7 @@ import Link from 'gatsby-link'
 import ImgSprint from '../images/wow-we-did-design-sprint-remotely.png'
 
 const Card = ({ ...props }) => (
-  <article className="h-full w-full rounded overflow-hidden shadow-md hover:shadow-lg">
+  <article className="h-full w-full rounded overflow-hidden bg-white border-bottom-saburly hover:shadow-md">
     <Link to={props.url}>
       {props.image ? (
         <img className="w-full" src={props.image.src} />

src/components/InfoBox.js

@@ -3,8 +3,8 @@ import Link from 'gatsby-link'
 
 const InfoBox = ({ ...props }) => (
   <div className={`${props.classes}`}>
-    <h2>{props.headline}</h2>
-    <p className="leading-normal">{props.text}</p>
+    <h2 className="text-black font-medium">{props.headline}</h2>
+    <p className="text-black-light leading-normal font-light">{props.text}</p>
   </div>
 )
 

src/components/SectionIntro.js

@@ -11,7 +11,7 @@ const IntroDefault = ({ ...props }) => (
         className={`
       ${
         props.light ? headlineDark : headlineLight
-      } opacity-50 text-sm font-light uppercase pt-2 pb-1`}
+      } opacity-50 text-sm font-light text-black uppercase pt-2 pb-1`}
       >
         {props.intro}
       </h3>
@@ -19,7 +19,7 @@ const IntroDefault = ({ ...props }) => (
     {props.headline && (
       <h1
         className={`${props.light ? headlineDark : ''}
-     font-normal pt-1 pb-2`}
+     font-normal text-black pt-1 pb-2`}
       >
         {props.headline}
       </h1>
@@ -27,7 +27,7 @@ const IntroDefault = ({ ...props }) => (
     {props.text && (
       <p
         className={`${props.light ? headlineDark : ''} 
-    font-light leading-normal opacity-70`}
+    font-light text-black-light leading-normal`}
       >
         {props.text}
       </p>

src/components/Service.js

@@ -13,7 +13,7 @@ const Service = ({ ...props }) => (
       alt={`${props.title} agency`}
     />
     <InfoBox
-      classes="p-4 md:m-0 opacity-70 md:max-w-sm"
+      classes="p-4 md:m-0 md:max-w-sm"
       headline={props.title}
       text={props.text}
     />

src/components/WorkStyle.js

@@ -10,7 +10,8 @@ import UXResearch from '../images/ux-research.svg'
 import UnitIntegration from '../images/unit-and-integration-testing.svg'
 
 const WorkStyle = ({ ...props }) => (
-  <section className="container rounded overflow-hidden shadow-md mx-auto text-center my-4 bg-white">
+  <section className="container rounded overflow-hidden border-bottom-saburly mx-auto my-4 bg-white">
+    {props.children}
     <div className="mx-auto text-center border-grey-lighter">
       <div className="flex flex-wrap text-grey-darker">
         <div className="w-full md:w-1/2 p-8 md:border-r-2 border-grey-lighter">