added initial homepage elements

README.md

@@ -49,7 +49,11 @@ npm install npm@latest -g
    ```sh
    npm install
    ```
-3. Start the website
+3. Generate the docs
+   ```sh
+   npm run docusaurus gen-api-docs all
+   ```
+4. Start the website
    ```sh
    npm start
    ```

docusaurus.config.js

@@ -84,7 +84,6 @@ const config = {
             items: [
               {to: '/docs/category/identity-now-api-v3', label: 'V3 APIs'},
               {to: '/docs/category/identity-now-api-beta', label: 'Beta APIs'},
-              {to: '/docs/category/arm-agent-management', label: 'ARM APIs'},
               {
                 type: 'doc',
                 docId: 'idn_docs/intro',
@@ -107,6 +106,14 @@ const config = {
               // ... more items
             ],
           },
+          {
+            type: 'dropdown',
+            label: 'ARM',
+            position: 'right',
+            items: [
+              {to: '/docs/category/arm-agent-management', label: 'ARM APIs'}
+            ],
+          },
           {
             type: 'dropdown',
             label: 'Tools',

src/components/HomepageGettingStarted/index.js

@@ -0,0 +1,34 @@
+import React from "react";
+import clsx from "clsx";
+import styles from "./styles.module.css";
+import Link from '@docusaurus/Link';
+export default function HomepageGettingStarted() {
+  return (
+    <div>
+      <div className={styles.mainCard}>
+        <div className={styles.gettingStartedText}>
+          <div className={styles.gettingStartedOne}>SailPoint Developer Community</div>
+          <div className={styles.gettingStartedTwo}>Don't know where to get started?</div>
+          <div className={styles.gettingStartedThree}>Jump into our <span className={styles.bold}>Get Started Guides</span> for more information.</div>
+          <div className={styles.gridContainer}>
+            <Link to="/docs/idn_docs/intro">
+              <div className={styles.getStartedCard}>
+                <div className={styles.gettingStartedCardText}>Get Started with IdentityNow</div>
+                <img className={styles.gettingStartedCardIcon} src="/homepage/cloud.png"></img>
+                <img className={styles.gettingStartedCardArrow} src="/homepage/arrow-right.png"></img>
+              </div>
+            </Link>
+            <Link to="/docs/idn_docs/intro">
+              <div className={styles.getStartedCard}>
+                <div className={styles.gettingStartedCardText}>Get Started with IdentityIQ</div>
+                <img className={styles.gettingStartedCardIcon} src="/homepage/cloud.png"></img>
+                <img className={styles.gettingStartedCardArrow} src="/homepage/arrow-right.png"></img>
+              </div>
+            </Link>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/HomepageGettingStarted/styles.module.css

@@ -0,0 +1,93 @@
+.mainCard {
+  margin: 50px;
+  width: calc(100% - 100px);
+  height: 519px;
+  /* UI Properties */
+  background: transparent 0% 0% no-repeat padding-box;
+  box-shadow: 0px 20px 60px #00000015;
+  border: 1px solid #F7F7F7;
+  border-radius: 40px;
+  opacity: 1;
+}
+
+.gettingStartedText {
+  margin: 50px;
+  width: 496px;
+  height: 205px;
+}
+
+.gettingStartedOne {
+  color: #12329a;
+  font-size: 30px;
+  width: 396px;
+  font-weight: bold;
+  line-height: 100%;
+}
+
+.gettingStartedTwo {
+  margin-top: 20px;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.gettingStartedThree {
+  margin-top: 20px;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+
+.bold {
+  font-weight: bold;
+}
+
+
+
+/* Getting Started Card */
+.getStartedCard {
+  position: relative;
+  margin-top: 20px;
+  height: 200px;
+  width: 300px;
+  /* UI Properties */
+  background: transparent 0% 0% no-repeat padding-box;
+  box-shadow: 0px 20px 60px #00000015;
+  border: 1px solid #F7F7F7;
+  border-radius: 40px;
+  opacity: 1;
+}
+
+.getStartedCard:hover {
+  cursor: pointer;
+}
+
+.gettingStartedCardText {
+  position: absolute;
+  margin: 20px;
+  font-size: 16px;
+  font-weight: 500;
+  width: 150px;
+  bottom: 0;
+  left: 0;
+  color: black;
+}
+
+.gettingStartedCardIcon {
+  position: absolute;
+  margin: 20px;
+  top: 0;
+  left: 0;
+}
+
+.gettingStartedCardArrow {
+  position: absolute;
+  margin: 20px;
+  bottom: 25px;
+  right: 0;
+}
+
+.gridContainer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 20px;
+}

src/pages/index.js

@@ -4,6 +4,7 @@ import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
+import HomepageGettingStarted from '@site/src/components/HomepageGettingStarted';
 
 import styles from './index.module.css';
 
@@ -32,9 +33,8 @@ export default function Home() {
     <Layout
       title={`Hello from ${siteConfig.title}`}
       description="Description will go into a meta tag in <head />">
-      <HomepageHeader />
       <main>
-        <HomepageFeatures />
+        <HomepageGettingStarted />
       </main>
     </Layout>
   );