chore: initial project import
Some checks failed
CI - Production Readiness / Verify (push) Has been cancelled
Some checks failed
CI - Production Readiness / Verify (push) Has been cancelled
This commit is contained in:
Wira Basalamah
@ -0,0 +1,398 @@
|
||||
<!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 - Create Broadcast Campaign</title>
|
||||
<!-- Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<!-- Icons -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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"/>
|
||||
<!-- Tailwind -->
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"background": "#f7f9fc",
|
||||
"surface": "#f7f9fc",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"primary-fixed": "#baeaff",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"on-secondary-container": "#36647e",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"on-surface": "#191c1e",
|
||||
"on-error": "#ffffff",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"surface-container": "#eceef0",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-background": "#191c1e",
|
||||
"on-secondary": "#ffffff",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"error-container": "#ffdad6",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"surface-tint": "#0c6780",
|
||||
"on-error-container": "#93000a",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"error": "#ba1a1a",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"outline": "#6f787d",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-dim": "#d8dadc",
|
||||
"tertiary": "#865219",
|
||||
"primary": "#0c6780",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"primary-container": "#87ceeb",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"tertiary-container": "#fbb674",
|
||||
"secondary": "#35637d",
|
||||
"on-primary-container": "#005870"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.tonal-architecture-no-borders {
|
||||
border: none !important;
|
||||
}
|
||||
.scale-98-on-click:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
.glassmorphism-hover:hover {
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
.custom-gradient {
|
||||
background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%);
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #bfc8cd;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body text-on-surface">
|
||||
<!-- Side Navigation Rail -->
|
||||
<aside class="h-screen w-72 fixed left-0 top-0 overflow-y-auto flex flex-col p-6 space-y-2 bg-[#f2f4f6] dark:bg-slate-900 tonal-architecture-no-borders z-50">
|
||||
<div class="mb-10 flex items-center gap-3">
|
||||
<div class="w-10 h-10 custom-gradient rounded-full flex items-center justify-center text-white">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">domain</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-2xl font-black text-[#0c6780] dark:text-[#87ceeb] font-headline tracking-tight">ZappCare</h1>
|
||||
<p class="text-[10px] uppercase tracking-widest text-slate-500 font-bold">Business Suite</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-[#0c6780] hover:bg-[#e0e3e5] dark:hover:bg-slate-800 transition-all duration-200 rounded-xl font-headline font-bold text-sm tracking-tight scale-98-on-click" href="#">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
Dashboard
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-[#0c6780] hover:bg-[#e0e3e5] dark:hover:bg-slate-800 transition-all duration-200 rounded-xl font-headline font-bold text-sm tracking-tight scale-98-on-click" href="#">
|
||||
<span class="material-symbols-outlined">inbox</span>
|
||||
Inbox
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-[#0c6780] hover:bg-[#e0e3e5] dark:hover:bg-slate-800 transition-all duration-200 rounded-xl font-headline font-bold text-sm tracking-tight scale-98-on-click" href="#">
|
||||
<span class="material-symbols-outlined">contacts</span>
|
||||
Contacts
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 bg-[#87ceeb] text-[#005870] rounded-xl font-headline font-bold text-sm tracking-tight scale-98-on-click" href="#">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">campaign</span>
|
||||
Campaigns
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-[#0c6780] hover:bg-[#e0e3e5] dark:hover:bg-slate-800 transition-all duration-200 rounded-xl font-headline font-bold text-sm tracking-tight scale-98-on-click" href="#">
|
||||
<span class="material-symbols-outlined">domain</span>
|
||||
Tenants
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-[#0c6780] hover:bg-[#e0e3e5] dark:hover:bg-slate-800 transition-all duration-200 rounded-xl font-headline font-bold text-sm tracking-tight scale-98-on-click" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
Settings
|
||||
</a>
|
||||
</nav>
|
||||
<div class="pt-6 border-t border-slate-200">
|
||||
<button class="w-full flex items-center justify-center gap-2 custom-gradient text-white py-4 rounded-xl font-bold shadow-lg shadow-primary/20 scale-98-on-click transition-all">
|
||||
<span class="material-symbols-outlined">add_comment</span>
|
||||
New Chat
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Top Navigation Bar -->
|
||||
<header class="fixed top-0 right-0 w-[calc(100%-18rem)] h-16 z-40 bg-[#f7f9fc]/85 backdrop-blur-xl dark:bg-slate-950/85 flex justify-between items-center px-8 tonal-shift-no-lines">
|
||||
<div class="flex items-center gap-4 flex-1">
|
||||
<div class="relative w-full max-w-md group">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-primary transition-colors">search</span>
|
||||
<input class="w-full bg-surface-container border-none rounded-full py-2 pl-10 pr-4 text-sm focus:ring-2 focus:ring-primary/20 placeholder:text-slate-400 font-body" placeholder="Search campaigns, contacts..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 text-slate-500 hover:bg-slate-100 rounded-full transition-colors glassmorphism-hover">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-500 hover:bg-slate-100 rounded-full transition-colors glassmorphism-hover">
|
||||
<span class="material-symbols-outlined">help_outline</span>
|
||||
</button>
|
||||
<div class="h-8 w-[1px] bg-slate-200 mx-2"></div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="text-right">
|
||||
<p class="text-sm font-bold font-headline leading-tight">Alex Rivera</p>
|
||||
<p class="text-[10px] text-slate-500 font-medium">Campaign Manager</p>
|
||||
</div>
|
||||
<img alt="Manager Profile" class="w-10 h-10 rounded-full border-2 border-primary-container shadow-sm object-cover" data-alt="professional headshot of a smiling man in business casual attire with a soft blurred background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAyNhXaGWTlBM5cuLGwtgp4MvwVnbi4s2UhwOTpmdun0sYMscrht5SpkcYFQ3wkp5-2Vid1Q72aapNt047Nd3ksEw8S2F5B2EAFAC6F2dNYCe7Bz8z6yTW7SnvSTrmrWrYbSnsZIgFTgY2ODPGb3CLNBzAjOxf4aSJBPSZzlIXsE0lTaIHPbkJbPhfKFXXx604Jaft1o5vQ7hnjq48znG9OnmJN_c1KDJe4nOlTRS_pWVlL9BW5CNPL97W1P1bUCWGg0frUjCViTxg"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="ml-72 pt-16 min-h-screen">
|
||||
<div class="p-8 max-w-7xl mx-auto">
|
||||
<!-- Header & Stepper -->
|
||||
<div class="mb-10">
|
||||
<div class="flex items-center gap-2 text-slate-500 mb-2">
|
||||
<span class="text-xs font-bold tracking-widest uppercase">Campaigns</span>
|
||||
<span class="material-symbols-outlined text-sm">chevron_right</span>
|
||||
<span class="text-xs font-bold tracking-widest uppercase text-primary">New Broadcast</span>
|
||||
</div>
|
||||
<h2 class="text-4xl font-black font-headline tracking-tight text-on-surface mb-8">Create Broadcast Campaign</h2>
|
||||
<!-- Stepper -->
|
||||
<div class="flex items-center gap-0 w-full max-w-3xl">
|
||||
<div class="flex flex-col items-center flex-1 group">
|
||||
<div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center font-bold text-sm mb-2 shadow-xl shadow-primary/20">1</div>
|
||||
<span class="text-xs font-bold text-on-surface font-headline">Setup</span>
|
||||
</div>
|
||||
<div class="h-[2px] bg-primary flex-1 mb-6 opacity-30"></div>
|
||||
<div class="flex flex-col items-center flex-1 group">
|
||||
<div class="w-10 h-10 rounded-full bg-surface-container text-slate-400 flex items-center justify-center font-bold text-sm mb-2">2</div>
|
||||
<span class="text-xs font-bold text-slate-400 font-headline">Content</span>
|
||||
</div>
|
||||
<div class="h-[2px] bg-surface-container flex-1 mb-6"></div>
|
||||
<div class="flex flex-col items-center flex-1 group">
|
||||
<div class="w-10 h-10 rounded-full bg-surface-container text-slate-400 flex items-center justify-center font-bold text-sm mb-2">3</div>
|
||||
<span class="text-xs font-bold text-slate-400 font-headline">Review</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Grid -->
|
||||
<div class="grid grid-cols-12 gap-8 items-start">
|
||||
<!-- Form Area -->
|
||||
<div class="col-span-12 lg:col-span-7 space-y-6">
|
||||
<section class="bg-surface-container-lowest p-8 rounded-full shadow-sm">
|
||||
<h3 class="text-xl font-bold font-headline mb-6 text-primary flex items-center gap-2">
|
||||
<span class="material-symbols-outlined">settings_suggest</span>
|
||||
Campaign Fundamentals
|
||||
</h3>
|
||||
<div class="space-y-8">
|
||||
<!-- Campaign Name -->
|
||||
<div class="relative group">
|
||||
<label class="absolute -top-2 left-4 bg-white px-2 text-[10px] font-black uppercase tracking-widest text-primary z-10">Campaign Name</label>
|
||||
<input class="w-full bg-transparent border-2 border-surface-container rounded-xl py-4 px-4 text-sm font-medium focus:border-primary focus:ring-0 transition-all" placeholder="e.g., Summer Wellness Promotion 2024" type="text"/>
|
||||
</div>
|
||||
<!-- Channel Selection -->
|
||||
<div>
|
||||
<label class="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-4 block ml-1">Select Channel</label>
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<button class="p-4 rounded-xl border-2 border-primary bg-primary-container/20 flex flex-col items-center gap-2 transition-all">
|
||||
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">chat_bubble</span>
|
||||
<span class="text-xs font-bold text-primary">WhatsApp</span>
|
||||
</button>
|
||||
<button class="p-4 rounded-xl border-2 border-surface-container hover:border-slate-300 flex flex-col items-center gap-2 transition-all opacity-50 grayscale cursor-not-allowed">
|
||||
<span class="material-symbols-outlined text-slate-400">mail</span>
|
||||
<span class="text-xs font-bold text-slate-500">Email</span>
|
||||
</button>
|
||||
<button class="p-4 rounded-xl border-2 border-surface-container hover:border-slate-300 flex flex-col items-center gap-2 transition-all opacity-50 grayscale cursor-not-allowed">
|
||||
<span class="material-symbols-outlined text-slate-400">sms</span>
|
||||
<span class="text-xs font-bold text-slate-500">SMS</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Target Segment Picker -->
|
||||
<div class="relative">
|
||||
<label class="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-2 block ml-1">Target Segment</label>
|
||||
<div class="w-full bg-surface-container-low rounded-xl p-4 flex items-center justify-between group hover:bg-surface-container transition-colors cursor-pointer">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-secondary-container flex items-center justify-center text-on-secondary-container">
|
||||
<span class="material-symbols-outlined">groups</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold">Active Patients - Last 3 Months</p>
|
||||
<p class="text-[10px] text-slate-500">Approx. 2,450 recipients</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-slate-400">unfold_more</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Template Selection -->
|
||||
<div>
|
||||
<label class="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-2 block ml-1">Select Template</label>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="relative group cursor-pointer">
|
||||
<div class="absolute inset-0 border-2 border-primary rounded-xl z-10 pointer-events-none"></div>
|
||||
<div class="bg-surface-container rounded-xl p-4 h-32 overflow-hidden opacity-80">
|
||||
<div class="h-2 w-3/4 bg-slate-300 rounded mb-2"></div>
|
||||
<div class="h-2 w-1/2 bg-slate-300 rounded mb-2"></div>
|
||||
<div class="h-2 w-2/3 bg-slate-300 rounded mb-6"></div>
|
||||
<div class="h-6 w-20 bg-primary-container rounded"></div>
|
||||
</div>
|
||||
<div class="mt-2 flex items-center justify-between px-1">
|
||||
<span class="text-xs font-bold">Welcome Series</span>
|
||||
<span class="material-symbols-outlined text-primary text-sm">check_circle</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group cursor-pointer">
|
||||
<div class="bg-surface-container rounded-xl p-4 h-32 overflow-hidden group-hover:bg-slate-200 transition-colors">
|
||||
<div class="h-2 w-2/3 bg-slate-300 rounded mb-2"></div>
|
||||
<div class="h-2 w-3/4 bg-slate-300 rounded mb-2"></div>
|
||||
<div class="h-2 w-1/3 bg-slate-300 rounded mb-6"></div>
|
||||
<div class="h-6 w-20 bg-slate-400 rounded"></div>
|
||||
</div>
|
||||
<div class="mt-2 px-1">
|
||||
<span class="text-xs font-bold text-slate-600">Feedback Request</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Primary Actions Fixed Bottom (Desktop Simulation) -->
|
||||
<div class="flex items-center justify-between p-4 bg-surface-container-low rounded-full border border-white shadow-lg">
|
||||
<button class="flex items-center gap-2 px-6 py-3 text-slate-600 font-bold text-sm hover:bg-slate-200 rounded-full transition-all scale-98-on-click">
|
||||
<span class="material-symbols-outlined">arrow_back</span>
|
||||
Cancel
|
||||
</button>
|
||||
<div class="flex gap-4">
|
||||
<button class="flex items-center gap-2 px-8 py-3 border-2 border-primary/20 text-primary font-bold text-sm hover:bg-primary/5 rounded-full transition-all scale-98-on-click">
|
||||
<span class="material-symbols-outlined">schedule</span>
|
||||
Schedule for Later
|
||||
</button>
|
||||
<button class="flex items-center gap-2 px-10 py-3 custom-gradient text-white font-bold text-sm rounded-full shadow-lg shadow-primary/20 transition-all scale-98-on-click hover:opacity-90">
|
||||
<span class="material-symbols-outlined">send</span>
|
||||
Send Now
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Preview Area -->
|
||||
<div class="col-span-12 lg:col-span-5 sticky top-24">
|
||||
<div class="bg-surface-container-low p-8 rounded-full flex flex-col items-center">
|
||||
<p class="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-6">Real-time Mobile Preview</p>
|
||||
<!-- Device Mockup -->
|
||||
<div class="relative w-full max-w-[320px] aspect-[9/18.5] bg-slate-800 rounded-[3rem] p-3 shadow-2xl border-4 border-slate-700">
|
||||
<!-- Screen -->
|
||||
<div class="w-full h-full bg-[#e5ddd5] rounded-[2.5rem] overflow-hidden flex flex-col relative">
|
||||
<!-- Status Bar -->
|
||||
<div class="bg-[#075e54] h-8 flex items-center justify-between px-6 py-1">
|
||||
<div class="text-[10px] text-white font-medium">9:41</div>
|
||||
<div class="flex gap-1">
|
||||
<span class="material-symbols-outlined text-[12px] text-white">signal_cellular_4_bar</span>
|
||||
<span class="material-symbols-outlined text-[12px] text-white">wifi</span>
|
||||
<span class="material-symbols-outlined text-[12px] text-white">battery_full</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- WhatsApp Header -->
|
||||
<div class="bg-[#075e54] p-3 pt-1 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-white text-lg">arrow_back</span>
|
||||
<div class="w-8 h-8 rounded-full bg-slate-200">
|
||||
<img alt="ZappCare Logo" class="w-full h-full rounded-full object-cover" data-alt="clean medical cross logo in blue against white background simple professional medical branding" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDrzQtkKdtyY-vcoOmvVvPO09Zju2MjsOl2Uem8qZBjRIbRRIxgc8S2bH369ElVcJDJPQynWU3MPMtCoerlhVJhgsSOkuKcvTKG9LZuDMdO2PI53a2W-_mNrPpFpH1s5jzfAgJ4HMfD7MzKxK6Dbu8PTqsycisyDG-77Vo1D6Jn1LqvSqSU5BldPcoHPNFw74GCAu9JbQ-Geb9G9aTGe_0UhO-c_fQk8aoSIqbmz0vFKL4ufBcnY3FQR0QtW_ATuC6pAbVQQaope9Y"/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-[11px] text-white font-bold">ZappCare Health</p>
|
||||
<p class="text-[9px] text-white/70">Typically replies instantly</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-white text-lg">videocam</span>
|
||||
<span class="material-symbols-outlined text-white text-lg">call</span>
|
||||
</div>
|
||||
<!-- Chat Canvas -->
|
||||
<div class="flex-1 p-3 overflow-y-auto" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBAGeE5MI-8IoYfg1sgpzbzjWhE7M7bZuQKq_Ry-6OdwDpzAbWOR9WqDB9y0jQwLIXNZvigTmmV2ngn3bh3sBIZBlGLSDWtwlKKPCPqkLFsIeTqln3oX9lnPnimYKePecNyaIs8j7Kkmzf0-HGAV4nFWBZDMYz9ztHVBZmm4ZF7S-0QunUPklko6qDVaCQS5G8iNl3ldeCXJ-aWf_J7HNG_r58YBXN-P37ZLXKiKUT6SU8-6emUFMY-jJp6j1i6_iNZsMxgCRRPxWE'); opacity: 0.8;">
|
||||
<div class="flex flex-col gap-2">
|
||||
<!-- Message Bubble -->
|
||||
<div class="max-w-[85%] bg-white rounded-lg rounded-tl-none p-3 shadow-sm relative">
|
||||
<div class="absolute -left-2 top-0 w-0 h-0 border-t-[10px] border-t-white border-l-[10px] border-l-transparent"></div>
|
||||
<!-- Media Placeholder -->
|
||||
<div class="w-full aspect-video bg-slate-100 rounded-lg mb-3 overflow-hidden">
|
||||
<img alt="Medical Promotion" class="w-full h-full object-cover" data-alt="modern clean medical clinic waiting room with soft blue accents and professional atmosphere" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCgDtqVYPmj4igC_C3Te504wSXtIo4BiL-sYom9u6ThWTLSfHfWZFqKV0hWSDQ52OANvzJny1s9A-UWeImEaGa5GkHqq868e-GAt93SW74ACjCmVxJDb8stq8dhVn77Ez2s5vfQc3KIvJNhRNnGJQiiYHbeM9iwuucoVxiDUOph422rTI2btFjQ237_-iAzwvFZQtlfKQy8dbO3VmM0G98yZDY3OpbCiCvpNZHC2Be6jPJ1U31KvsuOGafszqcvyBWjG5VbLwuPmFY"/>
|
||||
</div>
|
||||
<h4 class="text-[12px] font-bold text-slate-800 mb-1 leading-tight">Welcome to the ZappCare Wellness Program! 🌿</h4>
|
||||
<p class="text-[11px] text-slate-600 leading-relaxed mb-3">
|
||||
Hi {{first_name}}, we're thrilled to have you! To kickstart your health journey, here's an exclusive 20% discount on your next wellness screening.
|
||||
</p>
|
||||
<!-- WhatsApp Button -->
|
||||
<div class="border-t border-slate-100 pt-2 mt-1">
|
||||
<div class="flex items-center justify-center gap-2 py-1 text-primary">
|
||||
<span class="material-symbols-outlined text-sm">open_in_new</span>
|
||||
<span class="text-[10px] font-bold">Claim My Discount</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end mt-1">
|
||||
<span class="text-[8px] text-slate-400">10:05 AM</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Chat Input -->
|
||||
<div class="bg-white/90 p-2 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-slate-400 text-lg">add</span>
|
||||
<div class="flex-1 h-8 bg-slate-100 rounded-full border border-slate-200 px-3 flex items-center">
|
||||
<div class="text-[10px] text-slate-400">Message...</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-primary text-lg">mic</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stats/Summary -->
|
||||
<div class="mt-8 w-full space-y-4">
|
||||
<div class="bg-white p-4 rounded-3xl border border-slate-200 shadow-sm flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined">analytics</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-xs font-bold text-slate-800">Estimated Reach</p>
|
||||
<p class="text-[10px] text-slate-500">2,450 / 2,500 monthly limit</p>
|
||||
<div class="w-full h-1.5 bg-slate-100 rounded-full mt-2 overflow-hidden">
|
||||
<div class="h-full bg-primary rounded-full" style="width: 98%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 390 KiB |
Reference in New Issue
Block a user