MahdiandCursor
3410f3e5ed
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>
84 lines
3.1 KiB
Vue
84 lines
3.1 KiB
Vue
<template>
|
|
<section id="top" class="relative flex min-h-svh flex-col overflow-hidden">
|
|
<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]"
|
|
style="animation-delay: 0.2s"
|
|
>
|
|
<span class="flex items-center gap-3">
|
|
<span class="h-1.5 w-1.5 animate-blink rounded-full bg-volt" />
|
|
{{ data.eyebrow }}
|
|
</span>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<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"
|
|
style="animation-delay: 0.8s"
|
|
>
|
|
<span>اسکرول کنید</span>
|
|
<span class="hidden sm:block">{{ data.coords }}</span>
|
|
<span class="hidden sm:block">{{ data.projectsLabel }}</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
data: {
|
|
eyebrow: string;
|
|
location: string;
|
|
lines: string[];
|
|
highlightWord: string;
|
|
body: string;
|
|
cta: string;
|
|
coords: string;
|
|
projectsLabel: string;
|
|
};
|
|
}>();
|
|
</script>
|