Refactor Home page and replace current index /quests

app/page.tsx

@@ -1,65 +1,48 @@
 "use client";
-import React, { useContext } from "react";
+import React, { useCallback } from "react";
 import styles from "@styles/Home.module.css";
 import { useRouter } from "next/navigation";
-import HowToParticipate from "@components/pages/home/howToParticipate";
-import Stats from "@components/UI/stats/stats";
 import Blur from "@components/shapes/blur";
-import { QuestsContext } from "@context/QuestsProvider";
-import FeaturedQuest from "@components/UI/featured_banner/featuredQuest";
-import QuestAndCollectionTabs from "@components/pages/home/questAndCollectionTabs";
-import CategoryTitle from "@components/UI/titles/categoryTitle";
+import Typography from "@components/UI/typography/typography";
+import { TEXT_TYPE } from "@constants/typography";
+import MainHeader from "@components/pages/home/hero";
+import Card from "@components/pages/home/card";
+import CallToAction from "@components/pages/home/callToAction";
+
 
 export default function Page() {
   const router = useRouter();
-  const { featuredQuest, categories, trendingQuests, quests } =
-    useContext(QuestsContext);
+
+  const handleNavigateToDefi = useCallback(() => {
+    router.push("/discover/defi");
+  }, [router]);
+
+  const handleNavigateToQuests = useCallback(() => {
+    router.push("/quests");
+  }, [router]);
 
   return (
     <div className={styles.screen}>
-      <div className={styles.container}>
+      <div className={`flex flex-col items-center justify-center`}>
         <div className={styles.blur1}>
           <Blur />
         </div>
-        <div className={styles.featured_quest_banner_container}>
-          <FeaturedQuest
-            heading="Featured"
-            key={featuredQuest?.id}
-            title={featuredQuest?.title_card}
-            onClick={() => router.push(`/quest/${featuredQuest?.id}`)}
-            imgSrc={featuredQuest?.img_card}
-            issuer={{
-              name: featuredQuest?.issuer ?? "",
-              logoFavicon: featuredQuest?.logo ?? "",
-            }}
-            reward={featuredQuest?.rewards_title}
-            desc={featuredQuest?.desc}
-            expiry={featuredQuest?.expiry_timestamp}
-            questId={featuredQuest?.id}
-          />
-        </div>
-        <QuestAndCollectionTabs
-          quests={quests}
-          categories={categories}
-          trendingQuests={trendingQuests}
-        />
-        <CategoryTitle
-          subtitle="Get access to our community"
-          title="About our quests"
-          corner="bottomLeft"
-          squares="bottomRight"
-        />
-        <Stats
-          stats={[
-            { name: "Quests NFT minted", value: "+1M" },
-            { name: "Unique addresses", value: "398K" },
-            { name: "Unique visitors", value: "+200K" },
-          ]}
-        />
-        <div className={styles.blur2}>
-          <Blur green />
-        </div>
-        <HowToParticipate />
+
+        <MainHeader />
+
+        <CallToAction>
+          <Card title="DeFi" imgSrc="/home/defi.webp" onClick={handleNavigateToDefi}>
+            <Typography type={TEXT_TYPE.BODY_MICRO} color="textGray">
+              Access the top DeFi opportunities on Starknet and grow your assets effortlessly.
+            </Typography>
+          </Card>
+          <Card title="Quest" imgSrc="/home/quests.webp" onClick={handleNavigateToQuests}>
+            <Typography type={TEXT_TYPE.BODY_MICRO} color="textGray">
+              Complete exciting quests, earn rewards, and deepen your knowledge of Starknet.
+            </Typography>
+          </Card>
+        </CallToAction>
+
       </div>
     </div>
   );

app/quests/page.tsx

@@ -0,0 +1,66 @@
+"use client";
+import React, { useContext } from "react";
+import styles from "@styles/Home.module.css";
+import { useRouter } from "next/navigation";
+import HowToParticipate from "@components/pages/home/howToParticipate";
+import Stats from "@components/UI/stats/stats";
+import Blur from "@components/shapes/blur";
+import { QuestsContext } from "@context/QuestsProvider";
+import FeaturedQuest from "@components/UI/featured_banner/featuredQuest";
+import QuestAndCollectionTabs from "@components/pages/home/questAndCollectionTabs";
+import CategoryTitle from "@components/UI/titles/categoryTitle";
+
+export default function Page() {
+  const router = useRouter();
+  const { featuredQuest, categories, trendingQuests, quests } =
+    useContext(QuestsContext);
+
+  return (
+    <div className={styles.screen}>
+      <div className={styles.container}>
+        <div className={styles.blur1}>
+          <Blur />
+        </div>
+        <div className={styles.featured_quest_banner_container}>
+          <FeaturedQuest
+            heading="Featured"
+            key={featuredQuest?.id}
+            title={featuredQuest?.title_card}
+            onClick={() => router.push(`/quest/${featuredQuest?.id}`)}
+            imgSrc={featuredQuest?.img_card}
+            issuer={{
+              name: featuredQuest?.issuer ?? "",
+              logoFavicon: featuredQuest?.logo ?? "",
+            }}
+            reward={featuredQuest?.rewards_title}
+            desc={featuredQuest?.desc}
+            expiry={featuredQuest?.expiry_timestamp}
+            questId={featuredQuest?.id}
+          />
+        </div>
+        <QuestAndCollectionTabs
+          quests={quests}
+          categories={categories}
+          trendingQuests={trendingQuests}
+        />
+        <CategoryTitle
+          subtitle="Get access to our community"
+          title="About our quests"
+          corner="bottomLeft"
+          squares="bottomRight"
+        />
+        <Stats
+          stats={[
+            { name: "Quests NFT minted", value: "+1M" },
+            { name: "Unique addresses", value: "398K" },
+            { name: "Unique visitors", value: "+200K" },
+          ]}
+        />
+        <div className={styles.blur2}>
+          <Blur green />
+        </div>
+        <HowToParticipate />
+      </div>
+    </div>
+  );
+}

components/UI/navbar.tsx

@@ -190,22 +190,22 @@ const Navbar: FunctionComponent = () => {
             <Link href="/" className="modified-cursor-pointer">
               <Image
                 className={styles.logo}
-                src="/visuals/starknetquestLogo.svg"
-                alt="Starknet.id Logo"
-                width={70}
-                height={70}
+                src='/visuals/starknetquestLogo.svg'
+                alt='Starknet.id Logo'
+                width={80}
+                height={80}
                 priority
               />
             </Link>
           </div>
           <div>
-            <ul className="hidden lg:flex uppercase items-center ">
-              <Link href="/">
-                <li className={styles.menuItem}>Quests</li>
-              </Link>
+            <ul className='hidden lg:flex uppercase items-center '>
               <Link href={`/discover/defi`}>
                 <li className={styles.menuItem}>DeFi</li>
               </Link>
+              <Link href='/quests'>
+                <li className={styles.menuItem}>Quests</li>
+              </Link>
               {isConnected && (
                 <Link href={`/${address}`}>
                   <li className={styles.menuItem}>Dashboard</li>
@@ -263,20 +263,20 @@ const Navbar: FunctionComponent = () => {
             <div className="h-full flex flex-col">
               <div className="py-4 my-auto text-center font-extrabold">
                 <ul className="uppercase text-babe-blue">
-                  <Link href="/">
+                  <Link href="/discover/defi">
                     <li
                       onClick={() => setNav(false)}
                       className={styles.menuItemSmall}
                     >
-                      Quests
+                      DeFi
                     </li>
                   </Link>
-                  <Link href="/discover/defi">
+                  <Link href='/quests'>
                     <li
                       onClick={() => setNav(false)}
                       className={styles.menuItemSmall}
                     >
-                      DeFi
+                      Quests
                     </li>
                   </Link>
                   {isConnected && (

components/pages/home/callToAction.tsx

@@ -0,0 +1,19 @@
+import React, { FunctionComponent } from "react";
+
+type CallToActionProps = {
+    children: React.ReactNode;
+};
+
+const CallToAction: FunctionComponent<CallToActionProps> = ({
+    children
+}) => {
+
+  return (
+    <div className={`flex flex-row flex-wrap gap-5 items-center justify-center py-12`}>
+        { children }
+    </div>
+  );
+};
+export default CallToAction;
+
+

components/pages/home/card.tsx

@@ -0,0 +1,36 @@
+import React, { FunctionComponent } from "react";
+import styles from "@styles/components/pages/home/card.module.css";
+import cdnize from "@utils/cdnize";
+import Typography from "@components/UI/typography/typography";
+import { TEXT_TYPE } from "@constants/typography";
+
+type CardProps = {
+  children: React.ReactNode;
+  imgSrc: string;
+  title: string;
+  onClick: () => void;
+  disabled?: boolean;
+};
+
+const Card: FunctionComponent<CardProps> = ({
+  children,
+  title,
+  imgSrc,
+  onClick,
+  disabled,
+}) => {
+  return (
+    <div className={styles.card} onClick={onClick} aria-disabled={disabled}>
+      <div
+        style={{ backgroundImage: `url('${cdnize(imgSrc)}')` }}
+        className={styles.cardImage}
+      />
+      <div className={`${styles.cardInfos}`}>
+        <Typography type={TEXT_TYPE.H3} color="secondary" className={styles.cardTitle}>{title}</Typography>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Card;

components/pages/home/hero.tsx

@@ -0,0 +1,30 @@
+import React, { FunctionComponent } from "react";
+import styles from "@styles/components/pages/home/hero.module.css";
+
+import Typography from "../../UI/typography/typography";
+import { TEXT_TYPE } from "@constants/typography";
+import SplitTitle from "./splitTitle";
+
+
+const Hero: FunctionComponent<{}> = ({}) => (
+  <div>
+      <div className="item-center justify-center pb-4">
+        <SplitTitle className="leading-12 pb-2" />
+
+        <Typography type={TEXT_TYPE.H1} 
+          className={`${styles.header} flex justify-center text-center text-5xl leading-12 text-transparent`}>
+          WITH STARKNET
+        </Typography>
+      </div>
+
+      <Typography type={TEXT_TYPE.BODY_MICRO} color="textGray"
+        className="max-w-screen-sm text-sm leading-6 text-center">
+        Starknet Quest is our gateway to DeFi, offering tools and opportunities 
+        for individuals, DAOs, and protocols to grow their assets and explore Starknet's
+        full potential.
+      </Typography>
+
+  </div>
+);
+
+export default Hero;