basic join form

public/locales/en/translation.json

@@ -22,5 +22,10 @@
 	"discord": "Discord handle",
 	"subject": "Subject",
 	"message": "Message",
-	"send": "Send"
+	"send": "Send",
+
+	"joinUs": "Join us",
+	"weAccept": "We welcome everyone with the right mindse!",
+	"specialization": "Specialzation",
+	"motivation": "Motivation"
 }

public/locales/nl/translation.json

@@ -21,5 +21,10 @@
 	"discord": "Discord handle",
 	"subject": "Onderwerp",
 	"message": "Bericht",
-	"send": "Verstuur"
+	"send": "Verstuur",
+
+	"joinUs": "Wil je er ook bij",
+	"weAccept": "Wij verwelkomen iedereen met de juiste intenties!",
+	"specialization": "Richting",
+	"motivation": "Motivatie"
 }

src/pages/join/index.tsx

@@ -1,10 +1,62 @@
 import Image from 'next/image';
+import { useTranslation } from 'react-i18next';
+import { useRouter } from 'next/router';
 import join from '@/../public/join.gif';
+import styles from '@/styles/contact.module.scss';
 
 export default function Join() {
+	const { t } = useTranslation();
+	const router = useRouter();
 	return (
 		<div>
-			<Image src={join} alt="Join us" className="rounded" />
+			<div className="mx-5 flex flex-col gap-8 rounded p-8 pt-6 md:w-[60%]">
+				<div>
+					<h4>&gt; {t('joinUs')}?</h4>
+					<Image src={join} alt="Join us" className="rounded" />
+					<div className="">{t('weAccept')}</div>
+				</div>
+				<div className={styles.container}>
+					<form
+						action="mailto:[email protected]"
+						method="post"
+						encType="text/plain"
+					>
+						<label htmlFor="name">
+							{t('name')}:<span className={styles.required}>*</span>
+						</label>
+						<input type="text" id="name" name="name" required />
+
+						<label htmlFor="discordHandle">{t('discord')}:</label>
+						<input type="text" id="discordHandle" name="discordHandle" />
+
+						<label htmlFor="specialization">
+							{t('specialization')}:<span className={styles.required}>*</span>
+						</label>
+						<select id="specialization" name="specialization" required>
+							<option value="mobileEnterprise">
+								Mobile & Enterprise Development
+							</option>
+							<option value="dataAi">AI & Data Engineering</option>
+							<option value="mainframe">Mainframes</option>
+							<option value="systemNetwork">
+								System & Network Administration
+							</option>
+							<option value="functionalBusiness">
+								Functional & Business Analyst
+							</option>
+						</select>
+
+						<label htmlFor="motivation">{t('motivation')}</label>
+						<textarea id="motivation" name="motivation"></textarea>
+
+						<input
+							type="submit"
+							value={`${t('send')}`}
+							onClick={() => router.push('/')}
+						/>
+					</form>
+				</div>
+			</div>
 		</div>
 	);
 }

src/styles/contact.module.scss

@@ -22,6 +22,7 @@
 
 	input[type='text'],
 	input[type='email'],
+	select,
 	textarea {
 		padding: 10px;
 		border: none;

src/styles/globals.scss

@@ -17,6 +17,11 @@ body {
 	background-color: var(--github-bg);
 	// ^ == @apply bg-dark
 	line-height: 1.2;
+	scrollbar-width: none;
+}
+
+body::-webkit-scrollbar {
+	display: none;
 }
 
 h1 {