feat: onboarding ui flow (#464)

* feat: onboarding ui flow

* fix: route naming and auth

* fix: clean unused imports

* fix: remove react.fc

* fix: infra dev remove package.json

* fix: remove usefull memoization

* fix: button stories

* fix: use type instead of interface

* fix: remove debug

front/src/App.tsx

@@ -1,10 +1,15 @@
-import { Navigate, Route, Routes } from 'react-router-dom';
+import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
+import { AnimatePresence, LayoutGroup } from 'framer-motion';
 
 import { useTrackPageView } from '@/analytics/hooks/useTrackPageView';
 import { RequireAuth } from '@/auth/components/RequireAuth';
 import { RequireNotAuth } from '@/auth/components/RequireNotAuth';
+import { AuthModal } from '@/auth/components/ui/Modal';
 import { useGoToHotkeys } from '@/hotkeys/hooks/useGoToHotkeys';
+import { AuthLayout } from '@/ui/layout/AuthLayout';
 import { DefaultLayout } from '@/ui/layout/DefaultLayout';
+import { CreateProfile } from '~/pages/auth/CreateProfile';
+import { CreateWorkspace } from '~/pages/auth/CreateWorkspace';
 import { Index } from '~/pages/auth/Index';
 import { PasswordLogin } from '~/pages/auth/PasswordLogin';
 import { Verify } from '~/pages/auth/Verify';
@@ -13,6 +18,29 @@ import { Opportunities } from '~/pages/opportunities/Opportunities';
 import { People } from '~/pages/people/People';
 import { SettingsProfile } from '~/pages/settings/SettingsProfile';
 
+/**
+ * AuthRoutes is used to allow transitions between auth pages with framer-motion.
+ */
+function AuthRoutes() {
+  const location = useLocation();
+
+  return (
+    <LayoutGroup>
+      <AuthModal>
+        <AnimatePresence mode="wait">
+          <Routes location={location} key={location.pathname}>
+            <Route path="" element={<Index />} />
+            <Route path="callback" element={<Verify />} />
+            <Route path="password-login" element={<PasswordLogin />} />
+            <Route path="create/workspace" element={<CreateWorkspace />} />
+            <Route path="create/profile" element={<CreateProfile />} />
+          </Routes>
+        </AnimatePresence>
+      </AuthModal>
+    </LayoutGroup>
+  );
+}
+
 export function App() {
   useGoToHotkeys('p', '/people');
   useGoToHotkeys('c', '/companies');
@@ -49,11 +77,9 @@ export function App() {
           path="auth/*"
           element={
             <RequireNotAuth>
-              <Routes>
-                <Route path="" element={<Index />} />
-                <Route path="callback" element={<Verify />} />
-                <Route path="password-login" element={<PasswordLogin />} />
-              </Routes>
+              <AuthLayout>
+                <AuthRoutes />
+              </AuthLayout>
             </RequireNotAuth>
           }
         />

front/src/AppWrapper.tsx

@@ -1,23 +0,0 @@
-import { StrictMode } from 'react';
-import { BrowserRouter } from 'react-router-dom';
-
-import { ApolloProvider } from './providers/apollo/ApolloProvider';
-import { AppThemeProvider } from './providers/theme/AppThemeProvider';
-import { UserProvider } from './providers/user/UserProvider';
-import { App } from './App';
-
-export function AppWrapper() {
-  return (
-    <ApolloProvider>
-      <BrowserRouter>
-        <AppThemeProvider>
-          <StrictMode>
-            <UserProvider>
-              <App />
-            </UserProvider>
-          </StrictMode>
-        </AppThemeProvider>
-      </BrowserRouter>
-    </ApolloProvider>
-  );
-}

front/src/index.css

@@ -1,6 +1,6 @@
 body {
   margin: 0;
-  font-family: 'Inter';
+  font-family: 'Inter', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

front/src/index.tsx

@@ -1,12 +1,16 @@
-import React from 'react';
+import React, { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
 
 import { ThemeType } from '@/ui/themes/themes';
 
 import '@emotion/react';
 
-import { AppWrapper } from './AppWrapper';
+import { ApolloProvider } from './providers/apollo/ApolloProvider';
+import { AppThemeProvider } from './providers/theme/AppThemeProvider';
+import { UserProvider } from './providers/user/UserProvider';
+import { App } from './App';
 
 import './index.css';
 
@@ -16,7 +20,17 @@ const root = ReactDOM.createRoot(
 
 root.render(
   <RecoilRoot>
-    <AppWrapper />
+    <ApolloProvider>
+      <BrowserRouter>
+        <AppThemeProvider>
+          <StrictMode>
+            <UserProvider>
+              <App />
+            </UserProvider>
+          </StrictMode>
+        </AppThemeProvider>
+      </BrowserRouter>
+    </ApolloProvider>
   </RecoilRoot>,
 );
 

front/src/modules/auth/components/ui/FooterNote.tsx

@@ -1,20 +1,16 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
-type OwnProps = {
-  children: React.ReactNode;
-};
+type Props = React.ComponentProps<'div'>;
 
 const StyledContainer = styled.div`
   align-items: center;
   color: ${({ theme }) => theme.font.color.tertiary};
   display: flex;
   font-size: ${({ theme }) => theme.font.size.sm}px;
-  padding-left: ${({ theme }) => theme.spacing(14)};
-  padding-right: ${({ theme }) => theme.spacing(14)};
   text-align: center;
 `;
 
-export function FooterNote({ children }: OwnProps): JSX.Element {
-  return <StyledContainer>{children}</StyledContainer>;
+export function FooterNote(props: Props) {
+  return <StyledContainer {...props} />;
 }

front/src/modules/auth/components/ui/InputLabel.tsx

@@ -1,16 +0,0 @@
-import styled from '@emotion/styled';
-
-type OwnProps = {
-  label: string;
-  subLabel?: string;
-};
-
-const StyledContainer = styled.div`
-  font-weight: ${({ theme }) => theme.font.weight.medium};
-  margin-bottom: ${({ theme }) => theme.spacing(4)};
-  margin-top: ${({ theme }) => theme.spacing(4)};
-`;
-
-export function InputLabel({ label, subLabel }: OwnProps): JSX.Element {
-  return <StyledContainer>{label}</StyledContainer>;
-}

front/src/modules/auth/components/ui/Logo.tsx

@@ -1,18 +1,21 @@
 import styled from '@emotion/styled';
 
+type Props = React.ComponentProps<'div'>;
+
 const StyledLogo = styled.div`
-  height: 40px;
-  width: 40px;
+  height: 48px;
 
   img {
     height: 100%;
     width: 100%;
   }
+
+  width: 48px;
 `;
 
-export function Logo(): JSX.Element {
+export function Logo(props: Props) {
   return (
-    <StyledLogo>
+    <StyledLogo {...props}>
       <img src="/icons/android/android-launchericon-192-192.png" alt="logo" />
     </StyledLogo>
   );

front/src/modules/auth/components/ui/Modal.tsx

@@ -3,23 +3,23 @@ import styled from '@emotion/styled';
 
 import { Modal as UIModal } from '@/ui/components/modal/Modal';
 
-type OwnProps = {
-  children: React.ReactNode;
-};
+type Props = React.ComponentProps<'div'>;
 
 const StyledContainer = styled.div`
   align-items: center;
   display: flex;
   flex-direction: column;
-  padding-bottom: ${({ theme }) => theme.spacing(10)};
-  padding-top: ${({ theme }) => theme.spacing(10)};
-  width: 400px;
+  padding: ${({ theme }) => theme.spacing(10)};
+  width: calc(400px - ${({ theme }) => theme.spacing(10 * 2)});
+  > * + * {
+    margin-top: ${({ theme }) => theme.spacing(8)};
+  }
 `;
 
-export function Modal({ children }: OwnProps): JSX.Element {
+export function AuthModal({ children, ...restProps }: Props) {
   return (
-    <UIModal>
-      <StyledContainer>{children}</StyledContainer>
+    <UIModal isOpen={true}>
+      <StyledContainer {...restProps}>{children}</StyledContainer>
     </UIModal>
   );
 }

front/src/modules/auth/components/ui/Section.tsx

@@ -0,0 +1,31 @@
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  title: string;
+  description?: string;
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledTitle = styled.span`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+`;
+
+const StyledDescription = styled.span`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  margin-top: ${({ theme }) => theme.spacing(1)};
+`;
+
+export function Section({ title, description }: OwnProps): JSX.Element {
+  return (
+    <StyledContainer>
+      <StyledTitle>{title}</StyledTitle>
+      {description && <StyledDescription>{description}</StyledDescription>}
+    </StyledContainer>
+  );
+}

front/src/modules/auth/components/ui/Title.tsx

@@ -1,16 +1,28 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
-type OwnProps = {
-  children: React.ReactNode;
+import { AnimatedTextWord } from '@/ui/components/motion/AnimatedTextWord';
+
+type Props = React.PropsWithChildren & {
+  animate?: boolean;
 };
 
 const StyledTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
   font-size: ${({ theme }) => theme.font.size.xl};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  margin-top: ${({ theme }) => theme.spacing(10)};
 `;
 
-export function Title({ children }: OwnProps): JSX.Element {
+const StyledAnimatedTextWord = styled(AnimatedTextWord)`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-size: ${({ theme }) => theme.font.size.xl};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+`;
+
+export function Title({ children, animate = false }: Props) {
+  if (animate && typeof children === 'string') {
+    return <StyledAnimatedTextWord text={children} />;
+  }
+
   return <StyledTitle>{children}</StyledTitle>;
 }

front/src/modules/ui/components/board/Board.tsx

@@ -10,12 +10,12 @@ export const StyledBoard = styled.div`
   width: 100%;
 `;
 
-export interface Column {
+export type Column = {
   id: string;
   title: string;
   colorCode?: string;
   itemKeys: string[];
-}
+};
 
 export function getOptimisticlyUpdatedBoard(
   board: Column[],

front/src/modules/ui/components/buttons/Button.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+import { rgba } from '@/ui/themes/colors';
+
+type Variant =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'tertiaryBold'
+  | 'tertiaryLight'
+  | 'danger';
+
+type Size = 'medium' | 'small';
+
+type Props = {
+  icon?: React.ReactNode;
+  title: string;
+  fullWidth?: boolean;
+  variant?: Variant;
+  size?: Size;
+} & React.ComponentProps<'button'>;
+
+const StyledButton = styled.button<
+  Pick<Props, 'fullWidth' | 'variant' | 'size'>
+>`
+  align-items: center;
+  background: ${({ theme, variant, disabled }) => {
+    switch (variant) {
+      case 'primary':
+        if (disabled) {
+          return rgba(theme.color.blue, 0.4);
+        } else {
+          return theme.color.blue;
+        }
+      default:
+        return theme.background.primary;
+    }
+  }};
+  border: ${({ theme, variant }) => {
+    switch (variant) {
+      case 'primary':
+      case 'secondary':
+        return `1px solid ${theme.background.transparent.medium}`;
+      case 'tertiary':
+      default:
+        return 'none';
+    }
+  }};
+  border-radius: 4px;
+  box-shadow: ${({ theme, variant }) => {
+    switch (variant) {
+      case 'primary':
+      case 'secondary':
+        return theme.boxShadow.extraLight;
+      default:
+        return 'none';
+    }
+  }};
+  color: ${({ theme, variant, disabled }) => {
+    if (disabled) {
+      if (variant === 'primary') {
+        return theme.color.gray0;
+      } else {
+        return theme.font.color.extraLight;
+      }
+    }
+
+    switch (variant) {
+      case 'primary':
+        return theme.color.gray0;
+      case 'tertiaryLight':
+        return theme.font.color.tertiary;
+      case 'danger':
+        return theme.color.red;
+      default:
+        return theme.font.color.secondary;
+    }
+  }};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  display: flex;
+  flex-direction: row;
+  font-family: ${({ theme }) => theme.font.family};
+  font-weight: ${({ theme, variant }) => {
+    switch (variant) {
+      case 'tertiary':
+      case 'tertiaryLight':
+        return theme.font.weight.regular;
+      default:
+        return theme.font.weight.medium;
+    }
+  }};
+  gap: ${({ theme }) => theme.spacing(2)};
+  height: ${({ size }) => (size === 'small' ? '24px' : '32px')};
+  justify-content: flex-start;
+  padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
+
+  transition: background 0.1s ease;
+
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+
+  &:hover,
+  &:active {
+    ${({ theme, variant, disabled }) => {
+      if (disabled) {
+        return '';
+      }
+
+      switch (variant) {
+        case 'primary':
+          return `background: linear-gradient(0deg, ${theme.background.transparent.medium} 0%, ${theme.background.transparent.medium} 100%), ${theme.color.blue}`;
+        default:
+          return `background: ${theme.background.tertiary}`;
+      }
+    }};
+  }
+
+  &:focus {
+    outline: none;
+    ${({ theme, variant }) => {
+      switch (variant) {
+        case 'tertiaryLight':
+        case 'tertiaryBold':
+        case 'tertiary':
+          return `color: ${theme.color.blue};`;
+        default:
+          return '';
+      }
+    }};
+  }
+`;
+
+export function Button({
+  icon,
+  title,
+  fullWidth = false,
+  variant = 'primary',
+  size = 'medium',
+  ...props
+}: Props) {
+  return (
+    <StyledButton
+      fullWidth={fullWidth}
+      variant={variant}
+      size={size}
+      {...props}
+    >
+      {icon}
+      {title}
+    </StyledButton>
+  );
+}

front/src/modules/ui/components/buttons/MainButton.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+type Variant = 'primary' | 'secondary';
+
+type Props = {
+  icon?: React.ReactNode;
+  title: string;
+  fullWidth?: boolean;
+  variant?: Variant;
+} & React.ComponentProps<'button'>;
+
+const StyledButton = styled.button<Pick<Props, 'fullWidth' | 'variant'>>`
+  align-items: center;
+  background: ${({ theme, variant, disabled }) => {
+    if (disabled) {
+      return theme.background.tertiary;
+    }
+
+    switch (variant) {
+      case 'primary':
+        return `radial-gradient(
+          50% 62.62% at 50% 0%,
+          ${theme.font.color.secondary} 0%,
+          ${theme.font.color.primary} 100%
+        )`;
+      case 'secondary':
+        return theme.background.primary;
+      default:
+        return theme.background.primary;
+    }
+  }};
+  border: 1px solid ${({ theme }) => theme.border.color.light};
+  border-radius: 8px;
+  box-shadow: ${({ theme }) => theme.boxShadow.light};
+  color: ${({ theme, variant, disabled }) => {
+    if (disabled) {
+      return theme.font.color.extraLight;
+    }
+
+    switch (variant) {
+      case 'primary':
+        return theme.font.color.inverted;
+      case 'secondary':
+        return theme.font.color.primary;
+      default:
+        return theme.font.color.primary;
+    }
+  }};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  display: flex;
+  flex-direction: row;
+  font-family: ${({ theme }) => theme.font.family};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  gap: ${({ theme }) => theme.spacing(2)};
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+
+  ${({ theme, variant }) => {
+    switch (variant) {
+      case 'secondary':
+        return `
+          &:hover {
+            background: ${theme.background.tertiary};
+          }
+        `;
+      default:
+        return '';
+    }
+  }};
+`;
+
+export function MainButton({
+  icon,
+  title,
+  fullWidth = false,
+  variant = 'primary',
+  ...props
+}: Props) {
+  return (
+    <StyledButton fullWidth={fullWidth} variant={variant} {...props}>
+      {icon}
+      {title}
+    </StyledButton>
+  );
+}

front/src/modules/ui/components/buttons/PrimaryButton.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import styled from '@emotion/styled';
-
-type OwnProps = {
-  children: React.ReactNode;
-  fullWidth?: boolean;
-} & React.ButtonHTMLAttributes<HTMLButtonElement>;
-
-const StyledButton = styled.button<{ fullWidth: boolean }>`
-  align-items: center;
-  background: radial-gradient(
-    50% 62.62% at 50% 0%,
-    ${({ theme }) => theme.font.color.secondary} 0%,
-    ${({ theme }) => theme.font.color.primary} 100%
-  );
-  border: 1px solid ${({ theme }) => theme.border.color.light};
-  border-radius: 8px;
-  box-shadow: 0px 0px 4px ${({ theme }) => theme.background.transparent.medium}
-      0%,
-    0px 2px 4px ${({ theme }) => theme.background.transparent.light} 0%;
-  color: ${({ theme }) => theme.font.color.inverted};
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  gap: ${({ theme }) => theme.spacing(2)};
-  justify-content: center;
-  padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
-  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
-`;
-
-export function PrimaryButton({
-  children,
-  fullWidth,
-  ...props
-}: OwnProps): JSX.Element {
-  return (
-    <StyledButton fullWidth={fullWidth ?? false} {...props}>
-      {children}
-    </StyledButton>
-  );
-}

front/src/modules/ui/components/buttons/SecondaryButton.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import styled from '@emotion/styled';
-
-type OwnProps = {
-  children: React.ReactNode;
-  fullWidth?: boolean;
-} & React.ButtonHTMLAttributes<HTMLButtonElement>;
-
-const StyledButton = styled.button<{ fullWidth: boolean }>`
-  align-items: center;
-  background: ${({ theme }) => theme.background.primary};
-  border: 1px solid ${({ theme }) => theme.border.color.light};
-  border-radius: 8px;
-  box-shadow: 0px 0px 4px ${({ theme }) => theme.background.transparent.medium}
-      0%,
-    0px 2px 4px ${({ theme }) => theme.background.transparent.light} 0%;
-  color: ${({ theme }) => theme.font.color.primary};
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  gap: 8px;
-  justify-content: center;
-  padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
-  padding: 8px 32px;
-  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
-
-  &:hover {
-    background: ${({ theme }) => theme.background.tertiary};
-  }
-`;
-
-export function SecondaryButton({
-  children,
-  fullWidth,
-  ...props
-}: OwnProps): JSX.Element {
-  return (
-    <StyledButton fullWidth={fullWidth ?? false} {...props}>
-      {children}
-    </StyledButton>
-  );
-}

front/src/modules/ui/components/buttons/__stories__/Button.stories.tsx

@@ -0,0 +1,230 @@
+import styled from '@emotion/styled';
+import { boolean, select, text, withKnobs } from '@storybook/addon-knobs';
+import { expect, jest } from '@storybook/jest';
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { IconSearch } from '@/ui/icons';
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+import { Button } from '../Button';
+
+type ButtonProps = React.ComponentProps<typeof Button>;
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 800px;
+  > * + * {
+    margin-top: ${({ theme }) => theme.spacing(4)};
+  }
+`;
+
+const StyledTitle = styled.h1`
+  font-size: ${({ theme }) => theme.font.size.lg};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
+  margin-top: ${({ theme }) => theme.spacing(3)};
+`;
+
+const StyledDescription = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
+  text-align: center;
+  text-transform: uppercase;
+`;
+
+const StyledLine = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+`;
+
+const StyledButtonContainer = styled.div`
+  border: 1px solid ${({ theme }) => theme.color.gray20};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme }) => theme.spacing(2)};
+`;
+
+const meta: Meta<typeof Button> = {
+  title: 'UI/Buttons/Button',
+  component: Button,
+  decorators: [withKnobs],
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+const clickJestFn = jest.fn();
+
+const variants: ButtonProps['variant'][] = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'tertiaryBold',
+  'tertiaryLight',
+  'danger',
+];
+
+const ButtonLine = (props: ButtonProps) => (
+  <>
+    <StyledButtonContainer>
+      <StyledDescription>With icon</StyledDescription>
+      <Button
+        data-testid={`${props.variant}-button-with-icon`}
+        {...props}
+        icon={<IconSearch size={14} />}
+      />
+    </StyledButtonContainer>
+    <StyledButtonContainer>
+      <StyledDescription>Default</StyledDescription>
+      <Button
+        data-testid={`${props.variant}-button-default`}
+        onClick={clickJestFn}
+        {...props}
+      />
+    </StyledButtonContainer>
+    <StyledButtonContainer>
+      <StyledDescription>Hover</StyledDescription>
+      <Button
+        id={`${props.variant}-button-hover`}
+        data-testid={`${props.variant}-button-hover`}
+        {...props}
+      />
+    </StyledButtonContainer>
+    <StyledButtonContainer>
+      <StyledDescription>Pressed</StyledDescription>
+      <Button
+        id={`${props.variant}-button-pressed`}
+        data-testid={`${props.variant}-button-pressed`}
+        {...props}
+      />
+    </StyledButtonContainer>
+    <StyledButtonContainer>
+      <StyledDescription>Disabled</StyledDescription>
+      <Button
+        data-testid={`${props.variant}-button-disabled`}
+        {...props}
+        disabled
+      />
+    </StyledButtonContainer>
+    <StyledButtonContainer>
+      <StyledDescription>Focus</StyledDescription>
+      <Button
+        id={`${props.variant}-button-focus`}
+        data-testid={`${props.variant}-button-focus`}
+        {...props}
+      />
+    </StyledButtonContainer>
+  </>
+);
+
+const ButtonContainer = (props: Partial<ButtonProps>) => {
+  const title = text('Text', 'A button title');
+
+  return (
+    <StyledContainer>
+      {variants.map((variant) => (
+        <div key={variant}>
+          <StyledTitle>{variant}</StyledTitle>
+          <StyledLine>
+            <ButtonLine {...props} title={title} variant={variant} />
+          </StyledLine>
+        </div>
+      ))}
+    </StyledContainer>
+  );
+};
+
+// Medium size
+export const MediumSize: Story = {
+  render: getRenderWrapperForComponent(<ButtonContainer />),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(0);
+
+    const button = canvas.getByTestId('primary-button-default');
+    await userEvent.click(button);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(1);
+  },
+};
+MediumSize.parameters = {
+  pseudo: {
+    hover: [
+      '#primary-button-hover',
+      '#secondary-button-hover',
+      '#tertiary-button-hover',
+      '#tertiaryBold-button-hover',
+      '#tertiaryLight-button-hover',
+      '#danger-button-hover',
+    ],
+    active: [
+      '#primary-button-pressed',
+      '#secondary-button-pressed',
+      '#tertiary-button-pressed',
+      '#tertiaryBold-button-pressed',
+      '#tertiaryLight-button-pressed',
+      '#danger-button-pressed',
+    ],
+    focus: [
+      '#primary-button-focus',
+      '#secondary-button-focus',
+      '#tertiary-button-focus',
+      '#tertiaryBold-button-focus',
+      '#tertiaryLight-button-focus',
+      '#danger-button-focus',
+    ],
+  },
+};
+
+// Small size
+export const SmallSize: Story = {
+  render: getRenderWrapperForComponent(<ButtonContainer size="small" />),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(0);
+
+    const button = canvas.getByTestId('primary-button-default');
+    await userEvent.click(button);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(1);
+  },
+};
+SmallSize.parameters = {
+  pseudo: {
+    hover: [
+      '#primary-button-hover',
+      '#secondary-button-hover',
+      '#tertiary-button-hover',
+      '#tertiaryBold-button-hover',
+      '#tertiaryLight-button-hover',
+      '#danger-button-hover',
+    ],
+    active: [
+      '#primary-button-pressed',
+      '#secondary-button-pressed',
+      '#tertiary-button-pressed',
+      '#tertiaryBold-button-pressed',
+      '#tertiaryLight-button-pressed',
+      '#danger-button-pressed',
+    ],
+    focus: [
+      '#primary-button-focus',
+      '#secondary-button-focus',
+      '#tertiary-button-focus',
+      '#tertiaryBold-button-focus',
+      '#tertiaryLight-button-focus',
+      '#danger-button-focus',
+    ],
+  },
+};

front/src/modules/ui/components/buttons/__stories__/MainButton.stories.tsx

@@ -0,0 +1,104 @@
+import { expect, jest } from '@storybook/jest';
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { IconBrandGoogle } from '@/ui/icons';
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+import { MainButton } from '../MainButton';
+
+const meta: Meta<typeof MainButton> = {
+  title: 'UI/Buttons/MainButton',
+  component: MainButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof MainButton>;
+
+const clickJestFn = jest.fn();
+
+export const DefaultPrimary: Story = {
+  render: getRenderWrapperForComponent(
+    <MainButton title="A primary Button" onClick={clickJestFn} />,
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(0);
+    const button = canvas.getByRole('button');
+    await userEvent.click(button);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(1);
+  },
+};
+
+export const WithIconPrimary: Story = {
+  render: getRenderWrapperForComponent(
+    <MainButton
+      icon={<IconBrandGoogle size={16} stroke={4} />}
+      title="A primary Button"
+    />,
+  ),
+};
+
+export const WithIconPrimaryDisabled: Story = {
+  render: getRenderWrapperForComponent(
+    <MainButton
+      icon={<IconBrandGoogle size={16} stroke={4} />}
+      title="A primary Button"
+      disabled
+    />,
+  ),
+};
+
+export const FullWidthPrimary: Story = {
+  render: getRenderWrapperForComponent(
+    <MainButton title="A primary Button" fullWidth />,
+  ),
+};
+
+export const DefaultSecondary: Story = {
+  render: getRenderWrapperForComponent(
+    <MainButton
+      title="A secondary Button"
+      onClick={clickJestFn}
+      variant="secondary"
+    />,
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(0);
+    const button = canvas.getByRole('button');
+    await userEvent.click(button);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(1);
+  },
+};
+
+export const WithIconSecondary: Story = {
+  render: getRenderWrapperForComponent(
+    <MainButton
+      icon={<IconBrandGoogle size={16} stroke={4} />}
+      title="A secondary Button"
+      variant="secondary"
+    />,
+  ),
+};
+
+export const WithIconSecondaryDisabled: Story = {
+  render: getRenderWrapperForComponent(
+    <MainButton
+      icon={<IconBrandGoogle size={16} stroke={4} />}
+      title="A secondary Button"
+      variant="secondary"
+      disabled
+    />,
+  ),
+};
+
+export const FullWidthSecondary: Story = {
+  render: getRenderWrapperForComponent(
+    <MainButton title="A secondary Button" variant="secondary" fullWidth />,
+  ),
+};

front/src/modules/ui/components/buttons/__stories__/PrimaryButton.stories.tsx

@@ -1,47 +0,0 @@
-import { expect, jest } from '@storybook/jest';
-import type { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
-
-import { IconBrandGoogle } from '@/ui/icons';
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
-
-import { PrimaryButton } from '../PrimaryButton';
-
-const meta: Meta<typeof PrimaryButton> = {
-  title: 'UI/Buttons/PrimaryButton',
-  component: PrimaryButton,
-};
-
-export default meta;
-type Story = StoryObj<typeof PrimaryButton>;
-
-const clickJestFn = jest.fn();
-
-export const Default: Story = {
-  render: getRenderWrapperForComponent(
-    <PrimaryButton onClick={clickJestFn}>A Primary Button</PrimaryButton>,
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    expect(clickJestFn).toHaveBeenCalledTimes(0);
-    const button = canvas.getByRole('button');
-    await userEvent.click(button);
-
-    expect(clickJestFn).toHaveBeenCalledTimes(1);
-  },
-};
-
-export const WithIcon: Story = {
-  render: getRenderWrapperForComponent(
-    <PrimaryButton>
-      <IconBrandGoogle size={16} stroke={4} />A Primary Button
-    </PrimaryButton>,
-  ),
-};
-
-export const FullWidth: Story = {
-  render: getRenderWrapperForComponent(
-    <PrimaryButton fullWidth={true}>A Primary Button</PrimaryButton>,
-  ),
-};

front/src/modules/ui/components/buttons/__stories__/SecondaryButton.stories.tsx

@@ -1,47 +0,0 @@
-import { expect, jest } from '@storybook/jest';
-import type { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
-
-import { IconBrandGoogle } from '@/ui/icons';
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
-
-import { SecondaryButton } from '../SecondaryButton';
-
-const meta: Meta<typeof SecondaryButton> = {
-  title: 'UI/Buttons/SecondaryButton',
-  component: SecondaryButton,
-};
-
-export default meta;
-type Story = StoryObj<typeof SecondaryButton>;
-
-const clickJestFn = jest.fn();
-
-export const Default: Story = {
-  render: getRenderWrapperForComponent(
-    <SecondaryButton onClick={clickJestFn}>A Primary Button</SecondaryButton>,
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    expect(clickJestFn).toHaveBeenCalledTimes(0);
-    const button = canvas.getByRole('button');
-    await userEvent.click(button);
-
-    expect(clickJestFn).toHaveBeenCalledTimes(1);
-  },
-};
-
-export const WithIcon: Story = {
-  render: getRenderWrapperForComponent(
-    <SecondaryButton>
-      <IconBrandGoogle size={16} stroke={4} />A Primary Button
-    </SecondaryButton>,
-  ),
-};
-
-export const FullWidth: Story = {
-  render: getRenderWrapperForComponent(
-    <SecondaryButton fullWidth={true}>A Primary Button</SecondaryButton>,
-  ),
-};

front/src/modules/ui/components/editable-cell/types/EditableDate.tsx

@@ -49,9 +49,9 @@ export function EditableDate({
     ),
   );
 
-  interface DatePickerContainerProps {
+  type DatePickerContainerProps = {
     children: React.ReactNode;
-  }
+  };
 
   const DatePickerContainer = ({ children }: DatePickerContainerProps) => {
     return <StyledCalendarContainer>{children}</StyledCalendarContainer>;

front/src/modules/ui/components/inputs/ImageInput.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IconFileUpload, IconTrash, IconUpload } from '@/ui/icons';
+
+import { Button } from '../buttons/Button';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+const Picture = styled.button<{ withPicture: boolean }>`
+  align-items: center;
+  background: ${({ theme, disabled }) =>
+    disabled ? theme.background.secondary : theme.background.tertiary};
+  border: none;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  color: ${({ theme }) => theme.font.color.light};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  display: flex;
+  height: 66px;
+  justify-content: center;
+  overflow: hidden;
+  transition: background 0.1s ease;
+
+  width: 66px;
+
+  img {
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+  }
+
+  ${({ theme, withPicture, disabled }) => {
+    if (withPicture || disabled) {
+      return '';
+    }
+
+    return `
+      &:hover {
+        background: ${theme.background.quaternary};
+      }
+    `;
+  }};
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-left: ${({ theme }) => theme.spacing(4)};
+`;
+
+const ButtonContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  > * + * {
+    margin-left: ${({ theme }) => theme.spacing(2)};
+  }
+`;
+
+const Text = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.xs};
+`;
+
+type Props = Omit<React.ComponentProps<'div'>, 'children'> & {
+  picture: string | null | undefined;
+  onUpload?: () => void;
+  onRemove?: () => void;
+  disabled?: boolean;
+};
+
+export function ImageInput({
+  picture,
+  onUpload,
+  onRemove,
+  disabled = false,
+  ...restProps
+}: Props) {
+  const theme = useTheme();
+
+  return (
+    <Container {...restProps}>
+      <Picture withPicture={!!picture} disabled={disabled} onClick={onUpload}>
+        {picture ? (
+          <img
+            src={picture || '/images/default-profile-picture.png'}
+            alt="profile"
+          />
+        ) : (
+          <IconFileUpload size={theme.icon.size.md} />
+        )}
+      </Picture>
+      <Content>
+        <ButtonContainer>
+          <Button
+            icon={<IconUpload size={theme.icon.size.sm} />}
+            onClick={onUpload}
+            variant="secondary"
+            title="Upload"
+            disabled={disabled}
+            fullWidth
+          />
+          <Button
+            icon={<IconTrash size={theme.icon.size.sm} />}
+            onClick={onRemove}
+            variant="secondary"
+            title="Remove"
+            disabled={!picture || disabled}
+            fullWidth
+          />
+        </ButtonContainer>
+        <Text>
+          We support your best PNGs, JPEGs and GIFs portraits under 10MB
+        </Text>
+      </Content>
+    </Container>
+  );
+}

front/src/modules/ui/components/inputs/TextInput.tsx

@@ -5,32 +5,48 @@ type OwnProps = Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
   'onChange'
 > & {
+  label?: string;
   onChange?: (text: string) => void;
   fullWidth?: boolean;
 };
 
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledLabel = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
+  text-transform: uppercase;
+`;
+
 const StyledInput = styled.input<{ fullWidth: boolean }>`
-  background-color: ${({ theme }) => theme.background.transparent.lighter};
-  border: 1px solid ${({ theme }) => theme.border.color.light};
+  background-color: ${({ theme }) => theme.background.tertiary};
+  border: none;
   border-radius: 4px;
-  padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) =>
-  theme.spacing(3)};
 
   color: ${({ theme }) => theme.font.color.primary};
+  font-family: ${({ theme }) => theme.font.family};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+
   outline: none;
+  padding: ${({ theme }) => theme.spacing(2)};
   width: ${({ fullWidth, theme }) =>
-    fullWidth ? `calc(100% - ${theme.spacing(6)})` : 'auto'};
+    fullWidth ? `calc(100% - ${theme.spacing(4)})` : 'auto'};
 
   &::placeholder,
   &::-webkit-input-placeholder {
-    color: ${({ theme }) => theme.font.color.light}
-    font-family: ${({ theme }) => theme.font.family};;
+    color: ${({ theme }) => theme.font.color.light};
+    font-family: ${({ theme }) => theme.font.family};
     font-weight: ${({ theme }) => theme.font.weight.medium};
   }
-  margin-bottom: ${({ theme }) => theme.spacing(3)};
 `;
 
 export function TextInput({
+  label,
   value,
   onChange,
   fullWidth,
@@ -39,16 +55,19 @@ export function TextInput({
   const [internalValue, setInternalValue] = useState(value);
 
   return (
-    <StyledInput
-      fullWidth={fullWidth ?? false}
-      value={internalValue}
-      onChange={(event: ChangeEvent<HTMLInputElement>) => {
-        setInternalValue(event.target.value);
-        if (onChange) {
-          onChange(event.target.value);
-        }
-      }}
-      {...props}
-    />
+    <StyledContainer>
+      {label && <StyledLabel>{label}</StyledLabel>}
+      <StyledInput
+        fullWidth={fullWidth ?? false}
+        value={internalValue}
+        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+          setInternalValue(event.target.value);
+          if (onChange) {
+            onChange(event.target.value);
+          }
+        }}
+        {...props}
+      />
+    </StyledContainer>
   );
 }

front/src/modules/ui/components/modal/Modal.tsx

@@ -1,25 +1,54 @@
 import React from 'react';
-import ReactModal from 'react-modal';
-import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+
+const ModalDiv = styled(motion.div)`
+  background: ${({ theme }) => theme.background.primary};
+  border-radius: 8px;
+  z-index: 10000; // should be higher than Backdrop's z-index
+`;
+
+const BackDrop = styled(motion.div)`
+  align-items: center;
+  background: ${({ theme }) => theme.background.overlay};
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 9999;
+`;
+
+type Props = React.PropsWithChildren & {
+  isOpen?: boolean;
+};
+
+const modalVariants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1 },
+  exit: { opacity: 0 },
+};
+
+export function Modal({ isOpen = false, children }: Props) {
+  if (!isOpen) {
+    return null;
+  }
 
-export function Modal({ children }: { children: React.ReactNode }) {
-  const theme = useTheme();
   return (
-    <ReactModal
-      isOpen
-      ariaHideApp={false}
-      style={{
-        overlay: {
-          backgroundColor: theme.background.overlay,
-          zIndex: 2,
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-        },
-        content: { zIndex: 1000, minWidth: 200, inset: 'auto', padding: 0 },
-      }}
-    >
-      {children}
-    </ReactModal>
+    <>
+      <BackDrop>
+        <ModalDiv
+          layout
+          initial="hidden"
+          animate="visible"
+          exit="exit"
+          variants={modalVariants}
+        >
+          {children}
+        </ModalDiv>
+      </BackDrop>
+    </>
   );
 }

front/src/modules/ui/components/motion/AnimatedEaseIn.tsx

@@ -0,0 +1,29 @@
+import { motion } from 'framer-motion';
+
+type Props = Omit<
+  React.ComponentProps<typeof motion.div>,
+  'initial' | 'animated' | 'transition'
+> & {
+  duration?: number;
+};
+
+export function AnimatedEaseIn({
+  children,
+  duration = 0.8,
+  ...restProps
+}: Props) {
+  const initial = { opacity: 0 };
+  const animate = { opacity: 1 };
+  const transition = { ease: 'linear', duration };
+
+  return (
+    <motion.div
+      initial={initial}
+      animate={animate}
+      transition={transition}
+      {...restProps}
+    >
+      {children}
+    </motion.div>
+  );
+}

front/src/modules/ui/components/motion/AnimatedTextWord.tsx

@@ -0,0 +1,70 @@
+import React, { useMemo } from 'react';
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+
+const StyledContainer = styled(motion.div)`
+  display: flex;
+  overflow: hidden;
+`;
+
+const Word = styled(motion.span)`
+  white-space: pre;
+`;
+
+type Props = Omit<React.ComponentProps<typeof motion.div>, 'children'> & {
+  text: string;
+};
+
+const containerAnimation = {
+  hidden: { opacity: 0 },
+  visible: (i = 1) => ({
+    opacity: 1,
+    transition: { staggerChildren: 0.12, delayChildren: 0.04 * i },
+  }),
+};
+
+const childAnimation = {
+  visible: {
+    opacity: 1,
+    x: 0,
+    transition: {
+      type: 'spring',
+      damping: 12,
+      stiffness: 100,
+    },
+  },
+  hidden: {
+    opacity: 0,
+    x: 20,
+    transition: {
+      type: 'spring',
+      damping: 12,
+      stiffness: 100,
+    },
+  },
+};
+
+export function AnimatedTextWord({ text = '', ...restProps }: Props) {
+  const words = useMemo(() => {
+    const words = text.split(' ');
+
+    return words.map((value, index) =>
+      index === words.length - 1 ? value : value + ' ',
+    );
+  }, [text]);
+
+  return (
+    <StyledContainer
+      variants={containerAnimation}
+      initial="hidden"
+      animate="visible"
+      {...restProps}
+    >
+      {words.map((word, index) => (
+        <Word variants={childAnimation} key={index}>
+          {word}
+        </Word>
+      ))}
+    </StyledContainer>
+  );
+}

front/src/modules/ui/icons/index.ts

@@ -28,3 +28,5 @@ export { IconArrowNarrowUp } from '@tabler/icons-react';
 export { IconArrowRight } from '@tabler/icons-react';
 export { IconArrowUpRight } from '@tabler/icons-react';
 export { IconBrandGoogle } from '@tabler/icons-react';
+export { IconUpload } from '@tabler/icons-react';
+export { IconFileUpload } from '@tabler/icons-react';

front/src/modules/ui/layout/AuthLayout.tsx

@@ -0,0 +1,11 @@
+import { Companies } from '~/pages/companies/Companies';
+
+export function AuthLayout({ children }: React.PropsWithChildren) {
+  return (
+    <>
+      {/** Mocked data */}
+      <Companies />
+      {children}
+    </>
+  );
+}

front/src/modules/ui/layout/navbar/NavCollapseButton.tsx

@@ -34,11 +34,11 @@ const CollapseButton = styled.button<{ hideOnDesktop: boolean | undefined }>`
     `}
 `;
 
-interface CollapseButtonProps {
+type CollapseButtonProps = {
   hideIfOpen?: boolean;
   hideIfClosed?: boolean;
   hideOnDesktop?: boolean;
-}
+};
 
 export default function NavCollapseButton({
   hideIfOpen,

front/src/modules/ui/layout/navbar/NavbarContainer.tsx

@@ -7,34 +7,32 @@ import { isNavbarOpenedState } from '../states/isNavbarOpenedState';
 
 const StyledNavbarContainer = styled.div`
   flex-direction: column;
-  width: ${(props) => (useRecoilValue(isNavbarOpenedState) ? 'auto' : '0')};
-  padding: ${({ theme }) => theme.spacing(2)};
   flex-shrink: 0;
   overflow: hidden;
+  padding: ${({ theme }) => theme.spacing(2)};
+  width: ${(props) => (useRecoilValue(isNavbarOpenedState) ? 'auto' : '0')};
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {
     width: ${(props) =>
       useRecoilValue(isNavbarOpenedState)
         ? `calc(100% - ` + props.theme.spacing(4) + `)`
         : '0'};
+  }
 `;
 
 const NavbarContent = styled.div`
   display: ${() => (useRecoilValue(isNavbarOpenedState) ? 'block' : 'none')};
 `;
 
-interface NavbarProps {
+type NavbarProps = {
   children: React.ReactNode;
   layout?: string;
-}
+};
 
-export const NavbarContainer: React.FC<NavbarProps> = ({
-  children,
-  layout,
-}) => {
+export function NavbarContainer({ children, layout }: NavbarProps) {
   return (
     <StyledNavbarContainer>
       <NavbarContent>{children}</NavbarContent>
     </StyledNavbarContainer>
   );
-};
+}

front/src/modules/ui/themes/boxShadow.ts

@@ -1,6 +1,7 @@
 import { grayScale, rgba } from './colors';
 
 export const boxShadowLight = {
+  extraLight: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.04)}`,
   light: `0px 2px 4px 0px ${rgba(
     grayScale.gray100,
     0.04,
@@ -12,6 +13,7 @@ export const boxShadowLight = {
 };
 
 export const boxShadowDark = {
+  extraLight: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.04)}`,
   light: `0px 2px 4px 0px ${rgba(
     grayScale.gray100,
     0.04,

front/src/modules/ui/themes/colors.ts

@@ -113,6 +113,7 @@ export const color = {
   gray30: grayScale.gray20,
   gray20: grayScale.gray15,
   gray10: grayScale.gray10,
+  gray0: grayScale.gray0,
 };
 
 export function rgba(hex: string, alpha: number) {

front/src/pages/auth/CreateProfile.tsx

@@ -0,0 +1,92 @@
+import { useCallback } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+import { Section } from '@/auth/components/ui/Section';
+import { SubTitle } from '@/auth/components/ui/SubTitle';
+import { Title } from '@/auth/components/ui/Title';
+import { MainButton } from '@/ui/components/buttons/MainButton';
+import { ImageInput } from '@/ui/components/inputs/ImageInput';
+import { TextInput } from '@/ui/components/inputs/TextInput';
+
+const StyledContentContainer = styled.div`
+  width: 100%;
+  > * + * {
+    margin-top: ${({ theme }) => theme.spacing(6)};
+  }
+`;
+
+const StyledSectionContainer = styled.div`
+  > * + * {
+    margin-top: ${({ theme }) => theme.spacing(4)};
+  }
+`;
+
+const StyledButtonContainer = styled.div`
+  width: 200px;
+`;
+
+const StyledComboInputContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  > * + * {
+    margin-left: ${({ theme }) => theme.spacing(4)};
+  }
+`;
+
+export function CreateProfile() {
+  const navigate = useNavigate();
+
+  const handleCreate = useCallback(async () => {
+    navigate('/');
+  }, [navigate]);
+
+  useHotkeys(
+    'enter',
+    () => {
+      handleCreate();
+    },
+    {
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+    },
+    [handleCreate],
+  );
+
+  return (
+    <>
+      <Title>Create profile</Title>
+      <SubTitle>How you'll be identify on the app.</SubTitle>
+      <StyledContentContainer>
+        <StyledSectionContainer>
+          <Section title="Picture" />
+          <ImageInput picture={null} disabled />
+        </StyledSectionContainer>
+        <StyledSectionContainer>
+          <Section
+            title="Name"
+            description="Your name as it will be displayed on the app"
+          />
+          <StyledComboInputContainer>
+            <TextInput
+              label="First Name"
+              value=""
+              placeholder="Tim"
+              fullWidth
+            />
+            <TextInput
+              label="Last Name"
+              value=""
+              placeholder="Cook"
+              fullWidth
+            />
+          </StyledComboInputContainer>
+        </StyledSectionContainer>
+      </StyledContentContainer>
+      <StyledButtonContainer>
+        <MainButton title="Continue" onClick={handleCreate} fullWidth />
+      </StyledButtonContainer>
+    </>
+  );
+}

front/src/pages/auth/CreateWorkspace.tsx

@@ -0,0 +1,74 @@
+import { useCallback } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+import { Section } from '@/auth/components/ui/Section';
+import { SubTitle } from '@/auth/components/ui/SubTitle';
+import { Title } from '@/auth/components/ui/Title';
+import { MainButton } from '@/ui/components/buttons/MainButton';
+import { ImageInput } from '@/ui/components/inputs/ImageInput';
+import { TextInput } from '@/ui/components/inputs/TextInput';
+
+const StyledContentContainer = styled.div`
+  width: 100%;
+  > * + * {
+    margin-top: ${({ theme }) => theme.spacing(6)};
+  }
+`;
+
+const StyledSectionContainer = styled.div`
+  > * + * {
+    margin-top: ${({ theme }) => theme.spacing(4)};
+  }
+`;
+
+const StyledButtonContainer = styled.div`
+  width: 200px;
+`;
+
+export function CreateWorkspace() {
+  const navigate = useNavigate();
+
+  const handleCreate = useCallback(async () => {
+    navigate('/auth/create/profile');
+  }, [navigate]);
+
+  useHotkeys(
+    'enter',
+    () => {
+      handleCreate();
+    },
+    {
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+    },
+    [handleCreate],
+  );
+
+  return (
+    <>
+      <Title>Create your workspace</Title>
+      <SubTitle>
+        A shared environment where you will be able to manage your customer
+        relations with your team.
+      </SubTitle>
+      <StyledContentContainer>
+        <StyledSectionContainer>
+          <Section title="Workspace logo" />
+          <ImageInput picture={null} disabled />
+        </StyledSectionContainer>
+        <StyledSectionContainer>
+          <Section
+            title="Workspace name"
+            description="The name of your organization"
+          />
+          <TextInput value="" placeholder="Apple" fullWidth />
+        </StyledSectionContainer>
+      </StyledContentContainer>
+      <StyledButtonContainer>
+        <MainButton title="Continue" onClick={handleCreate} fullWidth />
+      </StyledButtonContainer>
+    </>
+  );
+}

front/src/pages/auth/Index.tsx

@@ -1,28 +1,32 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
 import { useRecoilState } from 'recoil';
 
 import { FooterNote } from '@/auth/components/ui/FooterNote';
 import { HorizontalSeparator } from '@/auth/components/ui/HorizontalSeparator';
 import { Logo } from '@/auth/components/ui/Logo';
-import { Modal } from '@/auth/components/ui/Modal';
 import { Title } from '@/auth/components/ui/Title';
 import { authFlowUserEmailState } from '@/auth/states/authFlowUserEmailState';
 import { isMockModeState } from '@/auth/states/isMockModeState';
 import { captureHotkeyTypeInFocusState } from '@/hotkeys/states/captureHotkeyTypeInFocusState';
-import { PrimaryButton } from '@/ui/components/buttons/PrimaryButton';
-import { SecondaryButton } from '@/ui/components/buttons/SecondaryButton';
+import { MainButton } from '@/ui/components/buttons/MainButton';
 import { TextInput } from '@/ui/components/inputs/TextInput';
+import { AnimatedEaseIn } from '@/ui/components/motion/AnimatedEaseIn';
 import { IconBrandGoogle } from '@/ui/icons';
-import { Companies } from '~/pages/companies/Companies';
 
 const StyledContentContainer = styled.div`
-  padding-bottom: ${({ theme }) => theme.spacing(8)};
-  padding-top: ${({ theme }) => theme.spacing(8)};
   width: 200px;
+  > * + * {
+    margin-top: ${({ theme }) => theme.spacing(3)};
+  }
+`;
+
+const StyledFooterNote = styled(FooterNote)`
+  max-width: 283px;
 `;
 
 export function Index() {
@@ -37,13 +41,20 @@ export function Index() {
     authFlowUserEmailState,
   );
 
+  const [visible, setVisible] = useState(false);
+
   const onGoogleLoginClick = useCallback(() => {
     window.location.href = process.env.REACT_APP_AUTH_URL + '/google' || '';
   }, []);
 
   const onPasswordLoginClick = useCallback(() => {
+    if (!visible) {
+      setVisible(true);
+      return;
+    }
+
     navigate('/auth/password-login');
-  }, [navigate]);
+  }, [navigate, visible]);
 
   useHotkeys(
     'enter',
@@ -64,31 +75,48 @@ export function Index() {
 
   return (
     <>
-      <Companies />
-      <Modal>
+      <AnimatedEaseIn>
         <Logo />
-        <Title>Welcome to Twenty</Title>
-        <StyledContentContainer>
-          <PrimaryButton fullWidth={true} onClick={onGoogleLoginClick}>
-            <IconBrandGoogle size={theme.icon.size.sm} stroke={4} />
-            Continue With Google
-          </PrimaryButton>
-          <HorizontalSeparator />
-          <TextInput
-            value={authFlowUserEmail}
-            placeholder="Email"
-            onChange={(value) => setAuthFlowUserEmail(value)}
-            fullWidth={true}
-          />
-          <SecondaryButton fullWidth={true} onClick={onPasswordLoginClick}>
-            Continue
-          </SecondaryButton>
-        </StyledContentContainer>
-        <FooterNote>
-          By using Twenty, you agree to the Terms of Service and Data Processing
-          Agreement.
-        </FooterNote>
-      </Modal>
+      </AnimatedEaseIn>
+      <Title animate>Welcome to Twenty</Title>
+      <StyledContentContainer>
+        <MainButton
+          icon={<IconBrandGoogle size={theme.icon.size.sm} stroke={4} />}
+          title="Continue with Google"
+          onClick={onGoogleLoginClick}
+          fullWidth
+        />
+        {visible && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: 'auto' }}
+            transition={{
+              type: 'spring',
+              stiffness: 800,
+              damping: 35,
+            }}
+          >
+            <HorizontalSeparator />
+            <TextInput
+              value={authFlowUserEmail}
+              placeholder="Email"
+              onChange={(value) => setAuthFlowUserEmail(value)}
+              fullWidth={true}
+            />
+          </motion.div>
+        )}
+        <MainButton
+          title="Continue with Email"
+          onClick={onPasswordLoginClick}
+          disabled={!authFlowUserEmail}
+          variant="secondary"
+          fullWidth
+        />
+      </StyledContentContainer>
+      <StyledFooterNote>
+        By using Twenty, you agree to the Terms of Service and Data Processing
+        Agreement.
+      </StyledFooterNote>
     </>
   );
 }

front/src/pages/auth/PasswordLogin.tsx

@@ -1,34 +1,45 @@
 import { useCallback, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
 import { useRecoilState } from 'recoil';
 
-import { InputLabel } from '@/auth/components/ui/InputLabel';
 import { Logo } from '@/auth/components/ui/Logo';
-import { Modal } from '@/auth/components/ui/Modal';
+import { Section } from '@/auth/components/ui/Section';
 import { SubTitle } from '@/auth/components/ui/SubTitle';
 import { Title } from '@/auth/components/ui/Title';
 import { useAuth } from '@/auth/hooks/useAuth';
 import { authFlowUserEmailState } from '@/auth/states/authFlowUserEmailState';
 import { isMockModeState } from '@/auth/states/isMockModeState';
 import { captureHotkeyTypeInFocusState } from '@/hotkeys/states/captureHotkeyTypeInFocusState';
-import { PrimaryButton } from '@/ui/components/buttons/PrimaryButton';
+import { MainButton } from '@/ui/components/buttons/MainButton';
 import { TextInput } from '@/ui/components/inputs/TextInput';
-import { Companies } from '~/pages/companies/Companies';
 
 const StyledContentContainer = styled.div`
-  padding-bottom: ${({ theme }) => theme.spacing(4)};
-  padding-top: ${({ theme }) => theme.spacing(6)};
-  width: 320px;
+  width: 100%;
+  > * + * {
+    margin-top: ${({ theme }) => theme.spacing(6)};
+  }
 `;
 
-const StyledInputContainer = styled.div`
-  margin-top: ${({ theme }) => theme.spacing(1)};
+const StyledAnimatedContent = styled(motion.div)`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  > * + * {
+    margin-top: ${({ theme }) => theme.spacing(8)};
+  }
+`;
+
+const StyledSectionContainer = styled.div`
+  > * + * {
+    margin-top: ${({ theme }) => theme.spacing(4)};
+  }
 `;
 
 const StyledButtonContainer = styled.div`
-  margin-top: ${({ theme }) => theme.spacing(7)};
+  width: 200px;
 `;
 
 const StyledErrorContainer = styled.div`
@@ -36,7 +47,6 @@ const StyledErrorContainer = styled.div`
 `;
 
 export function PasswordLogin() {
-  const navigate = useNavigate();
   const [, setMockMode] = useRecoilState(isMockModeState);
   const [, setCaptureHotkeyTypeInFocus] = useRecoilState(
     captureHotkeyTypeInFocusState,
@@ -58,7 +68,8 @@ export function PasswordLogin() {
       await login(authFlowUserEmail, internalPassword);
       setMockMode(false);
       setCaptureHotkeyTypeInFocus(false);
-      navigate('/');
+      // TODO: Navigate to the workspace selection page when it's ready
+      // navigate('/auth/create/workspace');
     } catch (err: any) {
       setFormError(err.message);
     }
@@ -66,7 +77,6 @@ export function PasswordLogin() {
     authFlowUserEmail,
     internalPassword,
     login,
-    navigate,
     setMockMode,
     setCaptureHotkeyTypeInFocus,
   ]);
@@ -85,23 +95,22 @@ export function PasswordLogin() {
 
   return (
     <>
-      <Companies />
-      <Modal>
-        <Logo />
-        <Title>Welcome to Twenty</Title>
-        <SubTitle>Enter your credentials to sign in</SubTitle>
+      <Logo />
+      <Title>Welcome to Twenty</Title>
+      <SubTitle>Enter your credentials to sign in</SubTitle>
+      <StyledAnimatedContent>
         <StyledContentContainer>
-          <StyledInputContainer>
-            <InputLabel label="Email" />
+          <StyledSectionContainer>
+            <Section title="Email" />
             <TextInput
               value={authFlowUserEmail}
               placeholder="Email"
               onChange={(value) => setAuthFlowUserEmail(value)}
               fullWidth
             />
-          </StyledInputContainer>
-          <StyledInputContainer>
-            <InputLabel label="Password" />
+          </StyledSectionContainer>
+          <StyledSectionContainer>
+            <Section title="Password" />
             <TextInput
               value={internalPassword}
               placeholder="Password"
@@ -109,17 +118,18 @@ export function PasswordLogin() {
               fullWidth
               type="password"
             />
-            <StyledButtonContainer>
-              <PrimaryButton fullWidth onClick={handleLogin}>
-                Continue
-              </PrimaryButton>
-            </StyledButtonContainer>
-          </StyledInputContainer>
-          {formError && (
-            <StyledErrorContainer>{formError}</StyledErrorContainer>
-          )}
+          </StyledSectionContainer>
         </StyledContentContainer>
-      </Modal>
+        <StyledButtonContainer>
+          <MainButton
+            title="Continue"
+            onClick={handleLogin}
+            disabled={!authFlowUserEmail || !internalPassword}
+            fullWidth
+          />
+        </StyledButtonContainer>
+        {formError && <StyledErrorContainer>{formError}</StyledErrorContainer>}
+      </StyledAnimatedContent>
     </>
   );
 }

front/src/providers/apollo/ApolloProvider.tsx

@@ -5,9 +5,7 @@ import { useApolloFactory } from '@/apollo/hooks/useApolloFactory';
 import useApolloMocked from '@/apollo/hooks/useApolloMocked';
 import { isMockModeState } from '@/auth/states/isMockModeState';
 
-export const ApolloProvider: React.FC<React.PropsWithChildren> = ({
-  children,
-}) => {
+export function ApolloProvider({ children }: React.PropsWithChildren) {
   const apolloClient = useApolloFactory();
   const mockedClient = useApolloMocked();
 
@@ -18,4 +16,4 @@ export const ApolloProvider: React.FC<React.PropsWithChildren> = ({
       {children}
     </ApolloProviderBase>
   );
-};
+}

front/src/providers/user/UserProvider.tsx

@@ -5,9 +5,7 @@ import { useFetchCurrentUser } from '@/auth/hooks/useFetchCurrentUser';
 import { currentUserState } from '@/auth/states/currentUserState';
 import { tokenPairState } from '@/auth/states/tokenPairState';
 
-export const UserProvider: React.FC<React.PropsWithChildren> = ({
-  children,
-}) => {
+export function UserProvider({ children }: React.PropsWithChildren) {
   const [, setCurrentUser] = useRecoilState(currentUserState);
   const [tokenPair] = useRecoilState(tokenPairState);
   const user = useFetchCurrentUser(tokenPair);
@@ -19,4 +17,4 @@ export const UserProvider: React.FC<React.PropsWithChildren> = ({
   }, [setCurrentUser, user]);
 
   return <>{children}</>;
-};
+}