Merge branch 'main' of https://github.com/SSIvanov19/catch-up

client/src/api/models/register.ts

@@ -17,6 +17,24 @@
  * @interface Register
  */
 export interface Register {
+[x: string]: string | null /* eslint-disable */
+/**
+* CatchUp API
+* CatchUp API for the CatchUp project
+*
+* OpenAPI spec version: 1.0.0
+*
+*
+* NOTE: This class is auto generated by the swagger code generator program.
+* https://github.com/swagger-api/swagger-codegen.git
+* Do not edit the class manually.
+*/
+/**
+*
+* @export
+* @interface Register
+*/
+;
     /**
      * Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.
      * @type {string}

client/src/components/GaugeChart.vue

@@ -1,3 +1,108 @@
+<!-- <script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  percentage: {
+    type: Number,
+    required: true
+  }
+})
+
+const cssTransformRotateValue = computed(() => {
+  const percentageAsFraction = props.percentage / 100
+  const halfPercentage = percentageAsFraction / 2
+
+  return `${halfPercentage}turn`
+})
+
+
+</script>
+
+<template>
+    <div class="gauge__outer">
+      <div class="gauge__inner">
+        <div class="gauge__segment gauge__very-negative"></div>
+        <div class="gauge__segment gauge__negative"></div>
+        <div class="gauge__segment gauge__positive"></div>
+        <div class="gauge__segment gauge__very-positive"></div>
+        <div class="gauge__fill" :style="{ transform: `rotate(${cssTransformRotateValue})` }"></div>
+        <div class="gauge__arrow" :style="{ transform: `rotate(${cssTransformRotateValue})` }"></div>
+        <div class="gauge__cover">
+          {{ percentage?.toFixed(0) }}%
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  
+
+<style scoped>
+
+.gauge__arrow {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform-origin: 50% 100%;
+  width: 20px; /* Adjust size as needed */
+  height: 106px; /* Adjust size as needed */
+  background: #000; /* Color of the arrow */
+  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+  transition: transform 0.2s ease-out;
+  z-index: 1 ;
+}
+
+.gauge__outer {
+  width: 100%;
+  max-width: 250px;
+}
+
+.gauge__inner {
+  width: 100%;
+  height: 0;
+  padding-bottom: 50%;
+  background: #b4c0be;
+  position: relative;
+  border-top-left-radius: 100% 200%;
+  border-top-right-radius: 100% 200%;
+  overflow: hidden;
+}
+
+.gauge__fill {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: inherit;
+  height: 100%;
+  background: #009578;
+  transform-origin: center top;
+  transform: rotate(0turn);
+  transition: transform 0.2s ease-out;
+}
+
+.gauge__cover {
+  width: 75%;
+  height: 150%;
+  background: #ffffff;
+  position: absolute;
+  top: 25%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 50%;
+
+  /* Text */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 25%;
+  box-sizing: border-box;
+  font-family: 'Lexend', sans-serif;
+  font-weight: bold;
+  font-size: 32px;
+}
+
+
+</style> -->
+
 <script setup>
 import { computed } from 'vue';
 
@@ -14,6 +119,8 @@ const cssTransformRotateValue = computed(() => {
 
   return `${halfPercentage}turn`
 })
+
+
 </script>
 
 <template>
@@ -99,4 +206,4 @@ const cssTransformRotateValue = computed(() => {
 }
 
 
-</style>
+</style> -->

client/src/router/index.ts

@@ -8,6 +8,7 @@ import LandingView from '../views/LandingView.vue';
 import TestProduct from '../views/TestProduct.vue';
 import TestResults from '../views/TestResults.vue';
 import PricingView from '../views/PricingView.vue';
+import RegisterView from '../views/RegisterView.vue';
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
@@ -17,6 +18,7 @@ const router = createRouter({
         { path: '/pricing', component: PricingView},
         { path: '/results/:productName?', name:'results', component: TestResults},
         { path: '/login', component: Login},
+        { path: '/register', component: RegisterView},
         { path: '/dashboard', component: Dashboard },
         { path: '/items', component: Items },
         { path: '/addItem', component: AddItem },

client/src/views/AddItemView.vue

@@ -62,6 +62,10 @@ function submitForm() {
 </script>
 
 <style scoped lang="scss">
+    * {
+      font-family: 'Hanken Grotesk', sans-serif;
+    }
+    
 .add-items-container {
     display: flex;
     flex-direction: column;

client/src/views/LandingView.vue

@@ -15,19 +15,15 @@
   <section class="centered">
     <div class="content">
       <div class="content__text">
-        <p class="heading">Adapt <span>your</span> business<br> to the latest market trends</p>
-        <p class="description">Stay updated on the current <br> market trends of your products and adapt with ease</p>
+        <p class="heading">Adapt your business to the market trends</p>
+        <p class="description">Stay updated on the current market trends of your products and adapt with ease</p>
       </div>
       <div class="content__buttons">
         <router-link to="/test">Test Product</router-link>
         <router-link to="/register">Create Account</router-link>
       </div>
     </div>
   </section>
-
-
-  <video src="../assets/catch-up-video.mp4" autoplay muted></video>
-  <div class="background"></div>
 </template>
 
 <script setup lang="ts">
@@ -38,45 +34,14 @@
   font-family: 'Hanken Grotesk', sans-serif;
 }
 
-video {
-  position: absolute;
-  top: 0;
-  left: 28%;
-  z-index:1;
-  height: 100vh;
-  width: 100vw;
-  moz-transform: scaleX(-1);
-    -webkit-transform: scaleX(-1);
-    -o-transform: scaleX(-1);
-    transform: scaleX(-1);
-    -ms-filter: fliph; /*IE*/
-    filter: fliph; /*IE*/
-}
-
-.background {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100vw;
-  height: 100vh;
-  background: #F1F8F7;
-  z-index: 0;
-}
-
 .navbar {
   display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
   align-items: center;
   position: relative;
-  width: 100%;
+  width: 100vw;
   margin-top: 40px;
-  z-index: 3;
-  box-sizing: border-box;
-  padding: 1rem 2rem;
-  border-radius: 50rem;
-  background: rgba(255, 255, 255, 0.225);
-  backdrop-filter: blur(20px) saturate(120%);
-  border: 1px solid rgba(7, 11, 60, 0.211);
+  max-width: 850px;
 
   &__logo {
     img {
@@ -117,51 +82,44 @@ video {
 }
 
 .centered {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100vw;
-  height: 100vh;
   display: flex;
-  box-sizing: border-box;
-  padding: 0rem 10rem;
-
+  justify-content: center;
+  align-items: center;
+  height: 70vh;
 }
 
 .content {
   display: flex;
   justify-content: center;
-  align-items: left;
+  align-items: center;
   flex-direction: column;
   position: relative;
-  z-index: 2;
 
   &__text {
-    text-align: left;
+    text-align: center;
     margin-bottom: 4rem;
     gap: 4rem;
 
     .heading {
-      font-size: 1rem;
+      font-size: 2rem;
       font-weight: 700;
       margin-bottom: 1rem;
-      font-size: 55px;
+      font-size: 71px;
       font-style: normal;
       font-weight: 700;
       color: #1B1B1B;
-      font-family:'Montserrat';
-
-      span {
-        color: #3741F2;
-      }
+      width: 725px;
     }
 
     .description {
+      font-size: 1.2rem;
+      font-weight: 500;
       color: #1B1B1B;
-      font-family: "Hanken Grotesk";
-      font-size: 1.5625rem;
+      width: 725px;
+      text-align: center;
+      font-size: 25px;
       font-style: normal;
-      font-weight: 400;
+      font-weight: 500;
       line-height: normal;
     }
   }
@@ -195,11 +153,11 @@ video {
       justify-content: center;
       align-items: center;
       padding: 0.5rem 1rem;
-      border: 2px solid #3741F2;
+      border: 2px solid #40F99B;
       border-radius: 17px;
       width: 150px;
       height: 40px;
-      color: #3741F2;
+      color: #252525;
       text-decoration: none;
       transition: background-color 0.3s;
 

client/src/views/PricingView.vue

@@ -50,7 +50,7 @@
 
   <style scoped lang="scss">
   * {
-  font-family: 'Hanken Grotesk', sans-serif;
+        font-family: 'Hanken Grotesk', sans-serif;
     }
 
 .navbar {
@@ -60,6 +60,7 @@
   position: relative;
   width: 100vw;
   margin-top: 40px;
+  max-width: 850px;
 
   &__logo {
     img {