Make admin section editor form-based and localize Montech site to Persian.

Operators can edit landing copy as plain fields instead of JSON/HTML; default CMS seed and UI chrome are now Farsi/RTL.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-09-30 20:33:37 +03:30
co-authored by Cursor
parent 0f4363174c
commit 3410f3e5ed
22 changed files with 462 additions and 218 deletions
+9 -9
View File
@@ -16,36 +16,36 @@
</div>
<div class="flex flex-col gap-12 lg:flex-row lg:items-end lg:justify-between">
<h1 class="font-display text-[clamp(3rem,12.5vw,11.5rem)] font-extrabold uppercase leading-[0.92] tracking-[-0.03em]">
<h1 class="font-display text-[clamp(2.4rem,9vw,7.5rem)] font-extrabold leading-[1.1] tracking-[-0.02em]">
<span
v-for="(line, i) in data.lines"
:key="i"
class="block overflow-hidden pb-[0.08em] -mb-[0.08em] animate-fade-up"
:style="{ animationDelay: `${0.15 + i * 0.12}s` }"
>
<template v-if="line.includes(data.highlightWord)">
<template v-if="data.highlightWord && line.includes(data.highlightWord)">
<span
v-html="
line.replace(
data.highlightWord,
`<span class='font-serif normal-case italic tracking-normal text-volt'>${data.highlightWord}</span>`,
`<span class='text-volt'>${data.highlightWord}</span>`,
)
"
/>
</template>
<template v-else>
{{ line }}<span v-if="i === data.lines.length - 1" class="text-volt">.</span>
{{ line }}
</template>
</span>
</h1>
<div class="flex shrink-0 flex-col items-start gap-10 animate-fade-up lg:items-end lg:pb-3" style="animation-delay: 0.55s">
<p class="max-w-sm text-sm leading-relaxed text-ash md:text-base lg:text-right">
<div class="flex shrink-0 flex-col items-start gap-10 animate-fade-up lg:items-start lg:pb-3" style="animation-delay: 0.55s">
<p class="max-w-sm text-sm leading-relaxed text-ash md:text-base">
{{ data.body }}
</p>
<a
href="#work"
class="group flex items-center gap-4 font-mono text-[11px] tracking-[0.3em] text-bone transition-colors hover:text-volt"
class="group flex items-center gap-4 text-sm text-bone transition-colors hover:text-volt"
>
{{ data.cta }}
<span class="flex h-10 w-10 items-center justify-center rounded-full border border-white/20 transition-all group-hover:border-volt group-hover:bg-volt group-hover:text-ink">
@@ -56,10 +56,10 @@
</div>
<div
class="mt-14 flex items-end justify-between border-t border-white/[0.07] pt-6 font-mono text-[10px] tracking-[0.3em] text-ash animate-fade-up md:mt-20"
class="mt-14 flex items-end justify-between border-t border-white/[0.07] pt-6 text-xs text-ash animate-fade-up md:mt-20"
style="animation-delay: 0.8s"
>
<span>SCROLL</span>
<span>اسکرول کنید</span>
<span class="hidden sm:block">{{ data.coords }}</span>
<span class="hidden sm:block">{{ data.projectsLabel }}</span>
</div>
+3 -3
View File
@@ -1,12 +1,12 @@
<template>
<section id="manifesto" class="px-6 py-28 md:px-10 md:py-40">
<div class="mx-auto max-w-[1500px]">
<SectionTag index="01" :title="data.tag" right="The short version" />
<p class="mt-14 max-w-5xl font-display text-[clamp(2rem,6vw,5.5rem)] font-extrabold uppercase leading-[1.05] tracking-[-0.02em]">
<SectionTag index="۰۱" :title="data.tag" right="نسخه کوتاه" />
<p class="mt-14 max-w-5xl font-display text-[clamp(1.8rem,5vw,4.2rem)] font-extrabold leading-[1.35] tracking-[-0.01em]">
<span
v-for="(w, i) in data.words"
:key="i"
class="mr-[0.28em] inline-block"
class="ml-[0.28em] inline-block"
:class="{
'text-outline': w.outline,
'text-volt': w.volt,
+3 -3
View File
@@ -1,11 +1,11 @@
<template>
<section id="process" class="px-6 py-28 md:px-10 md:py-40">
<div class="mx-auto max-w-[1500px]">
<SectionTag index="04" :title="data.tag" right="12 weeks, typical" />
<SectionTag index="۰۴" :title="data.tag" right="معمولاً ۱۲ هفته" />
<div class="mt-16 grid gap-8 md:grid-cols-2 lg:grid-cols-4">
<div v-for="step in data.steps" :key="step.n" class="border-t border-white/[0.1] pt-6">
<p class="font-mono text-[11px] tracking-[0.25em] text-volt">{{ step.n }}</p>
<h3 class="mt-4 font-display text-2xl font-bold uppercase tracking-[-0.02em]">{{ step.title }}</h3>
<p class="text-sm text-volt">{{ step.n }}</p>
<h3 class="mt-4 font-display text-xl font-bold md:text-2xl">{{ step.title }}</h3>
<p class="mt-3 text-sm leading-relaxed text-ash">{{ step.desc }}</p>
</div>
</div>
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="flex items-end justify-between gap-6 border-b border-white/[0.07] pb-4 font-mono text-[11px] tracking-[0.28em] text-ash">
<div class="flex items-end justify-between gap-6 border-b border-white/[0.07] pb-4 text-sm text-ash">
<div class="flex items-center gap-3">
<span class="text-volt">{{ index }}</span>
<span class="text-bone">{{ title }}</span>
+6 -6
View File
@@ -1,7 +1,7 @@
<template>
<section id="services" class="px-6 py-28 md:px-10 md:py-40">
<div class="mx-auto max-w-[1500px]">
<SectionTag index="02" :title="data.tag" :right="`${String(data.items.length).padStart(2, '0')} Capabilities`" />
<SectionTag index="۰۲" :title="data.tag" :right="`${String(data.items.length).padStart(2, '0')} قابلیت`" />
<ul class="mt-16 divide-y divide-white/[0.07] border-y border-white/[0.07]">
<li
v-for="(s, i) in data.items"
@@ -11,20 +11,20 @@
>
<div class="flex items-start justify-between gap-6">
<div class="flex flex-1 flex-col gap-3 md:flex-row md:items-baseline md:gap-10">
<span class="font-mono text-[11px] tracking-[0.25em] text-ash">{{ s.n }}</span>
<h3 class="font-display text-2xl font-bold uppercase tracking-[-0.02em] md:text-4xl group-hover:text-volt transition-colors">
<span class="text-sm text-ash">{{ s.n }}</span>
<h3 class="font-display text-2xl font-bold md:text-4xl group-hover:text-volt transition-colors">
{{ s.title }}
</h3>
</div>
<span class="font-mono text-volt">{{ open === i ? "—" : "+" }}</span>
<span class="text-volt">{{ open === i ? "—" : "+" }}</span>
</div>
<div v-if="open === i" class="mt-6 max-w-3xl pl-0 md:pl-16">
<div v-if="open === i" class="mt-6 max-w-3xl">
<p class="text-sm leading-relaxed text-ash md:text-base">{{ s.desc }}</p>
<div class="mt-4 flex flex-wrap gap-2">
<span
v-for="t in s.tags"
:key="t"
class="border border-white/10 px-3 py-1 font-mono text-[10px] tracking-[0.18em] text-ash"
class="border border-white/10 px-3 py-1 text-xs text-ash"
>{{ t }}</span>
</div>
</div>
+13 -12
View File
@@ -4,43 +4,44 @@
<SiteMarquee
:items="data.marquee"
:duration="20"
class-name="font-display text-xl font-bold uppercase tracking-[-0.01em] md:text-3xl"
class-name="font-display text-xl font-bold 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" />
<SectionTag index="۰۶" :title="data.tag" right="پاسخ تا ۲۴ ساعت" />
<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]">
<h2 class="font-display text-[clamp(2.2rem,6vw,4.5rem)] font-extrabold leading-[1.15] tracking-[-0.02em]">
{{ 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"
class="mt-8 inline-flex items-center gap-3 border border-volt bg-volt px-6 py-3 text-sm text-ink transition hover:bg-transparent hover:text-volt"
dir="ltr"
>
{{ 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>
<p class="text-xs text-ash">کسب‌وکار جدید</p>
<p class="mt-2 text-sm" dir="ltr">{{ data.email }}</p>
<p class="text-sm text-ash" dir="ltr">{{ data.phone }}</p>
</div>
<div>
<p class="font-mono text-[10px] tracking-[0.25em] text-ash">STUDIO</p>
<p class="text-xs text-ash">استودیو</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 class="text-xs text-ash">شبکه‌های اجتماعی</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 class="mt-20 flex flex-wrap items-center justify-between gap-4 border-t border-white/[0.07] pt-6 text-xs text-ash">
<span>© {{ year }} گروه نرم‌افزاری مانتک</span>
<span>{{ brand || "مانتک" }}®</span>
</div>
</div>
</footer>
+10 -10
View File
@@ -4,28 +4,28 @@
<NuxtLink to="/" class="font-display text-lg font-extrabold tracking-tight">
{{ brand }}<span class="align-super text-[0.55em] text-volt">®</span>
</NuxtLink>
<nav class="hidden items-center gap-8 font-mono text-[11px] tracking-[0.22em] text-ash md:flex">
<a href="#services" class="hover:text-volt">SERVICES</a>
<a href="#work" class="hover:text-volt">WORK</a>
<a href="#team" class="hover:text-volt">TEAM</a>
<NuxtLink to="/blog" class="hover:text-volt">BLOG</NuxtLink>
<NuxtLink to="/gallery" class="hover:text-volt">GALLERY</NuxtLink>
<a href="#contact" class="text-bone hover:text-volt">CONTACT</a>
<nav class="hidden items-center gap-6 text-sm text-ash md:flex">
<a href="#services" class="hover:text-volt">خدمات</a>
<a href="#work" class="hover:text-volt">نمونه کارها</a>
<a href="#team" class="hover:text-volt">تیم</a>
<NuxtLink to="/blog" class="hover:text-volt">بلاگ</NuxtLink>
<NuxtLink to="/gallery" class="hover:text-volt">گالری</NuxtLink>
<a href="#contact" class="text-bone hover:text-volt">تماس</a>
</nav>
<span class="font-mono text-[10px] tracking-[0.2em] text-ash tabular-nums">{{ time }}</span>
<span class="text-xs text-ash tabular-nums" dir="ltr">{{ time }}</span>
</div>
</header>
</template>
<script setup lang="ts">
const props = defineProps<{ brand?: string; timezone?: string }>();
const brand = computed(() => props.brand || "Montech");
const brand = computed(() => props.brand || "مانتک");
const time = ref("");
onMounted(() => {
const tz = props.timezone || "Asia/Tehran";
const tick = () => {
time.value = new Intl.DateTimeFormat("en-GB", {
time.value = new Intl.DateTimeFormat("fa-IR", {
timeZone: tz,
hour: "2-digit",
minute: "2-digit",
+1 -1
View File
@@ -5,7 +5,7 @@
<p class="font-display text-5xl font-extrabold tracking-[-0.03em] text-volt md:text-6xl">
{{ s.value }}{{ s.suffix }}
</p>
<p class="mt-3 font-mono text-[11px] tracking-[0.22em] text-ash">{{ s.label }}</p>
<p class="mt-3 text-sm text-ash">{{ s.label }}</p>
</div>
</div>
</section>
+6 -9
View File
@@ -1,24 +1,21 @@
<template>
<section id="team" class="px-6 py-28 md:px-10 md:py-40">
<div class="mx-auto max-w-[1500px]">
<SectionTag index="05" :title="data.tag" right="Leadership" />
<SectionTag index="۰۵" :title="data.tag" right="رهبری" />
<div class="mb-16 mt-14 flex flex-col justify-between gap-8 md:flex-row md:items-end">
<h2 class="font-display text-[clamp(2.6rem,8vw,7.5rem)] font-extrabold uppercase leading-[0.92] tracking-[-0.02em]">
{{ data.headline.split(" ").slice(0, -1).join(" ") }}
<span class="font-serif normal-case italic tracking-normal text-volt">
{{ data.headline.split(" ").slice(-1)[0] }}
</span>
<h2 class="font-display text-[clamp(2.2rem,6vw,5rem)] font-extrabold leading-[1.15] tracking-[-0.02em]">
{{ data.headline }}
</h2>
<p class="max-w-xs text-sm leading-relaxed text-ash md:text-right">{{ data.body }}</p>
<p class="max-w-xs text-sm leading-relaxed text-ash">{{ data.body }}</p>
</div>
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
<figure v-for="m in data.members" :key="m.name" class="group">
<div class="aspect-[3/4] bg-gradient-to-br from-smoke to-ink" />
<figcaption class="mt-4">
<p class="font-display text-xl font-bold uppercase tracking-[-0.02em] group-hover:text-volt transition-colors">
<p class="font-display text-xl font-bold group-hover:text-volt transition-colors">
{{ m.name }}
</p>
<p class="mt-1 font-mono text-[10px] tracking-[0.22em] text-ash">{{ m.role }}</p>
<p class="mt-1 text-xs text-ash">{{ m.role }}</p>
</figcaption>
</figure>
</div>
+3 -3
View File
@@ -1,7 +1,7 @@
<template>
<section id="work" class="px-6 py-28 md:px-10 md:py-40">
<div class="mx-auto max-w-[1500px]">
<SectionTag index="03" :title="data.tag" right="2023 — 2025" />
<SectionTag index="۰۳" :title="data.tag" right="۱۴۰۲ — ۱۴۰۴" />
<div class="mt-16 grid gap-6 md:grid-cols-2">
<article
v-for="p in data.items"
@@ -11,8 +11,8 @@
<div class="mb-16 aspect-[16/10] bg-gradient-to-br from-smoke to-ink" />
<div class="flex items-end justify-between gap-4">
<div>
<p class="font-mono text-[10px] tracking-[0.25em] text-ash">{{ p.n }} / {{ p.year }}</p>
<h3 class="mt-2 font-display text-3xl font-extrabold uppercase tracking-[-0.02em] group-hover:text-volt transition-colors">
<p class="text-xs text-ash">{{ p.n }} / {{ p.year }}</p>
<h3 class="mt-2 font-display text-2xl font-extrabold group-hover:text-volt transition-colors md:text-3xl">
{{ p.title }}
</h3>
<p class="mt-2 text-sm text-ash">{{ p.cat }}</p>