About info and donate

crabfit-frontend/src/App.tsx

@@ -25,6 +25,9 @@ const App = () => {
 				<button onClick={() => setIsDark(!isDark)} style={{ position: 'absolute', top: 0, left: 0 }}>{isDark ? 'dark' : 'light'}</button>
 				<Global
 					styles={theme => ({
+						html: {
+							scrollBehavior: 'smooth',
+						},
 						body: {
 							backgroundColor: theme.background,
 							color: theme.text,

crabfit-frontend/src/components/Button/buttonStyle.ts

@@ -20,7 +20,7 @@ export const Top = styled.button`
 	color: #FFF;
 	font-weight: 600;
 	text-shadow: 0 -1.5px .5px ${props => props.theme.primaryDark};
-	padding: ${props => props.padding || '10px 14px'};
+	padding: 0;
 	border-radius: 3px;
 	height: var(--btn-height);
 	width: var(--btn-width);

crabfit-frontend/src/components/CalendarField/CalendarField.tsx

@@ -112,7 +112,6 @@ const CalendarField = ({
 				<Button
 					buttonHeight="30px"
 					buttonWidth="30px"
-					padding="0"
 					title="Previous month"
 					type="button"
 					onClick={() => {
@@ -128,7 +127,6 @@ const CalendarField = ({
 				<Button
 					buttonHeight="30px"
 					buttonWidth="30px"
-					padding="0"
 					title="Next month"
 					type="button"
 					onClick={() => {

crabfit-frontend/src/components/Donate/Donate.tsx

@@ -0,0 +1,14 @@
+import { Button } from 'components';
+
+const Donate = () => (
+	<div style={{ marginTop: 6, marginLeft: 12 }}>
+		<a href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation&currency_code=AUD" target="_blank" rel="noreferrer">
+			<Button
+				buttonHeight="30px"
+				buttonWidth="90px"
+			>Donate</Button>
+		</a>
+	</div>
+);
+
+export default Donate;

crabfit-frontend/src/components/index.ts

@@ -2,5 +2,8 @@ export { default as TextField } from './TextField/TextField';
 export { default as SelectField } from './SelectField/SelectField';
 export { default as CalendarField } from './CalendarField/CalendarField';
 export { default as TimeRangeField } from './TimeRangeField/TimeRangeField';
+
 export { default as Button } from './Button/Button';
+
 export { default as Center } from './Center/Center';
+export { default as Donate } from './Donate/Donate';

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

@@ -7,6 +7,7 @@ import {
 	SelectField,
 	Button,
 	Center,
+	Donate,
 } from 'components';
 
 import {
@@ -15,6 +16,10 @@ import {
 	TitleSmall,
 	TitleLarge,
 	Logo,
+	Links,
+	AboutSection,
+	Footer,
+	P,
 } from './homeStyle';
 
 import logo from 'res/logo.svg';
@@ -30,53 +35,73 @@ const Home = () => {
 	const onSubmit = data => console.log('submit', data);
 
 	return (
-		<StyledMain>
+		<>
-			<Center>
+			<StyledMain>
-				<Logo src={logo} alt="" />
-			</Center>
-			<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}
-				/>
-
-				<SelectField
-					label="And the timezone"
-					name="timezone"
-					id="timezone"
-					register={register}
-					options={timezones}
-					required
-				/>
-
 				<Center>
-					<Button type="submit">Create</Button>
+					<Logo src={logo} alt="" />
 				</Center>
-			</CreateForm>
+				<TitleSmall>Create a</TitleSmall>
-		</StyledMain>
+				<TitleLarge>CRAB FIT</TitleLarge>
+				<Links>
+					<a href="#about">About</a> / <a href="#donate">Donate</a>
+				</Links>
+
+				<CreateForm onSubmit={handleSubmit(onSubmit)} id="create">
+					<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}
+					/>
+
+					<SelectField
+						label="And the timezone"
+						name="timezone"
+						id="timezone"
+						register={register}
+						options={timezones}
+						required
+					/>
+
+					<Center>
+						<Button type="submit">Create</Button>
+					</Center>
+				</CreateForm>
+			</StyledMain>
+
+			<AboutSection id="about">
+				<StyledMain>
+					<h2>About Crab Fit</h2>
+					<P>Crab Fit helps you fit your event around everyone's schedules. Simply create an event above and send the link to everyone that is participating. Results update live and you will be able to see a heat-map of when everyone is free.</P>
+					{/* eslint-disable-next-line */}
+					<P>Create by <a href="https://bengrant.dev" target="_blank">Ben Grant</a>, Crab Fit is the modern-day solution to your group event planning debates.</P>
+					<P>The code for Crab Fit is open source, if you find any issues or want to contribute, you can visit the <a href="https://github.com/GRA0007/crab.fit" target="_blank" rel="noreferrer">repository</a>.</P>
+				</StyledMain>
+			</AboutSection>
+
+			<Footer id="donate">
+				<span>Thank you for using Crab Fit. If you like it, consider donating.</span>
+				<Donate />
+			</Footer>
+		</>
 	);
 };
 

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

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-export const StyledMain = styled.main`
+export const StyledMain = styled.div`
 	width: 600px;
 	margin: 20px auto;
 	max-width: calc(100% - 60px);
@@ -21,7 +21,7 @@ export const TitleSmall = styled.span`
 `;
 
 export const TitleLarge = styled.h1`
-	margin: 0 0 40px;
+	margin: 0;
 	font-size: 4rem;
 	text-align: center;
 	color: ${props => props.theme.primary};
@@ -38,3 +38,28 @@ export const TitleLarge = styled.h1`
 export const Logo = styled.img`
 	width: 80px;
 `;
+
+export const Links = styled.nav`
+	text-align: center;
+	margin: 20px 0;
+`;
+
+export const AboutSection = styled.section`
+	margin: 60px 0 0;
+	background-color: ${props => props.theme.primaryBackground};
+	padding: 20px 0;
+`;
+
+export const Footer = styled.footer`
+	width: 600px;
+	margin: 20px auto;
+	max-width: calc(100% - 60px);
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+`;
+
+export const P = styled.p`
+	font-weight: 500;
+	line-height: 1.6em;
+`;