Design Auth index (#325)

front/src/pages/auth/Index.tsx

@@ -1,14 +1,31 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
 
+import { FooterNote } from '@/auth/components/FooterNote';
+import { HorizontalSeparator } from '@/auth/components/HorizontalSeparator';
+import { Logo } from '@/auth/components/Logo';
+import { Modal } from '@/auth/components/Modal';
+import { Title } from '@/auth/components/Title';
 import { useMockData } from '@/auth/hooks/useMockData';
 import { hasAccessToken } from '@/auth/services/AuthService';
-import { Modal } from '@/ui/components/modal/Modal';
+import { PrimaryButton } from '@/ui/components/buttons/PrimaryButton';
+import { SecondaryButton } from '@/ui/components/buttons/SecondaryButton';
+import { TextInput } from '@/ui/components/inputs/TextInput';
+import { IconBrandGoogle } from '@/ui/icons';
 
 import { Companies } from '../companies/Companies';
 
+const StyledContentContainer = styled.div`
+  padding-bottom: ${({ theme }) => theme.spacing(8)};
+  padding-top: ${({ theme }) => theme.spacing(8)};
+  width: 200px;
+`;
+
 export function Index() {
   const navigate = useNavigate();
+  const theme = useTheme();
   useMockData();
 
   useEffect(() => {
@@ -17,10 +34,36 @@ export function Index() {
     }
   }, [navigate]);
 
+  const onGoogleLoginClick = useCallback(() => {
+    navigate('/auth/login');
+  }, [navigate]);
+
   return (
     <>
       <Companies />
-      <Modal>Welcome to Twenty</Modal>
+      <Modal>
+        <Logo />
+        <Title title="Welcome to Twenty" />
+        <StyledContentContainer>
+          <PrimaryButton
+            fullWidth={true}
+            label="Continue With Google"
+            icon={<IconBrandGoogle size={theme.iconSizeSmall} stroke={4} />}
+            onClick={onGoogleLoginClick}
+          />
+          <HorizontalSeparator />
+          <TextInput
+            initialValue=""
+            onChange={(value) => console.log(value)}
+            fullWidth={true}
+          />
+          <SecondaryButton label="Continue" fullWidth={true} />
+        </StyledContentContainer>
+        <FooterNote>
+          By using Twenty, you agree to the Terms of Service and Data Processing
+          Agreement.
+        </FooterNote>
+      </Modal>
     </>
   );
 }