From 30dfc58d55094c88a5f263770d6e50c6bb587f1d Mon Sep 17 00:00:00 2001
From: karlavasquez8 <karlavasquez817@gmail.com>
Date: Fri, 19 Apr 2024 17:55:08 -0500
Subject: [PATCH 1/5] feat:challenge view styles

---
 packages/nextjs/app/challenge/[id]/page.tsx   | 62 ++++++++++++++++++-
 packages/nextjs/app/page.tsx                  |  6 +-
 .../ChallengeCard/ChallengeCard.tsx           |  2 +-
 packages/nextjs/components/Header.tsx         | 22 ++++---
 .../StepInstruction/StepInstruction.tsx       |  2 +-
 packages/nextjs/data-challenges/challenges.ts | 16 ++---
 packages/nextjs/tailwind.config.ts            |  6 +-
 7 files changed, 88 insertions(+), 28 deletions(-)

diff --git a/packages/nextjs/app/challenge/[id]/page.tsx b/packages/nextjs/app/challenge/[id]/page.tsx
index 60c39359..20a8ebe3 100644
--- a/packages/nextjs/app/challenge/[id]/page.tsx
+++ b/packages/nextjs/app/challenge/[id]/page.tsx
@@ -1,9 +1,11 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, { FC, useEffect, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import { useParams } from "next/navigation";
 
+// eslint-disable-next-line react/display-name
+
 const PageView: React.FC = () => {
   const { id } = useParams();
 
@@ -13,6 +15,7 @@ const PageView: React.FC = () => {
     const getMarkdown = async () => {
       const response = await fetch(
         `https://raw.githubusercontent.com/Quantum3-Labs/speedrunstark/${id}/README.md`,
+        // `https://raw.githubusercontent.com/scaffold-eth/se-2-challenges/challenge-0-simple-nft/README.md`,
       );
       const markdownData = await response.text();
       setMarkdown(markdownData);
@@ -22,8 +25,61 @@ const PageView: React.FC = () => {
   }, [id]);
   return (
     <div className=" flex items-center w-full justify-center sm:text-[12px] ">
-      <div className="max-w-[800px] py-20 sm:max-w-[400px] sm:py-5 sm:px-5 ">
-        <ReactMarkdown>{markdown}</ReactMarkdown>
+      <div className="max-w-[860px] py-20 sm:max-w-[400px] sm:py-5 sm:px-5 leading-7">
+        <ReactMarkdown
+          components={{
+            h1: ({ children }) => {
+              return (
+                <h1 className="text-primary text-4xl font-bold py-4 border-b border-[#1c2d49] leading-7 mb-2 sm:text-lg ">
+                  {children}
+                </h1>
+              );
+            },
+            h2: ({ children }) => (
+              <h2 className="text-primary text-3xl font-bold leading-7 py-3 sm:text-sm sm:m-0">
+                {children}
+              </h2>
+            ),
+            p: ({ children }) => (
+              <p className="text-primary text-base sm:text-xs leading-7 text-justify max-w-[860px] sm:max-w-[400px]">
+                {children}
+              </p>
+            ),
+            div: ({ children }) => (
+              <div className="text-primary py-3">{children}</div>
+            ),
+            a: ({ children, href }) => (
+              <a
+                className="text-accent cursor-pointer sm:text-xs leading-7"
+                href={href}
+              >
+                {children}
+              </a>
+            ),
+            pre: ({ children }) => (
+              <pre className="bg-secondary-content text-secondary rounded p-5 sm:text-xs leading-7">
+                {children}
+              </pre>
+            ),
+            code: ({ children }) => (
+              <div className="max-w-[500px] sm:w-[300px] ">
+                <code className="text-sm rounded bg-secondary-content text-secondary max-w-[500px] px-[4px] sm:text-xs leading-7">
+                  {children}
+                </code>
+              </div>
+            ),
+            blockquote: ({ children }) => (
+              <blockquote className="text-justify sm:text-xs leading-7">
+                {children}
+              </blockquote>
+            ),
+            li: ({ children }) => (
+              <li className="list-disc sm:text-xs leading-7">{children}</li>
+            ),
+          }}
+        >
+          {markdown}
+        </ReactMarkdown>
       </div>
     </div>
   );
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
index ff35484f..04f39608 100644
--- a/packages/nextjs/app/page.tsx
+++ b/packages/nextjs/app/page.tsx
@@ -50,7 +50,7 @@ const Home: NextPage = () => {
         </div>
         <div className="footer-header-landing"></div>
       </div>
-      <div className="w-full flex justify-center text-lg flex-col items-center text-primary ">
+      <div className="w-full flex justify-center text-lg flex-col items-center text-primary bg-">
         <div className="w-full px-[20px] flex justify-center flex-col items-center sm:pr-[35px]">
           {firstChallenges.slice(0, 3).map((challenge) => (
             <ChallengeCard
@@ -77,7 +77,7 @@ const Home: NextPage = () => {
               </div>
               <div className="flex lg:justify-center">
                 <div className="max-w-[430px] w-full py-20 pl-20 sm:py-0 sm:pl-3 sm:flex lg:pl-0  lg:pt-0">
-                  <span className="sm:text-[12px] sm:text-center ">
+                  <span className="sm:text-[12px] sm:text-center leading-7 sm:text-xs">
                     The BuidlGuidl is a curated group of Ethereum builders
                     creating products, prototypes, and tutorials to enrich the
                     web3 ecosystem. A place to show off your builds and meet
@@ -97,7 +97,7 @@ const Home: NextPage = () => {
               title={challenge.title}
               description={challenge.description}
               imageUrl={challenge.imageUrl}
-              buttonText="LOCK"
+              buttonText="QUEST"
               onButtonClick={() => router.push(`/challenge/${challenge.id}`)}
               end={challenge.end || false}
               border={challenge.border !== undefined ? challenge.border : true}
diff --git a/packages/nextjs/components/ChallengeCard/ChallengeCard.tsx b/packages/nextjs/components/ChallengeCard/ChallengeCard.tsx
index 322eaa4e..2d9d9ed8 100644
--- a/packages/nextjs/components/ChallengeCard/ChallengeCard.tsx
+++ b/packages/nextjs/components/ChallengeCard/ChallengeCard.tsx
@@ -38,7 +38,7 @@ const ChallengeCard: React.FC<ChallengeCardProps> = ({
         <div className="max-w-[500px] flex flex-col gap-4 ">
           <span>{challenge}</span>
           <h2 className="text-2xl sm:text-[16px] sm:m-0">{title}</h2>
-          <p className="sm:m-0">{description}</p>
+          <p className="sm:m-0 leading-7 sm:text-xs">{description}</p>
           <div className="sm:pt-[10px]">
             <Button onClick={onButtonClick}>{buttonText}</Button>
           </div>
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
index aa415137..714e5cf3 100644
--- a/packages/nextjs/components/Header.tsx
+++ b/packages/nextjs/components/Header.tsx
@@ -41,20 +41,22 @@ export const Header = () => {
 
   return (
     <div
-      className={`lg:static top-0 navbar min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2 bg-base-100 ${pathname !== "/" ? "border-b border-[#1c2d49]" : ""}`}
+      className={`lg:static top-0 navbar min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2 bg-base-100 ${pathname !== "/" ? "border-b border-[#1c2d49] bg-base-400" : ""}`}
     >
-      <div className="pl-8">
+      <div className="pl-8 sm:pl-0">
         {pathname !== "/" && (
-          <Image
-            src={"/logo-header.svg"}
-            alt={"logo header"}
-            width={200}
-            height={65}
-            className="sm:w-[100px]"
-          />
+          <button onClick={() => (window.location.href = "/")}>
+            <Image
+              src={"/logo-header.svg"}
+              alt={"logo header"}
+              width={200}
+              height={65}
+              className="sm:w-[130px] "
+            />
+          </button>
         )}
       </div>
-      <div className="navbar-end flex-grow pr-8 py-[8px]">
+      <div className="navbar-end flex-grow pr-8 py-[8px] sm:pr-0 leading-7">
         <CustomConnectButton />
         <FaucetButton />
       </div>
diff --git a/packages/nextjs/components/StepInstruction/StepInstruction.tsx b/packages/nextjs/components/StepInstruction/StepInstruction.tsx
index 6323192d..ac375453 100644
--- a/packages/nextjs/components/StepInstruction/StepInstruction.tsx
+++ b/packages/nextjs/components/StepInstruction/StepInstruction.tsx
@@ -11,7 +11,7 @@ const StepInstruction: React.FC<StepInstructionProps> = ({ number, text }) => {
       <div className="w-6 h-6 rounded-full bg-gradient-linear text-white text-center sm:w-5 sm:h-5">
         {number}
       </div>
-      <span className="text-center text-[16px] sm:text-[12px]">{text}</span>
+      <span className="text-center text-[16px] sm:text-xs ">{text}</span>
     </div>
   );
 };
diff --git a/packages/nextjs/data-challenges/challenges.ts b/packages/nextjs/data-challenges/challenges.ts
index 9c5803a6..d58b9376 100644
--- a/packages/nextjs/data-challenges/challenges.ts
+++ b/packages/nextjs/data-challenges/challenges.ts
@@ -6,7 +6,7 @@ const allChallenges = [
       "🎫 Create a simple NFT to learn basics of scaffold-Stark. You'll use 👷‍♀️ HardHat to compile and deploy smart contracts. Then, you'll use a template React app full of important Ethereum components and hooks. Finally, you'll deploy an NFT to a public network to share with friends! 🚀",
     imageUrl: "/simpleNFT.png",
     end: true,
-    id: "challenge0",
+    id: "simple-nft-example",
   },
   {
     challenge: "Challenge #1",
@@ -14,7 +14,7 @@ const allChallenges = [
     description:
       "🦸 A superpower of Ethereum is allowing you, the builder, to create a simple set of rules that an adversarial group of players can use to work together. In this challenge, you create a decentralized application where users can coordinate a group funding effort. The users only have to trust the code.",
     imageUrl: "/stakingToken.png",
-    id: "challenge-0-simple-nft",
+    id: "decentralized-staking",
   },
   {
     challenge: "Challenge #2",
@@ -23,7 +23,7 @@ const allChallenges = [
       "🤖 Smart contracts are kind of like always on vending machines that anyone can access. Let's make a decentralized, digital currency (an ERC20 token). Then, let's build an unstoppable vending machine that will buy and sell the currency. We'll learn about the approve pattern for ERC20s and how contract to contract interactions work.",
     imageUrl: "/tokenVendor.png",
     border: false,
-    id: "challenge-0-simple-nft",
+    id: "token-vendor",
   },
   {
     challenge: "Challenge #3",
@@ -31,7 +31,7 @@ const allChallenges = [
     description:
       "🎰 Randomness is tricky on a public deterministic blockchain. The block hash is the result proof-of-work (for now) and some builders use this as a weak form of randomness. In this challenge you will take advantage of a Dice Game contract by predicting the randomness in order to only roll winning dice!",
     imageUrl: "/diceGame.png",
-    id: "challenge-0-simple-nft",
+    id: "dice-game",
   },
   {
     challenge: "Challenge #4",
@@ -39,7 +39,7 @@ const allChallenges = [
     description:
       "💵 Build an exchange that swaps ETH to tokens and tokens to ETH. 💰 This is possible because the smart contract holds reserves of both assets and has a price function based on the ratio of the reserves. Liquidity providers are issued a token that represents their share of the reserves and fees...",
     imageUrl: "/dex.png",
-    id: "challenge-0-simple-nft",
+    id: "build-a-dex",
   },
   {
     challenge: "Challenge #5",
@@ -47,7 +47,7 @@ const allChallenges = [
     description:
       "🛣️ The Ethereum blockchain has great decentralization & security properties but these properties come at a price: transaction throughput is low, and transactions can be expensive. This makes many traditional web applications infeasible on a blockchain... or does it? State channels look to solve these problems by allowing participants to securely transact off-chain while keeping interaction with Ethereum Mainnet at a minimum.",
     imageUrl: "/state.png",
-    id: "challenge-0-simple-nft",
+    id: "state-channel-application",
   },
   {
     challenge: "Challenge #6",
@@ -55,7 +55,7 @@ const allChallenges = [
     description:
       "🛣️ The Ethereum blockchain has great decentralization & security properties but these properties come at a price: transaction throughput is low, and transactions can be expensive. This makes many traditional web applications infeasible on a blockchain... or does it? State channels look to solve these problems by allowing participants to securely transact off-chain while keeping interaction with Ethereum Mainnet at a minimum.",
     imageUrl: "/multiSig.png",
-    id: "challenge-0-simple-nft",
+    id: "multisig-wallet-challenge",
   },
   {
     challenge: "Challenge #7",
@@ -64,7 +64,7 @@ const allChallenges = [
       "🧙 Tinker around with cutting edge smart contracts that render SVGs in Solidity. 🧫 We quickly discovered that the render function needs to be public... 🤔 This allows NFTs that own other NFTs to render their stash. Just wait until you see an Optimistic Loogie and a Fancy Loogie swimming around in the same Loogie Tank!",
     imageUrl: "/dynamicSvgNFT.png",
     border: false,
-    id: "challenge-0-simple-nft",
+    id: "svg-nft",
   },
 ];
 
diff --git a/packages/nextjs/tailwind.config.ts b/packages/nextjs/tailwind.config.ts
index 2de3551f..dc946253 100644
--- a/packages/nextjs/tailwind.config.ts
+++ b/packages/nextjs/tailwind.config.ts
@@ -60,7 +60,7 @@ module.exports = {
           primary: "#0C0C4F",
           "primary-content": "#212638",
           secondary: "#0C0C4F",
-          "secondary-content": "#E7F0FE",
+          "secondary-content": "#abc6f1",
           accent: "#93BBFB",
           "accent-content": "#212638",
           neutral: "#212638",
@@ -68,6 +68,7 @@ module.exports = {
           "base-100": "#E7F0FE",
           "base-200": "#f4f8ff",
           "base-300": "#0C0C4F",
+          "base-400": "#E7F0FE",
           "base-content": "#212638",
           info: "#93BBFB",
           success: "#34EEB6",
@@ -98,8 +99,9 @@ module.exports = {
           neutral: "#F9FBFF",
           "neutral-content": "#385183",
           "base-100": "#1b2841",
-          "base-200": "#1c2d49",
+          "base-200": "#29385d",
           "base-300": "#E7F0FE",
+          "base-400": "#364a70",
           "base-content": "#F9FBFF",
           info: "#385183",
           success: "#34EEB6",

From 545640c743d6be74a6f8e3ca6edda3617cf00170 Mon Sep 17 00:00:00 2001
From: karlavasquez8 <karlavasquez817@gmail.com>
Date: Fri, 19 Apr 2024 18:04:18 -0500
Subject: [PATCH 2/5] deleting tag

---
 packages/nextjs/app/challenge/[id]/page.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/nextjs/app/challenge/[id]/page.tsx b/packages/nextjs/app/challenge/[id]/page.tsx
index 20a8ebe3..d18e1cfb 100644
--- a/packages/nextjs/app/challenge/[id]/page.tsx
+++ b/packages/nextjs/app/challenge/[id]/page.tsx
@@ -62,11 +62,9 @@ const PageView: React.FC = () => {
               </pre>
             ),
             code: ({ children }) => (
-              <div className="max-w-[500px] sm:w-[300px] ">
-                <code className="text-sm rounded bg-secondary-content text-secondary max-w-[500px] px-[4px] sm:text-xs leading-7">
-                  {children}
-                </code>
-              </div>
+              <code className="text-sm rounded bg-secondary-content text-secondary max-w-[500px] px-[4px] sm:text-xs leading-7">
+                {children}
+              </code>
             ),
             blockquote: ({ children }) => (
               <blockquote className="text-justify sm:text-xs leading-7">

From 3322de35494ae35afb318bec52be5df8b5defdb1 Mon Sep 17 00:00:00 2001
From: karlavasquez8 <karlavasquez817@gmail.com>
Date: Fri, 19 Apr 2024 22:05:59 -0500
Subject: [PATCH 3/5] Add repository redirect button and markdown components

---
 packages/nextjs/app/challenge/[id]/page.tsx   | 71 +++++--------------
 packages/nextjs/app/page.tsx                  |  2 +-
 packages/nextjs/components/Footer.tsx         |  2 +-
 .../GetMarkdownComponents.tsx                 | 50 +++++++++++++
 4 files changed, 71 insertions(+), 54 deletions(-)
 create mode 100644 packages/nextjs/components/GetMarkdownComponents/GetMarkdownComponents.tsx

diff --git a/packages/nextjs/app/challenge/[id]/page.tsx b/packages/nextjs/app/challenge/[id]/page.tsx
index d18e1cfb..d938c670 100644
--- a/packages/nextjs/app/challenge/[id]/page.tsx
+++ b/packages/nextjs/app/challenge/[id]/page.tsx
@@ -1,14 +1,15 @@
 "use client";
 
-import React, { FC, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import { useParams } from "next/navigation";
+import { getMarkdownComponents } from "~~/components/GetMarkdownComponents/GetMarkdownComponents";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 
 // eslint-disable-next-line react/display-name
 
 const PageView: React.FC = () => {
   const { id } = useParams();
-
   const [markdown, setMarkdown] = useState<string>();
 
   useEffect(() => {
@@ -18,66 +19,32 @@ const PageView: React.FC = () => {
         // `https://raw.githubusercontent.com/scaffold-eth/se-2-challenges/challenge-0-simple-nft/README.md`,
       );
       const markdownData = await response.text();
+
       setMarkdown(markdownData);
     };
 
     getMarkdown();
   }, [id]);
+  const handleClick = () => {
+    window.open(
+      `https://github.com/Quantum3-Labs/speedrunstark/tree/${id}`,
+      "_blank",
+    );
+  };
   return (
     <div className=" flex items-center w-full justify-center sm:text-[12px] ">
       <div className="max-w-[860px] py-20 sm:max-w-[400px] sm:py-5 sm:px-5 leading-7">
-        <ReactMarkdown
-          components={{
-            h1: ({ children }) => {
-              return (
-                <h1 className="text-primary text-4xl font-bold py-4 border-b border-[#1c2d49] leading-7 mb-2 sm:text-lg ">
-                  {children}
-                </h1>
-              );
-            },
-            h2: ({ children }) => (
-              <h2 className="text-primary text-3xl font-bold leading-7 py-3 sm:text-sm sm:m-0">
-                {children}
-              </h2>
-            ),
-            p: ({ children }) => (
-              <p className="text-primary text-base sm:text-xs leading-7 text-justify max-w-[860px] sm:max-w-[400px]">
-                {children}
-              </p>
-            ),
-            div: ({ children }) => (
-              <div className="text-primary py-3">{children}</div>
-            ),
-            a: ({ children, href }) => (
-              <a
-                className="text-accent cursor-pointer sm:text-xs leading-7"
-                href={href}
-              >
-                {children}
-              </a>
-            ),
-            pre: ({ children }) => (
-              <pre className="bg-secondary-content text-secondary rounded p-5 sm:text-xs leading-7">
-                {children}
-              </pre>
-            ),
-            code: ({ children }) => (
-              <code className="text-sm rounded bg-secondary-content text-secondary max-w-[500px] px-[4px] sm:text-xs leading-7">
-                {children}
-              </code>
-            ),
-            blockquote: ({ children }) => (
-              <blockquote className="text-justify sm:text-xs leading-7">
-                {children}
-              </blockquote>
-            ),
-            li: ({ children }) => (
-              <li className="list-disc sm:text-xs leading-7">{children}</li>
-            ),
-          }}
-        >
+        <ReactMarkdown components={getMarkdownComponents()}>
           {markdown}
         </ReactMarkdown>
+        <div className="w-full flex justify-center">
+          <button
+            className="rounded-full border py-2 px-3 font-medium hover:bg-secondary-content flex items-center justify-center gap-1 text-center"
+            onClick={handleClick}
+          >
+            View it on Github <ArrowTopRightOnSquareIcon className="w-[20px]" />
+          </button>
+        </div>
       </div>
     </div>
   );
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
index 04f39608..0a600d62 100644
--- a/packages/nextjs/app/page.tsx
+++ b/packages/nextjs/app/page.tsx
@@ -97,7 +97,7 @@ const Home: NextPage = () => {
               title={challenge.title}
               description={challenge.description}
               imageUrl={challenge.imageUrl}
-              buttonText="QUEST"
+              buttonText="COMING SOON"
               onButtonClick={() => router.push(`/challenge/${challenge.id}`)}
               end={challenge.end || false}
               border={challenge.border !== undefined ? challenge.border : true}
diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
index c37e68ab..83a72be8 100644
--- a/packages/nextjs/components/Footer.tsx
+++ b/packages/nextjs/components/Footer.tsx
@@ -28,7 +28,7 @@ export const Footer = () => {
           <div className="flex flex-col md:flex-row gap-2 pointer-events-auto">
             {nativeCurrencyPrice > 0 && (
               <div>
-                <div className="btn btn-primary btn-sm font-normal gap-1 cursor-auto">
+                <div className="btn btn-primary btn-sm font-normal gap-1 cursor-auto bg-base-300 text-base-100">
                   <CurrencyDollarIcon className="h-4 w-4" />
                   <span>{nativeCurrencyPrice}</span>
                 </div>
diff --git a/packages/nextjs/components/GetMarkdownComponents/GetMarkdownComponents.tsx b/packages/nextjs/components/GetMarkdownComponents/GetMarkdownComponents.tsx
new file mode 100644
index 00000000..eaa008c7
--- /dev/null
+++ b/packages/nextjs/components/GetMarkdownComponents/GetMarkdownComponents.tsx
@@ -0,0 +1,50 @@
+import { Components } from "react-markdown";
+
+export const getMarkdownComponents = (): Components => {
+  return {
+    h1: ({ children }) => {
+      return (
+        <h1 className="text-primary text-4xl font-bold py-4 border-b border-[#1c2d49] leading-7 mb-2 sm:text-lg ">
+          {children}
+        </h1>
+      );
+    },
+    h2: ({ children }) => (
+      <h2 className="text-primary text-3xl font-bold leading-7 py-3 sm:text-sm sm:m-0">
+        {children}
+      </h2>
+    ),
+    p: ({ children }) => (
+      <p className="text-primary text-base sm:text-xs leading-7 text-justify max-w-[860px] sm:max-w-[400px]">
+        {children}
+      </p>
+    ),
+    div: ({ children }) => <div className="text-primary py-3">{children}</div>,
+    a: ({ children, href }) => (
+      <a
+        className="text-accent cursor-pointer sm:text-xs leading-7"
+        href={href}
+      >
+        {children}
+      </a>
+    ),
+    pre: ({ children }) => (
+      <pre className="bg-secondary-content text-secondary rounded p-5 sm:text-xs leading-7">
+        {children}
+      </pre>
+    ),
+    code: ({ children }) => (
+      <code className="text-sm rounded bg-secondary-content text-secondary max-w-[500px] px-[4px] sm:text-xs leading-7">
+        {children}
+      </code>
+    ),
+    blockquote: ({ children }) => (
+      <blockquote className="text-justify sm:text-xs leading-7">
+        {children}
+      </blockquote>
+    ),
+    li: ({ children }) => (
+      <li className="list-disc sm:text-xs leading-7">{children}</li>
+    ),
+  };
+};

From c38df632c4fdcdacba25b15409944404b7f5124a Mon Sep 17 00:00:00 2001
From: karlavasquez8 <karlavasquez817@gmail.com>
Date: Sat, 20 Apr 2024 10:06:50 -0500
Subject: [PATCH 4/5] add disable button redirect

---
 packages/nextjs/app/challenge/[id]/page.tsx   |  2 +-
 packages/nextjs/components/Button/Button.tsx  | 10 ++++++++--
 .../ChallengeCard/ChallengeCard.tsx           |  9 +++++++--
 .../GetMarkdownComponents.tsx                 | 19 ++++++++-----------
 4 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/packages/nextjs/app/challenge/[id]/page.tsx b/packages/nextjs/app/challenge/[id]/page.tsx
index d938c670..ed808e91 100644
--- a/packages/nextjs/app/challenge/[id]/page.tsx
+++ b/packages/nextjs/app/challenge/[id]/page.tsx
@@ -33,7 +33,7 @@ const PageView: React.FC = () => {
   };
   return (
     <div className=" flex items-center w-full justify-center sm:text-[12px] ">
-      <div className="max-w-[860px] py-20 sm:max-w-[400px] sm:py-5 sm:px-5 leading-7">
+      <div className="max-w-[860px] py-20 sm:w-full sm:py-5 sm:px-5 ">
         <ReactMarkdown components={getMarkdownComponents()}>
           {markdown}
         </ReactMarkdown>
diff --git a/packages/nextjs/components/Button/Button.tsx b/packages/nextjs/components/Button/Button.tsx
index 2cc0c7e5..3b842d65 100644
--- a/packages/nextjs/components/Button/Button.tsx
+++ b/packages/nextjs/components/Button/Button.tsx
@@ -3,14 +3,20 @@ import React, { ReactNode } from "react";
 interface ButtonProps {
   onClick: () => void;
   children: ReactNode;
+  isDisable?: boolean;
 }
 
-const Button: React.FC<ButtonProps> = ({ onClick, children }) => {
+const Button: React.FC<ButtonProps> = ({
+  onClick,
+  children,
+  isDisable = false,
+}) => {
   return (
     <button
-      className="py-[10px] px-[20px] sm:px-[10px] sm:py-[5px] bg-base-300 text-base-100 rounded-[8px] sm:text-[12px]"
+      className={`py-[10px] px-[20px] sm:px-[10px] sm:py-[5px] bg-base-300 text-base-100 rounded-[8px] sm:text-[12px] ${isDisable ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`}
       onClick={onClick}
       type="button"
+      disabled={isDisable || children === "Coming Soon"}
     >
       {children}
     </button>
diff --git a/packages/nextjs/components/ChallengeCard/ChallengeCard.tsx b/packages/nextjs/components/ChallengeCard/ChallengeCard.tsx
index 2d9d9ed8..12ee34b7 100644
--- a/packages/nextjs/components/ChallengeCard/ChallengeCard.tsx
+++ b/packages/nextjs/components/ChallengeCard/ChallengeCard.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import Image from "next/image";
 import Button from "~~/components/Button/Button";
 
@@ -40,7 +40,12 @@ const ChallengeCard: React.FC<ChallengeCardProps> = ({
           <h2 className="text-2xl sm:text-[16px] sm:m-0">{title}</h2>
           <p className="sm:m-0 leading-7 sm:text-xs">{description}</p>
           <div className="sm:pt-[10px]">
-            <Button onClick={onButtonClick}>{buttonText}</Button>
+            <Button
+              onClick={onButtonClick}
+              isDisable={buttonText === "COMING SOON"}
+            >
+              {buttonText}
+            </Button>
           </div>
         </div>
         <div>
diff --git a/packages/nextjs/components/GetMarkdownComponents/GetMarkdownComponents.tsx b/packages/nextjs/components/GetMarkdownComponents/GetMarkdownComponents.tsx
index eaa008c7..e1f581df 100644
--- a/packages/nextjs/components/GetMarkdownComponents/GetMarkdownComponents.tsx
+++ b/packages/nextjs/components/GetMarkdownComponents/GetMarkdownComponents.tsx
@@ -4,47 +4,44 @@ export const getMarkdownComponents = (): Components => {
   return {
     h1: ({ children }) => {
       return (
-        <h1 className="text-primary text-4xl font-bold py-4 border-b border-[#1c2d49] leading-7 mb-2 sm:text-lg ">
+        <h1 className="text-primary text-4xl font-bold py-4 border-b border-[#1c2d49] mb-2 sm:text-lg ">
           {children}
         </h1>
       );
     },
     h2: ({ children }) => (
-      <h2 className="text-primary text-3xl font-bold leading-7 py-3 sm:text-sm sm:m-0">
+      <h2 className="text-primary text-3xl font-bold py-3 sm:text-sm sm:m-0">
         {children}
       </h2>
     ),
     p: ({ children }) => (
-      <p className="text-primary text-base sm:text-xs leading-7 text-justify max-w-[860px] sm:max-w-[400px]">
+      <p className="text-primary text-base sm:text-xs lg:text-sm text-justify max-w-[860px] sm:max-w-[400px] sm:overflow-auto ">
         {children}
       </p>
     ),
     div: ({ children }) => <div className="text-primary py-3">{children}</div>,
     a: ({ children, href }) => (
-      <a
-        className="text-accent cursor-pointer sm:text-xs leading-7"
-        href={href}
-      >
+      <a className="text-accent cursor-pointer sm:text-xs" href={href}>
         {children}
       </a>
     ),
     pre: ({ children }) => (
-      <pre className="bg-secondary-content text-secondary rounded p-5 sm:text-xs leading-7">
+      <pre className="bg-secondary-content text-secondary rounded p-5 text-base sm:text-xs lg:text-sm overflow-auto">
         {children}
       </pre>
     ),
     code: ({ children }) => (
-      <code className="text-sm rounded bg-secondary-content text-secondary max-w-[500px] px-[4px] sm:text-xs leading-7">
+      <code className="text-sm rounded bg-secondary-content text-secondary w-full px-[4px] sm:text-xs">
         {children}
       </code>
     ),
     blockquote: ({ children }) => (
-      <blockquote className="text-justify sm:text-xs leading-7">
+      <blockquote className="text-justify text-base sm:text-xs lg:text-sm ">
         {children}
       </blockquote>
     ),
     li: ({ children }) => (
-      <li className="list-disc sm:text-xs leading-7">{children}</li>
+      <li className="list-disc text-base sm:text-xs lg:text-sm ">{children}</li>
     ),
   };
 };

From f54d790857afcf65bcbcec16adac98ba2cd31b55 Mon Sep 17 00:00:00 2001
From: karlavasquez8 <karlavasquez817@gmail.com>
Date: Sat, 20 Apr 2024 10:17:34 -0500
Subject: [PATCH 5/5] add style tags

---
 .../GetMarkdownComponents/GetMarkdownComponents.tsx    | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/nextjs/components/GetMarkdownComponents/GetMarkdownComponents.tsx b/packages/nextjs/components/GetMarkdownComponents/GetMarkdownComponents.tsx
index e1f581df..b5cad31b 100644
--- a/packages/nextjs/components/GetMarkdownComponents/GetMarkdownComponents.tsx
+++ b/packages/nextjs/components/GetMarkdownComponents/GetMarkdownComponents.tsx
@@ -14,11 +14,21 @@ export const getMarkdownComponents = (): Components => {
         {children}
       </h2>
     ),
+    h3: ({ children }) => (
+      <h3 className="text-primary text-xl font-bold py-3 sm:text-sm sm:m-0">
+        {children}
+      </h3>
+    ),
     p: ({ children }) => (
       <p className="text-primary text-base sm:text-xs lg:text-sm text-justify max-w-[860px] sm:max-w-[400px] sm:overflow-auto ">
         {children}
       </p>
     ),
+    strong: ({ children }) => (
+      <strong className="text-primary text-base sm:text-xs lg:text-sm">
+        {children}
+      </strong>
+    ),
     div: ({ children }) => <div className="text-primary py-3">{children}</div>,
     a: ({ children, href }) => (
       <a className="text-accent cursor-pointer sm:text-xs" href={href}>