Scaffold-Stark · jrcarlos2000 · Apr 16, 2024 · Apr 10, 2024 · Apr 10, 2024 · Apr 10, 2024
diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx
@@ -2,6 +2,9 @@ import type { Metadata } from "next";
 import { ScaffoldStarkAppWithProviders } from "~~/components/ScaffoldStarkAppWithProviders";
 import "~~/styles/globals.css";
 import { ThemeProvider } from "~~/components/ThemeProvider";
+import { Space_Grotesk } from "next/font/google";
+
+const spaceGrotesk = Space_Grotesk({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
   title: "Starknet Speedrun",
@@ -11,7 +14,7 @@ export const metadata: Metadata = {
 const ScaffoldStarkApp = ({ children }: { children: React.ReactNode }) => {
   return (
     <html suppressHydrationWarning>
-      <body>
+      <body className={spaceGrotesk.className}>
         <ThemeProvider enableSystem>
           <ScaffoldStarkAppWithProviders>
             {children}

diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
@@ -1,88 +1,107 @@
 "use client";
 
-import Link from "next/link";
 import type { NextPage } from "next";
-import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-// import { Address } from "~~/components/scaffold-eth";
-
+import Image from "next/image";
+import StepInstruction from "~~/components/StepInstruction/StepInstruction";
+import ChallengeCard from "~~/components/ChallengeCard/ChallengeCard";
+import { firstChallenges, lastChallenges } from "~~/data-challenges/challenges";
 const Home: NextPage = () => {
-  // const { data } = useScaffoldContractRead({
-  //   contractName: "HelloStarknet",
-  //   functionName: "get_balance6",
-  // });
-
-  // console.log(data);
-
-  // const { writeAsync } = useScaffoldContractWrite({
-  //   contractName: "HelloStarknet",
-  //   functionName: "increase_balance",
-  //   args: [1],
-  // });
-
-  // console.log(data, isLoading);
   return (
-    <>
-      <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">Scaffold-Stark 2</span>
-          </h1>
-          <div className="flex justify-center items-center space-x-2">
-            <p className="my-2 font-medium">Connected Address:</p>
-            {/* <Address address={connectedAddress} /> */}
+    <div>
+      <div className="w-full flex items-center justify-center flex-col bg-landing gap-10 bg-base-100 text-primary sm:gap-3 ">
+        <div className="w-full flex flex-col items-center gap-10 sm:gap-5">
+          <div className="w-full flex items-center justify-center flex-col gap-10 sm:px-[20px] sm:gap-5 sm:text-[12px] max-w-[600px] ">
+            <Image
+              src={"/Starknet-icon.svg"}
+              alt={"icon starknet"}
+              width={50}
+              height={50}
+              className="sm:w-[30px] sm:h-[30px]"
+            />
+            <span className="text-center">
+              Learn how to build on Starknet; the superpowers and the gotchas.
+            </span>
+            <h1 className="text-8xl font-black text-center sm:text-6xl font-['system-ui']">
+              SPEEDRUN STARKNET
+            </h1>
+          </div>
+          <div className="flex flex-col gap-5 bg-base-100 sm:px-[20px] ">
+            <StepInstruction
+              number={1}
+              text="Watch this quick video as an Intro to Starknet Development."
+            />
+            <StepInstruction
+              number={2}
+              text="Then use Scaffold-Stark to copy/paste each Cairo concept and tinker: global units, primitives, mappings, structs, modifiers, events, inheritance, sending eth, and payable/fallback functions."
+            />
+            <StepInstruction
+              number={3}
+              text="Watch this getting started playlist to become a power user and eth scripter."
+            />
+            <StepInstruction
+              number={4}
+              text="When you are ready to test your knowledge, Speed Run Starknet"
+            />
           </div>
-          <p className="text-center text-lg">
-            Get started by editing{" "}
-            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-              packages/nextjs/app/page.tsx
-            </code>
-          </p>
-          <p className="text-center text-lg">
-            Edit your smart contract{" "}
-            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-              YourContract.sol
-            </code>{" "}
-            in{" "}
-            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-              packages/hardhat/contracts
-            </code>
-          </p>
+        </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 px-[20px] flex justify-center flex-col items-center sm:pr-[35px]">
+          {firstChallenges.slice(0, 3).map((challenge, index) => (
+            <ChallengeCard
+              key={index}
+              challenge={challenge.challenge}
+              title={challenge.title}
+              description={challenge.description}
+              imageUrl={challenge.imageUrl}
+              buttonText="QUEST"
+              onButtonClick={() => {}}
+              end={challenge.end || false}
+              border={challenge.border !== undefined ? challenge.border : true}
+            />
+          ))}
         </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 className=" bg-ft-join flex justify-center bg-secondary-content text-secondary sm:h-[350px]">
+          <div className="w-full px-[20px] flex justify-center">
+            <div className="max-w-[1280px] flex justify-around flex-col w-full border-l-[5px] border-base-300 sm:justify-start sm:items-center sm:border-l-[3px] lg:border-l-[3px] pt-[20px]">
+              <div className="bg-banner-join flex justify-center h-[130px] w-full text-secondary font-black text-7xl items-center sm:text-3xl sm:h-[80px]">
+                <span className="font-black font-['system-ui']">
+                  JOiN BUiLDGUiLD
+                </span>
+              </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 ">
+                    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
+                    other builders. Start crafting your Web3 portfolio by
+                    submitting your DEX, Multisig or SVG NFT build.
+                  </span>
+                </div>
+              </div>
             </div>
           </div>
         </div>
-        {/* <div
-          onClick={() => {
-            writeAsync();
-          }}
-        >
-          TEST TX
-        </div> */}
+        <div className="w-full px-[20px] flex justify-center flex-col items-center">
+          {lastChallenges.slice(1).map((challenge, index) => (
+            <ChallengeCard
+              key={index}
+              challenge={challenge.challenge}
+              title={challenge.title}
+              description={challenge.description}
+              imageUrl={challenge.imageUrl}
+              buttonText="LOCK"
+              onButtonClick={() => {}}
+              end={challenge.end || false}
+              border={challenge.border !== undefined ? challenge.border : true}
+            />
+          ))}
+        </div>
       </div>
-    </>
+    </div>
   );
 };
 

diff --git a/packages/nextjs/components/Button/Button.tsx b/packages/nextjs/components/Button/Button.tsx
@@ -0,0 +1,20 @@
+import React, { ReactNode } from "react";
+
+interface ButtonProps {
+  onClick: () => void;
+  children: ReactNode;
+}
+
+const Button: React.FC<ButtonProps> = ({ onClick, children }) => {
+  return (
+    <button
+      className="py-[10px] px-[20px] sm:px-[10px] sm:py-[5px] bg-base-300 text-base-100 rounded-[8px] sm:text-[12px]"
+      onClick={onClick}
+      type="button"
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/packages/nextjs/components/ChallengeCard/ChallengeCard.tsx b/packages/nextjs/components/ChallengeCard/ChallengeCard.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+import Image from "next/image";
+import Button from "~~/components/Button/Button";
+
+interface ChallengeCardProps {
+  challenge: string;
+  title: string;
+  description: string;
+  imageUrl: string;
+  buttonText: string;
+  onButtonClick: () => void;
+  border?: boolean;
+  end?: boolean;
+}
+
+const ChallengeCard: React.FC<ChallengeCardProps> = ({
+  challenge,
+  title,
+  imageUrl,
+  buttonText,
+  onButtonClick,
+  description,
+  border = true,
+  end = false,
+}) => {
+  return (
+    <div
+      className={`flex max-w-[1280px] w-full lg:text-[12px] sm:text-[12px] lg:text-sm ${border ? "border-b-2 border-base-300 sm:border-b-[1px]" : ""}`}
+    >
+      <div className="flex">
+        <div
+          className={`w-[34px] ${end ? "h-[50%] self-end" : "flex"}  border-l-[5px] border-base-300 lg:border-l-[3px] sm:border-l-[3px]`}
+        >
+          <div className="w-[30px] h-[30px] rounded-full border-base-300 border-[5px] self-center traslate-circule bg-base-100 sm:w-[15px] sm:h-[15px] lg:border-[3px] lg:h-[15px] lg:w-[15px] sm:border-[3px] "></div>
+        </div>
+      </div>
+      <div className=" flex flex-1 justify-between py-[20px] sm:flex-col-reverse sm:gap-2 items-center ">
+        <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>
+          <div className="sm:pt-[10px]">
+            <Button onClick={onButtonClick}>{buttonText}</Button>
+          </div>
+        </div>
+        <div>
+          <Image
+            src={imageUrl}
+            alt="image challenge"
+            width={490}
+            height={300}
+            className="sm:max-w-[350px] sm:w-full lg:max-w-[350px]"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChallengeCard;
diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
@@ -1,64 +1,29 @@
 import React from "react";
-import Link from "next/link";
-// import { devnet } from "viem/chains";
-import {
-  CurrencyDollarIcon,
-  MagnifyingGlassIcon,
-} from "@heroicons/react/24/outline";
 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 { useGlobalState } from "~~/services/store/store";
 
 /**
  * Site footer
  */
 export const Footer = () => {
-  //   const nativeCurrencyPrice = useGlobalState(
-  //     (state) => state.nativeCurrencyPrice
-  //   );
-  //   const { targetNetwork } = useTargetNetwork();
   const isLocalNetwork = false;
 
   return (
-    <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0">
+    <div className="min-h-0 py-5 px-1 lg:mb-0 bg-base-100">
       <div>
         <div className="fixed flex justify-between items-center w-full z-10 p-4 bottom-0 left-0 pointer-events-none">
-          <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">
-                  <CurrencyDollarIcon className="h-4 w-4" />
-                  <span>{nativeCurrencyPrice}</span>
-                </div>
-              </div>
-            )}
-            {isLocalNetwork && (
-              <>
-                <Faucet />
-                <Link
-                  href="/blockexplorer"
-                  passHref
-                  className="btn btn-primary btn-sm font-normal gap-1"
-                >
-                  <MagnifyingGlassIcon className="h-4 w-4" />
-                  <span>Block Explorer</span>
-                </Link>
-              </>
-            )} */}
-          </div>
+          <div className="flex flex-col md:flex-row gap-2 pointer-events-auto"></div>
           <SwitchTheme
             className={`pointer-events-auto ${
               isLocalNetwork ? "self-end md:self-auto" : ""
             }`}
           />
         </div>
       </div>
-      <div className="w-full">
-        <ul className="menu menu-horizontal w-full">
-          <div className="flex justify-center items-center gap-2 text-sm w-full">
+      <div className="w-full ">
+        <ul className="menu menu-horizontal w-full ">
+          <div className="flex justify-center items-center gap-2 text-sm w-full sm:text-[12px]">
             <div className="text-center">
               <a
                 href="https://github.com/Quantum3-Labs/scaffold-stark-2"