Merge pull request #146 from iArchitSharma/home

Landing page update
layer5io · Jan 15, 2024 · 48c1bd6 · 48c1bd6
2 parents 5adb016 + c2fc6fe
commit 48c1bd6
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 42 deletions.
diff --git a/assets/scss/_landing_project.scss b/assets/scss/_landing_project.scss
@@ -1,7 +1,14 @@
+.wrapper {
+  box-sizing: border-box;
+}
 .product-section {
   display: grid;
+  //justify-content: space-between;
   gap: 20px;
-  grid-template-columns: 1fr 1fr 1fr;
+  //grid-template-columns: 1fr 1fr 1fr;
+  //grid-template-columns: repeat(2, 1fr);
+  //grid-template-rows: auto auto;
+  grid-template-columns: repeat(3, 1fr);
   a {
     color: $white;
   }
@@ -12,6 +19,29 @@
     grid-template-columns: 1fr;
   }
 }
+// .box1, .box2 {
+//   grid-row: span 1;
+// }
+
+// .box3 {
+//   grid-column: span 2;
+//   grid-row: span 1;
+// }
+
+// .box4 {
+//   grid-column: span 2;
+//   grid-row: span 2;
+// }
+
+.box3 {
+  grid-row: span 2;
+}
+
+.box4 {
+  grid-column: span 2;
+  grid-row: span 1;
+}
+
 .grid-card {
   border-radius: 1rem;
   border: 2px solid #515151;
@@ -30,10 +60,10 @@
 .product-head {
   font-size: 1.5rem;
   font-weight: 500;
-  color: $white;
+  color: $primary;
   text-transform: uppercase;
-  margin-bottom: 1.5rem;
-}  
+  gap: 20px;
+} 
 .playground-section {
   &.playground-logo {
     background-image: url("/images/logos/black-semi-opaque.svg"), url("/images/logos/meshery-light-icon.svg");
@@ -46,6 +76,7 @@
   justify-content: top;
   text-align: left;
   align-content: space-between;
+  gap: 20px;
 }
 
 .catalog-section {
@@ -60,6 +91,7 @@
   justify-content: top;
   text-align: left;
   align-content: space-between;
+  gap: 20px;
 }
 .handbook-section {
   display: flex;
@@ -76,7 +108,8 @@
   }
 }
 .handbook-image{
-  width: 100%;
+  padding-top:40px;
+  width: 110%;
   height: 100%;
   display: flex;
   justify-content: center;
@@ -86,14 +119,16 @@
 
   }
   img{
-    box-shadow: -8px 4px 25px 0px rgba(0, 211, 169, 0.50), 0px -8px 25px 0px rgba(0, 211, 169, 0.50);
-    border-radius: 8px;
+    //box-shadow: -8px 4px 25px 0px rgba(0, 211, 169, 0.50), 0px -8px 25px 0px rgba(0, 211, 169, 0.50);
+    border-radius: 20px;
     width: 100%;
   }
 
 }
 .handbook-text{
+  padding-top:20px;
   display: flex;
+  line-height: 30px;
   width: 90%;
   flex-direction: column;
   gap: 20px;
@@ -109,7 +144,7 @@
   img {
     box-shadow: -8px 4px 25px 0px rgba(0, 211, 169, 0.50), 0px -8px 25px 0px rgba(0, 211, 169, 0.50);
 
-    border-radius: 8px;
+    border-radius: 20px;
     height: 18rem;
     min-height: 70%;
 

diff --git a/content/en/_index.md b/content/en/_index.md
@@ -39,61 +39,55 @@ onmouseover="changeImage('meshery', 'images/logos/meshery-light.svg')" onmouseou
 </a>
 </div>
 
+<div class="wrapper">
 <div class= "product-section">
 
+<div class="box">
 <a href="https://playground.meshery.io">
   <div class="grid-card">
     <div class= "playground-section playground-logo">
       <span class="product-head">Meshery playground</span>
       <p>Use Meshery Playground to explore a new way of DevOps - visual and collaborative configuration management for your infrastructure.</p>
     </div>
   </div>
-</a>
+</a></div>
 
+<div class="box">
 <a href="https://meshery.layer5.io/catalog">
   <div class="grid-card">
     <div class= "catalog-section catalog-logo">
       <span class="product-head">Meshery Catalog</span>
       <p>Discover top-quality cloud native services for your infrastructure with the Cloud Native Catalog. Discover best practices and upgrade your Kubernetes management practices.</p>
     </div>
   </div>
-</a>
-
-<a href="https://discuss.layer5.io">
-<div class= "forum-section">
-  <div class="grid-card">
-  <span class="product-head">Discussion forum</span>
-  <p>Cloud Native Management of developer-defined infrastructure. Join the open source-first community of cloud native engineers.</p>
-  <img src="images/landing/discuss.png" alt="Discussion Forum Image" />
-      </div>
-</div>
-</a>
+</a></div>
+
+<div class="box box3">
+    <a href="https://discuss.layer5.io">
+    <div class= "forum-section">
+      <div class="grid-card">
+      <span class="product-head">Discussion forum</span>
+      <p>Cloud Native Management of developer-defined infrastructure. Join the open source-first community of cloud native engineers.</p>
+      <img src="images/landing/discuss.png" alt="Discussion Forum Image" />
+          </div>
+    </div>
+    </a></div>
 
+<div class="box box4">
 <a href="https://layer5.io/community/handbook">
-<div class= "handbook-section grid-card">
-  <div class= "handbook-text">
-    <span class="product-head">Community Handbook</span>
-    <p>Use Meshery Playground to explore a new way of DevOps - visual and collaborative configuration management for your infrastructure.</p>
-  </div>
-  <div class= "handbook-image">
-<img src="images/landing/handbook.png" alt="Community Handbook Image" />
+    <div class= "handbook-section grid-card">
+      <div class= "handbook-text">
+        <span class="product-head">Community Handbook</span>
+        <p>Use Meshery Playground to explore a new way of DevOps - visual and collaborative configuration management for your infrastructure.</p>
       </div>
+      <div class= "handbook-image">
+        <img src="images/landing/handbook.png" alt="Community Handbook Image" />
+          </div></div>
+    </a>
+    </div>
+    </div>
 
-</a>
-
-</div>
-</div>
-</div>
-</div>
-<!-- <div class="taxonomy taxonomy-terms-cloud taxo-categories">
-  <h5 class="taxonomy-title">Cloud of Categories</h5>
-  <ul class="taxonomy-terms">
-    <li><a class="taxonomy-term" href="//localhost:1313/categories/category-1/" data-taxonomy-term="category-1"><span class="taxonomy-label">category 1</span><span class="taxonomy-count">3</span></a></li>
-    <li><a class="taxonomy-term" href="//localhost:1313/categories/category-2/" data-taxonomy-term="category-2"><span class="taxonomy-label">category 2</span><span class="taxonomy-count">1</span></a></li>
-    <li><a class="taxonomy-term" href="//localhost:1313/categories/category-3/" data-taxonomy-term="category-3"><span class="taxonomy-label">category 3</span><span class="taxonomy-count">2</span></a></li>
-    <li><a class="taxonomy-term" href="//localhost:1313/categories/category-4/" data-taxonomy-term="category-4"><span class="taxonomy-label">category 4</span><span class="taxonomy-count">6</span></a></li>
-  </ul>
-</div> -->
+  </div> <!-- Wrapper close -->
 
 <div class="dash-tangle"></div>
 <div class="dash-ircle-container">

diff --git a/static/images/landing/handbook.png b/static/images/landing/handbook.png