From bf9ea8e116610ac2309c3e09a596bf897e75e53c Mon Sep 17 00:00:00 2001
From: undrcrxwn <69521267+undrcrxwn@users.noreply.github.com>
Date: Tue, 24 Jun 2025 20:59:57 +0300
Subject: [PATCH 1/3] feat: enhance responsive styles

---
 src/app/index.tsx                             |   2 +-
 src/entities/types.tsx                        |   2 +-
 src/features/inline-avatars/index.module.scss |   2 +-
 src/features/profile/index.tsx                |   8 +-
 src/lib/utils.ts                              |  11 +-
 src/pages/explore/page.tsx                    |  13 +-
 src/pages/home/page.tsx                       |   7 +-
 src/pages/index.tsx                           |   3 +
 src/pages/profile/model.ts                    |   2 +-
 src/pages/profiles/index.ts                   |   7 +
 src/pages/profiles/model.ts                   |  36 ++++
 src/pages/profiles/page.tsx                   |  32 ++++
 src/pages/sign-in/page.tsx                    |  10 +-
 src/pages/sign-up/page.tsx                    |   6 +-
 src/shared/api/client.ts                      |  58 ++++++
 src/shared/routes.ts                          |   2 +
 src/shared/ui/badge.tsx                       |   2 +-
 src/shared/ui/badge/index.module.scss         |  16 --
 src/shared/ui/badge/index.tsx                 |  16 --
 src/shared/ui/button.tsx                      |   2 +-
 src/shared/ui/index.ts                        |   1 -
 src/shared/ui/input/index.tsx                 | 139 ++------------
 src/shared/ui/link/index.module.scss          |  61 -------
 src/shared/ui/link/index.stories.tsx          |  67 -------
 src/shared/ui/link/index.tsx                  |  72 --------
 src/shared/ui/magnet-lines.tsx                | 100 -----------
 src/shared/ui/page/index.tsx                  |   5 +-
 src/widgets/discussion/index.tsx              |  14 +-
 src/widgets/footer/index.module.scss          |  25 ---
 src/widgets/footer/index.tsx                  | 169 ++++++++++--------
 src/widgets/header/assets/avatar.png          | Bin 8233 -> 0 bytes
 src/widgets/header/assets/logo-mini.svg       |  21 +++
 src/widgets/header/assets/notification.svg    |   3 -
 src/widgets/header/index.module.scss          |  62 -------
 src/widgets/header/index.tsx                  |  66 +++----
 src/widgets/header/model.ts                   |   4 -
 vite.config.ts                                |   1 -
 37 files changed, 338 insertions(+), 709 deletions(-)
 create mode 100644 src/pages/profiles/index.ts
 create mode 100644 src/pages/profiles/model.ts
 create mode 100644 src/pages/profiles/page.tsx
 delete mode 100644 src/shared/ui/badge/index.module.scss
 delete mode 100644 src/shared/ui/badge/index.tsx
 delete mode 100644 src/shared/ui/link/index.module.scss
 delete mode 100644 src/shared/ui/link/index.stories.tsx
 delete mode 100644 src/shared/ui/link/index.tsx
 delete mode 100644 src/shared/ui/magnet-lines.tsx
 delete mode 100644 src/widgets/footer/index.module.scss
 delete mode 100644 src/widgets/header/assets/avatar.png
 create mode 100644 src/widgets/header/assets/logo-mini.svg
 delete mode 100644 src/widgets/header/assets/notification.svg
 delete mode 100644 src/widgets/header/index.module.scss
 delete mode 100644 src/widgets/header/model.ts

diff --git a/src/app/index.tsx b/src/app/index.tsx
index 52bf22f..64559f4 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -19,8 +19,8 @@ export const App = () => {
           <Header />
           <Pages />
           <Footer />
-          <Toaster />
         </div>
+        <Toaster />
       </RouterProvider>
     </ThemeProvider>
   );
diff --git a/src/entities/types.tsx b/src/entities/types.tsx
index 7867f66..fe14ea6 100644
--- a/src/entities/types.tsx
+++ b/src/entities/types.tsx
@@ -36,7 +36,7 @@ export class UserEntity {
   }
 
   getPersonalStyle() {
-    const hue = hash(this.displayName + ' ' + this.username);
+    const hue = hash([this.displayName, this.username].join('..'));
     const color = `hsl(${hue}deg 90% 40%)`;
     return {hue, color};
   }
diff --git a/src/features/inline-avatars/index.module.scss b/src/features/inline-avatars/index.module.scss
index 547fa4d..4b7bb2d 100644
--- a/src/features/inline-avatars/index.module.scss
+++ b/src/features/inline-avatars/index.module.scss
@@ -4,7 +4,7 @@
 }
 
 .avatar {
-  outline: 2px solid var(--background);
+  outline: 3px solid var(--background);
   overflow: hidden;
 
   &:not(:first-child) {
diff --git a/src/features/profile/index.tsx b/src/features/profile/index.tsx
index 0d43772..0685975 100644
--- a/src/features/profile/index.tsx
+++ b/src/features/profile/index.tsx
@@ -56,13 +56,11 @@ export const Profile = memo((props: ProfileProps) => {
       {...otherProps}
     >
       <Avatar user={user} className={cn(variant === 'xs' && 'w-4 h-4')} />
-      <div className={cn('flex gap-1.5', variant === 'md' && 'flex-col')}>
-        <p className="text-sm font-medium leading-none">
+      <div className={cn('grid gap-1.5', variant === 'md' && 'flex-col')}>
+        <p className="text-sm font-medium leading-none -m-1 p-1 truncate">
           {user.displayName}
           {variant === 'xs' && (
-            <span className="ml-2 font-normal text-sm opacity-50 leading-none">
-              {user.username}
-            </span>
+            <span className="ml-2 font-normal text-muted-foreground">{user.username}</span>
           )}
           {isTopicStarter && (
             <span className="ml-2 text-muted-foreground font-normal">
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 7ac0371..169996a 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -90,14 +90,5 @@ export const getTimeSince = (timestamp: string | Date): string => {
 };
 
 export const hash = (input: string) => {
-  let hash = 0,
-    i,
-    chr;
-  if (input.length === 0) return hash;
-  for (i = 0; i < input.length; i++) {
-    chr = input.charCodeAt(i);
-    hash = (hash << 5) - hash + chr;
-    hash |= 0;
-  }
-  return hash;
+  return input.split('').reduce((a, b) => ((a << 5) - a + b.charCodeAt(0)) | 0, 0);
 };
diff --git a/src/pages/explore/page.tsx b/src/pages/explore/page.tsx
index 6a96a25..efed98a 100644
--- a/src/pages/explore/page.tsx
+++ b/src/pages/explore/page.tsx
@@ -15,9 +15,9 @@ import {$discussions, $totalCount} from './model';
 export const ExplorePage = () => {
   const [discussions, totalCount] = useUnit([$discussions, $totalCount]);
   return (
-    <Page className="mx-auto w-full pt-16 pb-48">
+    <Page className="mx-auto w-full">
       <div className="flex-1 w-full mt-6 sm:max-w-xl md:max-w-3xl">
-        <div className="flex w-full mb-6 justify-between items-center px-6 sm:px-0 sm:ps-2">
+        <div className="flex w-full mb-6 justify-between items-center px-6 sm:pe-0 sm:ps-2">
           {discussions === 'loading' ? (
             <Skeleton className="w-24 h-3" />
           ) : (
@@ -30,9 +30,14 @@ export const ExplorePage = () => {
             </Button>
           </CreateDiscussionDialog>
         </div>
-        <div className="sm:space-y-6 sm:mb-6">
+        <div className="sm:space-y-6">
           {discussions === 'loading' &&
-            [...Array(5).keys()].map((i) => <DiscussionSkeleton key={i} />)}
+            [...Array(5).keys()].map((i) => (
+              <DiscussionSkeleton
+                key={i}
+                className="rounded-none sm:rounded-xl border-x-0 border-b-0 border-t sm:border"
+              />
+            ))}
           {discussions !== 'loading' &&
             discussions.map((discussion) => (
               <Discussion
diff --git a/src/pages/home/page.tsx b/src/pages/home/page.tsx
index 08f19fb..1640086 100644
--- a/src/pages/home/page.tsx
+++ b/src/pages/home/page.tsx
@@ -21,7 +21,8 @@ import Fresco from './assets/fresco.webp';
 export const HomePage = () => {
   const repos = useUnit($repos);
   return (
-    <Page className="pt-16">
+    <Page>
+      <div className="fixed top-0 z-999 h-[100vh] w-[100vw] mix-blend-screen pointer-events-none"></div>
       <div className="min-h-screen w-full px-10 sm:px-0 sm:max-w-xl lg:max-w-2xl">
         <Link to="/explore" className="block w-fit mx-auto mt-16 mb-12">
           <motion.div
@@ -33,7 +34,7 @@ export const HomePage = () => {
             }}
             viewport={{once: true}}
           >
-            <Button className="rounded-full bg-primary group gap-0">
+            <Button className="rounded-full bg-foreground group gap-0">
               Discussions
               <ArrowRight className="w-0! group-hover:w-4! group-hover:ms-2 pt-px transition-all" />
             </Button>
@@ -67,7 +68,7 @@ export const HomePage = () => {
             <a href={repo.html_url} target="_blank" key={repo.id} className="w-full">
               <Card className="bg-background">
                 <CardHeader>
-                  <div className="flex justify-between items-center text-sm whitespace-nowrap">
+                  <div className="md:flex space-y-4 md:space-y-0 justify-between items-center text-sm whitespace-nowrap">
                     <Profile
                       user={
                         new UserEntity({
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index c32c3ed..89f21a5 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,5 +1,7 @@
 import {createRoutesView} from 'atomic-router-react';
 
+import {ProfilesRoute} from '~/pages/profiles';
+
 import {DiscussionRoute} from './discussion';
 import {EditProfileRoute} from './edit-profile';
 import {ExploreRoute} from './explore';
@@ -15,6 +17,7 @@ export const Pages = createRoutesView({
     HomeRoute,
     SignInRoute,
     SignUpRoute,
+    ProfilesRoute,
     ExploreRoute,
     ProfileRoute,
     EditProfileRoute,
diff --git a/src/pages/profile/model.ts b/src/pages/profile/model.ts
index bb51231..f236b88 100644
--- a/src/pages/profile/model.ts
+++ b/src/pages/profile/model.ts
@@ -19,7 +19,7 @@ export const dataLoadedRoute = chainRoute({
     mapParams: ({params}) => {
       return {
         query: {
-          username: params.username,
+          username: decodeURIComponent(params.username),
         },
       };
     },
diff --git a/src/pages/profiles/index.ts b/src/pages/profiles/index.ts
new file mode 100644
index 0000000..554cd75
--- /dev/null
+++ b/src/pages/profiles/index.ts
@@ -0,0 +1,7 @@
+import {currentRoute} from '~/pages/profiles/model';
+import {ProfilesPage} from '~/pages/profiles/page';
+
+export const ProfilesRoute = {
+  view: ProfilesPage,
+  route: currentRoute,
+};
diff --git a/src/pages/profiles/model.ts b/src/pages/profiles/model.ts
new file mode 100644
index 0000000..853807b
--- /dev/null
+++ b/src/pages/profiles/model.ts
@@ -0,0 +1,36 @@
+import {attach, createStore, sample} from 'effector';
+import {spread} from 'patronum';
+
+import {UserEntity} from '~/entities/types';
+
+import {apiV1UsersGetFx} from '~/shared/api';
+import {routes} from '~/shared/routes';
+
+export const currentRoute = routes.profiles;
+
+export const $users = createStore<UserEntity[] | 'loading'>('loading');
+export const $totalCount = createStore(0);
+
+const loadUsersFx = attach({
+  effect: apiV1UsersGetFx,
+  mapParams: () => ({query: {offset: 0, count: 100}}),
+});
+
+sample({
+  clock: currentRoute.opened,
+  target: loadUsersFx,
+});
+
+sample({
+  clock: loadUsersFx.doneData,
+  fn: ({answer}) => ({
+    users: (answer.items as any[]).map((item) => UserEntity.fromResponse(item)!),
+    totalCount: answer.total_count!,
+  }),
+  target: spread({
+    targets: {
+      users: $users,
+      totalCount: $totalCount,
+    },
+  }),
+});
diff --git a/src/pages/profiles/page.tsx b/src/pages/profiles/page.tsx
new file mode 100644
index 0000000..a7ec231
--- /dev/null
+++ b/src/pages/profiles/page.tsx
@@ -0,0 +1,32 @@
+import {useUnit} from 'effector-react';
+import {cn} from '~/lib/utils';
+
+import {Profile, ProfileSkeleton} from '~/features/profile';
+
+import {Page} from '~/shared/ui';
+import {Skeleton} from '~/shared/ui/skeleton';
+
+import * as model from './model';
+
+export const ProfilesPage = () => {
+  const [users, totalCount] = useUnit([model.$users, model.$totalCount]);
+  return (
+    <Page>
+      <div className="flex-1 w-full mt-6 sm:max-w-xl md:max-w-3xl">
+        <div className="flex w-full h-9 mb-6 justify-between items-center px-6 sm:pe-0 sm:ps-2">
+          {users === 'loading' ? <Skeleton className="w-16 h-3" /> : <p>{totalCount} users</p>}
+        </div>
+        <div
+          className={cn(
+            'grid sm:grid-cols-2 md:grid-cols-3 px-3 sm:px-0 gap-3 w-full sm:max-w-xl md:max-w-3xl',
+            '[&>*]:w-full [&>*]:p-3 [&>*]:rounded-xl [&>*]:border',
+          )}
+        >
+          {users === 'loading' && [...Array(50).keys()].map((i) => <ProfileSkeleton key={i} />)}
+          {users !== 'loading' &&
+            users.map((user) => <Profile key={user.id} variant={'md'} user={user} />)}
+        </div>
+      </div>
+    </Page>
+  );
+};
diff --git a/src/pages/sign-in/page.tsx b/src/pages/sign-in/page.tsx
index e71dd88..6206663 100644
--- a/src/pages/sign-in/page.tsx
+++ b/src/pages/sign-in/page.tsx
@@ -1,3 +1,4 @@
+import {Link} from 'atomic-router-react';
 import {useForm} from 'effector-forms';
 import {useUnit} from 'effector-react';
 
@@ -9,7 +10,6 @@ import {
   ContainerSize,
   CustomButton,
   Input,
-  Link,
   Page,
   Text,
   TextSize,
@@ -78,12 +78,8 @@ export const SignInPage = () => {
           </div>
 
           <div className={cls.list}>
-            <Link center={true} to={routes.auth.resetPassword}>
-              Reset password
-            </Link>
-            <Link center={true} to={routes.auth.signUp}>
-              Sign up
-            </Link>
+            <Link to={routes.auth.resetPassword}>Reset password</Link>
+            <Link to={routes.auth.signUp}>Sign up</Link>
           </div>
         </div>
       </Container>
diff --git a/src/pages/sign-up/page.tsx b/src/pages/sign-up/page.tsx
index 7a4bd11..789b8e9 100644
--- a/src/pages/sign-up/page.tsx
+++ b/src/pages/sign-up/page.tsx
@@ -1,3 +1,4 @@
+import {Link} from 'atomic-router-react';
 import {useForm} from 'effector-forms';
 import {useUnit} from 'effector-react';
 
@@ -12,7 +13,6 @@ import {
   ContainerSize,
   CustomButton,
   Input,
-  Link,
   Page,
   Text,
   TextSize,
@@ -110,9 +110,7 @@ export const SignUpPage = () => {
         </form>
 
         <div className={cls.list}>
-          <Link center={true} to={routes.auth.signIn}>
-            I already have an account
-          </Link>
+          <Link to={routes.auth.signIn}>I already have an account</Link>
         </div>
       </Container>
     </Page>
diff --git a/src/shared/api/client.ts b/src/shared/api/client.ts
index 1d3465c..595f16d 100644
--- a/src/shared/api/client.ts
+++ b/src/shared/api/client.ts
@@ -1215,6 +1215,64 @@ export const apiV1AuthenticationSignInGoogleCallbackGetFx = createEffect<ApiV1Au
 });
 //#endregion apiV1AuthenticationSignInGoogleCallbackGet
 
+/* --- */
+//#region apiV1UsersGet
+export type ApiV1UsersGet = {
+  query?: {
+    order?: "newestFirst" | "oldestFirst";
+    offset?: number;
+    count?: number;
+  };
+};
+/* OK */
+export const apiV1UsersGetOk = typed.object({
+  total_count: typed.number.optional,
+  items: typed.array(typed.object({
+    id: typed.string.optional,
+    username: typed.string.optional,
+    display_name: typed.string.optional,
+    avatar_url: typed.string.maybe
+  })).optional
+});
+export type ApiV1UsersGetDone = {
+  status: "ok";
+  answer: typed.Get<typeof apiV1UsersGetOk>;
+};
+/* Bad Request */
+export const apiV1UsersGetBadRequest = typed.object({
+  error_description: typed.string.optional,
+  validation_errors: typed.object({}).optional
+});
+/* Internal Server Error */
+export const apiV1UsersGetInternalServerError = typed.object({
+  error_description: typed.string.optional
+});
+export type ApiV1UsersGetFail = {
+  status: "bad_request";
+  error: typed.Get<typeof apiV1UsersGetBadRequest>;
+} | {
+  status: "internal_server_error";
+  error: typed.Get<typeof apiV1UsersGetInternalServerError>;
+} | GenericErrors;
+export const apiV1UsersGetFx = createEffect<ApiV1UsersGet, ApiV1UsersGetDone, ApiV1UsersGetFail>({
+  async handler({
+    query
+  }) {
+    const name = "apiV1UsersGetFx.body";
+    const response = await requestFx({
+      path: "/api/v1/users",
+      method: "GET",
+      query
+    });
+    return parseByStatus(name, response, {
+      200: ["ok", apiV1UsersGetOk],
+      400: ["bad_request", apiV1UsersGetBadRequest],
+      500: ["internal_server_error", apiV1UsersGetInternalServerError]
+    });
+  }
+});
+//#endregion apiV1UsersGet
+
 /* --- */
 //#region apiV1UsersRegisterPost
 export type ApiV1UsersRegisterPost = {
diff --git a/src/shared/routes.ts b/src/shared/routes.ts
index 6a6203b..fb9ef17 100644
--- a/src/shared/routes.ts
+++ b/src/shared/routes.ts
@@ -16,6 +16,7 @@ export const routes = {
     signUp: createRoute(),
     resetPassword: createRoute(),
   },
+  profiles: createRoute(),
   profile: createRoute<{username: string}>(),
   editProfile: createRoute(),
   explore: createRoute(),
@@ -36,6 +37,7 @@ export const routesMap: UnmappedRouteObject<any>[] = [
   {path: '/sign-in', route: routes.auth.signIn},
   {path: '/sign-up', route: routes.auth.signUp},
   {path: '/reset-password', route: routes.auth.resetPassword},
+  {path: '/users', route: routes.profiles},
   {path: '/u/:username', route: routes.profile},
   {path: '/edit-profile', route: routes.editProfile},
   {path: '/explore', route: routes.explore},
diff --git a/src/shared/ui/badge.tsx b/src/shared/ui/badge.tsx
index 53ad4b9..229719e 100644
--- a/src/shared/ui/badge.tsx
+++ b/src/shared/ui/badge.tsx
@@ -7,7 +7,7 @@ const badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: 'border-transparent bg-primary text-primary-foreground shadow',
+        default: 'border-transparent bg-foreground text-background shadow',
         secondary: 'border-transparent bg-secondary text-secondary-foreground',
         destructive: 'border-transparent bg-destructive text-destructive-foreground shadow',
         outline: 'text-foreground',
diff --git a/src/shared/ui/badge/index.module.scss b/src/shared/ui/badge/index.module.scss
deleted file mode 100644
index 4ad7716..0000000
--- a/src/shared/ui/badge/index.module.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.badge {
-  height: 20px;
-  min-width: 20px;
-  position: absolute;
-  left: calc(100% - 10px);
-  bottom: -12px;
-  box-sizing: border-box;
-  padding: 0 5px;
-  font: var(--font-s);
-  line-height: 18px !important;
-  color: var(--color-black);
-  text-align: center;
-  background: var(--color-white);
-  border: 2px solid var(--color-black);
-  border-radius: 10px;
-}
diff --git a/src/shared/ui/badge/index.tsx b/src/shared/ui/badge/index.tsx
deleted file mode 100644
index c505a38..0000000
--- a/src/shared/ui/badge/index.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import classNames from 'classnames';
-import {HTMLAttributes} from 'react';
-
-import cls from './index.module.scss';
-
-export type BadgeProps = HTMLAttributes<HTMLSpanElement>;
-
-export const Badge = (props: BadgeProps) => {
-  const {children, className, ...otherProps} = props;
-
-  return (
-    <span className={classNames(cls.badge, className)} {...otherProps}>
-      {children}
-    </span>
-  );
-};
diff --git a/src/shared/ui/button.tsx b/src/shared/ui/button.tsx
index c3be532..ee44c7b 100644
--- a/src/shared/ui/button.tsx
+++ b/src/shared/ui/button.tsx
@@ -9,7 +9,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          'bg-primary dark:bg-primary/90 dark:hover:bg-primary hover:bg-primary text-primary-foreground',
+          'bg-foreground dark:bg-foreground/90 dark:hover:bg-foreground hover:bg-foreground text-background',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline:
           'border border-input bg-background hover:border-transparent hover:bg-accent hover:text-accent-foreground',
diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts
index 32184af..faef866 100644
--- a/src/shared/ui/index.ts
+++ b/src/shared/ui/index.ts
@@ -1,6 +1,5 @@
 export * from './text';
 export * from './custom-button';
-export * from './link';
 export * from './input';
 export * from './select';
 export * from './page';
diff --git a/src/shared/ui/input/index.tsx b/src/shared/ui/input/index.tsx
index 79217f0..1fbe40d 100644
--- a/src/shared/ui/input/index.tsx
+++ b/src/shared/ui/input/index.tsx
@@ -1,127 +1,20 @@
-import classNames from 'classnames';
-import {InputHTMLAttributes, useState} from 'react';
-
-import {Text, TextSize} from '~/shared/ui';
-
-import ErrorIcon from './assets/error.svg';
-import FileIcon from './assets/file.svg';
-import cls from './index.module.scss';
-
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-  label?: string;
-  isInvalid?: boolean;
-  errorMessage?: string;
-  center?: boolean;
-  forceFocus?: boolean;
-  forceHover?: boolean;
-  alwaysShown?: boolean;
-  onFileChanged?: (data: string) => void;
-}
-
-export const Input = (props: InputProps) => {
-  const {
-    label,
-    alwaysShown,
-    className,
-    forceHover,
-    forceFocus,
-    disabled,
-    isInvalid,
-    errorMessage,
-    center,
-    type = 'text',
-    accept,
-    onFileChanged,
-    ...otherProps
-  } = props;
-
-  const isFileMode = type === 'file';
-  const isPasswordMode = type === 'password';
-
-  let customType = type;
-  if (isPasswordMode && alwaysShown) {
-    customType = 'text';
-  }
-  if (isFileMode) {
-    customType = 'text';
-  }
-
-  const [isErrorIconHovered, setIsErrorIconHovered] = useState(false);
-
-  const wrapperMods = {
-    [cls.top]: Boolean(label),
-  };
-
-  const mods = {
-    [cls.password]: type === 'password',
-    [cls.disabled]: disabled,
-    [cls.invalid]: isInvalid,
-    [cls.center]: center,
-    [cls.focus]: forceFocus,
-    [cls.hover]: forceHover,
-    [cls.showMods]: isFileMode || isPasswordMode || isInvalid,
-    [cls.showMods2]: (isPasswordMode || isFileMode) && isInvalid,
-  };
-
-  const tooltipMods = {
-    [cls.tooltipVisible]: isErrorIconHovered,
-  };
+import * as React from 'react';
+import {cn} from '@/lib/utils';
 
+function Input({className, type, ...props}: React.ComponentProps<'input'>) {
   return (
-    <div className={classNames(cls.wrapper, wrapperMods, className)} data-top={label}>
-      <input
-        className={classNames(cls.input, mods)}
-        disabled={disabled}
-        type={customType}
-        {...otherProps}
-      />
-
-      <div className={cls.mods}>
-        {isFileMode && (
-          <div>
-            <label className={cls.fileLabel} htmlFor="file_upload">
-              <FileIcon />
-            </label>
-            <input
-              className={cls.file}
-              type="file"
-              accept={accept}
-              id="file_upload"
-              name="file_upload"
-              onChange={(e) => {
-                const file = e.target.files?.[0];
-                if (file && onFileChanged) {
-                  const reader = new FileReader();
-
-                  reader.onloadend = () => {
-                    if (reader.result) {
-                      onFileChanged(reader.result.toString());
-                    }
-                  };
-
-                  reader.readAsDataURL(file);
-                }
-              }}
-            />
-          </div>
-        )}
-
-        {isInvalid && (
-          <div
-            className={cls.errorContainer}
-            onMouseEnter={() => setIsErrorIconHovered(true)}
-            onMouseLeave={() => setIsErrorIconHovered(false)}
-          >
-            <ErrorIcon />
-          </div>
-        )}
-      </div>
-
-      {errorMessage && (
-        <Text size={TextSize.S} className={classNames(cls.tooltip, tooltipMods)}>
-          {errorMessage}
-        </Text>
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base transition-[color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring/50',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        className,
       )}
-    </div>
+      {...props}
+    />
   );
-};
+}
+
+export {Input};
diff --git a/src/shared/ui/link/index.module.scss b/src/shared/ui/link/index.module.scss
deleted file mode 100644
index 7473272..0000000
--- a/src/shared/ui/link/index.module.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-.wrapper {
-  display: flex;
-  position: relative;
-}
-
-.link {
-  display: inline-flex;
-  flex-direction: row;
-  gap: 16px;
-  align-items: center;
-  font: var(--font-s);
-  border-bottom: 1px solid transparent;
-  margin-bottom: -1px;
-
-  &.active {
-    color: var(--color-white);
-    border-color: var(--color-white);
-  }
-}
-
-.primary {
-  color: var(--color-gray-lighter);
-
-  &:hover {
-    color: var(--color-white);
-  }
-}
-
-.raw {
-  color: var(--color-gray-lighter);
-
-  &:hover {
-    color: var(--color-gray-lightest);
-  }
-}
-
-.clear {
-  padding: 10px 25px 11px;
-  color: var(--color-white);
-
-  &:hover {
-    opacity: 0.8;
-  }
-}
-
-.navigation {
-  color: var(--color-gray-lightest);
-  height: 60px;
-
-  &:hover {
-    color: var(--color-white);
-  }
-}
-
-.fullWidth {
-  width: 100%;
-}
-
-.center {
-  margin: 0 auto;
-}
diff --git a/src/shared/ui/link/index.stories.tsx b/src/shared/ui/link/index.stories.tsx
deleted file mode 100644
index 9291c39..0000000
--- a/src/shared/ui/link/index.stories.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-
-import {Link, LinkVariant} from '.';
-import {RouterDecorator} from '../../decorators';
-import AddIcon from '../icon/assets/add.svg';
-
-const meta: Meta<typeof Link> = {
-  title: 'shared/Link',
-  component: Link,
-  tags: ['autodocs'],
-  decorators: [RouterDecorator],
-};
-
-const to = '';
-
-export default meta;
-type Story = StoryObj<typeof Link>;
-
-export const Primary: Story = {
-  args: {
-    children: 'Sign In',
-    variant: LinkVariant.PRIMARY,
-    to,
-  },
-};
-
-export const Clear: Story = {
-  args: {
-    children: 'Sign Up',
-    variant: LinkVariant.CLEAR,
-    to,
-  },
-};
-
-export const Icon: Story = {
-  args: {
-    children: 'щитпост',
-    variant: LinkVariant.PRIMARY,
-    Icon: () => <AddIcon />,
-    to,
-  },
-};
-
-export const Badge: Story = {
-  args: {
-    children: 'My bets',
-    variant: LinkVariant.CLEAR,
-    badge: 2,
-    to,
-  },
-};
-
-export const Raw: Story = {
-  args: {
-    children: 'Reset password',
-    variant: LinkVariant.RAW,
-    to,
-  },
-};
-
-export const Navigation: Story = {
-  args: {
-    children: 'Explore',
-    variant: LinkVariant.NAVIGATION,
-    to,
-  },
-};
diff --git a/src/shared/ui/link/index.tsx b/src/shared/ui/link/index.tsx
deleted file mode 100644
index 047a340..0000000
--- a/src/shared/ui/link/index.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import {RouteParams} from 'atomic-router';
-import {Link as AtomicLink, LinkProps as AtomicLinkProps} from 'atomic-router-react';
-import classNames from 'classnames';
-import {FC, SVGProps} from 'react';
-
-import {Badge} from '../badge';
-import cls from './index.module.scss';
-
-export enum LinkVariant {
-  PRIMARY = 'primary',
-  RAW = 'raw',
-  CLEAR = 'clear',
-  NAVIGATION = 'navigation',
-}
-
-export interface LinkProps extends AtomicLinkProps<RouteParams> {
-  variant?: LinkVariant;
-  Icon?: FC<SVGProps<SVGSVGElement>>;
-  badge?: number;
-  fullWidth?: boolean;
-  center?: boolean;
-}
-
-export const Link = (props: LinkProps) => {
-  const {
-    variant = LinkVariant.RAW,
-    Icon,
-    to,
-    fullWidth,
-    center,
-    badge,
-    className,
-    activeClassName,
-    children,
-    ...otherProps
-  } = props;
-
-  const mods = {
-    [cls[variant]]: true,
-    [cls.fullWidth]: fullWidth,
-    [cls.center]: center,
-  };
-
-  const activeMods = {
-    [cls.active]: variant === LinkVariant.NAVIGATION,
-  };
-
-  return (
-    <AtomicLink
-      to={to}
-      className={classNames(
-        cls.link,
-        mods,
-        className,
-        'text-foreground hover:text-muted-foreground',
-      )}
-      activeClassName={classNames(cls.link, mods, activeMods, activeClassName)}
-      {...otherProps}
-    >
-      {Icon && <Icon />}
-
-      <div className={cls.wrapper}>
-        {children}
-        {badge !== undefined && (
-          <Badge className="absolute rounded-full px-[0.3rem] py-0.5 border-2 border-background leading-none bottom-[-0.6rem] right-[-0.8rem]">
-            {badge}
-          </Badge>
-        )}
-      </div>
-    </AtomicLink>
-  );
-};
diff --git a/src/shared/ui/magnet-lines.tsx b/src/shared/ui/magnet-lines.tsx
deleted file mode 100644
index a40f15c..0000000
--- a/src/shared/ui/magnet-lines.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import React, {CSSProperties, useEffect, useRef} from 'react';
-
-interface MagnetLinesProps {
-  rows?: number;
-  columns?: number;
-  containerSize?: string;
-  lineColor?: string;
-  lineWidth?: string;
-  lineHeight?: string;
-  baseAngle?: number;
-  className?: string;
-  style?: CSSProperties;
-}
-
-const MagnetLines: React.FC<MagnetLinesProps> = ({
-  rows = 9,
-  columns = 9,
-  containerSize = '80vmin',
-  lineColor = '#efefef',
-  lineWidth = '1vmin',
-  lineHeight = '6vmin',
-  baseAngle = -10,
-  className = '',
-  style = {},
-}) => {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    const items = container.querySelectorAll<HTMLSpanElement>('span');
-
-    const onPointerMove = (pointer: {x: number; y: number}) => {
-      items.forEach((item) => {
-        const rect = item.getBoundingClientRect();
-        const centerX = rect.x + rect.width / 2;
-        const centerY = rect.y + rect.height / 2;
-
-        const b = pointer.x - centerX;
-        const a = pointer.y - centerY;
-        const c = Math.sqrt(a * a + b * b) || 1;
-        const r = ((Math.acos(b / c) * 180) / Math.PI) * (pointer.y > centerY ? 1 : -1);
-
-        item.style.setProperty('--rotate', `${r}deg`);
-      });
-    };
-
-    const handlePointerMove = (e: PointerEvent) => {
-      onPointerMove({x: e.x, y: e.y});
-    };
-
-    window.addEventListener('pointermove', handlePointerMove);
-
-    if (items.length) {
-      const middleIndex = Math.floor(items.length / 2);
-      const rect = items[middleIndex].getBoundingClientRect();
-      onPointerMove({x: rect.x, y: rect.y});
-    }
-
-    return () => {
-      window.removeEventListener('pointermove', handlePointerMove);
-    };
-  }, []);
-
-  const total = rows * columns;
-  const spans = Array.from({length: total}, (_, i) => (
-    <span
-      key={i}
-      className="block origin-center"
-      style={{
-        backgroundColor: lineColor,
-        width: lineWidth,
-        height: lineHeight,
-        //@ts-ignore
-        '--rotate': `${baseAngle}deg`,
-        transform: 'rotate(var(--rotate))',
-        willChange: 'transform',
-      }}
-    />
-  ));
-
-  return (
-    <div
-      ref={containerRef}
-      className={`grid place-items-center ${className}`}
-      style={{
-        gridTemplateColumns: `repeat(${columns}, 1fr)`,
-        gridTemplateRows: `repeat(${rows}, 1fr)`,
-        width: containerSize,
-        height: containerSize,
-        ...style,
-      }}
-    >
-      {spans}
-    </div>
-  );
-};
-
-export default MagnetLines;
diff --git a/src/shared/ui/page/index.tsx b/src/shared/ui/page/index.tsx
index 7890235..186c50f 100644
--- a/src/shared/ui/page/index.tsx
+++ b/src/shared/ui/page/index.tsx
@@ -6,10 +6,7 @@ export const Page = (props: HTMLAttributes<HTMLElement>) => {
 
   return (
     <main
-      className={cn(
-        'flex flex-col justify-center items-center min-h-screen pt-24 pb-56',
-        className,
-      )}
+      className={cn('flex flex-col justify-center items-center mt-10 py-6', className)}
       {...otherProps}
     >
       {children}
diff --git a/src/widgets/discussion/index.tsx b/src/widgets/discussion/index.tsx
index 0d9be3a..df6c1ff 100644
--- a/src/widgets/discussion/index.tsx
+++ b/src/widgets/discussion/index.tsx
@@ -107,10 +107,10 @@ export const Discussion = (props: DiscussionProps) => {
             params={{discussionId: discussion.id}}
             className="hover:text-foreground"
           >
+            <h1 className="text-xl md:text-2xl mb-1 font-extrabold font-[Inter] text-balance text-foreground/90">
+              {title}
+            </h1>
             <div>
-              <h1 className="text-3xl font-extrabold font-[Inter] text-balance mt-2 mb-3 text-foreground/90">
-                {title}
-              </h1>
               <FormattedContent>{content}</FormattedContent>
             </div>
           </ConditionalLink>
@@ -136,7 +136,11 @@ export const Discussion = (props: DiscussionProps) => {
         >
           {expandComments && <Comments subject={discussion} />}
           {user && (expandComments || expandReplyFormSection) && (
-            <div className={cn('w-full h-full absolute top-0 pointer-events-none transition-all')}>
+            <div
+              className={cn(
+                'w-full h-full absolute top-0 overflow-x-clip sm:overflow-x-visible pointer-events-none transition-all',
+              )}
+            >
               <div
                 className={cn(
                   'pt-4 sm:pt-0 -mt-4 sm:mt-0 sticky ml-[0.5px] sm:rounded-b-xl w-full pointer-events-auto sm:ring ring-background sm:shadow-[1.25rem_1.25rem_0_1px_var(--background),-1.25rem_1.25rem_0_1px_var(--background)]',
@@ -145,7 +149,7 @@ export const Discussion = (props: DiscussionProps) => {
               >
                 <div
                   ref={replyFormSectionRef}
-                  className="bg-background/90 backdrop-blur-2xl outline outline-1 outline-border sm:rounded-b-xl overflow-hidden"
+                  className="bg-background/90 backdrop-blur-2xl border-t sm:border-none sm:outline outline-border sm:rounded-b-xl overflow-hidden"
                 >
                   <CommentForm
                     author={user}
diff --git a/src/widgets/footer/index.module.scss b/src/widgets/footer/index.module.scss
deleted file mode 100644
index 000d339..0000000
--- a/src/widgets/footer/index.module.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.footer {
-  backdrop-filter: blur(50px);
-  border-top: 1px solid rgba(255 255 255 / 7%);
-  padding: 30px 0 40px;
-  z-index: 1;
-  height: 205px;
-  margin-top: -205px;
-}
-
-.row {
-  display: flex;
-}
-
-.column {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  align-items: start;
-
-  & > *:first-child {
-    height: 30px;
-    line-height: 30px;
-    margin-bottom: 10px;
-  }
-}
diff --git a/src/widgets/footer/index.tsx b/src/widgets/footer/index.tsx
index a5f13f1..1241a8f 100644
--- a/src/widgets/footer/index.tsx
+++ b/src/widgets/footer/index.tsx
@@ -1,10 +1,78 @@
+import {RouteInstance, RouteParams} from 'atomic-router';
+import {Link} from 'atomic-router-react';
 import {HTMLAttributes} from 'react';
 import {cn} from '~/lib/utils';
 
-import {Container, ContainerSize, Link, LinkVariant, Text, TextSize} from '~/shared/ui';
-
 import Logo from './assets/logo.svg';
-import cls from './index.module.scss';
+
+interface ColumnItem {
+  label: string;
+  route: string | RouteInstance<RouteParams>;
+  openInNewTab?: boolean;
+}
+
+interface Column {
+  title: string;
+  items: ColumnItem[];
+}
+
+const columns: Column[] = [
+  {
+    title: 'Legal',
+    items: [
+      {
+        label: 'Terms of use',
+        route: '/terms-of-use',
+      },
+      {
+        label: 'Platform policies',
+        route: 'https://github.com/crowdparlay/foundation/wiki/Концепция',
+        openInNewTab: true,
+      },
+      {
+        label: 'Privacy',
+        route: '#',
+      },
+    ],
+  },
+  {
+    title: 'Contacts',
+    items: [
+      {
+        label: 'Telegram',
+        route: 'https://t.me/crowdparlay',
+        openInNewTab: true,
+      },
+      {
+        label: 'Twitter',
+        route: '#',
+      },
+      {
+        label: 'Email',
+        route: '#',
+      },
+    ],
+  },
+  {
+    title: 'Developers',
+    items: [
+      {
+        label: 'Source code',
+        route: 'https://github.com/crowdparlay',
+        openInNewTab: true,
+      },
+      {
+        label: 'API reference',
+        route: 'https://bump.sh/undrcrxwn/doc/crowdparlay',
+        openInNewTab: true,
+      },
+      {
+        label: 'Status',
+        route: '/forbidden',
+      },
+    ],
+  },
+];
 
 export type FooterProps = HTMLAttributes<HTMLDivElement>;
 
@@ -12,74 +80,33 @@ export const Footer = (props: FooterProps) => {
   const {className, ...otherProps} = props;
 
   return (
-    <footer
-      className={cn(
-        'h-48 -mt-48 py-6 backdrop-blur-xl supports-[backdrop-filter]:bg-background/60 border-t',
-        className,
-      )}
-      {...otherProps}
-    >
-      <Container size={ContainerSize.L} style={{padding: 0}} className={cls.row}>
-        <Container className={cls.column}>
-          <Text size={TextSize.S} accent={true} Component="h4">
-            Legal
-          </Text>
-          <Link variant={LinkVariant.PRIMARY} to={'/terms-of-use'}>
-            Terms of use
-          </Link>
-          <Link
-            variant={LinkVariant.PRIMARY}
-            to={'https://github.com/crowdparlay/foundation/wiki/Концепция'}
-            target={'_blank'}
-          >
-            Platform policies
-          </Link>
-          <Link variant={LinkVariant.PRIMARY} to={'#'}>
-            Privacy
-          </Link>
-        </Container>
-        <Container className={cls.column}>
-          <Text size={TextSize.S} accent={true} Component="h4">
-            Contacts
-          </Text>
-          <Link variant={LinkVariant.PRIMARY} to={'https://t.me/crowdparlay'} target={'_blank'}>
-            Telegram
-          </Link>
-          <Link variant={LinkVariant.PRIMARY} to={'#'}>
-            Twitter
-          </Link>
-          <Link variant={LinkVariant.PRIMARY} to={'#'}>
-            Email
-          </Link>
-        </Container>
-        <Container className={cls.column}>
-          <Text size={TextSize.S} accent={true} Component="h4">
-            Developers
-          </Text>
-          <Link
-            variant={LinkVariant.PRIMARY}
-            to={'https://github.com/crowdparlay'}
-            target={'_blank'}
-          >
-            Source code
-          </Link>
-          <Link
-            variant={LinkVariant.PRIMARY}
-            to={'https://bump.sh/undrcrxwn/doc/crowdparlay'}
-            target={'_blank'}
-          >
-            API reference
-          </Link>
-          <Link variant={LinkVariant.PRIMARY} to={'/forbidden'}>
-            Status
-          </Link>
-        </Container>
-        <Container className={cls.column}>
-          <Logo />
-          <Text size={TextSize.S}>Copyright © {new Date().getFullYear()} Crowd Parlay</Text>
-          <Text size={TextSize.S}>All rights reserved</Text>
-        </Container>
-      </Container>
+    <footer className={cn('flex items-center px-6 py-8 border-t', className)} {...otherProps}>
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-y-8 mx-auto w-full sm:max-w-xl md:max-w-3xl text-sm">
+        {columns.map(({title, items}) => (
+          <div>
+            <h3 className="leading-7 font-[Inter] font-bold mb-3">{title}</h3>
+            <div className="flex flex-col gap-2 text-muted-foreground">
+              {items.map(({label, route, openInNewTab}, i) => (
+                <Link
+                  key={i}
+                  to={route}
+                  target={openInNewTab ? '_blank' : undefined}
+                  className="w-fit hover:text-foreground underline-offset-4 hover:underline transition-all duration-100"
+                >
+                  {label}
+                </Link>
+              ))}
+            </div>
+          </div>
+        ))}
+        <div className="w-max">
+          <Logo className="flex-1 h-7 w-fit mb-3 invert dark:filter-none" />
+          <div className="space-y-2 text-muted-foreground">
+            <p>Copyright © {new Date().getFullYear()} Crowd Parlay</p>
+            <p>All rights reserved</p>
+          </div>
+        </div>
+      </div>
     </footer>
   );
 };
diff --git a/src/widgets/header/assets/avatar.png b/src/widgets/header/assets/avatar.png
deleted file mode 100644
index f04fce172f488194de4308ad17e54face3cf0224..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 8233
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
b89)3x`VS8KJoD5100000NkvXXu0mjfVmdpx

diff --git a/src/widgets/header/assets/logo-mini.svg b/src/widgets/header/assets/logo-mini.svg
new file mode 100644
index 0000000..f78c659
--- /dev/null
+++ b/src/widgets/header/assets/logo-mini.svg
@@ -0,0 +1,21 @@
+<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 741.44 790.21">
+    <g>
+        <path d="M411 790.21h-80.57c-19.54 0-37.57-8.89-49.46-24.39s-15.82-35.22-10.76-54.09l40.29-150.35c7.41-27.64 31.61-46.21 60.22-46.21s52.81 18.57 60.22 46.21l40.29 150.35c5.06 18.87 1.14 38.59-10.76 54.09s-29.92 24.39-49.46 24.39zm-40.29-244.77c-11.9 0-26.29 6.25-30.99 23.78l-40.29 150.35c-2.6 9.71-.58 19.85 5.54 27.83s15.4 12.55 25.45 12.55h80.57c10.05 0 19.33-4.58 25.45-12.55s8.14-18.12 5.54-27.83l-40.29-150.35c-4.7-17.53-19.09-23.78-30.98-23.78z"
+              id="_Radial_Repeat_"/>
+        <path class="cls-1"
+              d="M102.84 658.73c-2.75 0-5.52-.18-8.3-.55-19.37-2.55-36.08-13.72-45.85-30.64L8.4 557.76c-9.77-16.92-11.08-36.98-3.61-55.03s22.59-31.3 41.46-36.36l150.35-40.29c27.64-7.41 55.82 4.27 70.13 29.05 14.31 24.78 10.33 55.02-9.91 75.26L146.76 640.45c-11.83 11.83-27.5 18.27-43.92 18.27zm110.71-204.65c-2.87 0-5.91.39-9.11 1.25L54.09 495.62c-9.71 2.6-17.49 9.42-21.33 18.71-3.85 9.29-3.17 19.61 1.86 28.31l40.29 69.78c5.03 8.71 13.63 14.45 23.59 15.76 9.96 1.31 19.76-2.01 26.87-9.12L235.43 509c12.83-12.83 11.05-28.42 5.1-38.72-4.86-8.42-14.17-16.19-26.97-16.19z"
+              id="_Radial_Repeat_-2"/>
+        <path class="cls-1"
+              d="M213.17 366.32c-5.47 0-11.03-.72-16.56-2.2L46.26 323.83c-18.87-5.06-33.99-18.31-41.46-36.36s-6.16-38.11 3.61-55.03l40.29-69.78c9.77-16.92 26.48-28.09 45.86-30.64 19.37-2.55 38.41 3.91 52.22 17.73l110.06 110.06c20.23 20.23 24.22 50.48 9.91 75.26-11.44 19.82-31.75 31.25-53.57 31.25zm-8.73-31.44c17.52 4.69 30.13-4.64 36.08-14.95 5.95-10.3 7.73-25.89-5.1-38.72L125.36 171.15c-7.11-7.11-16.91-10.43-26.87-9.12-9.97 1.31-18.57 7.06-23.59 15.76l-40.29 69.78c-5.03 8.71-5.7 19.03-1.86 28.31 3.85 9.29 11.62 16.11 21.33 18.71l150.35 40.29z"
+              id="_Radial_Repeat_-3"/>
+        <path class="cls-1"
+              d="M370.72 275.04c-28.61 0-52.81-18.57-60.22-46.21L270.21 78.48c-5.06-18.87-1.14-38.59 10.76-54.09S310.89 0 330.43 0H411c19.54 0 37.57 8.89 49.46 24.39s15.82 35.22 10.76 54.09l-40.29 150.35c-7.41 27.64-31.61 46.21-60.22 46.21zM339.74 221c4.7 17.53 19.09 23.77 30.98 23.77s26.29-6.25 30.99-23.77L442 70.65c2.6-9.71.58-19.85-5.54-27.83s-15.4-12.55-25.45-12.55h-80.57c-10.05 0-19.33 4.57-25.45 12.55s-8.14 18.12-5.54 27.83L339.74 221z"
+              id="_Radial_Repeat_-4"/>
+        <path class="cls-1"
+              d="M528.26 366.32c-21.81 0-42.12-11.43-53.57-31.25-14.31-24.78-10.32-55.02 9.91-75.26l110.06-110.06c13.82-13.82 32.85-20.28 52.22-17.73 19.37 2.55 36.09 13.72 45.86 30.64l40.29 69.78c9.77 16.92 11.08 36.98 3.61 55.03s-22.59 31.31-41.46 36.36l-150.35 40.29c-5.54 1.48-11.1 2.2-16.56 2.2zm110.41-204.57c-8.45 0-16.51 3.31-22.6 9.4L506.01 281.21c-12.83 12.83-11.05 28.42-5.1 38.72 5.95 10.31 18.55 19.64 36.08 14.95l150.35-40.29c9.71-2.6 17.49-9.42 21.33-18.71 3.85-9.29 3.17-19.61-1.86-28.31l-40.29-69.78c-5.03-8.71-13.63-14.45-23.59-15.76a32.34 32.34 0 0 0-4.27-.28z"
+              id="_Radial_Repeat_-5"/>
+        <path class="cls-1"
+              d="M638.59 658.73c-16.43 0-32.09-6.44-43.92-18.27L484.61 530.4c-20.23-20.23-24.21-50.48-9.91-75.26 14.31-24.78 42.5-36.45 70.13-29.05l150.35 40.29c18.87 5.06 33.99 18.31 41.46 36.36 7.48 18.05 6.16 38.11-3.61 55.03l-40.29 69.78c-9.77 16.92-26.48 28.09-45.86 30.64-2.78.37-5.55.55-8.3.55zM527.87 454.07c-12.8 0-22.11 7.77-26.97 16.19-5.95 10.3-7.74 25.89 5.1 38.72l110.06 110.06c7.11 7.11 16.9 10.43 26.87 9.12 9.97-1.31 18.57-7.06 23.59-15.76l40.29-69.78c5.03-8.71 5.7-19.03 1.86-28.31-3.85-9.29-11.62-16.11-21.33-18.71l-150.35-40.29c-3.21-.86-6.25-1.25-9.11-1.25z"
+              id="_Radial_Repeat_-6"/>
+    </g>
+</svg>
diff --git a/src/widgets/header/assets/notification.svg b/src/widgets/header/assets/notification.svg
deleted file mode 100644
index eea7c54..0000000
--- a/src/widgets/header/assets/notification.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="13" height="15" viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.5 15C6.99254 15 7.46492 14.8025 7.8132 14.4509C8.16148 14.0992 8.35714 13.6224 8.35714 13.1251H4.64286C4.64286 13.6224 4.83852 14.0992 5.1868 14.4509C5.53508 14.8025 6.00745 15 6.5 15ZM6.5 1.79885L5.75993 1.94978C4.92046 2.12245 4.16588 2.58265 3.62389 3.25248C3.0819 3.9223 2.78581 4.76061 2.78571 5.62551C2.78571 6.21423 2.66129 7.68509 2.3595 9.13344C2.21093 9.85247 2.01036 10.6015 1.74386 11.2502H11.2561C10.9896 10.6015 10.79 9.8534 10.6405 9.13344C10.3387 7.68509 10.2143 6.21423 10.2143 5.62551C10.214 4.76077 9.91778 3.92268 9.37582 3.25305C8.83385 2.58342 8.07938 2.12336 7.24007 1.95071L6.5 1.79885ZM12.2757 11.2502C12.4828 11.6692 12.7224 12.0011 13 12.1877H0C0.277643 12.0011 0.517214 11.6692 0.724286 11.2502C1.56 9.5628 1.85714 6.45047 1.85714 5.62551C1.85714 3.35689 3.45429 1.46324 5.57607 1.03108C5.56311 0.900728 5.57736 0.769084 5.61789 0.644635C5.65842 0.520186 5.72434 0.405695 5.81139 0.308545C5.89845 0.211396 6.0047 0.133745 6.12331 0.0806014C6.24191 0.0274574 6.37024 0 6.5 0C6.62976 0 6.75809 0.0274574 6.87669 0.0806014C6.9953 0.133745 7.10155 0.211396 7.18861 0.308545C7.27566 0.405695 7.34158 0.520186 7.38211 0.644635C7.42264 0.769084 7.43689 0.900728 7.42393 1.03108C8.47348 1.2466 9.41699 1.82168 10.0947 2.65896C10.7724 3.49623 11.1427 4.54423 11.1429 5.62551C11.1429 6.45047 11.44 9.5628 12.2757 11.2502Z" fill="currentColor"/>
-</svg>
diff --git a/src/widgets/header/index.module.scss b/src/widgets/header/index.module.scss
deleted file mode 100644
index 0caa7ba..0000000
--- a/src/widgets/header/index.module.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-.header {
-  backdrop-filter: blur(50px);
-  border-bottom: 1px solid rgba(255 255 255 / 7%);
-  display: flex;
-  justify-content: space-between;
-  position: fixed;
-  width: 100%;
-  z-index: 1;
-  height: 60px;
-}
-
-.row {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.linksContainer {
-  display: flex;
-  gap: 35px;
-  margin-left: 30px;
-}
-
-.icon {
-  color: var(--color-white);
-}
-
-.button {
-  $size: 60px;
-
-  min-width: $size;
-  width: $size;
-  height: $size;
-  padding: 0;
-  justify-content: center;
-  border-radius: 0;
-}
-
-.logo {
-  height: 60px;
-  padding: 20px;
-  opacity: 1 !important;
-}
-
-.search {
-  width: 300px;
-
-  & > input {
-    border-width: 1px;
-    background: rgba(255 255 255 / 3%);
-
-    &:hover {
-      border-color: rgba(255 255 255 / 3%) !important;
-    }
-  }
-}
-
-.authorization {
-  display: flex;
-  gap: 12px;
-  margin-right: 12px;
-}
diff --git a/src/widgets/header/index.tsx b/src/widgets/header/index.tsx
index 9ca705c..17a020e 100644
--- a/src/widgets/header/index.tsx
+++ b/src/widgets/header/index.tsx
@@ -1,5 +1,7 @@
-import {RouteInstance} from 'atomic-router';
+import {Link} from 'atomic-router-react';
 import {useUnit} from 'effector-react';
+import {Bell, ChevronDown} from 'lucide-react';
+import {cn} from '~/lib/utils';
 
 import {ModeToggle} from '~/widgets/mode-toggle';
 
@@ -7,14 +9,11 @@ import {UserEntity} from '~/entities/types';
 
 import {routes} from '~/shared/routes';
 import {$user} from '~/shared/session';
-import {Avatar, Input, Link, LinkVariant} from '~/shared/ui';
+import {Avatar} from '~/shared/ui';
 import {Button} from '~/shared/ui/button';
-import ArrowIcon from '~/shared/ui/icon/assets/arrow.svg';
 
+import LogoMini from './assets/logo-mini.svg';
 import Logo from './assets/logo.svg';
-import NotificationIcon from './assets/notification.svg';
-import cls from './index.module.scss';
-import {$search, searchChange} from './model';
 
 export interface HeaderProps {
   forceUser?: UserEntity;
@@ -22,48 +21,37 @@ export interface HeaderProps {
 
 export const Header = (props: HeaderProps) => {
   const {forceUser} = props;
-
-  const [user, search, onSearchChange] = useUnit([$user, $search, searchChange]);
+  const user = useUnit($user);
 
   return (
-    <header className="fixed z-20 w-full h-16 flex flex-nowrap justify-between bg-background border-b overflow-hidden">
-      <div className="flex items-center">
-        <Link className={cls.logo} variant={LinkVariant.CLEAR} to={routes.home}>
-          <Logo className="invert dark:filter-none" />
+    <header className="fixed z-20 w-full h-16 flex flex-nowrap justify-between bg-background border-b">
+      <div className="flex grow-1 shrink-0">
+        <Link to={routes.home} className="flex items-center invert dark:filter-none">
+          <Logo className="hidden md:block ps-6 me-4" />
+          <LogoMini className="md:hidden h-full p-3 pe-4" />
         </Link>
-
-        <Input
-          value={search}
-          onChange={(e) => onSearchChange(e.target.value)}
-          placeholder="Search"
-          className={cls.search}
-        />
-
-        <div className="space-x-8 mx-8">
-          <Link variant={LinkVariant.NAVIGATION} to={routes.explore}>
-            Explore
-          </Link>
-          <Link variant={LinkVariant.NAVIGATION} badge={2} to={routes.bets}>
-            My bets
-          </Link>
-          <Link variant={LinkVariant.NAVIGATION} to={routes.events}>
-            My events
-          </Link>
-          <Link variant={LinkVariant.NAVIGATION} to={routes.bookmarks}>
-            Bookmarks
-          </Link>
-        </div>
       </div>
-
-      <div className="flex items-center gap-4 pe-3">
+      <div
+        className={cn(
+          'flex h-full font-medium text-sm',
+          'w-full sm:max-w-xl md:max-w-3xl',
+          '[&>*]:flex [&>*]:items-center [&>*]:h-full [&>*]:px-4 [&>*]:hover:opacity-80',
+          'xl:[&>*]:first:ps-0',
+        )}
+      >
+        <Link to={routes.explore}>Discussions</Link>
+        <Link to={routes.profiles}>Profiles</Link>
+      </div>
+      <div className="flex grow-1 shrink-0 justify-end overflow-hidden items-center gap-4 pe-3">
         <ModeToggle />
         {(forceUser ?? user) ? (
           <>
             <Button variant="ghost" size="icon">
-              <NotificationIcon />
+              <Bell />
             </Button>
             <Link
-              to={routes.profile as RouteInstance<any>}
+              className="shrink-0"
+              to={routes.profile}
               params={{
                 username: user!.username,
               }}
@@ -71,7 +59,7 @@ export const Header = (props: HeaderProps) => {
               <Avatar user={user} className="rounded-full size-8" />
             </Link>
             <Button variant="ghost" size="icon">
-              <ArrowIcon />
+              <ChevronDown />
             </Button>
           </>
         ) : (
diff --git a/src/widgets/header/model.ts b/src/widgets/header/model.ts
deleted file mode 100644
index efea7cd..0000000
--- a/src/widgets/header/model.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import {createEvent, createStore} from 'effector';
-
-export const searchChange = createEvent<string>();
-export const $search = createStore<string>('').on(searchChange, (_, payload) => payload);
diff --git a/vite.config.ts b/vite.config.ts
index c93f100..05ed936 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -23,7 +23,6 @@ export default defineConfig({
       {find: '@', replacement: '/src'},
     ],
   },
-
   server: {
     proxy: {
       '/api': {

From ceec0d1d28f50dd60e4270c8a79500edfa03f958 Mon Sep 17 00:00:00 2001
From: undrcrxwn <69521267+undrcrxwn@users.noreply.github.com>
Date: Tue, 24 Jun 2025 21:08:48 +0300
Subject: [PATCH 2/3] refactor: fix tsc errors

---
 src/pages/edit-profile/page.tsx       | 21 +-------
 src/pages/sign-in/page.tsx            |  4 --
 src/pages/sign-up/page.tsx            | 10 ----
 src/shared/ui/input/index.stories.tsx | 70 ---------------------------
 4 files changed, 1 insertion(+), 104 deletions(-)
 delete mode 100644 src/shared/ui/input/index.stories.tsx

diff --git a/src/pages/edit-profile/page.tsx b/src/pages/edit-profile/page.tsx
index dab7c95..f5e4763 100644
--- a/src/pages/edit-profile/page.tsx
+++ b/src/pages/edit-profile/page.tsx
@@ -1,5 +1,4 @@
 import {useForm} from 'effector-forms';
-import {useUnit} from 'effector-react';
 
 import {Profile} from '~/features/profile';
 
@@ -7,13 +6,11 @@ import {UserEntity} from '~/entities/types';
 
 import {Container, ContainerSize, CustomButton, Input, Page, Text, TextSize} from '~/shared/ui';
 
-import {$form, avatarFileChanged} from './model';
+import {$form} from './model';
 import cls from './page.module.scss';
 
 export const EditProfilePage = () => {
   const {fields, eachValid, submit} = useForm($form);
-  const onAvatarFileChanged = useUnit(avatarFileChanged);
-
   return (
     <Page>
       <Container size={ContainerSize.M}>
@@ -23,54 +20,38 @@ export const EditProfilePage = () => {
 
         <form className={cls.grid} onSubmit={() => submit()}>
           <Input
-            label="Display name"
             placeholder="Display name"
             value={fields.displayName?.value}
             onChange={(e) => fields.displayName?.onChange(e.target.value)}
-            isInvalid={fields.displayName?.hasError()}
-            errorMessage={fields.displayName?.errorText()}
           />
           <Input
-            label="Username"
             placeholder="Username"
             value={fields.username?.value}
             onChange={(e) => fields.username?.onChange(e.target.value)}
-            isInvalid={fields.username?.hasError()}
-            errorMessage={fields.username?.errorText()}
           />
 
           <Input
-            label="Current password"
             placeholder="Current password"
             value={fields.password?.value}
             onChange={(e) => fields.password?.onChange(e.target.value)}
-            isInvalid={fields.password?.hasError()}
-            errorMessage={fields.password?.errorText()}
             type="password"
             name="password"
           />
           <Input
-            label="New password"
             placeholder="New password"
             value={fields.newPassword?.value}
             onChange={(e) => fields.newPassword?.onChange(e.target.value)}
-            isInvalid={fields.newPassword?.hasError()}
-            errorMessage={fields.newPassword?.errorText()}
             type="password"
             name="new_password"
           />
 
           <Input
-            label="Avatar URL"
             placeholder="Avatar URL"
             readOnly={true}
             value={fields.avatarUrl?.value}
-            isInvalid={fields.avatarUrl?.hasError()}
-            errorMessage={fields.avatarUrl?.errorText()}
             type="file"
             accept="image/png, image/jpeg"
             name="avatar_url"
-            onFileChanged={onAvatarFileChanged}
           />
           <div className={cls.row}>
             <Profile
diff --git a/src/pages/sign-in/page.tsx b/src/pages/sign-in/page.tsx
index 6206663..9efff12 100644
--- a/src/pages/sign-in/page.tsx
+++ b/src/pages/sign-in/page.tsx
@@ -40,8 +40,6 @@ export const SignInPage = () => {
             name="username_or_email"
             value={fields.username?.value}
             onChange={(e) => fields.username?.onChange(e.target.value)}
-            isInvalid={fields.username?.hasError()}
-            errorMessage={fields.username?.errorText()}
           />
           <Input
             disabled={loading}
@@ -50,8 +48,6 @@ export const SignInPage = () => {
             name="password"
             value={fields.password?.value}
             onChange={(e) => fields.password?.onChange(e.target.value)}
-            isInvalid={fields.password?.hasError()}
-            errorMessage={fields.password?.errorText()}
           />
 
           {formError && <Attention>{formError}</Attention>}
diff --git a/src/pages/sign-up/page.tsx b/src/pages/sign-up/page.tsx
index 789b8e9..fa07261 100644
--- a/src/pages/sign-up/page.tsx
+++ b/src/pages/sign-up/page.tsx
@@ -44,8 +44,6 @@ export const SignUpPage = () => {
               name="email"
               value={fields.email?.value}
               onChange={(e) => fields.email?.onChange(e.target.value)}
-              isInvalid={fields.email?.hasError()}
-              errorMessage={fields.email?.errorText()}
             />
           )}
 
@@ -54,16 +52,12 @@ export const SignUpPage = () => {
             placeholder="Username"
             value={fields.username?.value}
             onChange={(e) => fields.username?.onChange(e.target.value)}
-            isInvalid={fields.username?.hasError()}
-            errorMessage={fields.username?.errorText()}
           />
           <Input
             disabled={loading}
             placeholder="Display name"
             value={fields.display_name?.value}
             onChange={(e) => fields.display_name?.onChange(e.target.value)}
-            isInvalid={fields.display_name?.hasError()}
-            errorMessage={fields.display_name?.errorText()}
           />
 
           {provider === null && (
@@ -74,8 +68,6 @@ export const SignUpPage = () => {
               name="password"
               value={fields.password?.value}
               onChange={(e) => fields.password?.onChange(e.target.value)}
-              isInvalid={fields.password?.hasError()}
-              errorMessage={fields.password?.errorText()}
             />
           )}
           {provider === null && (
@@ -86,8 +78,6 @@ export const SignUpPage = () => {
               name="confirm_password"
               value={fields.confirm_password?.value}
               onChange={(e) => fields.confirm_password?.onChange(e.target.value)}
-              isInvalid={fields.confirm_password?.hasError()}
-              errorMessage={fields.confirm_password?.errorText()}
             />
           )}
 
diff --git a/src/shared/ui/input/index.stories.tsx b/src/shared/ui/input/index.stories.tsx
deleted file mode 100644
index 15f6232..0000000
--- a/src/shared/ui/input/index.stories.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-
-import {Input} from '~/shared/ui';
-
-import {PaddingDecorator} from '../../decorators';
-
-const meta: Meta<typeof Input> = {
-  title: 'shared/Input',
-  component: Input,
-  tags: ['autodocs'],
-  decorators: [PaddingDecorator(40, 40)],
-};
-
-export default meta;
-type Story = StoryObj<typeof Input>;
-
-export const Default: Story = {
-  args: {
-    placeholder: 'Email',
-  },
-};
-
-export const Password: Story = {
-  args: {
-    placeholder: 'Password',
-    defaultValue: 'toor',
-    type: 'password',
-  },
-};
-
-export const Hover: Story = {
-  args: {
-    forceHover: true,
-    placeholder: 'Email',
-  },
-};
-
-export const WithValue: Story = {
-  args: {
-    placeholder: 'Email',
-    defaultValue: 'mere1y@split-team.com',
-  },
-};
-
-export const Invalid: Story = {
-  args: {
-    placeholder: 'Email',
-    defaultValue: 'mere1y@',
-    isInvalid: true,
-    errorMessage: 'Invalid mail provider',
-  },
-};
-
-export const PasswordInvalid: Story = {
-  args: {
-    placeholder: 'Email',
-    defaultValue: 'toor',
-    type: 'password',
-    isInvalid: true,
-    errorMessage: 'Password must be unique',
-  },
-};
-
-export const WithLabel: Story = {
-  args: {
-    placeholder: 'Email',
-    defaultValue: 'mere1y@split-team.com',
-    label: 'Email',
-  },
-};

From d8c6aa1faa9cfae213ffb76e7c4d279f581727c2 Mon Sep 17 00:00:00 2001
From: undrcrxwn <69521267+undrcrxwn@users.noreply.github.com>
Date: Tue, 24 Jun 2025 22:02:43 +0300
Subject: [PATCH 3/3] feat: redesign sign-in and sign-up pages

---
 src/pages/sign-in/page.tsx   | 64 +++++++++++-------------------------
 src/pages/sign-up/page.tsx   | 50 ++++++++++++----------------
 src/shared/ui/link.tsx       | 29 ++++++++++++++++
 src/widgets/footer/index.tsx | 12 +++----
 4 files changed, 73 insertions(+), 82 deletions(-)
 create mode 100644 src/shared/ui/link.tsx

diff --git a/src/pages/sign-in/page.tsx b/src/pages/sign-in/page.tsx
index 9efff12..ef74664 100644
--- a/src/pages/sign-in/page.tsx
+++ b/src/pages/sign-in/page.tsx
@@ -1,19 +1,10 @@
-import {Link} from 'atomic-router-react';
 import {useForm} from 'effector-forms';
 import {useUnit} from 'effector-react';
 
 import {routes} from '~/shared/routes';
-import {
-  Attention,
-  ButtonVariant,
-  Container,
-  ContainerSize,
-  CustomButton,
-  Input,
-  Page,
-  Text,
-  TextSize,
-} from '~/shared/ui';
+import {Attention, Input, Page} from '~/shared/ui';
+import {Button} from '~/shared/ui/button';
+import {Link} from '~/shared/ui/link';
 
 import GoogleIcon from './assets/google.svg';
 import {$form, $formError, $loading, signInWithGoogleClicked} from './model';
@@ -22,16 +13,12 @@ import cls from './page.module.scss';
 export const SignInPage = () => {
   const {fields, submit, eachValid} = useForm($form);
   const [loading, formError] = useUnit([$loading, $formError]);
-
   const [onSignInWithGoogleClicked] = useUnit([signInWithGoogleClicked]);
 
   return (
-    <Page>
-      <Container size={ContainerSize.S} className={cls.container}>
-        <Text center={true} size={TextSize.XL} className={cls.title} Component="h1">
-          Sign in
-        </Text>
-
+    <Page className="flex-1 py-16">
+      <div className="w-full max-w-xs text-center space-y-3">
+        <h1 className="text-5xl font-[Inter] font-bold mb-12">Sign in</h1>
         <form className={cls.list} onSubmit={() => submit()}>
           <Input
             autoFocus={true}
@@ -49,36 +36,23 @@ export const SignInPage = () => {
             value={fields.password?.value}
             onChange={(e) => fields.password?.onChange(e.target.value)}
           />
-
           {formError && <Attention>{formError}</Attention>}
-
-          <CustomButton disabled={loading || !eachValid} type="submit">
+          <Button disabled={loading || !eachValid} type="submit">
             Proceed
-          </CustomButton>
+          </Button>
         </form>
-
-        <div className={cls.external}>
-          <Text center={true} className={cls.or}>
-            or
-          </Text>
-
-          <div className={cls.list}>
-            <CustomButton
-              onClick={onSignInWithGoogleClicked}
-              variant={ButtonVariant.SECONDARY}
-              className={cls.button}
-            >
-              <GoogleIcon />
-              Proceed with Google
-            </CustomButton>
-          </div>
-
-          <div className={cls.list}>
-            <Link to={routes.auth.resetPassword}>Reset password</Link>
-            <Link to={routes.auth.signUp}>Sign up</Link>
-          </div>
+        <p className="text-muted-foreground">or</p>
+        <div className={cls.list}>
+          <Button onClick={onSignInWithGoogleClicked} variant="outline">
+            <GoogleIcon />
+            Sign in with Google
+          </Button>
+        </div>
+        <div className="flex flex-col items-center gap-3">
+          <Link to={routes.auth.resetPassword}>Reset password</Link>
+          <Link to={routes.auth.signUp}>Sign up</Link>
         </div>
-      </Container>
+      </div>
     </Page>
   );
 };
diff --git a/src/pages/sign-up/page.tsx b/src/pages/sign-up/page.tsx
index fa07261..22839be 100644
--- a/src/pages/sign-up/page.tsx
+++ b/src/pages/sign-up/page.tsx
@@ -1,22 +1,16 @@
-import {Link} from 'atomic-router-react';
 import {useForm} from 'effector-forms';
 import {useUnit} from 'effector-react';
 
+import GoogleIcon from '~/pages/sign-in/assets/google.svg';
+
 import {Profile} from '~/features/profile';
 
 import {UserEntity} from '~/entities/types';
 
 import {routes} from '~/shared/routes';
-import {
-  Attention,
-  Container,
-  ContainerSize,
-  CustomButton,
-  Input,
-  Page,
-  Text,
-  TextSize,
-} from '~/shared/ui';
+import {Attention, Input, Page} from '~/shared/ui';
+import {Button} from '~/shared/ui/button';
+import {Link} from '~/shared/ui/link';
 
 import {$form, $formError, $loading, $provider} from './model';
 import cls from './page.module.scss';
@@ -28,12 +22,9 @@ export const SignUpPage = () => {
   const [provider] = useUnit([$provider]);
 
   return (
-    <Page>
-      <Container size={ContainerSize.S} className={cls.container}>
-        <Text center={true} size={TextSize.XL} className={cls.title} Component="h1">
-          Sign up
-        </Text>
-
+    <Page className="flex-1 py-16">
+      <div className="w-full max-w-xs text-center space-y-3">
+        <h1 className="text-5xl font-[Inter] font-bold mb-12">Sign up</h1>
         <form className={cls.list} onSubmit={() => submit()}>
           {provider === null && (
             <Input
@@ -46,7 +37,6 @@ export const SignUpPage = () => {
               onChange={(e) => fields.email?.onChange(e.target.value)}
             />
           )}
-
           <Input
             disabled={loading}
             placeholder="Username"
@@ -59,7 +49,6 @@ export const SignUpPage = () => {
             value={fields.display_name?.value}
             onChange={(e) => fields.display_name?.onChange(e.target.value)}
           />
-
           {provider === null && (
             <Input
               disabled={loading}
@@ -80,29 +69,32 @@ export const SignUpPage = () => {
               onChange={(e) => fields.confirm_password?.onChange(e.target.value)}
             />
           )}
-
           <Profile
+            className="text-start pointer-events-none"
             variant="md"
             user={
               new UserEntity({
                 id: '',
-                username: fields.username.value,
-                displayName: fields.display_name.value,
+                username: fields.username.value === '' ? 'username' : fields.username.value,
+                displayName:
+                  fields.display_name.value === '' ? 'Display name' : fields.display_name.value,
               })
             }
           />
-
           {formError && <Attention>{formError}</Attention>}
-
-          <CustomButton disabled={loading || !eachValid} type="submit" center={true}>
+          <Button disabled={loading || !eachValid} type="submit">
             Join
-          </CustomButton>
+          </Button>
         </form>
-
+        <p className="text-muted-foreground">or</p>
         <div className={cls.list}>
-          <Link to={routes.auth.signIn}>I already have an account</Link>
+          <Button variant="outline">
+            <GoogleIcon />
+            Sign up with Google
+          </Button>
         </div>
-      </Container>
+        <Link to={routes.auth.signIn}>I already have an account</Link>
+      </div>
     </Page>
   );
 };
diff --git a/src/shared/ui/link.tsx b/src/shared/ui/link.tsx
new file mode 100644
index 0000000..4e6282a
--- /dev/null
+++ b/src/shared/ui/link.tsx
@@ -0,0 +1,29 @@
+import {RouteInstance, RouteParams, RouteQuery} from 'atomic-router';
+import {Link as AtomicLink} from 'atomic-router-react';
+import React from 'react';
+import {cn} from '~/lib/utils';
+
+export const Link = <Params extends RouteParams>({
+  className,
+  children,
+  ...otherProps
+}: {
+  to: string | RouteInstance<Params>;
+  params?: Params | undefined;
+  query?: RouteQuery | undefined;
+  className?: string | undefined;
+  activeClassName?: string | undefined;
+  inactiveClassName?: string | undefined;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    ref?: React.ForwardedRef<HTMLAnchorElement> | undefined;
+  }) => (
+  <AtomicLink
+    className={cn(
+      'w-fit text-muted-foreground hover:text-foreground underline-offset-4 hover:underline transition-all duration-100',
+      className,
+    )}
+    {...otherProps}
+  >
+    {children}
+  </AtomicLink>
+);
diff --git a/src/widgets/footer/index.tsx b/src/widgets/footer/index.tsx
index 1241a8f..8f98505 100644
--- a/src/widgets/footer/index.tsx
+++ b/src/widgets/footer/index.tsx
@@ -1,8 +1,9 @@
 import {RouteInstance, RouteParams} from 'atomic-router';
-import {Link} from 'atomic-router-react';
 import {HTMLAttributes} from 'react';
 import {cn} from '~/lib/utils';
 
+import {Link} from '~/shared/ui/link';
+
 import Logo from './assets/logo.svg';
 
 interface ColumnItem {
@@ -85,14 +86,9 @@ export const Footer = (props: FooterProps) => {
         {columns.map(({title, items}) => (
           <div>
             <h3 className="leading-7 font-[Inter] font-bold mb-3">{title}</h3>
-            <div className="flex flex-col gap-2 text-muted-foreground">
+            <div className="flex flex-col gap-2">
               {items.map(({label, route, openInNewTab}, i) => (
-                <Link
-                  key={i}
-                  to={route}
-                  target={openInNewTab ? '_blank' : undefined}
-                  className="w-fit hover:text-foreground underline-offset-4 hover:underline transition-all duration-100"
-                >
+                <Link key={i} to={route} target={openInNewTab ? '_blank' : undefined}>
                   {label}
                 </Link>
               ))}