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

Hero issue fixes and visual changes

Browse Source
This commit is contained in:
Mahdi
2026-10-01 11:21:08 +03:30
parent c33a757af4
commit 5147c661f0
20 changed files with 678 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/landing/components/HeroSection.vue
+66 -45
View File
@@ -1,11 +1,14 @@
<template>
<section id="top" class="relative flex min-h-svh flex-col overflow-hidden">
<ClientOnly>
<ParticleField />
</ClientOnly>
<div class="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(200,255,46,0.08),transparent_55%)]" />
<div class="pointer-events-none absolute inset-0 bg-gradient-to-b from-ink/40 via-transparent to-ink" />
<div class="relative flex flex-1 flex-col justify-end px-6 pb-12 pt-36 md:px-10 md:pb-16 md:pt-44">
<div
class="mb-10 flex items-center justify-between font-mono text-[10px] tracking-[0.3em] text-ash animate-fade-up md:mb-16 md:text-[11px]"
class="mb-10 flex items-center justify-between font-mono text-[12px] tracking-[0.14em] text-ash animate-fade-up md:mb-16 md:text-[13px] md:tracking-[0.22em]"
style="animation-delay: 0.2s"
>
<span class="flex items-center gap-3">
@@ -15,51 +18,31 @@
<span class="hidden md:block">{{ data.location }}</span>
</div>
<div class="flex flex-col gap-12 lg:flex-row lg:items-end lg:justify-between">
<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="data.highlightWord && line.includes(data.highlightWord)">
<span
v-html="
line.replace(
data.highlightWord,
`<span class='text-volt'>${data.highlightWord}</span>`,
)
"
/>
</template>
<template v-else>
{{ line }}
</template>
</span>
</h1>
<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 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">
↓
</span>
</a>
<h1 class="w-full font-display text-[clamp(2.2rem,8.5vw,7.5rem)] font-extrabold leading-[1.05] tracking-[-0.03em]">
<div
v-for="(line, i) in data.lines"
:key="i"
class="overflow-hidden pb-[0.06em] -mb-[0.06em] animate-fade-up"
:style="{ animationDelay: `${0.15 + i * 0.12}s` }"
>
<div class="flex flex-wrap items-baseline gap-x-[0.28em]">
<span
v-for="(token, ti) in tokenize(line)"
:key="ti"
:class="token.volt ? 'font-accent text-volt' : undefined"
>{{ token.text }}</span>
</div>
</div>
</div>
</h1>
<div
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"
class="mt-14 flex items-end justify-between border-t border-white/[0.07] pt-6 font-mono text-[11px] tracking-[0.14em] text-ash animate-fade-up md:mt-20 md:text-xs md:tracking-[0.22em]"
style="animation-delay: 0.8s"
>
<span>اسکرول کنید</span>
<span class="flex items-center gap-2">
<span class="inline-block h-8 w-px animate-scroll-line bg-volt/80" />
اسکرول
</span>
<span class="hidden sm:block">{{ data.coords }}</span>
<span class="hidden sm:block">{{ data.projectsLabel }}</span>
</div>
@@ -68,16 +51,54 @@
</template>
<script setup lang="ts">
defineProps<{
const props = defineProps<{
data: {
eyebrow: string;
location: string;
lines: string[];
highlightWord: string;
body: string;
cta: string;
highlightWord?: string;
highlightWords?: string[];
coords: string;
projectsLabel: string;
};
}>();
type Token = { text: string; volt?: boolean };
function highlights() {
return [
...(props.data.highlightWords || []),
props.data.highlightWord || "",
]
.map((h) => h.trim())
.filter(Boolean)
.filter((h, i, arr) => arr.indexOf(h) === i)
.sort((a, b) => b.length - a.length);
}
function tokenize(line: string): Token[] {
const hs = highlights();
const tokens: Token[] = [];
let rest = line.trim();
while (rest.length) {
let matched = false;
for (const h of hs) {
if (rest === h || rest.startsWith(`${h} `) || rest.startsWith(h)) {
tokens.push({ text: h, volt: true });
rest = rest.slice(h.length).trimStart();
matched = true;
break;
}
}
if (matched) continue;
const m = rest.match(/^(\S+)(\s*)/);
if (!m) break;
tokens.push({ text: m[1] });
rest = rest.slice(m[0].length);
}
return tokens;
}
</script>
apps/landing/components/IntroLoader.vue
+94
View File
@@ -0,0 +1,94 @@
<template>
<Transition name="intro-fade">
<div
v-if="visible"
class="fixed inset-0 z-[1000] flex flex-col items-center justify-center overflow-hidden bg-ink text-bone"
aria-live="polite"
aria-busy="true"
>
<div class="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(200,255,46,0.12),transparent_55%)]" />
<p
class="relative px-6 text-center font-display font-extrabold leading-[0.95] tracking-[-0.04em]"
:style="{ fontSize: 'clamp(2.6rem, 13vw, 9rem)' }"
>
<span class="block animate-fade-up">{{ brandParts.first }}</span>
<span
v-if="brandParts.second"
class="mt-2 block font-accent tracking-normal text-volt animate-fade-up md:mt-3"
style="animation-delay: 0.12s"
>{{ brandParts.second }}</span>
</p>
<div class="relative mt-16 flex w-[min(300px,72vw)] flex-col items-center gap-3 animate-fade-up" style="animation-delay: 0.25s">
<div class="h-px w-full overflow-hidden bg-white/10">
<div class="h-full bg-volt transition-[width] duration-75 ease-linear" :style="{ width: `${progress}%` }" />
</div>
<span class="font-mono text-xs tracking-[0.4em] text-ash tabular-nums" dir="ltr">
{{ String(Math.floor(progress)).padStart(2, "0") }}%
</span>
</div>
</div>
</Transition>
</template>
<script setup lang="ts">
const props = withDefaults(
defineProps<{ title?: string }>(),
{ title: "هوش‌افزار منتک" },
);
const visible = ref(false);
const progress = ref(0);
const brandParts = computed(() => {
const raw = (props.title || "هوش‌افزار منتک").trim();
const parts = raw.split(/\s+/);
if (parts.length <= 1) return { first: raw, second: "" };
return {
first: parts.slice(0, -1).join(" "),
second: parts.at(-1) || "",
};
});
onMounted(() => {
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (reduced) return;
visible.value = true;
document.documentElement.style.overflow = "hidden";
const start = performance.now();
const duration = 2400;
let raf = 0;
const tick = (now: number) => {
const t = Math.min(1, (now - start) / duration);
const eased = 1 - Math.pow(1 - t, 3);
progress.value = Math.min(100, eased * 100);
if (t < 1) {
raf = requestAnimationFrame(tick);
return;
}
progress.value = 100;
window.setTimeout(() => {
visible.value = false;
document.documentElement.style.overflow = "";
}, 320);
};
raf = requestAnimationFrame(tick);
onUnmounted(() => {
cancelAnimationFrame(raf);
document.documentElement.style.overflow = "";
});
});
</script>
<style scoped>
.intro-fade-leave-active {
transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.intro-fade-leave-to {
opacity: 0;
transform: scale(1.06);
}
</style>
apps/landing/components/ManifestoSection.vue
+21 -13
View File
@@ -2,18 +2,22 @@
<section id="manifesto" class="px-6 py-28 md:px-10 md:py-40">
<div class="mx-auto max-w-[1500px]">
<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="ml-[0.28em] inline-block"
:class="{
'text-outline': w.outline,
'text-volt': w.volt,
}"
>{{ w.text }}</span>
</p>
<p class="mt-10 max-w-xl text-sm leading-relaxed text-ash md:text-base">{{ data.body }}</p>
<div class="mt-14 flex flex-col gap-10 md:max-w-2xl animate-fade-up">
<p class="text-lg leading-relaxed text-ash md:text-xl md:leading-relaxed">
{{ intro?.body || data.body }}
</p>
<a
v-if="intro?.cta"
href="#work"
class="group inline-flex w-fit items-center gap-4 font-mono text-xs tracking-[0.16em] text-bone transition-colors hover:text-volt md:text-[13px] md:tracking-[0.22em]"
>
{{ intro.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">
↓
</span>
</a>
</div>
</div>
</section>
</template>
@@ -22,8 +26,12 @@
defineProps<{
data: {
tag: string;
words: Array<{ text: string; outline?: boolean; volt?: boolean }>;
words?: Array<{ text: string; outline?: boolean; volt?: boolean }>;
body: string;
};
intro?: {
body?: string;
cta?: string;
} | null;
}>();
</script>
apps/landing/components/ParticleField.vue
+162
View File
@@ -0,0 +1,162 @@
<template>
<canvas
ref="el"
class="pointer-events-none absolute inset-0 h-full w-full"
aria-hidden="true"
/>
</template>
<script setup lang="ts">
type Particle = { x: number; y: number; vx: number; vy: number; r: number; a: number };
const el = ref<HTMLCanvasElement | null>(null);
onMounted(() => {
const canvas = el.value;
if (!canvas) return;
const ctx = canvas.getContext("2d");
if (!ctx) return;
let particles: Particle[] = [];
let raf = 0;
let w = 0;
let h = 0;
let dpr = 1;
const mouse = { x: -9999, y: -9999, tx: -9999, ty: -9999 };
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const resize = () => {
const parent = canvas.parentElement;
if (!parent) return;
dpr = Math.min(window.devicePixelRatio || 1, 2);
w = parent.clientWidth;
h = parent.clientHeight;
canvas.width = Math.floor(w * dpr);
canvas.height = Math.floor(h * dpr);
canvas.style.width = `${w}px`;
canvas.style.height = `${h}px`;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
const count = Math.min(110, Math.max(40, Math.floor((w * h) / 12000)));
particles = Array.from({ length: count }, () => ({
x: Math.random() * w,
y: Math.random() * h,
vx: (Math.random() - 0.5) * 0.45,
vy: (Math.random() - 0.5) * 0.45,
r: Math.random() * 1.8 + 0.5,
a: Math.random() * 0.5 + 0.18,
}));
};
const onMove = (e: PointerEvent) => {
const rect = canvas.getBoundingClientRect();
mouse.tx = e.clientX - rect.left;
mouse.ty = e.clientY - rect.top;
};
const onLeave = () => {
mouse.tx = -9999;
mouse.ty = -9999;
};
const draw = () => {
ctx.clearRect(0, 0, w, h);
// smooth mouse follow
if (mouse.tx > -9000) {
mouse.x += (mouse.tx - mouse.x) * 0.12;
mouse.y += (mouse.ty - mouse.y) * 0.12;
} else {
mouse.x += (-9999 - mouse.x) * 0.05;
mouse.y += (-9999 - mouse.y) * 0.05;
}
const hasMouse = mouse.x > -5000;
for (const p of particles) {
if (!reduced && hasMouse) {
const dx = mouse.x - p.x;
const dy = mouse.y - p.y;
const dist = Math.hypot(dx, dy) || 1;
if (dist < 220) {
const force = (1 - dist / 220) * 0.065;
p.vx += (dx / dist) * force;
p.vy += (dy / dist) * force;
}
// soft orbital swirl near cursor
if (dist < 160) {
p.vx += (-dy / dist) * 0.02;
p.vy += (dx / dist) * 0.02;
}
}
p.vx *= 0.98;
p.vy *= 0.98;
p.x += p.vx;
p.y += p.vy;
if (p.x < 0) p.x = w;
if (p.x > w) p.x = 0;
if (p.y < 0) p.y = h;
if (p.y > h) p.y = 0;
// keep a tiny base drift so field never freezes
if (Math.abs(p.vx) < 0.05) p.vx += (Math.random() - 0.5) * 0.04;
if (Math.abs(p.vy) < 0.05) p.vy += (Math.random() - 0.5) * 0.04;
ctx.beginPath();
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
ctx.fillStyle = `rgba(200, 255, 46, ${p.a})`;
ctx.fill();
}
for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) {
const a = particles[i];
const b = particles[j];
const dx = a.x - b.x;
const dy = a.y - b.y;
const dist = Math.hypot(dx, dy);
if (dist > 120) continue;
let alpha = (1 - dist / 120) * 0.2;
if (hasMouse) {
const midX = (a.x + b.x) / 2;
const midY = (a.y + b.y) / 2;
const toMouse = Math.hypot(midX - mouse.x, midY - mouse.y);
if (toMouse < 180) alpha += (1 - toMouse / 180) * 0.25;
}
ctx.beginPath();
ctx.moveTo(a.x, a.y);
ctx.lineTo(b.x, b.y);
ctx.strokeStyle = `rgba(200, 255, 46, ${Math.min(alpha, 0.55)})`;
ctx.lineWidth = 1;
ctx.stroke();
}
}
if (hasMouse) {
const g = ctx.createRadialGradient(mouse.x, mouse.y, 0, mouse.x, mouse.y, 140);
g.addColorStop(0, "rgba(200, 255, 46, 0.12)");
g.addColorStop(1, "rgba(200, 255, 46, 0)");
ctx.fillStyle = g;
ctx.beginPath();
ctx.arc(mouse.x, mouse.y, 140, 0, Math.PI * 2);
ctx.fill();
}
raf = requestAnimationFrame(draw);
};
resize();
draw();
window.addEventListener("resize", resize);
window.addEventListener("pointermove", onMove, { passive: true });
document.addEventListener("pointerleave", onLeave);
onUnmounted(() => {
cancelAnimationFrame(raf);
window.removeEventListener("resize", resize);
window.removeEventListener("pointermove", onMove);
document.removeEventListener("pointerleave", onLeave);
});
});
</script>
apps/landing/components/ProcessSection.vue
+2 -2
View File
@@ -4,8 +4,8 @@
<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="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="font-mono text-[11px] tracking-[0.2em] text-volt">{{ step.n }}</p>
<h3 class="mt-4 font-display text-xl font-bold tracking-[-0.02em] 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 text-sm text-ash">
<div class="flex items-end justify-between gap-6 border-b border-white/[0.07] pb-4 font-mono text-[11px] tracking-[0.14em] text-ash md:tracking-[0.22em]">
<div class="flex items-center gap-3">
<span class="text-volt">{{ index }}</span>
<span class="text-bone">{{ title }}</span>
apps/landing/components/ServicesSection.vue
+5 -5
View File
@@ -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="text-sm text-ash">{{ s.n }}</span>
<h3 class="font-display text-2xl font-bold md:text-4xl group-hover:text-volt transition-colors">
<span class="font-mono text-[11px] tracking-[0.2em] text-ash">{{ s.n }}</span>
<h3 class="font-display text-2xl font-bold tracking-[-0.02em] transition-colors md:text-4xl group-hover:text-volt">
{{ s.title }}
</h3>
</div>
<span class="text-volt">{{ open === i ? "—" : "+" }}</span>
<span class="font-mono text-volt">{{ open === i ? "—" : "+" }}</span>
</div>
<div v-if="open === i" class="mt-6 max-w-3xl">
<div v-if="open === i" class="mt-6 max-w-3xl pe-0 md:pe-16 animate-fade-up">
<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 text-xs text-ash"
class="border border-white/10 px-3 py-1 font-mono text-[10px] tracking-[0.12em] text-ash"
>{{ t }}</span>
</div>
</div>
apps/landing/components/SiteFooter.vue
+7 -7
View File
@@ -4,7 +4,7 @@
<SiteMarquee
:items="data.marquee || []"
:duration="20"
class-name="font-display text-xl font-bold md:text-3xl"
class-name="font-display text-xl font-bold tracking-[-0.01em] md:text-3xl"
/>
</div>
@@ -12,13 +12,13 @@
<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.2rem,6vw,4.5rem)] font-extrabold leading-[1.15] tracking-[-0.02em]">
<h2 class="font-display text-[clamp(2.4rem,6.5vw,5.5rem)] font-extrabold leading-[1.08] tracking-[-0.03em]">
{{ data.cta || "شروع همکاری" }}
</h2>
<a
v-if="email"
:href="`mailto:${email}`"
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"
class="mt-8 inline-flex items-center gap-3 border border-volt bg-volt px-6 py-3 font-mono text-[11px] tracking-[0.16em] text-ink transition hover:bg-transparent hover:text-volt"
dir="ltr"
>
{{ email }} ↗
@@ -26,16 +26,16 @@
</div>
<div class="grid gap-8 sm:grid-cols-3 lg:grid-cols-1">
<div>
<p class="text-xs text-ash">کسب‌وکار جدید</p>
<p class="font-mono text-[10px] tracking-[0.2em] text-ash">کسب‌وکار جدید</p>
<p v-if="email" class="mt-2 text-sm" dir="ltr">{{ email }}</p>
<p v-if="phone" class="text-sm text-ash" dir="ltr">{{ phone }}</p>
</div>
<div>
<p class="text-xs text-ash">استودیو</p>
<p class="font-mono text-[10px] tracking-[0.2em] text-ash">استودیو</p>
<p v-for="line in addressLines" :key="line" class="mt-1 text-sm text-ash">{{ line }}</p>
</div>
<div>
<p class="text-xs text-ash">شبکه‌های اجتماعی</p>
<p class="font-mono text-[10px] tracking-[0.2em] text-ash">شبکه‌های اجتماعی</p>
<template v-if="socialLinks.length">
<a
v-for="s in socialLinks"
@@ -50,7 +50,7 @@
</div>
</div>
</div>
<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">
<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.16em] text-ash">
<span>© {{ year }} گروه نرم‌افزاری {{ brand || "منتک" }}</span>
<span>{{ brand || "منتک" }}®</span>
</div>
apps/landing/components/SiteMarquee.vue
+8 -5
View File
@@ -1,10 +1,13 @@
<template>
<div class="overflow-hidden" :class="className">
<div class="animate-marquee flex w-max" :style="{ '--marquee-duration': `${duration}s` } as any">
<div v-for="dup in 2" :key="dup" class="flex shrink-0 items-center">
<div class="overflow-hidden" :class="className" dir="ltr">
<div
class="animate-marquee flex w-max will-change-transform"
:style="{ '--marquee-duration': `${duration}s` } as any"
>
<div v-for="dup in 2" :key="dup" class="flex shrink-0 items-center" :aria-hidden="dup > 1">
<span v-for="(item, i) in items" :key="`${dup}-${i}`" class="flex items-center">
<span class="mx-5 whitespace-nowrap md:mx-8" :class="itemClassName">{{ item }}</span>
<span class="text-volt/70" :class="separatorClassName">{{ separator }}</span>
<span class="text-current/40" :class="separatorClassName">{{ separator }}</span>
</span>
</div>
</div>
@@ -22,7 +25,7 @@ withDefaults(
separator?: string;
}>(),
{
duration: 24,
duration: 28,
className: "",
itemClassName: "",
separatorClassName: "",
apps/landing/components/SiteNavbar.vue
+8 -8
View File
@@ -12,15 +12,15 @@
{{ brand }}<span class="align-super text-[0.55em] text-volt">®</span>
</template>
</NuxtLink>
<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 class="hidden items-center gap-7 font-mono text-[11px] tracking-[0.16em] text-ash md:flex">
<a href="/#services" class="transition-colors hover:text-volt">خدمات</a>
<a href="/#work" class="transition-colors hover:text-volt">نمونه‌کارها</a>
<a href="/#team" class="transition-colors hover:text-volt">تیم</a>
<NuxtLink to="/blog" class="transition-colors hover:text-volt">بلاگ</NuxtLink>
<NuxtLink to="/gallery" class="transition-colors hover:text-volt">گالری</NuxtLink>
<a href="/#contact" class="text-bone transition-colors hover:text-volt">تماس</a>
</nav>
<span class="text-xs text-ash tabular-nums" dir="ltr">{{ time }}</span>
<span class="font-mono text-[12px] tracking-[0.14em] text-ash tabular-nums md:text-[13px]" dir="ltr">{{ time }}</span>
</div>
</header>
</template>
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 text-sm text-ash">{{ s.label }}</p>
<p class="mt-3 font-mono text-[11px] tracking-[0.14em] text-ash md:tracking-[0.2em]">{{ s.label }}</p>
</div>
</div>
</section>
apps/landing/components/TeamSection.vue
+21 -6
View File
@@ -3,22 +3,28 @@
<div class="mx-auto max-w-[1500px]">
<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.2rem,6vw,5rem)] font-extrabold leading-[1.15] tracking-[-0.02em]">
{{ data.headline }}
<h2 class="font-display text-[clamp(2.4rem,7vw,6.5rem)] font-extrabold leading-[1.05] tracking-[-0.02em]">
<template v-if="headlineParts.rest">
{{ headlineParts.rest }}
<span class="font-accent text-volt">{{ headlineParts.last }}</span>
</template>
<template v-else>
{{ data.headline }}
</template>
</h2>
<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 bg-cover bg-center"
class="aspect-[3/4] overflow-hidden bg-gradient-to-br from-smoke to-ink bg-cover bg-center transition-transform duration-700 group-hover:scale-[1.02]"
:style="m.imageUrl ? { backgroundImage: `url(${m.imageUrl})` } : {}"
/>
<figcaption class="mt-4">
<p class="font-display text-xl font-bold group-hover:text-volt transition-colors">
<p class="font-display text-xl font-bold tracking-[-0.02em] transition-colors group-hover:text-volt">
{{ m.name }}
</p>
<p class="mt-1 text-xs text-ash">{{ m.role }}</p>
<p class="mt-1 font-mono text-[10px] tracking-[0.16em] text-ash">{{ m.role }}</p>
</figcaption>
</figure>
</div>
@@ -27,7 +33,7 @@
</template>
<script setup lang="ts">
defineProps<{
const props = defineProps<{
data: {
tag: string;
headline: string;
@@ -35,4 +41,13 @@ defineProps<{
members: Array<{ name: string; role: string; imageUrl?: string }>;
};
}>();
const headlineParts = computed(() => {
const parts = (props.data.headline || "").trim().split(/\s+/);
if (parts.length < 2) return { rest: "", last: props.data.headline };
return {
rest: parts.slice(0, -1).join(" "),
last: parts.at(-1) || "",
};
});
</script>
apps/landing/components/WorkSection.vue
+6 -6
View File
@@ -1,26 +1,26 @@
<template>
<section id="work" class="px-6 py-28 md:px-10 md:py-40">
<div class="mx-auto max-w-[1500px]">
<SectionTag index="۰۳" :title="data.tag" right="نمونه‌کارها" />
<SectionTag index="۰۳" :title="data.tag" right="۱۴۰۲ — ۱۴۰۴" />
<div class="mt-16 grid gap-6 md:grid-cols-2">
<article
v-for="p in data.items"
:key="p.n"
class="group relative overflow-hidden border border-white/[0.07] bg-coal p-6 md:p-8"
class="group relative overflow-hidden border border-white/[0.07] bg-coal p-6 transition-colors hover:border-volt/30 md:p-8"
>
<div
class="mb-16 aspect-[16/10] bg-gradient-to-br from-smoke to-ink bg-cover bg-center"
class="mb-16 aspect-[16/10] bg-gradient-to-br from-smoke to-ink bg-cover bg-center transition-transform duration-700 group-hover:scale-[1.03]"
:style="p.imageUrl ? { backgroundImage: `url(${p.imageUrl})` } : {}"
/>
<div class="flex items-end justify-between gap-4">
<div>
<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 class="font-mono text-[10px] tracking-[0.2em] text-ash">{{ p.n }} / {{ p.year }}</p>
<h3 class="mt-2 font-display text-2xl font-extrabold tracking-[-0.02em] transition-colors group-hover:text-volt md:text-3xl">
{{ p.title }}
</h3>
<p class="mt-2 text-sm text-ash">{{ p.cat }}</p>
</div>
<span class="text-volt">↗</span>
<span class="text-volt transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5">↗</span>
</div>
</article>
</div>