Feat/partnership

components/UI/box.tsx

@@ -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;

components/UI/navbar.tsx

@@ -110,6 +110,9 @@ const Navbar: FunctionComponent = () => {
           </div>
           <div>
             <ul className="hidden lg:flex uppercase items-center">
+              <Link href="/partnership">
+                <li className={styles.menuItem}>Partnership</li>
+              </Link>
               <Link href="/">
                 <li className={styles.menuItem}>Quests</li>
               </Link>
@@ -186,6 +189,14 @@ const Navbar: FunctionComponent = () => {
               </div>
               <div className="py-4 flex flex-col">
                 <ul className="uppercase text-babe-blue">
+                  <Link href="/partnership">
+                    <li
+                      onClick={() => setNav(false)}
+                      className={styles.menuItemSmall}
+                    >
+                      Partnership
+                    </li>
+                  </Link>
                   <Link href="/">
                     <li
                       onClick={() => setNav(false)}

components/UI/stats/statElement.tsx

@@ -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;

components/UI/stats/stats.tsx

@@ -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;

components/UI/steps/stepElement.tsx

@@ -0,0 +1,55 @@
+import shapeStyles from "../../../styles/components/shapes.module.css";
+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 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>,
+            ].sort(() => (subTitleBefore ? -1 : 1))}
+            <p className={styles.description}>{step.description}</p>
+          </div>
+          <div className={styles.overlay}>
+            {step.overlay ? step.overlay : null}
+          </div>
+          <div>
+            <img className={styles.banner} src={step.banner} />
+          </div>
+        </div>
+      </OnScrollIntoView>
+    </div>
+  );
+};
+
+export default StepElement;

components/UI/steps/steps.tsx

@@ -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;

components/UI/titles/categoryTitle.tsx

@@ -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}>
+      {corner && (
+        <div className={[styles.corner, styles[corner]].join(" ")}>
+          <Corner />
+        </div>
+      )}
+      {squares && (
+        <div className={[styles.squares, styles[squares]].join(" ")}>
+          <Squares />
+        </div>
+      )}
+      <p className={styles.categorySubtitle}>{subtitle}</p>
+      <h2 className={styles.categoryTitle}>{title}</h2>
+    </div>
+  );
+};
+
+export default CategoryTitle;

components/UI/titles/mainTitle.tsx

@@ -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 = null,
+  squares = null,
+}) => {
+  return (
+    <div className={[styles.container, styles.mainTitleContainer].join(" ")}>
+      {corner && (
+        <div className={[styles.corner, styles[corner]].join(" ")}>
+          <Corner />
+        </div>
+      )}
+      {squares && (
+        <div className={[styles.squares, styles[squares]].join(" ")}>
+          <Squares />
+        </div>
+      )}
+
+      <h2 className={styles.mainTitle}>
+        {title} <strong>{highlighted}</strong>
+      </h2>
+      <p className={styles.mainSubtitle}>{subtitle}</p>
+    </div>
+  );
+};
+export default MainTitle;

components/animations/onScrollIntoView.tsx

@@ -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].join(" ")}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default OnScrollIntoView;

components/pages/home/howToParticipate.tsx

@@ -0,0 +1,52 @@
+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;

components/shapes/corner.tsx

@@ -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].join(" ")}
+      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;

components/shapes/cross.tsx

@@ -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].join(" ")}
+      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;