Apply UI updates: tags gap, notifications, card click, breadcrumb, move share input

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

src/routes/CreateUser.tsx

@@ -5,42 +5,37 @@ import useAppStore from '../store/useAppStore'
 const CreateUser: React.FC = () => {
   const [name, setName] = useState('')
   const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
   const [bio, setBio] = useState('')
   const [specialties, setSpecialties] = useState('')
   const createUser = useAppStore((s) => s.createUser)
+  const addNotification = useAppStore((s) => s.addNotification)
   const navigate = useNavigate()
 
   const onSubmit = (e: React.FormEvent) => {
     e.preventDefault()
     const parsed = specialties.split(',').map((s) => s.trim()).filter(Boolean)
-    if (!name || !email || !bio || parsed.length === 0) return alert('All fields required and at least one specialty')
+    if (!name || !email || !bio || parsed.length === 0) {
+      addNotification('All fields required and at least one specialty', 'error')
+      return
+    }
     const newUser = createUser({ name, email, bio, specialties: parsed })
     navigate(`/profile/${newUser.id}`)
   }
 
   return (
-    <div className="container">
-      <div className="card">
-        <h2>Create User</h2>
-        <form onSubmit={onSubmit}>
-          <div>
-            <label>Name</label>
-            <input value={name} onChange={(e) => setName(e.target.value)} />
-          </div>
-          <div>
-            <label>Email</label>
-            <input value={email} onChange={(e) => setEmail(e.target.value)} />
-          </div>
-          <div>
-            <label>Bio</label>
-            <input value={bio} onChange={(e) => setBio(e.target.value)} />
-          </div>
-          <div>
-            <label>Specialties (comma separated)</label>
-            <input value={specialties} onChange={(e) => setSpecialties(e.target.value)} />
-          </div>
-          <div style={{marginTop:8}}>
-            <button className="button" type="submit">Create</button>
+    <div className="create-account-bg" style={{minHeight:'100vh',display:'flex',alignItems:'center',justifyContent:'center'}}>
+      <div className="create-card">
+        <h2>Create Account</h2>
+        <form onSubmit={onSubmit} style={{display:'flex',flexDirection:'column',gap:12}}>
+          <input className="input" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
+          <input className="input" placeholder="E-mail" value={email} onChange={(e) => setEmail(e.target.value)} />
+          <input type="password" className="input" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
+          <textarea className="input" placeholder="Short bio" value={bio} onChange={(e) => setBio(e.target.value)} />
+          <input className="input" placeholder="Specialties (comma separated)" value={specialties} onChange={(e) => setSpecialties(e.target.value)} />
+          <div style={{display:'flex',justifyContent:'center',marginTop:8}}>
+            <button className="btn-gradient" type="submit">SIGN UP</button>
+            <button type="button" className="btn-ghost" onClick={() => navigate('/')}>SIGN IN</button>
           </div>
         </form>
       </div>