mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2026-09-03 05:10:16 +03:00
ConnorYoh
a8bda9240c
## What this PR does Redesigns the portal home to match the marketing demo, across all tiers. - Swapped the old rotating welcome carousel for a static **welcome hero** on the free tier - Subscribed (Processor) + enterprise get a **deployed-editor hero** — shows the live instance (host, version, active users) with an *Open in browser* button, pulled from the real editor-deployment API (same data the Editor admin page uses) - Added a time-of-day **greeting** on the paid tiers - Rebuilt the **"Finish setting up" checklist** so it's real: the counts and tick-offs come from the actual policies + sources (a step is done when there's at least one), not hardcoded numbers - *Download the PDF Editor* → `https://stirling.com/download`; the other steps deep-link to Policies / Sources - **Procurement is now a bolt-on to any tier** — if a deal's in flight the deal-status hero drops into the hero's footer, otherwise you get the setup checklist - All new copy is translated (en-US) and it reuses the shared UI kit, icons and design tokens ## Tidy-ups / fixes found along the way - The subscribed hero was shadowing the real `/v1/editor/deployment` endpoint (broke the Editor admin page) — now reuses it - Renamed the hero's CSS namespace to `.portal-welcome` so it stops clashing with the procurement hero's `.portal-hero` - Refactored the merged procurement component into a shared `useProcurement` hook + banner + flow, so the deal hero can live inside the tier hero — `/procurement` route unchanged ## Screenshots <img width="1258" height="1338" alt="pr-free" src="https://github.com/user-attachments/assets/9bb7db44-5f8e-4388-857a-7f113c2d7d82" /> <img width="1258" height="862" alt="pr-enterprise" src="https://github.com/user-attachments/assets/f1f36faa-1467-404e-9036-dab12e3d0b54" /> <img width="1258" height="944" alt="pr-subscribed" src="https://github.com/user-attachments/assets/775f1228-f182-47b5-82ff-7ac6d5932bd9" /> --- ## Checklist ### General - [x] I have performed a self-review of my own code - [x] My changes generate no new warnings ### UI Changes - [x] Screenshots demonstrating the UI changes are attached ### Testing - [x] Portal typecheck, ESLint and Prettier pass on the changed files - [x] Verified all states in Storybook and ran the app locally via `task dev:portal`
119 lines
2.8 KiB
CSS
119 lines
2.8 KiB
CSS
/* ──────────────────────────────────────────────────────────────────────── */
|
|
/* Subscribed-tier deployed-Editor hero */
|
|
/* ──────────────────────────────────────────────────────────────────────── */
|
|
|
|
.portal-editor-hero {
|
|
border-radius: var(--radius-xl);
|
|
border: 1px solid var(--color-border-input);
|
|
background: var(--color-surface);
|
|
box-shadow: var(--shadow-sm);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.portal-editor-hero__row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.25rem;
|
|
padding: 1.25rem 1.5rem;
|
|
}
|
|
|
|
.portal-editor-hero__logo {
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
border-radius: 0.875rem;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.1),
|
|
0 0 0 1px rgba(0, 0, 0, 0.06);
|
|
}
|
|
.portal-editor-hero__mark {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.portal-editor-hero__info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.portal-editor-hero__title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5625rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.portal-editor-hero__name {
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
color: var(--color-text-1);
|
|
margin-right: 0.125rem;
|
|
}
|
|
|
|
.portal-editor-hero__chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.3125rem;
|
|
padding: 0.3125rem 0.75rem;
|
|
border-radius: var(--radius-pill);
|
|
border: 1px solid var(--color-border-input);
|
|
background: var(--color-bg-code);
|
|
color: var(--color-text-2);
|
|
font-size: 0.71875rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
|
|
transition:
|
|
background var(--motion-fast),
|
|
box-shadow var(--motion-fast),
|
|
transform var(--motion-fast);
|
|
}
|
|
.portal-editor-hero__chip:hover {
|
|
background: var(--color-surface);
|
|
box-shadow: 0 2px 5px rgba(15, 23, 42, 0.1);
|
|
transform: translateY(-1px);
|
|
}
|
|
.portal-editor-hero__chip svg {
|
|
color: var(--color-text-4);
|
|
}
|
|
|
|
.portal-editor-hero__meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
font-size: 0.75rem;
|
|
color: var(--color-text-5);
|
|
}
|
|
.portal-editor-hero__host {
|
|
color: var(--color-text-2);
|
|
font-family: var(--font-mono);
|
|
font-weight: 500;
|
|
}
|
|
.portal-editor-hero__meta-sep {
|
|
color: var(--color-border-input);
|
|
}
|
|
|
|
.portal-editor-hero__action {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
@media (max-width: 48rem) {
|
|
.portal-editor-hero__row {
|
|
flex-wrap: wrap;
|
|
}
|
|
.portal-editor-hero__action {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Attached footer strip (setup checklist). */
|
|
.portal-editor-hero__footer {
|
|
border-top: 1px solid var(--color-border-light);
|
|
}
|