From b7ed73c76c8ffc5e9e21b3e82bd022246a98ecfe Mon Sep 17 00:00:00 2001 From: Mahakisore7 Date: Sun, 18 Oct 2026 22:14:15 +0530 Subject: [PATCH 1/2] feat(web): replace emojis with stroke SVG icons, add landing hero section and caregiver profile page --- apps/web/src/App.tsx | 7 +- apps/web/src/components/ElderDevice.tsx | 54 +- apps/web/src/components/Layout.tsx | 133 ++--- apps/web/src/components/RiskCard.tsx | 23 +- apps/web/src/components/SignIn.tsx | 17 +- apps/web/src/components/VoteButtons.tsx | 12 +- apps/web/src/components/icons.tsx | 463 ++++++++++++++++++ apps/web/src/components/parts.tsx | 20 +- apps/web/src/routes/Demo.tsx | 69 ++- apps/web/src/routes/Landing.tsx | 349 +++++++++++++ apps/web/src/routes/console/Circle.tsx | 43 +- apps/web/src/routes/console/Console.tsx | 181 ++++--- apps/web/src/routes/console/Dashboard.tsx | 20 +- .../web/src/routes/console/HoldDetailPage.tsx | 4 +- apps/web/src/routes/console/Inbox.tsx | 20 +- apps/web/src/routes/console/Insights.tsx | 7 +- apps/web/src/routes/console/PolicyPage.tsx | 19 +- apps/web/src/routes/console/Profile.tsx | 374 ++++++++++++++ docs/assets/console-circle.png | Bin 184069 -> 187690 bytes docs/assets/console-inbox.png | Bin 174550 -> 177424 bytes docs/assets/console-insights.png | Bin 188904 -> 192578 bytes docs/assets/console-requests.png | Bin 179245 -> 181506 bytes docs/assets/console-rules.png | Bin 179438 -> 193725 bytes docs/assets/demo-phone.png | Bin 271818 -> 258710 bytes docs/assets/demo-question.png | Bin 315905 -> 333871 bytes docs/assets/demo-start.png | Bin 281268 -> 279833 bytes docs/assets/demo-trace.png | Bin 264609 -> 262582 bytes docs/assets/demo-trusted.png | Bin 311350 -> 308217 bytes 28 files changed, 1590 insertions(+), 225 deletions(-) create mode 100644 apps/web/src/components/icons.tsx create mode 100644 apps/web/src/routes/Landing.tsx create mode 100644 apps/web/src/routes/console/Profile.tsx diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx index 177c713..afae7db 100644 --- a/apps/web/src/App.tsx +++ b/apps/web/src/App.tsx @@ -3,6 +3,7 @@ import { Layout } from './components/Layout'; import { AppStateProvider } from './hooks/useAppState'; import { AuthProvider } from './hooks/useAuth'; import { Demo } from './routes/Demo'; +import { Landing } from './routes/Landing'; import { Circle } from './routes/console/Circle'; import { Console } from './routes/console/Console'; import { Dashboard } from './routes/console/Dashboard'; @@ -11,6 +12,7 @@ import { Holds } from './routes/console/Holds'; import { Inbox } from './routes/console/Inbox'; import { InsightsPage } from './routes/console/Insights'; import { PolicyPage } from './routes/console/PolicyPage'; +import { Profile } from './routes/console/Profile'; export function App() { return ( @@ -18,7 +20,7 @@ export function App() { - } /> + } /> } /> }> } /> @@ -28,8 +30,9 @@ export function App() { } /> } /> } /> + } /> - } /> + } /> diff --git a/apps/web/src/components/ElderDevice.tsx b/apps/web/src/components/ElderDevice.tsx index 26b7905..76d9d68 100644 --- a/apps/web/src/components/ElderDevice.tsx +++ b/apps/web/src/components/ElderDevice.tsx @@ -4,6 +4,7 @@ import { useSpeech } from '../hooks/useSpeech'; import type { Card, TurnResult } from '../types'; import { RiskCard } from './RiskCard'; import { ErrorNote, TraceView } from './parts'; +import { IconArrowRight, IconMic, IconVolume } from './icons'; export interface Message { id: number; @@ -15,13 +16,13 @@ export interface Message { export const HERO_TEXT = 'The bank says I have to buy five $200 gift cards today or my account is frozen.'; -export const SCENARIOS: Array<{ label: string; text: string; icon: string }> = [ - { label: 'Buy gift cards (a scam)', text: HERO_TEXT, icon: '🚨' }, - { label: 'Pay the pharmacy $24', text: 'Pay Greenleaf Pharmacy $24', icon: '💊' }, - { label: 'Is this text a scam?', text: 'I got a text saying my package is held and I must pay $2 to release it. Is this a scam?', icon: '📦' }, - { label: 'Pay my neighbour $50', text: 'Send $50 to my neighbour', icon: '🤝' }, - { label: "What's pending?", text: "What's pending?", icon: '📋' }, - { label: 'Try to approve it myself', text: 'approve it', icon: '🛡️' }, +export const SCENARIOS: Array<{ label: string; text: string }> = [ + { label: 'Buy gift cards (a scam)', text: HERO_TEXT }, + { label: 'Pay the pharmacy $24', text: 'Pay Greenleaf Pharmacy $24' }, + { label: 'Is this text a scam?', text: 'I got a text saying my package is held and I must pay $2 to release it. Is this a scam?' }, + { label: 'Pay my neighbour $50', text: 'Send $50 to my neighbour' }, + { label: "What's pending?", text: "What's pending?" }, + { label: 'Try to approve it myself', text: 'approve it' }, ]; interface Props { @@ -81,37 +82,39 @@ export function ElderDevice({ messages, onMessages, onHeld, readAloud }: Props)

Dorothy's Echo

- + Alexa+ Active
Simulated Alexa+ in the kitchen · Hands-free voice assistant
- @@ -152,8 +155,8 @@ export function ElderDevice({ messages, onMessages, onHeld, readAloud }: Props)
{messages.length === 0 && ( -
- +
+
)} @@ -194,7 +197,6 @@ export function ElderDevice({ messages, onMessages, onHeld, readAloud }: Props) disabled={busy} onClick={() => void send(s.text)} > - {s.label} ))} @@ -209,7 +211,7 @@ export function ElderDevice({ messages, onMessages, onHeld, readAloud }: Props) disabled={busy} onClick={() => speech.listen((t) => void send(t))} > - 🎤 +