Add some decorative elements

Signed-off-by: mohin7 <csemohin@gmail.com>
appscode · Mar 15, 2024 · 0dd3d85 · 0dd3d85
1 parent 3f95a87
commit 0dd3d85
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 15 deletions.
diff --git a/layouts/index.html b/layouts/index.html
@@ -122,14 +122,14 @@ <h6>Trusted Companies__</h6>
   <!--==================== products area start  ====================-->
   <div class="products-area" id="products">
     <div class="container">
-      <!-- <div class="columns is-centered">
+      <div class="columns is-centered">
         <div class="column is-8">
           <div class="section-title has-text-centered mb-0">
             <p class="mb-0 has-text-primary is-uppercase">Empowering Your Kubernetes Experience</p>
             <h2 class="mb-0">Explore Our AppsCode Solutions</h2>
           </div>
         </div>
-      </div> -->
+      </div>
       <div class="columns is-multiline">
         <!-- single product start  -->
         {{ range $product := $p.homepage.main_products }}
@@ -228,7 +228,14 @@ <h2 data-aos="fade-up" data-aos-duration="600" class="mb-4">{{ $p.homepage.highl
                     <li><span class="material-icons">task_alt</span>{{ $features }}</li>
                     {{ end }}
                   </ul>
-                  <a class="button ac-button is-primary" href="{{ $products.url }}">GET STARTED</a>
+                  <a class="button ac-button is-primary is-uppercase" href="{{ $products.url }}">
+                    <span>TRY {{$products.product}}</span>
+                    <span class="icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"></path>
+                      </svg>
+                    </span>
+                  </a>
                 </div>
                 <!-- single product description end -->
               </div>

diff --git a/static/assets/images/shape/decorative-el.svg b/static/assets/images/shape/decorative-el.svg
diff --git a/static/assets/sass/base/_global.scss b/static/assets/sass/base/_global.scss
@@ -25,7 +25,22 @@
   }
 }
 
+.decorative-el {
+  position: relative;
+  z-index: 1;
 
+  &::after{
+    position: absolute;
+    content: "";
+    left: -54px;
+    top: 0px;
+    width: 250px;
+    height: 250px;
+    z-index: -1;
+    background-image: url("../images/shape/decorative-el.svg");
+    background-repeat: no-repeat;
+  }
+}
 .yt-thumbnail {
   position: relative;
   z-index: 1;

diff --git a/static/assets/sass/components/_product-hero-area.scss b/static/assets/sass/components/_product-hero-area.scss
@@ -415,6 +415,8 @@
       img {
         width: auto !important;
         height: 32px;
+        // mix-blend-mode: multiply;
+        // filter: contrast(1);
         // margin: 0 auto;
       }
     }

diff --git a/static/assets/sass/main.css b/static/assets/sass/main.css
@@ -18346,6 +18346,22 @@ strong {
   font-size: 18px;
 }
 
+.decorative-el, .others-products, .products-area {
+  position: relative;
+  z-index: 1;
+}
+.decorative-el::after, .others-products::after, .products-area::after {
+  position: absolute;
+  content: "";
+  left: -54px;
+  top: 0px;
+  width: 250px;
+  height: 250px;
+  z-index: -1;
+  background-image: url("../images/shape/decorative-el.svg");
+  background-repeat: no-repeat;
+}
+
 .yt-thumbnail {
   position: relative;
   z-index: 1;
@@ -24957,7 +24973,7 @@ Responsive Classes
   letter-spacing: -2.5px;
 }
 .hero-area-1 h1 img {
-  transform: translateY(2px);
+  transform: translateY(6px);
 }
 @media screen and (min-width: 769px) and (max-width: 1023px) {
   .hero-area-1 h1 img {
@@ -25447,7 +25463,14 @@ Responsive Classes
 }
 
 .others-products {
-  padding: 100px 0;
+  padding: 60px 0;
+}
+.others-products:after {
+  right: -54px;
+  left: auto;
+  top: auto;
+  bottom: 0;
+  rotate: 90deg;
 }
 .others-products .small-title {
   font-weight: 400;
@@ -25766,7 +25789,7 @@ Responsive Classes
     padding: 30px 20px;
   }
   .others-products {
-    padding: 50px 0;
+    padding: 60px 0;
   }
   .others-products .small-title {
     font-size: 18px;
@@ -25969,7 +25992,7 @@ Responsive Classes
 }
 @media (min-width: 1216px) and (max-width: 1600px) {
   .hero-area-1 {
-    padding: 150px 0 100px;
+    padding: 150px 0 60px;
   }
   .hero-area-1 h1 {
     font-size: 58px;
@@ -25979,7 +26002,7 @@ Responsive Classes
     font-size: 1.3rem;
   }
   .hero-area-1 .h-right-content {
-    margin-right: -60px;
+    margin-right: -74px;
   }
   .hero-area-1 .buttons {
     margin-bottom: 15px;

diff --git a/static/assets/sass/main.css.map b/static/assets/sass/main.css.map
diff --git a/static/assets/sass/pages/_homepage.scss b/static/assets/sass/pages/_homepage.scss
@@ -70,7 +70,7 @@
     line-height: 120%;
     letter-spacing: -2.5px;
     img {
-      transform: translateY(2px);
+      transform: translateY(6px);
       @include tablet-only {
         height: 32px;
       }
@@ -174,6 +174,7 @@
 
 // products area start
 .products-area {
+  @extend .decorative-el;
   .single-product {
     display: block;
     background-color: $ac-white;
@@ -666,8 +667,15 @@
 
 // others product start
 .others-products {
-  padding: 100px 0;
-
+  padding: 60px 0;
+  @extend .decorative-el;
+  &:after{
+    right: -54px;
+    left: auto;
+    top: auto;
+    bottom: 0;
+    rotate: 90deg;
+  }
   .small-title {
     font-weight: 400;
     font-size: 20px;
@@ -1069,7 +1077,7 @@ Responsive Classes
   }
 
   .others-products {
-    padding: 50px 0;
+    padding: 60px 0;
 
     .small-title {
       font-size: 18px;
@@ -1369,7 +1377,7 @@ Responsive Classes
 
 @media (min-width: 1216px) and (max-width: 1600px) {
   .hero-area-1 {
-    padding: 150px 0 100px;
+    padding: 150px 0 60px;
 
     h1 {
       font-size: 58px;
@@ -1380,7 +1388,7 @@ Responsive Classes
       font-size: 1.3rem;
     }
     .h-right-content {
-      margin-right: -60px;
+      margin-right: -74px;
     }
 
     .buttons {