add survey card, remove contribution card, update popular tag (#388)

* add survey card

* update with new design

* remove padding-bottom

website/src/components/gallery/ShowcaseSurveyCard/index.tsx

@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import React from "react";
+import styles from "./styles.module.css";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import {
+  Card,
+  CardFooter,
+  Button,
+  ToggleButton,
+  Image,
+  Body2,
+  Subtitle1,
+} from "@fluentui/react-components";
+
+function closeCard(parentDiv) {
+  let parent = document.getElementById(parentDiv);
+  parent.style.display = "none";
+  // access localStorage until window is defined
+  if (typeof window !== "undefined") {
+    localStorage.setItem("surveyCardDisplay", parent.style.display);
+  }
+}
+
+export default function ShowcaseSurveyCard(): React.ReactElement {
+  // access localStorage until window is defined
+  if (
+    typeof window !== "undefined" &&
+    localStorage.getItem("surveyCardDisplay")
+  ) {
+    return null;
+  }
+  return (
+    <Card className={styles.card} appearance="filled" id="surveyCard">
+      <ToggleButton
+        onClick={() => closeCard("surveyCard")}
+        size="small"
+        appearance="transparent"
+        icon={
+          <Image
+            src={useBaseUrl("/img/close.svg")}
+            height={16}
+            width={16}
+            alt="Close"
+          />
+        }
+        className={styles.closeButton}
+      />
+      <Image
+        src={useBaseUrl("/img/chatPencil.svg")}
+        alt="surveyCard"
+        height={128}
+        width={128}
+      />
+      <div className={styles.text}>
+        <Subtitle1 align="center">Got a minute? We're all ears!</Subtitle1>
+        <Body2 align="center">
+          Help us shape the future of our template library by sharing your
+          feedback.
+        </Body2>
+      </div>
+      <CardFooter>
+        <Button
+          appearance="primary"
+          size="large"
+          className={styles.surveyButton}
+          onClick={() => {
+            window.open("https://aka.ms/awesome-azd-survey", "_blank");
+          }}
+          icon={
+            <Image
+              src={useBaseUrl("/img/openLink.svg")}
+              alt="surveyCard"
+              height={20}
+              width={20}
+            />
+          }
+        >
+          Take the survey
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}

website/src/components/gallery/ShowcaseSurveyCard/styles.module.css

@@ -0,0 +1,37 @@
+/**
+* Copyright (c) Microsoft Corporation. All rights reserved.
+* Licensed under the MIT License.
+ */
+
+/* Keep for future change on light vs dark theme */
+
+.card {
+  width: 350px;
+  height: 368px;
+  max-width: 100%;
+  border-radius: 8px;
+  max-height: 100%;
+  min-width: 300px;
+  padding: 20px !important;
+  align-items: center;
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.surveyButton{
+  background-color: #7160e8 !important;
+}
+
+.surveyButton:hover {
+  background-color: #5a4cb9 !important;
+}
+
+.closeButton {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+}

website/src/pages/ShowcaseCards.tsx

@@ -8,7 +8,7 @@ import ShowcaseEmptyResult from "../components/gallery/ShowcaseEmptyResult";
 import { type User, type TagType } from "../data/tags";
 import styles from "./styles.module.css";
 import ShowcaseCard from "../components/gallery/ShowcaseCard";
-import ShowcaseContributionCard from "../components/gallery/ShowcaseContributionCard";
+import ShowcaseSurveyCard from "../components/gallery/ShowcaseSurveyCard";
 
 export default function ShowcaseCards({
   filteredUsers,
@@ -27,12 +27,12 @@ export default function ShowcaseCards({
           {filteredUsers.map((user, index) => (
             <React.Fragment key={index}>
               {(len < 6 && index === len - 1) || index === 4 ? (
-                <React.Fragment key="cardWithContributionCard">
+                <React.Fragment key="cardWithSurveyCard">
                   <React.Fragment key={user.title}>
                     <ShowcaseCard user={user} />
                   </React.Fragment>
-                  <React.Fragment key="fragment_contributionCard">
-                    <ShowcaseContributionCard />
+                  <React.Fragment key="fragment_surveyCard">
+                    <ShowcaseSurveyCard />
                   </React.Fragment>
                 </React.Fragment>
               ) : (