+
+
+
+ Name:
+ {formData.name}
+
+
+ Age:
+ {formData.age}
+
+
+ Email:
+ {formData.email}
+
+
+ Password:
+ {formData.password}
+
+
+ Confirm password:
+ {formData.confirmPassword}
+
+
+ Gender:
+ {formData.gender}
+
+
+ Country:
+ {formData.country}
+
+
+ T&C:
+ {formData.terms ? 'accepted' : 'not accepted'}
+
+
+ );
+}
+
+export default FormTile;
diff --git a/src/components/form-tile/index.ts b/src/components/form-tile/index.ts
new file mode 100644
index 0000000..c1c2592
--- /dev/null
+++ b/src/components/form-tile/index.ts
@@ -0,0 +1 @@
+export { FormTile } from './form-tile';
diff --git a/src/components/header/header.module.css b/src/components/header/header.module.css
new file mode 100644
index 0000000..cdc3390
--- /dev/null
+++ b/src/components/header/header.module.css
@@ -0,0 +1,27 @@
+.headerWrapper {
+ max-width: 1600px;
+ width: 100%;
+ padding: 16px clamp(2.188rem, 1.027rem + 5.8vw, 6.25rem);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.header {
+ position: sticky;
+ top: 0;
+ z-index: 1;
+ background-color: #3d5a80;
+ color: white;
+ box-shadow: rgba(0, 0, 0, 0.2) 0 0 20px;
+}
+
+.navPanel {
+ display: flex;
+ gap: 16px;
+ a.active {
+ color: #00ffe5;
+ border-bottom: 2px solid #00ffe5;
+ }
+}
+
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
new file mode 100644
index 0000000..12f8563
--- /dev/null
+++ b/src/components/header/header.tsx
@@ -0,0 +1,31 @@
+import type { JSX } from 'react';
+import styles from './header.module.css';
+import { NavLink } from 'react-router-dom';
+
+export function Header(): JSX.Element {
+ return (
+