Re-work Hero band and change global font

insectengine · k-wall · commit 1ec27a9c3739 · 2024-02-02T15:25:07.000Z
1) Added hero band with new text as per original PR
2) Added "row" to layout to remove unwanted global side padding so the page renders at true full width.
3) change from Josefin to Questrail font.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -13,7 +13,9 @@
 <body class="d-flex flex-column vh-100" data-bs-theme="light">
 {% include nav.html %}
 <div class="container-fluid" data-bs-theme="light">
+    <div class="row">
     {{ content }}
+    </div>
 </div>
 {% include footer.html %}
 </body>
diff --git a/_layouts/index.html b/_layouts/index.html
@@ -1,8 +1,31 @@
 ---
 layout: default
 ---
+
+<!-- Hero -->
+
+<div class="krx-hero">
+    <div class="container col-xxl-8 px-4 py-5">
+    <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
+      <div class="col-10 col-sm-8 col-lg-6">
+        <img src="{{site.baseurl}}/images/kroxylicious_logo_rgb_no_text.svg" class="d-block mx-lg-auto img-fluid" alt="Kroxylicious Mascot" width="700" height="500" loading="lazy">
+      </div>
+      <div class="col-lg-6">
+        <h1 class="fw-bold text-body-emphasis lh-1 mb-3">Kroxylicious transparently inject behaviour into your Apache Kafka<sup>&#174;</sup> cluster</h1>
+        <p class="lead">Solutions to cross-cutting concerns in areas including security, policy-enforcement, audit and much more.</p>
+        <div class="d-grid gap-2 d-md-flex justify-content-md-start">
+          <a href="{{site.baseurl}}/quickstarts/" alt="Get started with Kroxylicious" type="button" class="btn btn-light btn-lg px-4 gap-3">Get Started</a>
+          <a href="{{site.baseurl}}/kroxylicious/" alt="Read the documentation" type="button" class="btn btn-light btn-lg px-4">Read the Docs</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Hero -->
+
 <div class="row justify-content-center">
-  <div class="col-11 col-lg-8 card shadow gx-5 gy-5 m-lg-5">
+  <div class="col-11 col-lg-8 gx-5 gy-5 m-lg-5">
     <div class="row g-0">
       <div class="col-auto">
         <div class="card-body">
diff --git a/_sass/kroxylicious.scss b/_sass/kroxylicious.scss
@@ -2,10 +2,10 @@
 // Required
 @import "./bootstrap/scss/functions";
 
-@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');
 
 $font-family-sans-serif:
-        "Josefin Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
+        "Questrial", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
         "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
         "Segoe UI Symbol", "Noto Color Emoji";
 
@@ -117,4 +117,16 @@ $navbar-dark-disabled-color: rgba($white, 0.45);
 
 div.highlighter-rouge {
   padding: 0 10px;
-}
+}
+
+// Hero Styles
+
+.krx-hero {
+  background: rgb(73,160,120);
+  background: linear-gradient(111deg, rgba(73,160,120,1) 0%, rgba(44,96,72,1) 30%, rgba(22,48,36,1) 100%);
+
+  h1, p {
+  color: $white !important;
+  }
+}
+
diff --git a/index.markdown b/index.markdown
@@ -4,12 +4,8 @@
 
 layout: index
 ---
-*Kroxylicious* is a project aiming to provide an open source pluggable framework for
-writing network proxies that understand the Apache Kafka&#174; protocol.
 
-<br />
-
-#### Why?
+#### Why Kroxylicious?
 
 Proxies are a powerful architectural pattern which are widely used for other
 application-layer protocols, such as HTTP.
