diff --git a/src/components/PhaseAtAGlance.jsx b/src/components/PhaseAtAGlance.jsx new file mode 100644 index 00000000..984fcf1d --- /dev/null +++ b/src/components/PhaseAtAGlance.jsx @@ -0,0 +1,571 @@ +import clsx from 'clsx' +import Link from 'next/link' +import { FaCog, FaKey, FaLock } from 'react-icons/fa' +import { FiEye, FiFolder } from 'react-icons/fi' +import { + SiAmazoniam, + SiAmazonwebservices, + SiCloudflarepages, + SiCloudflareworkers, + SiDatadog, + SiDependabot, + SiGithub, + SiGithubactions, + SiGithubcopilot, + SiGitlab, + SiGnometerminal, + SiGo, + SiGooglecloud, + SiJenkins, + SiKubernetes, + SiMicrosoftazure, + SiNodedotjs, + SiNomad, + SiOkta, + SiOpenai, + SiPostgresql, + SiPython, + SiRailway, + SiRender, + SiTerraform, + SiVercel, +} from 'react-icons/si' + +import { ClaudeIcon, CursorIcon, OpenCodeIcon } from '@/components/icons/AgentIcons' + +/** + * "Phase at a glance" — the docs landing page, in the swiss drafting + * language. Ported from the website's HowPhaseWorks export sheet; every + * colour token is a light/dark pair so it follows the docs theme toggle + * natively (no image swap). Every cell title links to its docs section + * (underlined on hover), so the sheet doubles as a map of the docs. Four + * hue-coded bands with the store as the hub: + * + * Access (sky) — lifecycle axis develop → build → deploy → + * run and every surface that reaches into + * Phase along it; each drops a trace into + * the store. + * Store (emerald) — app › environment › path › key/value and + * the three secret types. + * Automate (violet) — rotation, dynamic secrets, syncs; three + * traces drop from the store. + * Control & monitor (amber) — authentication, network access policies, + * audit logs. Cross-cutting, so no traces. + * + * Static — no motion. Laid out for ≥1000px; below that the sheet scrolls + * horizontally inside its wrapper. Semantic accents mirror the website: + * lease-ledger dots (active / expiring / revoked), [SYNCED] statuses, + * amber sealed lock, amber ❯ prompt, IP allow-list chips. + */ + +/* ------------------------------------------------------------------ */ +/* Tokens — light class first, dark: pair second */ +/* ------------------------------------------------------------------ */ + +const t = { + sheet: 'bg-white text-zinc-700 dark:bg-zinc-900 dark:text-zinc-300', + frameBorder: 'border-zinc-200 dark:border-zinc-800', + rule: 'border-zinc-200 dark:border-zinc-800', + divide: 'divide-zinc-200 dark:divide-zinc-800', + line: 'bg-zinc-300 dark:bg-zinc-700', + lineSoft: 'bg-zinc-200 dark:bg-zinc-800', + ink: 'text-zinc-900 dark:text-zinc-100', + body: 'text-zinc-700 dark:text-zinc-300', + muted: 'text-zinc-500', + faint: 'text-zinc-400 dark:text-zinc-600', + panel: 'bg-zinc-50 dark:bg-zinc-800/40', + chip: 'border-zinc-300 text-zinc-700 dark:border-zinc-700 dark:text-zinc-300', + accentDot: 'bg-emerald-500 dark:bg-emerald-400', + accentBorder: 'border-emerald-500 dark:border-emerald-400', + tabIdle: 'text-zinc-500', + tabActive: 'text-zinc-900 dark:text-zinc-100', + iconTone: 'text-zinc-700 dark:text-zinc-300', + plus: 'text-zinc-300 dark:text-zinc-700', + hue: { + sky: { + text: 'text-sky-600 dark:text-sky-400', + border: 'border-sky-500/50 dark:border-sky-400/45', + }, + emerald: { + text: 'text-emerald-600 dark:text-emerald-400', + border: 'border-emerald-500/50 dark:border-emerald-400/45', + }, + violet: { + text: 'text-violet-600 dark:text-violet-400', + border: 'border-violet-500/50 dark:border-violet-400/45', + }, + amber: { + text: 'text-amber-600 dark:text-amber-400', + border: 'border-amber-500/50 dark:border-amber-400/45', + }, + }, + ok: { + text: 'text-emerald-600 dark:text-emerald-400', + dot: 'bg-emerald-500 dark:bg-emerald-400', + }, + warn: { + text: 'text-amber-600 dark:text-amber-400', + dot: 'bg-amber-500 dark:bg-amber-400', + }, + bad: { + text: 'text-red-600 dark:text-red-400', + dot: 'bg-red-500 dark:bg-red-400', + }, + glyph: { + config: 'text-cyan-600 dark:text-cyan-400', + secret: 'text-sky-600 dark:text-sky-400', + sealed: 'text-amber-600 dark:text-amber-400', + }, + sealedMask: 'text-amber-600/70 dark:text-amber-400/70', + prompt: 'text-amber-600 dark:text-amber-400', + ipRange: + 'border-blue-500/40 bg-blue-50 text-blue-700 dark:bg-blue-500/[0.06] dark:text-blue-300', + ipSingle: + 'border-emerald-500/40 bg-emerald-50 text-emerald-700 dark:bg-emerald-500/[0.06] dark:text-emerald-300', +} + +const eyebrow = 'font-mono text-[10px] uppercase tracking-[0.14em]' + +/* ------------------------------------------------------------------ */ +/* Primitives */ +/* ------------------------------------------------------------------ */ + +/** Band zone label — mono, uppercase, in the band's hue. */ +function BandLabel({ hue, children }) { + return {children} +} + +/** A provider / tool mark: icon (or text chip) + optional label. */ +function Mark({ Icon, text, label }) { + return ( + + {Icon ? ( + + ) +} + +/** Tailscale mark — 3×3 dot grid, middle row + bottom-centre solid (a T). */ +function TailscaleMark({ className }) { + return ( + + ) +} + +/** IP allow-list chip — blue for ranges, emerald for single addresses. */ +function IpChip({ range, children }) { + return ( + + {children} + + ) +} + +/** Status dot + mono text — the lease-ledger idiom (active / expiring / revoked). */ +function Status({ level, className, children }) { + return ( + + + ) +} + +/** Hue-coded node cell — border in the band hue at reduced opacity, title in + * the hue — a docs link when `href` is given, underlined on hover — with an + * optional right-aligned status, marks + a faint sub-line pinned to the + * bottom. */ +function Cell({ hue, title, href, status, sub, className, children }) { + return ( +
+
+ {href ? ( + + {title} + + ) : ( + {title} + )} + {status} +
+
+
{children}
+ {sub && ( +
{sub}
+ )} +
+
+ ) +} + +/** A row of vertical hairline traces, one per grid column, centered. */ +function Drops({ cols, spans, className }) { + return ( + + ) +} + +/* ------------------------------------------------------------------ */ +/* Store — the console-style frame */ +/* ------------------------------------------------------------------ */ + +const rowGrid = 'grid grid-cols-[188px_300px_84px_1fr] items-center px-4' + +function StoreFrame() { + return ( +
+ {/* App title bar */} +
+ + App + payments-api + + 3 environments · 47 secrets +
+ + {/* Environment tabs + path */} +
+
+ {[ + { name: 'Development', active: false }, + { name: 'Staging', active: false }, + { name: 'Production', active: true }, + ].map((env) => ( + + {env.active && } + {env.name} + + ))} +
+ + +
+ + {/* Table — the three rows are the type legend */} +
+ Key + Value + Type + +
+
+ {/* config — visible */} +
+ + + 5432 + config + always visible +
+ {/* secret — masked, revealed here */} +
+ + + + db.internal + + secret + masked · reveal with access +
+ {/* sealed — never revealed */} +
+ + + ********* + sealed + write-only · injected at runtime +
+
+
+ ) +} + +/* ------------------------------------------------------------------ */ +/* Component */ +/* ------------------------------------------------------------------ */ + +const ACCESS_SPANS = Array.from({ length: 6 }, () => 'col-span-1') +const agentIcon = clsx('h-3.5 w-3.5 shrink-0', t.iconTone) + +export function PhaseAtAGlance() { + return ( +
+
+ {/* ------------------------------ Access ------------------------------ */} +
+ Access + + {/* Lifecycle axis: develop → build → deploy → run */} +
+ {[ + { label: 'Develop', span: 'col-span-2' }, + { label: 'Build', span: 'col-span-2' }, + { label: 'Deploy', span: 'col-span-1' }, + { label: 'Run', span: 'col-span-1' }, + ].map((s) => ( + + {s.label} + + ))} +
+
+ +
+
+ + +
+ + + + skill · phase-cli + + + + + + + + REST API + + + + + + + + + + phase_secret · phase_secrets + + + plan +2 ~1 + + + + + native Secrets + + pods 3/3 ready + + +
+ + {/* Every access surface drops a trace into the store */} + +
+ + {/* ------------------------------- Store ------------------------------- */} +
+
+ Store +
+
+ +
+
+ + {/* Traces from the store into the automate cells */} +
+ +
+ Automate +
+
+ + {/* ----------------------------- Automate ------------------------------ */} +
+ + + + + + + + v42 · active secret + v41 · expiring in 6h + + + + + + + + active · expires in 54m + expiring · 3m + revoked + + + synced 12s ago} + sub="automated secret deployment" + > + + + + + + + + + + + + + + +
+ + {/* -------------------------- Control & monitor ------------------------ */} +
+ + +
+
+ ) +} diff --git a/src/components/icons/AgentIcons.jsx b/src/components/icons/AgentIcons.jsx new file mode 100644 index 00000000..70edfabe --- /dev/null +++ b/src/components/icons/AgentIcons.jsx @@ -0,0 +1,24 @@ +/** + * Agent marks without Simple Icons entries — copied from the website's + * swiss agent-icons (phase.dev). All render in currentColor. + */ +export const ClaudeIcon = (props) => ( + + + +) + +/** Official Cursor cube mark (2D variant from the Cursor brand kit). */ +export const CursorIcon = (props) => ( + + + +) + +/** Official OpenCode logomark (opencode.ai/brand), flattened to currentColor. */ +export const OpenCodeIcon = (props) => ( + + + + +) diff --git a/src/pages/index.mdx b/src/pages/index.mdx index ff40b5f7..9541bed9 100644 --- a/src/pages/index.mdx +++ b/src/pages/index.mdx @@ -1,38 +1,19 @@ -import { PlatformsIntegration } from '@/components/PlatformsIntegration' +import { PhaseAtAGlance } from '@/components/PhaseAtAGlance' -import { Deployments } from '@/components/Deployments' -import { SecurityResources } from '@/components/SecurityResources' import { Platform } from '@/components/Platform' -import { About } from '@/components/AboutPhase' import { HeroPattern } from '@/components/HeroPattern' -import { Tag } from '@/components/Tag' -import { FaArrowRight } from 'react-icons/fa' export const description = - 'Phase is an open source & end-to-end encrypted platform for creating, managing, syncing and deploying secrets and environment variables across your infrastructure.' + 'Secrets management for your applications and AI agents. Store secrets as key-value pairs across environments and access them via the CLI, SDKs and APIs. Automate the secret lifecycle — mint, rotate, deploy, revoke. Control access and gain visibility.' -# Introduction +# The Phase platform -Phase is an open-source, end-to-end encrypted platform for creating, managing, and deploying application secrets and environment variables across your infrastructure. {{ className: 'lead' }} - -- **Import** secrets from `.env` files and [inject](/quickstart#3-inject-secrets) them into any application or container at runtime. -- **Automate** secret deployment to platforms like [GitHub Actions](/integrations/platforms/github-actions), [Kubernetes](/integrations/platforms/kubernetes), [AWS](/integrations/platforms/aws-secrets-manager) and more. -- **Share** secrets with your [team](/console/users#add-users-to-an-organisation) and manage access to secrets with [cryptographic RBAC](/console/environments#manage-user-access). -- **Manage** secrets with [environments](/console/environments), audit-logs, [RBAC](/access-control) etc. - -![console](/assets/images/console/console-ui.webp) - - -The Phase platform provides powerful secret management features including personal secret overrides, secret versioning & roll-back, secret referencing, RBAC, and much more. -You can replace .env files with runtime secret inject with a fully-featured [CLI](/cli), deploy secrets to third party services with native integrations, and build your own custom workflows and integrations with [SDKs](/sdks) and [APIs](/public-api). - - - -The platform is built on a sophisticated [encryption architecture](/security/architecture), while abstracting as much of the complexity of this implementation away from the user as possible. +Secrets management for your applications and AI agents. Store secrets as key-value pairs across environments and access them via the CLI, SDKs and APIs. Automate the secret lifecycle — mint, rotate, deploy, revoke. Control access and gain visibility. {{ className: 'lead' }} + --- @@ -44,51 +25,4 @@ Get setup with Phase in minutes by following the Quickstart guide. This Guide wi
- - - -## Integrate Phase - -Seamlessly work with your preferred tools and platforms. - - - -
-
- -## Self-host Phase - -Deploy Phase on your own infrastructure, maintain full control over your data. - - - -
-
- ---- - -## Ready to try?{{ anchor: true }} - -To get started, create a new application in your [Phase Console](https://console.phase.dev) and set up the [Phase CLI](/cli/usage). {{ className: 'lead' }} - -
-