Added wave patterns, adjusted primary color, minor UI tweaks

site/docusaurus.config.ts

@@ -75,7 +75,6 @@ const config: Config = {
             ],
         },
         footer: {
-            style: 'dark',
             links: [
                 {
                     title: 'Docs',

site/src/css/custom.css

@@ -6,7 +6,9 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
+  --ifm-background-color: #f1f6f8;
+
+  --ifm-color-primary: #3c647c;
   --ifm-color-primary-dark: #29784c;
   --ifm-color-primary-darker: #277148;
   --ifm-color-primary-darkest: #205d3b;
@@ -15,6 +17,13 @@
   --ifm-color-primary-lightest: #3cad6e;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+
+  --ifm-footer-background-color: #3c647c;
+  --ifm-footer-title-color: #fff;
+  --ifm-footer-link-color: #ffffffaa;
+  --ifm-footer-color:  #ffffffaa;
+
+  --ifm-footer-link-hover-color: #ffffffdd;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */

site/src/pages/index.module.css

@@ -4,7 +4,7 @@
  */
 
 .heroBanner {
-    background: #4391B2;
+  background: var(--ifm-color-primary);
   padding: 4rem 0;
   text-align: center;
   position: relative;

site/src/pages/index.tsx

@@ -4,12 +4,26 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import Heading from '@theme/Heading';
+import { useColorMode } from '@docusaurus/theme-common';
+
 
 import styles from './index.module.css';
 
+import HeaderBorderTop from '@site/static/img/hero-border-top.svg';
+import HeaderBorderBottom from '@site/static/img/hero-border-bottom.svg';
+
+import HeaderBorderTopDark from '@site/static/img/hero-border-top.svg';
+import HeaderBorderBottomDark from '@site/static/img/hero-border-bottom.svg';
+
 function HomepageHeader() {
     const { siteConfig } = useDocusaurusContext();
+    const { isDarkTheme } = useColorMode();  
+
     return (
+        <>
+         <div style={{width: "100%", display: "flex"}}>
+        {isDarkTheme ? <HeaderBorderTopDark style={{height: "auto", width: "inherit", marginBottom: "-1px"}} /> : <HeaderBorderTop style={{height: "auto", width: "inherit", marginBottom: "-1px"}}/>}
+        </div>
         <header className={clsx('hero hero--primary', styles.heroBanner)}>
             <div className="container">
                 <Heading as="h1" className="hero__title">
@@ -25,6 +39,10 @@ function HomepageHeader() {
                 </div>
             </div>
         </header>
+            <div style={{width: "100%", display: "flex"}}>
+                {isDarkTheme ? <HeaderBorderBottomDark style={{height: "auto", width: "inherit",  marginTop: "-1px"}} /> : <HeaderBorderBottom style={{height: "auto", width: "inherit",  marginTop: "-1px"}}/>}
+            </div>
+        </>
     );
 }
 

site/src/theme/Footer/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Footer from '@theme-original/Footer';
+import type FooterType from '@theme/Footer';
+import type {WrapperProps} from '@docusaurus/types';
+import { useColorMode } from '@docusaurus/theme-common';
+
+import Prefooter from '@site/static/img/prefooter.svg';
+import PrefooterDark from '@site/static/img/prefooter.svg';
+
+type Props = WrapperProps<typeof FooterType>;
+
+export default function FooterWrapper(props: Props): JSX.Element {
+  const { isDarkTheme } = useColorMode();  
+  return (
+    <>
+      <div style={{width: "100%", display: "flex"}}>
+        {isDarkTheme ? <PrefooterDark style={{height: "auto", width: "inherit"}} /> : <Prefooter style={{height: "auto", width: "inherit"}}/>}
+      </div>
+      <Footer {...props} />
+    </>
+  );
+}