Mahdi/Montech_Landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
Mahdi
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
Download Patch File Download Diff File Expand all files Collapse all files
apps/landing/assets/css/main.css
+4 -4
View File
@@ -8,10 +8,10 @@
--color-ash: #8b8b93;
--color-volt: #c8ff2e;
--font-display: "Syne", ui-sans-serif, system-ui, sans-serif;
--font-body: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
--font-serif: "Instrument Serif", ui-serif, Georgia, serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
--font-display: "Vazirmatn", "Syne", ui-sans-serif, system-ui, sans-serif;
--font-body: "Vazirmatn", ui-sans-serif, system-ui, sans-serif;
--font-serif: "Vazirmatn", "Instrument Serif", ui-serif, Georgia, serif;
--font-mono: "Vazirmatn", ui-monospace, monospace;
}
html { background: var(--color-ink); }
apps/landing/components/HeroSection.vue
+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>
apps/landing/components/ManifestoSection.vue
+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,
apps/landing/components/ProcessSection.vue
+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>
apps/landing/components/SectionTag.vue
+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>
apps/landing/components/ServicesSection.vue
+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>
apps/landing/components/SiteFooter.vue
+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>
apps/landing/components/SiteNavbar.vue
+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",
apps/landing/components/StatsSection.vue
+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>
apps/landing/components/TeamSection.vue
+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>
apps/landing/components/WorkSection.vue
+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>
apps/landing/nuxt.config.ts
+2 -2
View File
@@ -16,13 +16,13 @@ export default defineNuxtConfig({
},
app: {
head: {
htmlAttrs: { lang: "en" },
htmlAttrs: { lang: "fa", dir: "rtl" },
link: [
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
{ rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: "" },
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Space+Grotesk:wght@300;400;500;600&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap",
href: "https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&family=Syne:wght@600;700;800&family=Instrument+Serif:ital@0;1&display=swap",
},
],
},
apps/landing/pages/blog/[slug].vue
+16 -7
View File
@@ -1,15 +1,15 @@
<template>
<article v-if="post" class="min-h-screen px-6 pb-24 pt-28 md:px-10">
<SiteNavbar brand="Montech" />
<SiteNavbar brand="مانتک" />
<div class="mx-auto max-w-[760px]">
<NuxtLink to="/blog" class="font-mono text-[11px] tracking-[0.22em] text-ash hover:text-volt">← BACK</NuxtLink>
<h1 class="mt-8 font-display text-4xl font-extrabold uppercase tracking-[-0.03em] md:text-6xl">
<NuxtLink to="/blog" class="text-sm text-ash hover:text-volt">→ بازگشت به بلاگ</NuxtLink>
<h1 class="mt-8 font-display text-3xl font-extrabold leading-tight md:text-5xl">
{{ post.title }}
</h1>
<p class="mt-4 font-mono text-[11px] tracking-[0.2em] text-ash">
{{ post.publishedAt ? new Date(post.publishedAt).toLocaleDateString("en-GB") : "" }}
<p class="mt-4 text-sm text-ash">
{{ post.publishedAt ? new Date(post.publishedAt).toLocaleDateString("fa-IR") : "" }}
</p>
<div class="prose-montech mt-10 space-y-4 text-base leading-relaxed text-bone/90" v-html="post.content" />
<div class="mt-10 whitespace-pre-line text-base leading-relaxed text-bone/90">{{ plainContent }}</div>
</div>
</article>
</template>
@@ -20,9 +20,18 @@ const slug = String(route.params.slug);
const { data: post } = await useAsyncData(`blog-${slug}`, () => fetchPublicPost(slug));
if (!post.value) {
throw createError({ statusCode: 404, statusMessage: "Post not found" });
throw createError({ statusCode: 404, statusMessage: "پست پیدا نشد" });
}
const plainContent = computed(() => {
const raw = post.value?.content || "";
return raw
.replace(/<\/p>/gi, "\n\n")
.replace(/<br\s*\/?>/gi, "\n")
.replace(/<[^>]+>/g, "")
.trim();
});
useSeoMeta({
title: post.value.seoTitle || post.value.title,
description: post.value.seoDesc || post.value.excerpt,
apps/landing/pages/blog/index.vue
+7 -7
View File
@@ -1,23 +1,23 @@
<template>
<div class="min-h-screen px-6 pb-24 pt-28 md:px-10">
<SiteNavbar :brand="'Montech'" />
<SiteNavbar brand="مانتک" />
<div class="mx-auto max-w-[1100px]">
<h1 class="font-display text-5xl font-extrabold uppercase tracking-[-0.03em] md:text-7xl">Blog</h1>
<p class="mt-4 max-w-xl text-ash">Notes on product, engineering and shipping software.</p>
<h1 class="font-display text-4xl font-extrabold md:text-6xl">بلاگ</h1>
<p class="mt-4 max-w-xl text-ash">یادداشت‌هایی درباره محصول، مهندسی و ساخت نرم‌افزار.</p>
<ul class="mt-16 divide-y divide-white/[0.07] border-y border-white/[0.07]">
<li v-for="post in posts" :key="post.id" class="py-8">
<NuxtLink :to="`/blog/${post.slug}`" class="group block">
<p class="font-mono text-[10px] tracking-[0.22em] text-ash">
{{ post.publishedAt ? new Date(post.publishedAt).toLocaleDateString("en-GB") : "" }}
<p class="text-sm text-ash">
{{ post.publishedAt ? new Date(post.publishedAt).toLocaleDateString("fa-IR") : "" }}
</p>
<h2 class="mt-2 font-display text-2xl font-bold uppercase tracking-[-0.02em] group-hover:text-volt md:text-3xl">
<h2 class="mt-2 font-display text-2xl font-bold group-hover:text-volt md:text-3xl">
{{ post.title }}
</h2>
<p class="mt-3 max-w-2xl text-sm text-ash">{{ post.excerpt }}</p>
</NuxtLink>
</li>
</ul>
<p v-if="!posts?.length" class="mt-10 text-ash">No posts yet.</p>
<p v-if="!posts?.length" class="mt-10 text-ash">هنوز پستی منتشر نشده است.</p>
</div>
</div>
</template>
apps/landing/pages/gallery.vue
+6 -6
View File
@@ -1,9 +1,9 @@
<template>
<div class="min-h-screen px-6 pb-24 pt-28 md:px-10">
<SiteNavbar brand="Montech" />
<SiteNavbar brand="مانتک" />
<div class="mx-auto max-w-[1500px]">
<h1 class="font-display text-5xl font-extrabold uppercase tracking-[-0.03em] md:text-7xl">Gallery</h1>
<p class="mt-4 max-w-xl text-ash">Selected visuals from projects and studio life.</p>
<h1 class="font-display text-4xl font-extrabold md:text-6xl">گالری</h1>
<p class="mt-4 max-w-xl text-ash">تصاویر منتخب از پروژه‌ها و فضای استودیو.</p>
<div class="mt-16 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
<figure v-for="item in items" :key="item.id" class="overflow-hidden border border-white/[0.07] bg-coal">
<div
@@ -11,12 +11,12 @@
:style="item.imageUrl ? { backgroundImage: `url(${item.imageUrl})` } : {}"
/>
<figcaption class="p-4">
<p class="font-display text-lg font-bold uppercase">{{ item.title }}</p>
<p v-if="item.category" class="mt-1 font-mono text-[10px] tracking-[0.2em] text-ash">{{ item.category }}</p>
<p class="font-display text-lg font-bold">{{ item.title }}</p>
<p v-if="item.category" class="mt-1 text-xs text-ash">{{ item.category }}</p>
</figcaption>
</figure>
</div>
<p v-if="!items?.length" class="mt-10 text-ash">Gallery is empty.</p>
<p v-if="!items?.length" class="mt-10 text-ash">گالری خالی است.</p>
</div>
</div>
</template>
apps/landing/pages/index.vue
+1 -1
View File
@@ -8,7 +8,7 @@
<SiteMarquee
:items="site.sections.marquee.items"
:duration="22"
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"
item-class-name="mx-4 md:mx-6"
separator-class-name="text-ink/50"
/>