add carousel for desktop version, add images for template style

frontend/src/components/Auth/Carousel.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <b-carousel
+      id="carousel-1"
+      v-model="slide"
+      :interval="60000"
+      controls
+      indicators
+      background="#ababab"
+      @sliding-start="onSlideStart"
+      @sliding-end="onSlideEnd"
+    >
+      <!-- Text slides with image -->
+      <b-carousel-slide
+        caption="First slide"
+        text="Nulla vitae elit libero, a pharetra augue mollis interdum."
+        img-src="/img/template/Foto_01.jpg"
+      ></b-carousel-slide>
+
+      <!-- Slides with custom text -->
+      <b-carousel-slide img-src="https://picsum.photos/1324/2324/?image=50">
+        <h1>Hello world!</h1>
+      </b-carousel-slide>
+
+      <!-- Slides with image only -->
+      <b-carousel-slide img-src="https://picsum.photos/1024/2024/?image=58"></b-carousel-slide>
+
+      <!-- Slides with img slot -->
+      <!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
+      <b-carousel-slide>
+        <template #img>
+          <img
+            class="d-block img-fluid w-100 h-100"
+            src="https://picsum.photos/1024/2024/?image=83"
+            alt="image slot"
+          />
+        </template>
+      </b-carousel-slide>
+
+      <!-- Slide with blank fluid image to maintain slide aspect ratio -->
+      <b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image" class="w-100 h-100">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
+          a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
+        </p>
+      </b-carousel-slide>
+    </b-carousel>
+
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      slide: 0,
+      sliding: null,
+    }
+  },
+  methods: {
+    onSlideStart(slide) {
+      this.sliding = true
+    },
+    onSlideEnd(slide) {
+      this.sliding = false
+    },
+  },
+}
+</script>
+<style>
+.carousel {
+    position: relative;
+    height: 100%;
+    border-radius: 0% 50% 70% 0%/50% 70% 70% 50%;
+}
+.carousel-inner {
+  height: 100%;
+  border-radius: 0% 50% 70% 0%/50% 70% 70% 50%;
+}
+</style>