-
- {FeatureList.map((props, idx) => (
-
- ))}
+ <>
+ {accessibleFeatures && accessibleFeatures.length > 0 && (
+
+
+
+ {accessibleFeatures.map((props, idx) => (
+
+ ))}
+
+
+
+ )}
+
+
+
+
+ {characteristics.map((props, idx) => (
+
+ ))}
+
+
+
+
+
+
+
-
+
+ >
);
}
diff --git a/website/src/components/HomepageFeatures/styles.module.css b/website/src/components/HomepageFeatures/styles.module.css
index b248eb2e5..40803ec95 100644
--- a/website/src/components/HomepageFeatures/styles.module.css
+++ b/website/src/components/HomepageFeatures/styles.module.css
@@ -3,9 +3,146 @@
align-items: center;
padding: 2rem 0;
width: 100%;
+ justify-content: space-between;
+ gap: 20px;
+}
+
+.featuresAlt {
+ background: var(--ifm-background-color-alt);
+ color: var(--ifm-color-text);
+ align-content: stretch;
+ text-align: left;
+ position: relative;
+ padding: 2rem 0;
}
.featureSvg {
height: 200px;
width: 200px;
}
+
+.heroBanner {
+ text-align: center;
+}
+
+.buttons {
+ margin-top: 2rem;
+}
+
+.featureContainer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 20px;
+ width: 100%;
+ padding: 1rem 0;
+}
+
+.featureContainer.alignLeft {
+ flex-direction: row;
+}
+
+.featureContainer.alignRight {
+ flex-direction: row-reverse;
+}
+
+.featureContainer.alignCenter {
+ justify-content: center;
+}
+
+.featureImage {
+ flex: 1;
+ text-align: center;
+}
+
+.featureImage.alignLeft {
+ text-align: left;
+}
+
+.featureImage.alignRight {
+ text-align: right;
+}
+
+.featureImage.alignCenter {
+ text-align: center;
+}
+
+.largeFeatureImage {
+ max-height: 150px;
+ width: auto;
+}
+
+.featureContent {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ text-align: left;
+}
+
+.featureContent.alignLeft {
+ text-align: left;
+}
+
+.featureContent.alignRight {
+ text-align: right;
+}
+
+.featureContent.alignCenter {
+ text-align: center;
+}
+
+
+.buttonContainer {
+ display: flex;
+ gap: 10px;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+}
+
+.buttonContainer.alignLeft {
+ justify-content: flex-start;
+}
+
+.buttonContainer.alignRight {
+ justify-content: flex-end;
+}
+
+.buttonContainer.alignCenter {
+ justify-content: center;
+}
+
+.featureGallery {
+ text-align: center;
+ padding: 2rem 0;
+}
+
+.header {
+ font-size: 2rem;
+ margin-bottom: 2rem;
+}
+
+.imageGallery {
+ display: flex;
+ justify-content: center;
+ gap: 40px;
+ margin-bottom: 2rem;
+}
+
+.galleryImage {
+ max-height: 100px;
+ width: auto;
+ object-fit: cover;
+ cursor: pointer;
+ transition: transform 0.3s ease;
+}
+
+.galleryImage:hover {
+ transform: scale(1.1);
+}
+
+.description {
+ font-size: 1.2rem;
+ color: #666;
+ margin-top: 1rem;
+}
diff --git a/website/src/components/HomepageFeatures/wholeRowFeature.js b/website/src/components/HomepageFeatures/wholeRowFeature.js
new file mode 100644
index 000000000..5fe72dd61
--- /dev/null
+++ b/website/src/components/HomepageFeatures/wholeRowFeature.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import styles from './styles.module.css';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+
+function WholeRowFeature({ imageUrl, title, description, buttons, contentAlignment, imageAlignment, colSize = 'col--6', }) {
+ const resolvedImageUrl = useBaseUrl(imageUrl);
+
+ const imageAlignmentClass =
+ imageAlignment === 'right' ? styles.alignRight :
+ imageAlignment === 'center' ? styles.alignCenter :
+ styles.alignLeft;
+
+ const contentAlignmentClass =
+ contentAlignment === 'right' ? styles.alignRight :
+ contentAlignment === 'center' ? styles.alignCenter :
+ styles.alignLeft;
+
+ return (
+
+ {resolvedImageUrl && (
+
+
+
+ )}
+
+
+ {title &&
{title}
}
+ {description &&
{description}
}
+ {buttons && buttons.length > 0 && (
+
+ {buttons.map((button, index) => (
+
+ {button.buttonText}
+
+ ))}
+
+ )}
+
+
+ );
+}
+
+export default WholeRowFeature;
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index e34580355..3d246034e 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -2,20 +2,28 @@
* Any CSS included here will be global. The classic template
* bundles Infima by default. Infima is a CSS framework designed to
* work well for content-centric websites.
+ *
+ * You may use this website for choose colors:
+ * https://docusaurus.io/docs/styling-layout
*/
/* You can override the default Infima variables here. */
:root {
- --ifm-color-primary: #2e8555;
- --ifm-color-primary-dark: #29784c;
- --ifm-color-primary-darker: #277148;
- --ifm-color-primary-darkest: #205d3b;
- --ifm-color-primary-light: #33925d;
- --ifm-color-primary-lighter: #359962;
- --ifm-color-primary-lightest: #3cad6e;
+ --ifm-color-primary: #00b4d8;
+ --ifm-color-primary-dark: #00a2c2;
+ --ifm-color-primary-darker: #0099b8;
+ --ifm-color-primary-darkest: #007e97;
+ --ifm-color-primary-light: #00c6ee;
+ --ifm-color-primary-lighter: #00cff8;
+ --ifm-color-primary-lightest: #1ad9ff;
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+ --ifm-background-color-banner: #222629;
+ --ifm-background-color-alt: var(--ifm-color-primary-light);
+
+ --ifm-color-alt: #8f9f96
+
--highlight-text-color: black;
--highlight-background-color: #7091e6;
--highlight-optional-arg-text-color: black;
@@ -24,15 +32,20 @@
/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
- --ifm-color-primary: #25c2a0;
- --ifm-color-primary-dark: #21af90;
- --ifm-color-primary-darker: #1fa588;
- --ifm-color-primary-darkest: #1a8870;
- --ifm-color-primary-light: #29d5b0;
- --ifm-color-primary-lighter: #32d8b4;
- --ifm-color-primary-lightest: #4fddbf;
+ --ifm-color-primary: #6db7fd;
+ --ifm-color-primary-dark: #49a5fd;
+ --ifm-color-primary-darker: #379dfc;
+ --ifm-color-primary-darkest: #16324f;
+ --ifm-color-primary-light: #b4dafe;
+ --ifm-color-primary-lighter: #d8ecfe;
+ --ifm-color-primary-lightest: #fcfdff;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+ --ifm-background-color-banner: #222629;
+ --ifm-background-color-alt: var(--ifm-color-primary-darkest);
+
+ --ifm-color-alt: #8f9f96
+
--highlight-text-color: black;
--highlight-background-color: #7091e6;
--highlight-optional-arg-text-color: black;
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 75d8475e3..e7072853e 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -8,17 +8,20 @@ import HomepageFeatures from '@site/src/components/HomepageFeatures';
import styles from './index.module.css';
function HomepageHeader() {
- const {siteConfig} = useDocusaurusContext();
+ const { siteConfig } = useDocusaurusContext();
return (