client: add UI of Claim username

client/src/components/card/claim-username.css

@@ -0,0 +1,118 @@
+:root {
+    --claim-border: #000;
+    --username-bg: #E8E8E8;
+    --username-color: #000;
+    --username-input-bg: #FFF;
+    --username-input-color: #000;
+    --submit-bg: #1F1F21;
+}
+
+[data-theme='dark'] {
+    --claim-border: #212122;
+    --username-bg: #1F1F21;
+    --username-color: #FFF;
+    --username-input-bg: #0A0A0A;
+    --username-input-color: #fff;
+    --submit-bg: #0A0A0A;
+}
+
+#claim-username {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+#claim-username p {
+    width: fit-content;
+    background-size: 200% 100%;
+    background: linear-gradient(to right, var(--shine_text_primary) 0, var(--shine_text_secondary) 10%, var(--shine_text_tertiary) 20%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: shine 7.5s infinite linear;
+    font-weight: 600;
+    font-size: 25px;
+}
+
+@keyframes shine {
+    0% {
+        background-position: 0;
+    }
+
+    100% {
+        background-position: 307.35px;
+    }
+}
+
+#claim-username .username-input {
+    position: relative;
+    width: 100%;
+    height: 50px;
+    display: flex;
+    background-color: var(--username-bg);
+    border: 3px solid;
+    box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
+    color: var(--claim-border);
+    overflow: hidden;
+}
+
+#claim-username .username-input .domain {
+    padding: 0 20px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    color: var(--username-color);
+    font-weight: 600;
+}
+
+#claim-username .username-input input {
+    padding: 0 20px;
+    width: 100%;
+    font-size: 16px;
+    font-weight: 600;
+    background-color: var(--username-input-bg);
+    color: var(--username-input-color);
+}
+
+#claim-username .submit-btn {
+    position: relative;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: 1px;
+    background-color: var(--submit-bg);
+    border: 3px solid;
+    box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
+    color: var(--claim-border);
+}
+
+#claim-username .submit-btn:active {
+    box-shadow: 0px 0px 0px 0px;
+    top: 5px;
+    left: 5px;
+}
+
+#claim-username .submit-btn span {
+    color: #FFFFFF;
+}
+
+@media screen and (max-width: 480px) {
+    #claim-username {
+        margin-bottom: 10px;
+    }
+
+    #claim-username p {
+        font-size: 22px;
+    }
+
+    #claim-username .username-input .domain {
+        padding: 0 10px;
+    }
+
+    #claim-username .username-input input {
+        padding: 0 10px;
+    }
+}

client/src/components/card/claim-username.tsx

@@ -0,0 +1,24 @@
+import "./claim-username.css"
+import { PiArrowUpRightBold } from "react-icons/pi";
+
+const ClaimUsername = () => {
+    const handleUsernameSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+    }
+
+    return (
+        <form id='claim-username' onSubmit={handleUsernameSubmit}>
+            <p>Claim your own username</p>
+            <div className='username-input'>
+                <span className='domain'>debatehive.com/</span>
+                <input placeholder='johndoe' />
+            </div>
+            <button className='submit-btn'>
+                <span>CLAIM</span>
+                <PiArrowUpRightBold size={20} color='#FFFFFF' />
+            </button>
+        </form>
+    )
+}
+
+export default ClaimUsername

client/src/pages/home/index.tsx

@@ -1,10 +1,17 @@
 import "./style.css"
+import { AuthStatus, useAuthStore } from "../../store/useAuthStore"
+import ClaimUsername from "../../components/card/claim-username";
 import { ClosedDebateCard } from "../../components/card/closed-debate-card"
 import { OpenDebateCard } from "../../components/card/open-debate-card"
 
 export default function HomePage() {
+  const { isAuthenticated } = useAuthStore();
+
   return (
     <div id='home'>
+      {isAuthenticated === AuthStatus.Failed && (
+        <ClaimUsername />
+      )}
       <ClosedDebateCard />
       <OpenDebateCard />
       <ClosedDebateCard />