feat: polish sidebar (accent bar, icon chips, AI-status footer) + brand copy
- sidebar: Workspace section label, rounded rows w/ icon chips, sunrise active accent bar + ring, pinned live AI-employee status footer - login: headline "Your AI sales floor for insurance", subtitle "Lead Management" - tab title "Zino | Lead Management" + zino.svg favicon Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Bhanu Prakash Sai Potteri
parent
a4d0f80f71
commit
b95733a5f2
@ -3,7 +3,8 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Aria — Lead-to-policy console</title>
|
<link rel="icon" type="image/svg+xml" href="/zino.svg" />
|
||||||
|
<title>Zino | Lead Management</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
8
public/zino.svg
Normal file
8
public/zino.svg
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="486.596" height="229" viewBox="0 0 486.596 229">
|
||||||
|
<g id="Zino_logo" data-name="Zino logo" transform="translate(-61 -34)">
|
||||||
|
<path id="Path_613" data-name="Path 613" d="M464.867,87.973a54.254,54.254,0,0,0-15.651-38.165,53.085,53.085,0,0,0-75.566,0A54.248,54.248,0,0,0,358,87.973V241.024s.193,21.3.763,21.589,7.674.391,12.6.386h.386c4.738,0,11.084-.01,11.827-.385.76-.384,1.142-173.286,1.145-174.632v-.008a27.124,27.124,0,0,1,7.825-19.082,26.542,26.542,0,0,1,37.783,0,27.129,27.129,0,0,1,7.826,19.082h0s-.534,53.337-.38,87.513c.152,33.726.76,85.2,1.14,86.356.362,1.1,6.936,1.13,11.81,1.153l.734,0c5.214.027,12.261-.452,13.3-1.157s0-173.869,0-173.869Z" transform="translate(-70.29)" fill="#ed563b" fill-rule="evenodd"/>
|
||||||
|
<path id="Path_614" data-name="Path 614" d="M661.263,64.763a46.933,46.933,0,0,1,4.067,19.071V209.842h0a53.434,53.434,0,0,1-106.844,1.424h-.022V83.834a46.934,46.934,0,0,1,4.068-19.071A49.748,49.748,0,0,1,574.114,48.6a53.837,53.837,0,0,1,17.335-10.8,57.009,57.009,0,0,1,40.9,0A53.84,53.84,0,0,1,649.68,48.6,49.76,49.76,0,0,1,661.263,64.763ZM585.18,209.744a26.717,26.717,0,0,0,53.433,0V83.834a23.467,23.467,0,0,0-2.034-9.535,24.88,24.88,0,0,0-5.791-8.084,26.926,26.926,0,0,0-8.668-5.4,28.505,28.505,0,0,0-20.448,0,26.927,26.927,0,0,0-8.668,5.4,24.88,24.88,0,0,0-5.791,8.084,23.466,23.466,0,0,0-2.034,9.535Z" transform="translate(-117.733)" fill="#ed563b" fill-rule="evenodd"/>
|
||||||
|
<path id="Path_615" data-name="Path 615" d="M69.512,35.045c-1.221.732-1.527,3.345-1.527,12.022s.305,11.29,1.527,12.022c.916.627,15.674,1.045,34.91,1.045,24.325,0,33.281.314,33.281,1.15,0,1.15-1.934,5.541-12.519,29.167-1.934,4.286-8.651,19.34-14.961,33.452S97.3,152.757,95.465,156.834c-8.142,17.876-17,37.53-21.882,48.611-2.952,6.586-6.717,15.054-8.346,18.817-2.239,4.914-3.257,9.3-3.867,15.89-1.221,12.754.509,18.712,6.31,21.849,2.748,1.463,97.5,1.254,99.233-.209,1.628-1.464,1.832-18.818.305-21.953-1.018-1.882-2.544-1.986-39.184-1.986-27.277,0-38.167-.314-38.167-1.15,0-.627,3.054-7.84,6.718-15.994,3.664-8.05,7.836-17.354,9.262-20.49s4.58-10.036,6.921-15.158c2.34-5.227,6.92-15.263,10.178-22.476s8.956-19.863,12.722-28.226,9.771-21.535,13.231-29.272,8.956-19.758,12.112-26.657A89.4,89.4,0,0,0,164.432,66.6c.8-4.207,2.278-11.688,2.278-11.688,0-13.172-1.424-16.622-7.633-19.235C155.514,34.209,149.408,34,112.971,34,88.341,34,70.428,34.418,69.512,35.045Z" fill="#ed563b"/>
|
||||||
|
<path id="Path_616" data-name="Path 616" d="M263.343,35.149c-1.73.94-1.832,7.522-1.832,113.768,0,79.4.305,112.933,1.12,113.351.611.418,6.412.731,12.824.731,8.752,0,12.009-.314,12.62-1.358.509-.836.916-51.609.916-112.933,0-99.874-.2-111.575-1.628-113.037C286.141,34.313,283.495,34,275.455,34,269.755,34,264.259,34.522,263.343,35.149Z" transform="translate(-47.454)" fill="#ed563b"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.8 KiB |
@ -48,11 +48,14 @@ function BrandLogo() {
|
|||||||
function SidebarInner({ items, activeTo, onNav }: { items: NavItem[]; activeTo: string; onNav: (to: string) => void }) {
|
function SidebarInner({ items, activeTo, onNav }: { items: NavItem[]; activeTo: string; onNav: (to: string) => void }) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="px-2 py-1">
|
<div className="px-1 pt-1 pb-4 border-b border-white/[0.08]">
|
||||||
<BrandLogo />
|
<BrandLogo />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<nav className="flex flex-col gap-1">
|
<nav className="flex flex-col gap-1">
|
||||||
|
<div className="px-3 pb-1.5 text-2xs font-bold uppercase tracking-[0.14em] text-on-navy-muted/60">
|
||||||
|
Workspace
|
||||||
|
</div>
|
||||||
{items.map((n) => {
|
{items.map((n) => {
|
||||||
const on = activeTo === n.to;
|
const on = activeTo === n.to;
|
||||||
return (
|
return (
|
||||||
@ -60,18 +63,48 @@ function SidebarInner({ items, activeTo, onNav }: { items: NavItem[]; activeTo:
|
|||||||
key={n.to}
|
key={n.to}
|
||||||
onClick={() => onNav(n.to)}
|
onClick={() => onNav(n.to)}
|
||||||
className={cn(
|
className={cn(
|
||||||
'flex items-center gap-3 px-3 py-[11px] rounded-md border-none cursor-pointer text-left text-base transition-all duration-150',
|
'group relative flex items-center gap-3 pl-3 pr-2.5 py-2 rounded-xl border-none cursor-pointer text-left text-[15px] transition-all duration-150',
|
||||||
on
|
on
|
||||||
? 'bg-[rgba(251,169,76,0.14)] text-white font-semibold'
|
? 'bg-white/[0.08] text-white font-semibold shadow-[inset_0_1px_0_rgba(255,255,255,0.06)] ring-1 ring-white/10'
|
||||||
: 'bg-transparent text-on-navy-muted font-medium hover:bg-[rgba(251,169,76,0.07)]',
|
: 'bg-transparent text-on-navy-muted font-medium hover:bg-white/[0.05] hover:text-on-navy',
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<n.Icon size={18} className={cn('shrink-0', on && 'text-sunrise-300')} />
|
{/* active accent bar */}
|
||||||
{n.label}
|
<span
|
||||||
|
className={cn(
|
||||||
|
'absolute left-0 top-1/2 -translate-y-1/2 h-5 w-[3px] rounded-r-full bg-gradient-to-b from-sunrise-400 to-sunrise-300 transition-opacity duration-150',
|
||||||
|
on ? 'opacity-100' : 'opacity-0',
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition-colors duration-150',
|
||||||
|
on
|
||||||
|
? 'bg-sunrise-500/18 text-sunrise-300'
|
||||||
|
: 'bg-white/[0.04] text-on-navy-muted group-hover:text-sunrise-300',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<n.Icon size={17} />
|
||||||
|
</span>
|
||||||
|
<span className="truncate">{n.label}</span>
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
{/* live AI-employee status — pinned to the bottom */}
|
||||||
|
<div className="mt-auto pt-4 border-t border-white/[0.08]">
|
||||||
|
<div className="flex items-center gap-2.5 px-2.5 py-2.5 rounded-xl bg-white/[0.04] ring-1 ring-white/[0.06]">
|
||||||
|
<span className="relative flex h-2.5 w-2.5 shrink-0">
|
||||||
|
<span className="absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-60 animate-ping" />
|
||||||
|
<span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-emerald-400" />
|
||||||
|
</span>
|
||||||
|
<div className="leading-tight min-w-0">
|
||||||
|
<div className="text-xs font-semibold text-on-navy">AI employees active</div>
|
||||||
|
<div className="text-2xs text-on-navy-muted truncate">Qualify · Engage · Underwrite</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -85,13 +85,13 @@ export function Login() {
|
|||||||
<div className="hidden lg:flex flex-col gap-9 p-10 border-r border-white/10">
|
<div className="hidden lg:flex flex-col gap-9 p-10 border-r border-white/10">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<ZinoLogo className="h-9 w-auto" />
|
<ZinoLogo className="h-9 w-auto" />
|
||||||
<div className="text-xs text-on-navy-muted border-l border-white/15 pl-3">Lead-to-policy console</div>
|
<div className="text-xs text-on-navy-muted border-l border-white/15 pl-3">Lead Management</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1 className="m-0 text-[34px] leading-[1.12] font-extrabold tracking-[-0.025em] text-on-navy">
|
<h1 className="m-0 text-[34px] leading-[1.12] font-extrabold tracking-[-0.025em] text-on-navy">
|
||||||
The AI-native
|
Your AI sales floor
|
||||||
<br />
|
<br />
|
||||||
lead-to-policy console.
|
for insurance.
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<div className="flex flex-col gap-5 mt-auto">
|
<div className="flex flex-col gap-5 mt-auto">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user