feat/created new sign up component

src/components/Login/LoginForm.vue

@@ -10,11 +10,11 @@ const handleSubmit = () => {
 <template>
   <div class="container-fluid">
     <form id="loginForm" @submit.prevent="handleSubmit">
-      <BaseInput id="usernameInput"
-                 input-id="username"
+      <BaseInput id="emailInput"
+                 input-id="email"
                  type="text"
-                 label="Username"
-                 placeholder="Enter username"/>
+                 label="Email"
+                 placeholder="Enter your email"/>
       <BaseInput id="passwordInput"
                  input-id="password"
                  type="password"
@@ -27,24 +27,16 @@ const handleSubmit = () => {
 
 <style scoped>
 .container-fluid {
-  height: 91vh;
-  display: grid;
-  justify-items: center;
-  align-items: center;
-}
-
-#usernameInput, #passwordInput, #confirmButton {
-  margin: 15px 0;
-}
-
-#confirmButton {
-  justify-content: center;
+    max-width: 450px;
 }
 
 #loginForm {
   display: flex;
   flex-direction: column;
-  min-width: 280px;
-  width: 40%;
+  justify-items: center;
+}
+
+#emailInput, #passwordInput, #confirmButton {
+  margin: 1rem 0;
 }
 </style>
\ No newline at end of file

src/components/SignUp/SignUp.vue

+<script setup lang="ts">
+
+import SignUpForm from '@/components/SignUp/SignUpForm.vue'
+</script>
+
+<template>
+  <SignUpForm/>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/components/SignUp/SignUpForm.vue

+<script setup lang="ts">
+import BaseInput from '@/components/InputFields/BaseInput.vue'
+import Button1 from '@/components/Buttons/Button1.vue'
+
+const handleSubmit = () => {
+  alert("Expected to be transferred to initial configuration") // Todo remove this line
+}
+
+</script>
+
+<template>
+  <div class="container">
+    <form id="signUpForm" @submit.prevent="handleSubmit">
+      <BaseInput id="firstNameInput"
+                 input-id="first-name"
+                 type="text"
+                 label="First name"
+                 placeholder="Enter your first name"/>
+      <BaseInput id="surnameInput"
+                 input-id="surname"
+                 type="text"
+                 label="Surname"
+                 placeholder="Enter your surname"/>
+      <BaseInput id="emailInput"
+                 input-id="email"
+                 type="text"
+                 label="Email"
+                 placeholder="Enter your email"/>
+      <BaseInput id="passwordInput"
+                 input-id="password"
+                 type="password"
+                 label="Password"
+                 placeholder="Enter password"/>
+      <BaseInput id="confirmPasswordInput"
+                 input-id="confirmPassword"
+                 type="password"
+                 label="Confirm Password"
+                 placeholder="Confirm password"/>
+      <button1 id="confirmButton" @click="handleSubmit" button-text="Sign up"></button1>
+    </form>
+  </div>
+
+</template>
+
+<style scoped>
+
+.container {
+  max-width: 450px;
+}
+
+#signUpForm {
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+}
+
+#firstNameInput, #surnameInput, #emailInput, #passwordInput, #confirmButton, #confirmPasswordInput {
+  margin: 1rem 0;
+}
+</style>
\ No newline at end of file

src/router/index.ts

 // Import necessary dependencies from Vue Router and your views
 import { createRouter, createWebHistory } from 'vue-router';
 import LoginView from '../views/Authentication/LoginView.vue';
+import SignUp from '@/components/SignUp/SignUp.vue'
 
 const routes = [
   {
@@ -36,6 +37,11 @@ const routes = [
     name: 'login',
     component: LoginView,
   },
+  {
+    path: '/sign-up',
+    name: 'sign up',
+    component: () => import('@/views/Authentication/SignUpView.vue'),
+  },
   {
     path: '/:pathMatch(.*)*',
     redirect: { name: 'not-found' },

src/views/Authentication/SignUpView.vue

+<script setup lang="ts">
+import Footer from '@/components/BaseComponents/Footer.vue'
+import Menu from '@/components/BaseComponents/Menu.vue'
+import SignUp from '@/components/SignUp/SignUp.vue'
+</script>
+
+<template>
+  <Menu/>
+  <SignUp/>
+  <Footer/>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/HomeView.vue

@@ -3,5 +3,7 @@
 </script>
 
 <template>
-    <RouterLink to="login">Login</RouterLink>
+  <RouterLink to="login">Login</RouterLink>
+  <br/>
+  <RouterLink to="sign-up">Sign up</RouterLink>
 </template>