more changes to main ambassador page

src/components/ambassador/AmbassadorCard/styles.module.css

@@ -15,11 +15,13 @@
   border: 1px solid var(--dev-card-background);
   border-radius: 40px;
   opacity: 1;
+  transition: all  0.3s;
+  opacity: 1;
 }
 
 .card:hover {
   cursor: pointer;
-  top: -2px;
+  transform: translate(0px, -5px);
   box-shadow: var(--dev-card-selected);
 }
 

src/components/ambassador/AmbassadorCards/index.js

@@ -17,8 +17,12 @@ export default function AmbassadorCards({
     if (data.members) {
       const memberDetails = await getAmbassadorDetails(data.members.map(item => item.id))
       for (const member of data.members) {
-          resultset.push(await getMemberList(member, memberDetails.users.filter(item => item.id === member.id)[0]))
+          const memberDetail = memberDetails.users.filter(item => item.id === member.id)[0]
+          if (member.avatar_template.includes("developer.sailpoint.com") && memberDetail.bio_excerpt && memberDetail.bio_excerpt.length > 60 && memberDetail.accepted_answers > 0) {
+            resultset.push(await getMemberList(member, memberDetail))
+          }          
       }
+      resultset.sort((a, b) => a.date - b.date)
       setCardData(resultset);
       
     } else {
@@ -74,7 +78,7 @@ async function getMemberList(member, details) {
     creatorImage: getavatarURL(member.avatar_template),
     title: member.title,
     bio: details.bio_excerpt,
-    member_since: new Date(member.added_at).toISOString().slice(0, 4),
+    member_since: new Date(member.added_at).toLocaleString('default', {month: 'long'}) + ' ' + new Date(member.added_at).toISOString().slice(0, 4),
     badge_count: details.badge_count,
     answers: details.accepted_answers,
     location: details.location,

src/components/blog/BlogSidebar/index.js

@@ -47,13 +47,13 @@ export default function BlogSidebar({
   if (tagProductData && tagTechnologyData) {
     return (
       <div className={styles.sidebar}>
-        <div className={styles.tagHeader}>Posts by Product</div>
+        <div className={styles.tagHeader}>Blogs by Product</div>
         <div className={styles.tagContainer}>
             {tagProductData.map(function(a, index){
               return <BlogSidebarButton key={a} text={a} filterCallback={filterCallback}></BlogSidebarButton>
             })}
         </div>
-        <div className={styles.tagHeader}>Posts by Identity Governance</div>
+        <div className={styles.tagHeader}>Blogs by Identity Governance</div>
         <div className={styles.tagContainer}>
             {tagTechnologyData.map(function(a, index){
               return <div key={'div' + a} className={index > 10 && filterTags ? styles.hidden : ''} > <BlogSidebarButton key={a} text={a} filterCallback={filterCallback}></BlogSidebarButton></div>

src/components/blog/BlogSidebar/styles.module.css

@@ -6,7 +6,7 @@
 }
 
 .tagHeader {
-  margin-top: 10px;
+  margin-top: 30px;
   font-size: 22px;
   font-weight: 700;
 }

src/components/marketplace/MarketplaceSidebar/styles.module.css

@@ -6,7 +6,7 @@
 }
 
 .tagHeader {
-  margin-top: 10px;
+  margin-top: 30px;
   font-size: 22px;
   font-weight: 700;
 }

src/css/custom.css

@@ -249,8 +249,8 @@
   --text-on-primary: #ffffff;
 
   /*card css*/
-  --dev-card-background: #ffffff;
-  --dev-card-shadow: 0px 20px 60px #00000015;
+  --dev-card-background: #e9e9e963;
+  --dev-card-shadow: 0px 0px 0px #6b6b6b15;
   --dev-card-selected: 0 4px 5px rgba(0, 0, 0, 0.2);
 
   --ifm-github-logo: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
@@ -284,8 +284,8 @@
 
   /*card css*/
   --dev-card-background: #2a2b2d;
-  --dev-card-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
-  --dev-card-selected: 0 5px 5px rgba(107, 107, 107, 0.2);
+  --dev-card-shadow: 0 0px 0px rgba(0, 0, 0, 0.2);
+  --dev-card-selected: 0 5px 5px rgba(151, 151, 151, 0.2);
   --dev-secondary-text: #dae1e9;
   --dev-tag-highlight: #00000075;
 

src/pages/ambassador.js

@@ -14,13 +14,31 @@ export default function Ambassador() {
   return (
     <Layout description="The SailPoint Developer Community has everything you need to build, extend, and automate scalable identity solutions.">
       <main>
-        <AmbassadorBanner />
+        {/* <AmbassadorBanner /> */}
+        <div className={styles.ambassadorPurposeContainer}>
+          <img
+            className={styles.ambassadorPurposeImage}
+            src={useBaseUrl('/ambassador/Ambassador-Program-Banner.png')}></img>
+          <div className={styles.ambassadorPurposeText}>
+            Our global team of ambassadors empower their communities and help
+            make the Internet a safer place by attending and hosting meetups,
+            conferences, and other events that focus on authentication, security
+            and identity topics.
+            <div className={styles.button}>
+              <Link className={styles.link} to="https://developer.sailpoint.com/discuss/t/announcing-the-developer-community-ambassador-program/10634">
+                Become an Ambassador
+              </Link>
+            </div>
+          </div>
+        </div>
         <div className={styles.headerText}>
           <div className={styles.headerTextOne}>Expert Ambassadors</div>
         </div>
         <div className={styles.imageContainer}>
           <div className={styles.spanLeft}></div>
-          <img className={styles.ambassadorImage} src={useBaseUrl('/ambassador/AmbassadorBadge-Pink-Hex.png')}></img>
+          <img
+            className={styles.ambassadorImage}
+            src={useBaseUrl('/ambassador/AmbassadorBadge-Pink-Hex.png')}></img>
           <div className={styles.spanLeft}></div>
         </div>
         <div className={styles.ambassadorCardContainer}>
@@ -31,10 +49,14 @@ export default function Ambassador() {
         </div>
         <div className={styles.imageContainer}>
           <div className={styles.spanLeft}></div>
-          <img className={styles.ambassadorImage} src={useBaseUrl('/ambassador/AmbassadorBadge-QuadGrad-Squircle.png')}></img>
+          <img
+            className={styles.ambassadorImage}
+            src={useBaseUrl(
+              '/ambassador/AmbassadorBadge-QuadGrad-Squircle.png',
+            )}></img>
           <div className={styles.spanLeft}></div>
         </div>
-        
+
         <div className={styles.ambassadorCardContainer}>
           <AmbassadorCards expert={false} />
         </div>

src/pages/ambassador.module.css

@@ -16,7 +16,7 @@
   .headerText {
     text-align: center;
     display: flex;
-    margin: 150px auto 0px auto;
+    margin: 100px auto 0px auto;
     width: calc(100% - 100px);
     justify-content: center;
   }
@@ -54,4 +54,81 @@
     margin-left: 5px;
     height: 120px;
     width: 120px;
-  }
+  }
+
+
+  .ambassadorPurposeContainer {
+    display: flex;
+    justify-content: center;
+    max-width: 1600px;
+    align-items: center;
+  }
+
+
+  .ambassadorPurposeText {
+    font-size: 21px;
+    padding: 50px;
+    font-weight: 500;
+    color: var(--dev-text-color-normal);
+  }
+
+  .ambassadorPurposeImage {
+    width: 40%;
+    box-shadow: var(--dev-card-selected);
+    border-radius: 40px;
+    margin: 50px;
+  }
+
+  @media only screen and (max-width: 997px) {
+    .ambassadorPurposeContainer {
+      flex-direction: column;
+    }
+    .ambassadorPurposeImage {
+      width: 80%;
+    }
+}
+
+
+
+
+
+
+
+
+
+.button:hover {
+  cursor: pointer;
+  top: -2px;
+  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
+  background-color: #c552ae10;
+  color: #cc27b0;
+}
+
+.button {
+  text-decoration: none;
+  text-align: center;
+  margin: 30px auto;
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 100%;
+
+  /* Layout Properties */
+  width: 314px;
+  height: 61px;
+  line-height: 61px;
+  /* UI Properties */
+  background: transparent 0% 0% no-repeat padding-box;
+  opacity: 1;
+
+  box-shadow: 0px 20px 60px #00000015;
+  border: 2px solid #df61ca;
+  border-radius: 5px;
+}
+
+.link {
+  color: #df61ca;
+}
+.link:hover {
+  color: #df61ca;
+  text-decoration: none;
+}