From ad902b49762c1185a429cbacb6ac8cc22c08d529 Mon Sep 17 00:00:00 2001
From: Anton Mushnin <anton.mushnin@gmail.com>
Date: Thu, 28 Mar 2024 16:36:20 +0300
Subject: [PATCH] title screen update

---
 web/src/components/TitleScreen.module.css     | 24 +++++--
 web/src/components/TitleScreen.tsx            | 26 ++++---
 web/src/components/account/Account.module.css |  3 +-
 web/src/components/account/LoginForm.tsx      | 62 ++++++++--------
 web/src/components/account/SignUpForm.tsx     | 72 +++++++++----------
 web/src/components/layout/layout.tsx          |  5 +-
 web/src/constants.ts                          |  1 +
 7 files changed, 106 insertions(+), 87 deletions(-)

diff --git a/web/src/components/TitleScreen.module.css b/web/src/components/TitleScreen.module.css
index cc0307c6..c733bfe0 100644
--- a/web/src/components/TitleScreen.module.css
+++ b/web/src/components/TitleScreen.module.css
@@ -17,18 +17,24 @@
 
 .content {
     display: flex;
-    padding: 20px;
+    padding-bottom: 20px;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: 10px;
-    flex-grow: 1;
+    gap: 20px;
+    flex-grow: 0;
     width: 100%;
+    max-width: 400px;
+    border: 1px solid #262019;
+    height: fit-content;
+    background: #FCECD9;
+
 }
 
 .footer{
   display: flex;
   gap: 5px;
+  margin-top: -10px;
 }
 
 .footerText{
@@ -93,13 +99,15 @@
 
 .loginContainer {
   display: flex;
-  padding-top: 20px;
+  padding: 34px 35px;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  background: #FCECD9;
   min-height: 100vh;
   width: 100%;
+  background-image: url('https://static.fullcount.xyz/web/landing/Bl-banner-background-tinted.jpeg');
+  background-size: cover;
+  background-position: center;
 }
 
 .logo {
@@ -107,4 +115,10 @@
   width: 158px;
 }
 
+.banner {
+  border-bottom: 1px solid #262019;
+}
+
+
+
 
diff --git a/web/src/components/TitleScreen.tsx b/web/src/components/TitleScreen.tsx
index 19a84f49..7cfb9b3e 100644
--- a/web/src/components/TitleScreen.tsx
+++ b/web/src/components/TitleScreen.tsx
@@ -7,11 +7,11 @@ import Playing from "./Playing";
 import SignUpForm from "./account/SignUpForm";
 import LoginForm from "./account/LoginForm";
 
-import { FULLCOUNT_ASSETS_PATH } from "../constants";
+import { FULLCOUNT_ASSETS, FULLCOUNT_ASSETS_PATH } from "../constants";
 import LoadingView from "./HomePage/LoadingView";
 const TitleScreen = () => {
   const { user, isLoading } = useUser();
-  const [isLogging, setIsLogging] = useState(true); // login or signUp
+  const [isLogging, setIsLogging] = useState(false); // login or signUp
   const [isSuccess, setIsSuccess] = useState(false);
   const [isFirstSeconds, setIsFirstSeconds] = useState(true);
 
@@ -29,15 +29,21 @@ const TitleScreen = () => {
             <LoadingView />
           ) : (
             <div className={styles.loginContainer}>
-              <Image
-                alt={""}
-                className={styles.logo}
-                height={"84"}
-                width={"158"}
-                priority
-                src={`${FULLCOUNT_ASSETS_PATH}/logo-4-no-stroke.png`}
-              />
+              {/*<Image*/}
+              {/*  alt={""}*/}
+              {/*  className={styles.logo}*/}
+              {/*  height={"84"}*/}
+              {/*  width={"158"}*/}
+              {/*  priority*/}
+              {/*  src={`${FULLCOUNT_ASSETS_PATH}/logo-4-no-stroke.png`}*/}
+              {/*/>*/}
               <div className={styles.content}>
+                <img
+                  className={styles.banner}
+                  src={`${FULLCOUNT_ASSETS}/landing/banner.png`}
+                  alt={""}
+                />
+
                 {!isLogging ? (
                   <SignUpForm setIsSuccess={(value) => setIsSuccess(value)} />
                 ) : (
diff --git a/web/src/components/account/Account.module.css b/web/src/components/account/Account.module.css
index db42d845..a775d05b 100644
--- a/web/src/components/account/Account.module.css
+++ b/web/src/components/account/Account.module.css
@@ -5,7 +5,8 @@
     align-items: center;
     gap: 0;
     width: 100%;
-    max-width: 350px;
+    padding-left: 20px;
+    padding-right: 20px;
 }
 
 .header {
diff --git a/web/src/components/account/LoginForm.tsx b/web/src/components/account/LoginForm.tsx
index dcd21818..f27f4dcc 100644
--- a/web/src/components/account/LoginForm.tsx
+++ b/web/src/components/account/LoginForm.tsx
@@ -29,37 +29,37 @@ const LoginForm = ({ setIsSuccess }: { setIsSuccess: (isSuccess: boolean) => voi
 
   return (
     <form onSubmit={handleSubmit} className={styles.container}>
-      <div className={`${styles.container} ${isSuccess ? styles.fadeOut : ""}`}>
-        <div className={`${styles.header} ${isSuccess ? styles.fadeOut : ""}`}>Welcome back!</div>
-        <label className={styles.label}>Username</label>
-        <input
-          type="text"
-          placeholder="Enter your username"
-          name="username"
-          value={username}
-          className={showInvalid && !isUsernameValid ? "inputError" : ""}
-          style={{ marginBottom: "10px" }}
-          spellCheck={false}
-          onChange={(event) => {
-            setShowInvalid(false);
-            setUsername(event.target.value);
-          }}
-        />
-        <div className={styles.label}>Password</div>
-        <input
-          type="password"
-          placeholder="Enter your password"
-          value={password}
-          name="password"
-          className={showInvalid && !isPasswordValid ? "inputError" : ""}
-          style={{ marginBottom: "10px" }}
-          spellCheck={false}
-          onChange={(event) => {
-            setShowInvalid(false);
-            setPassword(event.target.value);
-          }}
-        />
-      </div>
+      {/*<div className={`${styles.container} ${isSuccess ? styles.fadeOut : ""}`}>*/}
+      <div className={`${styles.header} ${isSuccess ? styles.fadeOut : ""}`}>Welcome back!</div>
+      <label className={styles.label}>Username</label>
+      <input
+        type="text"
+        placeholder="Enter your username"
+        name="username"
+        value={username}
+        className={showInvalid && !isUsernameValid ? "inputError" : ""}
+        style={{ marginBottom: "10px" }}
+        spellCheck={false}
+        onChange={(event) => {
+          setShowInvalid(false);
+          setUsername(event.target.value);
+        }}
+      />
+      <div className={styles.label}>Password</div>
+      <input
+        type="password"
+        placeholder="Enter your password"
+        value={password}
+        name="password"
+        className={showInvalid && !isPasswordValid ? "inputError" : ""}
+        style={{ marginBottom: "10px" }}
+        spellCheck={false}
+        onChange={(event) => {
+          setShowInvalid(false);
+          setPassword(event.target.value);
+        }}
+      />
+      {/*</div>*/}
       <button className={styles.button}>
         {isLoading ? <Spinner /> : isSuccess ? <div>Success</div> : <div>Login</div>}
       </button>
diff --git a/web/src/components/account/SignUpForm.tsx b/web/src/components/account/SignUpForm.tsx
index 03fdbd73..f3599058 100644
--- a/web/src/components/account/SignUpForm.tsx
+++ b/web/src/components/account/SignUpForm.tsx
@@ -31,44 +31,44 @@ const SignUpForm = ({ setIsSuccess }: { setIsSuccess: (isSuccess: boolean) => vo
 
   return (
     <form onSubmit={handleSubmit} className={styles.container}>
-      <div className={`${styles.container} ${isSuccess ? styles.fadeOut : ""}`}>
-        <div className={styles.header}>Welcome!</div>
-        <label className={styles.label}>Username</label>
-        <input
-          type="text"
-          placeholder="Enter your username"
-          name="username"
-          value={username}
-          className={showErrors && !username ? "inputError" : ""}
-          onChange={(event) => setUsername(event.target.value)}
-          style={{ marginBottom: "10px" }}
-          spellCheck={false}
-        />
+      {/*<div className={`${styles.container} ${isSuccess ? styles.fadeOut : ""}`}>*/}
+      <div className={styles.header}>Welcome!</div>
+      <label className={styles.label}>Username</label>
+      <input
+        type="text"
+        placeholder="Enter your username"
+        name="username"
+        value={username}
+        className={showErrors && !username ? "inputError" : ""}
+        onChange={(event) => setUsername(event.target.value)}
+        style={{ marginBottom: "10px" }}
+        spellCheck={false}
+      />
 
-        <div className={styles.label}>Email</div>
-        <input
-          type="text"
-          placeholder="Enter your email"
-          name="email"
-          value={email}
-          className={showErrors && !email ? "inputError" : ""}
-          style={{ marginBottom: "10px" }}
-          onChange={(event) => setEmail(event.target.value)}
-          spellCheck={false}
-        />
+      <div className={styles.label}>Email</div>
+      <input
+        type="text"
+        placeholder="Enter your email"
+        name="email"
+        value={email}
+        className={showErrors && !email ? "inputError" : ""}
+        style={{ marginBottom: "10px" }}
+        onChange={(event) => setEmail(event.target.value)}
+        spellCheck={false}
+      />
 
-        <div className={styles.label}>Password</div>
-        <input
-          type="password"
-          placeholder="Enter your password"
-          value={password}
-          name="password"
-          className={showErrors && !password ? "inputError" : ""}
-          style={{ marginBottom: "10px" }}
-          onChange={(event) => setPassword(event.target.value)}
-          spellCheck={false}
-        />
-      </div>
+      <div className={styles.label}>Password</div>
+      <input
+        type="password"
+        placeholder="Enter your password"
+        value={password}
+        name="password"
+        className={showErrors && !password ? "inputError" : ""}
+        style={{ marginBottom: "10px" }}
+        onChange={(event) => setPassword(event.target.value)}
+        spellCheck={false}
+      />
+      {/*</div>*/}
       <button className={styles.button}>
         {isLoading ? <Spinner /> : isSuccess ? <div>Success</div> : <div>Create account</div>}
       </button>
diff --git a/web/src/components/layout/layout.tsx b/web/src/components/layout/layout.tsx
index b71ca4d7..7b001b82 100644
--- a/web/src/components/layout/layout.tsx
+++ b/web/src/components/layout/layout.tsx
@@ -25,10 +25,7 @@ export default function Layout({
         <title>{title ?? "Fullcount"}</title>
         <meta name="description" content="Baseball game" />
         <meta name="og:title" content={siteTitle} />
-        <meta
-          name="keywords"
-          content="NFT gaming, smart contracts, web3, smart contract, ethereum, polygon, matic, transactions, defi, decentralized, mempool, NFT, NFTs, DAO, DAOs, cryptocurrency, cryptocurrencies, bitcoin, blockchain economy, blockchain game, marketplace, blockchain security, loyalty program, Ethereum bridge, Ethereum bridges, NFT game, NFT games"
-        />
+        <meta name="keywords" content="baseball, games, fullcount, home run" />
         <meta name="og:image" content={`${assetsPath}/fullcount-og-image.png`} />
       </Head>
       <Flex
diff --git a/web/src/constants.ts b/web/src/constants.ts
index df5a29cc..5478dce9 100644
--- a/web/src/constants.ts
+++ b/web/src/constants.ts
@@ -28,6 +28,7 @@ export const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
 export const AWS_STATIC_ASSETS_PATH = "https://static.simiotics.com/moonstream/assets";
 
 export const FULLCOUNT_ASSETS_PATH = "https://static.simiotics.com/fullcount";
+export const FULLCOUNT_ASSETS = "https://static.fullcount.xyz/web";
 export const TOKEN_IMAGE_FALLBACK = `${FULLCOUNT_ASSETS_PATH}/question.png`;
 
 export const DISCORD_LINK = "https://discord.gg/K56VNUQGvA";