ccfd268682
This commit introduces a 'Contact Sales' modal on the web development page, allowing users to inquire about specific service plans. - The pricing plan buttons now trigger this modal, pre-filled with the selected plan's details. - Users can add custom remarks to their inquiry. - On submission, a pre-formatted message is generated and opened in WhatsApp using a new `useWhatsAppMsgSender` composable. - Adds `NUXT_PUBLIC_WHATSAPP_NUMBER` to the runtime configuration. - Refactors content validation by introducing Zod schemas for `PricingPlan` and `Button` props to improve type safety. - Adds new i18n keys for the modal interface and message templates.
59 lines
1.5 KiB
Vue
59 lines
1.5 KiB
Vue
<template>
|
|
<UPage>
|
|
<UHeader
|
|
:ui="{
|
|
left: 'flex items-center gap-1.5',
|
|
center: 'hidden lg:flex lg:flex-4',
|
|
right: 'flex items-center justify-end gap-1.5',
|
|
}"
|
|
>
|
|
<template #title> Tootaio Studio </template>
|
|
<template #default>
|
|
<UNavigationMenu
|
|
:items="navLinks"
|
|
variant="link"
|
|
class="w-full justify-center"
|
|
/>
|
|
</template>
|
|
<template #body>
|
|
<UNavigationMenu :items="navLinks" orientation="vertical" />
|
|
</template>
|
|
<template #right>
|
|
<UColorModeButton />
|
|
<UButton
|
|
icon="twemoji:flag-china"
|
|
:variant="$i18n.locale == 'zh-CN' ? 'outline' : 'ghost'"
|
|
class="cursor-pointer"
|
|
color="neutral"
|
|
:disabled="$i18n.locale == 'zh-CN'"
|
|
@click="setLocale('zh-CN')"
|
|
/>
|
|
<UButton
|
|
icon="twemoji:flag-united-states"
|
|
:variant="$i18n.locale == 'en' ? 'outline' : 'ghost'"
|
|
class="cursor-pointer"
|
|
color="neutral"
|
|
:disabled="$i18n.locale == 'en'"
|
|
@click="setLocale('en')"
|
|
/>
|
|
</template>
|
|
</UHeader>
|
|
<UMain>
|
|
<slot />
|
|
</UMain>
|
|
<UFooter>
|
|
<template #left>
|
|
© {{ new Date().getFullYear() }} Tootaio Studio. All rights
|
|
reserved.
|
|
</template>
|
|
</UFooter>
|
|
</UPage>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const { setLocale } = useI18n();
|
|
const navLinks = useNavLinks();
|
|
</script>
|
|
|
|
<style></style>
|