Section intro structure and styling

src/components/Button.js

@@ -6,14 +6,10 @@ let defaultClasses =
 
 let standardBtn = 'border hover:bg-teal hover:text-white hover:border-teal'
 
-let filledBtn = 'text-grey-lightest bg-grey-darkest hover:bg-teal'
-
 const Button = ({ ...props }) => (
   <Link
     to={props.url}
-    className={`${props.standard ? standardBtn : ''} ${
-      props.filled ? filledBtn : ''
-    } ${defaultClasses} ${props.classes}`}
+    className={`${props.standard ? standardBtn : ''} ${defaultClasses} ${props.classes}`}
   >
     {props.text}
   </Link>

src/components/PageIntro.js

@@ -9,23 +9,26 @@ const PageIntro = ({ ...props }) => (
       <div className="text-center lg:text-left lg:mt-4">
         <SectionIntro
           light
-          intro="Welcome To Saburly"
+          intro={props.intro}
           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."
+          headline={props.headline}
+          text={props.text}
         />
+        { props.button && 
         <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"
+          text={props.buttonText}
+          url={props.url}
+          classes={props.buttonClasses}
         />
+        }
       </div>
-      <img
-        src={props.image}
-        className="lg:-mt-4 md:max-w-md xl:max-w-full z-10"
-        alt="Software Development Agency"
-      />
+      {props.image && (
+        <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>

src/components/SectionIntro.js

@@ -6,26 +6,32 @@ let headlineLight = 'text-indigo'
 
 const IntroDefault = ({ ...props }) => (
   <div className={`${props.classes}`}>
-    <h3
-      className={`
+    {props.intro && (
+      <h3
+        className={`
       ${
         props.light ? headlineDark : headlineLight
       } opacity-50 text-sm font-light uppercase pt-2 pb-1`}
-    >
-      {props.intro}
-    </h3>
-    <h1
-      className={`${props.light ? headlineDark : ''}
+      >
+        {props.intro}
+      </h3>
+    )}
+    {props.headline && (
+      <h1
+        className={`${props.light ? headlineDark : ''}
      font-light pt-1 pb-2`}
-    >
-      {props.headline}
-    </h1>
-    <p
-      className={`${props.light ? headlineDark : ''} 
+      >
+        {props.headline}
+      </h1>
+    )}
+    {props.text && (
+      <p
+        className={`${props.light ? headlineDark : ''} 
     font-light leading-normal opacity-70`}
-    >
-      {props.text}
-    </p>
+      >
+        {props.text}
+      </p>
+    )}
   </div>
 )