text: import React from "react";
  import PropTypes from  "prop-types";
  
  function DarkHeroA(props) {
    return (
      <section className="text-gray-400 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://source.unsplash.com/720x600" />
          </div>
        </div>
      </section>
    );
  }
  
  DarkHeroA.defaultProps = {
    theme: 'indigo'
  };
  
  DarkHeroA.propTypes = {
    theme: PropTypes.string.isRequired
  };
  
  export default DarkHeroA;
  