Feat/add page for creating a new team

frontend/src/components/Teams/CreateTeam/TeamName.tsx

@@ -0,0 +1,26 @@
+import Input from '../../Primitives/Input';
+import Text from '../../Primitives/Text';
+
+type Props = { teamName: string };
+
+const TeamName = ({ teamName }: Props) => {
+	return (
+		<>
+			<Text css={{ mb: '$16' }} heading="3">
+				Team Name
+			</Text>
+
+			<Input
+				forceState
+				currentValue={teamName}
+				id="text"
+				maxChars="40"
+				placeholder="Team name"
+				state="default"
+				type="text"
+			/>
+		</>
+	);
+};
+
+export default TeamName;

frontend/src/components/Teams/CreateTeam/TipBar.tsx

@@ -0,0 +1,51 @@
+import { styled } from 'styles/stitches/stitches.config';
+
+import Icon from 'components/icons/Icon';
+import Flex from 'components/Primitives/Flex';
+import Text from 'components/Primitives/Text';
+
+const TextWhite = styled(Text, { color: 'white', mt: '$24' });
+const LiWhite = styled('li', Text, { color: '$primary100', fontSize: '$14', lineHeight: '$20' });
+
+const CreateTeamTipBar = () => {
+	return (
+		<Flex
+			direction="column"
+			justify="center"
+			css={{
+				minHeight: 'calc(100vh - $sizes$92)',
+				backgroundColor: '$primary800',
+				padding: '$32',
+				maxWidth: '$384',
+				position: 'fixed',
+				right: 0,
+				top: 0,
+				bottom: 0
+			}}
+		>
+			<Icon
+				name="blob-idea"
+				css={{
+					width: '47px',
+					height: '$48'
+				}}
+			/>
+			<TextWhite heading="6">Team Admin</TextWhite>
+
+			<LiWhite as="span">
+				You will be the team admin of this team. You can also choose other team admins later
+				on out of your team members.
+			</LiWhite>
+
+			<TextWhite css={{ mb: '$8' }} heading="6">
+				Stakeholders
+			</TextWhite>
+			<LiWhite as="span">
+				If you select the role <b>stakeholder</b>, this person will not be included in
+				sub-team retros later on when you create a SPLIT retrospective.
+			</LiWhite>
+		</Flex>
+	);
+};
+
+export default CreateTeamTipBar;

frontend/src/components/icons/Sprite.tsx

@@ -1,3 +1,5 @@
+/* eslint react/no-unknown-property: 0 */
+
 const Sprite = () => (
 	<svg
 		focusable="false"

frontend/src/components/layouts/DashboardLayout/index.tsx

@@ -33,7 +33,7 @@ const DashboardLayout = (props: DashboardLayoutProps) => {
 						</Link>
 					)}
 					{isTeams && (
-						<Link href="/">
+						<Link href="/teams/new">
 							<AddNewBoardButton size={isDashboard ? 'sm' : 'md'}>
 								<Icon css={{ color: 'white' }} name="plus" />
 								Create new team

frontend/src/pages/teams/new.tsx

@@ -0,0 +1,70 @@
+import { useCallback } from 'react';
+import { FormProvider, useForm, useWatch } from 'react-hook-form';
+import { NextPage } from 'next';
+import { useRouter } from 'next/router';
+import { joiResolver } from '@hookform/resolvers/joi/dist/joi';
+
+import Icon from '../../components/icons/Icon';
+import Button from '../../components/Primitives/Button';
+import Text from '../../components/Primitives/Text';
+import TeamName from '../../components/Teams/CreateTeam/TeamName';
+import TipBar from '../../components/Teams/CreateTeam/TipBar';
+import SchemaCreateTeam from '../../schema/schemaCreateTeamForm';
+import {
+	Container,
+	ContentContainer,
+	InnerContent,
+	PageHeader,
+	StyledForm,
+	SubContainer
+} from '../../styles/pages/boards/new.styles';
+
+const NewTeam: NextPage = () => {
+	const router = useRouter();
+
+	const methods = useForm<{ text: string }>({
+		mode: 'onBlur',
+		reValidateMode: 'onBlur',
+		defaultValues: {
+			text: ''
+		},
+		resolver: joiResolver(SchemaCreateTeam)
+	});
+
+	const teamName = useWatch({
+		control: methods.control,
+		name: 'text'
+	});
+
+	const handleBack = useCallback(() => {
+		router.back();
+	}, [router]);
+
+	return (
+		<Container>
+			<PageHeader>
+				<Text color="primary800" heading={3} weight="bold">
+					Create new team
+				</Text>
+
+				<Button isIcon onClick={handleBack}>
+					<Icon name="close" />
+				</Button>
+			</PageHeader>
+			<ContentContainer>
+				<SubContainer>
+					<StyledForm direction="column">
+						<InnerContent direction="column">
+							<FormProvider {...methods}>
+								<TeamName teamName={teamName} />
+							</FormProvider>
+						</InnerContent>
+					</StyledForm>
+				</SubContainer>
+				<TipBar />
+			</ContentContainer>
+		</Container>
+	);
+};
+
+export default NewTeam;

frontend/src/schema/schemaCreateTeamForm.ts

@@ -0,0 +1,11 @@
+import Joi from 'joi';
+
+const SchemaCreateTeam = Joi.object({
+	text: Joi.string().required().trim().max(40).messages({
+		'any.required': 'Please enter the team name',
+		'string.empty': 'Please enter the team name',
+		'string.max': 'Maximum of 40 characters'
+	})
+});
+
+export default SchemaCreateTeam;