+
+ {codeSample}
+
+
+ )
+}
+
+export default InfoModal;
\ No newline at end of file
diff --git a/docs/src/pages/components/InfoModal/styles.module.css b/docs/src/pages/components/InfoModal/styles.module.css
new file mode 100644
index 00000000..6616cb13
--- /dev/null
+++ b/docs/src/pages/components/InfoModal/styles.module.css
@@ -0,0 +1,83 @@
+.container {
+ display: flex;
+ justify-content: center;
+ margin: 1rem;
+}
+
+.textModal {
+ display: flex;
+ flex-direction: column;
+ border: solid 1px var(--ifm-font-color-base);
+ box-shadow: 2px 2.5px 0px var(--ifm-font-color-base);
+ margin-right: 2rem;
+}
+
+.selectorContainer {
+ display: flex;
+}
+
+.selector {
+ background-color: transparent;
+ border: none;
+ width: 100%;
+ font-family: var(--ifm-font-family-base);
+ font-weight: 600;
+ font-size: 1.5rem;
+ color: var(--ifm-font-color-base);
+ padding: 1rem 0px;
+}
+
+.selector:focus {
+ outline: none;
+ box-shadow: none;
+}
+
+.selector:hover {
+ font-weight: 600;
+}
+
+.leftSelector {
+ border-right: solid 1px var(--ifm-font-color-base);
+}
+
+.notSelected {
+ border-bottom: solid 1px var(--ifm-font-color-base);
+ font-weight: 500;
+}
+
+.description {
+ font-family: var(--ifm-font-family-base);
+ font-size: 1.25rem;
+ max-width: 40rem;
+ padding: 2rem;
+}
+
+@media screen and (max-width: 966px) {
+ .container {
+ flex-direction: column;
+ padding: 1.5rem;
+ }
+ .textModal {
+ margin: 0;
+ margin-bottom: 1.5rem;
+ }
+}
+
+@media screen and (max-width: 414px) {
+ .container {
+ flex-direction: column;
+ padding: 1.5rem;
+ margin: 0rem;
+ }
+ .textModal {
+ margin: 0;
+ margin-bottom: 1.5rem;
+ }
+ .selector {
+ font-size: 1.25rem;
+ }
+ .description {
+ font-size: 1rem;
+ padding: 1.25rem;
+ }
+}
\ No newline at end of file
diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
new file mode 100644
index 00000000..bc884bde
--- /dev/null
+++ b/docs/src/pages/index.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import clsx from 'clsx';
+import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import styles from './styles.module.css';
+import InfoModal from './components/InfoModal'
+
+function Home() {
+ const context = useDocusaurusContext();
+ const { siteConfig = {} } = context;
+ return (
+
+
+
+
+
+
+ {selectedInfo.description}
+
+
+
+ 
+
+
+ {siteConfig.title}
+
+ Enhance the observability and security
of your database applications.
+
+
+ Get Started
+
+
+
+ {codeBlockTitle}
+
+ )}
+
+
+
+
+ )}
+
+
+
+ {tokens.map((line, i) => {
+ if (line.length === 1 && line[0].content === '') {
+ line[0].content = '\n'; // eslint-disable-line no-param-reassign
+ }
+
+ const lineProps = getLineProps({ line, key: i });
+
+ if (highlightLines.includes(i + 1)) {
+ lineProps.className = `${lineProps.className} docusaurus-highlight-code-line`;
+ }
+
+ return (
+
+
+ {line.map((token, key) => (
+
+ ))}
+
+ );
+ })}
+
+ e.preventDefault()}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') {
+ e.target.parentNode.classList.toggle('dropdown--show');
+ }
+ }}>
+ {props.label}
+
+
+ );
+}
+
+function MobileNavItem({ items, position: _position, className, ...props }) {
+ // Need to destructure position from props so that it doesn't get passed on.
+ const navLinkClassNames = (extraClassName, isSubList = false) =>
+ clsx(
+ 'menu__link',
+ {
+ 'menu__link--sublist': isSubList,
+ },
+ extraClassName,
+ );
+
+ if (!items) {
+ return (
+ -
+ {items.map(({ className: childItemClassName, ...childItemProps }, i) => (
+
-
+
+
+ ))}
+
-
+ {items.map(({ className: childItemClassName, ...childItemProps }, i) => (
+
-
+
+
+ ))}
+