120 lines
3.2 KiB
Vue
120 lines
3.2 KiB
Vue
<template>
|
|
<section class="min-h-screen px-5 pt-24 pb-10 lg:px-8 lg:pt-32">
|
|
<div
|
|
class="mx-auto flex min-h-[calc(100vh-9rem)] w-full max-w-5xl items-center"
|
|
>
|
|
<div
|
|
class="grid w-full gap-10 lg:grid-cols-[0.9fr_1.1fr] lg:items-center"
|
|
>
|
|
<div class="text-center lg:text-left">
|
|
<p
|
|
class="mb-3 text-xs font-medium uppercase tracking-[0.24em] text-highlight"
|
|
>
|
|
{{ t("Title") }}
|
|
</p>
|
|
|
|
<h1
|
|
class="text-4xl font-medium tracking-[-0.04em] text-dark lg:text-6xl"
|
|
>
|
|
{{ t("Welcome") }}
|
|
</h1>
|
|
|
|
<p
|
|
class="mx-auto mt-4 max-w-sm text-sm leading-normal lg:mx-0 text-dark/70"
|
|
>
|
|
{{ t("Menu Intro") }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mx-auto w-full max-w-md lg:max-w-none">
|
|
<div class="grid gap-2.5 lg:grid-cols-2">
|
|
<button
|
|
v-for="action in actions"
|
|
:key="action.key"
|
|
type="button"
|
|
class="group flex min-h-28 h-full items-center justify-between gap-5 rounded-3xl border border-dark/20 bg-[#fff] px-5 py-5 text-left text-dark backdrop-blur transition hover:-translate-y-0.5 hover:shadow-md lg:min-h-36 lg:flex-col lg:items-start lg:p-6 first:border-highlight/70 first:text-highlight/90"
|
|
@click="handleAction(action.key)"
|
|
>
|
|
<span>
|
|
<span
|
|
class="block text-xl font-medium tracking-tight lg:text-2xl"
|
|
>
|
|
{{ t(action.labelKey) }}
|
|
</span>
|
|
|
|
<span
|
|
v-if="action.descriptionKey"
|
|
class="mt-1.5 block text-sm leading-4 text-dark/45"
|
|
>
|
|
{{ t(action.descriptionKey) }}
|
|
</span>
|
|
</span>
|
|
|
|
<span
|
|
class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-dark/4 text-xl text-dark/45 transition group-hover:bg-dark group-hover:text-white lg:mt-auto"
|
|
>
|
|
→
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useI18n } from "vue-i18n";
|
|
|
|
type ActionKey = "menu" | "campaigns" | "contact" | "survey";
|
|
|
|
type Action = {
|
|
key: ActionKey;
|
|
labelKey: string;
|
|
descriptionKey?: string;
|
|
};
|
|
|
|
const { t } = useI18n();
|
|
|
|
const emit = defineEmits<{
|
|
changeView: [view: "home" | "menu" | "campaigns" | "contact"];
|
|
}>();
|
|
|
|
const actions: Action[] = [
|
|
{
|
|
key: "menu",
|
|
labelKey: "Menu",
|
|
descriptionKey: "Explore our food and drinks",
|
|
},
|
|
{
|
|
key: "campaigns",
|
|
labelKey: "Campaigns",
|
|
descriptionKey: "View current offers",
|
|
},
|
|
{
|
|
key: "contact",
|
|
labelKey: "Job Application",
|
|
descriptionKey: "Apply to join our team",
|
|
},
|
|
{
|
|
key: "survey",
|
|
labelKey: "Satisfaction Survey",
|
|
descriptionKey: "Share your experience",
|
|
},
|
|
];
|
|
|
|
function handleAction(key: ActionKey) {
|
|
if (key === "survey") {
|
|
window.open(
|
|
"https://forms.gle/C8dd65PM9jLftv4g9",
|
|
"_blank",
|
|
"noopener,noreferrer",
|
|
);
|
|
|
|
return;
|
|
}
|
|
|
|
emit("changeView", key);
|
|
}
|
|
</script>
|