The website should mention the UI part of s3gw

Fixes: https://github.com/aquarist-labs/s3gw/issues/714

Signed-off-by: Volker Theile <vtheile@suse.com>

.gitignore

@@ -17,4 +17,5 @@
 
 npm-debug.log*
 yarn-debug.log*
-yarn-error.log*
+yarn-error.log*
+/.idea/

src/css/custom.css

@@ -94,6 +94,10 @@ h1, h2, h3, h4, h5, h6 {
   font-family: 'Poppins', sans-serif;
 }
 
+h4, h5, h6 {
+  color: var(--ifm-color-secondary);
+}
+
 code {
   font-family: 'Roboto Mono', monospace;
 }
@@ -173,4 +177,3 @@ a.btn.navbar__github::before {
   margin: 0 calc(-1 * var(--ifm-pre-padding));
   padding: 0 var(--ifm-pre-padding);
 }
-

src/pages/index.js

@@ -29,19 +29,23 @@ function Landing() {
 
     <section className={index.wrap}>
       <h2>Why Use s3gw</h2>
-      <div className={index.gridThree}>
+      <div className={index.gridFour}>
         <div>
-          <h5>S3 Semantics</h5>
+          <h4>S3 Semantics</h4>
           <p>S3 compatible semantics and APIs for on-premise object storage.</p>
         </div>
         <div>
-          <h5>Lightweight</h5>
+          <h4>Lightweight</h4>
           <p>Easy to deploy and manage, with a light container footprint and helm charts to get started.</p>
         </div>
         <div>
-          <h5>Longhorn for object storage</h5>
+          <h4>Longhorn for object storage</h4>
           <p>Consume a Longhorn PVC, and expose it as S3 for applications.</p>
         </div>
+        <div>
+          <h4>UI</h4>
+          <p>Easy to manage and administrate via user interface.</p>
+        </div>
       </div>
     </section>
     <hr />
@@ -62,10 +66,13 @@ helm install s3gw s3gw/s3gw --namespace s3gw-system --create-namespace \\
 
 # Docker
 docker pull quay.io/s3gw/s3gw:latest
+docker pull quay.io/s3gw/s3gw-ui:latest
 docker run -p 7480:7480 quay.io/s3gw/s3gw:latest
+docker run -p 8080:8080 -e S3GW_SERVICE_URL="http://<IPADDR>:7480" quay.io/s3gw/s3gw-ui:latest
 
 # Podman
 podman run --replace --name=s3gw -it -p 7480:7480 quay.io/s3gw/s3gw:latest
+podman run --replace --name=s3gw-ui -it -p 8080:8080 -e S3GW_SERVICE_URL="http://<IPADDR>:7480" quay.io/s3gw/s3gw-ui:latest
 
 `
         }</CodeBlock>
@@ -77,11 +84,21 @@ podman run --replace --name=s3gw -it -p 7480:7480 quay.io/s3gw/s3gw:latest
           <p>Docker and Podman deployments will use ephemeral storage inside the
             container by default, so should only be used for testing on a local system.
           </p>
-          <p>In all the above cases, the default Access Key and Secret Key are
-            set to "test". Please see <a href="https://s3gw-docs.readthedocs.io/">our documentation</a> for
+          <p>In all the above cases, the default "<i>Access Key</i>" and "<i>Secret Key</i>" are
+            set to "<strong>test</strong>". Please see <a href="https://s3gw-docs.readthedocs.io/">our documentation</a> for
             more details on how to configure s3gw.
           </p>
         </div>
+        <div>
+          <p>
+            The same credentials can be used to access the UI to manage your buckets
+            and objects. As an administrator you can create additional users and credentials.
+          </p>
+        </div>
+        <div>
+          <img src="/img/ui-buckets.png" alt="Buckets" className={index.imgBorder}></img>
+          <img src="/img/ui-object-explorer.png" alt="Object Explorer" className={index.imgBorder}></img>
+        </div>
       </div>
       <div className={`${index.learnMore} ${index.bgPrimary}`}>
         <div className={index.wrap}>

src/pages/index.module.css

@@ -120,7 +120,6 @@ Below is used for the s3gw.io landing page
   color: var(--ifm-color-secondary)
 }
 
-
 .getStarted {
   display:grid;
   grid-template-columns:repeat(6,1fr);
@@ -173,6 +172,11 @@ Below is used for the s3gw.io landing page
   color:var(--dark);
  }
 
+ .folder h5,
+ [data-theme='dark'] .folder h5 {
+   color:var(--dark);
+ }
+
 .folder .bgLight {
   background-color:var(--light);
   padding:40px;
@@ -212,10 +216,17 @@ Below is used for the s3gw.io landing page
   flex-basis:0
 }
 
+@media screen and (max-width: 1536px) {
+  .gridFour {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
 /** In mobile view */
 @media screen and (max-width: 996px) {
   .gridTwo,
   .gridThree,
+  .gridFour,
   .intro .gridTwo {
     grid-template-columns:1fr
   }
@@ -237,4 +248,8 @@ pre {
   white-space:pre-wrap
 }
 
-
+.imgBorder {
+  border-style: solid;
+  border-width: 1px;
+  border-color: rgba(51,49,59,.5);
+}