feat: complete UI/UX improvements, vuesax icons, media server, and section management

apps/web/app/components/sections/Contact.vue

@@ -1,16 +1,7 @@
 <script setup lang="ts">
 import { Button as AButton, Form as AForm, FormItem as AFormItem, Input as AInput, Textarea as ATextarea } from "ant-design-vue";
 import type { Rule } from "ant-design-vue/es/form";
-import {
-  CheckCircle2,
-  Clock,
-  Loader2,
-  Mail,
-  MapPin,
-  Phone,
-  Send,
-  Siren,
-} from "lucide-vue-next";
+import VuesaxIcon from "~/components/ui/VuesaxIcon.vue";
 import Lines from "~/components/ui/Lines.vue";
 import Reveal from "~/components/ui/Reveal.vue";
 import SectionHead from "~/components/ui/SectionHead.vue";
@@ -21,10 +12,10 @@ const content = computed(() => site.sections.contact);
 const INFO = computed(() => {
   const s = site.settings;
   return [
-    { icon: MapPin, label: "نشانی", value: `${s.address.locality}، ${s.address.street}` },
-    { icon: Phone, label: "تلفن تماس", value: s.phoneDisplay, ltr: true, href: `tel:${s.phone}` },
-    { icon: Mail, label: "ایمیل", value: s.email, ltr: true, href: `mailto:${s.email}` },
-    { icon: Clock, label: "ساعات کاری", value: s.workingHours },
+    { icon: "location", label: "نشانی", value: `${s.address.locality}، ${s.address.street}` },
+    { icon: "call", label: "تلفن تماس", value: s.phoneDisplay, ltr: true, href: `tel:${s.phone}` },
+    { icon: "sms", label: "ایمیل", value: s.email, ltr: true, href: `mailto:${s.email}` },
+    { icon: "clock", label: "ساعات کاری", value: s.workingHours },
   ];
 });
 
@@ -61,7 +52,7 @@ const contact = useContactStore();
                 <span
                   class="flex size-11 shrink-0 items-center justify-center rounded-lg border border-line text-accent transition-colors duration-300 group-hover:border-accent/50"
                 >
-                  <component :is="item.icon" class="size-5" />
+                  <VuesaxIcon :name="item.icon" class="size-5" />
                 </span>
                 <div class="min-w-0">
                   <div class="text-xs text-muted">{{ item.label }}</div>
@@ -80,7 +71,7 @@ const contact = useContactStore();
 
           <Reveal :delay="0.45">
             <div class="mt-8 flex items-start gap-4 rounded-xl border border-hazard/30 bg-hazard/5 p-5">
-              <Siren class="size-6 shrink-0 text-hazard" />
+              <VuesaxIcon name="lamp-on" class="size-6 shrink-0 text-hazard" />
               <div>
                 <div class="font-bold text-hazard">{{ content.emergencyTitle }}</div>
                 <p class="mt-1.5 text-sm leading-7 text-muted">
@@ -105,7 +96,7 @@ const contact = useContactStore();
               v-if="contact.status === 'success'"
               class="mt-10 flex flex-col items-center rounded-xl border border-emerald-500/30 bg-emerald-500/5 p-10 text-center"
             >
-              <CheckCircle2 class="size-14 text-emerald-400" />
+              <VuesaxIcon name="tick-circle" class="size-14 text-emerald-400" />
               <div class="mt-5 text-xl font-black">{{ content.successTitle }}</div>
               <p class="mt-2.5 max-w-sm text-sm leading-7 text-muted">
                 {{ content.successText }}
@@ -176,11 +167,11 @@ const contact = useContactStore();
                     :disabled="contact.status === 'loading'"
                   >
                     <template v-if="contact.status === 'loading'">
-                      <Loader2 class="size-5 animate-spin" />
+                      <VuesaxIcon name="refresh-circle" class="size-5 animate-spin" />
                       در حال ارسال...
                     </template>
                     <template v-else>
-                      <Send class="size-5" />
+                      <VuesaxIcon name="send-2" class="size-5" />
                       ارسال درخواست مشاوره
                     </template>
                   </AButton>