hero-culture.html

<div class="min-w-screen min-h-screen flex items-center justify-center bg-cover relative flex flex-col" style="background-image:url('https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80')">
    <div class="w-full h-full absolute inset-0 bg-black bg-opacity-75"></div>
    
    <div class="flex max-w-6xl mx-auto">
        <div class="w-1/2 container text-white text-2xl font-hairline relative pb-1 px-10 flex flex-col pr-12">
            <h2 class="text-5xl text-white font-extrabold relative z-20 leading-tight">Build a culture<br> that excels</h2>
            <p class="relative z-20 block text-xl mt-4">We've created the ultimate resource for turning your culture into a super-powered productivity machine by encouraging collaboration growth, and incentives!</p>
            <div class="flex mt-4">
                <a href="#_" class="flex items-center justify-center self-start px-5 py-3 border border-transparent text-base leading-tight font-medium rounded-lg shadow text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo transition duration-150 ease-in-out md:py-4 md:text-lg md:px-8 mt-5">Get Started</a>
                <a href="#_" class="flex items-center justify-center self-start px-5 py-3 border-transparent text-base leading-tight font-medium rounded-lg shadow text-indigo-500 bg-gray-200 hover:bg-white focus:outline-none focus:border-gray-100 focus:shadow-outline-gray transition duration-150 ease-in-out md:py-4 md:text-lg md:px-8 mt-5 ml-5">How It Works</a>
            </div>
        </div>
        <div class="w-1/2 relative rounded-lg overflow-hidden shadow-2xl cursor-pointer group">
            <div class="absolute w-full h-full flex items-center justify-center bg-opacity-25 bg-black">
                <span class="w-20 h-20 bg-white rounded-full bg-opacity-75 flex justify-center items-center">
                    <svg class="w-auto h-8 ml-1 text-indigo-600 fill-current" viewBox="0 0 52 66" xmlns="http://www.w3.org/2000/svg"><path d="M50 30.7L4.1.6C2.6-.4.8.9.8 2.9v60.3c0 2 1.8 3.3 3.3 2.3L50 35.3c1.5-1 1.5-3.6 0-4.6z" fill-rule="nonzero"/></svg>
                </span>
            </div>
            <img src="https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3290&q=80" class="w-full h-full object-cover">
        </div>
    </div>
</div>