415 lines
21 KiB
HTML
415 lines
21 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>ZappCare Business Suite - Admin Dashboard</title>
|
|
<!-- Material Symbols -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<!-- Google Fonts: Manrope & Inter -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&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-secondary-fixed": "#001e2d",
|
|
"background": "#f7f9fc",
|
|
"on-surface": "#191c1e",
|
|
"surface-container": "#eceef0",
|
|
"on-secondary": "#ffffff",
|
|
"surface-variant": "#e0e3e5",
|
|
"outline": "#6f787d",
|
|
"inverse-primary": "#89d0ed",
|
|
"tertiary-fixed-dim": "#feb876",
|
|
"on-primary": "#ffffff",
|
|
"error": "#ba1a1a",
|
|
"tertiary": "#865219",
|
|
"surface-container-high": "#e6e8ea",
|
|
"on-tertiary-container": "#76450c",
|
|
"on-secondary-container": "#36647e",
|
|
"on-tertiary": "#ffffff",
|
|
"secondary": "#35637d",
|
|
"on-primary-fixed-variant": "#004d62",
|
|
"secondary-fixed-dim": "#9fccea",
|
|
"secondary-container": "#b2e0fe",
|
|
"surface-tint": "#0c6780",
|
|
"primary-container": "#87ceeb",
|
|
"outline-variant": "#bfc8cd",
|
|
"on-primary-fixed": "#001f29",
|
|
"surface-container-low": "#f2f4f6",
|
|
"inverse-on-surface": "#eff1f3",
|
|
"on-error": "#ffffff",
|
|
"primary-fixed-dim": "#89d0ed",
|
|
"primary-fixed": "#baeaff",
|
|
"on-tertiary-fixed-variant": "#6a3b01",
|
|
"on-primary-container": "#005870",
|
|
"surface-dim": "#d8dadc",
|
|
"surface-bright": "#f7f9fc",
|
|
"secondary-fixed": "#c5e7ff",
|
|
"on-background": "#191c1e",
|
|
"tertiary-fixed": "#ffdcbf",
|
|
"surface-container-lowest": "#ffffff",
|
|
"tertiary-container": "#fbb674",
|
|
"on-tertiary-fixed": "#2d1600",
|
|
"surface-container-highest": "#e0e3e5",
|
|
"error-container": "#ffdad6",
|
|
"on-secondary-fixed-variant": "#194c64",
|
|
"inverse-surface": "#2d3133",
|
|
"surface": "#f7f9fc",
|
|
"primary": "#0c6780",
|
|
"on-surface-variant": "#3f484c",
|
|
"on-error-container": "#93000a"
|
|
},
|
|
borderRadius: {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
fontFamily: {
|
|
headline: ["Manrope"],
|
|
body: ["Inter"],
|
|
label: ["Inter"]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.glass-panel {
|
|
background: rgba(255, 255, 255, 0.85);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background font-body text-on-surface overflow-hidden">
|
|
<div class="flex h-screen overflow-hidden">
|
|
<!-- SideNavBar Component -->
|
|
<aside class="h-screen sticky left-0 w-64 bg-slate-50/85 backdrop-blur-md flex flex-col py-6 px-4 space-y-8 z-50">
|
|
<!-- Brand Logo -->
|
|
<div class="flex items-center gap-3 px-2">
|
|
<div class="w-10 h-10 bg-gradient-to-br from-primary to-primary-container rounded-full flex items-center justify-center text-white shadow-lg">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">bolt</span>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-xl font-extrabold font-headline text-sky-600 tracking-tight">ZappCare</h1>
|
|
<p class="text-[10px] uppercase tracking-widest text-slate-500 font-bold">Business Suite</p>
|
|
</div>
|
|
</div>
|
|
<!-- Main Navigation -->
|
|
<nav class="flex-1 flex flex-col space-y-1">
|
|
<a class="flex items-center gap-3 py-3 px-4 bg-sky-100 text-sky-800 rounded-xl font-semibold transition-all duration-200" href="#">
|
|
<span class="material-symbols-outlined">monitoring</span>
|
|
<span class="font-headline text-sm tracking-tight">Analytics</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 py-3 px-4 text-slate-500 hover:text-slate-900 hover:bg-slate-200/50 rounded-xl transition-all duration-200" href="#">
|
|
<span class="material-symbols-outlined">inbox</span>
|
|
<span class="font-headline text-sm tracking-tight">Inbox</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 py-3 px-4 text-slate-500 hover:text-slate-900 hover:bg-slate-200/50 rounded-xl transition-all duration-200" href="#">
|
|
<span class="material-symbols-outlined">group</span>
|
|
<span class="font-headline text-sm tracking-tight">Contacts</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 py-3 px-4 text-slate-500 hover:text-slate-900 hover:bg-slate-200/50 rounded-xl transition-all duration-200" href="#">
|
|
<span class="material-symbols-outlined">robot_2</span>
|
|
<span class="font-headline text-sm tracking-tight">Automation</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 py-3 px-4 text-slate-500 hover:text-slate-900 hover:bg-slate-200/50 rounded-xl transition-all duration-200" href="#">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
<span class="font-headline text-sm tracking-tight">Settings</span>
|
|
</a>
|
|
</nav>
|
|
<!-- CTA -->
|
|
<div class="px-2">
|
|
<button class="w-full py-3 bg-gradient-to-br from-primary to-primary-container text-white rounded-full font-bold shadow-md hover:shadow-lg transition-transform active:scale-95 flex items-center justify-center gap-2">
|
|
<span class="material-symbols-outlined text-lg">chat</span>
|
|
<span>New Chat</span>
|
|
</button>
|
|
</div>
|
|
<!-- Footer Tabs -->
|
|
<div class="border-t border-slate-200/50 pt-4 flex flex-col space-y-1">
|
|
<a class="flex items-center gap-3 py-3 px-4 text-slate-500 hover:text-slate-900 hover:bg-slate-200/50 rounded-xl transition-all duration-200" href="#">
|
|
<span class="material-symbols-outlined">help</span>
|
|
<span class="font-headline text-sm tracking-tight">Help</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 py-3 px-4 text-slate-500 hover:text-slate-900 hover:bg-slate-200/50 rounded-xl transition-all duration-200" href="#">
|
|
<span class="material-symbols-outlined">logout</span>
|
|
<span class="font-headline text-sm tracking-tight">Logout</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Canvas -->
|
|
<main class="flex-1 flex flex-col h-screen overflow-y-auto">
|
|
<!-- TopNavBar Component -->
|
|
<header class="w-full h-16 sticky top-0 z-40 bg-white/95 backdrop-blur-sm flex items-center justify-between px-8">
|
|
<div class="flex items-center flex-1 max-w-xl">
|
|
<div class="relative w-full group">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">search</span>
|
|
<input class="w-full pl-10 pr-4 py-2 bg-surface-container-low border-none rounded-full text-sm focus:ring-2 focus:ring-primary/20 transition-all" placeholder="Search insights, agents, or messages..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-6 ml-8">
|
|
<button class="text-slate-400 hover:text-sky-600 transition-colors">
|
|
<span class="material-symbols-outlined">notifications</span>
|
|
</button>
|
|
<button class="text-slate-400 hover:text-sky-600 transition-colors">
|
|
<span class="material-symbols-outlined">apps</span>
|
|
</button>
|
|
<div class="flex items-center gap-3 pl-4 border-l border-slate-100">
|
|
<div class="text-right">
|
|
<p class="text-xs font-bold text-on-surface">Alex Rivera</p>
|
|
<p class="text-[10px] text-slate-500">Admin</p>
|
|
</div>
|
|
<img class="w-9 h-9 rounded-full object-cover border-2 border-white shadow-sm" data-alt="portrait of a professional male administrator in a clean office setting, soft corporate lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCVxfS49h-T2AycwZ8MWRZriZQNkuJqY65QLsfjfPVgWuOG2_T75zEpgzR0yMZnzyYX7-Olwg9dCU6T3TBtsOub-XPIdcM8z9t464icOnezcjzyC3ZM9alqgkwdJ1wjbpzN7pNS1F4ug0vLa1-BY5L-lOjel5PI3iqtTVHlnsNyXMcKSybZgGjmhDhhRDH8avmQf4uJwlPziVF5XLnAOHO_JwzCbLjevdNRagQ_zx4llfbYUZye3DmwaGVqVC430e-09P4d_KYT8lk"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Dashboard Content -->
|
|
<div class="p-8 space-y-8">
|
|
<!-- Welcome Section -->
|
|
<div>
|
|
<h2 class="text-3xl font-extrabold font-headline text-on-surface tracking-tight">Analytics Overview</h2>
|
|
<p class="text-slate-500 font-medium">Real-time performance metrics for ZappCare Business</p>
|
|
</div>
|
|
<!-- KPI Cards Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<!-- KPI Card 1 -->
|
|
<div class="bg-surface-container-lowest p-6 rounded-full shadow-[0_8px_30px_rgb(0,0,0,0.02)] border border-white/50 flex flex-col gap-4">
|
|
<div class="flex justify-between items-start">
|
|
<div class="p-2 bg-sky-50 rounded-xl text-sky-600">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">forum</span>
|
|
</div>
|
|
<span class="text-xs font-bold text-emerald-500 bg-emerald-50 px-2 py-1 rounded-full">+12%</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-2xl font-extrabold font-headline text-on-surface">432</p>
|
|
<p class="text-xs font-medium text-slate-400 uppercase tracking-wider">Active Conversations</p>
|
|
</div>
|
|
</div>
|
|
<!-- KPI Card 2 -->
|
|
<div class="bg-surface-container-lowest p-6 rounded-full shadow-[0_8px_30px_rgb(0,0,0,0.02)] border border-white/50 flex flex-col gap-4">
|
|
<div class="flex justify-between items-start">
|
|
<div class="p-2 bg-amber-50 rounded-xl text-amber-600">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">hourglass_top</span>
|
|
</div>
|
|
<span class="text-xs font-bold text-amber-500 bg-amber-50 px-2 py-1 rounded-full">High</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-2xl font-extrabold font-headline text-on-surface">24</p>
|
|
<p class="text-xs font-medium text-slate-400 uppercase tracking-wider">Waiting Reply</p>
|
|
</div>
|
|
</div>
|
|
<!-- KPI Card 3 -->
|
|
<div class="bg-surface-container-lowest p-6 rounded-full shadow-[0_8px_30px_rgb(0,0,0,0.02)] border border-white/50 flex flex-col gap-4">
|
|
<div class="flex justify-between items-start">
|
|
<div class="p-2 bg-emerald-50 rounded-xl text-emerald-600">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
|
</div>
|
|
<span class="text-xs font-bold text-emerald-500 bg-emerald-50 px-2 py-1 rounded-full">94%</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-2xl font-extrabold font-headline text-on-surface">1,280</p>
|
|
<p class="text-xs font-medium text-slate-400 uppercase tracking-wider">Resolved Today</p>
|
|
</div>
|
|
</div>
|
|
<!-- KPI Card 4 -->
|
|
<div class="bg-surface-container-lowest p-6 rounded-full shadow-[0_8px_30px_rgb(0,0,0,0.02)] border border-white/50 flex flex-col gap-4">
|
|
<div class="flex justify-between items-start">
|
|
<div class="p-2 bg-indigo-50 rounded-xl text-indigo-600">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">engineering</span>
|
|
</div>
|
|
<span class="text-xs font-bold text-slate-400 bg-slate-100 px-2 py-1 rounded-full">Optimal</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-2xl font-extrabold font-headline text-on-surface">78%</p>
|
|
<p class="text-xs font-medium text-slate-400 uppercase tracking-wider">Agent Workload</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Main Layout Grid -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<!-- Center Content: Chart -->
|
|
<div class="lg:col-span-2 bg-surface-container-lowest p-8 rounded-full shadow-sm border border-white/50">
|
|
<div class="flex justify-between items-center mb-10">
|
|
<div>
|
|
<h3 class="text-lg font-bold font-headline text-on-surface">Message Volume Today</h3>
|
|
<p class="text-sm text-slate-400">Activity across all connected channels</p>
|
|
</div>
|
|
<select class="bg-surface-container-low border-none text-xs font-bold rounded-xl px-4 py-2 focus:ring-0">
|
|
<option>Last 24 Hours</option>
|
|
<option>Last 7 Days</option>
|
|
</select>
|
|
</div>
|
|
<!-- Visual Mockup of a Bar Chart -->
|
|
<div class="h-64 flex items-end justify-between gap-2 px-2">
|
|
<div class="flex-1 bg-sky-100 rounded-t-lg h-[40%] group relative">
|
|
<div class="absolute -top-10 left-1/2 -translate-x-1/2 bg-on-surface text-white text-[10px] py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity">420</div>
|
|
</div>
|
|
<div class="flex-1 bg-sky-200 rounded-t-lg h-[65%] group relative"></div>
|
|
<div class="flex-1 bg-sky-300 rounded-t-lg h-[85%] group relative"></div>
|
|
<div class="flex-1 bg-primary rounded-t-lg h-[95%] group relative"></div>
|
|
<div class="flex-1 bg-sky-400 rounded-t-lg h-[70%] group relative"></div>
|
|
<div class="flex-1 bg-sky-300 rounded-t-lg h-[55%] group relative"></div>
|
|
<div class="flex-1 bg-sky-200 rounded-t-lg h-[45%] group relative"></div>
|
|
<div class="flex-1 bg-sky-100 rounded-t-lg h-[30%] group relative"></div>
|
|
<div class="flex-1 bg-sky-200 rounded-t-lg h-[60%] group relative"></div>
|
|
<div class="flex-1 bg-sky-400 rounded-t-lg h-[80%] group relative"></div>
|
|
<div class="flex-1 bg-primary rounded-t-lg h-[100%] group relative"></div>
|
|
<div class="flex-1 bg-sky-300 rounded-t-lg h-[75%] group relative"></div>
|
|
</div>
|
|
<div class="flex justify-between mt-4 px-2 text-[10px] font-bold text-slate-400 uppercase tracking-widest">
|
|
<span>08:00</span>
|
|
<span>10:00</span>
|
|
<span>12:00</span>
|
|
<span>14:00</span>
|
|
<span>16:00</span>
|
|
<span>18:00</span>
|
|
<span>20:00</span>
|
|
</div>
|
|
</div>
|
|
<!-- Right Sidebar Sections -->
|
|
<div class="space-y-8">
|
|
<!-- Agent Response Speed List -->
|
|
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm border border-white/50">
|
|
<h3 class="text-sm font-bold font-headline text-on-surface mb-6 flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary text-lg">speed</span>
|
|
Agent Response Speed
|
|
</h3>
|
|
<div class="space-y-6">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<img class="w-8 h-8 rounded-full object-cover" data-alt="smiling professional woman agent avatar, soft focus office background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDPCYAX8bx8vpQllZe6nYxqcP5Fds7yl6dJvkU25gW0xc6J5WkSIQ8QFkw0s4YJu-jMeWtYvKAoSagQhn6awGp-bWphS0zisjUp3bnhNEq9urCXr-bLcbM4GPW9gzGU2W0nVf1GRiOCXLC1m2lFKV6bCmpxEdmyhgFaurGnmaK_nOm9uyNODWJBqbE5zG_g7psGN2XMvgd9_44qbzDnnrXyVnC0mQhvEXCwRJdyvH2VzAV_ecEFXz0F0Pb5KG01hipvVpFbamErU7A"/>
|
|
<div>
|
|
<p class="text-xs font-bold">Sarah Chen</p>
|
|
<p class="text-[10px] text-slate-400">Senior Lead</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-xs font-bold text-emerald-600">1.2m</p>
|
|
<p class="text-[10px] text-slate-400">avg. reply</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<img class="w-8 h-8 rounded-full object-cover" data-alt="professional man in suit avatar, cinematic lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAMmsdLxdzm1eHZ7tbSmmXzbXkPp51YVpn1IrdqsDhPYoTxKDQe5Fs0HFAfD53GNI4og2_dH_YAUoen9EGnTxcam3JBviUiCmvQdrc9s7lNlmwUtL1RAAOlmOOUYWvd9C72LGfIgai6tmlhgh3QqzSg2yAw1AQxma1V8B958-DUyYicvLOkGH8Jqzcqatpbwhdqj6lXFzPS83O1UsIV8tR2Mb24ILindmCvBfQn3eijoRkVZViuZlf0tVF5Wt0sUoRwGqeWs6kcaF0"/>
|
|
<div>
|
|
<p class="text-xs font-bold">Marcus Bell</p>
|
|
<p class="text-[10px] text-slate-400">Support Specialist</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-xs font-bold text-emerald-600">2.4m</p>
|
|
<p class="text-[10px] text-slate-400">avg. reply</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<img class="w-8 h-8 rounded-full object-cover" data-alt="young professional woman with glasses, minimalist white background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCgxHSsDErS93XY_vWNqhoiy1LuuQlrLnZ86r9Bd6iL_QYAe7MPi8L0W8VlZeeSMI_RLdyuRmtFVVy_bhsMrXttR32eQjbgdMpBtCSfZ5Uv7DTLQfOV_puiSH6n4QNrtUG2W-keL9eZ3Dd0MAJiDSer9ytQCNFAoIaMesWSkcKpZ0fRWU620w15fa9xv_hIwO8AwpKfGT9TxIk7KZP4HIzEDdxcWkvijL8q0cx1luIpBl0Emyr_4AViwaxAjhHMpCnP1zQEuDzf16A"/>
|
|
<div>
|
|
<p class="text-xs font-bold">Elena Kostic</p>
|
|
<p class="text-[10px] text-slate-400">Automation Ops</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-xs font-bold text-amber-600">4.8m</p>
|
|
<p class="text-[10px] text-slate-400">avg. reply</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="w-full mt-6 py-2 text-[10px] font-bold text-primary uppercase tracking-widest hover:bg-sky-50 rounded-lg transition-colors">View All Agents</button>
|
|
</div>
|
|
<!-- Recent Campaigns Feed -->
|
|
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm border border-white/50">
|
|
<h3 class="text-sm font-bold font-headline text-on-surface mb-6 flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary text-lg">campaign</span>
|
|
Recent Campaigns
|
|
</h3>
|
|
<div class="space-y-4">
|
|
<div class="p-3 bg-surface-container-low rounded-xl">
|
|
<div class="flex justify-between items-start mb-1">
|
|
<p class="text-xs font-bold">Product Launch Q4</p>
|
|
<span class="w-2 h-2 bg-emerald-500 rounded-full"></span>
|
|
</div>
|
|
<p class="text-[10px] text-slate-500 mb-2">Sent to 4,200 recipients</p>
|
|
<div class="w-full bg-slate-200 h-1 rounded-full overflow-hidden">
|
|
<div class="bg-primary h-full w-[82%]"></div>
|
|
</div>
|
|
<div class="flex justify-between mt-1 text-[9px] font-bold text-slate-400">
|
|
<span>82% Open Rate</span>
|
|
<span>Active</span>
|
|
</div>
|
|
</div>
|
|
<div class="p-3 bg-surface-container-low rounded-xl">
|
|
<div class="flex justify-between items-start mb-1">
|
|
<p class="text-xs font-bold">Holiday Discount</p>
|
|
<span class="w-2 h-2 bg-slate-300 rounded-full"></span>
|
|
</div>
|
|
<p class="text-[10px] text-slate-500 mb-2">Sent to 12,500 recipients</p>
|
|
<div class="w-full bg-slate-200 h-1 rounded-full overflow-hidden">
|
|
<div class="bg-slate-400 h-full w-full"></div>
|
|
</div>
|
|
<div class="flex justify-between mt-1 text-[9px] font-bold text-slate-400">
|
|
<span>64% Open Rate</span>
|
|
<span>Ended</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Footer Stats Section -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 pb-10">
|
|
<div class="bg-gradient-to-br from-primary to-primary-container p-8 rounded-full text-white shadow-xl relative overflow-hidden group">
|
|
<div class="absolute top-0 right-0 p-8 opacity-10 transform scale-150 group-hover:rotate-12 transition-transform duration-500">
|
|
<span class="material-symbols-outlined text-9xl">auto_awesome</span>
|
|
</div>
|
|
<div class="relative z-10">
|
|
<h3 class="text-xl font-extrabold font-headline mb-2">AI Efficiency Boost</h3>
|
|
<p class="text-white/80 text-sm max-w-sm mb-6">Automated responses saved your team over 140 hours of manual work this month. Optimization is currently at peak levels.</p>
|
|
<div class="flex gap-4">
|
|
<div class="bg-white/20 backdrop-blur-md px-4 py-2 rounded-xl">
|
|
<p class="text-[10px] font-bold uppercase tracking-wider opacity-70">Saved Hours</p>
|
|
<p class="text-lg font-bold">142.5h</p>
|
|
</div>
|
|
<div class="bg-white/20 backdrop-blur-md px-4 py-2 rounded-xl">
|
|
<p class="text-[10px] font-bold uppercase tracking-wider opacity-70">Cost Reduction</p>
|
|
<p class="text-lg font-bold">28%</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-low p-8 rounded-full border border-slate-200 flex flex-col justify-center">
|
|
<div class="flex items-center gap-6">
|
|
<div class="flex-1">
|
|
<h3 class="text-lg font-bold font-headline text-on-surface mb-1">Customer Satisfaction</h3>
|
|
<p class="text-sm text-slate-500 mb-4">Based on 842 recent surveys</p>
|
|
<div class="flex items-center gap-1 text-amber-400">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">star</span>
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">star</span>
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">star</span>
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">star</span>
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0.5;">star</span>
|
|
<span class="text-on-surface font-bold text-lg ml-2">4.8 / 5.0</span>
|
|
</div>
|
|
</div>
|
|
<div class="w-24 h-24 relative flex items-center justify-center">
|
|
<svg class="w-full h-full transform -rotate-90">
|
|
<circle class="text-slate-200" cx="48" cy="48" fill="transparent" r="40" stroke="currentColor" stroke-width="8"></circle>
|
|
<circle class="text-primary" cx="48" cy="48" fill="transparent" r="40" stroke="currentColor" stroke-dasharray="251.2" stroke-dashoffset="10" stroke-width="8"></circle>
|
|
</svg>
|
|
<span class="absolute text-xs font-bold text-on-surface">96%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</body></html> |