Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

01 landing page #4

Merged
merged 15 commits into from
Apr 16, 2024
Merged

01 landing page #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
9ee786c
feat:add landing page
karlavasquez8 Apr 10, 2024
1ba422e
fix data challenges
karlavasquez8 Apr 10, 2024
0af72ac
Merge branch 'main' into 01-landing-page
karlavasquez8 Apr 10, 2024
d488e17
merge main
karlavasquez8 Apr 10, 2024
eb671bc
dark mode
karlavasquez8 Apr 10, 2024
ef23dfb
fix challenge data
karlavasquez8 Apr 10, 2024
d3f8ce7
update view responsive and dark
karlavasquez8 Apr 11, 2024
e239a7b
Merge branch 'main' into 01-landing-page
karlavasquez8 Apr 15, 2024
dcaeec2
fix font and responsive view
karlavasquez8 Apr 15, 2024
4a88513
Install Prettier for automatic code formatting
karlavasquez8 Apr 15, 2024
96ee21a
uninstalling package dependency
karlavasquez8 Apr 15, 2024
3adf4d6
fix:title style
karlavasquez8 Apr 15, 2024
25f2b61
Merge branch 'main' into 01-landing-page
karlavasquez8 Apr 16, 2024
146e3a6
fix merge main
karlavasquez8 Apr 16, 2024
721f46b
change the default network to sepolia.
karlavasquez8 Apr 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion packages/nextjs/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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}
Expand Down
165 changes: 92 additions & 73 deletions packages/nextjs/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
};

Expand Down
20 changes: 20 additions & 0 deletions packages/nextjs/components/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
60 changes: 60 additions & 0 deletions packages/nextjs/components/ChallengeCard/ChallengeCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
24 changes: 10 additions & 14 deletions packages/nextjs/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,15 @@
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 { useTargetNetwork } from "~~/hooks/scaffold-stark/useTargetNetwork";
import { useGlobalState } from "~~/services/store/store";
import { devnet } from "@starknet-react/chains";
// import { Faucet } from "~~/components/scaffold-eth";
// import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
// import { useGlobalState } from "~~/services/store/store";
import Link from "next/link";
import {
CurrencyDollarIcon,
MagnifyingGlassIcon,
} from "@heroicons/react/24/outline";

/**
* Site footer
Expand All @@ -26,7 +22,7 @@ export const Footer = () => {
const isLocalNetwork = targetNetwork.id === devnet.id;

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">
Expand All @@ -44,7 +40,7 @@ export const Footer = () => {
<Link
href="/blockexplorer"
passHref
className="btn btn-primary btn-sm font-normal gap-1"
className="btn btn-primary btn-sm font-normal gap-1 text-base-100"
>
<MagnifyingGlassIcon className="h-4 w-4" />
<span>Block Explorer</span>
Expand All @@ -59,9 +55,9 @@ export const Footer = () => {
/>
</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"
Expand Down
Loading
Loading