added discuss section

src/components/DiscussCard/index.js

@@ -0,0 +1,24 @@
+import React from "react";
+import styles from "./styles.module.css";
+import Link from '@docusaurus/Link';
+export default function DiscussCard({link, title, tags, views}) {
+
+
+  return (
+    <Link to={link}>
+      <div className={styles.card}>
+        <img className={styles.cardIcon} src="/homepage/quotes.PNG"></img>
+        <img className={styles.cardArrow} src="/homepage/arrow-right.png"></img>
+        <img className={styles.cardEye} src="/homepage/eyeball.PNG"></img>
+        <div className={styles.cardText}>{title}</div>
+        <div className={styles.cardViews}>{views}</div>
+
+        {tags?.map(tag => {
+          return (
+            <div className={styles.product}>{tag}</div>
+          )
+        })}
+      </div>
+    </Link>
+  );
+}

src/components/DiscussCard/styles.module.css

@@ -0,0 +1,77 @@
+/* Getting Started Card */
+.card {
+  position:relative;
+  margin-top: 20px;
+  height: 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;
+}
+
+.card:hover {
+  cursor: pointer;
+}
+
+.cardText {
+  position:absolute;
+  margin: 22px;
+  font-size: 16px;
+  font-weight: 500;
+  width: 170px;
+  top: 35px;
+  left: 0;
+  color: black;
+}
+
+.cardIcon {
+  position:absolute;
+  margin: 20px;
+  top: 20px;
+  left: 0;
+  width: 20px;
+}
+
+.cardArrow {
+  position:absolute;
+  margin: 20px;
+  bottom: 25px;
+  right: 0;
+}
+
+.cardViews {
+  position:absolute;
+  margin: 15px;
+  right: 0px;
+  top: 0;
+  width: 30px;
+}
+
+.cardEye {
+  position:absolute;
+  margin: 20px;
+  right: 25px;
+  top: 0;
+  width: 22px;
+}
+
+.product {
+  position:absolute;
+  margin: 20px;
+  font-size: 12px;
+  font-weight: 500;
+  width: 120px;
+  bottom: 50px;
+  left: 0;
+  
+}
+
+.idn {
+  color: #177dd2;
+}
+
+.iiq {
+  color: #60b359
+}

src/components/HomepageBasics/index.js

@@ -1,14 +1,14 @@
 import React from "react";
 import styles from "./styles.module.css";
 import Link from '@docusaurus/Link';
-export default function HomepageBasics() {
+export default function HomepageBasics({link, title, image, description, buttonText}) {
   return (
         <div className={styles.gettingStartedText}>
-          <img className={styles.gettingStartedCardIcon} src="/homepage/person-head.png"></img>
-          <div className={styles.gettingStartedOne}>Start With the Basics</div>
-          <div className={styles.gettingStartedThree}>If you still aren't sure where to get started, try one of the <span className={styles.bold}>Getting Started Guides</span> below, or see what our platform has to offer.</div>
-          <Link to="/docs/idn_docs/intro">
-          <div className={styles.button}>Explore our platform</div>
+          <img className={styles.gettingStartedCardIcon} src={image}></img>
+          <div className={styles.gettingStartedOne}>{title}</div>
+          <div className={styles.gettingStartedThree} dangerouslySetInnerHTML={{ __html: description }} ></div>
+          <Link to={link}>
+          <div className={styles.button}>{buttonText}</div>
           </Link>
         </div>
   );

src/components/HomepageDiscuss/index.js

@@ -1,20 +1,64 @@
 import React from "react";
-import clsx from "clsx";
 import styles from "./styles.module.css";
-import Link from '@docusaurus/Link';
-import HomepageCard from "../HomepageCard";
+import DiscussCard from "../DiscussCard";
+
 import { getTopPosts } from "../../services/DiscourseService";
 export default function HomepageDiscuss() {
 
-  getTopPosts().then(response => {
-    console.log(response)
-  })
 
-  return (
-    <div className={styles.center}>
-      <div className={styles.gridContainer}>
 
-      </div> 
-    </div>
-  );
+  const [ans, setAns] = React.useState();
+
+  const getPosts = async () => {
+    const data = await getTopPosts()
+    const resultset = [
+      getPostList(data, 0),
+      getPostList(data, 1),
+      getPostList(data, 2),
+      getPostList(data, findSolutionPost(data.topic_list.topics))
+    ]
+    setAns(resultset);
+  };
+
+  
+  React.useEffect(() => {
+    getPosts();
+  }, []);
+
+  if (ans) {
+    return (
+      <div className={styles.center}>
+        <div className={styles.gridContainer}>
+          <DiscussCard tags={ans[0].tags} link={"/docs/idn_docs/intro"} title={ans[0].title} views={ans[0].views}></DiscussCard>
+          <DiscussCard tags={ans[1].tags} link={"/docs/idn_docs/intro"} title={ans[1].title} views={ans[1].views}></DiscussCard>
+          <DiscussCard tags={ans[2].tags} link={"/docs/idn_docs/intro"} title={ans[2].title} views={ans[2].views}></DiscussCard>
+          <DiscussCard tags={ans[3].tags} link={"/docs/idn_docs/intro"} title={ans[3].title} views={ans[3].views}></DiscussCard>
+        </div> 
+      </div>
+    );
+  } else {
+    return (
+      <div></div>
+    )
+  }
 }
+
+function getPostList(posts, index) {
+  return {
+          'tags': posts.topic_list.topics[index].tags, 
+          'link': 'https://developer.sailpoint.com/discuss/t/' + posts.topic_list.topics[index].slug + '/' + posts.topic_list.topics[index].id, 
+          'title': posts.topic_list.topics[index].title, 
+          'views': posts.topic_list.topics[index].views
+        }
+}
+
+function findSolutionPost(posts) {
+  let index = 0;
+  for (const post of posts) {
+    if (post.has_accepted_answer && index > 2) {
+      return index;
+    }
+    index ++;
+  }
+  return index;
+}

src/components/HomepageGettingStarted/index.js

@@ -19,7 +19,7 @@ export default function HomepageGettingStarted() {
           </div> 
         </div>
         <div className={styles.carousel}>
-            <iframe className={styles.video} src="https://www.youtube.com/embed/N-JG8xjpKaI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            <iframe className={styles.video} src="https://www.youtube.com/embed/N-JG8xjpKaI" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
         </div>
       </div>
     </div>

src/pages/index.js

@@ -37,8 +37,9 @@ export default function Home() {
       description="Description will go into a meta tag in <head />">
       <main>
         <HomepageGettingStarted />
-        <HomepageBasics />
+        <HomepageBasics description={"If you still aren't sure where to get started, try one of the <b>Getting Started Guides</b> below, or see what our platform has to offer."} link={"/docs/idn_docs/intro"} title={"Start With the Basics"} image={"/homepage/person-head.png"} buttonText={"Explore our platform"} />
         <HomepageTrainingGuides></HomepageTrainingGuides>
+        <HomepageBasics description={"The SailPoint Developer Forums are a great place to find solutions to common development problems."} link={"/docs/idn_docs/intro"} title={"What is the Community saying?"} image={"/homepage/person-head.png"} buttonText={"Join the Discussion"}/>
         <HomepageDiscuss></HomepageDiscuss>
       </main>
     </Layout>