various fixes based on @phipsae's review

packages/nextjs/app/page.tsx

@@ -1,18 +1,16 @@
 "use client";
 
-// import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import Image from "next/image";
 import Link from "next/link";
 import type { NextPage } from "next";
-import { useTheme } from "next-themes";
 import { useAccount } from "wagmi";
-import blur_yellow from "~~/assets/blue_yellow.svg";
-import blur_blue from "~~/assets/blur_blue.svg";
-import punks from "~~/assets/cryptopunks.png";
+import Card from "~~/components/Card";
 import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
+import blur_blue from "~~/public/blur_blue.svg";
+import blur_yellow from "~~/public/blur_yellow.svg";
+import punks from "~~/public/cryptopunks.png";
 
 const Home: NextPage = () => {
-  const { theme } = useTheme();
   const { address: connectedAddress } = useAccount();
   const zeroAddress = "0x0000000000000000000000000000000000000000";
 
@@ -22,7 +20,7 @@ const Home: NextPage = () => {
     args: [connectedAddress],
   });
 
-  const { data: IscheckedIn } = useScaffoldReadContract({
+  const { data: IsCheckIn } = useScaffoldReadContract({
     contractName: "BatchRegistry",
     functionName: "yourContractAddress",
     args: [connectedAddress],
@@ -42,7 +40,7 @@ const Home: NextPage = () => {
         <Image src={blur_blue} alt="Blurred Blue Background" className="absolute -bottom-[10%] -right-[40%] blur-2xl" />
       </div>
 
-      <div className="max-w-7xl mx-auto flex flex-col items-center justify-center">
+      <div className="max-w-7xl px-4 mt-8 sm:mt-0 sm:px-0 mx-auto flex flex-col items-center justify-center">
         {/* Punks BG */}
         <div className="overflow-clip">
           <Image src={punks} alt="punks" />
@@ -63,131 +61,64 @@ const Home: NextPage = () => {
         </div>
 
         {/* Member Status */}
-        <div className="w-[16rem] sm:w-[34rem] text-center tracking-widest py-5 mt-6 text-st_cyan font-semibold rounded-xl border border-zinc-500 uppercase shadow-sm hover:bg-zinc-300 dark:hover:bg-zinc-800 transition-all">
-          Batch Member {isAllowed ? "✅" : "❌"}
-        </div>
-
-        {isAllowed && IscheckedIn !== zeroAddress && (
-          <div className="text-center italic text-zinc-400">
-            <p className="">Cheers 🍻.. You are checked in!</p>
+        {IsCheckIn !== zeroAddress ? (
+          <Link
+            href={`/builders/${connectedAddress}`}
+            target="_blank"
+            title="View Your Builder Page"
+            className="w-[16rem] sm:w-[34rem] text-center tracking-widest py-5 mt-6 text-st_cyan font-semibold rounded-xl border border-zinc-500 uppercase shadow-sm hover:bg-zinc-300 dark:hover:bg-zinc-800 transition-all"
+          >
+            Batch Member ✅
+          </Link>
+        ) : (
+          <div className="w-[16rem] sm:w-[34rem] text-center tracking-widest py-5 mt-6 text-st_cyan font-semibold rounded-xl border border-zinc-500 uppercase shadow-sm transition-all">
+            Batch Member {isAllowed ? "✅" : "❌"}
           </div>
         )}
 
-        {/* Cards */}
-        <div className="flex flex-col sm:flex-row sm:gap-8">
-          {/* Debug Contract Card */}
-          <div className="shadow-sm border rounded-xl w-[16rem] h-[12rem] font-light mt-6 border-zinc-500 flex flex-col">
-            <div className="w-full flex items-center justify-center flex-grow-[5] dark:hover:bg-zinc-800 hover:bg-zinc-300 transition-all rounded-t-xl">
-              <p className="px-4">
-                Tinker with your smart contract using the{" "}
-                <Link href="/debug" target="_blank" passHref className="link transition-all">
-                  Debug Contracts
-                </Link>{" "}
-                tab.
-              </p>
-            </div>
-
-            <hr className="border-t border-zinc-500" />
-
-            <div className="hover:bg-st_cyan/10 rounded-b-xl transition-all border-zinc-500 flex-grow">
-              <Link href="/debug" target="_blank" passHref className="flex items-center justify-between h-full px-4">
-                <p className="font-medium flex flex-col items-center justify-center">Try it out..</p>
-
-                <svg width="12" height="12" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path
-                    fill-rule="evenodd"
-                    clip-rule="evenodd"
-                    d="M16 16.5V0.5H0V2.5H13L0 15.5L1 16.5L14 3.5V16.5H16ZM16 0.5H13V3.5H16V0.5Z"
-                    fill={`
-                    ${theme === "dark" ? "#868686" : "#000000"}
-                  `}
-                  />
-                </svg>
-              </Link>
-            </div>
+        {isAllowed && IsCheckIn !== zeroAddress ? (
+          <div className="text-center italic text-zinc-400">
+            <p>Cheers 🍻.. You are checked in!</p>
           </div>
-
-          {/* Debug Contract Card */}
-          <div className="shadow-sm border rounded-xl w-[16rem] h-[12rem] font-light mt-6 border-zinc-500 flex flex-col">
-            <div className="w-full dark:hover:bg-zinc-800 hover:bg-zinc-300 transition-all rounded-t-xl flex items-center justify-center flex-grow-[5]">
-              <p className="px-4">
-                Explore your local transactions with the{" "}
-                <Link href="/blockexplorer" passHref className="link">
-                  Block Explorer
-                </Link>{" "}
-                tab.
+        ) : (
+          isAllowed && (
+            <div className="text-center italic text-zinc-400">
+              <p>
+                <span>
+                  Hey there! Ready for an adventure?{" "}
+                  <Link
+                    target="_blank"
+                    href="https://github.com/BuidlGuidl/batch9.buidlguidl.com/issues/10"
+                    className="underline underline-offset-1 hover:underline-offset-2 transition-all text-st_cyan/70"
+                  >
+                    Check-In
+                  </Link>
+                </span>{" "}
+                to get started! 🚀
               </p>
             </div>
+          )
+        )}
 
-            <hr className="border-t border-zinc-500" />
-
-            <div className="hover:bg-st_cyan/10 rounded-b-xl transition-all border-zinc-500 flex-grow">
-              <Link
-                href="/blockexplorer"
-                target="_blank"
-                passHref
-                className="flex items-center justify-between h-full px-4"
-              >
-                <p className="font-medium flex flex-col items-center justify-center">Try it out..</p>
-
-                <svg width="12" height="12" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path
-                    fill-rule="evenodd"
-                    clip-rule="evenodd"
-                    d="M16 16.5V0.5H0V2.5H13L0 15.5L1 16.5L14 3.5V16.5H16ZM16 0.5H13V3.5H16V0.5Z"
-                    fill={`
-                    ${theme === "dark" ? "#868686" : "#000000"}
-                  `}
-                  />
-                </svg>
-              </Link>
-            </div>
-          </div>
+        {/* Cards */}
+        <div className="flex flex-col sm:flex-row sm:gap-8 mb-8 sm:mb-0">
+          {/* Debug Contract Card */}
+          <Card
+            mainText="Tinker with your smart contract using the Debug Contracts tab."
+            footerLink="/debug"
+            footerText="Try it out.."
+          />
+
+          {/* Block Explorer Card */}
+          <Card
+            mainText="Explore your local transactions with the Block Explorer tab."
+            footerLink="/blockexplorer"
+            footerText="Try it out.."
+          />
         </div>
       </div>
     </div>
   );
 };
 
 export default Home;
-
-//   <>
-//       <div className="flex items-center flex-col flex-grow pt-10">
-//         <div className="px-5">
-//           <h1 className="text-center">
-//             <span className="block text-2xl mb-2">Welcome to</span>
-//             <span className="block text-4xl font-bold">Batch 9</span>
-//           </h1>
-//           <p className="text-center text-lg">Get started by taking a look at your batch GitHub repository.</p>
-//           <p className="text-lg flex gap-2 justify-center">
-//             <span className="font-bold">Checked in builders count:</span>
-//             <span>To Be Implemented</span>
-//           </p>
-//         </div>
-
-//         <div className="flex-grow bg-base-300 w-full mt-16 px-8 py-12">
-//           <div className="flex justify-center items-center gap-12 flex-col sm:flex-row">
-//             <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-//               <BugAntIcon className="h-8 w-8 fill-secondary" />
-//               <p>
-//                 Tinker with your smart contract using the{" "}
-//                 <Link href="/debug" passHref className="link">
-//                   Debug Contracts
-//                 </Link>{" "}
-//                 tab.
-//               </p>
-//             </div>
-//             <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-//               <MagnifyingGlassIcon className="h-8 w-8 fill-secondary" />
-//               <p>
-//                 Explore your local transactions with the{" "}
-//                 <Link href="/blockexplorer" passHref className="link">
-//                   Block Explorer
-//                 </Link>{" "}
-//                 tab.
-//               </p>
-//             </div>
-//           </div>
-//         </div>
-//       </div>
-//     </>

packages/nextjs/components/Card.tsx

@@ -0,0 +1,30 @@
+import Link from "next/link";
+import Arrow_Icon from "~~/public/arrow_icon";
+
+type Props = {
+  mainText: string;
+  footerText: string;
+  footerLink: string;
+};
+
+const Card = ({ mainText, footerText, footerLink }: Props) => {
+  return (
+    <div className="shadow-sm border rounded-xl w-[16rem] h-[12rem] font-light mt-6 border-zinc-500 flex flex-col">
+      <div className="w-full flex items-center justify-center flex-grow-[5] dark:hover:bg-zinc-800 px-4 hover:bg-zinc-300 transition-all rounded-t-xl">
+        {mainText}
+      </div>
+
+      <hr className="border-t border-zinc-500" />
+
+      <div className="hover:bg-st_cyan/10 rounded-b-xl transition-all border-zinc-500 flex-grow">
+        <Link href={footerLink} target="_blank" passHref className="flex items-center justify-between h-full px-4">
+          <p className="font-medium flex flex-col items-center justify-center">{footerText}</p>
+
+          <Arrow_Icon />
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default Card;

packages/nextjs/components/Footer.tsx

@@ -3,12 +3,13 @@ import Image from "next/image";
 import Link from "next/link";
 import { hardhat } from "viem/chains";
 import { CurrencyDollarIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import heartIcon from "~~/assets/heart_icon.svg";
 // import { HeartIcon } from "@heroicons/react/24/outline";
 import { SwitchTheme } from "~~/components/SwitchTheme";
 import { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo";
 import { Faucet } from "~~/components/scaffold-eth";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import Arrow_Icon from "~~/public/arrow_icon";
+import heartIcon from "~~/public/heart_icon.svg";
 import { useGlobalState } from "~~/services/store/store";
 
 /**
@@ -21,8 +22,8 @@ export const Footer = () => {
 
   return (
     <div className="bg-zinc-100 dark:bg-zinc-950">
-      <div>
-        <div className="fixed flex justify-between items-center w-full z-10 p-4 bottom-0 left-0 pointer-events-none">
+      <div className="">
+        <div className="fixed flex justify-between items-center w-full z-10 p-4 bottom-10 md:bottom-0 left-0 pointer-events-none">
           <div className="flex flex-col md:flex-row gap-2 pointer-events-auto">
             {nativeCurrencyPrice > 0 && (
               <div>
@@ -45,56 +46,36 @@ export const Footer = () => {
           <SwitchTheme className={`pointer-events-auto ${isLocalNetwork ? "self-end md:self-auto" : ""}`} />
         </div>
       </div>
-      <div className="max-w-2xl mx-auto text-st_gray">
-        <div className="flex justify-between mx-10">
+      <div className="max-w-lg lg:max-w-2xl mx-auto text-st_gray">
+        <div className="text-[11px] sm:text-sm lg:text-base flex gap-2 justify-between mx-4 sm:mx-10">
           <Link
             href="https://github.com/scaffold-eth/se-2"
             target="_blank"
             rel="noreferrer"
             className="flex gap-2 items-center "
           >
             <p>Fork me</p>
-            <svg width="12" height="12" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                d="M16 16.5V0.5H0V2.5H13L0 15.5L1 16.5L14 3.5V16.5H16ZM16 0.5H13V3.5H16V0.5Z"
-                fill="#868686"
-              />
-            </svg>
+            <Arrow_Icon />
           </Link>
 
           <div className="flex gap-2 items-center">
-            <p>Built with</p>
+            <p className="flex-shrink-0">Built with</p>
             <Image src={heartIcon} alt="heart icon" width={20} height={20} />
             <p>at</p>
             <Link href="https://buidlguidl.com/" target="_blank" rel="noreferrer" className="flex gap-2 items-center ">
               <BuidlGuidlLogo className="w-3 h-5 pb-1" />
               <p>BuidlGuidl</p>
             </Link>
-            <svg width="12" height="12" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                d="M16 16.5V0.5H0V2.5H13L0 15.5L1 16.5L14 3.5V16.5H16ZM16 0.5H13V3.5H16V0.5Z"
-                fill="#868686"
-              />
-            </svg>
+
+            <Arrow_Icon />
           </div>
 
           <div className="flex items-center gap-2">
             <Link href="https://t.me/joinchat/KByvmRe5wkR-8F_zz6AjpA" target="_blank" rel="noreferrer">
               Support
             </Link>
 
-            <svg width="12" height="12" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                d="M16 16.5V0.5H0V2.5H13L0 15.5L1 16.5L14 3.5V16.5H16ZM16 0.5H13V3.5H16V0.5Z"
-                fill="#868686"
-              />
-            </svg>
+            <Arrow_Icon />
           </div>
         </div>
       </div>

packages/nextjs/components/Header.tsx

@@ -90,7 +90,7 @@ export const Header = () => {
         </div>
         <Link href="/" passHref className="hidden lg:flex items-center gap-2 ml-4 mr-6 shrink-0">
           <div className="flex relative w-10 h-10">
-            <Image alt="SE2 logo" className="cursor-pointer" fill src="/logo.png" />
+            <Image alt="SE2 logo" fill className="cursor-pointer" sizes="(max-width: 768px) 2vw" src="/logo.png" />
           </div>
           <div className="flex flex-col">
             <span className="font-bold leading-tight">Batch #9</span>

packages/nextjs/public/arrow_icon.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { useTheme } from "next-themes";
+
+const Arrow_Icon = () => {
+  const { theme } = useTheme();
+
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16 16.5V0.5H0V2.5H13L0 15.5L1 16.5L14 3.5V16.5H16ZM16 0.5H13V3.5H16V0.5Z"
+        fill={`
+                    ${theme === "light" ? "#000000" : "#868686"}
+                  `}
+      />
+    </svg>
+  );
+};
+
+export default Arrow_Icon;

packages/nextjs/tailwind.config.js

@@ -4,6 +4,7 @@ module.exports = {
   plugins: [require("daisyui")],
   darkTheme: "dark",
   darkMode: ["selector", "[data-theme='dark']"],
+  // DaisyUI theme colors
   daisyui: {
     themes: [
       {