MahdiandCursor
7e8e1b1f1b
Scaffold SSR site with CMS/blog/gallery/SEO admin and deploy configs for montech.ir. Co-authored-by: Cursor <cursoragent@cursor.com>
64 lines
2.3 KiB
Vue
64 lines
2.3 KiB
Vue
<template>
|
|
<footer id="contact" class="relative overflow-hidden border-t border-white/[0.07]">
|
|
<div class="border-b border-white/[0.07] py-8 md:py-10">
|
|
<SiteMarquee
|
|
:items="data.marquee"
|
|
:duration="20"
|
|
class-name="font-display text-xl font-bold uppercase tracking-[-0.01em] md:text-3xl"
|
|
/>
|
|
</div>
|
|
|
|
<div class="mx-auto max-w-[1500px] px-6 py-20 md:px-10 md:py-28">
|
|
<SectionTag index="06" :title="data.tag" right="Response within 24h" />
|
|
<div class="mt-14 grid gap-12 lg:grid-cols-[1.4fr_1fr]">
|
|
<div>
|
|
<h2 class="font-display text-[clamp(2.5rem,7vw,6rem)] font-extrabold uppercase leading-[0.95] tracking-[-0.03em]">
|
|
{{ data.cta }}
|
|
</h2>
|
|
<a
|
|
:href="`mailto:${data.email}`"
|
|
class="mt-8 inline-flex items-center gap-3 border border-volt bg-volt px-6 py-3 font-mono text-[11px] tracking-[0.22em] text-ink transition hover:bg-transparent hover:text-volt"
|
|
>
|
|
{{ data.email }} ↗
|
|
</a>
|
|
</div>
|
|
<div class="grid gap-8 sm:grid-cols-3 lg:grid-cols-1">
|
|
<div>
|
|
<p class="font-mono text-[10px] tracking-[0.25em] text-ash">NEW BUSINESS</p>
|
|
<p class="mt-2 text-sm">{{ data.email }}</p>
|
|
<p class="text-sm text-ash">{{ data.phone }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="font-mono text-[10px] tracking-[0.25em] text-ash">STUDIO</p>
|
|
<p v-for="line in data.address" :key="line" class="mt-1 text-sm text-ash">{{ line }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="font-mono text-[10px] tracking-[0.25em] text-ash">SOCIALS</p>
|
|
<p v-for="s in data.socials" :key="s" class="mt-1 text-sm text-ash">{{ s }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-20 flex flex-wrap items-center justify-between gap-4 border-t border-white/[0.07] pt-6 font-mono text-[10px] tracking-[0.2em] text-ash">
|
|
<span>© {{ year }} MONTECH SOFTWARE GROUP</span>
|
|
<span>{{ brand }}®</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
brand?: string;
|
|
data: {
|
|
tag: string;
|
|
marquee: string[];
|
|
cta: string;
|
|
email: string;
|
|
phone: string;
|
|
address: string[];
|
|
socials: string[];
|
|
};
|
|
}>();
|
|
const year = new Date().getFullYear();
|
|
</script>
|