docs: update header section

Author: lokesh-coder

docs/app/app.component.html

@@ -1,52 +1,55 @@
-<div class="hero bg-white mb-3">
+<div class="hero bg-alt mb-3">
+  <div class="hero-bg"></div>
   <div class="container">
     <div class="row">
-      <div class="col-md-8 mx-auto">
-        <div class="brand d-flex flex-column justify-center align-items-center mt-5">
-          <img src="./assets/toppy-logo.png" alt="Toppy" width="100" />
-          <p class="text-center mt-3">
-            Toppy is a tiny library to create overlays for Angular applications. Overlays are used in
-            <span>tooltip</span>, <span>modal</span>, <span>sidemenu</span>, <span>dropdowns</span>, <span>popup</span>,
-            <span>context menu</span>, <span>toaster</span>, <span>alerts</span>, <span>datepicker</span>,
-            <span>popovers</span> etc
-          </p>
+      <div class="col-md-8 mx-auto my-4">
+        <div class="brand d-flex flex-column justify-center align-items-center my-5">
+          <img src="./assets/toppy-logo-white.png" alt="Toppy" width="150" />
+          <div class="text-center mt-3 desc">
+            <div class="mb-2">Tiny Overlay library for Angular apps. Easy and simple API</div>
+            <div class="tags px-5">
+              <span>tooltip</span>, <span>modal</span>, <span>sidemenu</span>, <span>dropdowns</span>,
+              <span>popup</span>, <span>menu</span>, <span>toaster</span>, <span>alerts</span>, <span>datepicker</span>,
+              <span>popovers</span>
+            </div>
+          </div>
         </div>
-        <div class="badges d-flex align-items-center mb-3 justify-content-center">
+        <div class="badges d-flex align-items-center my-0 justify-content-center">
           <!-- <div class="badge"><img src="https://badgen.net/badge/Angular/7.x/1b95e0" alt="" /></div> -->
           <div class="badge">
             <a href="https://www.npmjs.com/package/toppy" target="_blank">
               <img
-                src="https://img.shields.io/npm/v/toppy.svg?style=popout-square&colorA=585c6d&colorB=585c6d&label=&logo=data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPjxwYXRoIGQ9Ik0wIDcuMzM0djhoNi42NjZ2MS4zMzJIMTJ2LTEuMzMyaDEydi04SDB6bTYuNjY2IDYuNjY0SDUuMzM0di00SDMuOTk5djRIMS4zMzVWOC42NjdoNS4zMzF2NS4zMzF6bTQgMHYxLjMzNkg4LjAwMVY4LjY2N2g1LjMzNHY1LjMzMmgtMi42Njl2LS4wMDF6bTEyLjAwMSAwaC0xLjMzdi00aC0xLjMzNnY0aC0xLjMzNXYtNGgtMS4zM3Y0aC0yLjY3MVY4LjY2N2g4LjAwMnY1LjMzMXoiIGZpbGw9IndoaXRlIi8+PHBhdGggZD0iTTEwLjY2NSAxMEgxMnYyLjY2N2gtMS4zMzVWMTB6IiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg=="
+                src="https://img.shields.io/npm/v/toppy.svg?style=popout-square&colorA=00738c&colorB=00738c&label=&logo=data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPjxwYXRoIGQ9Ik0wIDcuMzM0djhoNi42NjZ2MS4zMzJIMTJ2LTEuMzMyaDEydi04SDB6bTYuNjY2IDYuNjY0SDUuMzM0di00SDMuOTk5djRIMS4zMzVWOC42NjdoNS4zMzF2NS4zMzF6bTQgMHYxLjMzNkg4LjAwMVY4LjY2N2g1LjMzNHY1LjMzMmgtMi42Njl2LS4wMDF6bTEyLjAwMSAwaC0xLjMzdi00aC0xLjMzNnY0aC0xLjMzNXYtNGgtMS4zM3Y0aC0yLjY3MVY4LjY2N2g4LjAwMnY1LjMzMXoiIGZpbGw9IndoaXRlIi8+PHBhdGggZD0iTTEwLjY2NSAxMEgxMnYyLjY2N2gtMS4zMzVWMTB6IiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg=="
                 alt=""
             /></a>
           </div>
           <div class="badge">
             <a href="https://www.npmtrends.com/toppy" target="_blank">
               <img
-                src="https://img.shields.io/npm/dt/toppy.svg?style=flat&colorA=585c6d&colorB=585c6d&logo=data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1kb3dubG9hZCI+PHBhdGggZD0iTTIxIDE1djRhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJ2LTQiPjwvcGF0aD48cG9seWxpbmUgcG9pbnRzPSI3IDEwIDEyIDE1IDE3IDEwIj48L3BvbHlsaW5lPjxsaW5lIHgxPSIxMiIgeTE9IjE1IiB4Mj0iMTIiIHkyPSIzIj48L2xpbmU+PC9zdmc+&label="
+                src="https://img.shields.io/npm/dt/toppy.svg?style=flat-square&colorA=00738c&colorB=00738c&logo=data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1kb3dubG9hZCI+PHBhdGggZD0iTTIxIDE1djRhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJ2LTQiPjwvcGF0aD48cG9seWxpbmUgcG9pbnRzPSI3IDEwIDEyIDE1IDE3IDEwIj48L3BvbHlsaW5lPjxsaW5lIHgxPSIxMiIgeTE9IjE1IiB4Mj0iMTIiIHkyPSIzIj48L2xpbmU+PC9zdmc+&label="
                 alt=""
               />
             </a>
           </div>
           <div class="badge">
             <a href="https://github.com/lokesh-coder/toppy" target="_blank">
               <img
-                src="https://img.shields.io/github/stars/lokesh-coder/toppy.svg?style=flat&colorA=585c6d&colorB=585c6d&label=&logo=github&logoColor=fff"
+                src="https://img.shields.io/github/stars/lokesh-coder/toppy.svg?style=flat-square&colorA=00738c&colorB=00738c&label=&logo=github&logoColor=fff"
                 alt=""
               />
             </a>
           </div>
           <div class="badge">
             <a href="https://codecov.io/gh/lokesh-coder/toppy" target="_blank">
               <img
-                src="https://img.shields.io/codecov/c/github/lokesh-coder/toppy/master.svg?style=flat&colorA=585c6d&colorB=585c6d&label=&logo=codecov&logoColor=fff"
+                src="https://img.shields.io/codecov/c/github/lokesh-coder/toppy/master.svg?style=flat-square&colorA=00738c&colorB=00738c&label=&logo=codecov&logoColor=fff"
                 alt=""
               />
             </a>
           </div>
           <div class="badge">
             <img
-              src="https://img.shields.io/badge/share-tweet-aaa.svg?style=flat&colorA=585c6d&colorB=585c6d&label=&logo=twitter&logoColor=fff"
+              src="https://img.shields.io/badge/share-tweet-aaa.svg?style=flat-square&colorA=00738c&colorB=00738c&label=&logo=twitter&logoColor=fff"
               (click)="tweet($event)"
               alt=""
             />