mirror of
https://github.com/Hestia-Homes/assessment-model.git
synced 2026-07-22 08:48:34 +00:00
31b7c28ad5
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>
1136 lines
46 KiB
HTML
1136 lines
46 KiB
HTML
<!doctype html>
|
|
<html class="light" lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
<title>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: {
|
|
"brand-blue": "#14163d",
|
|
"brand-brown": "#c4a47c",
|
|
"on-background": "#151d21",
|
|
tertiary: "#000000",
|
|
"surface-container-highest": "#dce3e9",
|
|
"inverse-primary": "#c1c2f3",
|
|
"error-container": "#ffdad6",
|
|
primary: "#14163d",
|
|
"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",
|
|
"2xl": "1rem",
|
|
"3xl": "1.5rem",
|
|
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;
|
|
}
|
|
.active-view {
|
|
background-color: white;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
.list-view-container {
|
|
display: none;
|
|
}
|
|
#view-toggle-list:checked ~ main .grid-view-container {
|
|
display: none;
|
|
}
|
|
#view-toggle-list:checked ~ main .list-view-container {
|
|
display: block;
|
|
}
|
|
#view-toggle-list:checked ~ .view-toggle-btns .list-btn {
|
|
background-color: white;
|
|
color: #14163d;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
#view-toggle-list:checked ~ .view-toggle-btns .grid-btn {
|
|
background-color: transparent;
|
|
color: #46464e;
|
|
}
|
|
#view-toggle-grid:checked ~ main .list-view-container {
|
|
display: none;
|
|
}
|
|
#view-toggle-grid:checked ~ main .grid-view-container {
|
|
display: grid;
|
|
}
|
|
#view-toggle-grid:checked ~ .view-toggle-btns .grid-btn {
|
|
background-color: white;
|
|
color: #14163d;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
#view-toggle-grid:checked ~ .view-toggle-btns .list-btn {
|
|
background-color: transparent;
|
|
color: #46464e;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface text-on-surface min-h-screen">
|
|
<input
|
|
checked=""
|
|
class="hidden"
|
|
id="view-toggle-grid"
|
|
name="view-toggle"
|
|
type="radio"
|
|
/>
|
|
<input
|
|
class="hidden"
|
|
id="view-toggle-list"
|
|
name="view-toggle"
|
|
type="radio"
|
|
/>
|
|
<header
|
|
class="bg-[#f5faff]/80 dark:bg-[#14163d]/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] 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-10">
|
|
<div
|
|
class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-10"
|
|
>
|
|
<div class="flex items-center gap-6">
|
|
<button
|
|
class="flex items-center gap-2 px-6 py-3 border-2 border-brand-blue/10 hover:border-brand-blue text-brand-blue rounded-xl font-bold tracking-tight bg-white transition-all active:scale-[0.98]"
|
|
>
|
|
<span class="material-symbols-outlined text-[20px]">add</span>
|
|
<span>Add New Portfolio</span>
|
|
</button>
|
|
<div class="hidden md:block h-8 w-[1px] bg-outline-variant/30"></div>
|
|
<div>
|
|
<h1
|
|
class="text-3xl font-black text-brand-blue tracking-tighter font-headline"
|
|
>
|
|
Property Portfolios
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3 view-toggle-btns">
|
|
<label
|
|
class="grid-btn cursor-pointer p-2 rounded-lg text-on-surface-variant hover:text-primary transition-all flex items-center justify-center"
|
|
for="view-toggle-grid"
|
|
>
|
|
<span class="material-symbols-outlined">grid_view</span>
|
|
</label>
|
|
<label
|
|
class="list-btn cursor-pointer p-2 rounded-lg text-on-surface-variant hover:text-primary transition-all flex items-center justify-center"
|
|
for="view-toggle-list"
|
|
>
|
|
<span class="material-symbols-outlined">list</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex flex-wrap items-center justify-between gap-4 mb-8 p-4 bg-surface-container-low/50 rounded-2xl border border-outline-variant/10"
|
|
>
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<div
|
|
class="flex items-center gap-2 px-4 py-2 bg-white rounded-full text-xs font-bold text-on-surface-variant cursor-pointer border border-outline-variant/10 hover:bg-surface-container-high transition-all"
|
|
>
|
|
<span>Status:</span>
|
|
<span class="text-primary">All Active</span>
|
|
<span class="material-symbols-outlined text-[16px]"
|
|
>expand_more</span
|
|
>
|
|
</div>
|
|
<div
|
|
class="flex items-center gap-2 px-4 py-2 bg-white rounded-full text-xs font-bold text-on-surface-variant cursor-pointer border border-outline-variant/10 hover:bg-surface-container-high transition-all"
|
|
>
|
|
<span>Tag:</span>
|
|
<span class="text-primary">Residential</span>
|
|
<span class="material-symbols-outlined text-[16px]"
|
|
>expand_more</span
|
|
>
|
|
</div>
|
|
<div
|
|
class="flex items-center gap-2 px-4 py-2 bg-white rounded-full text-xs font-bold text-on-surface-variant cursor-pointer border border-outline-variant/10 hover:bg-surface-container-high transition-all"
|
|
>
|
|
<span>Sort by:</span>
|
|
<span class="text-primary">Budget (High)</span>
|
|
<span class="material-symbols-outlined text-[16px]"
|
|
>expand_more</span
|
|
>
|
|
</div>
|
|
<button
|
|
class="text-xs font-bold text-secondary hover:underline underline-offset-4 ml-2"
|
|
>
|
|
Reset Filters
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div
|
|
class="flex items-center gap-2 px-4 py-2 bg-white rounded-full text-xs font-bold text-on-surface-variant cursor-pointer border border-outline-variant/10"
|
|
>
|
|
<span>Show:</span>
|
|
<select
|
|
class="bg-transparent border-none p-0 pr-6 text-primary focus:ring-0 text-xs font-black appearance-none cursor-pointer"
|
|
>
|
|
<option value="6">6 results</option>
|
|
<option value="20">20 results</option>
|
|
<option value="50">50 results</option>
|
|
<option value="100">100 results</option>
|
|
</select>
|
|
<span
|
|
class="material-symbols-outlined text-[16px] pointer-events-none -ml-5"
|
|
>unfold_more</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="grid-view-container grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
|
|
>
|
|
<div
|
|
class="group bg-surface-container-lowest p-6 rounded-[2rem] shadow-[0_30px_50px_rgba(21,29,33,0.03)] border border-outline-variant/5 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-brand-blue 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-brand-blue 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-brand-blue">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-brand-blue">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_30px_50px_rgba(21,29,33,0.03)] border border-outline-variant/5 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-brand-blue 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-brand-blue 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-brand-blue">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-brand-blue">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_30px_50px_rgba(21,29,33,0.03)] border border-outline-variant/5 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-brand-blue 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-brand-blue 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-brand-blue">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-brand-blue">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_30px_50px_rgba(21,29,33,0.03)] border border-outline-variant/5 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-brand-blue 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-brand-blue 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-brand-blue">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-brand-blue">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
|
|
>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="group bg-surface-container-lowest p-6 rounded-[2rem] shadow-[0_30px_50px_rgba(21,29,33,0.03)] border border-outline-variant/5 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-brand-blue 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-brand-blue 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-brand-blue">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-brand-blue">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-brand-blue/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-brand-blue text-3xl"
|
|
>add_circle</span
|
|
>
|
|
</div>
|
|
<span class="text-lg font-black text-brand-blue 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="list-view-container">
|
|
<div
|
|
class="overflow-x-auto bg-white rounded-3xl shadow-sm border border-outline-variant/10"
|
|
>
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="border-b border-outline-variant/10">
|
|
<th
|
|
class="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-on-surface-variant"
|
|
>
|
|
Portfolio Name
|
|
</th>
|
|
<th
|
|
class="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-on-surface-variant"
|
|
>
|
|
Status
|
|
</th>
|
|
<th
|
|
class="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-on-surface-variant"
|
|
>
|
|
Location
|
|
</th>
|
|
<th
|
|
class="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-on-surface-variant"
|
|
>
|
|
EPC Target
|
|
</th>
|
|
<th
|
|
class="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-on-surface-variant"
|
|
>
|
|
Budget Progress
|
|
</th>
|
|
<th
|
|
class="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-on-surface-variant"
|
|
>
|
|
Assets
|
|
</th>
|
|
<th class="px-6 py-4 text-right"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-outline-variant/5">
|
|
<tr
|
|
class="hover:bg-surface-container-lowest transition-colors group"
|
|
>
|
|
<td class="px-6 py-3">
|
|
<div class="flex items-center gap-3">
|
|
<span
|
|
class="material-symbols-outlined text-on-surface-variant text-[18px]"
|
|
>star</span
|
|
>
|
|
<span class="font-bold text-brand-blue text-sm"
|
|
>London Social Housing</span
|
|
>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-3">
|
|
<span
|
|
class="px-2 py-0.5 rounded-full bg-tertiary-fixed text-on-tertiary-fixed text-[9px] font-bold uppercase tracking-wider"
|
|
>In Progress</span
|
|
>
|
|
</td>
|
|
<td class="px-6 py-3 text-xs text-on-surface-variant">
|
|
Greater London Authority
|
|
</td>
|
|
<td class="px-6 py-3">
|
|
<span class="font-black text-xs text-brand-brown">A</span>
|
|
</td>
|
|
<td class="px-6 py-3 w-48">
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="h-1.5 w-24 bg-surface-container-high rounded-full overflow-hidden"
|
|
>
|
|
<div
|
|
class="h-full bg-brand-blue"
|
|
style="width: 64%"
|
|
></div>
|
|
</div>
|
|
<span class="text-[10px] font-black text-brand-blue"
|
|
>64%</span
|
|
>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-3 text-xs font-bold text-brand-blue">142</td>
|
|
<td class="px-6 py-3 text-right">
|
|
<button
|
|
class="p-1 hover:bg-surface-container-high rounded transition-all text-on-surface-variant opacity-0 group-hover:opacity-100"
|
|
>
|
|
<span class="material-symbols-outlined text-[18px]"
|
|
>more_vert</span
|
|
>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr
|
|
class="hover:bg-surface-container-lowest transition-colors group"
|
|
>
|
|
<td class="px-6 py-3">
|
|
<div class="flex items-center gap-3">
|
|
<span
|
|
class="material-symbols-outlined text-brand-brown text-[18px]"
|
|
style="font-variation-settings: "FILL" 1"
|
|
>star</span
|
|
>
|
|
<span class="font-bold text-brand-blue text-sm"
|
|
>Commercial Retrofit 2026</span
|
|
>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-3">
|
|
<span
|
|
class="px-2 py-0.5 rounded-full bg-surface-container-highest text-on-surface-variant text-[9px] font-bold uppercase tracking-wider"
|
|
>Planning</span
|
|
>
|
|
</td>
|
|
<td class="px-6 py-3 text-xs text-on-surface-variant">
|
|
Manchester City Council
|
|
</td>
|
|
<td class="px-6 py-3">
|
|
<span class="font-black text-xs text-brand-brown">B+</span>
|
|
</td>
|
|
<td class="px-6 py-3 w-48">
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="h-1.5 w-24 bg-surface-container-high rounded-full overflow-hidden"
|
|
>
|
|
<div class="h-full bg-brand-blue" style="width: 7%"></div>
|
|
</div>
|
|
<span class="text-[10px] font-black text-brand-blue"
|
|
>7%</span
|
|
>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-3 text-xs font-bold text-brand-blue">28</td>
|
|
<td class="px-6 py-3 text-right">
|
|
<button
|
|
class="p-1 hover:bg-surface-container-high rounded transition-all text-on-surface-variant opacity-0 group-hover:opacity-100"
|
|
>
|
|
<span class="material-symbols-outlined text-[18px]"
|
|
>more_vert</span
|
|
>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr
|
|
class="hover:bg-surface-container-lowest transition-colors group"
|
|
>
|
|
<td class="px-6 py-3">
|
|
<div class="flex items-center gap-3">
|
|
<span
|
|
class="material-symbols-outlined text-on-surface-variant text-[18px]"
|
|
>star</span
|
|
>
|
|
<span class="font-bold text-brand-blue text-sm"
|
|
>Oxfordshire Eco Village</span
|
|
>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-3">
|
|
<span
|
|
class="px-2 py-0.5 rounded-full bg-tertiary-fixed text-on-tertiary-fixed text-[9px] font-bold uppercase tracking-wider"
|
|
>In Progress</span
|
|
>
|
|
</td>
|
|
<td class="px-6 py-3 text-xs text-on-surface-variant">
|
|
Regional Development
|
|
</td>
|
|
<td class="px-6 py-3">
|
|
<span class="font-black text-xs text-brand-brown"
|
|
>Net Zero</span
|
|
>
|
|
</td>
|
|
<td class="px-6 py-3 w-48">
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="h-1.5 w-24 bg-surface-container-high rounded-full overflow-hidden"
|
|
>
|
|
<div
|
|
class="h-full bg-brand-blue"
|
|
style="width: 93%"
|
|
></div>
|
|
</div>
|
|
<span class="text-[10px] font-black text-brand-blue"
|
|
>93%</span
|
|
>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-3 text-xs font-bold text-brand-blue">18</td>
|
|
<td class="px-6 py-3 text-right">
|
|
<button
|
|
class="p-1 hover:bg-surface-container-high rounded transition-all text-on-surface-variant opacity-0 group-hover:opacity-100"
|
|
>
|
|
<span class="material-symbols-outlined text-[18px]"
|
|
>more_vert</span
|
|
>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr
|
|
class="hover:bg-surface-container-lowest transition-colors group"
|
|
>
|
|
<td class="px-6 py-3">
|
|
<div class="flex items-center gap-3">
|
|
<span
|
|
class="material-symbols-outlined text-on-surface-variant text-[18px]"
|
|
>star</span
|
|
>
|
|
<span class="font-bold text-brand-blue text-sm"
|
|
>Northern Estate Phase II</span
|
|
>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-3">
|
|
<span
|
|
class="px-2 py-0.5 rounded-full bg-tertiary-fixed text-on-tertiary-fixed text-[9px] font-bold uppercase tracking-wider"
|
|
>In Progress</span
|
|
>
|
|
</td>
|
|
<td class="px-6 py-3 text-xs text-on-surface-variant">
|
|
Leeds District
|
|
</td>
|
|
<td class="px-6 py-3">
|
|
<span class="font-black text-xs text-brand-brown">B</span>
|
|
</td>
|
|
<td class="px-6 py-3 w-48">
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="h-1.5 w-24 bg-surface-container-high rounded-full overflow-hidden"
|
|
>
|
|
<div
|
|
class="h-full bg-brand-blue"
|
|
style="width: 34%"
|
|
></div>
|
|
</div>
|
|
<span class="text-[10px] font-black text-brand-blue"
|
|
>34%</span
|
|
>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-3 text-xs font-bold text-brand-blue">310</td>
|
|
<td class="px-6 py-3 text-right">
|
|
<button
|
|
class="p-1 hover:bg-surface-container-high rounded transition-all text-on-surface-variant opacity-0 group-hover:opacity-100"
|
|
>
|
|
<span class="material-symbols-outlined text-[18px]"
|
|
>more_vert</span
|
|
>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr
|
|
class="hover:bg-surface-container-lowest transition-colors group"
|
|
>
|
|
<td class="px-6 py-3">
|
|
<div class="flex items-center gap-3">
|
|
<span
|
|
class="material-symbols-outlined text-on-surface-variant text-[18px]"
|
|
>star</span
|
|
>
|
|
<span class="font-bold text-brand-blue text-sm"
|
|
>Birmingham Tech Hub</span
|
|
>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-3">
|
|
<span
|
|
class="px-2 py-0.5 rounded-full bg-surface-container-highest text-on-surface-variant text-[9px] font-bold uppercase tracking-wider"
|
|
>Planning</span
|
|
>
|
|
</td>
|
|
<td class="px-6 py-3 text-xs text-on-surface-variant">
|
|
Innovation District
|
|
</td>
|
|
<td class="px-6 py-3">
|
|
<span class="font-black text-xs text-brand-brown">A</span>
|
|
</td>
|
|
<td class="px-6 py-3 w-48">
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="h-1.5 w-24 bg-surface-container-high rounded-full overflow-hidden"
|
|
>
|
|
<div class="h-full bg-brand-blue" style="width: 2%"></div>
|
|
</div>
|
|
<span class="text-[10px] font-black text-brand-blue"
|
|
>2%</span
|
|
>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-3 text-xs font-bold text-brand-blue">4</td>
|
|
<td class="px-6 py-3 text-right">
|
|
<button
|
|
class="p-1 hover:bg-surface-container-high rounded transition-all text-on-surface-variant opacity-0 group-hover:opacity-100"
|
|
>
|
|
<span class="material-symbols-outlined text-[18px]"
|
|
>more_vert</span
|
|
>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="mt-12 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-xl hover:bg-white text-on-surface-variant border border-transparent hover:border-outline-variant/20 transition-all"
|
|
>
|
|
<span class="material-symbols-outlined">chevron_left</span>
|
|
</button>
|
|
<button
|
|
class="w-10 h-10 flex items-center justify-center rounded-xl bg-brand-blue text-white font-bold shadow-md shadow-brand-blue/20"
|
|
>
|
|
1
|
|
</button>
|
|
<button
|
|
class="w-10 h-10 flex items-center justify-center rounded-xl hover:bg-white text-on-surface-variant font-bold border border-transparent hover:border-outline-variant/20 transition-all"
|
|
>
|
|
2
|
|
</button>
|
|
<button
|
|
class="w-10 h-10 flex items-center justify-center rounded-xl hover:bg-white text-on-surface-variant font-bold border border-transparent hover:border-outline-variant/20 transition-all"
|
|
>
|
|
3
|
|
</button>
|
|
<span class="px-2 text-on-surface-variant font-medium">...</span>
|
|
<button
|
|
class="w-10 h-10 flex items-center justify-center rounded-xl hover:bg-white text-on-surface-variant font-bold border border-transparent hover:border-outline-variant/20 transition-all"
|
|
>
|
|
24
|
|
</button>
|
|
<button
|
|
class="w-10 h-10 flex items-center justify-center rounded-xl hover:bg-white text-on-surface-variant border border-transparent hover:border-outline-variant/20 transition-all"
|
|
>
|
|
<span class="material-symbols-outlined">chevron_right</span>
|
|
</button>
|
|
</div>
|
|
<p class="text-sm font-semibold text-on-surface-variant/70">
|
|
Showing <span class="text-brand-blue">6</span> of
|
|
<span class="text-brand-blue">142</span> portfolios
|
|
</p>
|
|
</div>
|
|
</main>
|
|
<footer
|
|
class="mt-20 border-t border-outline-variant/10 py-10 px-8 bg-white/30"
|
|
>
|
|
<div
|
|
class="max-w-[1440px] mx-auto flex flex-col md:flex-row justify-between items-center gap-4 text-xs font-bold text-on-surface-variant/60"
|
|
>
|
|
<p>© 2024 Domna Estate Management. All rights reserved.</p>
|
|
<div class="flex gap-8 uppercase tracking-widest">
|
|
<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>
|