port branding + calendar fixes from sandbox: Tech Mahindra logo, Mira rename, calendar anchors today, Powered by Zino footer

This commit is contained in:
Bhanu Prakash Sai Potteri 2026-06-02 16:16:28 +05:30
parent d16cd8d86e
commit e56b94c18c
9 changed files with 27 additions and 25 deletions

View File

@ -3,7 +3,7 @@
<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" />
<link rel="icon" type="image/svg+xml" href="/zino.svg" /> <link rel="icon" type="image/svg+xml" href="/tech-mahindra-favicon.svg" />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />

BIN
public/mahindra-favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 99 KiB

BIN
public/mahindra.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.0759 49.2998">
<path d="M0 18.1239V49.2998L48.0759 31.4757V0.299805L0 18.1239Z" fill="#E31837"/>
</svg>

After

Width:  |  Height:  |  Size: 162 B

BIN
public/tech-mahindra.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

View File

@ -248,7 +248,7 @@ function CurrentAppShell() {
<Sparkles size={14} className="text-white" /> <Sparkles size={14} className="text-white" />
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="text-[12.5px] font-semibold text-[#9D0D24]">Maya is on the line</div> <div className="text-[12.5px] font-semibold text-[#9D0D24]">Mira is on the line</div>
<div className="text-[11.5px] text-stone-500 dark:text-zinc-400 mt-0.5"> <div className="text-[11.5px] text-stone-500 dark:text-zinc-400 mt-0.5">
The AI scheduler is placing the call right now. This page refreshes on completion. The AI scheduler is placing the call right now. This page refreshes on completion.
</div> </div>

View File

@ -129,8 +129,9 @@ export function CalendarView() {
if (cancelled) return; if (cancelled) return;
setDrives(td); setDrives(td);
setCars((c.records as unknown as Car[]) ?? []); setCars((c.records as unknown as Car[]) ?? []);
const todayKey = istDayKey(new Date().toISOString());
const days = td.map((r) => istDayKey(r.slot_start)).sort(); const days = td.map((r) => istDayKey(r.slot_start)).sort();
setWeekStart(days[0] ?? null); setWeekStart(days.length ? todayKey : null);
}) })
.catch((e: any) => !cancelled && setError(e?.message ?? "Failed to load")) .catch((e: any) => !cancelled && setError(e?.message ?? "Failed to load"))
.finally(() => !cancelled && setLoading(false)); .finally(() => !cancelled && setLoading(false));

View File

@ -171,11 +171,9 @@ function Sidebar({
borderRight: `1px solid ${TM_BORDER}`, borderRight: `1px solid ${TM_BORDER}`,
}} }}
> >
<div className="px-5 pt-6 pb-5 border-b border-stone-200/60"> <div className="px-5 pt-4 pb-3 border-b border-stone-200/60 text-center">
<div className="leading-tight"> <img src={`${import.meta.env.BASE_URL}tech-mahindra.png`} alt="Tech Mahindra" className="mx-auto h-auto block" style={{ maxWidth: "85%" }} />
<img src={`${import.meta.env.BASE_URL}zino.svg`} alt="Zino" className="h-5 w-auto" /> <div className="mt-2 text-[10.5px] uppercase tracking-[0.18em] text-stone-500">AI Sales Ops</div>
<div className="text-[10.5px] uppercase tracking-[0.18em] text-stone-500 mt-2">AI Sales Ops</div>
</div>
</div> </div>
<div className="flex-1 px-3 py-4 overflow-y-auto"> <div className="flex-1 px-3 py-4 overflow-y-auto">
@ -864,7 +862,7 @@ function DetailPage({
<Sparkles size={15} className="text-white" /> <Sparkles size={15} className="text-white" />
</div> </div>
<div> <div>
<div className="text-[13px] font-semibold text-[#e31837]">Maya is on the call</div> <div className="text-[13px] font-semibold text-[#e31837]">Mira is on the call</div>
<div className="text-[12px] text-[#5f0229]">The AI scheduler is handling this lead. This page refreshes when complete.</div> <div className="text-[12px] text-[#5f0229]">The AI scheduler is handling this lead. This page refreshes when complete.</div>
</div> </div>
</div> </div>
@ -1003,7 +1001,7 @@ function DetailPage({
const tone = meta?.tone ?? "system"; const tone = meta?.tone ?? "system";
const isLast = i === audit.length - 1; const isLast = i === audit.length - 1;
const dotColor = isLast ? ACCENT : tone === "ai" ? TM_NAVY : tone === "user" ? "#57534e" : "#a8a29e"; const dotColor = isLast ? ACCENT : tone === "ai" ? TM_NAVY : tone === "user" ? "#57534e" : "#a8a29e";
const actor = tone === "ai" ? "AI · Maya" : (e.user_roles?.[0] ?? "System"); const actor = tone === "ai" ? "AI · Mira" : (e.user_roles?.[0] ?? "System");
return ( return (
<li key={e.id} className="relative pl-7 pb-4 last:pb-0 text-[13px]"> <li key={e.id} className="relative pl-7 pb-4 last:pb-0 text-[13px]">
<span <span
@ -1115,7 +1113,7 @@ const SECTION_EMPTY: Record<string, { icon: React.ReactNode; title: string; body
ai: { ai: {
icon: <Sparkles size={18} strokeWidth={2} />, icon: <Sparkles size={18} strokeWidth={2} />,
title: "No AI call activity", title: "No AI call activity",
body: "Maya's call summary appears here once she's connected.", body: "Mira's call summary appears here once she's connected.",
}, },
other: { other: {
icon: <Inbox size={18} strokeWidth={2} />, icon: <Inbox size={18} strokeWidth={2} />,

View File

@ -42,7 +42,7 @@ export default function Login() {
}; };
return ( return (
<div className="min-h-screen flex bg-white"> <div className="min-h-screen flex bg-white relative">
{/* ── Left — TM brand panel ───────────────────────────────────── */} {/* ── Left — TM brand panel ───────────────────────────────────── */}
<div <div
className="hidden lg:flex lg:w-[45%] flex-col justify-between p-14 relative overflow-hidden text-white" className="hidden lg:flex lg:w-[45%] flex-col justify-between p-14 relative overflow-hidden text-white"
@ -60,9 +60,10 @@ export default function Login() {
/> />
{/* Brand lockup — zino mark + Sales Ops subtitle */} {/* Brand lockup — zino mark + Sales Ops subtitle */}
<div className="relative z-10 leading-tight"> <div className="relative z-10">
<img src={`${import.meta.env.BASE_URL}zino.svg`} alt="Zino" className="h-7 w-auto" /> <div className="bg-white rounded-xl px-5 py-3 shadow-lg inline-block">
<div className="text-[10.5px] uppercase tracking-[0.18em] text-white/60 mt-2">AI Sales Ops</div> <img src={`${import.meta.env.BASE_URL}tech-mahindra.png`} alt="Tech Mahindra" className="h-24 w-auto block" />
</div>
</div> </div>
{/* Headline + feature bullets */} {/* Headline + feature bullets */}
@ -76,7 +77,7 @@ export default function Login() {
<div className="space-y-5"> <div className="space-y-5">
{[ {[
{ icon: <PhoneCall size={14} />, title: "Auto-dial leads", desc: "Maya, your AI scheduler, calls customers within seconds of capture." }, { icon: <PhoneCall size={14} />, title: "Auto-dial leads", desc: "Mira, your AI scheduler, calls customers within seconds of capture." },
{ icon: <CalendarCheck2 size={14} />, title: "Live slot booking", desc: "Real-time availability against the dealer's calendar." }, { icon: <CalendarCheck2 size={14} />, title: "Live slot booking", desc: "Real-time availability against the dealer's calendar." },
{ icon: <Sparkles size={14} />, title: "Feedback loop", desc: "Post-drive AI follow-up captures NPS and concerns." }, { icon: <Sparkles size={14} />, title: "Feedback loop", desc: "Post-drive AI follow-up captures NPS and concerns." },
].map((item) => ( ].map((item) => (
@ -96,10 +97,7 @@ export default function Login() {
</div> </div>
</div> </div>
{/* Footer rule */} <div aria-hidden />
<div className="relative z-10 text-[11px] uppercase tracking-[0.18em] text-white/40">
© Zino
</div>
</div> </div>
{/* ── Right — login form ──────────────────────────────────────── */} {/* ── Right — login form ──────────────────────────────────────── */}
@ -107,7 +105,7 @@ export default function Login() {
<div className="w-full max-w-[360px]"> <div className="w-full max-w-[360px]">
{/* Compact lockup for mobile (left panel hidden) */} {/* Compact lockup for mobile (left panel hidden) */}
<div className="flex items-center mb-10 lg:hidden"> <div className="flex items-center mb-10 lg:hidden">
<img src={`${import.meta.env.BASE_URL}zino.svg`} alt="Zino" className="h-6 w-auto" /> <img src={`${import.meta.env.BASE_URL}mahindra.png`} alt="Mahindra" className="h-20 w-auto" />
</div> </div>
<div className="mb-8"> <div className="mb-8">
@ -173,12 +171,14 @@ export default function Login() {
</button> </button>
</form> </form>
<div className="flex items-center justify-center gap-1.5 mt-12">
<span className="text-[11px] uppercase tracking-[0.12em] text-stone-400">Powered by</span>
<span className="text-[11px] font-bold uppercase tracking-[0.12em]" style={{ color: INK }}>Zino</span>
</div>
</div> </div>
</div> </div>
{/* Powered by Zino — bottom right */}
<div className="absolute bottom-4 right-6 flex items-center gap-1.5 z-20">
<span className="text-[11px] uppercase tracking-[0.12em] text-stone-400">Powered by</span>
<span className="text-[11px] font-bold uppercase tracking-[0.12em]" style={{ color: "#f97316" }}>Zino</span>
</div>
</div> </div>
); );
} }