Qlockify/qlockify-frontend-deployment
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

style(marketing): reduce public page typography scale

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-06-23 02:28:56 +03:30
parent edcd92f70d
commit 1741869e44
2 changed files with 30 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/pages/About.tsx
View File

@@ -156,13 +156,13 @@ export default function About() {
<Sparkles className="h-4 w-4" />
{content.eyebrow}
</div>
<h1 className="max-w-4xl text-4xl font-semibold leading-[1.08] text-slate-950 sm:text-5xl lg:text-6xl dark:text-white">
<h1 className="max-w-4xl text-3xl font-semibold leading-[1.12] text-slate-950 sm:text-4xl lg:text-5xl dark:text-white">
{content.hero.title}
<span className="landing-shimmer mt-4 block bg-[linear-gradient(120deg,#0f172a_15%,#0891b2_48%,#0f766e_78%,#0f172a_100%)] bg-clip-text pb-4 text-transparent dark:bg-[linear-gradient(120deg,#ffffff_18%,#67e8f9_48%,#2dd4bf_78%,#ffffff_100%)]">
{content.hero.accent}
</span>
</h1>
<p className="mt-6 max-w-2xl text-lg leading-8 text-slate-600 dark:text-slate-300 sm:text-xl">
<p className="mt-5 max-w-2xl text-base leading-7 text-slate-600 dark:text-slate-300 sm:text-lg">
{content.hero.description}
</p>
</div>
@@ -170,7 +170,7 @@ export default function About() {
<div className="animate-landing-rise flex flex-col gap-3 sm:flex-row [animation-delay:140ms]">
<Button
asChild
className="h-14 rounded-full bg-slate-950 px-7 text-base text-white shadow-[0_30px_80px_-28px_rgba(8,145,178,0.45)] hover:bg-slate-800 dark:bg-cyan-400 dark:text-slate-950 dark:hover:bg-cyan-300"
className="h-12 rounded-full bg-slate-950 px-6 text-sm text-white shadow-[0_30px_80px_-28px_rgba(8,145,178,0.45)] hover:bg-slate-800 dark:bg-cyan-400 dark:text-slate-950 dark:hover:bg-cyan-300"
>
<Link to={ctaTarget}>
{content.cta.button}
@@ -180,7 +180,7 @@ export default function About() {
<Button
asChild
variant="outline"
className="h-14 rounded-full border-slate-200 bg-white/85 px-7 text-base text-slate-800 shadow-sm backdrop-blur hover:bg-white dark:border-slate-800 dark:bg-slate-950/70 dark:text-slate-100 dark:hover:bg-slate-900"
className="h-12 rounded-full border-slate-200 bg-white/85 px-6 text-sm text-slate-800 shadow-sm backdrop-blur hover:bg-white dark:border-slate-800 dark:bg-slate-950/70 dark:text-slate-100 dark:hover:bg-slate-900"
>
<Link to="/">
{lang === "fa" ? "بازگشت به صفحه اصلی" : "Back to home"}
@@ -252,10 +252,10 @@ export default function About() {
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-950 text-white dark:bg-cyan-400 dark:text-slate-950">
<Icon className="h-5 w-5" />
</div>
<h2 className="mt-5 text-2xl font-semibold tracking-[-0.04em] text-slate-950 dark:text-white">
<h2 className="mt-5 text-xl font-semibold tracking-[-0.04em] text-slate-950 dark:text-white">
{principle.title}
</h2>
<p className="mt-3 text-base leading-7 text-slate-600 dark:text-slate-300">
<p className="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-300">
{principle.description}
</p>
</article>
@@ -268,7 +268,7 @@ export default function About() {
<div className="text-sm font-semibold uppercase tracking-[0.2em] text-cyan-700 dark:text-cyan-300">
{lang === "fa" ? "برای چه تیم‌هایی" : "Who it serves"}
</div>
<h2 className="mt-4 text-4xl font-semibold tracking-[-0.05em] text-slate-950 dark:text-white">
<h2 className="mt-4 text-3xl font-semibold tracking-[-0.05em] text-slate-950 dark:text-white">
{lang === "fa" ? "برای تیم‌هایی که زمان را بخشی از عملیات می‌دانند." : "For teams that treat time as part of operations."}
</h2>
<div className="mt-6 flex flex-wrap gap-3">
@@ -297,7 +297,7 @@ export default function About() {
<div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-slate-950 text-white dark:bg-white dark:text-slate-950">
<Icon className="h-5 w-5" />
</div>
<h3 className="text-xl font-semibold tracking-[-0.04em] text-slate-950 dark:text-white">
<h3 className="text-lg font-semibold tracking-[-0.04em] text-slate-950 dark:text-white">
{capability.title}
</h3>
</div>
@@ -317,7 +317,7 @@ export default function About() {
<div className="text-sm font-semibold uppercase tracking-[0.2em] text-cyan-700 dark:text-cyan-300">
{lang === "fa" ? "اعتماد و کنترل" : "Trust and control"}
</div>
<h2 className="mt-3 text-3xl font-semibold tracking-[-0.05em] text-slate-950 dark:text-white">
<h2 className="mt-3 text-2xl font-semibold tracking-[-0.05em] text-slate-950 dark:text-white">
{lang === "fa" ? "جزئیات مهم باید قابل بررسی بمانند." : "Important details should remain reviewable."}
</h2>
</div>
@@ -345,7 +345,7 @@ export default function About() {
<div className="text-sm font-semibold uppercase tracking-[0.2em] text-cyan-700 dark:text-cyan-300">
{content.contact.eyebrow}
</div>
<h2 className="mt-4 text-4xl font-semibold tracking-[-0.05em] text-slate-950 dark:text-white">
<h2 className="mt-4 text-3xl font-semibold tracking-[-0.05em] text-slate-950 dark:text-white">
{content.contact.title}
</h2>
<p className="mt-4 text-base leading-8 text-slate-600 dark:text-slate-300">
@@ -396,7 +396,7 @@ export default function About() {
<span className="flex h-11 w-11 items-center justify-center rounded-2xl bg-slate-950 text-white dark:bg-cyan-400 dark:text-slate-950">
<Send className="h-5 w-5" />
</span>
<h2 className="text-2xl font-semibold tracking-[-0.04em] text-slate-950 dark:text-white">
<h2 className="text-xl font-semibold tracking-[-0.04em] text-slate-950 dark:text-white">
{content.contact.formTitle}
</h2>
</div>
@@ -459,7 +459,7 @@ export default function About() {
<Button
type="submit"
disabled={isContactSubmitting}
className="mt-6 h-14 w-full rounded-full bg-slate-950 px-7 text-base text-white hover:bg-slate-800 dark:bg-cyan-400 dark:text-slate-950 dark:hover:bg-cyan-300"
className="mt-6 h-12 w-full rounded-full bg-slate-950 px-6 text-sm text-white hover:bg-slate-800 dark:bg-cyan-400 dark:text-slate-950 dark:hover:bg-cyan-300"
>
<Send className="me-2 h-4 w-4" />
{isContactSubmitting ? content.contact.submitting : content.contact.submit}
@@ -475,14 +475,14 @@ export default function About() {
<div className="text-sm font-semibold uppercase tracking-[0.2em] text-cyan-300">
{lang === "fa" ? "شروع ساده" : "Simple start"}
</div>
<h2 className="mt-4 text-4xl font-semibold leading-[1.1] tracking-[-0.05em] sm:text-5xl">
<h2 className="mt-4 text-3xl font-semibold leading-[1.12] tracking-[-0.05em] sm:text-4xl">
{content.cta.title}
</h2>
<p className="mt-4 text-lg leading-8 text-slate-300">{content.cta.description}</p>
<p className="mt-4 text-base leading-7 text-slate-300">{content.cta.description}</p>
</div>
<Button
asChild
className="h-14 rounded-full bg-white px-7 text-base font-semibold text-slate-950 hover:bg-slate-100"
className="h-12 rounded-full bg-white px-6 text-sm font-semibold text-slate-950 hover:bg-slate-100"
>
<Link to={ctaTarget}>
{content.cta.button}

30
src/pages/Landing.tsx
View File

@@ -166,13 +166,13 @@ export default function Landing() {
<Sparkles className="h-4 w-4" />
{t.landing.eyebrow}
</div>
<h1 className="max-w-4xl text-4xl font-semibold leading-[1.1] text-slate-950 sm:text-4xl lg:text-5xl 2xl:text-6xl dark:text-white">
<h1 className="max-w-4xl text-3xl font-semibold leading-[1.12] text-slate-950 sm:text-4xl lg:text-5xl dark:text-white">
{t.landing.hero.titleTop}
<span className="mt-4 pb-4 landing-shimmer block bg-[linear-gradient(120deg,#0f172a_15%,#0891b2_48%,#0f766e_78%,#0f172a_100%)] bg-clip-text text-transparent dark:bg-[linear-gradient(120deg,#ffffff_18%,#67e8f9_48%,#2dd4bf_78%,#ffffff_100%)]">
{t.landing.hero.titleAccent}
</span>
</h1>
<p className="mt-6 max-w-2xl text-lg leading-8 text-slate-600 dark:text-slate-300 sm:text-xl">
<p className="mt-5 max-w-2xl text-base leading-7 text-slate-600 dark:text-slate-300 sm:text-lg">
{t.landing.hero.description}
</p>
</div>
@@ -180,7 +180,7 @@ export default function Landing() {
<div className="animate-landing-rise flex flex-col gap-3 sm:flex-row [animation-delay:220ms]">
<Button
onClick={() => navigate(ctaTarget)}
className="h-14 rounded-full bg-slate-950 px-7 text-base text-white shadow-[0_30px_80px_-28px_rgba(8,145,178,0.45)] hover:bg-slate-800 dark:bg-cyan-400 dark:text-slate-950 dark:hover:bg-cyan-300"
className="h-12 rounded-full bg-slate-950 px-6 text-sm text-white shadow-[0_30px_80px_-28px_rgba(8,145,178,0.45)] hover:bg-slate-800 dark:bg-cyan-400 dark:text-slate-950 dark:hover:bg-cyan-300"
>
{isAuthenticated ? t.landing.actions.openWorkspace : t.landing.actions.startNow}
<ArrowRight className={cn("ms-2 h-4 w-4", lang === "fa" && "rtl:rotate-180")} />
@@ -189,7 +189,7 @@ export default function Landing() {
type="button"
onClick={handleStartDemo}
disabled={isStartingDemo}
className="inline-flex h-14 items-center justify-center rounded-full border border-slate-200 bg-white/85 px-7 text-base font-medium text-slate-800 shadow-sm backdrop-blur transition hover:bg-white disabled:cursor-not-allowed disabled:opacity-70 dark:border-slate-800 dark:bg-slate-950/70 dark:text-slate-100 dark:hover:bg-slate-900"
className="inline-flex h-12 items-center justify-center rounded-full border border-slate-200 bg-white/85 px-6 text-sm font-medium text-slate-800 shadow-sm backdrop-blur transition hover:bg-white disabled:cursor-not-allowed disabled:opacity-70 dark:border-slate-800 dark:bg-slate-950/70 dark:text-slate-100 dark:hover:bg-slate-900"
>
{isStartingDemo ? t.demo?.starting || "Preparing demo..." : t.landing.actions.watchDemo}
</button>
@@ -204,7 +204,7 @@ export default function Landing() {
metric.tone,
)}
>
<div className="text-3xl font-semibold tracking-[-0.04em]">{metric.value}</div>
<div className="text-2xl font-semibold tracking-[-0.04em]">{metric.value}</div>
<div className="mt-2 text-sm font-medium text-slate-600 dark:text-slate-300">{metric.label}</div>
</div>
))}
@@ -367,8 +367,8 @@ export default function Landing() {
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-950 text-white dark:bg-cyan-400 dark:text-slate-950">
<Icon className="h-5 w-5" />
</div>
<h2 className="mt-5 text-2xl font-semibold tracking-[-0.04em] text-slate-950 dark:text-white">{title}</h2>
<p className="mt-3 text-base leading-7 text-slate-600 dark:text-slate-300">{description}</p>
<h2 className="mt-5 text-xl font-semibold tracking-[-0.04em] text-slate-950 dark:text-white">{title}</h2>
<p className="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-300">{description}</p>
</div>
))}
</section>
@@ -378,10 +378,10 @@ export default function Landing() {
<div className="text-sm font-semibold uppercase tracking-[0.2em] text-cyan-700 dark:text-cyan-300">
{t.landing.workflowTag}
</div>
<h2 className="mt-4 text-4xl font-semibold tracking-[-0.05em] text-slate-950 dark:text-white">
<h2 className="mt-4 text-3xl font-semibold tracking-[-0.05em] text-slate-950 dark:text-white">
{t.landing.workflowTitle}
</h2>
<p className="mt-4 max-w-xl text-lg leading-8 text-slate-600 dark:text-slate-300">
<p className="mt-4 max-w-xl text-base leading-7 text-slate-600 dark:text-slate-300">
{t.landing.workflowDescription}
</p>
</div>
@@ -395,7 +395,7 @@ export default function Landing() {
<div className="text-sm font-semibold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500">
{lang === "fa" ? `گام ${formatNumber(index + 1, lang)}` : `Step ${index + 1}`}
</div>
<div className="mt-12 text-xl font-semibold leading-8 tracking-[-0.03em] text-slate-950 dark:text-white">
<div className="mt-12 text-lg font-semibold leading-7 tracking-[-0.03em] text-slate-950 dark:text-white">
{item}
</div>
</div>
@@ -409,29 +409,29 @@ export default function Landing() {
<div className="relative flex flex-col lg:flex-row gap-6 justify-between">
<div className="max-w-4xl">
<div className="text-sm font-semibold uppercase tracking-[0.2em] text-cyan-300">{t.landing.finalCtaTag}</div>
<h2 className="mt-4 text-4xl font-semibold leading-[1.1] tracking-[-0.05em] sm:text-5xl">
<h2 className="mt-4 text-3xl font-semibold leading-[1.12] tracking-[-0.05em] sm:text-4xl">
{t.landing.finalCtaTitle}
</h2>
<p className="mt-4 text-lg leading-8 text-slate-300">{t.landing.finalCtaDescription}</p>
<p className="mt-4 text-base leading-7 text-slate-300">{t.landing.finalCtaDescription}</p>
</div>
<div className="flex flex-row lg:flex-col gap-3">
<Button
onClick={() => navigate(ctaTarget)}
className="h-14 rounded-full bg-white px-7 text-base font-semibold text-slate-950 hover:bg-slate-100"
className="h-12 rounded-full bg-white px-6 text-sm font-semibold text-slate-950 hover:bg-slate-100"
>
{isAuthenticated ? t.landing.actions.openWorkspace : t.landing.actions.startNow}
</Button>
<Button
variant="outline"
asChild
className="h-14 rounded-full border-white/20 bg-white/5 px-7 text-base text-white hover:bg-white/10 dark:border-white/20 dark:bg-white/5 dark:text-white dark:hover:bg-white/10"
className="h-12 rounded-full border-white/20 bg-white/5 px-6 text-sm text-white hover:bg-white/10 dark:border-white/20 dark:bg-white/5 dark:text-white dark:hover:bg-white/10"
>
<Link to="/terms">{t.landing.actions.readTerms}</Link>
</Button>
<Button
variant="outline"
asChild
className="h-14 rounded-full border-white/20 bg-white/5 px-7 text-base text-white hover:bg-white/10 dark:border-white/20 dark:bg-white/5 dark:text-white dark:hover:bg-white/10"
className="h-12 rounded-full border-white/20 bg-white/5 px-6 text-sm text-white hover:bg-white/10 dark:border-white/20 dark:bg-white/5 dark:text-white dark:hover:bg-white/10"
>
<Link to="/about">{t.landing.actions.readAbout}</Link>
</Button>