Styling and restructuring of components, config edit

src/components/SectionIntro.js

@@ -1,11 +1,31 @@
 import React from 'react'
 import Link from 'gatsby-link'
 
-const IntroDefault = ({ intro, headline, text, classes }) => (
-  <div className={`${classes}`}>
-    <h3 className="text-white opacity-50 text-sm font-light uppercase pt-2 pb-2">{intro}</h3>
-    <h1 className="text-white font-light pt-2 pb-2">{headline}</h1>
-    <p className="font-light leading-normal text-white opacity-50">{text}</p>
+let headlineDark = 'text-white'
+let headlineLight = 'text-indigo'
+
+const IntroDefault = ({ ...props }) => (
+  <div className={`${props.classes}`}>
+    <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 : ''}
+     font-light pt-1 pb-2`}
+    >
+      {props.headline}
+    </h1>
+    <p
+      className={`${props.light ? headlineDark : ''} 
+    font-light leading-normal opacity-75`}
+    >
+      {props.text}
+    </p>
   </div>
 )