From 6751838388b8f5f7f8c752e8b1bb72854dd40c6d Mon Sep 17 00:00:00 2001
From: Helena Standaert <helena.standaert@gmail.com>
Date: Tue, 26 Mar 2024 13:11:13 +0100
Subject: [PATCH] Optmize accessibility

---
 src/assets/content/newsItems.ts        | 33 ++++++++++-------
 src/assets/icons/index.ts              |  1 +
 src/assets/icons/linkedin.tsx          | 36 +++++++++++++++++++
 src/components/Button.tsx              |  3 +-
 src/components/Container.tsx           |  6 +++-
 src/components/Footer.tsx              | 46 +++++++++++++++++++++---
 src/components/Header.tsx              |  6 ++++
 src/components/Input.tsx               | 12 +++++--
 src/components/Layout.tsx              | 10 +++++-
 src/components/Navigation.tsx          | 50 ++++++++++++++------------
 src/components/NewsTeaser.tsx          | 49 ++++++++++++++++++++-----
 src/components/Switch.tsx              | 20 +++++++++--
 src/hooks/useForm.ts                   |  7 +++-
 src/index.css                          |  8 +++++
 src/pages/Landing/Contact.tsx          | 26 ++++++++------
 src/pages/Landing/Landing.tsx          |  2 +-
 src/pages/Landing/MissionStatement.tsx | 10 +++++-
 tailwind.config.js                     |  4 ++-
 18 files changed, 259 insertions(+), 70 deletions(-)
 create mode 100644 src/assets/icons/linkedin.tsx

diff --git a/src/assets/content/newsItems.ts b/src/assets/content/newsItems.ts
index cf00818..05aef53 100644
--- a/src/assets/content/newsItems.ts
+++ b/src/assets/content/newsItems.ts
@@ -1,6 +1,7 @@
 export type NewsItem = {
 	key: string;
 	image: string;
+	altText: string;
 	title: string;
 	summary: string;
 	href: string;
@@ -9,38 +10,44 @@ export type NewsItem = {
 const newsItems: NewsItem[] = [
 	{
 		key: "0",
-		title: "Distinguishing between ARIA and native HTML attributes",
+		title:
+			"TinyMCE 7 - Revision History, Document Converters, Markdown and more!",
 		summary:
-			"As a developer, you want to create more inclusive and accessible digital experiences for your users. Great! It’s possible, however, that you might be feeling a bit confused or overwhelmed by the element attributes that can affect the usability for users of assistive technology.",
-		href: "https://www.deque.com/blog/distinguishing-between-aria-and-native-html-attributes/",
+			"The latest version of TinyMCE is out and we have several highly requested features including Markdown, Revision History, and Document Converters.",
+		href: "https://dev.to/tinymce/tinymce-7-revision-history-document-converters-markdown-and-more-551n",
 		image:
 			"https://images.unsplash.com/photo-1556484687-30636164638b?q=80&w=3474&auto=format&fit=crop",
+		altText: "Hands of multiple people",
 	},
 	{
 		key: "1",
-		title:
-			"Uber Must Pay Wheelchair User $35,000, Provide Accessible Rides: B.C. Human Rights Tribunal",
+		title: "Accessibility tips from an accessibility engineer",
 		summary:
-			"It was the first time a ride-hailing app in Canada has been the subject of a human rights tribunal, the ruling said Author of the article:Susan Lazaruk",
-		href: "https://www.accessibilitynewsinternational.com/uber-must-pay-wheelchair-user-35000-provide-accessible-rides-b-c-human-rights-tribunal/",
+			"I am a blind accessibility engineer and programmer and I thought I would write an article detailing some of the common things I see in my day job.",
+		href: "https://dev.to/westbrookc16/accessibility-tips-from-an-accessibility-engineer-4kl8",
 		image:
 			"https://images.unsplash.com/photo-1505243542579-da5adfe8338f?q=80&w=3540&auto=format&fit=crop",
+		altText: "Two people giving each other a handshake",
 	},
 	{
 		key: "2",
-		title: "E-inclusion demo",
-		summary: "This is a demo of the E-inclusion project.",
-		href: "",
+		title: "Using Aria States To Toggle Tailwind Classes",
+		summary:
+			"I maintain an internal UI library for a number of large sites. It's got a number of JavaScript interactions for menus, search buttons and similar.",
+		href: "https://dev.to/endymion1818/using-aria-states-to-toggle-tailwind-classes-1lef",
 		image:
 			"https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=1740&auto=format&fit=crop",
+		altText: "A group of people sitting at a table with laptops and notebooks",
 	},
 	{
 		key: "3",
-		title: "E-inclusion demo",
-		summary: "This is a demo of the E-inclusion project.",
-		href: "",
+		title: "Responsive design and cross-device testing",
+		summary:
+			'The so-called "browser wars" long before current web standards like HTML 5 made some web developers add badges like "best viewed with Netscape" or "best viewed with Internet Explorer"',
+		href: "https://dev.to/ingosteinke/responsive-design-and-cross-device-testing-1hoe",
 		image:
 			"https://images.unsplash.com/photo-1476703993599-0035a21b17a9?q=80&w=1740&auto=format&fit=crop",
+		altText: "A mother with her 2 kids",
 	},
 ];
 
diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
index e0f03a6..3ed8716 100644
--- a/src/assets/icons/index.ts
+++ b/src/assets/icons/index.ts
@@ -1,3 +1,4 @@
 export { default as ArrowRight } from "./arrowRight.tsx";
 export { default as IcappsLogo } from "./icappsLogo.tsx";
 export { default as Exclamation } from "./exclamation.tsx";
+export { default as LinkedIn } from "./linkedin.tsx";
diff --git a/src/assets/icons/linkedin.tsx b/src/assets/icons/linkedin.tsx
new file mode 100644
index 0000000..76ffdad
--- /dev/null
+++ b/src/assets/icons/linkedin.tsx
@@ -0,0 +1,36 @@
+import type { SvgIcon } from "./types";
+
+function exclamation({ title, width = 24, height = 24, ...props }: SvgIcon) {
+	return (
+		<svg
+			width={width}
+			height={height}
+			viewBox="0 0 24 24"
+			fill="none"
+			{...props}
+		>
+			<title>{title}</title>
+
+			<path
+				d="M6.5 8C7.32843 8 8 7.32843 8 6.5C8 5.67157 7.32843 5 6.5 5C5.67157 5 5 5.67157 5 6.5C5 7.32843 5.67157 8 6.5 8Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M5 10C5 9.44772 5.44772 9 6 9H7C7.55228 9 8 9.44771 8 10V18C8 18.5523 7.55228 19 7 19H6C5.44772 19 5 18.5523 5 18V10Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M11 19H12C12.5523 19 13 18.5523 13 18V13.5C13 12 16 11 16 13V18.0004C16 18.5527 16.4477 19 17 19H18C18.5523 19 19 18.5523 19 18V12C19 10 17.5 9 15.5 9C13.5 9 13 10.5 13 10.5V10C13 9.44771 12.5523 9 12 9H11C10.4477 9 10 9.44772 10 10V18C10 18.5523 10.4477 19 11 19Z"
+				fill="currentColor"
+			/>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M20 1C21.6569 1 23 2.34315 23 4V20C23 21.6569 21.6569 23 20 23H4C2.34315 23 1 21.6569 1 20V4C1 2.34315 2.34315 1 4 1H20ZM20 3C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3H20Z"
+				fill="currentColor"
+			/>
+		</svg>
+	);
+}
+
+export default exclamation;
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index b35f830..d984bb6 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -4,7 +4,7 @@ import { twMerge } from "tailwind-merge";
 export type ButtonProps = PropsWithChildren &
 	ButtonHTMLAttributes<HTMLButtonElement>;
 
-function Button({ type = "button", ...props }: ButtonProps) {
+function Button({ type = "button", className, ...props }: ButtonProps) {
 	return (
 		<button
 			className={twMerge(
@@ -16,6 +16,7 @@ function Button({ type = "button", ...props }: ButtonProps) {
 				"py-2",
 				"px-4",
 				"rounded",
+				className,
 			)}
 			type={type}
 			{...props}
diff --git a/src/components/Container.tsx b/src/components/Container.tsx
index 0df0185..d1cb8a5 100644
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@@ -1,3 +1,4 @@
+import { useAppState } from "@/providers";
 import type { HTMLAttributes, PropsWithChildren } from "react";
 import { twMerge } from "tailwind-merge";
 
@@ -7,8 +8,11 @@ export type ContainerProps = PropsWithChildren &
 	};
 
 function Container({ className, narrow, ...props }: ContainerProps) {
+	const { isCompliant } = useAppState();
+	const Element = isCompliant ? "section" : "div";
+
 	return (
-		<div
+		<Element
 			className={twMerge(
 				"container",
 				"mx-auto",
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index c972c61..0e38578 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,11 +1,49 @@
-import { Container } from ".";
+import { LinkedIn } from "@/assets/icons";
+import { useAppState } from "@/providers";
+import { Container, Typography } from ".";
+
+const ADDRESS = "Hangar 26/27, Rijnkaai 100 B16, 2000 Antwerp Belgium";
 
 function footer() {
+	const { isCompliant } = useAppState();
+
 	return (
 		<Container className="my-0 md:my-0 lg:my-0 xl:my-0">
-			<div className="py-6 flex border-t border-opacity-50">
-				<h5 className="font-bold mr-3">Adres</h5>
-				<p>Hangar 26/27, Rijnkaai 100 B16, 2000 Antwerp Belgium</p>
+			<div className="py-6 border-t border-opacity-50 lg:flex items-end">
+				<div>
+					{isCompliant && (
+						<Typography variant="h6" as="h2" className="mr-2">
+							Adres
+							<span className="sr-only">: </span>
+						</Typography>
+					)}
+					<p>
+						{isCompliant ? (
+							<a
+								target="_blank"
+								href="https://www.google.com/maps/dir/?api=1&destination=icapps"
+								rel="noreferrer"
+							>
+								{ADDRESS}
+							</a>
+						) : (
+							ADDRESS
+						)}
+					</p>
+				</div>
+				<div className="ml-auto mt-4 lg:mt-0">
+					<a
+						href="https://www.linkedin.com/company/icapps"
+						target="_blank"
+						rel="noreferrer"
+						className="block lg:p-2 lg:-mr-2"
+					>
+						<LinkedIn title="LinkedIn" />
+						{isCompliant && (
+							<span className="sr-only">Go to icapps' LinkedIn page</span>
+						)}
+					</a>
+				</div>
 			</div>
 		</Container>
 	);
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 3d1a7dd..e61355c 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -22,6 +22,12 @@ function Header() {
 
 				<div className="mt-12 grow flex items-center">
 					<h1 className="uppercase text-4xl lg:text-7xl/normal">
+						{isCompliant && (
+							<span className="block uppercase text-xl font-bold">
+								E-inclusion demo
+								<span className="sr-only">: </span>
+							</span>
+						)}
 						The only <strong>disability</strong> is when people cannot see{" "}
 						<strong>human potential</strong>.
 					</h1>
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index b5e4efc..7073c1f 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -16,12 +16,14 @@ function Input({ label, className, multiline, error, ...props }: InputProps) {
 
 	return (
 		<div className="mb-4">
-			<label htmlFor={id} className="block mb-1 uppercase font-light text-sm">
+			<label htmlFor={id} className="block mb-1 font-light text-sm">
 				{label}
 			</label>
+
 			<Element
 				id={id}
 				className={twMerge([
+					"block",
 					"w-full",
 					"max-w-[80ch]",
 					"p-3",
@@ -31,12 +33,18 @@ function Input({ label, className, multiline, error, ...props }: InputProps) {
 					error ? "border-red" : "border-black",
 					className,
 				])}
+				{...(error
+					? { "aria-invalid": true, "aria-describedby": `${id}-error` }
+					: {})}
 				{...(multiline ? { rows: 5 } : {})} // Only add rows attribute if multiline
 				{...props}
 			/>
 
 			{error && (
-				<span className="text-red text-sm mt-1 flex items-center">
+				<span
+					id={`${id}-error`}
+					className="bg-red p-2  rounded-md text-sm inline-flex mt-2 items-center"
+				>
 					<Exclamation title="Error: " className="mr-2" />
 					{error}
 				</span>
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 633f1e2..bd07f14 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -19,7 +19,15 @@ function Layout({ children }: Layout) {
 	useEffect(() => {
 		document.title = isCompliant ? "E-inclusion demo" : "";
 		document.documentElement.lang = isCompliant ? "en" : "";
-	});
+
+		const viewportElement = document.querySelector("meta[name=viewport]");
+		viewportElement?.setAttribute(
+			"content",
+			isCompliant
+				? "width=device-width, initial-scale=1.0"
+				: "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0",
+		);
+	}, [isCompliant]);
 
 	return (
 		<div className={twMerge(["flex", "flex-col", "size-full"])}>
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 848ccbb..b44f4c3 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -1,6 +1,6 @@
 import { navigationItems } from "@/assets/content";
 import { IcappsLogo } from "@/assets/icons";
-import { Switch } from "@/components";
+import { Button } from "@/components";
 import { useAppState } from "@/providers/AppStateProvider";
 import { useState } from "react";
 import { twMerge } from "tailwind-merge";
@@ -8,6 +8,7 @@ import { twMerge } from "tailwind-merge";
 function Navigation() {
 	const [isNavOpen, setIsNavOpen] = useState(false);
 	const { isCompliant, toggleCompliancy } = useAppState();
+	const NavElement = isCompliant ? "nav" : "div";
 
 	const toggleNavigation = () => {
 		setIsNavOpen((prev) => !prev);
@@ -17,7 +18,7 @@ function Navigation() {
 		<div className="w-full sm:flex sm:items-center sm:justify-between my-4 sm:my-6 lg:my-8">
 			<div className="flex items-center justify-between">
 				<a
-					className="flex-none text-xl font-semibold focus:outline-none focus:ring-1 focus:ring-gray-600"
+					className="flex-none text-xl font-semibold"
 					title={isCompliant ? "Icapps" : ""}
 					href="#!"
 				>
@@ -31,12 +32,19 @@ function Navigation() {
 					)}
 				</a>
 				<div className="sm:hidden">
-					{/* biome-ignore lint/a11y/useButtonType: <explanation> */}
 					<button
-						aria-hidden={isCompliant}
+						type="button"
 						onClick={toggleNavigation}
-						className="p-2 inline-flex justify-center items-center gap-2 rounded-lg border border-gray-700 hover:border-gray-600 font-medium text-congress-blue-600 hover:text-congress-blue-400 shadow-sm align-middle focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-900 focus:ring-blue-600 transition-all text-sm"
+						className="p-2 inline-flex justify-center items-center gap-2 rounded-lg border border-gray-700 hover:border-gray-600 font-medium text-congress-blue-600 hover:text-congress-blue-400 shadow-sm align-middle transition-all text-sm"
+						{...(isCompliant
+							? {
+									"aria-expanded": isNavOpen,
+									"aria-haspopup": "true",
+									"aria-controls": "menu",
+							  }
+							: {})}
 					>
+						{isCompliant && <span className="sr-only">Toggle navigation</span>}
 						<svg
 							className="flex-shrink-0 size-4"
 							xmlns="http://www.w3.org/2000/svg"
@@ -67,27 +75,21 @@ function Navigation() {
 				</div>
 			</div>
 			<div
+				id="menu"
 				className={twMerge(
-					"overflow-hidden transition-all duration-300 basis-full grow sm:block",
+					"overflow-hidden sm:overflow-visible transition-all duration-300 basis-full grow sm:block",
 					isNavOpen ? "max-h-screen" : "max-h-0 sm:max-h-none",
 				)}
 			>
-				<div className="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:ps-5 py-2">
+				<NavElement className="flex flex-col items-start gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:ps-5 py-2">
 					{navigationItems.map((item) => (
 						<a
 							key={item.title}
 							href={item.href}
 							className={twMerge(
 								"relative",
-								"block",
 								"font-medium",
-								"focus:outline-none",
 								isCompliant && [
-									"focus:ring-1",
-									"focus:ring-white",
-									"focus:ring-offset-4",
-									"focus:ring-offset-blueZodiac",
-									"pb-1",
 									'before:content-[""]',
 									"before:absolute",
 									"before:w-full",
@@ -102,20 +104,24 @@ function Navigation() {
 									"before:hover:scale-x-100",
 									"before:hover:origin-left",
 								],
-								item.isActive && ["font-bold", "text-white/30"],
+								item.isActive &&
+									(isCompliant
+										? ["font-bold", "underline underline-offset-4"]
+										: ["font-bold", "text-white/30"]),
 							)}
 						>
 							{item.title}
 						</a>
 					))}
 
-					<Switch
-						label="WCAG"
-						value={isCompliant}
-						onChange={toggleCompliancy}
-						className="ml-8"
-					/>
-				</div>
+					<Button
+						type="button"
+						className="bg-white hover:bg-white/80 text-blueZodiac"
+						onClick={() => toggleCompliancy()}
+					>
+						{isCompliant ? "Undo compliancy" : "Make compliant"}
+					</Button>
+				</NavElement>
 			</div>
 		</div>
 	);
diff --git a/src/components/NewsTeaser.tsx b/src/components/NewsTeaser.tsx
index c5a72ec..b043008 100644
--- a/src/components/NewsTeaser.tsx
+++ b/src/components/NewsTeaser.tsx
@@ -5,14 +5,50 @@ import { Typography } from ".";
 
 type NewsTeaserProps = Omit<NewsItem, "key">;
 
-function NewsTeaser({ image, title, summary }: NewsTeaserProps) {
+function NewsTeaser({ image, title, summary, href, altText }: NewsTeaserProps) {
 	const { isCompliant } = useAppState();
 
-	return (
+	return isCompliant ? (
+		<article className="relative mb-4 text-black flex flex-col pb-12 bg-white border-2">
+			<div className="p-4 order-2">
+				<Typography variant="h5" as={isCompliant ? "h3" : "h5"}>
+					{title}
+				</Typography>
+
+				<p>{summary}</p>
+
+				<a
+					href={href}
+					target="_blank"
+					rel="noreferrer"
+					className="absolute bottom-0 right-0 aspect-square bg-background text-white p-2"
+				>
+					<span className="sr-only">Read more about "{title}"</span>
+					<ArrowRight aria-hidden />
+				</a>
+			</div>
+
+			{/* biome-ignore lint/a11y/useAnchorContent: <explanation> */}
+			{/* <a
+				href={href}
+				aria-hidden
+				tabIndex={-1}
+				target="_blank"
+				rel="noreferrer"
+				className="absolute inset-0"
+			/> */}
+
+			<img
+				src={image}
+				alt={altText}
+				className="w-full aspect-video object-cover object-center order-1"
+			/>
+		</article>
+	) : (
 		<div className="relative mb-4 text-black flex flex-col pb-12 bg-white border-2">
 			<img
 				src={image}
-				alt={isCompliant ? title : ""}
+				alt=""
 				className="w-full aspect-video object-cover object-center"
 			/>
 			<div className="p-4">
@@ -20,15 +56,12 @@ function NewsTeaser({ image, title, summary }: NewsTeaserProps) {
 				<p>{summary}</p>
 
 				<a
-					href="#!"
+					href={href}
 					target="_blank"
 					rel="noreferrer"
 					className="absolute bottom-0 right-0 aspect-square bg-background text-white p-2"
 				>
-					{isCompliant && (
-						<span className="sr-only">Read more about "{title}"</span>
-					)}
-					<ArrowRight aria-hidden={isCompliant as true} />
+					<ArrowRight aria-hidden />
 				</a>
 			</div>
 		</div>
diff --git a/src/components/Switch.tsx b/src/components/Switch.tsx
index 8401e54..a4861c7 100644
--- a/src/components/Switch.tsx
+++ b/src/components/Switch.tsx
@@ -1,5 +1,5 @@
 import { useAppState } from "@/providers/AppStateProvider";
-import type { HTMLAttributes } from "react";
+import { type HTMLAttributes, useId } from "react";
 import { twMerge } from "tailwind-merge";
 
 type SwitchProps = Omit<HTMLAttributes<HTMLInputElement>, "onChange"> & {
@@ -9,6 +9,7 @@ type SwitchProps = Omit<HTMLAttributes<HTMLInputElement>, "onChange"> & {
 };
 
 function Switch({ label, value, onChange, className, ...props }: SwitchProps) {
+	const id = useId();
 	const { isCompliant } = useAppState();
 
 	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -25,12 +26,14 @@ function Switch({ label, value, onChange, className, ...props }: SwitchProps) {
 			)}
 		>
 			<input
+				id={id}
 				type="checkbox"
 				checked={value}
 				className="sr-only peer"
 				onChange={handleChange}
 				{...props}
 			/>
+
 			<div
 				className={twMerge(
 					"relative",
@@ -54,10 +57,21 @@ function Switch({ label, value, onChange, className, ...props }: SwitchProps) {
 					"after:w-5",
 					"after:transition-all",
 					"peer-checked:bg-green",
-					isCompliant && ["focus:ring-1", "focus:ring-white"],
+					isCompliant && [
+						"peer-focus:ring-2",
+						"peer-focus:ring-brightTurquoise",
+						"peer-focus:ring-offset-4",
+						"peer-focus:ring-offset-blueZodiac",
+					],
 				)}
 			/>
-			<span className="ms-3 text-sm font-medium">{label}</span>
+			{isCompliant ? (
+				<label className="ms-3 text-sm font-medium" htmlFor={id}>
+					{label}
+				</label>
+			) : (
+				<span className="ms-3 text-sm font-medium">{label}</span>
+			)}
 		</label>
 	);
 }
diff --git a/src/hooks/useForm.ts b/src/hooks/useForm.ts
index ee15333..e8112ad 100644
--- a/src/hooks/useForm.ts
+++ b/src/hooks/useForm.ts
@@ -10,7 +10,7 @@ const formErrors: Record<keyof ValidityState, string> = {
 	tooLong: "Please shorten this text.",
 	tooShort: "Please lengthen this text.",
 	typeMismatch: "Please match the requested format.",
-	valueMissing: "Please fill out this field.",
+	valueMissing: "Please fill in this field.",
 	valid: "",
 };
 
@@ -34,6 +34,11 @@ function useForm(formRef: RefObject<HTMLFormElement>) {
 		if (!isValid) {
 			if (!formRef.current?.checkValidity()) {
 				e.preventDefault();
+				(
+					formRef.current?.querySelector("input:invalid, textarea:invalid") as
+						| HTMLInputElement
+						| HTMLTextAreaElement
+				)?.focus();
 				return false;
 			}
 		}
diff --git a/src/index.css b/src/index.css
index c6a1834..1d2aedf 100644
--- a/src/index.css
+++ b/src/index.css
@@ -14,4 +14,12 @@
   body.compliant p {
     @apply max-w-[60ch];
   }
+
+  body.compliant button,
+  body.compliant a,
+  body.compliant input,
+  body.compliant select,
+  body.compliant textarea {
+    @apply focus:outline-none focus:ring focus:ring-outlineColor;
+  }
 }
diff --git a/src/pages/Landing/Contact.tsx b/src/pages/Landing/Contact.tsx
index 78957b4..30e5b9e 100644
--- a/src/pages/Landing/Contact.tsx
+++ b/src/pages/Landing/Contact.tsx
@@ -9,7 +9,6 @@ function Contact() {
 	const { validate, errors } = useForm(formRef);
 
 	const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
-		if (!isCompliant) return;
 		if (!formRef.current) return;
 
 		const isValid = validate(e);
@@ -36,33 +35,30 @@ function Contact() {
 
 	return (
 		<Container narrow>
-			<Typography variant="h2" as="h1" className="mb-8">
-				Contact
+			<Typography variant="h2" as={isCompliant ? "h2" : "h1"} className="mb-8">
+				{isCompliant ? "Contacteer ons" : "Contact"}
 			</Typography>
 
-			<form onSubmit={handleSubmit} noValidate={isCompliant} ref={formRef}>
+			<form onSubmit={handleSubmit} noValidate ref={formRef}>
 				{isCompliant ? (
 					<>
 						<Input
 							type="text"
 							name="name"
 							label="Name"
-							placeholder="John Doe"
 							error={errors?.name}
 							required
 						/>
 						<Input
 							type="email"
 							name="email"
-							label="E-mail"
-							placeholder="john.doe@example.com"
+							label="E-mail address"
 							error={errors?.email}
 							required
 						/>
 						<Input
 							label="Message"
 							name="message"
-							placeholder="Ad culpa duis aute veniam ullamco in cillum cupidatat cupidatat"
 							error={errors?.message}
 							multiline
 							required
@@ -74,24 +70,32 @@ function Contact() {
 					<>
 						<input
 							type="text"
+							name="name"
 							placeholder="Name"
-							className="w-full mb-4 p-3 bg-transparent border-2"
+							className="w-full mb-4 p-3 bg-transparent border-2 border-gray"
 							required
 						/>
+
 						<input
 							type="text"
+							name="email"
 							placeholder="E-mail address"
-							className="w-full mb-4 p-3 bg-transparent border-2"
+							className="w-full mb-4 p-3 bg-transparent border-2 border-gray"
 							required
 						/>
 
 						<textarea
-							className="w-full p-3 bg-transparent border-2"
+							name="message"
+							className="w-full p-3 bg-transparent border-2 border-gray"
 							rows={10}
 							placeholder="Message"
 							required
 						/>
 
+						{errors && (
+							<span className="text-red">Please fill in all fields</span>
+						)}
+
 						<button
 							type="submit"
 							className="border-2 py-3 px-6 mt-2 block ml-auto"
diff --git a/src/pages/Landing/Landing.tsx b/src/pages/Landing/Landing.tsx
index 3d7f1f0..8ae852c 100644
--- a/src/pages/Landing/Landing.tsx
+++ b/src/pages/Landing/Landing.tsx
@@ -9,7 +9,7 @@ function Landing() {
 		<Layout>
 			<MissionStatement
 				title="About us and our mission"
-				body="Aliquip anim velit nulla anim mollit do officia officia. Ullamco eu enim id eu ullamco. Esse minim esse nisi reprehenderit magna dolore dolore qui nisi esse nisi irure sit. Laboris minim esse nisi elit dolore nostrud ad ullamco tempor. Sunt magna sit mollit anim. Laborum irure proident eiusmod adipisicing id adipisicing. Eu sunt in nisi in fugiat eiusmod quis aute duis nisi cupidatat excepteur."
+				body="We are a team of passionate developers, designers, and project managers who love to create digital products. We want to use technology seamlessly to enrich your daily life. We are here to help you with your digital challenges and to make your ideas come to life."
 				src="https://icapps.com/uploads/site/_1299xAUTO_fit_center-center_80_none/19418/icapps-79.webp"
 				altText="Icapps team photo"
 				quote="We want to use technology seamlessly to enrich your daily life."
diff --git a/src/pages/Landing/MissionStatement.tsx b/src/pages/Landing/MissionStatement.tsx
index e159779..3902c59 100644
--- a/src/pages/Landing/MissionStatement.tsx
+++ b/src/pages/Landing/MissionStatement.tsx
@@ -1,4 +1,5 @@
 import { useAppState } from "@/providers/AppStateProvider";
+import { twMerge } from "tailwind-merge";
 import Container from "../../components/Container";
 import Typography from "../../components/Typography";
 
@@ -38,7 +39,14 @@ function MissionStatement({
 					/>
 				</div>
 				<div className="hidden lg:flex items-center lg:w-2/5 bg-white/90 text-background p-8 rounded-lg shadow-lg">
-					<blockquote className="text-xl/normal font-bold text-center">
+					<blockquote
+						className={twMerge(
+							"text-xl/normal",
+							"font-bold",
+							"text-center",
+							isCompliant && "text-blueZodiac",
+						)}
+					>
 						{quote}
 					</blockquote>
 				</div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 230d900..18ce931 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,12 +7,14 @@ export default {
 			transparent: "transparent",
 			white: "#ffffff",
 			black: "#000000",
+			gray: "#cccccc",
 			blueZodiac: "#0a1930",
 			green: "#00ff00",
 			brightTurquoise: "#00e5ff",
-			red: "#ff0000",
+			red: "#EF5350",
 
 			// specific
+			outlineColor: "#93C700",
 			background: "#007da3",
 		},