Update website content and styling

Author: ujibang

_includes/features.md

@@ -53,12 +53,6 @@
                     <p>
                      Unlock the Power of Microservices with Ease: discover our innovative development framework that simplifies the creation of microservices in Java, Kotlin, JavaScript, or TypeScript. Our framework provides a set of simple yet robust building blocks: Service, Provider, Interceptor, and Initializer.
                     </p>
-                    <p>
-                    <strong>Focus on Your Microservice Logic, Not the Complexity.</strong> Experience the freedom to code your microservice logic without worrying about complex and time-consuming tasks. Our framework takes care of crucial aspects such as runtime process management, security, concurrency, HTTP transport protocol, request routing, logging, configuration, and data protection.
-                    </p>
-                    <p>
-                    The RESTHeart runtime leverages a scalable and pooled thread-per-request concurrency model. This means that developers, including those working with JavaScript, can enjoy a streamlined development process <strong>without the complexities of asynchronous programming</strong>.
-                    </p>
                 </div>
             </div>
             <div class="d-flex w-100 justify-content-center">
@@ -108,4 +102,4 @@
             </div>
         </div>
     </article>
-</div>
+</div>

_includes/head.html

@@ -24,7 +24,7 @@
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <!-- Custom css -->
-   <link rel="stylesheet" type="text/css" href="{{ "/css/main.css" | prepend: site.baseurl}}">
+   <link rel="stylesheet" type="text/css" href="{{ "/css/main.css" | prepend: site.baseurl}}?v={{ site.time | date: '%s' }}">
    <!-- js ================================================== -->
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

_sass/_variables.scss

@@ -30,7 +30,7 @@ $color-link-hover: color.adjust(
 
 // Base colors
 $color-white: #ffffff;
-$color-black: #212121;
+$color-black: #000000;
 $color-gray: #828282;
 $color-gray-light: color.adjust($color-gray, $lightness: 40%);
 $color-gray-dark: color.adjust($color-gray, $lightness: -25%);
@@ -41,7 +41,7 @@ $text-color: $color-white;
 $border-color: $color-gray;
 
 // Code highlighting colors
-$code-background: #212121;
+$code-background: #000000;
 $code-text: #cccccc;
 $code-comment: color.adjust($color-primary, $lightness: -20%);
 $code-keyword: #f8a839;

_sass/layout.scss

@@ -4,7 +4,7 @@
 ================================================== */
 
 .background-primary {
-  background-color: #212121 !important;
+  background-color: #000000 !important;
 }
 
 .color-primary {
@@ -152,7 +152,7 @@
 }
 
 .bs-docs-footer {
-  background-color: #212121;
+  background-color: #000000;
   color: rgba(255, 255, 255, 0.5);
   padding: 1.5rem;
   text-align: center;
@@ -171,7 +171,7 @@
 }
 
 .iubenda-black {
-  background: #212121;
+  background: #000000;
 }
 
 .header {
@@ -868,7 +868,7 @@ hr {
   -ms-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
   padding: 4px 5px 3px;
-  font-size: 16px;
+  font-size: 13px;
   letter-spacing: 2.4px;
   border-bottom: 1px solid rgba(255, 255, 255, 0);
   color: #f8a839;
@@ -954,7 +954,9 @@ hr {
   padding: 20px 20px 25px 20px;
   margin-bottom: 22px;
   border-radius: 10px;
-  background-color: #ffffff;
+  background-color: #000000 !important;
+  color: #ffffff;
+  border: 2px solid #f8a839 !important;
   box-shadow: 7.3px 6.8px 23px 0 rgba(0, 0, 0, 0.08);
 }
 
@@ -973,7 +975,7 @@ hr {
 .newsText h2 {
   font-size: 19px;
   text-align: center;
-  color: #333333;
+  color: #ffffff;
   font-weight: 600;
 }
 
@@ -1055,7 +1057,7 @@ blockquote.font12em {
 
 .examples .nav-item .nav-link,
 .examples .nav-link {
-  background: #212121;
+  background: #000000;
   color: var(--primarycolor);
   padding: 1rem 1rem;
   border: none;

css/main.scss

@@ -42,7 +42,7 @@ code {
 
 // Text sizing classes
 .top-1 {
-  font-size: 5.5vw;
+  font-size: 4vw;
 }
 .top-2 {
   font-size: 3.4vw;
@@ -57,12 +57,12 @@ code {
   font-size: 2.1vw;
 }
 .top-6 {
-  font-size: 1.9vw;
+  font-size: 1.4vw;
 }
 
 @media screen and (max-width: variables.$breakpoint-md) {
   .top-1 {
-    font-size: 42px;
+    font-size: 32px;
   }
   .top-2 {
     font-size: 26px;
@@ -77,7 +77,7 @@ code {
     font-size: 18px;
   }
   .top-6 {
-    font-size: 16px;
+    font-size: 14px;
   }
 
   .lh-1_4 {
@@ -93,7 +93,7 @@ code {
 
 @media screen and (min-width: variables.$breakpoint-xl) {
   .top-1 {
-    font-size: 64px;
+    font-size: 48px;
   }
   .top-2 {
     font-size: 42px;
@@ -138,7 +138,7 @@ code {
   transition: transform 0.5s ease;
 
   &:hover {
-    transform: scale(1.1);
+    transform: scale(1.03);
     filter: brightness(95%);
     z-index: 1;
   }

index.md

@@ -6,13 +6,20 @@ stars-bounce: true
 
 <section id="top" class="text-center pt-2 pb-2">
     <div class="mt-0 mb-4">
-        <img width="160" class="bg-whites p-3 rounded" src="/images/restheart logo.svg">
+        <img width="120" class="bg-whites p-3 rounded" src="/images/restheart logo.svg">
         <h1 class="my-1 top-1 text-break"><strong>REST</strong>Heart Framework</h1>
         <p class="top-6 text-break white mt-2 mx-4">
             ✅&nbsp;Instant REST, GraphQL and Websockets APIs for <strong>MongoDB</strong>.
             ✅&nbsp;Declarative Security, no code required.
             ✅&nbsp;Implement your Backend in minutes.
         </p>
+        <div class="my-3 mx-2">
+          <a href="https://cloud.restheart.com/signup" class="btn btn-primary font-weight-bold mt-5 btn-lg text-black">🚀 Try RESTHeart Cloud FREE</a>
+          <div class="mt-4 white">
+              Start building instantly • Scale to production when ready • No Installation Required!
+          </div>
+          <div class="mt-4 white small">go to <a href="/docs/setup">Setup</a> for more installation options</div>
+        </div>
         <div>
             <h3 class="font-weight-bold highlightcolor mt-3 text-center">Ask Sophia AI about RESTHeart</h3>
             <div id="sophiaLoading" class="text-muted">Loading...</div>
@@ -27,13 +34,6 @@ stars-bounce: true
                 });
             </script>
         </div>
-          <div class="my-4 mx-2">
-            <a href="https://cloud.restheart.com/signup" class="btn btn-primary font-weight-bold mt-5 btn-lg text-black">🚀 Try RESTHeart Cloud FREE - No Installation Required!</a>
-            <div class="mt-4 white">
-                Start building instantly • Scale to production when ready
-                (go to <a href="/docs/setup">Setup</a> for more installation options)
-            </div>
-          </div>
         <h3 class="font-weight-bold highlightcolor mt-3">Then check the tutorials</h3>
         <a href="/docs/mongodb-rest/tutorial" class="btn btn-o-white ml-1 mt-2 my-0 btn-md">MongoDB REST API Tutorial</a>
         <a href="/docs/mongodb-graphql/tutorial" class="btn btn-o-white ml-1 mt-2 my-0 btn-md">MongoDB GraphQL API Tutorial</a>