home

Author: devlikepro

assets/scss/common/_custom.scss

@@ -183,6 +183,37 @@
   }
 }
 
+.home-hero-box {
+  position: relative;
+  border-radius: 1.25rem;
+  padding: 2rem 2.5rem;
+  width: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+.home-hero-box::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: 2px solid #4aae20;
+  border-radius: inherit;
+  background: #f4fbf1;
+  box-shadow: 0 0 1.5rem rgba(74, 174, 32, 0.12);
+  z-index: 1;
+}
+
+.home-hero-box > * {
+  position: relative;
+  z-index: 3;
+}
+
+@media (max-width: 576px) {
+  .home-hero-box {
+    padding: 1.5rem;
+  }
+}
+
 .how-to-use-images-home {
   .how-to-use-images {
     overflow: visible;

hugo_stats.json

@@ -198,6 +198,7 @@
       "header",
       "highlight",
       "home",
+      "home-hero-box",
       "how-to-use-card",
       "how-to-use-cards",
       "how-to-use-image",

layouts/include/bubbles.html

@@ -6,6 +6,8 @@
         width: 100%;
         height: 100%;
         overflow: hidden;
+        z-index: 2;
+        pointer-events: none;
     }
 
     .bubble {

layouts/index.html

@@ -8,28 +8,28 @@
 
 <section class='section container-fluid mt-n3 pb-3'>
     <div class='row justify-content-center'>
-        <div class='col-lg-12 text-center' data-aos="fade-up">
-            <h1 class='mt-0'>WAHA</h1>
-        </div>
-        <div class='col-lg-9 col-xl-9 text-center' data-aos="fade-up">
-            <div class='mb-4'>
-                <img src='/images/logo.svg' title='WhatsApp API' alt='logo' style='border-radius: 50%; width: 10rem'/>
+        <div class='col-12 text-center' data-aos="fade-up">
+            <div class='home-hero-box'>
+                <h1 class='mt-0'>WAHA</h1>
+                <div class='mb-4'>
+                    <img src='/images/logo.svg' title='WhatsApp API' alt='logo' style='border-radius: 50%; width: 10rem'/>
+                </div>
+                <p class='lead'>{{ .Params.lead | safeHTML }}</p>
+
+                <a class='btn btn-primary btn-lg px-4 mb-2'
+                   href='/docs/{{ if .Site.Params.options.docsVersioning }}{{ .Site.Params.docsVersion }}/{{ end }}overview/introduction/'
+                   role='button'>Get Started</a>
+                <p class='meta'>
+                    <a href='https://github.com/devlikeapro/waha'>Source code in GitHub.</a>
+                    <br/>
+                    <a href='https://hub.docker.com/r/devlikeapro/waha'>
+                        <img alt='Docker Pulls' src='https://img.shields.io/docker/pulls/devlikeapro/waha'>
+                    </a>
+                    <a href='{{ relref . "/docs/overview/changelog" }}'>
+                        <img alt='GitHub Release' src='https://img.shields.io/github/v/release/devlikeapro/waha'>
+                    </a>
+                </p>
             </div>
-            <p class='lead'>{{ .Params.lead | safeHTML }}</p>
-
-            <a class='btn btn-primary btn-lg px-4 mb-2'
-               href='/docs/{{ if .Site.Params.options.docsVersioning }}{{ .Site.Params.docsVersion }}/{{ end }}overview/introduction/'
-               role='button'>Get Started</a>
-            <p class='meta'>
-                <a href='https://github.com/devlikeapro/waha'>Source code in GitHub.</a>
-                <br/>
-                <a href='https://hub.docker.com/r/devlikeapro/waha'>
-                    <img alt='Docker Pulls' src='https://img.shields.io/docker/pulls/devlikeapro/waha'>
-                </a>
-                <a href='{{ relref . "/docs/overview/changelog" }}'>
-                    <img alt='GitHub Release' src='https://img.shields.io/github/v/release/devlikeapro/waha'>
-                </a>
-            </p>
         </div>
     </div>
 </section>