From 7db08de634b0043fae0cea99ff5e6cd24bc2646b Mon Sep 17 00:00:00 2001
From: karlavasquez8 <karlavasquez817@gmail.com>
Date: Tue, 23 Apr 2024 20:52:38 -0500
Subject: [PATCH] add ui home

---
 packages/nextjs/app/page.tsx          | 81 +++++++++++++++------------
 packages/nextjs/components/Header.tsx |  7 ++-
 2 files changed, 52 insertions(+), 36 deletions(-)

diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
index a77192ae..63f12df2 100644
--- a/packages/nextjs/app/page.tsx
+++ b/packages/nextjs/app/page.tsx
@@ -2,42 +2,53 @@ import Image from "next/image";
 import type { NextPage } from "next";
 
 const Home: NextPage = () => {
-    return (
-        <div className="flex items-center flex-col flex-grow pt-10">
-            <div className="px-5 w-[90%] md:w-[75%]">
-                <h1 className="text-center mb-6">
-                    <span className="block text-2xl mb-2">SpeedRunStark</span>
-                    <span className="block text-4xl font-bold">Challenge #1: 🥩 Decentralized Staking App</span>
-                </h1>
-                <div className="flex flex-col items-center justify-center">
-                    <Image
-                        src="/hero.png"
-                        width="727"
-                        height="231"
-                        alt="challenge banner"
-                        className="rounded-xl border-4 border-primary"
-                    />
-                    <div className="max-w-3xl">
-                        <p className="text-center text-lg mt-8">
-                            🦸 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. If the users cooperate, the money is
-                            collected in a second smart contract. If they defect, the worst that can happen is everyone gets their
-                            money back. The users only have to trust the code.
-                        </p>
-                        <p className="text-center text-lg">
-                            🌟 The final deliverable is deploying a Dapp that lets users send ether to a contract and stake if the
-                            conditions are met, then deploy your app to a public webserver. Submit the url on{" "}
-                            <a href="https://speedrunstark.com/" target="_blank" rel="noreferrer" className="underline">
-                                SpeedRunStark.com
-                            </a>{" "}
-                            !
-                        </p>
-                    </div>
-                </div>
-            </div>
+  return (
+    <div className="flex items-center flex-col flex-grow pt-10">
+      <div className="px-5 w-[90%] md:w-[75%]">
+        <h1 className="text-center mb-6">
+          <span className="block text-2xl mb-2">SpeedRunStark</span>
+          <span className="block text-4xl font-bold">
+            Challenge #1: 🥩 Decentralized Staking App
+          </span>
+        </h1>
+        <div className="flex flex-col items-center justify-center">
+          <Image
+            src="/hero.png"
+            width="727"
+            height="231"
+            alt="challenge banner"
+            className="rounded-xl border-4 border-primary"
+          />
+          <div className="max-w-3xl">
+            <p className="text-center text-lg mt-8">
+              🦸 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. If the users cooperate, the money is collected in
+              a second smart contract. If they defect, the worst that can happen
+              is everyone gets their money back. The users only have to trust
+              the code.
+            </p>
+            <p className="text-center text-lg">
+              🌟 The final deliverable is deploying a Dapp that lets users send
+              ether to a contract and stake if the conditions are met, then
+              deploy your app to a public webserver. Submit the url on{" "}
+              <a
+                href="https://speedrunstark.com/"
+                target="_blank"
+                rel="noreferrer"
+                className="underline"
+              >
+                SpeedRunStark.com
+              </a>{" "}
+              !
+            </p>
+          </div>
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
 export default Home;
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
index 33402ae9..476910ae 100644
--- a/packages/nextjs/components/Header.tsx
+++ b/packages/nextjs/components/Header.tsx
@@ -5,7 +5,12 @@ import { usePathname } from "next/navigation";
 import { useOutsideClick } from "~~/hooks/scaffold-stark";
 import { CustomConnectButton } from "~~/components/scaffold-stark/CustomConnectButton";
 import MenuItem from "~~/components/MenuItem/MenuItem";
-import {Bars3Icon, BugAntIcon, CircleStackIcon, InboxStackIcon} from "@heroicons/react/24/outline";
+import {
+  Bars3Icon,
+  BugAntIcon,
+  CircleStackIcon,
+  InboxStackIcon,
+} from "@heroicons/react/24/outline";
 
 export type HeaderMenuLink = {
   label: string;