Add service listing and customer booking flow in app

src/components/ui/AppModal.vue

@@ -0,0 +1,42 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="fixed inset-0 z-50 flex items-end justify-center bg-black/50 p-0 sm:items-center sm:p-4"
+      @click.self="emit('close')"
+    >
+      <div
+        class="max-h-[90dvh] w-full max-w-app overflow-y-auto rounded-t-2xl border border-border bg-surface p-4 shadow-xl sm:rounded-2xl"
+        role="dialog"
+      >
+        <div class="mb-4 flex items-start justify-between gap-3">
+          <div>
+            <h2 v-if="title" class="text-lg font-bold text-text">{{ title }}</h2>
+            <p v-if="subtitle" class="mt-0.5 text-sm text-muted">{{ subtitle }}</p>
+          </div>
+          <button
+            type="button"
+            class="rounded-lg px-2 py-1 text-muted hover:bg-surface-3"
+            aria-label="بستن"
+            @click="emit('close')"
+          >
+            <AppIcon name="x" size="md" />
+          </button>
+        </div>
+        <slot />
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import AppIcon from '@/components/ui/AppIcon.vue';
+
+defineProps<{
+  open: boolean;
+  title?: string;
+  subtitle?: string;
+}>();
+
+const emit = defineEmits<{ close: [] }>();
+</script>