Merge pull request #2 from The-JW-Corp/staging

Staging

client/src/app/globals.css

@@ -2,6 +2,10 @@
   font-family: "modak";
   src: url("../../public/Assets/fonts/Modak-Regular.ttf") format("truetype");
 }
+@font-face {
+  font-family: "mochiy-pop-one";
+  src: url("../../public/Assets/fonts/MochiyPopOne-Regular.ttf") format("truetype");
+}
 :root {
   --Brown: #5b2b13;
 }

client/src/app/home/page.tsx

@@ -1,7 +1,7 @@
 import Image from "next/image";
 import WatermarkTitle from "../../../public/Assets/image/degen-kong-watermark-title.svg";
 import degenKongLogo from "../../../public/Assets/image/degen-kong-logo.svg"
-import styles from "../../styles/home.module.css";
+import styles from "../../styles/pages/page-home.module.css";
 export default function Home() {
   return (
     <>

client/src/app/rarity/page.tsx

@@ -1,13 +1,10 @@
 import React from "react";
-import styles from "../../styles/page-rarity.module.css";
+// import styles from "../../styles/pages/page-rarity.module.css";
 async function page() {
   return (
-    <div className={styles.page_container}>
-      Rarity
-      {/* <Button text="home" />
-      <Button text="stake" />
-      <Button text="rarity" isSelected={true} /> */}
-    </div>
+    <>
+      {/* <div className={styles.page_container}></div> */}
+    </>
   );
 }
 

client/src/app/stake/page.tsx

@@ -1,15 +1,178 @@
 import React from "react";
 import Image from "next/image";
 import degenKongWatermark from "../../../public/Assets/image/degenkong-watermark.svg";
+import styles from "../../styles/pages/page-stake.module.css";
+import degenPfp from "../../../public/Assets/image/degenKong-pfp.png";
+import ButtonMedium from "../../components/buttons/ButtonMedium";
 function page() {
   return (
     <>
-      Stake
-      <Image
-        src={degenKongWatermark}
-        quality={100}
-        alt="degen kong long background"
-      />
+      <div className={styles.stake_page_container}>
+        <div className={styles.stake_page_watermark_container}>
+          <Image
+            src={degenKongWatermark}
+            quality={100}
+            alt="degen kong long background"
+          />
+        </div>
+        <div className={styles.stake_page_first_section}>
+          <div className={styles.stake_page_first_section_top_button_container}>
+            <ButtonMedium text="WALLET" />
+          </div>
+          <div className={styles.stake_page_first_bloc}>
+            <div className={styles.stake_page_first_bloc_wrap}>
+              <div className={styles.stake_page_image_container}>
+                <Image
+                  src={degenPfp}
+                  quality={100}
+                  alt="degen kong long background"
+                />
+              </div>
+              <div className={styles.stake_page_image_container}>
+                <Image
+                  src={degenPfp}
+                  quality={100}
+                  alt="degen kong long background"
+                />
+              </div>
+              <div className={styles.stake_page_image_container}>
+                <Image
+                  src={degenPfp}
+                  quality={100}
+                  alt="degen kong long background"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className={styles.stake_page_first_section_bottom_buttons_container}
+          >
+            <ButtonMedium text="SELECT ALL (0)" />
+            <ButtonMedium text="STAKE (0)" />
+          </div>
+        </div>
+        <div className={styles.stake_page_second_section}>
+          <div
+            className={styles.stake_page_second_section_buttons_top_container}
+          >
+            <ButtonMedium text="STAKED (3)" />
+            <ButtonMedium text="CLAIM REWARD" />
+          </div>
+          <div className={styles.stake_page_second_bloc}>
+            <div className={styles.stake_page_second_bloc_wrap}>
+              <div className={styles.stake_page_image_container}>
+                <Image
+                  src={degenPfp}
+                  quality={100}
+                  alt="degen kong long background"
+                />
+              </div>
+              <div className={styles.stake_page_image_container}>
+                <Image
+                  src={degenPfp}
+                  quality={100}
+                  alt="degen kong long background"
+                />
+              </div>
+              <div className={styles.stake_page_image_container}>
+                <Image
+                  src={degenPfp}
+                  quality={100}
+                  alt="degen kong long background"
+                />
+              </div>
+              <div className={styles.stake_page_image_container}>
+                <Image
+                  src={degenPfp}
+                  quality={100}
+                  alt="degen kong long background"
+                />
+              </div>
+              <div className={styles.stake_page_image_container}>
+                <Image
+                  src={degenPfp}
+                  quality={100}
+                  alt="degen kong long background"
+                />
+              </div>
+              <div className={styles.stake_page_image_container}>
+                <Image
+                  src={degenPfp}
+                  quality={100}
+                  alt="degen kong long background"
+                />
+              </div>
+              <div className={styles.stake_page_image_container}>
+                <Image
+                  src={degenPfp}
+                  quality={100}
+                  alt="degen kong long background"
+                />
+              </div>
+              <div className={styles.stake_page_image_container}>
+                <Image
+                  src={degenPfp}
+                  quality={100}
+                  alt="degen kong long background"
+                />
+              </div>
+              <div className={styles.stake_page_image_container}>
+                <Image
+                  src={degenPfp}
+                  quality={100}
+                  alt="degen kong long background"
+                />
+              </div>
+              <div className={styles.stake_page_image_container}>
+                <Image
+                  src={degenPfp}
+                  quality={100}
+                  alt="degen kong long background"
+                />
+              </div>
+              <div className={styles.stake_page_image_container}>
+                <Image
+                  src={degenPfp}
+                  quality={100}
+                  alt="degen kong long background"
+                />
+              </div>
+              <div className={styles.stake_page_image_container}>
+                <Image
+                  src={degenPfp}
+                  quality={100}
+                  alt="degen kong long background"
+                />
+              </div>
+              <div className={styles.stake_page_image_container}>
+                <Image
+                  src={degenPfp}
+                  quality={100}
+                  alt="degen kong long background"
+                />
+              </div>
+              <div className={styles.stake_page_image_container}>
+                <Image
+                  src={degenPfp}
+                  quality={100}
+                  alt="degen kong long background"
+                />
+              </div>
+              <div className={styles.stake_page_image_container}>
+                <Image
+                  src={degenPfp}
+                  quality={100}
+                  alt="degen kong long background"
+                />
+              </div>
+            </div>
+          </div>
+          <div className={styles.stake_page_second_bloc_bottom_buttons_container}>
+            <ButtonMedium text="SELECT ALL (0)" />
+            <ButtonMedium text="UNSTAKE(0)" />
+          </div>
+        </div>
+      </div>
     </>
   );
 }

client/src/components/buttons/ButtonMedium.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import Image from "next/image";
+import buttonMediumImage from "../../../public/Assets/image/button-medium.svg";
+import styles from "../../styles/button-medium.module.css";
+function ButtonMedium({ text }) {
+  return (
+    <>
+      <div className={styles.button_medium_container}>
+        <div className={styles.button_medium_image_container}>
+          <Image src={buttonMediumImage} alt="button medium" />
+        </div>
+        <div className={styles.button_medium_text}>{text}</div>
+      </div>
+    </>
+  );
+}
+
+export default ButtonMedium;

client/src/components/buttons/ButtonSocials.jsx

@@ -60,7 +60,7 @@ function ButtonSocials() {
   return (
     <>
       {socialMedia.map((social, i) => (
-        <Link key={social.name} href={handleSocialsLinks(social)}>
+        <Link className={styles.button_socials_section} key={social.name} href={handleSocialsLinks(social)}>
           <div
             key={social.name}
             className={styles.button_socials_container}

client/src/styles/button-medium.module.css

@@ -0,0 +1,29 @@
+.button_medium_container {
+  position: relative;
+  width: fit-content;
+  height: fit-content;
+  cursor: pointer;
+}
+.button_medium_container:hover {
+  opacity: 0.7;
+  transition-duration: 300ms;
+}
+.button_medium_container img {
+  stroke: black;
+  fill: black;
+}
+.button_medium_text {
+  color: white;
+  position: absolute;
+  z-index: 12;
+  font-size: 9px;
+  top: 0px;
+  font-family: "mochiy-pop-one";
+  width: 81px;
+  height: 31px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  user-select: none;
+}

client/src/styles/button-socials.module.css

@@ -1,24 +1,21 @@
+
 .button_socials_container {
-  cursor: pointer;
   position: relative;
   width: 41.72px;
   height: 48.46px;
   margin-bottom: 20px;
+  z-index: 12;
 }
 .button_socials_container:hover {
   transition-duration: 300ms;
   opacity: 0.7;
 }
 .button_socials_logo {
   z-index: 3;
-  /* width: 32.72px; */
-  /* height: 37.46px; */
   position: absolute;
   top: 20%;
   left: 15%;
-  /* background-color: red; */
   user-select: none;
-  /* animation: rotate 0.5s ease-out; */
 }
 .button_socials_logo img {
   width: 22px;