feat: karnot quest visuals (#965)

* feat: karnot quest visuals

* banner

* adding banner

components/quests/questBanner.tsx

@@ -0,0 +1,42 @@
+import { FunctionComponent, useMemo } from "react";
+import questBanners from "../../public/utils/questbanners.json";
+import styles from "@styles/quests.module.css";
+import Button from "@components/UI/button";
+
+type QuestBannerProps = {
+  questId: string;
+};
+
+const QuestBanner: FunctionComponent<QuestBannerProps> = ({ questId }) => {
+  const bannerDetails = useMemo(() => {
+    return questBanners.find((banner) => banner.questId === questId);
+  }, [questId]);
+  return bannerDetails ? (
+    <div className={styles.questBanner}>
+      <div
+        className={styles.questBannerImage}
+        style={{ backgroundImage: `url(${bannerDetails.image})` }}
+      />
+      <div className={styles.questBannerContent}>
+        <h2 className={styles.questBannerTitle}>
+          {bannerDetails.tag ? (
+            <span className={styles.bannerTag}>{bannerDetails.tag} - </span>
+          ) : null}
+          {bannerDetails.title}
+        </h2>
+        <p>{bannerDetails.description}</p>
+        <div className="w-fit">
+          <Button
+            onClick={() => {
+              window.open(bannerDetails.href, "_blank");
+            }}
+          >
+            {bannerDetails.cta}
+          </Button>
+        </div>
+      </div>
+    </div>
+  ) : null;
+};
+
+export default QuestBanner;

components/quests/questDetails.tsx

@@ -36,6 +36,7 @@ import {
 } from "@services/apiService";
 import Typography from "@components/UI/typography/typography";
 import { TEXT_TYPE } from "@constants/typography";
+import QuestBanner from "./questBanner";
 
 type QuestDetailsProps = {
   quest: QuestDocument;
@@ -429,7 +430,7 @@ const QuestDetails: FunctionComponent<QuestDetailsProps> = ({
                 />
               );
             })}
-
+            <QuestBanner questId={questId} />
             <Reward
               quest={quest}
               hasNftReward={hasNftReward}

public/utils/questbanners.json

@@ -0,0 +1,11 @@
+[
+  {
+    "questId": "224",
+    "tag": "Optional",
+    "title": "Write a thread on xSTRK",
+    "description": "Top 10 threads get $50 each.",
+    "cta": "Participate",
+    "href": "https://www.typeform.com/",
+    "image": "/karnot/endurBanner.webp"
+  }
+]

styles/quests.module.css

@@ -301,6 +301,51 @@
   font-weight: 400;
 }
 
+.questBanner {
+  max-width: 90%;
+  width: 728px;
+  margin-top: 1.5rem;
+  background-color: var(--menu-background);
+
+  /* Small Shadow */
+  box-shadow: 0px 2px 30px rgba(16, 16, 18, 0.06);
+  border-radius: 8px;
+  display: flex;
+  align-items: stretch;
+  height: 201px;
+}
+
+.questBannerContent {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 24px;
+  gap: 1rem;
+  width: fit-content;
+}
+
+.questBannerTitle {
+  font-size: 24px;
+  font-family: "Sora-Bold";
+  font-weight: 700;
+  line-height: 30px;
+  letter-spacing: 0.16px;
+  margin-top: 1rem;
+  width: fit-content;
+}
+
+.bannerTag {
+  color: rgba(210, 210, 210, 0.786);
+}
+
+.questBannerImage {
+  border-bottom-left-radius: 8px;
+  border-top-left-radius: 8px;
+  width: 201px;
+  height: 100%;
+  background-size: cover;
+}
+
 @media (max-width: 1024px) {
   .verifyButton {
     width: 100px;
@@ -384,4 +429,17 @@
     width: 27px;
     height: 27px;
   }
+
+  .questBanner {
+    height: fit-content;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .questBannerImage {
+    width: 100%;
+    height: 100px;
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 8px;
+  }
 }