mirror of
https://github.com/Hestia-Homes/assessment-model.git
synced 2026-07-27 22:45:03 +00:00
a0f865ad85
Static Stitch export previously only available locally; referenced by the Ara Projects issues (#405-#429). README explains which parts are spec vs placeholder. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
220 lines
No EOL
12 KiB
HTML
220 lines
No EOL
12 KiB
HTML
<!DOCTYPE html><html class="light" lang="en"><head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
<title>Getting Started (Empty State)</title>
|
|
<!--
|
|
Ara Projects wireframe — Getting Started (Empty State)
|
|
Journey 1 — Admin import · screen 1 of 12
|
|
Stitch project 8537473387290162501 · screen f0dd0f99a8e948588a7fae543000dc23
|
|
Original HTML <title>: Getting Started - Ara Projects
|
|
Self-contained export: Tailwind, fonts and images vendored to ../assets/.
|
|
Body markup is unmodified except for these local asset paths.
|
|
-->
|
|
<script src="../assets/tailwind-play.js"></script>
|
|
<link href="../assets/fonts.css" rel="stylesheet">
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"on-secondary-fixed": "#291800",
|
|
"on-secondary": "#ffffff",
|
|
"surface-low": "#e3edf9",
|
|
"tertiary-fixed": "#d0e4ff",
|
|
"on-tertiary-fixed-variant": "#004a79",
|
|
"ink": "#111111",
|
|
"primary-dark": "#222a63",
|
|
"error-container": "#ffdad6",
|
|
"primary-fixed-dim": "#bcc2ff",
|
|
"secondary-fixed": "#ffddb2",
|
|
"surface-container": "#e6eeff",
|
|
"primary-fixed": "#dfe0ff",
|
|
"outline-variant": "#c6c5d2",
|
|
"surface-variant": "#d8e3f8",
|
|
"on-primary-container": "#96a0ed",
|
|
"on-background": "#111c2b",
|
|
"surface-high": "#d9e5f4",
|
|
"on-tertiary": "#ffffff",
|
|
"primary-container": "#2a347a",
|
|
"secondary-container": "#ffd6a0",
|
|
"surface-dim": "#cfdbef",
|
|
"on-error-container": "#93000a",
|
|
"on-surface-variant": "#454650",
|
|
"secondary": "#77592d",
|
|
"on-primary-fixed": "#04105a",
|
|
"tertiary": "#002743",
|
|
"canvas": "#eef4fc",
|
|
"on-surface": "#111c2b",
|
|
"surface-bright": "#f8f9ff",
|
|
"on-primary-fixed-variant": "#364087",
|
|
"primary": "#111c64",
|
|
"inverse-on-surface": "#ebf1ff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-error": "#ffffff",
|
|
"accent-soft": "#e4f1fc",
|
|
"tertiary-container": "#003d66",
|
|
"on-tan": "#3d2f16",
|
|
"on-primary": "#ffffff",
|
|
"inverse-surface": "#263141",
|
|
"tan-soft": "#f4ebdc",
|
|
"outline": "#767682",
|
|
"on-secondary-container": "#795c2f",
|
|
"background": "#f8f9ff",
|
|
"on-tertiary-container": "#50aaf9",
|
|
"line": "#d2ddec",
|
|
"surface-container-high": "#dee9fe",
|
|
"on-tertiary-fixed": "#001d34",
|
|
"tertiary-fixed-dim": "#9acbff",
|
|
"inverse-primary": "#bcc2ff",
|
|
"on-secondary-fixed-variant": "#5d4218",
|
|
"surface": "#f8f9ff",
|
|
"error-soft": "#fdecea",
|
|
"surface-container-highest": "#d8e3f8",
|
|
"secondary-fixed-dim": "#e7c08b",
|
|
"error": "#b3261e",
|
|
"surface-container-low": "#eff4ff",
|
|
"surface-tint": "#4f58a0"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"xl": "40px",
|
|
"sm": "8px",
|
|
"xs": "4px",
|
|
"header-height": "64px",
|
|
"lg": "24px",
|
|
"max-width": "1440px",
|
|
"sidebar-width": "256px",
|
|
"md": "16px"
|
|
},
|
|
"fontFamily": {
|
|
"display": ["Montserrat"],
|
|
"body": ["Montserrat"],
|
|
"h2": ["Montserrat"],
|
|
"technical": ["Questrial"],
|
|
"overline": ["Questrial"],
|
|
"h1": ["Montserrat"],
|
|
"display-mobile": ["Montserrat"],
|
|
"subheading": ["Montserrat"],
|
|
"body-bold": ["Montserrat"],
|
|
"h3": ["Montserrat"]
|
|
},
|
|
"fontSize": {
|
|
"display": ["36px", { "lineHeight": "1.1", "fontWeight": "800" }],
|
|
"body": ["14px", { "lineHeight": "1.25", "fontWeight": "500" }],
|
|
"h2": ["24px", { "lineHeight": "1.2", "fontWeight": "800" }],
|
|
"technical": ["12px", { "lineHeight": "1.4", "fontWeight": "400" }],
|
|
"overline": ["11px", { "lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "700" }],
|
|
"h1": ["30px", { "lineHeight": "1.2", "fontWeight": "800" }],
|
|
"display-mobile": ["32px", { "lineHeight": "1.1", "fontWeight": "800" }],
|
|
"subheading": ["18px", { "lineHeight": "1.4", "fontWeight": "700" }],
|
|
"body-bold": ["14px", { "lineHeight": "1.25", "fontWeight": "600" }],
|
|
"h3": ["20px", { "lineHeight": "1.4", "fontWeight": "700" }]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.material-symbols-outlined.fill {
|
|
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.shadow-card {
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-canvas text-on-surface min-h-screen flex flex-col font-body antialiased">
|
|
<!-- TopNavBar -->
|
|
<header class="bg-surface-container-lowest fixed top-0 w-full h-header-height z-50 flex justify-between items-center px-lg border-b border-line">
|
|
<div class="flex items-center gap-md">
|
|
<span class="font-display text-h3 font-extrabold text-primary">Ara Projects</span>
|
|
</div>
|
|
<nav class="hidden md:flex items-center gap-md h-full">
|
|
<a class="h-full flex items-center text-primary border-b-2 border-primary pb-1 px-sm" href="#">
|
|
<span class="font-body-bold text-body-bold">Dashboard</span>
|
|
</a>
|
|
<a class="h-full flex items-center text-on-surface-variant hover:text-primary transition-colors cursor-pointer px-sm" href="#">
|
|
<span class="font-body text-body">Projects</span>
|
|
</a>
|
|
<a class="h-full flex items-center text-on-surface-variant hover:text-primary transition-colors cursor-pointer px-sm" href="#">
|
|
<span class="font-body text-body">Maintenance</span>
|
|
</a>
|
|
<a class="h-full flex items-center text-on-surface-variant hover:text-primary transition-colors cursor-pointer px-sm" href="#">
|
|
<span class="font-body text-body">Schedule</span>
|
|
</a>
|
|
</nav>
|
|
<div class="flex items-center gap-sm">
|
|
<button class="p-xs text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80">
|
|
<span class="material-symbols-outlined" data-icon="help">help</span>
|
|
</button>
|
|
<button class="p-xs text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80">
|
|
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
|
</button>
|
|
<div class="w-8 h-8 rounded-full bg-surface-high overflow-hidden ml-sm cursor-pointer border border-line">
|
|
<img alt="User account menu" class="w-full h-full object-cover" data-alt="A professional headshot of a person looking directly at the camera. The lighting is bright and even, set against a clean, light-colored background. The style is modern corporate, matching a clean UI aesthetic." src="../assets/img/img13.png">
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content Canvas -->
|
|
<main class="flex-1 mt-header-height p-lg flex flex-col items-center justify-center max-w-[1440px] mx-auto w-full gap-xl">
|
|
<!-- Empty State Card -->
|
|
<div class="bg-surface-container-lowest rounded-lg border border-line shadow-card p-xl flex flex-col items-center text-center max-w-2xl w-full">
|
|
<div class="w-24 h-24 bg-surface-low rounded-full flex items-center justify-center mb-lg">
|
|
<span class="material-symbols-outlined text-[48px] text-primary" data-icon="folder_open">folder_open</span>
|
|
</div>
|
|
<h1 class="font-h1 text-h1 text-primary mb-sm">Welcome to Ara Projects</h1>
|
|
<p class="font-body text-body text-on-surface-variant max-w-md mb-xl">
|
|
You don't have any active projects yet. Start by creating a new project to organize your workflows, track progress, and manage resources efficiently.
|
|
</p>
|
|
<button class="bg-primary text-on-primary font-body-bold text-body-bold px-lg py-sm rounded-DEFAULT hover:bg-primary-dark transition-colors flex items-center gap-sm">
|
|
<span class="material-symbols-outlined" data-icon="add">add</span>
|
|
Create project
|
|
</button>
|
|
</div>
|
|
<!-- How setup works - Bento Grid Layout -->
|
|
<div class="w-full max-w-4xl mt-lg">
|
|
<h2 class="font-h2 text-h2 text-primary mb-lg text-center">How setup works</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-md">
|
|
<!-- Step 1 -->
|
|
<div class="bg-surface-container-lowest rounded-lg border border-line shadow-card p-lg flex gap-md">
|
|
<div class="w-10 h-10 rounded-full bg-surface-high flex items-center justify-center shrink-0">
|
|
<span class="font-body-bold text-primary">1</span>
|
|
</div>
|
|
<div><h3 class="font-h3 text-h3 text-primary mb-xs">Project details</h3><p class="font-body text-body text-on-surface-variant">Set up the basic parameters, naming conventions, and core objectives for your new project.</p></div>
|
|
</div>
|
|
<!-- Step 2 -->
|
|
<div class="bg-surface-container-lowest rounded-lg border border-line shadow-card p-lg flex gap-md">
|
|
<div class="w-10 h-10 rounded-full bg-surface-high flex items-center justify-center shrink-0">
|
|
<span class="font-body-bold text-primary">2</span>
|
|
</div>
|
|
<div><h3 class="font-h3 text-h3 text-primary mb-xs">Workstreams and stages</h3><p class="font-body text-body text-on-surface-variant">Map out the lifecycle of your project with custom stages, milestones, and deliverables.</p></div>
|
|
</div>
|
|
<!-- Step 3 -->
|
|
<div class="bg-surface-container-lowest rounded-lg border border-line shadow-card p-lg flex gap-md">
|
|
<div class="w-10 h-10 rounded-full bg-surface-high flex items-center justify-center shrink-0">
|
|
<span class="font-body-bold text-primary">3</span>
|
|
</div>
|
|
<div><h3 class="font-h3 text-h3 text-primary mb-xs">Documents and permissions</h3><p class="font-body text-body text-on-surface-variant">Create actionable tasks and quality assurance checks for each stage of the project.</p></div>
|
|
</div>
|
|
<!-- Step 4 -->
|
|
<div class="bg-surface-container-lowest rounded-lg border border-line shadow-card p-lg flex gap-md">
|
|
<div class="w-10 h-10 rounded-full bg-surface-high flex items-center justify-center shrink-0">
|
|
<span class="font-body-bold text-primary">4</span>
|
|
</div>
|
|
<div><h3 class="font-h3 text-h3 text-primary mb-xs">Import and validate work orders</h3><p class="font-body text-body text-on-surface-variant">Invite team members and assign specific roles to ensure secure and structured collaboration.</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
|
|
</body></html> |