feat: new quest page

components/UI/backButton.tsx

@@ -0,0 +1,26 @@
+import React, { FunctionComponent } from "react";
+import styles from "../../styles/components/backButton.module.css";
+
+type BackButtonProps = {
+  onClick: () => void;
+};
+
+const BackButton: FunctionComponent<BackButtonProps> = ({ onClick }) => (
+  <button onClick={onClick} className={styles.backButton}>
+    <svg
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15.75 19.5L8.25 12l7.5-7.5"
+      />
+    </svg>
+    Back
+  </button>
+);
+
+export default BackButton;

components/UI/iconsComponents/icons/arrowRightIcon.tsx

@@ -0,0 +1,23 @@
+import React, { FunctionComponent } from "react";
+
+const ArrowRightIcon: FunctionComponent<IconProps> = ({
+  width = 24,
+  color,
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={width}
+      viewBox="0 0 8 14"
+      fill="none"
+    >
+      <path
+        d="M7.4781 8.21816L2.95646 12.7398C2.40575 13.2905 1.77561 13.4134 1.06606 13.1085C0.356514 12.8036 0.00115935 12.2604 -7.83539e-08 11.479L-4.69848e-07 2.52263C-5.04056e-07 1.74003 0.355354 1.19628 1.06606 0.891356C1.77677 0.586435 2.4069 0.70991 2.95646 1.26178L7.4781 5.78343C7.65201 5.95734 7.78244 6.14574 7.8694 6.34863C7.95635 6.55153 7.99983 6.76891 7.99983 7.00079C7.99983 7.23267 7.95635 7.45006 7.8694 7.65295C7.78244 7.85585 7.65201 8.04425 7.4781 8.21816Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default ArrowRightIcon;

components/pages/home/homeControls.tsx

@@ -0,0 +1,13 @@
+import React, { FunctionComponent } from "react";
+import styles from "../../../styles/Home.module.css";
+
+const HomeControls: FunctionComponent = () => {
+  return (
+    <div className={styles.controls}>
+      <button aria-selected>All quests</button>
+      <button>Adventure</button>
+    </div>
+  );
+};
+
+export default HomeControls;

components/pages/home/howToParticipate.tsx

@@ -1,16 +1,14 @@
-import React from "react";
+import React, { FunctionComponent } from "react";
 import Steps from "../../UI/steps/steps";
 import CategoryTitle from "../../UI/titles/categoryTitle";
-import Crosses from "../../shapes/crosses";
 import styles from "../../../styles/components/pages/home/howToParticipate.module.css";
 
-const HowToParticipate = () => {
+const HowToParticipate: FunctionComponent = () => {
   return (
     <section>
       <CategoryTitle
         title="How to Participate ?"
         subtitle="Engage in the Starknet Experience: Unlock New Possibilities"
-        corner="topLeft"
       />
       <div className={styles.stepsContainer}>
         <Steps
@@ -42,7 +40,6 @@ const HowToParticipate = () => {
             },
           ]}
         />
-        <Crosses xDecal={-300} />
       </div>
     </section>
   );

components/pages/home/questCategories.tsx

@@ -0,0 +1,31 @@
+import React, { FunctionComponent } from "react";
+import styles from "../../../styles/Home.module.css";
+import QuestCategory from "../../quests/questCategory";
+import QuestsSkeleton from "../../skeletons/questsSkeleton";
+
+type QuestCategoriesProps = {
+  categories: QuestCategory[];
+};
+
+const QuestCategories: FunctionComponent<QuestCategoriesProps> = ({
+  categories,
+}) => {
+  return (
+    <>
+      <h1 className={styles.title}>Accomplish your Starknet Quests</h1>
+      <div className={`${styles.container} my-12`}>
+        <div className={styles.questCategories}>
+          {categories ? (
+            categories.map((category) => {
+              return <QuestCategory key={category.name} category={category} />;
+            })
+          ) : (
+            <QuestsSkeleton />
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default QuestCategories;

components/pages/home/trending.tsx

@@ -0,0 +1,44 @@
+import React, { FunctionComponent } from "react";
+import styles from "../../../styles/Home.module.css";
+import Quest from "../../quests/quest";
+import QuestsSkeleton from "../../skeletons/questsSkeleton";
+import { useRouter } from "next/router";
+import { QuestDocument } from "../../../types/backTypes";
+
+type TrendingQuestsProps = {
+  trendingQuests: QuestDocument[];
+};
+
+const TrendingQuests: FunctionComponent<TrendingQuestsProps> = ({
+  trendingQuests,
+}) => {
+  const router = useRouter();
+  return (
+    <>
+      <h1 className={styles.title}>Trending quests</h1>
+      <div className={styles.questContainer}>
+        {trendingQuests ? (
+          trendingQuests.map((quest) => {
+            return (
+              <Quest
+                key={quest.id}
+                title={quest.title_card}
+                onClick={() => router.push(`/quest/${quest.id}`)}
+                imgSrc={quest.img_card}
+                issuer={{
+                  name: quest.issuer,
+                  logoFavicon: quest.logo,
+                }}
+                reward={quest.rewards_title}
+              />
+            );
+          })
+        ) : (
+          <QuestsSkeleton />
+        )}
+      </div>
+    </>
+  );
+};
+
+export default TrendingQuests;

components/quests/featuredQuest.tsx

@@ -26,17 +26,17 @@ const FeaturedQuest: FunctionComponent<FeaturedQuestProps> = ({
 }) => {
   const isSmallScreen = useMediaQuery("(max-width: 1024px)");
 
-  return onClick && !isSmallScreen ? (
+  return onClick ? (
     <div className={styles.featuredQuest}>
       <div className={styles.featuredQuestInfos}>
-        <p className="text-gray-200	mt-2 text-start">Featured</p>
+        <p className="mt-2 text-start">Featured</p>
         <h3 className={styles.featuredQuestTitle}>{title}</h3>
         <p className="text-gray-200	 mt-4 text-start">{desc}</p>
         <div className="flex mt-4 mb-4 items-center">
           <img width={20} src={issuer?.logoFavicon} />
           <p className="text-white ml-2">{reward}</p>
         </div>
-        <div className="w-2/5">
+        <div>
           <Button onClick={onClick}>Begin</Button>
         </div>
       </div>

components/quests/nftDisplay.tsx

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from "react";
-import styles from "../../styles/quests.module.css";
 import NftIssuer from "./nftIssuer";
+import NftImage from "./nftImage";
 
 type NftDisplayProps = {
   nfts: Nft[];
@@ -11,19 +11,7 @@ const NftDisplay: FunctionComponent<NftDisplayProps> = ({ nfts, issuer }) => {
   return (
     <div className="flex flex-col justify-center items-center">
       <NftIssuer issuer={issuer} />
-      <div className="flex gap-5 flex-wrap justify-center items-center">
-        {nfts.map((nft, index) => (
-          <div
-            key={index}
-            className="flex justify-center items-center flex-col"
-          >
-            <img className={styles.nftStyle} src={nft.imgSrc} />
-            {nft.level && nfts.length > 1 ? (
-              <p className={styles.level}>Level {nft.level}</p>
-            ) : null}
-          </div>
-        ))}
-      </div>
+      <NftImage nfts={nfts} />
     </div>
   );
 };

components/quests/nftImage.tsx

@@ -0,0 +1,23 @@
+import React, { FunctionComponent } from "react";
+import styles from "../../styles/quests.module.css";
+
+type NftImageProps = {
+  nfts: Nft[];
+};
+
+const NftImage: FunctionComponent<NftImageProps> = ({ nfts }) => {
+  return (
+    <div className="flex gap-5 flex-wrap justify-center items-center">
+      {nfts.map((nft, index) => (
+        <div key={index} className="flex justify-center items-center flex-col">
+          <img className={styles.nftStyle} src={nft.imgSrc} />
+          {nft.level && nfts.length > 1 ? (
+            <p className={styles.level}>Level {nft.level}</p>
+          ) : null}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default NftImage;

components/quests/questCategory.tsx

@@ -0,0 +1,25 @@
+import React, { FunctionComponent } from "react";
+import styles from "../../styles/Home.module.css";
+import Link from "next/link";
+
+type QuestCategoryProps = {
+  category: QuestCategory;
+};
+
+const QuestCategory: FunctionComponent<QuestCategoryProps> = ({ category }) => {
+  return (
+    <Link href={`/categories/${category.name}`}>
+      <div className={styles.questCategory}>
+        <div className={styles.categoryInfos}>
+          <h2 className="text-gray-200">{category.name} Quest</h2>
+          <p className="text-gray-200">
+            {category.questNumber} quest{category.questNumber > 1 ? "s" : null}
+          </p>
+        </div>
+        <img src={category.img} />
+      </div>
+    </Link>
+  );
+};
+
+export default QuestCategory;