diff --git a/src/views/components/banner.twig b/src/views/components/banner.twig
new file mode 100644
index 0000000..d440515
--- /dev/null
+++ b/src/views/components/banner.twig
@@ -0,0 +1,87 @@
+<style>
+.hawk-bnnr__body {
+  width: 95%;
+  padding: 0 1%;
+  margin: 5% auto;
+  position: relative;
+  color: #fff;
+  font-family: 'SFProDisplay', Roboto, 'Open Sans', sans-serif;
+}
+
+.hawk-bnnr__content {
+  position: absolute;
+  width: 30%;
+  font-size: 0.8vw;
+  margin-left: 3.5%;
+  top: 15%;
+}
+
+.hawk-bnnr__illustration {
+  width: 100%;
+  border-radius: 10px;
+}
+
+.hawk-bnnr__title {
+  font-size: 2.5em;
+  font-weight: bold;
+  margin-bottom: 5%;
+}
+
+.hawk-bnnr__text {
+  font-size: 1.25em;
+  line-height: 1.5;
+  margin-bottom: 7.5%;
+  letter-spacing: -0.15px;
+}
+
+.hawk-bnnr__second_title {
+  font-size: 2.5em;
+  font-weight: bold;
+  margin-bottom: 2%;
+}
+
+.hawk-bnnr__slogan {
+  font-size: 1.65em;
+  font-weight: 500;
+}
+
+.hawk-bnnr__garage {
+  position: absolute;
+  width: 28%;
+  border-radius: 5px;
+  left: 50%;
+  transform: translate(-50%);
+  top: -8.5%;
+  border: 1px solid #30323d;
+  box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
+}
+
+.hawk-bnnr__right-content {
+  position: absolute;
+  width: 20%;
+  font-size: 0.8vw;
+  right: 11.3%;
+  top: 15%;
+}
+
+.hawk-bnnr__product-hunt {
+  margin-top: 5%;
+  width: 90%;
+}
+</style>
+  <div class="hawk-bnnr__body">
+    <img class="hawk-bnnr__illustration" src="https://capella.pics/3b43621c-1d13-473c-bf6c-4ee5fd3de61d.jpg" alt="">
+
+    <div class="hawk-bnnr__content">
+      <div class="hawk-bnnr__title">What a day! 🥳🎈🎉 </div>
+      <div class="hawk-bnnr__text">Today we are releasing our next big open-source project.<br>As big as Editor.js or bigger. It is the error tracking service<br> called Hawk! Check it out.</div>
+    </div>
+    <div class="hawk-bnnr__right-content">
+      <div class="hawk-bnnr__second_title">Hawk</div>
+      <div class="hawk-bnnr__slogan">Code problems. Resolved.</div>
+      <a href="https://www.producthunt.com/posts/editor-js?utm_source=badge-featured&amp;utm_medium=badge&amp;utm_souce=badge-editor-js" target="_blank">
+        <img class="hawk-bnnr__product-hunt" src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=150153&amp;theme=light">
+      </a>
+    </div>
+    <img class="hawk-bnnr__garage" src="https://capella.pics/ae86cbae-925b-453c-a89b-81334e39169d" alt="">
+  </div>
\ No newline at end of file
diff --git a/src/views/layout.twig b/src/views/layout.twig
index afecadf..dfcd071 100644
--- a/src/views/layout.twig
+++ b/src/views/layout.twig
@@ -16,6 +16,7 @@
     </script>
   <body>
     {% include "components/header.twig" with res.locals.isAuthorized %}
+    {% include "components/banner.twig" %}
     <div class="docs">
       <aside class="docs__aside">
         {% include "components/aside.twig" %}
