HDDS-9577. Add HomePage Banner, Styles and Responsive Design

docusaurus.config.js

@@ -47,6 +47,9 @@ const config = {
             require.resolve('./src/css/custom.css'),
             require.resolve('./src/css/header.css'),
             require.resolve('./src/css/footer.css'),
+            require.resolve('./src/css/banner.css'),
+            require.resolve('./src/css/features.css'),
+            require.resolve('./src/css/about.css'),
           ],
         },
       }),

src/css/about.css

@@ -0,0 +1,14 @@
+/**
+ * home page about related css template
+ */
+ .about-container{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-size: cover;
+  background-color: aqua;
+  height: 400px;
+  /* add container border to debug the layout
+   * border: 2px solid red; 
+   */
+ }

src/css/banner.css

@@ -0,0 +1,119 @@
+/**
+ * home page banner related css template
+ */
+
+ .banner-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-size: cover;
+  height: 400px;
+  /* add container border to debug the layout
+   * border: 2px solid red; 
+   */
+}
+
+.overlay{
+  display:flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 50%;
+}
+
+.content-box {
+  font-family: Helvetica, sans-serif;
+  text-align:center;
+  max-width: 500px;
+  margin: auto;
+  /* add container border to debug the layout
+   * border: 2px solid blue; 
+   */
+}
+
+.content-box h1 {
+  font-size: 60px;
+  color: #fff;
+}
+
+.content-box p {
+  font-size: 20px;
+  color: #fff;
+}
+
+.buttons-container {
+  display:flex;
+  justify-content: center;
+  /* add container border to debug the layout
+   * border: 2px solid green; 
+   */
+
+}
+
+.buttons-container button {
+  width: 126px;
+  height: 40px;
+  margin-right: 10px;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.logo-container {
+  display: flex;
+  align-items: center;
+  margin: auto;
+  /* add container border to debug the layout
+   * border: 2px solid yellow; 
+   */
+
+}
+
+.logo-container img {
+  width: 223px;
+  height: 245px;
+}
+
+/* responsive design for mobile */
+@media (max-width: 768px) {
+  .banner-container {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .logo-container {
+    display:none;
+  }
+
+  .content-box h1 {
+    font-size: 40px;
+  }
+
+  .content-box p {
+    font-size: 14px;
+  }
+
+  .buttons-container{
+    margin-bottom:10px;
+    width:auto
+  }
+  .buttons-container button {
+    margin-bottom: 10px;
+  }
+  .buttons-container button:last-child {
+    margin-bottom: 0;
+  }
+}
+
+@media (max-width: 480px) {
+  .buttons-container button {
+    width: 100px;
+    font-size: 14px;
+  }
+
+  .logo-container {
+    display:none;
+  }
+}

src/css/custom.css

@@ -24,3 +24,4 @@
   --ifm-color-primary-lighter: #b1dd93;
   --ifm-color-primary-lightest: #cbe9b7;
 }
+

src/css/features.css

@@ -0,0 +1,46 @@
+/**
+ * home page features related css template
+ */
+
+ .center-container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    min-height: 50vh;
+  }
+
+  .features-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center; 
+    gap: 20px;
+    margin: 20px;
+  }
+
+  .features-container div {
+    display: flex;
+    flex-direction: column;
+    max-width: 800px; 
+    width: 100%; 
+    border: 2px solid #007BFF;
+    padding: 10px;
+    box-sizing: border-box;
+    text-align: center;
+  }
+
+  .f1 {
+    max-width: 800px;
+  }
+
+  .f2 {
+    max-width: 800px;
+  }
+
+  .f3 {
+    max-width: 800px;
+  }
+
+  .f4 {
+    max-width: 800px;
+  }
+

src/pages/index.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
-import Logo from '@site/static/img/ozone-logo.svg';
+import Logo from '@site/static/img/ozone-logo-hug.svg';
+import Banner from '@site/static/img/banner.png';
 
 export default function Home() {
   const {siteConfig} = useDocusaurusContext();
@@ -10,30 +11,47 @@ export default function Home() {
     <Layout
       title={`Welcome to ${siteConfig.title}`}
       description="{siteConfig.tagline}">
-          <div class="hero">
-            <div class="container">
-              <div class="row" style={{alignItems: 'center'}}>
-                <div class="col col--6">
-                  <h1 class="hero__title">{siteConfig.title}</h1>
-                  <p class="hero__subtitle">
-                    {siteConfig.tagline}
-                    <br/>
-                    TODO <a href="https://issues.apache.org/jira/browse/HDDS-9539">HDDS-9539</a>
-                  </p>
-                  <div>
-                    <a href={getStartedHref}>
-                      <button class="button button--primary button--lg margin-right--sm" href={getStartedHref}>
-                        Get Started
-                      </button>
-                    </a>
-                  </div>
-                  </div>
-                <div class="col col--6 padding--lg" >
-                  <Logo height="100%" width="100%" />
-                </div>
-              </div>
+      <div className="banner-container" style={{ backgroundImage: `url(${Banner})` }}>
+        <div className="overlay">
+          <div className="content-box">
+            <h1>{siteConfig.title}</h1>
+            <p>{siteConfig.tagline}</p>
+            <div className="buttons-container">
+              <button>Slack</button>
+              <button>Github</button>
+              <button>Community</button>
             </div>
           </div>
+          <div className="logo-container">
+            <Logo />
+          </div>
+      </div>
+    </div>
+
+    <div className="about-container">
+      <p>To-Do: about component</p>
+      <p> create about component in src/components as function and import to here </p>
+    </div>
+
+      <div className="center-container">
+        <div className="features-container">
+          <div className="f1"> feature-1
+            <p>create feature-1 component in src/components as function and import to here </p>
+          </div>
+
+          <div className="f2"> feature-2
+            <p>create feature-2 component in src/components as function and import to here </p>
+          </div>
+
+          <div className="f3"> feature-3
+            <p>create feature-3 component in src/components as function and import to here </p>
+          </div>
+
+          <div className="f4"> feature-4
+            <p>create feature-4 component in src/components as function and import to here </p>
+          </div>
+        </div>
+      </div>
     </Layout>
   );
 }