-
Notifications
You must be signed in to change notification settings - Fork 95
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #96 from starknet-id/feat/partnership
Feat/partnership
- Loading branch information
Showing
56 changed files
with
1,764 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import React, { FunctionComponent, ReactNode } from "react"; | ||
import styles from "../../styles/components/box.module.css"; | ||
|
||
type BoxProps = { | ||
children: ReactNode; | ||
}; | ||
|
||
const Box: FunctionComponent<BoxProps> = ({ children }) => { | ||
return <div className={styles.container}>{children}</div>; | ||
}; | ||
|
||
export default Box; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import React, { FunctionComponent } from "react"; | ||
import styles from "../../../styles/components/stats.module.css"; | ||
import Box from "../box"; | ||
|
||
type StatElementProps = { | ||
name: string; | ||
value: string; | ||
}; | ||
|
||
const StatElement: FunctionComponent<StatElementProps> = ({ name, value }) => { | ||
return ( | ||
<div className={styles.statElement}> | ||
<Box> | ||
<p className={styles.statValue}>{value}</p> | ||
<p className={styles.statName}>{name}</p> | ||
</Box> | ||
</div> | ||
); | ||
}; | ||
|
||
export default StatElement; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import React, { FunctionComponent } from "react"; | ||
import styles from "../../../styles/components/stats.module.css"; | ||
import StatElement from "./statElement"; | ||
|
||
type StatsProps = { | ||
title: string; | ||
stats: { | ||
name: string; | ||
value: string; | ||
}[]; | ||
}; | ||
|
||
const Stats: FunctionComponent<StatsProps> = ({ title, stats }) => { | ||
return ( | ||
<div className={styles.container}> | ||
<h2 className={styles.title}>{title}</h2> | ||
<div className={styles.elementsContainer}> | ||
{stats.map((elt, index) => ( | ||
<StatElement | ||
key={`stats_${index}`} | ||
name={elt.name} | ||
value={elt.value} | ||
/> | ||
))} | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default Stats; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
import VerticalBar from "../../shapes/verticalBar"; | ||
import OnScrollIntoView from "../../animations/onScrollIntoView"; | ||
import styles from "../../../styles/components/steps.module.css"; | ||
import React, { FunctionComponent } from "react"; | ||
|
||
type StepElementProps = { | ||
index: number; | ||
step: Step; | ||
subTitleBefore?: boolean; | ||
steps: Step[]; | ||
}; | ||
|
||
const StepElement: FunctionComponent<StepElementProps> = ({ | ||
index, | ||
step, | ||
subTitleBefore = false, | ||
steps, | ||
}) => { | ||
return ( | ||
<div className={styles.cardContainer}> | ||
<div className={styles.barsContainer}> | ||
<img className={styles.icon} src={step.icon} /> | ||
{index !== steps.length - 1 && ( | ||
<div className={styles.verticalBarContainer}> | ||
<VerticalBar /> | ||
</div> | ||
)} | ||
</div> | ||
<OnScrollIntoView animation="slideInFromTop"> | ||
<div key={"step_card_" + index} className={styles.card}> | ||
<div> | ||
<div className={(subTitleBefore && styles.subTitleBefore) || ""}> | ||
<h1 key={`step_${index}_title`} className={styles.title}> | ||
{step.title} | ||
</h1> | ||
<h2 key={`step_${index}_subtitle`} className={styles.subtitle}> | ||
{step.subtitle} | ||
</h2> | ||
</div> | ||
<p className={styles.description}>{step.description}</p> | ||
</div> | ||
{step.overlay ? ( | ||
<div className={styles.overlay}>{step.overlay}</div> | ||
) : null} | ||
<div> | ||
<img className={styles.banner} src={step.banner} /> | ||
</div> | ||
</div> | ||
</OnScrollIntoView> | ||
</div> | ||
); | ||
}; | ||
|
||
export default StepElement; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import React, { FunctionComponent } from "react"; | ||
import styles from "../../../styles/components/steps.module.css"; | ||
import StepElement from "./stepElement"; | ||
|
||
type StepsProps = { | ||
subTitleBefore?: boolean; | ||
steps: Step[]; | ||
}; | ||
|
||
const Steps: FunctionComponent<StepsProps> = ({ | ||
subTitleBefore = false, | ||
steps, | ||
}) => { | ||
return ( | ||
<div className={styles.container}> | ||
<div className={styles.cards}> | ||
{steps.map((step, index) => ( | ||
<StepElement | ||
index={index} | ||
step={step} | ||
subTitleBefore={subTitleBefore} | ||
key={"step_" + index} | ||
steps={steps} | ||
/> | ||
))} | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default Steps; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import React, { FunctionComponent } from "react"; | ||
import styles from "../../../styles/components/titles.module.css"; | ||
import Corner from "../../shapes/corner"; | ||
import Squares from "../../shapes/squares"; | ||
|
||
type CategoryTitleProps = { | ||
title: string; | ||
subtitle: string; | ||
corner?: CornerStyle; | ||
squares?: SquareStyle; | ||
}; | ||
|
||
const CategoryTitle: FunctionComponent<CategoryTitleProps> = ({ | ||
title, | ||
subtitle, | ||
corner, | ||
squares, | ||
}) => { | ||
return ( | ||
<div className={`${styles.container} ${styles.categoryTitleContainer}`}> | ||
{corner && ( | ||
<div className={`${styles.corner} ${styles[corner]}`}> | ||
<Corner /> | ||
</div> | ||
)} | ||
{squares && ( | ||
<div className={`${styles.squares} ${styles[squares]}`}> | ||
<Squares /> | ||
</div> | ||
)} | ||
<p className={styles.categorySubtitle}>{subtitle}</p> | ||
<h2 className={styles.categoryTitle}>{title}</h2> | ||
</div> | ||
); | ||
}; | ||
|
||
export default CategoryTitle; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
import React, { FunctionComponent } from "react"; | ||
import styles from "../../../styles/components/titles.module.css"; | ||
import Corner from "../../shapes/corner"; | ||
import Squares from "../../shapes/squares"; | ||
|
||
type MainTitleProps = { | ||
title: string; | ||
highlighted: string; | ||
subtitle: string; | ||
corner?: CornerStyle; | ||
squares?: SquareStyle; | ||
}; | ||
|
||
const MainTitle: FunctionComponent<MainTitleProps> = ({ | ||
title, | ||
highlighted, | ||
subtitle, | ||
corner, | ||
squares, | ||
}) => { | ||
return ( | ||
<div className={`${styles.container} ${styles.mainTitleContainer}`}> | ||
{corner && ( | ||
<div className={`${styles.corner} ${styles[corner]}`}> | ||
<Corner /> | ||
</div> | ||
)} | ||
{squares && ( | ||
<div className={`${styles.squares} ${styles[squares]}`}> | ||
<Squares /> | ||
</div> | ||
)} | ||
|
||
<h2 className={styles.mainTitle}> | ||
{title} <strong>{highlighted}</strong> | ||
</h2> | ||
<p className={styles.mainSubtitle}>{subtitle}</p> | ||
</div> | ||
); | ||
}; | ||
export default MainTitle; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import React, { FunctionComponent } from "react"; | ||
import { useInView } from "react-intersection-observer"; | ||
import styles from "../../styles/components/animations.module.css"; | ||
|
||
type OnScrollIntoViewProps = { | ||
animation?: string; | ||
children: React.ReactNode; | ||
callback?: () => void; | ||
}; | ||
|
||
const OnScrollIntoView: FunctionComponent<OnScrollIntoViewProps> = ({ | ||
animation = "", | ||
children, | ||
callback, | ||
}) => { | ||
const [ref, inView] = useInView({ | ||
triggerOnce: true, | ||
rootMargin: "-100px 0px", | ||
onChange: () => callback && callback(), | ||
}); | ||
|
||
return ( | ||
<div | ||
ref={ref} | ||
className={`${styles[animation]} ${inView && styles.active}`} | ||
> | ||
{children} | ||
</div> | ||
); | ||
}; | ||
|
||
export default OnScrollIntoView; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
import React from "react"; | ||
import Steps from "../../UI/steps/steps"; | ||
import CategoryTitle from "../../UI/titles/categoryTitle"; | ||
import Crosses from "../../shapes/crosses"; | ||
import styles from "../../../styles/components/pages/home/howToParticipate.module.css"; | ||
|
||
const HowToParticipate = () => { | ||
return ( | ||
<section> | ||
<CategoryTitle | ||
title="How to Participate ?" | ||
subtitle="Engage in the Starknet Experience: Unlock New Possibilities" | ||
corner="topLeft" | ||
/> | ||
<div className={styles.stepsContainer}> | ||
<Steps | ||
subTitleBefore={true} | ||
steps={[ | ||
{ | ||
title: "Get Your Stark Domain", | ||
subtitle: "01", | ||
description: | ||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", | ||
icon: "/icons/starknet.svg", | ||
banner: "/visuals/getYourStarkDomain.webp", | ||
}, | ||
{ | ||
title: "Collect NFTs in Starknet Quest", | ||
subtitle: "02", | ||
description: | ||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", | ||
icon: "/icons/crown.svg", | ||
banner: "/visuals/collectNFTsInStarknetQuest.webp", | ||
}, | ||
{ | ||
title: "Build your Starknet Land", | ||
subtitle: "03", | ||
description: | ||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", | ||
icon: "/icons/verified.svg", | ||
banner: "/visuals/buildYourStarknetLand.webp", | ||
}, | ||
]} | ||
/> | ||
<Crosses xDecal={-300} /> | ||
</div> | ||
</section> | ||
); | ||
}; | ||
|
||
export default HowToParticipate; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import React from "react"; | ||
import styles from "../../styles/components/shapes.module.css"; | ||
|
||
const Corner = () => { | ||
return ( | ||
<svg | ||
className={`${styles.shape} ${styles.corner}`} | ||
width="23" | ||
height="23" | ||
viewBox="0 0 23 23" | ||
fill="none" | ||
> | ||
<path d="M22 1L1 1L1 22" strokeWidth="2" strokeLinecap="round" /> | ||
</svg> | ||
); | ||
}; | ||
|
||
export default Corner; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import React from "react"; | ||
import styles from "../../styles/components/shapes.module.css"; | ||
|
||
const Cross = () => { | ||
return ( | ||
<svg | ||
className={`${styles.shape} ${styles.corner}`} | ||
width="9" | ||
height="9" | ||
viewBox="0 0 9 9" | ||
fill="none" | ||
> | ||
<path | ||
d="M1 8.5L8.5 1M1.5 1L8.5 8.5" | ||
stroke="#66666F" | ||
strokeLinecap="round" | ||
/> | ||
</svg> | ||
); | ||
}; | ||
|
||
export default Cross; |
Oops, something went wrong.
401536e
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
goerli-starknet-quest – ./
goerli-starknet-quest-starknetid.vercel.app
goerli-starknet-quest.vercel.app
goerli-starknet-quest-git-testnet-starknetid.vercel.app
goerli.starknet.quest