Calendar field and time field

crabfit-frontend/src/pages/Home/Home.js

@@ -1,12 +0,0 @@
-import { Link } from 'react-router-dom';
-
-const Home = () => {
-	return (
-		<div>
-			<div>Home</div>
-			<Link to="/test">Test</Link>
-		</div>
-	);
-};
-
-export default Home;

crabfit-frontend/src/pages/Home/Home.tsx

@@ -0,0 +1,59 @@
+import { useForm } from 'react-hook-form';
+
+import {
+	TextField,
+	CalendarField,
+	TimeRangeField,
+	Button,
+} from 'components';
+
+import {
+	StyledMain,
+	CreateForm,
+	TitleSmall,
+	TitleLarge,
+} from './homeStyle';
+
+const Home = () => {
+	const { register, handleSubmit } = useForm();
+
+	const onSubmit = data => console.log('submit', data);
+
+	return (
+		<StyledMain>
+			<TitleSmall>Create a</TitleSmall>
+			<TitleLarge>CRAB FIT</TitleLarge>
+
+			<CreateForm onSubmit={handleSubmit(onSubmit)}>
+				<TextField
+					label="Give your event a name!"
+					subLabel="Or leave blank to generate one"
+					type="text"
+					name="name"
+					id="name"
+					register={register}
+				/>
+
+				<CalendarField
+					label="What dates might work?"
+					subLabel="Click and drag to select"
+					name="dates"
+					id="dates"
+					register={register}
+				/>
+
+				<TimeRangeField
+					label="What times might work?"
+					subLabel="Click and drag to select a time range"
+					name="times"
+					id="times"
+					register={register}
+				/>
+
+				<Button type="submit">Create</Button>
+			</CreateForm>
+		</StyledMain>
+	);
+};
+
+export default Home;

crabfit-frontend/src/pages/Home/homeStyle.ts

@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+
+export const StyledMain = styled.main`
+	width: 600px;
+	margin: 30px auto;
+	max-width: calc(100% - 30px);
+`;
+
+export const CreateForm = styled.form`
+`;
+
+export const TitleSmall = styled.span`
+	display: block;
+	margin: 20px 0 0;
+	font-size: 3rem;
+	text-align: center;
+	font-family: 'CF Samurai Bob';
+	font-weight: 400;
+	color: ${props => props.theme.primaryDark};
+	line-height: 1em;
+`;
+
+export const TitleLarge = styled.h1`
+	margin: 0 0 40px;
+	font-size: 4rem;
+	text-align: center;
+	color: ${props => props.theme.primary};
+	font-family: 'Molot';
+	font-weight: 400;
+	text-shadow: 0 4px 0 ${props => props.theme.primaryDark};
+	line-height: 1em;
+`;