jason/mrp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MERKET

Browse Source
This commit is contained in:
jason
2026-03-17 00:24:33 -05:00
parent 279c46fbde
commit c3f0adc676
2 changed files with 562 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
client/src/modules/landing/LandingPage.tsx
View File

@@ -80,18 +80,18 @@ function getThemeVars(variant: LandingVariant): CSSProperties {
function panelClass(isDark: boolean) {
return isDark
? "border-white/12 bg-white/[0.07] shadow-[0_30px_90px_rgba(2,6,23,0.52)]"
: "border-white/60 bg-white/[0.48] shadow-[0_30px_90px_rgba(37,99,235,0.14)]";
? "border-line/70 bg-surface/90 shadow-[0_30px_80px_rgba(2,6,23,0.45)]"
: "border-line/70 bg-surface/90 shadow-[0_30px_80px_rgba(15,23,42,0.12)]";
}
function softPanelClass(isDark: boolean) {
return isDark
? "border-white/10 bg-white/[0.06] shadow-[0_20px_60px_rgba(2,6,23,0.4)]"
: "border-white/55 bg-white/[0.42] shadow-[0_18px_50px_rgba(37,99,235,0.1)]";
? "border-line/70 bg-page/80 shadow-[0_20px_60px_rgba(2,6,23,0.34)]"
: "border-line/70 bg-page/75 shadow-[0_20px_50px_rgba(15,23,42,0.1)]";
}
function chipClass(isDark: boolean) {
return isDark ? "border-white/15 bg-white/[0.08]" : "border-white/60 bg-white/[0.52]";
return isDark ? "border-line/70 bg-page/80" : "border-line/70 bg-surface/90";
}
function LandingExperience({ variant }: { variant: LandingVariant }) {
@@ -116,7 +116,7 @@ function LandingExperience({ variant }: { variant: LandingVariant }) {
<div className={`absolute left-[22%] top-[32rem] h-64 w-64 rounded-full blur-3xl ${isDark ? "bg-indigo-400/10" : "bg-violet-200/35"}`} />
<div className="relative mx-auto flex w-full max-w-7xl flex-col gap-12 px-6 pb-20 pt-8 lg:px-8">
<header className={`flex flex-col gap-4 rounded-[30px] border px-5 py-4 backdrop-blur-2xl xl:flex-row xl:items-center xl:justify-between ${panelClass(isDark)}`}>
<header className={`flex flex-col gap-4 rounded-[28px] border px-5 py-4 xl:flex-row xl:items-center xl:justify-between ${panelClass(isDark)}`}>
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[linear-gradient(135deg,rgb(var(--color-brand)),rgb(var(--color-accent)))] text-lg font-black tracking-[0.18em] text-white">
CX
@@ -127,13 +127,13 @@ function LandingExperience({ variant }: { variant: LandingVariant }) {
</div>
</div>
<div className="flex flex-wrap items-center gap-3">
<span className={`rounded-2xl border px-4 py-2 text-sm font-semibold text-text backdrop-blur-xl ${chipClass(isDark)}`}>
<span className={`rounded-2xl border px-4 py-2 text-sm font-semibold text-text ${chipClass(isDark)}`}>
{variantLabel}
</span>
<Link to={altRoute} className={`rounded-2xl border px-4 py-2 text-sm font-semibold text-text transition hover:bg-white/10 backdrop-blur-xl ${chipClass(isDark)}`}>
<Link to={altRoute} className={`rounded-2xl border px-4 py-2 text-sm font-semibold text-text transition hover:bg-page/70 ${chipClass(isDark)}`}>
{altLabel}
</Link>
<Link to="/login" className={`rounded-2xl border px-4 py-2 text-sm font-semibold text-text transition hover:bg-white/10 backdrop-blur-xl ${chipClass(isDark)}`}>
<Link to="/login" className={`rounded-2xl border px-4 py-2 text-sm font-semibold text-text transition hover:bg-page/70 ${chipClass(isDark)}`}>
Open app
</Link>
<a
@@ -147,7 +147,7 @@ function LandingExperience({ variant }: { variant: LandingVariant }) {
<section className="grid gap-10 lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
<div>
<div className={`inline-flex items-center gap-2 rounded-full border px-4 py-2 text-xs font-semibold uppercase tracking-[0.24em] text-muted backdrop-blur-2xl ${chipClass(isDark)}`}>
<div className={`inline-flex items-center gap-2 rounded-full border px-4 py-2 text-xs font-semibold uppercase tracking-[0.24em] text-muted ${chipClass(isDark)}`}>
Built for discrete manufacturing teams
</div>
<h1 className="mt-6 max-w-4xl font-['Space_Grotesk','Manrope',sans-serif] text-5xl font-black leading-[0.95] tracking-[-0.05em] text-text sm:text-6xl xl:text-7xl">
@@ -159,7 +159,7 @@ function LandingExperience({ variant }: { variant: LandingVariant }) {
<div className="mt-8 grid gap-3 sm:grid-cols-3">
{heroMetrics.map((metric) => (
<article key={metric.label} className={`rounded-[26px] border p-4 backdrop-blur-2xl ${softPanelClass(isDark)}`}>
<article key={metric.label} className={`rounded-[24px] border p-4 ${softPanelClass(isDark)}`}>
<div className="text-xs font-semibold uppercase tracking-[0.22em] text-muted">{metric.label}</div>
<div className="mt-3 text-3xl font-black tracking-[-0.04em] text-text">{metric.value}</div>
<div className="mt-2 text-sm text-muted">{metric.detail}</div>
@@ -169,9 +169,9 @@ function LandingExperience({ variant }: { variant: LandingVariant }) {
</div>
<div className="relative">
<div className={`absolute -left-8 top-10 hidden h-24 w-24 rounded-[30px] border backdrop-blur-2xl lg:block ${isDark ? "border-white/10 bg-white/[0.06]" : "border-white/60 bg-white/[0.3]"}`} />
<div className={`rounded-[34px] border p-5 backdrop-blur-3xl ${panelClass(isDark)}`}>
<div className={`rounded-[30px] border p-5 backdrop-blur-2xl ${softPanelClass(isDark)}`}>
<div className={`absolute -left-8 top-10 hidden h-20 w-20 rounded-[28px] border lg:block ${isDark ? "border-white/20 bg-white/10" : "border-white/40 bg-white/20"}`} />
<div className={`rounded-[32px] border p-5 ${isDark ? "bg-[linear-gradient(160deg,rgba(15,23,42,0.82),rgba(15,23,42,0.48))] shadow-[0_35px_90px_rgba(2,6,23,0.55)]" : "bg-[linear-gradient(160deg,rgba(255,255,255,0.68),rgba(255,255,255,0.24))] shadow-[0_35px_90px_rgba(15,23,42,0.18)]"} ${isDark ? "border-line/70" : "border-line/70"}`}>
<div className={`rounded-[28px] border p-5 ${softPanelClass(isDark)}`}>
<div className="flex flex-wrap items-center justify-between gap-3">
<div>
<div className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Generated executive board</div>
@@ -186,15 +186,15 @@ function LandingExperience({ variant }: { variant: LandingVariant }) {
{spotlightBoard.map((card) => (
<article
key={card.title}
className={`rounded-[24px] border p-4 backdrop-blur-2xl ${
className={`rounded-[24px] border p-4 ${
card.tone === "brand"
? isDark
? "border-blue-300/18 bg-blue-300/10"
: "border-blue-400/25 bg-blue-400/10"
? "border-[rgb(var(--color-brand)/0.25)] bg-[rgb(var(--color-brand)/0.08)]"
: "border-[rgb(var(--color-brand)/0.25)] bg-[rgb(var(--color-brand)/0.08)]"
: card.tone === "accent"
? isDark
? "border-teal-300/18 bg-teal-300/10"
: "border-teal-400/25 bg-teal-400/10"
? "border-[rgb(var(--color-accent)/0.25)] bg-[rgb(var(--color-accent)/0.08)]"
: "border-[rgb(var(--color-accent)/0.25)] bg-[rgb(var(--color-accent)/0.08)]"
: softPanelClass(isDark)
}`}
>
@@ -206,7 +206,7 @@ function LandingExperience({ variant }: { variant: LandingVariant }) {
</div>
<div className="mt-5 grid gap-3 xl:grid-cols-[1.3fr_0.7fr]">
<div className={`rounded-[24px] border p-4 backdrop-blur-2xl ${softPanelClass(isDark)}`}>
<div className={`rounded-[24px] border p-4 ${softPanelClass(isDark)}`}>
<div className="flex items-center justify-between gap-3">
<div className="text-sm font-semibold text-text">Project and manufacturing pulse</div>
<div className="text-xs uppercase tracking-[0.18em] text-muted">Generated snapshot</div>
@@ -217,12 +217,12 @@ function LandingExperience({ variant }: { variant: LandingVariant }) {
{ label: "Orion service kit launch", progress: 61, status: "Waiting on one purchased line" },
{ label: "Atlas retrofit release", progress: 43, status: "Routing review in progress" },
].map((row) => (
<div key={row.label} className={`rounded-[20px] border p-3 backdrop-blur-2xl ${isDark ? "border-white/10 bg-white/[0.05]" : "border-white/55 bg-white/[0.35]"}`}>
<div key={row.label} className={`rounded-[20px] border p-3 ${isDark ? "border-line/70 bg-page/75" : "border-line/60 bg-page/75"}`}>
<div className="flex flex-wrap items-center justify-between gap-2">
<div className="font-semibold text-text">{row.label}</div>
<div className="text-xs uppercase tracking-[0.18em] text-muted">{row.progress}%</div>
</div>
<div className={`mt-3 h-2 overflow-hidden rounded-full ${isDark ? "bg-white/10" : "bg-slate-200/80"}`}>
<div className={`mt-3 h-2 overflow-hidden rounded-full ${isDark ? "bg-line/70" : "bg-line/70"}`}>
<div
className="h-full rounded-full bg-[linear-gradient(90deg,rgb(var(--color-brand)),rgb(var(--color-accent)))]"
style={{ width: `${row.progress}%` }}
@@ -234,7 +234,7 @@ function LandingExperience({ variant }: { variant: LandingVariant }) {
</div>
</div>
<div className={`rounded-[24px] border p-4 backdrop-blur-2xl ${softPanelClass(isDark)}`}>
<div className={`rounded-[24px] border p-4 ${softPanelClass(isDark)}`}>
<div className="text-sm font-semibold text-text">Supply signals</div>
<div className="mt-4 space-y-3">
{[
@@ -242,7 +242,7 @@ function LandingExperience({ variant }: { variant: LandingVariant }) {
{ sku: "KIT-2208", action: "Buy", qty: "240 EA" },
{ sku: "CAB-9031", action: "Transfer", qty: "64 EA" },
].map((signal) => (
<div key={signal.sku} className={`rounded-[18px] border px-3 py-3 backdrop-blur-2xl ${isDark ? "border-white/10 bg-white/[0.05]" : "border-white/55 bg-white/[0.35]"}`}>
<div key={signal.sku} className={`rounded-[18px] border px-3 py-3 ${isDark ? "border-line/70 bg-page/75" : "border-line/60 bg-page/75"}`}>
<div className="flex items-center justify-between gap-3">
<div>
<div className="font-semibold text-text">{signal.sku}</div>
@@ -260,9 +260,9 @@ function LandingExperience({ variant }: { variant: LandingVariant }) {
</div>
</section>
<section className={`grid gap-4 rounded-[32px] border p-6 backdrop-blur-3xl lg:grid-cols-3 ${panelClass(isDark)}`}>
<section className={`grid gap-4 rounded-[32px] border p-6 lg:grid-cols-3 ${panelClass(isDark)}`}>
{proofCards.map((card) => (
<article key={card.label} className={`rounded-[24px] border p-4 backdrop-blur-2xl ${softPanelClass(isDark)}`}>
<article key={card.label} className={`rounded-[24px] border p-4 ${softPanelClass(isDark)}`}>
<div className="text-xs font-semibold uppercase tracking-[0.22em] text-muted">{card.label}</div>
<div className="mt-3 text-5xl font-black tracking-[-0.06em] text-text">{card.value}</div>
<div className="mt-2 text-sm text-muted">{card.note}</div>
@@ -275,13 +275,13 @@ function LandingExperience({ variant }: { variant: LandingVariant }) {
<main className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-6 pb-24 lg:px-8">
<section className="grid gap-6 lg:grid-cols-3">
{moduleCards.map((card) => (
<article key={card.title} className={`rounded-[30px] border p-6 backdrop-blur-3xl ${panelClass(isDark)}`}>
<article key={card.title} className={`rounded-[28px] border p-6 ${panelClass(isDark)}`}>
<div className="text-xs font-semibold uppercase tracking-[0.22em] text-muted">{card.eyebrow}</div>
<h2 className="mt-4 font-['Space_Grotesk','Manrope',sans-serif] text-2xl font-bold tracking-[-0.04em] text-text">{card.title}</h2>
<p className="mt-4 text-sm leading-7 text-muted">{card.copy}</p>
<div className="mt-6 flex flex-wrap gap-2">
{card.bullets.map((bullet) => (
<span key={bullet} className={`rounded-full border px-3 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-text backdrop-blur-xl ${chipClass(isDark)}`}>
<span key={bullet} className={`rounded-full border px-3 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-text ${chipClass(isDark)}`}>
{bullet}
</span>
))}
@@ -290,7 +290,7 @@ function LandingExperience({ variant }: { variant: LandingVariant }) {
))}
</section>
<section className={`grid gap-8 rounded-[32px] border p-6 backdrop-blur-3xl lg:grid-cols-[0.9fr_1.1fr] ${panelClass(isDark)}`}>
<section className={`grid gap-8 rounded-[32px] border p-6 lg:grid-cols-[0.9fr_1.1fr] ${panelClass(isDark)}`}>
<div>
<div className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">How it moves</div>
<h2 className="mt-4 font-['Space_Grotesk','Manrope',sans-serif] text-4xl font-black tracking-[-0.05em] text-text">
@@ -303,8 +303,8 @@ function LandingExperience({ variant }: { variant: LandingVariant }) {
<div className="space-y-4">
{timeline.map((step) => (
<article key={step.time} className={`grid gap-4 rounded-[24px] border p-4 backdrop-blur-2xl md:grid-cols-[92px_1fr] md:items-start ${softPanelClass(isDark)}`}>
<div className={`rounded-[18px] px-4 py-3 text-center ${isDark ? "bg-white/[0.08]" : "bg-white/[0.55]"}`}>
<article key={step.time} className={`grid gap-4 rounded-[24px] border p-4 md:grid-cols-[92px_1fr] md:items-start ${softPanelClass(isDark)}`}>
<div className={`rounded-[18px] px-4 py-3 text-center ${isDark ? "bg-surface/80" : "bg-surface/90"}`}>
<div className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Time</div>
<div className="mt-1 text-2xl font-black tracking-[-0.04em] text-text">{step.time}</div>
</div>
@@ -318,7 +318,7 @@ function LandingExperience({ variant }: { variant: LandingVariant }) {
</section>
<section className="grid gap-6 lg:grid-cols-[1.15fr_0.85fr]">
<article className={`rounded-[32px] border p-6 backdrop-blur-3xl ${panelClass(isDark)}`}>
<article className={`rounded-[32px] border p-6 ${panelClass(isDark)}`}>
<div className="text-xs font-semibold uppercase tracking-[0.22em] text-muted">Who this is for</div>
<h2 className="mt-4 font-['Space_Grotesk','Manrope',sans-serif] text-4xl font-black tracking-[-0.05em] text-text">
Teams graduating from spreadsheets, generic ERPs, or disconnected point tools.
@@ -330,14 +330,14 @@ function LandingExperience({ variant }: { variant: LandingVariant }) {
"Growing production shops that want branding, PDFs, approvals, and auditability without enterprise bloat.",
"Leaders who want a system operators will actually open all day, not just during month-end cleanup.",
].map((statement) => (
<div key={statement} className={`rounded-[22px] border p-4 text-sm leading-7 text-text backdrop-blur-2xl ${softPanelClass(isDark)}`}>
<div key={statement} className={`rounded-[22px] border p-4 text-sm leading-7 text-text ${softPanelClass(isDark)}`}>
{statement}
</div>
))}
</div>
</article>
<article id="contact" className={`rounded-[32px] border p-6 backdrop-blur-3xl ${panelClass(isDark)}`}>
<article id="contact" className={`rounded-[32px] border p-6 ${panelClass(isDark)}`}>
<div className="text-xs font-semibold uppercase tracking-[0.22em] text-muted">Next step</div>
<h2 className="mt-4 font-['Space_Grotesk','Manrope',sans-serif] text-3xl font-black tracking-[-0.05em] text-text">
Pitch the platform with a page that already looks production-grade.
@@ -345,7 +345,7 @@ function LandingExperience({ variant }: { variant: LandingVariant }) {
<p className="mt-4 text-sm leading-7 text-muted">
Use this route as a commercial front door, demo backdrop, or customer-facing preview while the core app remains focused on execution.
</p>
<div className={`mt-6 space-y-3 rounded-[24px] border p-4 text-sm text-muted backdrop-blur-2xl ${softPanelClass(isDark)}`}>
<div className={`mt-6 space-y-3 rounded-[24px] border p-4 text-sm text-muted ${softPanelClass(isDark)}`}>
<div className="flex items-center justify-between gap-3">
<span>Public route</span>
<span className="font-semibold text-text">{isDark ? "/darklanding" : "/landing"}</span>
@@ -366,7 +366,7 @@ function LandingExperience({ variant }: { variant: LandingVariant }) {
>
Enter the app
</Link>
<a href="#top" className={`rounded-2xl border px-4 py-3 text-sm font-semibold text-text transition hover:bg-white/10 backdrop-blur-xl ${chipClass(isDark)}`}>
<a href="#top" className={`rounded-2xl border px-4 py-3 text-sm font-semibold text-text transition hover:bg-page/70 ${chipClass(isDark)}`}>
Back to top
</a>
</div>