mirror of
https://github.com/Hestia-Homes/assessment-model.git
synced 2026-07-19 17:02:59 +00:00
docs(design): home-page redesign context — Stitch refs, PRODUCT.md, impeccable trial
Design references and critique snapshot for the portfolio home redesign; impeccable design skill added to devcontainer postCreateCommand on trial. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Khalim Conn-Kowlessar
parent
ce6a6ffa2d
commit
31b7c28ad5
7 changed files with 3551 additions and 1 deletions
|
|
@ -12,7 +12,9 @@
|
|||
// Install Domna's curated skill set (pinned to 0.0.5) into this workspace,
|
||||
// then install npm deps. `gh repo clone` handles private-repo auth using
|
||||
// the mounted host ~/.config/gh.
|
||||
"postCreateCommand": "gh repo clone Hestia-Homes/agentic-toolkit /tmp/agentic-toolkit -- --branch 0.0.8 --depth 1 && bash /tmp/agentic-toolkit/setup.sh && npm install",
|
||||
// impeccable (design-guidance skill, github.com/pbakaus/impeccable) is on
|
||||
// trial for the home-page redesign; drop its `skills add` step to remove it.
|
||||
"postCreateCommand": "gh repo clone Hestia-Homes/agentic-toolkit /tmp/agentic-toolkit -- --branch 0.0.8 --depth 1 && bash /tmp/agentic-toolkit/setup.sh && npx --yes skills@latest add pbakaus/impeccable --agent claude-code --copy --global --yes && npm install",
|
||||
|
||||
"forwardPorts": ["frontend:3000", "pgadmin:80"],
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,67 @@
|
|||
---
|
||||
target: portfolios home redesign mockup (calm)
|
||||
total_score: 27
|
||||
p0_count: 0
|
||||
p1_count: 3
|
||||
timestamp: 2026-07-07T13-05-05Z
|
||||
slug: portfolios-mock-html
|
||||
---
|
||||
# Critique: Portfolios home redesign mockup (Calm direction)
|
||||
|
||||
Method: dual-agent (A: design review · B: detector/mechanical evidence). Target: scratchpad/portfolios-mock.html (artifact 76ff144a). Browser visualization skipped: no browser automation in session.
|
||||
|
||||
## Design Health Score: 27/40 — Acceptable, near Good
|
||||
|
||||
| # | Heuristic | Score | Key Issue |
|
||||
|---|-----------|-------|-----------|
|
||||
| 1 | Visibility of System Status | 3 | Collapsed folders hide all state; a folded folder with 2 at-risk portfolios looks identical to a healthy one |
|
||||
| 2 | Match System / Real World | 3 | Mixed metaphor: star icon + "Pin" labels + "favourite" in notes — pick one word |
|
||||
| 3 | User Control and Freedom | 2 | No folder create/reorder/rename/delete anywhere; users can't control the page's primary organising structure |
|
||||
| 4 | Consistency and Standards | 3 | Card hover-lift implies whole-card clickability but only the name is a link; Pinned isn't collapsible while folders are |
|
||||
| 5 | Error Prevention | 3 | Low-stakes page; kebab actions undesigned so unassessable |
|
||||
| 6 | Recognition Rather Than Recall | 3 | Folders only discoverable via hidden kebab menu |
|
||||
| 7 | Flexibility and Efficiency | 2 | No "/" search shortcut, no bulk select/move, no collapse-all, no status sort |
|
||||
| 8 | Aesthetic and Minimalist Design | 3 | Pinned-card duplication; status pill outranks the name in reading order |
|
||||
| 9 | Error Recovery | 3 | No-results state names query + one-click clear (good); real page needs fetch-failure states |
|
||||
| 10 | Help and Documentation | 2 | One teaching empty state (pinning); nothing teaches folders |
|
||||
|
||||
## Anti-Patterns Verdict
|
||||
|
||||
Passes the product slop test (design review): no banned patterns, schema-honest fields, restrained navy palette, earned familiarity. Deterministic detector: exit 0, zero findings — but its clean bill covers only its own rule set; mechanical checks beyond it found the non-text contrast failures below.
|
||||
|
||||
## Priority Issues
|
||||
|
||||
- **[P1] Sectioned-folders IA collapses at ~15 folders × 60 portfolios.** All folders open by default, no rollup, no jump nav → endless undifferentiated scroll; collapsing destroys at-a-glance state. Fix: collapsed-by-default with persisted open state; folder-header rollups (count, Σ properties, worst-status chips like "2 at risk"); sticky folder index above ~6 folders; or move folders to a left filter rail entirely.
|
||||
- **[P1] Folder lifecycle undesigned.** No create, reorder (user's own question — order is hardcoded array), rename, delete. Fix: "New folder" affordance; folder-header kebab with Rename/Reorder/Remove; default alphabetical with per-user manual override (position column).
|
||||
- **[P1] Pin interaction breaks keyboard/SR users.** innerHTML re-render destroys the focused star (focus drops to body); no aria-live announcements for pin/search-count changes. Fix in real build: targeted DOM updates or focus restoration by data-id + polite live region.
|
||||
- **[P2] Non-text contrast failures (computed).** Idle star/kebab #9aa2b1 on white = 2.57:1; pinned gold star #f1bb06 on white = 1.77:1 (state nearly invisible to low-vision users); card border 1.24:1. Text pairs all pass 4.5:1 (lowest 5.59:1).
|
||||
- **[P2] Search is name-only, no keyboard path.** Doesn't match status/goal/folder; no "/" focus; header count stays global while filtering (should read "Showing X of Y").
|
||||
|
||||
## Persona Red Flags
|
||||
|
||||
**Alex (power user):** no keyboard route to search; only name text clickable despite whole-card hover-lift; organising 60 portfolios = 60 kebab round-trips (no bulk move); no collapse-all; no status sort; pinned duplication doubles scan work.
|
||||
|
||||
**Sam (accessibility):** focus wiped on pin toggle; pinned state fails 3:1 non-text contrast; no announcements for dynamic changes; h2-in-summary risks odd NVDA announcements. Keeping: native details/summary, focus ring token, aria-pressed, reduced-motion handling.
|
||||
|
||||
## Minor Observations
|
||||
|
||||
- Empty folder renders a blank dashed box (empty string default) — needs teaching copy.
|
||||
- Overspend (cost > budget) clamps the bar silently and stays blue — a red state would serve "trustworthy numbers".
|
||||
- Status pill above the name makes colour the first read; name should lead on a dispatch page.
|
||||
- Dead CSS (.updated-inline); list view <900px drops all data columns.
|
||||
- "Hit the star" too casual for institutional register; unify Pinned/Starred/Favourites naming.
|
||||
- Nothing signals folders are per-user, not shared with teammates.
|
||||
- Mock file is a fragment (no doctype/lang/viewport) — supplied by the Artifact wrapper at publish, but the real page needs them natively; summary contains flow content (non-conforming, works in practice).
|
||||
- Real page needs skeleton sections, not spinners.
|
||||
|
||||
## Strengths
|
||||
|
||||
- Schema-honest cards ("No budget set" shown, £-of-£ bar only when both fields exist) — Design Principle 1 executed.
|
||||
- Trustworthy-numbers craft: tabular-nums, consistent £M/£k, honest >100% percentages.
|
||||
- 10-value status enum compressed to 8 clean pills, text + colour, never colour alone.
|
||||
|
||||
## Questions to Consider
|
||||
|
||||
- What if folders were a left filter rail instead of page sections? Solves order, scale, and jump-nav in one move.
|
||||
- What is a collapsed folder for, if collapsing hides all status? The header rollup is the reconciliation, not a nice-to-have.
|
||||
- Is pin-as-duplicate right, or should pinning float items within their folder?
|
||||
41
PRODUCT.md
Normal file
41
PRODUCT.md
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
# Product
|
||||
|
||||
## Register
|
||||
|
||||
product
|
||||
|
||||
## Users
|
||||
|
||||
Three operator groups, all professionals in a task, none casual visitors:
|
||||
|
||||
- **Domna internal team** — analysts/consultants running assessments and modelling on behalf of landlords. Power users; live in the tool daily.
|
||||
- **Housing-association staff** — landlord-side asset and sustainability managers tracking their portfolios' retrofit progress. Domain-expert but not tool-expert; visit weekly.
|
||||
- **Contractors/approvers** — external parties with scoped capabilities on specific portfolios; arrive with a narrow job (approve, quote, deliver).
|
||||
|
||||
Shared context: desk work, large screens, often alongside spreadsheets and procurement documents. The home page's job is orientation and dispatch — find the right portfolio fast and understand its state at a glance.
|
||||
|
||||
## Product Purpose
|
||||
|
||||
Domna assesses UK housing portfolios for energy retrofit: ingesting property data (bulk uploads, postcode search), modelling retrofit interventions, and reporting outcomes (EPC uplift, CO2/energy savings, valuation impact) against budgets. Success looks like a landlord trusting Domna's numbers enough to commit retrofit budgets against them.
|
||||
|
||||
## Brand Personality
|
||||
|
||||
**Hypothesis (user undecided — validate against mockup variants):** calm, expert, institutional — quiet confidence appropriate to housing-sector procurement, with measured warmth from the brand tan/brown accents. Brand navy (`#14163d`) carries identity in small, deliberate doses; the surface stays neutral and legible. Not playful, not loud, never salesy inside the product.
|
||||
|
||||
## Anti-references
|
||||
|
||||
- **Generic SaaS admin templates** — Bootstrap/AdminLTE dashboards, hero-metric cards, widget walls.
|
||||
- **The current home page** — a bare centered grid of identical icon cards with no data, hierarchy, or organisation.
|
||||
- **Over-designed AI mockup output** — 2rem-rounded cards, giant soft shadows, decorative gradients, invented data the schema can't supply.
|
||||
|
||||
## Design Principles
|
||||
|
||||
1. **Show real state, not decoration.** Every element on a card earns its place by reflecting actual schema data (status, goal, properties, budget). No invented metrics.
|
||||
2. **Orientation before information.** The home page dispatches users to the right portfolio; scanability (favourites, folders, search, sort) beats per-card completeness.
|
||||
3. **Earned familiarity.** Standard affordances done precisely — the tool should disappear into the task for someone fluent in Linear/Stripe-class products.
|
||||
4. **Trustworthy numbers.** Figures are the product; typography and alignment treat numeric data with more care than any decorative element.
|
||||
5. **Consistency over surprise.** One component vocabulary across the app; delight lives in moments (empty states, transitions), not pages.
|
||||
|
||||
## Accessibility & Inclusion
|
||||
|
||||
WCAG 2.1 AA: ≥4.5:1 body-text contrast (≥3:1 large text), full keyboard operability, visible focus states, `prefers-reduced-motion` alternatives for all animation. B2B housing-sector procurement may require conformance evidence.
|
||||
792
docs/design/home-redesign/sample1.html
Normal file
792
docs/design/home-redesign/sample1.html
Normal file
|
|
@ -0,0 +1,792 @@
|
|||
<!doctype html>
|
||||
|
||||
<html class="light" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||
<title>Domna | Property Portfolios</title>
|
||||
<!-- Fonts -->
|
||||
<link href="https://fonts.googleapis.com" rel="preconnect" />
|
||||
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@700;800;900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<!-- Icons -->
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<!-- Tailwind -->
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"on-background": "#151d21",
|
||||
tertiary: "#000000",
|
||||
"surface-container-highest": "#dce3e9",
|
||||
"inverse-primary": "#c1c2f3",
|
||||
"error-container": "#ffdad6",
|
||||
primary: "#000000",
|
||||
"inverse-on-surface": "#ebf2f8",
|
||||
"inverse-surface": "#2a3136",
|
||||
"surface-container-low": "#edf4fa",
|
||||
"surface-dim": "#d4dbe1",
|
||||
"on-surface-variant": "#46464e",
|
||||
"tertiary-fixed": "#ffddb4",
|
||||
"secondary-fixed-dim": "#bec2ff",
|
||||
"outline-variant": "#c7c5cf",
|
||||
"on-secondary-container": "#29308b",
|
||||
"on-primary-fixed-variant": "#41436c",
|
||||
"primary-fixed": "#e1e0ff",
|
||||
"secondary-fixed": "#e0e0ff",
|
||||
"on-tertiary-container": "#9c7f5a",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-tint": "#595b85",
|
||||
"on-tertiary-fixed": "#291800",
|
||||
secondary: "#4e55b0",
|
||||
"on-secondary-fixed": "#00036b",
|
||||
"on-error": "#ffffff",
|
||||
"on-tertiary-fixed-variant": "#5a4222",
|
||||
"surface-variant": "#dce3e9",
|
||||
"on-tertiary": "#ffffff",
|
||||
"primary-container": "#15173e",
|
||||
"secondary-container": "#969efe",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary-container": "#7e80ad",
|
||||
surface: "#f5faff",
|
||||
"tertiary-container": "#291800",
|
||||
"primary-fixed-dim": "#c1c2f3",
|
||||
error: "#ba1a1a",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary-fixed-variant": "#353c97",
|
||||
outline: "#77767f",
|
||||
"surface-container": "#e8eff5",
|
||||
"surface-container-high": "#e2e9ef",
|
||||
"on-primary-fixed": "#15173e",
|
||||
"surface-bright": "#f5faff",
|
||||
"tertiary-fixed-dim": "#e3c197",
|
||||
"on-surface": "#151d21",
|
||||
background: "#f5faff",
|
||||
},
|
||||
borderRadius: {
|
||||
DEFAULT: "0.25rem",
|
||||
lg: "0.5rem",
|
||||
xl: "0.75rem",
|
||||
full: "9999px",
|
||||
},
|
||||
fontFamily: {
|
||||
headline: ["Manrope"],
|
||||
body: ["Inter"],
|
||||
label: ["Inter"],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
.font-headline {
|
||||
font-family: "Manrope", sans-serif;
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings:
|
||||
"FILL" 0,
|
||||
"wght" 400,
|
||||
"GRAD" 0,
|
||||
"opsz" 24;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface min-h-screen">
|
||||
<!-- TopNavBar -->
|
||||
<header
|
||||
class="bg-[#f5faff]/80 dark:bg-[#14163d]/80 backdrop-blur-3xl shadow-[0_40px_60px_rgba(21,29,33,0.04)] docked full-width top-0 sticky z-50"
|
||||
>
|
||||
<div
|
||||
class="flex justify-between items-center w-full px-8 py-4 max-w-[1440px] mx-auto"
|
||||
>
|
||||
<div class="flex items-center gap-8">
|
||||
<span
|
||||
class="text-2xl font-black text-[#14163d] dark:text-white tracking-tighter font-headline"
|
||||
>Domna</span
|
||||
>
|
||||
<nav class="hidden md:flex items-center gap-6">
|
||||
<a
|
||||
class="text-[#14163d] dark:text-white border-b-2 border-[#14163d] dark:border-white pb-1 font-headline font-bold tracking-tight"
|
||||
href="#"
|
||||
>Portfolio</a
|
||||
>
|
||||
<a
|
||||
class="text-[#14163d]/60 dark:text-[#f5faff]/60 hover:text-[#14163d] dark:hover:text-white transition-colors font-headline font-bold tracking-tight"
|
||||
href="#"
|
||||
>Reporting</a
|
||||
>
|
||||
<a
|
||||
class="text-[#14163d]/60 dark:text-[#f5faff]/60 hover:text-[#14163d] dark:hover:text-white transition-colors font-headline font-bold tracking-tight"
|
||||
href="#"
|
||||
>Decent Homes</a
|
||||
>
|
||||
<a
|
||||
class="text-[#14163d]/60 dark:text-[#f5faff]/60 hover:text-[#14163d] dark:hover:text-white transition-colors font-headline font-bold tracking-tight"
|
||||
href="#"
|
||||
>Projects</a
|
||||
>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative group">
|
||||
<span
|
||||
class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant"
|
||||
>search</span
|
||||
>
|
||||
<input
|
||||
class="pl-10 pr-4 py-2 bg-surface-container-highest rounded-lg border-none focus:ring-2 focus:ring-secondary/40 text-sm w-64 transition-all"
|
||||
placeholder="Search portfolios..."
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
class="p-2 hover:bg-[#edf4fa] dark:hover:bg-[#1c1f4a] rounded-lg transition-all scale-95 active:opacity-80"
|
||||
>
|
||||
<span
|
||||
class="material-symbols-outlined text-[#14163d] dark:text-[#f5faff]"
|
||||
>notifications</span
|
||||
>
|
||||
</button>
|
||||
<button
|
||||
class="p-2 hover:bg-[#edf4fa] dark:hover:bg-[#1c1f4a] rounded-lg transition-all scale-95 active:opacity-80"
|
||||
>
|
||||
<span
|
||||
class="material-symbols-outlined text-[#14163d] dark:text-[#f5faff]"
|
||||
>settings</span
|
||||
>
|
||||
</button>
|
||||
<div
|
||||
class="w-10 h-10 rounded-full overflow-hidden bg-surface-container-high ml-2 border-2 border-surface-container-highest"
|
||||
>
|
||||
<img
|
||||
alt="User profile"
|
||||
class="w-full h-full object-cover"
|
||||
data-alt="professional headshot of a mature architect with a thoughtful expression in a bright modern studio setting"
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuAhDifmEzkeiUoz7-qk7MgfZWfDcrj2ZQ0YFyM_QySQW7V5p7txGp2Npp2udFSI4WGqDaDlfUTq15TP_ZSM7NpHCbeLgX_GBtuEfpFUEJt-pjry3M3WB9ldA3UH2zZuZyqvEKFESQ75eT9dHUOJBMrTa_aZXEmsyuEkGIHPY9-T0VHC5t_FgM10CZ0rWy84ATDoIJFnZDA3OblJtPVNuEeWOrJJj7PbJq5Om624QV6-49DGfnFy05CrPZm-HgqXlJ5Ah9XhHPCAQqH_"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="max-w-[1440px] mx-auto px-8 py-12">
|
||||
<!-- Page Header -->
|
||||
<div
|
||||
class="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-12"
|
||||
>
|
||||
<div>
|
||||
<h1
|
||||
class="text-5xl font-black text-[#14163d] tracking-tighter font-headline mb-4"
|
||||
>
|
||||
Property Portfolios
|
||||
</h1>
|
||||
<p
|
||||
class="text-on-surface-variant max-w-xl font-medium leading-relaxed"
|
||||
>
|
||||
Strategic oversight of energy retrofit assets. Curate, monitor, and
|
||||
scale sustainability across your entire estate architecture.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex bg-surface-container-low p-1 rounded-xl">
|
||||
<button
|
||||
class="p-2 bg-white shadow-sm rounded-lg text-primary transition-all"
|
||||
>
|
||||
<span class="material-symbols-outlined">grid_view</span>
|
||||
</button>
|
||||
<button
|
||||
class="p-2 text-on-surface-variant hover:text-primary transition-all"
|
||||
>
|
||||
<span class="material-symbols-outlined">list</span>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="flex items-center gap-2 px-6 py-3 bg-gradient-to-br from-primary-container to-[#1c1f4a] text-white rounded-xl font-bold tracking-tight hover:shadow-lg hover:shadow-primary/10 transition-all active:scale-[0.98]"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[20px]">add</span>
|
||||
<span>Add New Portfolio</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Filter Bar -->
|
||||
<div
|
||||
class="flex flex-wrap items-center gap-4 mb-10 pb-6 border-b border-outline-variant/10"
|
||||
>
|
||||
<div
|
||||
class="flex items-center gap-2 px-4 py-2 bg-surface-container-low rounded-full text-sm font-semibold text-on-surface-variant cursor-pointer hover:bg-surface-container-high transition-all"
|
||||
>
|
||||
<span>Status:</span>
|
||||
<span class="text-primary">All Active</span>
|
||||
<span class="material-symbols-outlined text-[18px]">expand_more</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 px-4 py-2 bg-surface-container-low rounded-full text-sm font-semibold text-on-surface-variant cursor-pointer hover:bg-surface-container-high transition-all"
|
||||
>
|
||||
<span>Tag:</span>
|
||||
<span class="text-primary">Residential</span>
|
||||
<span class="material-symbols-outlined text-[18px]">expand_more</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 px-4 py-2 bg-surface-container-low rounded-full text-sm font-semibold text-on-surface-variant cursor-pointer hover:bg-surface-container-high transition-all"
|
||||
>
|
||||
<span>Sort by:</span>
|
||||
<span class="text-primary">Budget (High)</span>
|
||||
<span class="material-symbols-outlined text-[18px]">expand_more</span>
|
||||
</div>
|
||||
<div class="h-6 w-[1px] bg-outline-variant/30 mx-2"></div>
|
||||
<button
|
||||
class="text-sm font-bold text-secondary hover:underline underline-offset-4"
|
||||
>
|
||||
Reset Filters
|
||||
</button>
|
||||
</div>
|
||||
<!-- Portfolio Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<!-- Card 1 -->
|
||||
<div
|
||||
class="group bg-surface-container-lowest p-6 rounded-[2rem] shadow-[0_40px_60px_rgba(21,29,33,0.04)] hover:translate-y-[-4px] transition-all duration-300 relative overflow-hidden"
|
||||
>
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div
|
||||
class="bg-tertiary-fixed px-3 py-1 rounded-full flex items-center gap-1.5"
|
||||
>
|
||||
<span
|
||||
class="w-1.5 h-1.5 rounded-full bg-on-tertiary-fixed"
|
||||
></span>
|
||||
<span
|
||||
class="text-[10px] font-bold uppercase tracking-widest text-on-tertiary-fixed"
|
||||
>In Progress</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<button
|
||||
class="p-2 hover:bg-surface-container-low rounded-full transition-all text-on-surface-variant"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[20px]">star</span>
|
||||
</button>
|
||||
<button
|
||||
class="p-2 hover:bg-surface-container-low rounded-full transition-all text-on-surface-variant"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[20px]"
|
||||
>more_vert</span
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<h3
|
||||
class="text-2xl font-black text-[#14163d] font-headline mb-2 leading-tight"
|
||||
>
|
||||
London Social Housing
|
||||
</h3>
|
||||
<p
|
||||
class="text-sm text-on-surface-variant mb-6 flex items-center gap-1"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[14px]"
|
||||
>location_on</span
|
||||
>
|
||||
Greater London Authority
|
||||
</p>
|
||||
<div class="space-y-4 mb-8">
|
||||
<div class="flex justify-between items-end">
|
||||
<span
|
||||
class="text-xs font-bold text-on-surface-variant uppercase tracking-wider"
|
||||
>Budget Utilization</span
|
||||
>
|
||||
<span class="text-sm font-black text-primary">£4.2M / £6.5M</span>
|
||||
</div>
|
||||
<div
|
||||
class="h-2 w-full bg-surface-container-high rounded-full overflow-hidden"
|
||||
>
|
||||
<div
|
||||
class="h-full bg-primary-container rounded-full"
|
||||
style="width: 64%"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-2 gap-4 pt-6 border-t border-outline-variant/10"
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
class="block text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-1"
|
||||
>Target EPC</span
|
||||
>
|
||||
<span class="text-lg font-black text-[#14163d]">Rating A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
class="block text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-1"
|
||||
>Properties</span
|
||||
>
|
||||
<span class="text-lg font-black text-[#14163d]">142 Units</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 flex flex-wrap gap-2">
|
||||
<span
|
||||
class="px-3 py-1 bg-surface-container-low rounded-lg text-[11px] font-bold text-on-secondary-container"
|
||||
>High Priority</span
|
||||
>
|
||||
<span
|
||||
class="px-3 py-1 bg-surface-container-low rounded-lg text-[11px] font-bold text-on-secondary-container"
|
||||
>Residential</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 2 -->
|
||||
<div
|
||||
class="group bg-surface-container-lowest p-6 rounded-[2rem] shadow-[0_40px_60px_rgba(21,29,33,0.04)] hover:translate-y-[-4px] transition-all duration-300 relative overflow-hidden"
|
||||
>
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div
|
||||
class="bg-surface-container-highest px-3 py-1 rounded-full flex items-center gap-1.5"
|
||||
>
|
||||
<span
|
||||
class="w-1.5 h-1.5 rounded-full bg-on-surface-variant"
|
||||
></span>
|
||||
<span
|
||||
class="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant"
|
||||
>Planning</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<button
|
||||
class="p-2 hover:bg-surface-container-low rounded-full transition-all text-on-surface-variant"
|
||||
>
|
||||
<span
|
||||
class="material-symbols-outlined text-[20px]"
|
||||
style="font-variation-settings: "FILL" 1"
|
||||
>star</span
|
||||
>
|
||||
</button>
|
||||
<button
|
||||
class="p-2 hover:bg-surface-container-low rounded-full transition-all text-on-surface-variant"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[20px]"
|
||||
>more_vert</span
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<h3
|
||||
class="text-2xl font-black text-[#14163d] font-headline mb-2 leading-tight"
|
||||
>
|
||||
Commercial Retrofit 2026
|
||||
</h3>
|
||||
<p
|
||||
class="text-sm text-on-surface-variant mb-6 flex items-center gap-1"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[14px]"
|
||||
>location_on</span
|
||||
>
|
||||
Manchester City Council
|
||||
</p>
|
||||
<div class="space-y-4 mb-8">
|
||||
<div class="flex justify-between items-end">
|
||||
<span
|
||||
class="text-xs font-bold text-on-surface-variant uppercase tracking-wider"
|
||||
>Budget Utilization</span
|
||||
>
|
||||
<span class="text-sm font-black text-primary"
|
||||
>£0.8M / £12.0M</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="h-2 w-full bg-surface-container-high rounded-full overflow-hidden"
|
||||
>
|
||||
<div
|
||||
class="h-full bg-primary-container rounded-full"
|
||||
style="width: 7%"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-2 gap-4 pt-6 border-t border-outline-variant/10"
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
class="block text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-1"
|
||||
>Target EPC</span
|
||||
>
|
||||
<span class="text-lg font-black text-[#14163d]">Rating B+</span>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
class="block text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-1"
|
||||
>Properties</span
|
||||
>
|
||||
<span class="text-lg font-black text-[#14163d]">28 Assets</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 flex flex-wrap gap-2">
|
||||
<span
|
||||
class="px-3 py-1 bg-surface-container-low rounded-lg text-[11px] font-bold text-on-secondary-container"
|
||||
>Commercial</span
|
||||
>
|
||||
<span
|
||||
class="px-3 py-1 bg-surface-container-low rounded-lg text-[11px] font-bold text-on-secondary-container"
|
||||
>Carbon Neutral</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 3 -->
|
||||
<div
|
||||
class="group bg-surface-container-lowest p-6 rounded-[2rem] shadow-[0_40px_60px_rgba(21,29,33,0.04)] hover:translate-y-[-4px] transition-all duration-300 relative overflow-hidden"
|
||||
>
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div
|
||||
class="bg-tertiary-fixed px-3 py-1 rounded-full flex items-center gap-1.5"
|
||||
>
|
||||
<span
|
||||
class="w-1.5 h-1.5 rounded-full bg-on-tertiary-fixed"
|
||||
></span>
|
||||
<span
|
||||
class="text-[10px] font-bold uppercase tracking-widest text-on-tertiary-fixed"
|
||||
>In Progress</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<button
|
||||
class="p-2 hover:bg-surface-container-low rounded-full transition-all text-on-surface-variant"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[20px]">star</span>
|
||||
</button>
|
||||
<button
|
||||
class="p-2 hover:bg-surface-container-low rounded-full transition-all text-on-surface-variant"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[20px]"
|
||||
>more_vert</span
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<h3
|
||||
class="text-2xl font-black text-[#14163d] font-headline mb-2 leading-tight"
|
||||
>
|
||||
Oxfordshire Eco Village
|
||||
</h3>
|
||||
<p
|
||||
class="text-sm text-on-surface-variant mb-6 flex items-center gap-1"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[14px]"
|
||||
>location_on</span
|
||||
>
|
||||
Regional Development
|
||||
</p>
|
||||
<div class="space-y-4 mb-8">
|
||||
<div class="flex justify-between items-end">
|
||||
<span
|
||||
class="text-xs font-bold text-on-surface-variant uppercase tracking-wider"
|
||||
>Budget Utilization</span
|
||||
>
|
||||
<span class="text-sm font-black text-primary">£2.9M / £3.1M</span>
|
||||
</div>
|
||||
<div
|
||||
class="h-2 w-full bg-surface-container-high rounded-full overflow-hidden"
|
||||
>
|
||||
<div
|
||||
class="h-full bg-primary-container rounded-full"
|
||||
style="width: 93%"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-2 gap-4 pt-6 border-t border-outline-variant/10"
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
class="block text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-1"
|
||||
>Target EPC</span
|
||||
>
|
||||
<span class="text-lg font-black text-[#14163d]">Net Zero</span>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
class="block text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-1"
|
||||
>Properties</span
|
||||
>
|
||||
<span class="text-lg font-black text-[#14163d]">18 Units</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 flex flex-wrap gap-2">
|
||||
<span
|
||||
class="px-3 py-1 bg-surface-container-low rounded-lg text-[11px] font-bold text-on-secondary-container"
|
||||
>Sustainability</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 4 -->
|
||||
<div
|
||||
class="group bg-surface-container-lowest p-6 rounded-[2rem] shadow-[0_40px_60px_rgba(21,29,33,0.04)] hover:translate-y-[-4px] transition-all duration-300 relative overflow-hidden"
|
||||
>
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div
|
||||
class="bg-tertiary-fixed px-3 py-1 rounded-full flex items-center gap-1.5"
|
||||
>
|
||||
<span
|
||||
class="w-1.5 h-1.5 rounded-full bg-on-tertiary-fixed"
|
||||
></span>
|
||||
<span
|
||||
class="text-[10px] font-bold uppercase tracking-widest text-on-tertiary-fixed"
|
||||
>In Progress</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<button
|
||||
class="p-2 hover:bg-surface-container-low rounded-full transition-all text-on-surface-variant"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[20px]">star</span>
|
||||
</button>
|
||||
<button
|
||||
class="p-2 hover:bg-surface-container-low rounded-full transition-all text-on-surface-variant"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[20px]"
|
||||
>more_vert</span
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<h3
|
||||
class="text-2xl font-black text-[#14163d] font-headline mb-2 leading-tight"
|
||||
>
|
||||
Northern Estate Phase II
|
||||
</h3>
|
||||
<p
|
||||
class="text-sm text-on-surface-variant mb-6 flex items-center gap-1"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[14px]"
|
||||
>location_on</span
|
||||
>
|
||||
Leeds District
|
||||
</p>
|
||||
<div class="space-y-4 mb-8">
|
||||
<div class="flex justify-between items-end">
|
||||
<span
|
||||
class="text-xs font-bold text-on-surface-variant uppercase tracking-wider"
|
||||
>Budget Utilization</span
|
||||
>
|
||||
<span class="text-sm font-black text-primary"
|
||||
>£5.1M / £15.0M</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="h-2 w-full bg-surface-container-high rounded-full overflow-hidden"
|
||||
>
|
||||
<div
|
||||
class="h-full bg-primary-container rounded-full"
|
||||
style="width: 34%"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-2 gap-4 pt-6 border-t border-outline-variant/10"
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
class="block text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-1"
|
||||
>Target EPC</span
|
||||
>
|
||||
<span class="text-lg font-black text-[#14163d]">Rating B</span>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
class="block text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-1"
|
||||
>Properties</span
|
||||
>
|
||||
<span class="text-lg font-black text-[#14163d]">310 Units</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 flex flex-wrap gap-2">
|
||||
<span
|
||||
class="px-3 py-1 bg-surface-container-low rounded-lg text-[11px] font-bold text-on-secondary-container"
|
||||
>Residential</span
|
||||
>
|
||||
<span
|
||||
class="px-3 py-1 bg-surface-container-low rounded-lg text-[11px] font-bold text-on-secondary-container"
|
||||
>Scale</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 5 -->
|
||||
<div
|
||||
class="group bg-surface-container-lowest p-6 rounded-[2rem] shadow-[0_40px_60px_rgba(21,29,33,0.04)] hover:translate-y-[-4px] transition-all duration-300 relative overflow-hidden"
|
||||
>
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div
|
||||
class="bg-surface-container-highest px-3 py-1 rounded-full flex items-center gap-1.5"
|
||||
>
|
||||
<span
|
||||
class="w-1.5 h-1.5 rounded-full bg-on-surface-variant"
|
||||
></span>
|
||||
<span
|
||||
class="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant"
|
||||
>Planning</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<button
|
||||
class="p-2 hover:bg-surface-container-low rounded-full transition-all text-on-surface-variant"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[20px]">star</span>
|
||||
</button>
|
||||
<button
|
||||
class="p-2 hover:bg-surface-container-low rounded-full transition-all text-on-surface-variant"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[20px]"
|
||||
>more_vert</span
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<h3
|
||||
class="text-2xl font-black text-[#14163d] font-headline mb-2 leading-tight"
|
||||
>
|
||||
Birmingham Tech Hub
|
||||
</h3>
|
||||
<p
|
||||
class="text-sm text-on-surface-variant mb-6 flex items-center gap-1"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[14px]"
|
||||
>location_on</span
|
||||
>
|
||||
Innovation District
|
||||
</p>
|
||||
<div class="space-y-4 mb-8">
|
||||
<div class="flex justify-between items-end">
|
||||
<span
|
||||
class="text-xs font-bold text-on-surface-variant uppercase tracking-wider"
|
||||
>Budget Utilization</span
|
||||
>
|
||||
<span class="text-sm font-black text-primary">£0.1M / £4.5M</span>
|
||||
</div>
|
||||
<div
|
||||
class="h-2 w-full bg-surface-container-high rounded-full overflow-hidden"
|
||||
>
|
||||
<div
|
||||
class="h-full bg-primary-container rounded-full"
|
||||
style="width: 2%"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-2 gap-4 pt-6 border-t border-outline-variant/10"
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
class="block text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-1"
|
||||
>Target EPC</span
|
||||
>
|
||||
<span class="text-lg font-black text-[#14163d]">Rating A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
class="block text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-1"
|
||||
>Properties</span
|
||||
>
|
||||
<span class="text-lg font-black text-[#14163d]">4 Assets</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 flex flex-wrap gap-2">
|
||||
<span
|
||||
class="px-3 py-1 bg-surface-container-low rounded-lg text-[11px] font-bold text-on-secondary-container"
|
||||
>Commercial</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 6 (Empty/CTA state) -->
|
||||
<button
|
||||
class="group border-2 border-dashed border-outline-variant/40 hover:border-secondary/40 rounded-[2rem] flex flex-col items-center justify-center p-12 transition-all duration-300"
|
||||
>
|
||||
<div
|
||||
class="w-16 h-16 bg-surface-container-low rounded-full flex items-center justify-center mb-4 group-hover:scale-110 transition-transform"
|
||||
>
|
||||
<span class="material-symbols-outlined text-secondary text-3xl"
|
||||
>add_circle</span
|
||||
>
|
||||
</div>
|
||||
<span class="text-lg font-black text-[#14163d] font-headline"
|
||||
>Create Portfolio</span
|
||||
>
|
||||
<span class="text-sm text-on-surface-variant mt-2 text-center"
|
||||
>Start a new sustainability journey for your assets.</span
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Pagination / Scalability Footer -->
|
||||
<div class="mt-20 flex flex-col items-center gap-6">
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-surface-container-low text-on-surface-variant"
|
||||
>
|
||||
<span class="material-symbols-outlined">chevron_left</span>
|
||||
</button>
|
||||
<button
|
||||
class="w-10 h-10 flex items-center justify-center rounded-lg bg-primary-container text-white font-bold"
|
||||
>
|
||||
1
|
||||
</button>
|
||||
<button
|
||||
class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-surface-container-low text-on-surface-variant font-bold"
|
||||
>
|
||||
2
|
||||
</button>
|
||||
<button
|
||||
class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-surface-container-low text-on-surface-variant font-bold"
|
||||
>
|
||||
3
|
||||
</button>
|
||||
<span class="px-2 text-on-surface-variant">...</span>
|
||||
<button
|
||||
class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-surface-container-low text-on-surface-variant font-bold"
|
||||
>
|
||||
24
|
||||
</button>
|
||||
<button
|
||||
class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-surface-container-low text-on-surface-variant"
|
||||
>
|
||||
<span class="material-symbols-outlined">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-sm font-medium text-on-surface-variant">
|
||||
Showing 6 of 142 portfolios
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Side Navigation Placeholder (Contextual Filter) - Hidden for this view as per prompt, but showing TopNavBar structure -->
|
||||
<footer class="mt-24 border-t border-outline-variant/10 py-12 px-8">
|
||||
<div
|
||||
class="max-w-[1440px] mx-auto flex justify-between items-center text-sm font-medium text-on-surface-variant"
|
||||
>
|
||||
<p>© 2024 Domna Estate Management. All rights reserved.</p>
|
||||
<div class="flex gap-8">
|
||||
<a class="hover:text-primary transition-colors" href="#"
|
||||
>Documentation</a
|
||||
>
|
||||
<a class="hover:text-primary transition-colors" href="#"
|
||||
>Privacy Policy</a
|
||||
>
|
||||
<a class="hover:text-primary transition-colors" href="#"
|
||||
>Terms of Service</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
972
docs/design/home-redesign/sample2.html
Normal file
972
docs/design/home-redesign/sample2.html
Normal file
|
|
@ -0,0 +1,972 @@
|
|||
<html class="light" lang="en">
|
||||
<head></head>
|
||||
<body class="bg-surface text-on-surface min-h-screen">
|
||||
```html
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||
<title>Domna | Property Portfolios</title>
|
||||
<link href="https://fonts.googleapis.com" rel="preconnect" />
|
||||
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@700;800;900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"on-background": "#151d21",
|
||||
tertiary: "#000000",
|
||||
"surface-container-highest": "#dce3e9",
|
||||
"inverse-primary": "#c1c2f3",
|
||||
"error-container": "#ffdad6",
|
||||
primary: "#000000",
|
||||
"inverse-on-surface": "#ebf2f8",
|
||||
"inverse-surface": "#2a3136",
|
||||
"surface-container-low": "#edf4fa",
|
||||
"surface-dim": "#d4dbe1",
|
||||
"on-surface-variant": "#46464e",
|
||||
"tertiary-fixed": "#ffddb4",
|
||||
"secondary-fixed-dim": "#bec2ff",
|
||||
"outline-variant": "#c7c5cf",
|
||||
"on-secondary-container": "#29308b",
|
||||
"on-primary-fixed-variant": "#41436c",
|
||||
"primary-fixed": "#e1e0ff",
|
||||
"secondary-fixed": "#e0e0ff",
|
||||
"on-tertiary-container": "#9c7f5a",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-tint": "#595b85",
|
||||
"on-tertiary-fixed": "#291800",
|
||||
secondary: "#4e55b0",
|
||||
"on-secondary-fixed": "#00036b",
|
||||
"on-error": "#ffffff",
|
||||
"on-tertiary-fixed-variant": "#5a4222",
|
||||
"surface-variant": "#dce3e9",
|
||||
"on-tertiary": "#ffffff",
|
||||
"primary-container": "#14163d",
|
||||
"secondary-container": "#969efe",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary-container": "#7e80ad",
|
||||
surface: "#f5faff",
|
||||
"tertiary-container": "#291800",
|
||||
"primary-fixed-dim": "#c1c2f3",
|
||||
error: "#ba1a1a",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary-fixed-variant": "#353c97",
|
||||
outline: "#77767f",
|
||||
"surface-container": "#e8eff5",
|
||||
"surface-container-high": "#e2e9ef",
|
||||
"on-primary-fixed": "#15173e",
|
||||
"surface-bright": "#f5faff",
|
||||
"tertiary-fixed-dim": "#e3c197",
|
||||
"on-surface": "#151d21",
|
||||
background: "#f5faff",
|
||||
},
|
||||
borderRadius: {
|
||||
DEFAULT: "0.25rem",
|
||||
lg: "0.5rem",
|
||||
xl: "0.75rem",
|
||||
full: "9999px",
|
||||
},
|
||||
fontFamily: {
|
||||
headline: ["Manrope"],
|
||||
body: ["Inter"],
|
||||
label: ["Inter"],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style type="text/tailwindcss">
|
||||
body {
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
.font-headline {
|
||||
font-family: "Manrope", sans-serif;
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings:
|
||||
"FILL" 0,
|
||||
"wght" 400,
|
||||
"GRAD" 0,
|
||||
"opsz" 24;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#view-grid:checked ~ #grid-container {
|
||||
display: grid;
|
||||
}
|
||||
#view-grid:checked ~ #table-container {
|
||||
display: none;
|
||||
}
|
||||
#view-table:checked ~ #grid-container {
|
||||
display: none;
|
||||
}
|
||||
#view-table:checked ~ #table-container {
|
||||
display: block;
|
||||
}
|
||||
#view-grid:checked ~ div div label[for="view-grid"] {
|
||||
@apply bg-white shadow-sm text-primary;
|
||||
}
|
||||
#view-table:checked ~ div div label[for="view-table"] {
|
||||
@apply bg-white shadow-sm text-primary;
|
||||
}
|
||||
</style>
|
||||
|
||||
<input
|
||||
checked=""
|
||||
class="hidden"
|
||||
id="view-grid"
|
||||
name="view-mode"
|
||||
type="radio"
|
||||
/>
|
||||
<input class="hidden" id="view-table" name="view-mode" type="radio" />
|
||||
<header
|
||||
class="bg-[#f5faff]/80 backdrop-blur-3xl shadow-[0_40px_60px_rgba(21,29,33,0.04)] top-0 sticky z-50"
|
||||
>
|
||||
<div
|
||||
class="flex justify-between items-center w-full px-8 py-4 max-w-[1440px] mx-auto"
|
||||
>
|
||||
<div class="flex items-center gap-8">
|
||||
<span
|
||||
class="text-2xl font-black text-[#14163d] tracking-tighter font-headline"
|
||||
>Domna</span
|
||||
>
|
||||
<nav class="hidden md:flex items-center gap-6">
|
||||
<a
|
||||
class="text-[#14163d] border-b-2 border-[#14163d] pb-1 font-headline font-bold tracking-tight"
|
||||
href="#"
|
||||
>Portfolio</a
|
||||
>
|
||||
<a
|
||||
class="text-[#14163d]/60 hover:text-[#14163d] transition-colors font-headline font-bold tracking-tight"
|
||||
href="#"
|
||||
>Reporting</a
|
||||
>
|
||||
<a
|
||||
class="text-[#14163d]/60 hover:text-[#14163d] transition-colors font-headline font-bold tracking-tight"
|
||||
href="#"
|
||||
>Decent Homes</a
|
||||
>
|
||||
<a
|
||||
class="text-[#14163d]/60 hover:text-[#14163d] transition-colors font-headline font-bold tracking-tight"
|
||||
href="#"
|
||||
>Projects</a
|
||||
>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative group">
|
||||
<span
|
||||
class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant"
|
||||
>search</span
|
||||
>
|
||||
<input
|
||||
class="pl-10 pr-4 py-2 bg-surface-container-highest rounded-lg border-none focus:ring-2 focus:ring-secondary/40 text-sm w-64 transition-all"
|
||||
placeholder="Search portfolios..."
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
class="p-2 hover:bg-[#edf4fa] rounded-lg transition-all scale-95 active:opacity-80"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[#14163d]"
|
||||
>notifications</span
|
||||
>
|
||||
</button>
|
||||
<button
|
||||
class="p-2 hover:bg-[#edf4fa] rounded-lg transition-all scale-95 active:opacity-80"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[#14163d]"
|
||||
>settings</span
|
||||
>
|
||||
</button>
|
||||
<div
|
||||
class="w-10 h-10 rounded-full overflow-hidden bg-surface-container-high ml-2 border-2 border-surface-container-highest"
|
||||
>
|
||||
<img
|
||||
alt="User profile"
|
||||
class="w-full h-full object-cover"
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuAhDifmEzkeiUoz7-qk7MgfZWfDcrj2ZQ0YFyM_QySQW7V5p7txGp2Npp2udFSI4WGqDaDlfUTq15TP_ZSM7NpHCbeLgX_GBtuEfpFUEJt-pjry3M3WB9ldA3UH2zZuZyqvEKFESQ75eT9dHUOJBMrTa_aZXEmsyuEkGIHPY9-T0VHC5t_FgM10CZ0rWy84ATDoIJFnZDA3OblJtPVNuEeWOrJJj7PbJq5Om624QV6-49DGfnFy05CrPZm-HgqXlJ5Ah9XhHPCAQqH_"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="max-w-[1440px] mx-auto px-8 py-12">
|
||||
<div class="mb-12">
|
||||
<button
|
||||
class="flex items-center gap-2 px-5 py-2.5 bg-[#14163d] text-white rounded-xl font-bold tracking-tight hover:shadow-lg hover:shadow-primary/10 transition-all active:scale-[0.98] mb-6"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[20px]">add</span>
|
||||
<span>Add New Portfolio</span>
|
||||
</button>
|
||||
<div
|
||||
class="flex flex-col md:flex-row md:items-end justify-between gap-8"
|
||||
>
|
||||
<div>
|
||||
<h1
|
||||
class="text-5xl font-black text-[#14163d] tracking-tighter font-headline mb-4"
|
||||
>
|
||||
Property Portfolios
|
||||
</h1>
|
||||
<p
|
||||
class="text-on-surface-variant max-w-xl font-medium leading-relaxed"
|
||||
>
|
||||
Strategic oversight of energy retrofit assets. Curate, monitor,
|
||||
and scale sustainability across your entire estate architecture.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div
|
||||
class="flex items-center gap-2 px-3 py-1.5 bg-surface-container-low rounded-xl border border-outline-variant/30"
|
||||
>
|
||||
<span
|
||||
class="text-xs font-bold text-on-surface-variant uppercase tracking-wider pl-1"
|
||||
>Show</span
|
||||
>
|
||||
<select
|
||||
class="bg-transparent border-none text-sm font-bold text-[#14163d] focus:ring-0 p-1 cursor-pointer"
|
||||
>
|
||||
<option value="12">12</option>
|
||||
<option selected="" value="24">24</option>
|
||||
<option value="48">48</option>
|
||||
<option value="96">96</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex bg-surface-container-low p-1 rounded-xl">
|
||||
<label
|
||||
class="p-2 cursor-pointer rounded-lg text-on-surface-variant transition-all flex items-center justify-center"
|
||||
for="view-grid"
|
||||
>
|
||||
<span class="material-symbols-outlined">grid_view</span>
|
||||
</label>
|
||||
<label
|
||||
class="p-2 cursor-pointer rounded-lg text-on-surface-variant transition-all flex items-center justify-center"
|
||||
for="view-table"
|
||||
>
|
||||
<span class="material-symbols-outlined">list</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-wrap items-center gap-4 mb-10 pb-6 border-b border-outline-variant/10"
|
||||
>
|
||||
<div
|
||||
class="flex items-center gap-2 px-4 py-2 bg-surface-container-low rounded-full text-sm font-semibold text-on-surface-variant cursor-pointer hover:bg-surface-container-high transition-all"
|
||||
>
|
||||
<span>Status:</span>
|
||||
<span class="text-primary font-bold">All Active</span>
|
||||
<span class="material-symbols-outlined text-[18px]">expand_more</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 px-4 py-2 bg-surface-container-low rounded-full text-sm font-semibold text-on-surface-variant cursor-pointer hover:bg-surface-container-high transition-all"
|
||||
>
|
||||
<span>Tag:</span>
|
||||
<span class="text-primary font-bold">Residential</span>
|
||||
<span class="material-symbols-outlined text-[18px]">expand_more</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 px-4 py-2 bg-surface-container-low rounded-full text-sm font-semibold text-on-surface-variant cursor-pointer hover:bg-surface-container-high transition-all"
|
||||
>
|
||||
<span>Sort by:</span>
|
||||
<span class="text-primary font-bold">Budget (High)</span>
|
||||
<span class="material-symbols-outlined text-[18px]">expand_more</span>
|
||||
</div>
|
||||
<div class="h-6 w-[1px] bg-outline-variant/30 mx-2"></div>
|
||||
<button
|
||||
class="text-sm font-bold text-secondary hover:underline underline-offset-4"
|
||||
>
|
||||
Reset Filters
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
|
||||
id="grid-container"
|
||||
>
|
||||
<div
|
||||
class="group bg-surface-container-lowest p-6 rounded-[2rem] shadow-[0_40px_60px_rgba(21,29,33,0.04)] hover:translate-y-[-4px] transition-all duration-300 relative overflow-hidden"
|
||||
>
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div
|
||||
class="bg-tertiary-fixed px-3 py-1 rounded-full flex items-center gap-1.5"
|
||||
>
|
||||
<span
|
||||
class="w-1.5 h-1.5 rounded-full bg-on-tertiary-fixed"
|
||||
></span>
|
||||
<span
|
||||
class="text-[10px] font-bold uppercase tracking-widest text-on-tertiary-fixed"
|
||||
>In Progress</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<button
|
||||
class="p-2 hover:bg-surface-container-low rounded-full transition-all text-on-surface-variant"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[20px]">star</span>
|
||||
</button>
|
||||
<button
|
||||
class="p-2 hover:bg-surface-container-low rounded-full transition-all text-on-surface-variant"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[20px]"
|
||||
>more_vert</span
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<h3
|
||||
class="text-2xl font-black text-[#14163d] font-headline mb-2 leading-tight"
|
||||
>
|
||||
London Social Housing
|
||||
</h3>
|
||||
<p
|
||||
class="text-sm text-on-surface-variant mb-6 flex items-center gap-1"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[14px]"
|
||||
>location_on</span
|
||||
>
|
||||
Greater London Authority
|
||||
</p>
|
||||
<div class="space-y-4 mb-8">
|
||||
<div class="flex justify-between items-end">
|
||||
<span
|
||||
class="text-xs font-bold text-on-surface-variant uppercase tracking-wider"
|
||||
>Budget Utilization</span
|
||||
>
|
||||
<span class="text-sm font-black text-primary">£4.2M / £6.5M</span>
|
||||
</div>
|
||||
<div
|
||||
class="h-2 w-full bg-surface-container-high rounded-full overflow-hidden"
|
||||
>
|
||||
<div
|
||||
class="h-full bg-primary-container rounded-full"
|
||||
style="width: 64%"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-2 gap-4 pt-6 border-t border-outline-variant/10"
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
class="block text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-1"
|
||||
>Target EPC</span
|
||||
>
|
||||
<span class="text-lg font-black text-[#14163d]">Rating A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
class="block text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-1"
|
||||
>Properties</span
|
||||
>
|
||||
<span class="text-lg font-black text-[#14163d]">142 Units</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 flex flex-wrap gap-2">
|
||||
<span
|
||||
class="px-3 py-1 bg-surface-container-low rounded-lg text-[11px] font-bold text-on-secondary-container"
|
||||
>High Priority</span
|
||||
>
|
||||
<span
|
||||
class="px-3 py-1 bg-surface-container-low rounded-lg text-[11px] font-bold text-on-secondary-container"
|
||||
>Residential</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="group bg-surface-container-lowest p-6 rounded-[2rem] shadow-[0_40px_60px_rgba(21,29,33,0.04)] hover:translate-y-[-4px] transition-all duration-300 relative overflow-hidden"
|
||||
>
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div
|
||||
class="bg-surface-container-highest px-3 py-1 rounded-full flex items-center gap-1.5"
|
||||
>
|
||||
<span
|
||||
class="w-1.5 h-1.5 rounded-full bg-on-surface-variant"
|
||||
></span>
|
||||
<span
|
||||
class="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant"
|
||||
>Planning</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<button
|
||||
class="p-2 hover:bg-surface-container-low rounded-full transition-all text-on-surface-variant"
|
||||
>
|
||||
<span
|
||||
class="material-symbols-outlined text-[20px]"
|
||||
style="font-variation-settings: "FILL" 1"
|
||||
>star</span
|
||||
>
|
||||
</button>
|
||||
<button
|
||||
class="p-2 hover:bg-surface-container-low rounded-full transition-all text-on-surface-variant"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[20px]"
|
||||
>more_vert</span
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<h3
|
||||
class="text-2xl font-black text-[#14163d] font-headline mb-2 leading-tight"
|
||||
>
|
||||
Commercial Retrofit 2026
|
||||
</h3>
|
||||
<p
|
||||
class="text-sm text-on-surface-variant mb-6 flex items-center gap-1"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[14px]"
|
||||
>location_on</span
|
||||
>
|
||||
Manchester City Council
|
||||
</p>
|
||||
<div class="space-y-4 mb-8">
|
||||
<div class="flex justify-between items-end">
|
||||
<span
|
||||
class="text-xs font-bold text-on-surface-variant uppercase tracking-wider"
|
||||
>Budget Utilization</span
|
||||
>
|
||||
<span class="text-sm font-black text-primary"
|
||||
>£0.8M / £12.0M</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="h-2 w-full bg-surface-container-high rounded-full overflow-hidden"
|
||||
>
|
||||
<div
|
||||
class="h-full bg-primary-container rounded-full"
|
||||
style="width: 7%"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-2 gap-4 pt-6 border-t border-outline-variant/10"
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
class="block text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-1"
|
||||
>Target EPC</span
|
||||
>
|
||||
<span class="text-lg font-black text-[#14163d]">Rating B+</span>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
class="block text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-1"
|
||||
>Properties</span
|
||||
>
|
||||
<span class="text-lg font-black text-[#14163d]">28 Assets</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 flex flex-wrap gap-2">
|
||||
<span
|
||||
class="px-3 py-1 bg-surface-container-low rounded-lg text-[11px] font-bold text-on-secondary-container"
|
||||
>Commercial</span
|
||||
>
|
||||
<span
|
||||
class="px-3 py-1 bg-surface-container-low rounded-lg text-[11px] font-bold text-on-secondary-container"
|
||||
>Carbon Neutral</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="group bg-surface-container-lowest p-6 rounded-[2rem] shadow-[0_40px_60px_rgba(21,29,33,0.04)] hover:translate-y-[-4px] transition-all duration-300 relative overflow-hidden"
|
||||
>
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div
|
||||
class="bg-tertiary-fixed px-3 py-1 rounded-full flex items-center gap-1.5"
|
||||
>
|
||||
<span
|
||||
class="w-1.5 h-1.5 rounded-full bg-on-tertiary-fixed"
|
||||
></span>
|
||||
<span
|
||||
class="text-[10px] font-bold uppercase tracking-widest text-on-tertiary-fixed"
|
||||
>In Progress</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<button
|
||||
class="p-2 hover:bg-surface-container-low rounded-full transition-all text-on-surface-variant"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[20px]">star</span>
|
||||
</button>
|
||||
<button
|
||||
class="p-2 hover:bg-surface-container-low rounded-full transition-all text-on-surface-variant"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[20px]"
|
||||
>more_vert</span
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<h3
|
||||
class="text-2xl font-black text-[#14163d] font-headline mb-2 leading-tight"
|
||||
>
|
||||
Oxfordshire Eco Village
|
||||
</h3>
|
||||
<p
|
||||
class="text-sm text-on-surface-variant mb-6 flex items-center gap-1"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[14px]"
|
||||
>location_on</span
|
||||
>
|
||||
Regional Development
|
||||
</p>
|
||||
<div class="space-y-4 mb-8">
|
||||
<div class="flex justify-between items-end">
|
||||
<span
|
||||
class="text-xs font-bold text-on-surface-variant uppercase tracking-wider"
|
||||
>Budget Utilization</span
|
||||
>
|
||||
<span class="text-sm font-black text-primary">£2.9M / £3.1M</span>
|
||||
</div>
|
||||
<div
|
||||
class="h-2 w-full bg-surface-container-high rounded-full overflow-hidden"
|
||||
>
|
||||
<div
|
||||
class="h-full bg-primary-container rounded-full"
|
||||
style="width: 93%"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-2 gap-4 pt-6 border-t border-outline-variant/10"
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
class="block text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-1"
|
||||
>Target EPC</span
|
||||
>
|
||||
<span class="text-lg font-black text-[#14163d]">Net Zero</span>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
class="block text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-1"
|
||||
>Properties</span
|
||||
>
|
||||
<span class="text-lg font-black text-[#14163d]">18 Units</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 flex flex-wrap gap-2">
|
||||
<span
|
||||
class="px-3 py-1 bg-surface-container-low rounded-lg text-[11px] font-bold text-on-secondary-container"
|
||||
>Sustainability</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="group bg-surface-container-lowest p-6 rounded-[2rem] shadow-[0_40px_60px_rgba(21,29,33,0.04)] hover:translate-y-[-4px] transition-all duration-300 relative overflow-hidden"
|
||||
>
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div
|
||||
class="bg-tertiary-fixed px-3 py-1 rounded-full flex items-center gap-1.5"
|
||||
>
|
||||
<span
|
||||
class="w-1.5 h-1.5 rounded-full bg-on-tertiary-fixed"
|
||||
></span>
|
||||
<span
|
||||
class="text-[10px] font-bold uppercase tracking-widest text-on-tertiary-fixed"
|
||||
>In Progress</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<button
|
||||
class="p-2 hover:bg-surface-container-low rounded-full transition-all text-on-surface-variant"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[20px]">star</span>
|
||||
</button>
|
||||
<button
|
||||
class="p-2 hover:bg-surface-container-low rounded-full transition-all text-on-surface-variant"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[20px]"
|
||||
>more_vert</span
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<h3
|
||||
class="text-2xl font-black text-[#14163d] font-headline mb-2 leading-tight"
|
||||
>
|
||||
Northern Estate Phase II
|
||||
</h3>
|
||||
<p
|
||||
class="text-sm text-on-surface-variant mb-6 flex items-center gap-1"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[14px]"
|
||||
>location_on</span
|
||||
>
|
||||
Leeds District
|
||||
</p>
|
||||
<div class="space-y-4 mb-8">
|
||||
<div class="flex justify-between items-end">
|
||||
<span
|
||||
class="text-xs font-bold text-on-surface-variant uppercase tracking-wider"
|
||||
>Budget Utilization</span
|
||||
>
|
||||
<span class="text-sm font-black text-primary"
|
||||
>£5.1M / £15.0M</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="h-2 w-full bg-surface-container-high rounded-full overflow-hidden"
|
||||
>
|
||||
<div
|
||||
class="h-full bg-primary-container rounded-full"
|
||||
style="width: 34%"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-2 gap-4 pt-6 border-t border-outline-variant/10"
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
class="block text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-1"
|
||||
>Target EPC</span
|
||||
>
|
||||
<span class="text-lg font-black text-[#14163d]">Rating B</span>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
class="block text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-1"
|
||||
>Properties</span
|
||||
>
|
||||
<span class="text-lg font-black text-[#14163d]">310 Units</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 flex flex-wrap gap-2">
|
||||
<span
|
||||
class="px-3 py-1 bg-surface-container-low rounded-lg text-[11px] font-bold text-on-secondary-container"
|
||||
>Residential</span
|
||||
>
|
||||
<span
|
||||
class="px-3 py-1 bg-surface-container-low rounded-lg text-[11px] font-bold text-on-secondary-container"
|
||||
>Scale</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="group bg-surface-container-lowest p-6 rounded-[2rem] shadow-[0_40px_60px_rgba(21,29,33,0.04)] hover:translate-y-[-4px] transition-all duration-300 relative overflow-hidden"
|
||||
>
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div
|
||||
class="bg-surface-container-highest px-3 py-1 rounded-full flex items-center gap-1.5"
|
||||
>
|
||||
<span
|
||||
class="w-1.5 h-1.5 rounded-full bg-on-surface-variant"
|
||||
></span>
|
||||
<span
|
||||
class="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant"
|
||||
>Planning</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<button
|
||||
class="p-2 hover:bg-surface-container-low rounded-full transition-all text-on-surface-variant"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[20px]">star</span>
|
||||
</button>
|
||||
<button
|
||||
class="p-2 hover:bg-surface-container-low rounded-full transition-all text-on-surface-variant"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[20px]"
|
||||
>more_vert</span
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<h3
|
||||
class="text-2xl font-black text-[#14163d] font-headline mb-2 leading-tight"
|
||||
>
|
||||
Birmingham Tech Hub
|
||||
</h3>
|
||||
<p
|
||||
class="text-sm text-on-surface-variant mb-6 flex items-center gap-1"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[14px]"
|
||||
>location_on</span
|
||||
>
|
||||
Innovation District
|
||||
</p>
|
||||
<div class="space-y-4 mb-8">
|
||||
<div class="flex justify-between items-end">
|
||||
<span
|
||||
class="text-xs font-bold text-on-surface-variant uppercase tracking-wider"
|
||||
>Budget Utilization</span
|
||||
>
|
||||
<span class="text-sm font-black text-primary">£0.1M / £4.5M</span>
|
||||
</div>
|
||||
<div
|
||||
class="h-2 w-full bg-surface-container-high rounded-full overflow-hidden"
|
||||
>
|
||||
<div
|
||||
class="h-full bg-primary-container rounded-full"
|
||||
style="width: 2%"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-2 gap-4 pt-6 border-t border-outline-variant/10"
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
class="block text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-1"
|
||||
>Target EPC</span
|
||||
>
|
||||
<span class="text-lg font-black text-[#14163d]">Rating A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
class="block text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-1"
|
||||
>Properties</span
|
||||
>
|
||||
<span class="text-lg font-black text-[#14163d]">4 Assets</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 flex flex-wrap gap-2">
|
||||
<span
|
||||
class="px-3 py-1 bg-surface-container-low rounded-lg text-[11px] font-bold text-on-secondary-container"
|
||||
>Commercial</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="group border-2 border-dashed border-outline-variant/40 hover:border-[#14163d]/40 rounded-[2rem] flex flex-col items-center justify-center p-12 transition-all duration-300"
|
||||
>
|
||||
<div
|
||||
class="w-16 h-16 bg-surface-container-low rounded-full flex items-center justify-center mb-4 group-hover:scale-110 transition-transform"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[#14163d] text-3xl"
|
||||
>add_circle</span
|
||||
>
|
||||
</div>
|
||||
<span class="text-lg font-black text-[#14163d] font-headline"
|
||||
>Create Portfolio</span
|
||||
>
|
||||
<span class="text-sm text-on-surface-variant mt-2 text-center"
|
||||
>Start a new sustainability journey for your assets.</span
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="hidden overflow-hidden bg-surface-container-lowest rounded-[2rem] shadow-[0_40px_60px_rgba(21,29,33,0.04)] border border-outline-variant/10"
|
||||
id="table-container"
|
||||
>
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr
|
||||
class="border-b border-outline-variant/10 bg-surface-container-low/50"
|
||||
>
|
||||
<th
|
||||
class="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-on-surface-variant"
|
||||
>
|
||||
Portfolio Name
|
||||
</th>
|
||||
<th
|
||||
class="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-on-surface-variant"
|
||||
>
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
class="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-on-surface-variant"
|
||||
>
|
||||
Budget
|
||||
</th>
|
||||
<th
|
||||
class="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-on-surface-variant"
|
||||
>
|
||||
Progress
|
||||
</th>
|
||||
<th
|
||||
class="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-on-surface-variant"
|
||||
>
|
||||
Target EPC
|
||||
</th>
|
||||
<th
|
||||
class="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-on-surface-variant"
|
||||
>
|
||||
Units
|
||||
</th>
|
||||
<th class="px-6 py-4 w-10"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-outline-variant/10">
|
||||
<tr class="hover:bg-surface-container-low/30 transition-colors">
|
||||
<td class="px-6 py-5">
|
||||
<div class="font-bold text-[#14163d]">
|
||||
London Social Housing
|
||||
</div>
|
||||
<div class="text-[10px] text-on-surface-variant">
|
||||
Greater London Authority
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span
|
||||
class="px-2 py-0.5 bg-tertiary-fixed text-[10px] font-bold text-on-tertiary-fixed rounded-full uppercase tracking-wider"
|
||||
>In Progress</span
|
||||
>
|
||||
</td>
|
||||
<td class="px-6 py-5 font-bold text-sm">£6.5M</td>
|
||||
<td class="px-6 py-5">
|
||||
<div
|
||||
class="w-24 h-1.5 bg-surface-container-high rounded-full overflow-hidden"
|
||||
>
|
||||
<div
|
||||
class="h-full bg-primary-container"
|
||||
style="width: 64%"
|
||||
></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5 font-bold">A</td>
|
||||
<td class="px-6 py-5 text-sm">142</td>
|
||||
<td class="px-6 py-5">
|
||||
<span
|
||||
class="material-symbols-outlined text-on-surface-variant cursor-pointer"
|
||||
>more_vert</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-container-low/30 transition-colors">
|
||||
<td class="px-6 py-5">
|
||||
<div class="font-bold text-[#14163d]">
|
||||
Commercial Retrofit 2026
|
||||
</div>
|
||||
<div class="text-[10px] text-on-surface-variant">
|
||||
Manchester City Council
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span
|
||||
class="px-2 py-0.5 bg-surface-container-highest text-[10px] font-bold text-on-surface-variant rounded-full uppercase tracking-wider"
|
||||
>Planning</span
|
||||
>
|
||||
</td>
|
||||
<td class="px-6 py-5 font-bold text-sm">£12.0M</td>
|
||||
<td class="px-6 py-5">
|
||||
<div
|
||||
class="w-24 h-1.5 bg-surface-container-high rounded-full overflow-hidden"
|
||||
>
|
||||
<div
|
||||
class="h-full bg-primary-container"
|
||||
style="width: 7%"
|
||||
></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5 font-bold">B+</td>
|
||||
<td class="px-6 py-5 text-sm">28</td>
|
||||
<td class="px-6 py-5">
|
||||
<span
|
||||
class="material-symbols-outlined text-on-surface-variant cursor-pointer"
|
||||
>more_vert</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-container-low/30 transition-colors">
|
||||
<td class="px-6 py-5">
|
||||
<div class="font-bold text-[#14163d]">
|
||||
Oxfordshire Eco Village
|
||||
</div>
|
||||
<div class="text-[10px] text-on-surface-variant">
|
||||
Regional Development
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5">
|
||||
<span
|
||||
class="px-2 py-0.5 bg-tertiary-fixed text-[10px] font-bold text-on-tertiary-fixed rounded-full uppercase tracking-wider"
|
||||
>In Progress</span
|
||||
>
|
||||
</td>
|
||||
<td class="px-6 py-5 font-bold text-sm">£3.1M</td>
|
||||
<td class="px-6 py-5">
|
||||
<div
|
||||
class="w-24 h-1.5 bg-surface-container-high rounded-full overflow-hidden"
|
||||
>
|
||||
<div
|
||||
class="h-full bg-primary-container"
|
||||
style="width: 93%"
|
||||
></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-5 font-bold">Net Zero</td>
|
||||
<td class="px-6 py-5 text-sm">18</td>
|
||||
<td class="px-6 py-5">
|
||||
<span
|
||||
class="material-symbols-outlined text-on-surface-variant cursor-pointer"
|
||||
>more_vert</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-20 flex flex-col items-center gap-6">
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-surface-container-low text-on-surface-variant"
|
||||
>
|
||||
<span class="material-symbols-outlined">chevron_left</span>
|
||||
</button>
|
||||
<button
|
||||
class="w-10 h-10 flex items-center justify-center rounded-lg bg-[#14163d] text-white font-bold"
|
||||
>
|
||||
1
|
||||
</button>
|
||||
<button
|
||||
class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-surface-container-low text-on-surface-variant font-bold"
|
||||
>
|
||||
2
|
||||
</button>
|
||||
<button
|
||||
class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-surface-container-low text-on-surface-variant font-bold"
|
||||
>
|
||||
3
|
||||
</button>
|
||||
<span class="px-2 text-on-surface-variant">...</span>
|
||||
<button
|
||||
class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-surface-container-low text-on-surface-variant font-bold"
|
||||
>
|
||||
24
|
||||
</button>
|
||||
<button
|
||||
class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-surface-container-low text-on-surface-variant"
|
||||
>
|
||||
<span class="material-symbols-outlined">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-sm font-medium text-on-surface-variant">
|
||||
Showing 6 of 142 portfolios
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="mt-24 border-t border-outline-variant/10 py-12 px-8">
|
||||
<div
|
||||
class="max-w-[1440px] mx-auto flex justify-between items-center text-sm font-medium text-on-surface-variant"
|
||||
>
|
||||
<p>© 2024 Domna Estate Management. All rights reserved.</p>
|
||||
<div class="flex gap-8">
|
||||
<a class="hover:text-primary transition-colors" href="#"
|
||||
>Documentation</a
|
||||
>
|
||||
<a class="hover:text-primary transition-colors" href="#"
|
||||
>Privacy Policy</a
|
||||
>
|
||||
<a class="hover:text-primary transition-colors" href="#"
|
||||
>Terms of Service</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
```
|
||||
</body>
|
||||
</html>
|
||||
540
docs/design/home-redesign/sample3.html
Normal file
540
docs/design/home-redesign/sample3.html
Normal file
|
|
@ -0,0 +1,540 @@
|
|||
<!doctype html>
|
||||
<html class="light" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||
<title>Domna | Property Portfolios</title>
|
||||
<link href="https://fonts.googleapis.com" rel="preconnect" />
|
||||
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@700;800;900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"on-background": "#151d21",
|
||||
tertiary: "#000000",
|
||||
"surface-container-highest": "#dce3e9",
|
||||
"inverse-primary": "#c1c2f3",
|
||||
"error-container": "#ffdad6",
|
||||
primary: "#000000",
|
||||
"inverse-on-surface": "#ebf2f8",
|
||||
"inverse-surface": "#2a3136",
|
||||
"surface-container-low": "#edf4fa",
|
||||
"surface-dim": "#d4dbe1",
|
||||
"on-surface-variant": "#46464e",
|
||||
"tertiary-fixed": "#ffddb4",
|
||||
"secondary-fixed-dim": "#bec2ff",
|
||||
"outline-variant": "#c7c5cf",
|
||||
"on-secondary-container": "#29308b",
|
||||
"on-primary-fixed-variant": "#41436c",
|
||||
"primary-fixed": "#e1e0ff",
|
||||
"secondary-fixed": "#e0e0ff",
|
||||
"on-tertiary-container": "#9c7f5a",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-tint": "#595b85",
|
||||
"on-tertiary-fixed": "#291800",
|
||||
secondary: "#4e55b0",
|
||||
"on-secondary-fixed": "#00036b",
|
||||
"on-error": "#ffffff",
|
||||
"on-tertiary-fixed-variant": "#5a4222",
|
||||
"surface-variant": "#dce3e9",
|
||||
"on-tertiary": "#ffffff",
|
||||
"primary-container": "#15173e",
|
||||
"secondary-container": "#969efe",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary-container": "#7e80ad",
|
||||
surface: "#f5faff",
|
||||
"tertiary-container": "#291800",
|
||||
"primary-fixed-dim": "#c1c2f3",
|
||||
error: "#ba1a1a",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary-fixed-variant": "#353c97",
|
||||
outline: "#77767f",
|
||||
"surface-container": "#e8eff5",
|
||||
"surface-container-high": "#e2e9ef",
|
||||
"on-primary-fixed": "#15173e",
|
||||
"surface-bright": "#f5faff",
|
||||
"tertiary-fixed-dim": "#e3c197",
|
||||
"on-surface": "#151d21",
|
||||
background: "#f5faff",
|
||||
},
|
||||
borderRadius: {
|
||||
DEFAULT: "0.25rem",
|
||||
lg: "0.5rem",
|
||||
xl: "0.75rem",
|
||||
full: "9999px",
|
||||
},
|
||||
fontFamily: {
|
||||
headline: ["Manrope"],
|
||||
body: ["Inter"],
|
||||
label: ["Inter"],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
.font-headline {
|
||||
font-family: "Manrope", sans-serif;
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings:
|
||||
"FILL" 0,
|
||||
"wght" 400,
|
||||
"GRAD" 0,
|
||||
"opsz" 24;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface min-h-screen">
|
||||
<header
|
||||
class="bg-[#f5faff]/80 dark:bg-[#14163d]/80 backdrop-blur-3xl shadow-[0_40px_60px_rgba(21,29,33,0.04)] docked full-width top-0 sticky z-50"
|
||||
>
|
||||
<div
|
||||
class="flex justify-between items-center w-full px-8 py-4 max-w-[1440px] mx-auto"
|
||||
>
|
||||
<div class="flex items-center gap-8">
|
||||
<span
|
||||
class="text-2xl font-black text-[#14163d] dark:text-white tracking-tighter font-headline"
|
||||
>Domna</span
|
||||
>
|
||||
<nav class="hidden md:flex items-center gap-6">
|
||||
<a
|
||||
class="text-[#14163d] dark:text-white border-b-2 border-[#14163d] dark:border-white pb-1 font-headline font-bold tracking-tight"
|
||||
href="#"
|
||||
>Portfolio</a
|
||||
>
|
||||
<a
|
||||
class="text-[#14163d]/60 dark:text-[#f5faff]/60 hover:text-[#14163d] dark:hover:text-white transition-colors font-headline font-bold tracking-tight"
|
||||
href="#"
|
||||
>Reporting</a
|
||||
>
|
||||
<a
|
||||
class="text-[#14163d]/60 dark:text-[#f5faff]/60 hover:text-[#14163d] dark:hover:text-white transition-colors font-headline font-bold tracking-tight"
|
||||
href="#"
|
||||
>Decent Homes</a
|
||||
>
|
||||
<a
|
||||
class="text-[#14163d]/60 dark:text-[#f5faff]/60 hover:text-[#14163d] dark:hover:text-white transition-colors font-headline font-bold tracking-tight"
|
||||
href="#"
|
||||
>Projects</a
|
||||
>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative group">
|
||||
<span
|
||||
class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant"
|
||||
>search</span
|
||||
>
|
||||
<input
|
||||
class="pl-10 pr-4 py-2 bg-surface-container-highest rounded-lg border-none focus:ring-2 focus:ring-secondary/40 text-sm w-64 transition-all"
|
||||
placeholder="Search portfolios..."
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
class="p-2 hover:bg-[#edf4fa] dark:hover:bg-[#1c1f4a] rounded-lg transition-all scale-95 active:opacity-80"
|
||||
>
|
||||
<span
|
||||
class="material-symbols-outlined text-[#14163d] dark:text-[#f5faff]"
|
||||
>notifications</span
|
||||
>
|
||||
</button>
|
||||
<button
|
||||
class="p-2 hover:bg-[#edf4fa] dark:hover:bg-[#1c1f4a] rounded-lg transition-all scale-95 active:opacity-80"
|
||||
>
|
||||
<span
|
||||
class="material-symbols-outlined text-[#14163d] dark:text-[#f5faff]"
|
||||
>settings</span
|
||||
>
|
||||
</button>
|
||||
<div
|
||||
class="w-10 h-10 rounded-full overflow-hidden bg-surface-container-high ml-2 border-2 border-surface-container-highest"
|
||||
>
|
||||
<img
|
||||
alt="User profile"
|
||||
class="w-full h-full object-cover"
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuAhDifmEzkeiUoz7-qk7MgfZWfDcrj2ZQ0YFyM_QySQW7V5p7txGp2Npp2udFSI4WGqDaDlfUTq15TP_ZSM7NpHCbeLgX_GBtuEfpFUEJt-pjry3M3WB9ldA3UH2zZuZyqvEKFESQ75eT9dHUOJBMrTa_aZXEmsyuEkGIHPY9-T0VHC5t_FgM10CZ0rWy84ATDoIJFnZDA3OblJtPVNuEeWOrJJj7PbJq5Om624QV6-49DGfnFy05CrPZm-HgqXlJ5Ah9XhHPCAQqH_"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="max-w-[1440px] mx-auto px-8 py-12">
|
||||
<div class="mb-8">
|
||||
<button
|
||||
class="flex items-center gap-2 px-6 py-3 bg-gradient-to-br from-primary-container to-[#1c1f4a] text-white rounded-xl font-bold tracking-tight hover:shadow-lg hover:shadow-primary/10 transition-all active:scale-[0.98]"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[20px]">add</span>
|
||||
<span>Add New Portfolio</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-12"
|
||||
>
|
||||
<div>
|
||||
<h1
|
||||
class="text-5xl font-black text-[#14163d] tracking-tighter font-headline mb-4"
|
||||
>
|
||||
Property Portfolios
|
||||
</h1>
|
||||
<p
|
||||
class="text-on-surface-variant max-w-xl font-medium leading-relaxed"
|
||||
>
|
||||
Strategic oversight of energy retrofit assets. Curate, monitor, and
|
||||
scale sustainability across your entire estate architecture.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex bg-surface-container-low p-1 rounded-xl">
|
||||
<button
|
||||
class="p-2 text-on-surface-variant hover:text-primary transition-all"
|
||||
>
|
||||
<span class="material-symbols-outlined">grid_view</span>
|
||||
</button>
|
||||
<button
|
||||
class="p-2 bg-white shadow-sm rounded-lg text-primary transition-all"
|
||||
>
|
||||
<span class="material-symbols-outlined">list</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-wrap items-center gap-4 mb-6 pb-6 border-b border-outline-variant/10"
|
||||
>
|
||||
<div
|
||||
class="flex items-center gap-2 px-4 py-2 bg-surface-container-low rounded-full text-sm font-semibold text-on-surface-variant cursor-pointer hover:bg-surface-container-high transition-all"
|
||||
>
|
||||
<span>Status:</span>
|
||||
<span class="text-primary">All Active</span>
|
||||
<span class="material-symbols-outlined text-[18px]">expand_more</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 px-4 py-2 bg-surface-container-low rounded-full text-sm font-semibold text-on-surface-variant cursor-pointer hover:bg-surface-container-high transition-all"
|
||||
>
|
||||
<span>Tag:</span>
|
||||
<span class="text-primary">Residential</span>
|
||||
<span class="material-symbols-outlined text-[18px]">expand_more</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 px-4 py-2 bg-surface-container-low rounded-full text-sm font-semibold text-on-surface-variant cursor-pointer hover:bg-surface-container-high transition-all"
|
||||
>
|
||||
<span>Sort by:</span>
|
||||
<span class="text-primary">Budget (High)</span>
|
||||
<span class="material-symbols-outlined text-[18px]">expand_more</span>
|
||||
</div>
|
||||
<div class="h-6 w-[1px] bg-outline-variant/30 mx-2"></div>
|
||||
<button
|
||||
class="text-sm font-bold text-secondary hover:underline underline-offset-4"
|
||||
>
|
||||
Reset Filters
|
||||
</button>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-separate border-spacing-y-4">
|
||||
<thead>
|
||||
<tr
|
||||
class="text-on-surface-variant text-[11px] font-bold uppercase tracking-widest px-6"
|
||||
>
|
||||
<th class="pb-2 px-6">Portfolio Name</th>
|
||||
<th class="pb-2 px-6">Status</th>
|
||||
<th class="pb-2 px-6">Budget Progress</th>
|
||||
<th class="pb-2 px-6">Target EPC</th>
|
||||
<th class="pb-2 px-6 text-right">Properties</th>
|
||||
<th class="pb-2 px-6"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="space-y-4">
|
||||
<tr
|
||||
class="bg-surface-container-lowest group hover:translate-y-[-2px] transition-all duration-300 shadow-[0_4px_12px_rgba(21,29,33,0.02)]"
|
||||
>
|
||||
<td class="py-5 px-6 rounded-l-[1.5rem]">
|
||||
<div>
|
||||
<div class="font-headline font-black text-lg text-[#14163d]">
|
||||
London Social Housing
|
||||
</div>
|
||||
<div
|
||||
class="text-xs text-on-surface-variant font-medium flex items-center gap-1 mt-1"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[12px]"
|
||||
>location_on</span
|
||||
>
|
||||
Greater London Authority
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<div
|
||||
class="bg-tertiary-fixed px-3 py-1 rounded-full inline-flex items-center gap-1.5"
|
||||
>
|
||||
<span
|
||||
class="w-1.5 h-1.5 rounded-full bg-on-tertiary-fixed"
|
||||
></span>
|
||||
<span
|
||||
class="text-[9px] font-bold uppercase tracking-widest text-on-tertiary-fixed"
|
||||
>In Progress</span
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-5 px-6 w-1/4">
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between text-[11px] font-bold">
|
||||
<span class="text-on-surface-variant">64%</span>
|
||||
<span class="text-primary">£4.2M / £6.5M</span>
|
||||
</div>
|
||||
<div
|
||||
class="h-1.5 w-full bg-surface-container-high rounded-full overflow-hidden"
|
||||
>
|
||||
<div
|
||||
class="h-full bg-primary-container rounded-full"
|
||||
style="width: 64%"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<span class="text-sm font-black text-[#14163d]">Rating A</span>
|
||||
</td>
|
||||
<td class="py-5 px-6 text-right">
|
||||
<span class="text-sm font-black text-[#14163d]">142 Units</span>
|
||||
</td>
|
||||
<td class="py-5 px-6 rounded-r-[1.5rem] text-right">
|
||||
<button
|
||||
class="p-2 hover:bg-surface-container-low rounded-full transition-all text-on-surface-variant"
|
||||
>
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="bg-surface-container-lowest group hover:translate-y-[-2px] transition-all duration-300 shadow-[0_4px_12px_rgba(21,29,33,0.02)]"
|
||||
>
|
||||
<td class="py-5 px-6 rounded-l-[1.5rem]">
|
||||
<div>
|
||||
<div class="font-headline font-black text-lg text-[#14163d]">
|
||||
Commercial Retrofit 2026
|
||||
</div>
|
||||
<div
|
||||
class="text-xs text-on-surface-variant font-medium flex items-center gap-1 mt-1"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[12px]"
|
||||
>location_on</span
|
||||
>
|
||||
Manchester City Council
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<div
|
||||
class="bg-surface-container-highest px-3 py-1 rounded-full inline-flex items-center gap-1.5"
|
||||
>
|
||||
<span
|
||||
class="w-1.5 h-1.5 rounded-full bg-on-surface-variant"
|
||||
></span>
|
||||
<span
|
||||
class="text-[9px] font-bold uppercase tracking-widest text-on-surface-variant"
|
||||
>Planning</span
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-5 px-6 w-1/4">
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between text-[11px] font-bold">
|
||||
<span class="text-on-surface-variant">7%</span>
|
||||
<span class="text-primary">£0.8M / £12.0M</span>
|
||||
</div>
|
||||
<div
|
||||
class="h-1.5 w-full bg-surface-container-high rounded-full overflow-hidden"
|
||||
>
|
||||
<div
|
||||
class="h-full bg-primary-container rounded-full"
|
||||
style="width: 7%"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<span class="text-sm font-black text-[#14163d]">Rating B+</span>
|
||||
</td>
|
||||
<td class="py-5 px-6 text-right">
|
||||
<span class="text-sm font-black text-[#14163d]">28 Assets</span>
|
||||
</td>
|
||||
<td class="py-5 px-6 rounded-r-[1.5rem] text-right">
|
||||
<button
|
||||
class="p-2 hover:bg-surface-container-low rounded-full transition-all text-on-surface-variant"
|
||||
>
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="bg-surface-container-lowest group hover:translate-y-[-2px] transition-all duration-300 shadow-[0_4px_12px_rgba(21,29,33,0.02)]"
|
||||
>
|
||||
<td class="py-5 px-6 rounded-l-[1.5rem]">
|
||||
<div>
|
||||
<div class="font-headline font-black text-lg text-[#14163d]">
|
||||
Oxfordshire Eco Village
|
||||
</div>
|
||||
<div
|
||||
class="text-xs text-on-surface-variant font-medium flex items-center gap-1 mt-1"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[12px]"
|
||||
>location_on</span
|
||||
>
|
||||
Regional Development
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<div
|
||||
class="bg-tertiary-fixed px-3 py-1 rounded-full inline-flex items-center gap-1.5"
|
||||
>
|
||||
<span
|
||||
class="w-1.5 h-1.5 rounded-full bg-on-tertiary-fixed"
|
||||
></span>
|
||||
<span
|
||||
class="text-[9px] font-bold uppercase tracking-widest text-on-tertiary-fixed"
|
||||
>In Progress</span
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-5 px-6 w-1/4">
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between text-[11px] font-bold">
|
||||
<span class="text-on-surface-variant">93%</span>
|
||||
<span class="text-primary">£2.9M / £3.1M</span>
|
||||
</div>
|
||||
<div
|
||||
class="h-1.5 w-full bg-surface-container-high rounded-full overflow-hidden"
|
||||
>
|
||||
<div
|
||||
class="h-full bg-primary-container rounded-full"
|
||||
style="width: 93%"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<span class="text-sm font-black text-[#14163d]">Net Zero</span>
|
||||
</td>
|
||||
<td class="py-5 px-6 text-right">
|
||||
<span class="text-sm font-black text-[#14163d]">18 Units</span>
|
||||
</td>
|
||||
<td class="py-5 px-6 rounded-r-[1.5rem] text-right">
|
||||
<button
|
||||
class="p-2 hover:bg-surface-container-low rounded-full transition-all text-on-surface-variant"
|
||||
>
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div
|
||||
class="mt-16 flex flex-col md:flex-row items-center justify-between gap-6 px-4"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-sm font-medium text-on-surface-variant"
|
||||
>Items per page:</span
|
||||
>
|
||||
<div class="relative">
|
||||
<select
|
||||
class="appearance-none bg-surface-container-low border-none rounded-lg text-sm font-bold text-primary pl-4 pr-10 py-2 focus:ring-0 cursor-pointer"
|
||||
>
|
||||
<option>10</option>
|
||||
<option selected="">25</option>
|
||||
<option>50</option>
|
||||
<option>100</option>
|
||||
</select>
|
||||
<span
|
||||
class="material-symbols-outlined absolute right-2 top-1/2 -translate-y-1/2 text-on-surface-variant pointer-events-none"
|
||||
>expand_more</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<div class="flex items-center gap-1">
|
||||
<button
|
||||
class="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-surface-container-low text-on-surface-variant transition-colors"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[20px]"
|
||||
>chevron_left</span
|
||||
>
|
||||
</button>
|
||||
<button
|
||||
class="w-9 h-9 flex items-center justify-center rounded-lg bg-primary-container text-white font-bold shadow-sm"
|
||||
>
|
||||
1
|
||||
</button>
|
||||
<button
|
||||
class="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-surface-container-low text-on-surface-variant font-bold transition-colors"
|
||||
>
|
||||
2
|
||||
</button>
|
||||
<button
|
||||
class="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-surface-container-low text-on-surface-variant font-bold transition-colors"
|
||||
>
|
||||
3
|
||||
</button>
|
||||
<span class="px-2 text-on-surface-variant">...</span>
|
||||
<button
|
||||
class="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-surface-container-low text-on-surface-variant font-bold transition-colors"
|
||||
>
|
||||
24
|
||||
</button>
|
||||
<button
|
||||
class="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-surface-container-low text-on-surface-variant transition-colors"
|
||||
>
|
||||
<span class="material-symbols-outlined text-[20px]"
|
||||
>chevron_right</span
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
<p
|
||||
class="text-[11px] font-bold text-on-surface-variant uppercase tracking-widest"
|
||||
>
|
||||
Showing 1-25 of 142 portfolios
|
||||
</p>
|
||||
</div>
|
||||
<div class="hidden md:block w-[140px]"></div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="mt-24 border-t border-outline-variant/10 py-12 px-8">
|
||||
<div
|
||||
class="max-w-[1440px] mx-auto flex flex-col md:flex-row justify-between items-center gap-6 text-sm font-medium text-on-surface-variant"
|
||||
>
|
||||
<p>© 2024 Domna Estate Management. All rights reserved.</p>
|
||||
<div class="flex gap-8">
|
||||
<a class="hover:text-primary transition-colors" href="#"
|
||||
>Documentation</a
|
||||
>
|
||||
<a class="hover:text-primary transition-colors" href="#"
|
||||
>Privacy Policy</a
|
||||
>
|
||||
<a class="hover:text-primary transition-colors" href="#"
|
||||
>Terms of Service</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
1136
docs/design/home-redesign/sample4.html
Normal file
1136
docs/design/home-redesign/sample4.html
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Reference in a new issue