landing update

web/src/components/icons/DiscordLogo.tsx

@@ -11,7 +11,7 @@ const DiscordLogo: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
   >
     <path
       d="M23.0101 2.64472C21.3529 1.88967 19.5759 1.33338 17.7179 1.01476C17.6841 1.00862 17.6503 1.02398 17.6328 1.05472C17.4043 1.45836 17.1511 1.98494 16.9738 2.39883C14.9754 2.10174 12.9873 2.10174 11.0298 2.39883C10.8525 1.97574 10.5902 1.45836 10.3606 1.05472C10.3432 1.02501 10.3094 1.00964 10.2756 1.01476C8.41857 1.33236 6.64152 1.88865 4.98335 2.64472C4.96899 2.65087 4.95669 2.66112 4.94852 2.67443C1.57784 7.67494 0.654471 12.5525 1.10745 17.3697C1.10949 17.3932 1.12282 17.4158 1.14126 17.4301C3.36514 19.0518 5.51935 20.0364 7.63355 20.689C7.66739 20.6992 7.70324 20.6869 7.72477 20.6593C8.22489 19.9811 8.6707 19.266 9.05293 18.514C9.07549 18.47 9.05396 18.4177 9.00785 18.4003C8.30073 18.1339 7.6274 17.8092 6.97971 17.4404C6.92848 17.4106 6.92437 17.3379 6.9715 17.303C7.1078 17.2016 7.24414 17.0961 7.37428 16.9896C7.39783 16.9701 7.43064 16.966 7.45833 16.9783C11.7134 18.9074 16.32 18.9074 20.5249 16.9783C20.5525 16.965 20.5854 16.9691 20.6099 16.9885C20.7401 17.0951 20.8764 17.2016 21.0137 17.303C21.0609 17.3379 21.0578 17.4106 21.0066 17.4404C20.3589 17.8163 19.6855 18.1339 18.9774 18.3993C18.9313 18.4167 18.9108 18.47 18.9333 18.514C19.3238 19.2649 19.7696 19.98 20.2605 20.6582C20.281 20.6869 20.3179 20.6992 20.3517 20.689C22.4761 20.0364 24.6303 19.0518 26.8542 17.4301C26.8737 17.4158 26.886 17.3942 26.8881 17.3707C27.4302 11.8016 25.98 6.96396 23.0439 2.67545C23.0367 2.66112 23.0245 2.65087 23.0101 2.64472ZM9.68836 14.4365C8.40729 14.4365 7.35173 13.2686 7.35173 11.8344C7.35173 10.4001 8.38682 9.23218 9.68836 9.23218C11.0001 9.23218 12.0455 10.4103 12.025 11.8344C12.025 13.2686 10.9899 14.4365 9.68836 14.4365ZM18.3276 14.4365C17.0466 14.4365 15.991 13.2686 15.991 11.8344C15.991 10.4001 17.0261 9.23218 18.3276 9.23218C19.6394 9.23218 20.6847 10.4103 20.6643 11.8344C20.6643 13.2686 19.6394 14.4365 18.3276 14.4365Z"
-      stroke="white"
+      stroke="black"
     />
   </svg>
 );

web/src/components/landing/Achievements.module.css

@@ -0,0 +1,40 @@
+.container {
+    display: flex;
+    padding: 40px 7%;
+    flex-direction: column;
+    align-items: center;
+    gap: 30px;
+    align-self: stretch;
+}
+
+.title {
+    color: #262019;
+    text-align: center;
+    font-family: Bangers, cursive;
+    font-size: 30px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 100%; /* 30px */
+}
+
+.image {
+    width: 275px;
+}
+
+@media (min-width: 768px) {
+    .image {
+        width: 300px;
+    }
+}
+
+@media (min-width: 1024px) {
+    .image {
+        width: 350px;
+    }
+}
+
+@media (min-width: 1440px) {
+    .title {
+        font-size: 40px;
+    }
+}

web/src/components/landing/Achievements.tsx

@@ -0,0 +1,14 @@
+import styles from "./Achievements.module.css";
+import { Image } from "@chakra-ui/react";
+import { FULLCOUNT_ASSETS } from "../../constants";
+
+const Achievements = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.title}>...earn achievements...</div>
+      <Image className={styles.image} src={`${FULLCOUNT_ASSETS}/landing/character-details.png`} />
+    </div>
+  );
+};
+
+export default Achievements;

web/src/components/landing/BatterUp.module.css

@@ -0,0 +1,103 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+}
+
+.heroContainer {
+    display: flex;
+    flex-direction: column;
+}
+
+.bannerContainer {
+    border: 1px solid #262019;
+    border-bottom: none;
+}
+
+.heroInnerContainer {
+    display: flex;
+    padding: 20px 7% 40px 7%;
+    flex-direction: column;
+    align-items: center;
+    gap: 30px;
+    align-self: stretch;
+}
+
+.heroTitle {
+    color: #262019;
+    text-align: center;
+    font-family: Bangers;
+    font-size: 30px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 110%; /* 33px */
+    max-width: 247px;
+}
+
+.heroText {
+    color: #262019;
+    text-align: center;
+    font-family: Pangolin;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+}
+
+.heroText {
+    margin-top: -10px;
+}
+
+.button {
+    display: flex;
+    padding: 9px 20px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    align-self: stretch;
+    border: 1px solid #262019;
+    background: #328449;
+}
+
+@media (min-width: 768px) {
+    .button {
+        align-self: center;
+        padding: 9px 80px;
+    }
+    .heroInnerContainer {
+        padding: 40px 7% 60px 7%;
+    }
+
+    .heroTextTitle {
+        font-size: 40px;
+        max-width: 425px;
+        line-height: 110%;
+    }
+}
+
+@media (min-width: 1024px) {
+    .container {
+        padding: 40px 7%;
+    }
+    .heroContainer {
+        /*padding: 40px 71.68px;*/
+    }
+    .heroInnerContainer {
+        border: 1px solid #262019;
+        background: #EBE4DC;
+        display: flex;
+        padding: 40px 7%px;
+        flex-direction: column;
+        align-items: center;
+        gap: 30px;
+        align-self: stretch;
+        border-top: 1px solid #262019;
+    }
+
+}
+
+@media (min-width: 1440px) {
+    .heroTitle {
+        font-size: 50px;
+    }
+}

web/src/components/landing/BatterUp.tsx

@@ -0,0 +1,35 @@
+import styles from "./BatterUp.module.css";
+import globalStyles from "./Landing.module.css";
+
+import { Image } from "@chakra-ui/react";
+import { FULLCOUNT_ASSETS } from "../../constants";
+import router from "next/router";
+
+const BatterUp = () => {
+  const handleCTA = () => {
+    router.push("/");
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.heroContainer}>
+        <div className={styles.bannerContainer}>
+          <Image src={`${FULLCOUNT_ASSETS}/landing/banner.png`} alt={""} />
+        </div>
+        <div className={styles.heroInnerContainer}>
+          <div className={styles.heroTitle}>BATTER UP!</div>
+          <div className={styles.heroText}>
+            Face off in epic batter vs pitcher duels
+            <br />
+            in this exciting baseball strategy game.
+          </div>
+          <div className={globalStyles.button} onClick={handleCTA}>
+            PLAY NOW
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BatterUp;

web/src/components/landing/Footer.module.css

@@ -1,12 +1,12 @@
 .container {
     display: flex;
-    padding: 40px 7%;
+    padding: 40px;
     flex-direction: column;
     align-items: center;
     gap: 40px;
     align-self: stretch;
     border-top: 1px solid #4D4D4D;
-    background: #1B1B1B;
+    /*background: #1B1B1B;*/
 }
 
 .socialsContainer {
@@ -17,9 +17,9 @@
 }
 
 .socialsTitle {
-    color: #FFF;
+    color: #000;
     font-feature-settings: 'case' on;
-    font-family: Inter;
+    font-family: Pangolin, cursive;
     font-size: 16px;
     font-style: normal;
     font-weight: 700;
@@ -49,14 +49,18 @@
 
 .legalText {
     text-align: center;
-    color: #FFF;
-    font-family: Inter;
+    color: #000;
+    font-family: Pangolin, cursive;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }
 
+.image {
+    height: 30px;
+}
+
 @media (min-width: 768px) {
     .legalText {
         font-size: 16px;
@@ -70,10 +74,10 @@
 
 @media (min-width: 1440px) {
 .container {
-    max-width: 1238px;
+    /*max-width: 1238px;*/
     width: 100%;
     place-self: center;
-    padding: 40px 0;
+    padding: 40px 7%;
 }
 }
 

web/src/components/landing/Footer.tsx

@@ -1,8 +1,8 @@
 import styles from "./Footer.module.css";
 import DiscordLogo from "../icons/DiscordLogo";
 import FullcountLogo from "../icons/FullcountLogo";
-import { Flex, useMediaQuery } from "@chakra-ui/react";
-import { DISCORD_LINK } from "../../constants";
+import { Flex, useMediaQuery, Image } from "@chakra-ui/react";
+import { DISCORD_LINK, FULLCOUNT_ASSETS } from "../../constants";
 
 const Footer = () => {
   const [is768View, is1024View] = useMediaQuery(["(min-width: 768px)", "(min-width: 1024px)"]);
@@ -12,7 +12,11 @@ const Footer = () => {
         <>
           <Flex alignItems={"end"} justifyContent={"space-between"} w={"100%"}>
             <Flex direction={"column"} placeSelf={"stretch"} justifyContent={"space-between"}>
-              <FullcountLogo />
+              <Image
+                className={styles.image}
+                alt={""}
+                src={`${FULLCOUNT_ASSETS}/landing/logo-wordmark.svg`}
+              />
               <div className={styles.legalHeaderContainer}>
                 <a>
                   <div className={styles.legalText}>Privacy Policy</div>
@@ -41,7 +45,11 @@ const Footer = () => {
         </>
       ) : (
         <>
-          <FullcountLogo />
+          <Image
+            className={styles.image}
+            alt={""}
+            src={`${FULLCOUNT_ASSETS}/landing/logo-wordmark.svg`}
+          />
           <div className={styles.socialsContainer}>
             <div className={styles.socialsTitle}>Follow us</div>
             <div className={styles.iconsContainer}>

web/src/components/landing/Hero.tsx

@@ -1,4 +1,5 @@
 import styles from "./Landing.module.css";
+import globalStyles from "./Landing.module.css";
 import { FULLCOUNT_ASSETS_PATH } from "../../constants";
 import { Image, useMediaQuery } from "@chakra-ui/react";
 import FullcountLogo from "../icons/FullcountLogo";
@@ -33,7 +34,7 @@ const Hero = () => {
           )}
         </div>
         <Link href="/" passHref>
-          <button className={styles.button}>Playtest now</button>
+          <button className={globalStyles.button}>Playtest now</button>
         </Link>
       </div>
     </div>