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" /> <Sparkles className="h-4 w-4" />
{content.eyebrow} {content.eyebrow}
</div> </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} {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%)]"> <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} {content.hero.accent}
</span> </span>
</h1> </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} {content.hero.description}
</p> </p>
</div> </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]"> <div className="animate-landing-rise flex flex-col gap-3 sm:flex-row [animation-delay:140ms]">
<Button <Button
asChild 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}> <Link to={ctaTarget}>
{content.cta.button} {content.cta.button}
@@ -180,7 +180,7 @@ export default function About() {
<Button <Button
asChild asChild
variant="outline" 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="/"> <Link to="/">
{lang === "fa" ? "بازگشت به صفحه اصلی" : "Back to home"} {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"> <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" /> <Icon className="h-5 w-5" />
</div> </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} {principle.title}
</h2> </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} {principle.description}
</p> </p>
</article> </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"> <div className="text-sm font-semibold uppercase tracking-[0.2em] text-cyan-700 dark:text-cyan-300">
{lang === "fa" ? "برای چه تیم‌هایی" : "Who it serves"} {lang === "fa" ? "برای چه تیم‌هایی" : "Who it serves"}
</div> </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."} {lang === "fa" ? "برای تیم‌هایی که زمان را بخشی از عملیات می‌دانند." : "For teams that treat time as part of operations."}
</h2> </h2>
<div className="mt-6 flex flex-wrap gap-3"> <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"> <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" /> <Icon className="h-5 w-5" />
</div> </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} {capability.title}
</h3> </h3>
</div> </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"> <div className="text-sm font-semibold uppercase tracking-[0.2em] text-cyan-700 dark:text-cyan-300">
{lang === "fa" ? "اعتماد و کنترل" : "Trust and control"} {lang === "fa" ? "اعتماد و کنترل" : "Trust and control"}
</div> </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."} {lang === "fa" ? "جزئیات مهم باید قابل بررسی بمانند." : "Important details should remain reviewable."}
</h2> </h2>
</div> </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"> <div className="text-sm font-semibold uppercase tracking-[0.2em] text-cyan-700 dark:text-cyan-300">
{content.contact.eyebrow} {content.contact.eyebrow}
</div> </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} {content.contact.title}
</h2> </h2>
<p className="mt-4 text-base leading-8 text-slate-600 dark:text-slate-300"> <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"> <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" /> <Send className="h-5 w-5" />
</span> </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} {content.contact.formTitle}
</h2> </h2>
</div> </div>
@@ -459,7 +459,7 @@ export default function About() {
<Button <Button
type="submit" type="submit"
disabled={isContactSubmitting} 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" /> <Send className="me-2 h-4 w-4" />
{isContactSubmitting ? content.contact.submitting : content.contact.submit} {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"> <div className="text-sm font-semibold uppercase tracking-[0.2em] text-cyan-300">
{lang === "fa" ? "شروع ساده" : "Simple start"} {lang === "fa" ? "شروع ساده" : "Simple start"}
</div> </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} {content.cta.title}
</h2> </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> </div>
<Button <Button
asChild 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}> <Link to={ctaTarget}>
{content.cta.button} {content.cta.button}

30
src/pages/Landing.tsx
View File

@@ -166,13 +166,13 @@ export default function Landing() {
<Sparkles className="h-4 w-4" /> <Sparkles className="h-4 w-4" />
{t.landing.eyebrow} {t.landing.eyebrow}
</div> </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} {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%)]"> <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} {t.landing.hero.titleAccent}
</span> </span>
</h1> </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} {t.landing.hero.description}
</p> </p>
</div> </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]"> <div className="animate-landing-rise flex flex-col gap-3 sm:flex-row [animation-delay:220ms]">
<Button <Button
onClick={() => navigate(ctaTarget)} 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} {isAuthenticated ? t.landing.actions.openWorkspace : t.landing.actions.startNow}
<ArrowRight className={cn("ms-2 h-4 w-4", lang === "fa" && "rtl:rotate-180")} /> <ArrowRight className={cn("ms-2 h-4 w-4", lang === "fa" && "rtl:rotate-180")} />
@@ -189,7 +189,7 @@ export default function Landing() {
type="button" type="button"
onClick={handleStartDemo} onClick={handleStartDemo}
disabled={isStartingDemo} 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} {isStartingDemo ? t.demo?.starting || "Preparing demo..." : t.landing.actions.watchDemo}
</button> </button>
@@ -204,7 +204,7 @@ export default function Landing() {
metric.tone, 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 className="mt-2 text-sm font-medium text-slate-600 dark:text-slate-300">{metric.label}</div>
</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"> <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" /> <Icon className="h-5 w-5" />
</div> </div>
<h2 className="mt-5 text-2xl font-semibold tracking-[-0.04em] text-slate-950 dark:text-white">{title}</h2> <h2 className="mt-5 text-xl 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> <p className="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-300">{description}</p>
</div> </div>
))} ))}
</section> </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"> <div className="text-sm font-semibold uppercase tracking-[0.2em] text-cyan-700 dark:text-cyan-300">
{t.landing.workflowTag} {t.landing.workflowTag}
</div> </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} {t.landing.workflowTitle}
</h2> </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} {t.landing.workflowDescription}
</p> </p>
</div> </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"> <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}`} {lang === "fa" ? `گام ${formatNumber(index + 1, lang)}` : `Step ${index + 1}`}
</div> </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} {item}
</div> </div>
</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="relative flex flex-col lg:flex-row gap-6 justify-between">
<div className="max-w-4xl"> <div className="max-w-4xl">
<div className="text-sm font-semibold uppercase tracking-[0.2em] text-cyan-300">{t.landing.finalCtaTag}</div> <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} {t.landing.finalCtaTitle}
</h2> </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>
<div className="flex flex-row lg:flex-col gap-3"> <div className="flex flex-row lg:flex-col gap-3">
<Button <Button
onClick={() => navigate(ctaTarget)} 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} {isAuthenticated ? t.landing.actions.openWorkspace : t.landing.actions.startNow}
</Button> </Button>
<Button <Button
variant="outline" variant="outline"
asChild 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> <Link to="/terms">{t.landing.actions.readTerms}</Link>
</Button> </Button>
<Button <Button
variant="outline" variant="outline"
asChild 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> <Link to="/about">{t.landing.actions.readAbout}</Link>
</Button> </Button>