first commit

spa/src/components/BottomDrawer.vue

@@ -0,0 +1,57 @@
+<template>
+  <transition name="fade">
+    <div
+        v-if="visible"
+        class="fixed inset-0 bg-black/50 z-40"
+        @click.self="close"
+    >
+      <transition name="slide-up">
+        <div
+            class="fixed bottom-0 left-0 w-full h-[80vh] bg-white rounded-t-2xl shadow-xl z-50 p-4"
+        >
+          <slot />
+        </div>
+      </transition>
+    </div>
+  </transition>
+</template>
+
+<script setup>
+import {computed} from "vue";
+import { XMarkIcon } from '@heroicons/vue/24/outline';
+
+const props = defineProps({
+  modelValue: Boolean,
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+
+function close() {
+  visible.value = false
+}
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: transform 0.25s ease;
+}
+.slide-up-enter-from,
+.slide-up-leave-to {
+  transform: translateY(100%);
+}
+</style>

spa/src/components/ProductCard.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="bg-white rounded-lg shadow p-3">
+    <img src="https://placehold.co/300x300" alt="Футболка" class="w-full h-auto rounded-md mb-2" />
+    <h2 class="font-semibold text-base">Базовая футболка</h2>
+    <p class="text-sm text-gray-500">RUB 6,000</p>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped>
+
+</style>