Preparing backend integration

front/src/views/AboutView.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+
+import TextBlock from "@/components/TextBlock.vue";
+</script>
+
+<template>
+
+  <TextBlock>
+    <h1>About</h1>
+    <p>
+      Inspired by <a href="https://when2meet.com">when2meet</a>, Let's meet is a free and open-source
+      app that allows you and your friends to find a date to meet. From now on, there is no need to spend
+      hours and hours trying to find a suitable day for everyone.
+    </p>
+
+    <p>
+      Developed and hosted by Naaturel<br>
+      Check my links out !<br>
+      <a href="https://github.com/">Github</a><br>
+      <a href="https://bsky.app/profile/naaturel.be">Blue Sky</a>
+    </p>
+  </TextBlock>
+
+</template>
+
+<style scoped>
+
+</style>

front/src/views/CreateView.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+
+import Calendar from "@/components/Calendar.vue";
+import TextBlock from "@/components/TextBlock.vue";
+import NavLink from "@/components/NavLink.vue";
+</script>
+
+<template>
+
+  <div class="container">
+    <TextBlock class="title">
+      <h1>Create an <span class="colored-text">event</span></h1>
+    </TextBlock>
+    <div class="event-form">
+      <Calendar class="calendar"/>
+      <NavLink path="/create" description="Create" class="create-button"></NavLink>
+    </div>
+  </div>
+
+</template>
+
+<style scoped>
+
+.container
+{
+  width: 80%;
+  gap: 10vw;
+}
+
+.event-form {
+  display: flex;
+  flex-direction: column;
+  width: 45%;
+  gap: 20px;
+}
+
+/* MEDIA QUERIES */
+@media screen and (min-width: 1501px) {
+
+  .title {
+    width: 50%;
+  }
+
+  .title h1
+  {
+    font-size: 4rem;
+  }
+
+  .calendar {
+    width: 100%;
+    min-width: 100%;
+  }
+}
+
+@media screen and (max-width: 1500px) {
+
+  .title, .event-form {
+    width: 100%;
+  }
+
+  .title {
+    height: fit-content;
+  }
+}
+
+</style>

front/src/views/ErrorView.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+
+import TextBlock from "@/components/TextBlock.vue";
+</script>
+
+<template>
+  <TextBlock>
+    <h1>Oopsie</h1>
+    <p>Something went wrong</p>
+  </TextBlock>
+
+</template>
+
+<style scoped>
+
+.text-block {
+  border-left: solid 4px red;
+  width: 35%;
+  height: 35%;
+}
+
+</style>

front/src/views/HomeView.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+
+import NavLink from "@/components/NavLink.vue";
+import TextBlock from "@/components/TextBlock.vue";
+</script>
+
+<template>
+
+  <div class="container">
+    <TextBlock class="introduction">
+      <h1>Welcome !</h1>
+      <p>
+        This website is currently under <span class="colored-text">development</span> and might look ugly as fuck
+        bla bla bla I'm just writting things nobody will read to fill the space and see how it looks.
+      </p>
+      <p>
+        Yes I know i could have use
+        a Lorem Ipsum but it seems more natural with words everyone can understand
+      </p>
+      </TextBlock>
+
+      <div class="actions-group">
+        <h1>Meet up <span class="colored-text">now</span> !</h1>
+        <NavLink path="/create" description="Create" class="button"></NavLink>
+        <NavLink path="/join" description="Join" class="button"></NavLink>
+    </div>
+  </div>
+
+</template>
+
+
+<style scoped>
+
+.container, .actions-group {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.container {
+  width: 80%;
+  gap: 10vw;
+}
+
+.introduction p
+{
+  width: 80%;
+  text-align: justify;
+}
+
+.actions-group {
+  flex-direction: column;
+  min-width: 250px;
+}
+
+.actions-group {
+  justify-content: center;
+  gap: 4vh;
+  height: fit-content;
+  border-radius: var(--radius);
+  filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.0));
+  margin-bottom: 5vh;
+}
+
+.actions-group h1
+{
+  margin-top: 0;
+}
+
+.actions-group::before,
+.actions-group::after {
+  content: "";
+  position: absolute;
+  width: 5%;
+  height: 15%;
+  border: 4px solid black;
+}
+
+.actions-group::before {
+  top: 0;
+  left: 0;
+  border-radius: var(--radius);
+  border-right: none;
+  border-bottom: none;
+}
+
+.actions-group::after {
+  bottom: 0;
+  right: 0;
+  border-radius: var(--radius);
+  border-left: none;
+  border-top: none;
+}
+
+/* MEDIA QUERIES */
+@media screen and (min-width: 1501px) {
+
+  .introduction {
+    padding: 0 0 1vw 0;
+    width: 50%;
+    min-height: 40vh;
+  }
+
+  .actions-group {
+    width: 35%;
+    min-height: 40vh;
+  }
+
+  .introduction h1
+  {
+    font-size: 4rem;
+  }
+}
+
+@media screen and (max-width: 1500px) {
+
+  .introduction, .actions-group {
+    width: 100%;
+  }
+
+  .introduction {
+    min-height: 25vh;
+  }
+
+  .actions-group {
+    min-height: 40vh;
+  }
+
+  .introduction h1
+  {
+    font-size: 3rem;
+  }
+}
+
+@media screen and (min-width: 801px) {
+  .button {
+    width: 15vw;
+    min-width: 15vw;
+  }
+}
+
+@media screen and (max-width: 800px) {
+  .button {
+    width: 50vw;
+    min-width: 50vw;
+  }
+
+}
+
+</style>

front/src/views/JoinView.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+
+import TextBlock from "@/components/TextBlock.vue";
+</script>
+
+<template>
+
+  <TextBlock>
+    <h1>Join an event</h1>
+    <p>
+      This website is currently under <span class="colored-text">development</span> and might look ugly as fuck
+      bla bla bla I'm just writing things nobody will read to fill the space and see how it looks.
+    </p>
+    <p>
+      Yes I know i could have use
+      a Lorem Ipsum but it seems more natural with words everyone can understand
+    </p>
+  </TextBlock>
+
+</template>
+
+<style scoped>
+
+</style>