Create listing details and owner component

src/Training.AirBnb.Clone.Frontend/src/App.vue

@@ -1,10 +1,12 @@
 <template>
 
   <!--    <main-logo/>-->
-  <home-view/>
+<!--  <home-view/>-->
+  <second-home-page/>
 
 </template>
 
 <script lang="ts" setup>
 import HomeView from "@/common/views/HomeView.vue";
+import SecondHomePage from "@/common/views/SecondHomePage.vue";
 </script>

src/Training.AirBnb.Clone.Frontend/src/Modules/locations/components/ListingDetailsInfo.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="w-[750px]">
+    <!-- Translater Info-->
+    <div class="flex items-center justify-start bg-gray-200 rounded-xl mt-10 px-3 py-5">
+      <h1>
+        Some info is shown in its original language.
+      </h1>
+      <a href="https://google.com" target="_blank">
+        <h1 class="font-medium underline ml-2">
+          Show original
+        </h1>
+      </a>
+    </div>
+    <!--Full Info-->
+    <div class="mt-10">
+      <p class="truncate text-wrap">
+        A cosy nature inspired cabin, on the way and close to the Northcape.
+        Take it easy at this unique and relaxing getaway.
+        Currently, under renovation will be done by 01.06. and there are more pictures coming as soon as the bedrooms and bathroom are going to be done and remodelled. We are also adding jacuzzi and sauna.
+        Surroundings are astonishing, and feeling in the cabin is so calming.
+        The idea came together with local artist who have inspired the owners and have participated in renovation.
+      </p>
+        <button @click="togalModal" class="flex items-center justify-start font-medium underline mt-3">
+          <span  class="text-lg"> Show more </span>
+          <span class="mt-1 ml-2">
+            <svg viewBox="0 0 18 18" role="presentation" aria-hidden="true" focusable="false" style="height: 12px; width: 12px; display: block;">
+              <path
+                  d="m4.29 1.71a1 1 0 1 1 1.42-1.41l8 8a1 1 0 0 1 0 1.41l-8 8a1 1 0 1 1 -1.42-1.41l7.29-7.29z" fill-rule="evenodd">
+              </path>
+            </svg>
+          </span>
+        </button>
+
+      <listing-full-info :modalActive="modalActive" @close-modal="togalModal"/>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import ListingFullInfo from "@/Modules/locations/components/ListingFullInfo.vue";
+  import {ref} from "vue";
+  import {DocumentService} from "@/infrastructure/services/DocumentService";
+  const modalActive = ref(false);
+  const documentService = new DocumentService();
+  const togalModal = () => {
+    modalActive.value = !modalActive.value
+    documentService.handleBodyOverflow(modalActive.value)
+  }
+</script>

src/Training.AirBnb.Clone.Frontend/src/Modules/locations/components/ListingFeatures.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="px-3 py-5 w-[750px] items-center justify-start border-y-[1px] border-gray-300 ">
+<!-- Icon 1-->
+    <div class="flex items-center">
+      <div class="pb-3 flex items-center justify-start">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" role="presentation" focusable="false" style="display: block; height: 24px; width: 24px; fill: currentcolor;">
+          <path
+              d="M26 2a1 1 0 0 1 .92.61l.04.12 2 7a1 1 0 0 1-.85 1.26L28 11h-3v5h6v2h-2v13h-2v-2.54a3.98 3.98 0 0 1-1.73.53L25 29H7a3.98 3.98 0 0 1-2-.54V31H3V18H1v-2h5v-4a1 1 0 0 1 .88-1h.36L6.09 8.4l1.82-.8L9.43 11H12a1 1 0 0 1 1 .88V16h10v-5h-3a1 1 0 0 1-.99-1.16l.03-.11 2-7a1 1 0 0 1 .84-.72L22 2h4zm1 16H5v7a2 2 0 0 0 1.7 1.98l.15.01L7 27h18a2 2 0 0 0 2-1.85V18zm-16-5H8v3h3v-3zm14.24-9h-2.49l-1.43 5h5.35l-1.43-5z">
+          </path>
+        </svg>
+      </div>
+      <ol class="ml-9 flex-col items-center justify-start decimal">
+        <li class="font-medium flex items-start justify-start">
+          Deticated workspace
+        </li>
+          <li class="text-gray-600 items-center justify-start text-[15px] inline">
+            A common area with wifi that’s well-suited for working.
+          </li>
+      </ol>
+    </div>
+<!-- Icon 2-->
+    <div class="flex items-center justify-start my-5">
+      <div class="pb-3 flex items-center justify-start">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" role="presentation" focusable="false" style="display: block; height: 24px; width: 24px; fill: currentcolor;">
+          <path
+              d="M24.33 1.67a2 2 0 0 1 2 1.85v24.81h3v2H2.67v-2h3V3.67a2 2 0 0 1 1.85-2h.15zm-4 2H7.67v24.66h12.66zm4 0h-2v24.66h2zm-7 11a1.33 1.33 0 1 1 0 2.66 1.33 1.33 0 0 1 0-2.66z">
+          </path>
+        </svg>
+      </div>
+      <ol class="ml-9  flex-col items-center justify-start decimal">
+        <li class="font-medium flex items-start justify-start">
+          Self check-in
+        </li>
+        <li class="text-gray-600 items-center justify-start text-[15px] inline">
+          Check yourself in with the smartlock.
+        </li>
+      </ol>
+    </div>
+<!-- Icon 3-->
+    <div class="flex items-center justify-start">
+      <div class="pb-3 flex items-center justify-start">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" role="presentation" focusable="false" style="display: block; height: 24px; width: 24px; fill: currentcolor;">
+          <path
+              d="M11.67 0v1.67h8.66V0h2v1.67h6a2 2 0 0 1 2 1.85v16.07a2 2 0 0 1-.46 1.28l-.12.13L21 29.75a2 2 0 0 1-1.24.58H6.67a5 5 0 0 1-5-4.78V3.67a2 2 0 0 1 1.85-2h6.15V0zm16.66 11.67H3.67v13.66a3 3 0 0 0 2.82 3h11.18v-5.66a5 5 0 0 1 4.78-5h5.88zm-.08 8h-5.58a3 3 0 0 0-3 2.82v5.76zm-18.58-16h-6v6h24.66v-6h-6v1.66h-2V3.67h-8.66v1.66h-2z">
+          </path>
+        </svg>
+      </div>
+      <ol class="ml-9 flex-col items-center justify-start decimal">
+        <li class="font-medium flex items-start justify-start">
+          Free cancellation before February 25
+        </li>
+        <li class="text-gray-600 items-center justify-start text-[15px] inline">
+        </li>
+      </ol>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+</script>

src/Training.AirBnb.Clone.Frontend/src/Modules/locations/components/ListingFullInfo.vue

@@ -0,0 +1,45 @@
+<template>
+  <InfoButtonBase class="items-center justify-center flex" :modalActive="props.modalActive" @close-modal="closeModal">
+    <div class="w-[750px] rounded-xl px-5" v-show="modalActive">
+        <div class="m-5 flex cursor-pointer" @click="$emit('close-modal')">
+      <span>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" role="presentation" focusable="false" style="display: block; fill: none; height: 16px; width: 16px; stroke: currentcolor; stroke-width: 3; overflow: hidden;">
+          <path
+              d="m6 6 20 20M26 6 6 26">
+          </path>
+        </svg>
+      </span>
+        </div>
+      <h1 class="flex items-center justify-start text-xl font-bold ml-5">
+        About this space
+      </h1>
+      <div class="flex ml-5 mt-5 max-h-[550px] overflow-y-scroll">
+        <p>
+          A cosy nature inspired cabin, on the way and close to the Northcape.
+          Take it easy at this unique and relaxing getaway.
+          Currently, under renovation will be done by 01.06. and there are more pictures coming as soon as the bedrooms and bathroom are going to be done and remodelled. We are also adding jacuzzi and sauna.
+          Surroundings are astonishing, and feeling in the cabiA cosy nature inspired cabin, on the way and close to the Northcape.
+          Take it easy at this unique and relaxing getaway.
+          Currently, under renovation will be done by 01.06. and there are more pictures coming as soon as the bedrooms and bathroom are going to be done and remodelled. We are also adding jacuzzi and sauna.
+          Surroundings are astonishing, and feeling in the cabin is so calming.Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
+        </p>
+      </div>
+    </div>
+  </InfoButtonBase>
+</template>
+
+<script setup lang="ts">
+import ModalBase from "@/common/components/InfoButtonBase.vue";
+import InfoButtonBase from "@/common/components/InfoButtonBase.vue";
+
+const emit = defineEmits(["closeModal"])
+const props = defineProps({
+  modalActive:{
+    type: Boolean,
+    default: false
+  }
+})
+const closeModal = () => {
+  emit('closeModal')
+}
+</script>

src/Training.AirBnb.Clone.Frontend/src/common/components/InfoButtonBase.vue

@@ -0,0 +1,43 @@
+<template>
+
+<Teleport to="body">    
+    <Transition name="slide-fade">
+        <div v-show="modalActive" class="fixed inset-0 z-30 overflow-auto no-scrollbar" @click="$emit('closeModal')">
+            <div class="relative h-auto mx-auto my-8 border-2 sm:w-full md:w-[745px] theme-bg-secondary rounded-xl" @click.stop>
+                <slot></slot>
+            </div>
+        </div>
+    </Transition>
+</Teleport>
+
+</template>
+
+<script setup lang="ts">
+
+const emit = defineEmits(['closeModal'])
+
+const props = defineProps({
+    modalActive: {
+        type: Boolean,
+        default: false
+    }
+});
+
+</script>
+
+<style scoped>
+
+.slide-fade-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateY(500px);
+}
+
+</style>

src/Training.AirBnb.Clone.Frontend/src/common/views/SecondHomePage.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="flex flex-col w-screen h-screen theme-bg-primary">
+  <main-header/>
+  <listing-details-card/>
+  </div>
+</template>
+
+<script>
+
+import {defineComponent} from "vue";
+import MainHeader from "@/common/components/MainHeader.vue";
+import ListingDetailsCard from "@/Modules/locations/components/ListingDetailsCard.vue";
+
+export default defineComponent({
+  components: {ListingDetailsCard, MainHeader}
+})
+</script>