first commit

src/blocks/hero/dark/a.js

@@ -0,0 +1,44 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkHeroA(props) {
+  return (
+    <section className="text-gray-500 bg-gray-900 body-font">
+      <div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
+        <div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
+          <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">
+            Before they sold out<br className="hidden lg:inline-block" />
+            readymade gluten
+          </h1>
+          <p className="mb-8 leading-relaxed">
+            Copper mug try-hard pitchfork pour-over freegan heirloom neutra air
+            plant cold-pressed tacos poke beard tote bag. Heirloom echo park
+            mlkshk tote bag selvage hot chicken authentic tumeric truffaut
+            hexagon try-hard chambray.
+          </p>
+          <div className="flex justify-center">
+            <button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
+              Button
+            </button>
+            <button className="ml-4 inline-flex text-gray-400 bg-gray-800 border-0 py-2 px-6 focus:outline-none hover:bg-gray-700 hover:text-white rounded text-lg">
+              Button
+            </button>
+          </div>
+        </div>
+        <div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
+          <img className="object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+DarkHeroA.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkHeroA.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkHeroA;