export default function into() {
	return (
		<div className="mx-auto w-full max-w-4xl px-6 py-8">
			<h1 className="text-3xl underline p-2">Notifications</h1>

			<p className="p-2">
				All notifications are a subscription based, please open the menu and
				select the notification you would like to know more info about
			</p>

			<hr />
			<p>To subscribe to a notification</p>
			<ol className="list-decimal list-inside">
				<li>Click on your profile</li>

				<img
					src="/lst/app/imgs/docs/notifications/lt_profile.png"
					alt="Reprint notification example"
					className="m-2 rounded-lg border-2"
				/>
				<li>Click account</li>
				<li>Select the notification you would like to subscribe to.</li>
				<img
					src="/lst/app/imgs/docs/notifications/lt_notification_select.png"
					alt="Reprint notification example"
					className="m-2 rounded-lg border-2"
				/>
				<li>
					If you want to have more people on the notification you can add more
					emails by clicking the add email button.{" "}
					<p className="text-sm underline">
						Please note that each user can subscribe on there own so you do not
						need to add others unless you want to add them.
					</p>
				</li>
				<li>When you are ready click subscribe</li>
			</ol>
			<br />
			<p className="">
				NOTE: you can select the same notification and add more people or just
				your self only, when you do this it will override you current
				subscription and add / remove the emails
			</p>
			<hr className="m-2" />
			<div>
				<p>
					The table at the bottom of your profile is where all of your current
					subscriptions will be at.
				</p>
				<p>
					Clicking the trash can will remove the notifications from sending you
					emails
				</p>
				<img
					src="/lst/app/imgs/docs/notifications/lt_notification_table.png"
					alt="Reprint notification example"
					className="m-2 rounded-lg border-2"
				/>
			</div>
		</div>
	);
}