Hero

<div class="w-full">
  <section class="pb-20 bg-blueGray-100">
    <div class="container mx-auto px-4">
      <div class="pt-6">
        <div class="mb-12 flex flex-wrap -mx-4 justify-center">
          <div class="px-4 relative w-full lg:w-8/12 text-center">
            <h6 class="mb-2 font-bold uppercase text-lightBlue-500">with burned soles</h6>
            <h3 class="text-3xl font-bold mt-3 mb-1 text-blueGray-700">I've risen with the soles burned</h3>
            <p class="mt-2 mb-4 text-xl leading-relaxed text-blueGray-400">I've fought hard to get out of the hole I was in. I've dusted myself, and exactly like a dancer, I have danced with the fear, you should have filmed me.</p>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap">
        <div class="lg:pt-12 pt-6 w-full md:w-4/12 px-4 text-center">
          <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg">
            <div class="px-4 py-5 flex-auto">
              <div class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-gradient-to-b from-red-400 to-red-600 bg-red-400"><i class="fas fa-award"></i></div>
              <h6 class="text-xl font-semibold">Awarded Agency</h6>
              <p class="mt-2 mb-4 text-blueGray-400">Divide details about your product or agency work into parts. A paragraph describing a feature will be enough.</p>
            </div>
          </div>
        </div>
        <div class="lg:pt-12 pt-6 w-full md:w-4/12 px-4 text-center">
          <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg">
            <div class="px-4 py-5 flex-auto">
              <div class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-gradient-to-b from-lightBlue-400 to-lightBlue-600 bg-lightBlue-400"><i class="fas fa-retweet"></i></div>
              <h6 class="text-xl font-semibold">Free Revisions</h6>
              <p class="mt-2 mb-4 text-blueGray-400">Keep you user engaged by providing meaningful information. Remember that by this time, the user is curious.</p>
            </div>
          </div>
        </div>
        <div class="lg:pt-12 pt-6 w-full md:w-4/12 px-4 text-center">
          <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg">
            <div class="px-4 py-5 flex-auto">
              <div class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-gradient-to-b from-emerald-400 to-emerald-600 bg-emerald-400"><i class="fas fa-fingerprint"></i></div>
              <h6 class="text-xl font-semibold">Verified Company</h6>
              <p class="mt-2 mb-4 text-blueGray-400">Write a few lines about each one. A paragraph describing a feature will be enough. Keep you user engaged!</p>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap items-center mt-32">
        <div class="w-full md:w-5/12 px-4 mr-auto ml-auto">
          <div class="text-blueGray-500 bg-white p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full"><i class="fas fa-user-friends text-xl"></i></div>
          <h3 class="text-3xl mb-2 font-semibold leading-normal">Working with us is a pleasure</h3>
          <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-700">Don't let your users guess by attaching tooltips and popoves to any element. Just make sure you enable them first via JavaScript.</p>
          <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-700">The kit comes with three pre-built pages to help you get started faster. You can change the text and images and you're good to go. Just make sure you enable them first via JavaScript.</p>
          <a class="font-bold text-blueGray-800 mt-8" href="#/">Check Notus Design System PRO!</a>
        </div>
        <div class="w-full md:w-4/12 px-4 mr-auto ml-auto">
          <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg bg-lightBlue-500">
            <img alt="..." src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1051&amp;q=80" class="w-full align-middle rounded-t-lg">
            <blockquote class="relative p-8 mb-4">
              <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block h-95-px -top-94-px">
                <polygon points="-30,95 583,95 583,65" class="text-lightBlue-500 fill-current"></polygon>
              </svg>
              <h4 class="text-xl font-bold text-white">Top Notch Services</h4>
              <p class="text-md font-light mt-2 text-white">The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever happens.</p>
            </blockquote>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

<div class="w-full">
  <section class="relative pb-20">
    <div class="w-full pointer-events-none overflow-hidden h-70-px" style="transform: translateZ(0px);">
      <svg class="absolute bottom-0 overflow-hidden" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.1" viewBox="0 0 2560 100" x="0" y="0">
        <polygon class="text-white fill-current" points="2560 0 2560 100 0 100"></polygon>
      </svg>
    </div>
    <div class="container mx-auto px-4 pt-20 bg-white">
      <div class="flex flex-wrap -mx-4 justify-center">
        <div class="px-4 relative w-full text-center">
          <span class="text-lightBlue-500 bg-lightBlue-200 text-xs font-bold inline-block py-1 uppercase uppercase last:mr-0 mr-1 leading-tight rounded px-2">with burned soles</span>
          <h2 class="text-4xl font-bold mt-3 mb-1 text-blueGray-700">You need to fight like David with Goliath</h2>
          <p class="mt-2 mb-4 text-xl leading-relaxed text-blueGray-400">Brother, life in est is not like in the west. Over the night, the black clouds appear, but at least I have my poetry for my freedom. The victory is for those that rise after they fall.</p>
        </div>
      </div>
      <div class="items-center flex flex-wrap">
        <div class="w-full md:w-4/12 ml-auto mr-auto px-4"><img alt="..." class="max-w-full rounded-lg shadow-lg" src="https://images.unsplash.com/photo-1555212697-194d092e3b8f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80"></div>
        <div class="w-full md:w-5/12 ml-auto mr-auto px-4">
          <div class="md:pr-12">
            <div class="text-lightBlue-500 bg-lightBlue-200 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full"><i class="fas fa-rocket text-xl"></i></div>
            <h3 class="text-3xl font-semibold">A growing company</h3>
            <p class="mt-4 text-lg leading-relaxed text-blueGray-500">The extension comes with three pre-built pages to help you get started faster. You can change the text and images and you're good to go.</p>
            <ul class="list-none mt-6">
              <li class="py-2">
                <div class="flex items-center">
                  <div><span class="text-lightBlue-500 bg-lightBlue-200 text-xs font-semibold inline-block w-8 h-8 flex items-center justify-center uppercase rounded-full mr-3"><i class="fas fa-fingerprint"></i></span></div>
                  <div>
                    <h4 class="text-blueGray-500">Carefully crafted components</h4>
                  </div>
                </div>
              </li>
              <li class="py-2">
                <div class="flex items-center">
                  <div><span class="text-lightBlue-500 bg-lightBlue-200 text-xs font-semibold inline-block w-8 h-8 flex items-center justify-center uppercase rounded-full mr-3"><i class="fas fa-pager"></i></span></div>
                  <div>
                    <h4 class="text-blueGray-500">Amazing page examples</h4>
                  </div>
                </div>
              </li>
              <li class="py-2">
                <div class="flex items-center">
                  <div><span class="text-lightBlue-500 bg-lightBlue-200 text-xs font-semibold inline-block w-8 h-8 flex items-center justify-center uppercase rounded-full mr-3"><i class="far fa-paper-plane"></i></span></div>
                  <div>
                    <h4 class="text-blueGray-500">Dynamic components</h4>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

<div class="w-full">
  <section class="relative block">
    <div class="w-full pointer-events-none overflow-hidden h-70-px" style="transform: translateZ(0px);">
      <svg class="absolute bottom-0 overflow-hidden" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.1" viewBox="0 0 2560 100" x="0" y="0">
        <polygon class="text-blueGray-900 fill-current" points="2560 0 2560 100 0 100"></polygon>
      </svg>
    </div>
    <div class="bg-blueGray-900 py-24">
      <div class="container mx-auto px-4">
        <div class="mb-12 flex flex-wrap -mx-4 justify-center">
          <div class="px-4 relative w-full lg:w-8/12 text-center">
            <h6 class="mb-2 font-bold uppercase text-blueGray-200">On the coastline</h6>
            <h3 class="text-3xl font-bold mt-3 mb-1 text-white">We are missing the summer</h3>
            <p class="mt-2 mb-4 text-xl leading-relaxed text-white opacity-75">We're waiting for the weather to warm up so that we can go to the coastline. We really miss the summertime, our second home the coastline.</p>
          </div>
        </div>
        <div class="flex flex-wrap mt-12 justify-center">
          <div class="w-full lg:w-3/12 px-4 text-center">
            <div class="text-blueGray-900 bg-white p-3 w-12 h-12 shadow-lg rounded-full inline-flex items-center justify-center"><i class="fas fa-medal text-xl"></i></div>
            <h6 class="text-white text-xl mt-5 font-semibold">Excelent Services</h6>
            <p class="text-blueGray-500 mt-2 mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
          <div class="w-full lg:w-3/12 px-4 text-center">
            <div class="text-blueGray-900 bg-white p-3 w-12 h-12 shadow-lg rounded-full inline-flex items-center justify-center"><i class="fas fa-poll text-xl"></i></div>
            <h6 class="text-white text-xl mt-5 font-semibold">Grow your market</h6>
            <p class="text-blueGray-500 mt-2 mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
          <div class="w-full lg:w-3/12 px-4 text-center">
            <div class="text-blueGray-900 bg-white p-3 w-12 h-12 shadow-lg rounded-full inline-flex items-center justify-center"><i class="fas fa-lightbulb text-xl"></i></div>
            <h6 class="text-white text-xl mt-5 font-semibold">Launch time</h6>
            <p class="text-blueGray-500 mt-2 mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

<div class="w-full">
  <div class="py-12">
    <div class="flex flex-wrap -mx-4 justify-center">
      <div class="px-4 relative w-full text-center">
        <span class="text-pink-500 bg-pink-200 text-xs font-bold inline-block py-1 uppercase uppercase last:mr-0 mr-1 leading-tight rounded px-2">Lost angels</span>
        <h2 class="text-4xl font-bold mt-3 mb-1 text-blueGray-700">Why did you last so much, nobody knows</h2>
        <p class="mt-2 mb-4 text-xl leading-relaxed text-blueGray-400">There will come a day, when you'll fall again, and you know this, but like myself, you too have some angels that help you.</p>
      </div>
    </div>
    <div class="items-center flex flex-wrap -mx-4">
      <div class="ml-auto text-left mt-6 px-4 relative w-full lg:w-4/12">
        <div class="shadow-lg rounded border-0 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg text-white bg-blueGray-500">
          <img class="w-full flex-shrink-0 rounded-t-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/img-1.f2fd521a.jpg" alt="...">
          <blockquote class="p-6 relative mb-4">
            <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="block w-full absolute text-blueGray-700 h-95-px -top-94-px left-0">
              <polygon points="0,52 583,95 0,95" class="text-blueGray-500 fill-current"></polygon>
              <polygon points="0,42 583,95 683,0 0,95" opacity=".2" class="text-blueGray-500 fill-current"></polygon>
            </svg>
            <h4 class="text-2xl font-semibold mt-0 text-white">Notus Design System</h4>
            <p class="text-white mt-2">That’s my skill, I like to create things that last many years. I’m not really specifically talented at anything except for the ability to learn. That's it, see you at top...</p>
          </blockquote>
        </div>
      </div>
      <div class="mr-auto px-4 relative w-full lg:w-7/12">
        <div class="flex flex-wrap -mx-4">
          <div class="px-4 relative w-full md:w-6/12">
            <div class="bg-orange-500 mt-8 rounded-lg text-left p-6 flex items-start">
              <div class="flex-1">
                <div class="text-orange-500 bg-white shadow-lg rounded rounded-full justify-center items-center text-center p-2 mx-auto mb-5 inline-flex w-12 h-12"><i class="fas fa-smile-beam text-xl"></i></div>
                <h4 class="text-2xl font-semibold leading-normal text-white">Best Quality</h4>
                <p class="mt-2 text-white">It becomes harder for us to give others a hand. We get our heart broken by people we love.</p>
              </div>
            </div>
          </div>
          <div class="px-4 relative w-full md:w-6/12">
            <div class="bg-lightBlue-500 mt-8 rounded-lg text-left p-6 flex items-start">
              <div class="flex-1">
                <div class="text-lightBlue-500 bg-white shadow-lg rounded rounded-full justify-center items-center text-center p-2 mx-auto mb-5 inline-flex w-12 h-12"><i class="fas fa-palette text-xl"></i></div>
                <h4 class="text-2xl font-semibold leading-normal text-white">Awesome Design</h4>
                <p class="mt-2 text-white">As we live, our hearts turn colder. Cause pain is what we go through as we become older.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="flex flex-wrap -mx-4">
          <div class="px-4 relative w-full md:w-6/12">
            <div class="bg-red-500 mt-8 rounded-lg text-left p-6 flex items-start">
              <div class="flex-1">
                <div class="text-red-500 bg-white shadow-lg rounded rounded-full justify-center items-center text-center p-2 mx-auto mb-5 inline-flex w-12 h-12"><i class="fas fa-running text-xl"></i></div>
                <h4 class="text-2xl font-semibold leading-normal text-white">Fast Development</h4>
                <p class="mt-2 text-white">We’re not always in the position that we want to be at. We’re constantly growing.</p>
              </div>
            </div>
          </div>
          <div class="px-4 relative w-full md:w-6/12">
            <div class="bg-emerald-500 mt-8 rounded-lg text-left p-6 flex items-start">
              <div class="flex-1">
                <div class="text-emerald-500 bg-white shadow-lg rounded rounded-full justify-center items-center text-center p-2 mx-auto mb-5 inline-flex w-12 h-12"><i class="fas fa-glasses text-xl"></i></div>
                <h4 class="text-2xl font-semibold leading-normal text-white">Super Fresh</h4>
                <p class="mt-2 text-white">When we lose family over time. What else could rust the heart more over time? Blackgold.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="w-full">
  <div class="py-12">
    <div class="flex flex-wrap -mx-4 justify-center">
      <div class="px-4 relative w-full text-center">
        <span class="text-pink-500 bg-pink-200 text-xs font-bold inline-block py-1 uppercase uppercase last:mr-0 mr-1 leading-tight rounded-full px-3">Fight hard</span>
        <h2 class="text-4xl font-bold mt-3 mb-1 text-blueGray-700">It's time to know</h2>
        <p class="mt-2 mb-4 text-xl leading-relaxed text-blueGray-400">Go and show them how strong you are. Leave them with their jaws to the ground, and hit them so that they faint on the ropes. Since you've got talent, you have to wear a crown.</p>
      </div>
    </div>
    <div class="items-center flex flex-wrap -mx-4">
      <div class="text-left px-4 relative w-full lg:w-4/12">
        <div class="text-lightBlue-500 border-lightBlue-500 shadow-lg rounded-full justify-center items-center inline-flex text-center mb-2 bg-white w-16 h-16"><i class="fas fa-cog text-1625"></i></div>
        <h6 class="text-xl font-semibold leading-tight mb-2 mt-6">Social Conversation</h6>
        <p class="mb-2 text-blueGray-400">We get insulted by others, lose trust for those others. We get back stabbed by friends. It becomes harder for us to give others a hand.</p>
        <a class="text-lightBlue-500" href="javascript:;">More about us <i class="ml-1 fas fa-angle-right"></i></a>
      </div>
      <div class="text-left px-4 relative w-full lg:w-4/12">
        <div class="text-emerald-500 border-emerald-500 shadow-lg rounded-full justify-center items-center inline-flex text-center mb-2 bg-white w-16 h-16"><i class="fas fa-atom text-1625"></i></div>
        <h6 class="text-xl font-semibold leading-tight mb-2 mt-6">Analyze Performance</h6>
        <p class="mb-2 text-blueGray-400">Don't get your heart broken by people we love, even that we give them all we have. Then we lose family over time. As we live, our hearts turn colder.</p>
        <a class="text-lightBlue-500" href="javascript:;">Learn about our products <i class="ml-1 fas fa-angle-right"></i></a>
      </div>
      <div class="text-left px-4 relative w-full lg:w-4/12">
        <div class="text-orange-500 border-orange-500 shadow-lg rounded-full justify-center items-center inline-flex text-center mb-2 bg-white w-16 h-16"><i class="fas fa-globe-europe text-1625"></i></div>
        <h6 class="text-xl font-semibold leading-tight mb-2 mt-6">Measure Conversions</h6>
        <p class="mb-2 text-blueGray-400">What else could rust the heart more over time? Blackgold. The time is now for it to be okay to be great. or being a bright color. For standing out.</p>
        <a class="text-lightBlue-500" href="javascript:;">Check our documentation <i class="ml-1 fas fa-angle-right"></i></a>
      </div>
    </div>
  </div>
</div>