All Prompts
All Prompts
herolanding-pagetailwindanimated-buttonchat-mockupresponsiveinteractivegradientcta
Landing Hero with Chat App Preview & Animated CTA
Hero-секция для лендинга: заголовок, подтекст, анимированная кнопка CTA, интерактивный чат-макет. Tailwind CSS, адаптивный дизайн.
Prompt
<section class="relative z-10">
<div class="max-w-6xl sm:px-6 lg:px-8 sm:pt-16 bg-center bg-[url(https://images.unsplash.com/photo-1522745078452-5b62b553a3ea?q=80&w=1200&auto=format&fit=crop)] bg-cover mt-0 mr-auto mb-8 ml-auto pt-0 pr-0 pl-0">
<div class="flex flex-col text-center mr-auto ml-auto space-y-6 items-center" style="padding-top:72px">
<div class="mb-2">
<span class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-medium text-zinc-200 backdrop-blur font-sans" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5 text-violet-300"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
New: AI Recaps for threads
</span>
</div>
<h1 class="sm:text-6xl md:text-7xl text-4xl font-light text-white tracking-tighter font-bricolage" style="">
Conversations that move work forward
</h1>
<p class="max-w-2xl sm:text-lg text-base text-zinc-300 font-sans" style="">
Realtime messaging, channels, voice notes, and AI summaries—secure by default and lightning fast across devices.
</p>
<div class="flex gap-3 mt-6 mb-0 pb-[54px] items-center">
<button type="button" class="button">
<div class="points_wrapper">
<i class="point"></i>
<i class="point"></i>
<i class="point"></i>
<i class="point"></i>
<i class="point"></i>
<i class="point"></i>
<i class="point"></i>
<i class="point"></i>
<i class="point"></i>
<i class="point"></i>
</div>
<span class="inner">
Sign Up
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</span>
<style>
.button {
cursor: pointer;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: all 0.25s ease;
background: radial-gradient(65.28% 65.28% at 50% 100%,
rgba(34, 211, 238, 0.8) 0%,
rgba(34, 211, 238, 0) 100%),
linear-gradient(0deg, #2563eb, #2563eb);
border-radius: 9999px;
border: none;
outline: none;
padding: 12px 18px;
min-height: 48px;
min-width: 102px;
}
.button::before,
.button::after {
content: "";
position: absolute;
transition: all 0.5s ease-in-out;
z-index: 0;
}
.button::before {
inset: 1px;
background: linear-gradient(177.95deg,
rgba(255, 255, 255, 0.19) 0%,
rgba(255, 255, 255, 0) 100%);
border-radius: 9999px;
}
.button::after {
inset: 2px;
background: radial-gradient(65.28% 65.28% at 50% 100%,
rgba(34, 211, 238, 0.8) 0%,
rgba(34, 211, 238, 0) 100%),
linear-gradient(0deg, #2563eb, #2563eb);
border-radius: 9999px;
}
.button:active {
transform: scale(0.95);
}
.points_wrapper {
overflow: hidden;
width: 100%;
height: 100%;
pointer-events: none;
position: absolute;
z-index: 1;
}
.points_wrapper .point {
bottom: -10px;
position: absolute;
animation: floating-points infinite ease-in-out;
pointer-events: none;
width: 2px;
height: 2px;
background-color: #fff;
border-radius: 9999px;
}
@keyframes floating-points {
0% {
transform: translateY(0);
}
85% {
opacity: 0;
}
100% {
transform: translateY(-55px);
opacity: 0;
}
}
.points_wrapper .point:nth-child(1) {
left: 10%;
opacity: 1;
animation-duration: 2.35s;
animation-delay: 0.2s;
}
.points_wrapper .point:nth-child(2) {
left: 30%;
opacity: 0.7;
animation-duration: 2.5s;
animation-delay: 0.5s;
}
.points_wrapper .point:nth-child(3) {
left: 25%;
opacity: 0.8;
animation-duration: 2.2s;
animation-delay: 0.1s;
}
.points_wrapper .point:nth-child(4) {
left: 44%;
opacity: 0.6;
animation-duration: 2.05s;
}
.points_wrapper .point:nth-child(5) {
left: 50%;
opacity: 1;
animation-duration: 1.9s;
}
.points_wrapper .point:nth-child(6) {
left: 75%;
opacity: 0.5;
animation-duration: 1.5s;
animation-delay: 1.5s;
}
.points_wrapper .point:nth-child(7) {
left: 88%;
opacity: 0.9;
animation-duration: 2.2s;
animation-delay: 0.2s;
}
.points_wrapper .point:nth-child(8) {
left: 58%;
opacity: 0.8;
animation-duration: 2.25s;
animation-delay: 0.2s;
}
.points_wrapper .point:nth-child(9) {
left: 98%;
opacity: 0.6;
animation-duration: 2.6s;
animation-delay: 0.1s;
}
.points_wrapper .point:nth-child(10) {
left: 65%;
opacity: 1;
animation-duration: 2.5s;
animation-delay: 0.2s;
}
.inner {
z-index: 2;
gap: 6px;
position: relative;
width: 100%;
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 500;
line-height: 1.5;
transition: color 0.2s ease-in-out;
}
.inner svg.icon {
width: 18px;
height: 18px;
transition: transform 0.3s ease;
stroke: white;
fill: none;
}
.button:hover svg.icon {
transform: translateX(2px);
}
.button:hover svg.icon path {
animation: dash 0.8s linear forwards;
}
@keyframes dash {
0% {
stroke-dasharray: 0, 20;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 10, 10;
stroke-dashoffset: -5;
}
100% {
stroke-dasharray: 20, 0;
stroke-dashoffset: -10;
}
}
</style>
</button>
<a href="#" class="inline-flex items-center gap-2 hover:bg-white/5 text-sm font-medium text-zinc-200 border-white/10 border rounded-full pt-2.5 pr-5 pb-2.5 pl-5 backdrop-blur-lg font-sans" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" class=""></path></svg>
See how it works
</a>
</div>
</div>
<!-- App Preview -->
<div class="relative sm:mt-16 mt-12">
<!-- Glow -->
<div class="absolute inset-0 -top-8 mx-auto h-56 max-w-5xl rounded-[28px] bg-gradient-to-r from-violet-500/30 via-fuchsia-500/20 to-indigo-500/30 blur-2xl"></div>
<section class="relative ring-1 ring-white/10 supports-[backdrop-filter]:bg-white/5 overflow-hidden text-white bg-white/5 border-slate-50/10 border rounded-2xl backdrop-blur-xl">
<!-- Sidebar (icons only) -->
<nav class="hidden sm:flex flex-col absolute inset-y-0 left-0 w-14 z-10 pt-4 pr-2 pb-4 pl-2 backdrop-blur items-center justify-between" aria-label="Primary">
<div class="flex flex-col gap-3 items-center">
<button type="button" class="h-10 w-10 ring-1 ring-white/20 flex bg-white/10 rounded-xl items-center justify-center" title="Home" aria-label="Home">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="home" class="lucide lucide-home w-5 h-5 text-white"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" class=""></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" class=""></path></svg>
</button>
<div class="h-px w-8 bg-white/10"></div>
<button type="button" class="h-10 w-10 rounded-xl text-slate-300 hover:bg-white/10 flex items-center justify-center" title="Search" aria-label="Search">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="search" class="lucide lucide-search w-5 h-5"><path d="m21 21-4.34-4.34" class=""></path><circle cx="11" cy="11" r="8" class=""></circle></svg>
</button>
<button type="button" class="h-10 w-10 rounded-xl text-slate-300 hover:bg-white/10 flex items-center justify-center" title="Contacts" aria-label="Contacts">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="users" class="lucide lucide-users w-5 h-5"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg>
</button>
<button type="button" class="h-10 w-10 rounded-xl text-slate-300 hover:bg-white/10 flex items-center justify-center" title="Calls" aria-label="Calls">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="phone" class="lucide lucide-phone w-5 h-5"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384" class=""></path></svg>
</button>
<button type="button" class="h-10 w-10 rounded-xl text-slate-300 hover:bg-white/10 flex items-center justify-center" title="Files" aria-label="Files">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="folder" class="lucide lucide-folder w-5 h-5"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" class=""></path></svg>
</button>
</div>
<div class="flex flex-col items-center gap-3">
<button type="button" class="h-10 w-10 rounded-xl text-slate-300 hover:bg-white/10 flex items-center justify-center" title="Settings" aria-label="Settings">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="settings" class="lucide lucide-settings w-5 h-5"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
</button>
<button type="button" class="h-10 w-10 rounded-xl text-slate-300 hover:bg-white/10 flex items-center justify-center" title="Help" aria-label="Help">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="help-circle" class="lucide lucide-help-circle w-5 h-5"><circle cx="12" cy="12" r="10" class=""></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" class=""></path><path d="M12 17h.01" class=""></path></svg>
</button>
</div>
</nav>
<div class="grid grid-cols-1 lg:grid-cols-2 sm:pl-16">
<!-- Left: Conversations -->
<div class="sm:p-8 lg:p-10 pt-5 pr-5 pb-5 pl-5">
<div class="space-y-6">
<div class="flex items-center justify-between">
<h2 class="sm:text-2xl text-xl text-white tracking-tight font-bricolage font-light" style="">Inbox</h2>
<div class="flex items-center gap-2 text-slate-400">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M3 7h18" class=""></path><path d="M3 12h18" class=""></path><path d="M3 17h18" class=""></path></svg>
<span class="text-xs sm:text-sm font-medium font-sans" style="">Channels</span>
</div>
</div>
<div class="ring-1 ring-white/10 bg-white/5 rounded-xl p-3">
<div class="flex items-center gap-2 rounded-lg bg-white/5 ring-1 ring-white/10 px-3 py-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-slate-300"><path d="m21 21-4.34-4.34" class=""></path><circle cx="11" cy="11" r="8" class=""></circle></svg>
<input placeholder="Search messages" class="bg-transparent outline-none text-sm text-slate-200 placeholder:text-slate-400 flex-1">
</div>
<div class="mt-3 space-y-1" id="chat-list">
<button class="w-full text-left px-3 py-2 rounded-lg hover:bg-white/5 ring-1 ring-transparent hover:ring-white/10 flex items-center gap-3">
<span class="inline-flex h-2 w-2 rounded-full bg-emerald-400"></span>
<div class="min-w-0 flex-1">
<p class="text-sm text-slate-200 truncate font-sans" style=""># product-launch</p>
<p class="text-xs text-slate-400 truncate font-sans" style="">Lina: Final checks on the landing…</p>
</div>
<span class="text-[10px] text-slate-500 font-sans" style="">2m</span>
</button>
<button class="w-full text-left px-3 py-2 rounded-lg bg-white/5 ring-1 ring-white/10 flex items-center gap-3">
<span class="inline-flex h-2 w-2 rounded-full bg-violet-400"></span>
<div class="min-w-0 flex-1">
<p class="text-sm text-slate-200 truncate font-sans" style=""># design-review</p>
<p class="text-xs text-slate-400 truncate font-sans" style="">You: Shared the Figma link</p>
</div>
<span class="text-[10px] text-slate-500 font-sans" style="">14m</span>
</button>
<button class="w-full text-left px-3 py-2 rounded-lg hover:bg-white/5 ring-1 ring-transparent hover:ring-white/10 flex items-center gap-3">
<span class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-white/5 ring-1 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg>
</span>
<div class="min-w-0 flex-1">
<p class="text-sm text-slate-200 truncate font-sans" style="">Lina Park</p>
<p class="text-xs text-slate-400 truncate font-sans" style="">DM · “Pushing a hotfix”</p>
</div>
<span class="text-[10px] text-slate-500 font-sans" style="">1h</span>
</button>
</div>
</div>
<div class="space-y-4">
<h3 class="text-lg tracking-tight font-semibold text-white font-sans" style="">Quick Actions</h3>
<div class="grid grid-cols-2 gap-2">
<div class="flex gap-2 ring-1 ring-white/10 hover:bg-white/10 transition-colors bg-white/5 rounded-lg pt-2 pr-3 pb-2 pl-3 items-start">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-slate-300"><path d="M3 7h18" class=""></path><path d="M3 12h18" class=""></path><path d="M3 17h18" class=""></path></svg>
<div class="min-w-0 flex-1">
<span class="text-xs text-slate-300 font-sans block" style="">All channels</span>
<span class="text-[10px] text-slate-500 font-sans" style="">⌘ + K</span>
</div>
</div>
<div class="flex gap-2 ring-1 ring-white/10 hover:bg-white/10 transition-colors bg-white/5 rounded-lg pt-2 pr-3 pb-2 pl-3 items-start">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-[14px] h-[14px]" style="width: 14px; height: 14px; color: rgb(203, 213, 225);"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" class=""></path></svg>
<div class="min-w-0 flex-1">
<span class="text-xs text-slate-300 font-sans block" style="">Start a call</span>
<span class="text-[10px] text-slate-500 font-sans" style="">⌘ + Shift + C</span>
</div>
</div>
<div class="flex gap-2 ring-1 ring-white/10 hover:bg-white/10 transition-colors bg-white/5 rounded-lg pt-2 pr-3 pb-2 pl-3 items-start">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-slate-300"><path d="m21 21-4.34-4.34" class=""></path><circle cx="11" cy="11" r="8" class=""></circle></svg>
<div class="min-w-0 flex-1">
<span class="text-xs text-slate-300 font-sans block" style="">Search</span>
<span class="text-[10px] text-slate-500 font-sans" style="">⌘ + F</span>
</div>
</div>
<div class="flex gap-2 ring-1 ring-white/10 hover:bg-white/10 transition-colors bg-white/5 rounded-lg pt-2 pr-3 pb-2 pl-3 items-start">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-slate-300"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg>
<div class="min-w-0 flex-1">
<span class="text-xs text-slate-300 font-sans block" style="">Direct messages</span>
<span class="text-[10px] text-slate-500 font-sans" style="">⌘ + D</span>
</div>
</div>
<div class="flex gap-2 ring-1 ring-white/10 hover:bg-white/10 transition-colors bg-white/5 rounded-lg pt-2 pr-3 pb-2 pl-3 items-start">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-slate-300"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" class=""></path></svg>
<div class="min-w-0 flex-1">
<span class="text-xs text-slate-300 font-sans block" style="">Files & media</span>
<span class="text-[10px] text-slate-500 font-sans" style="">⌘ + U</span>
</div>
</div>
<div class="flex gap-2 ring-1 ring-white/10 hover:bg-white/10 transition-colors bg-white/5 rounded-lg pt-2 pr-3 pb-2 pl-3 items-start">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-slate-300"><circle cx="12" cy="12" r="10" class=""></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" class=""></path><path d="M12 17h.01" class=""></path></svg>
<div class="min-w-0 flex-1">
<span class="text-xs text-slate-300 font-sans block" style="">Help center</span>
<span class="text-[10px] text-slate-500 font-sans" style="">⌘ + ?</span>
</div>
</div>
</div>
<div class="pt-2">
<div class="flex items-center justify-between text-[11px] text-slate-400">
<span class="font-sans" style="">Press ⌘ + / for more shortcuts</span>
<span class="inline-flex items-center gap-1 font-sans" style="">
<span class="inline-flex h-4 w-4 items-center justify-center rounded bg-white/10 text-[9px]">6</span>
unread
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Right: Chat thread -->
<div class="lg:border-t-0 lg:border-l border-white/10 border-t pr-4 pl-4">
<div class="sm:p-8 lg:p-10 pt-5 pr-5 pb-5 pl-5 space-y-5">
<!-- Channel header -->
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="inline-flex h-8 w-8 items-center justify-center ring-1 ring-white/20 bg-white/10 rounded-md">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-white"><path d="M3 7h18" class=""></path><path d="M3 12h18" class=""></path><path d="M3 17h18" class=""></path></svg>
</span>
<div class="">
<p class="text-white font-medium font-sans" style=""># product-launch</p>
<p class="text-[12px] text-slate-400 font-sans" style="">42 members · 6 online</p>
</div>
</div>
<div class="flex items-center gap-2">
<button class="p-2 rounded-lg bg-white/5 ring-1 ring-white/10 hover:bg-white/10" type="button" aria-label="Start call">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-slate-200"><path d="M22 16.92A7 7 0 0 1 16.92 22C9.17 22 2 14.83 2 7.08A7 7 0 0 1 7.08 2L10 4v4L7 9a12.29 12.29 0 0 0 8 8l1-3h4Z" class=""></path></svg>
</button>
<button class="p-2 rounded-lg bg-white/5 ring-1 ring-white/10 hover:bg-white/10" type="button" aria-label="Settings">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-slate-200"><circle cx="12" cy="12" r="3" class=""></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9A1.65 1.65 0 0 0 10 3.09V3a2 2 0 1 1 4 0v.09A1.65 1.65 0 0 0 15 4.6a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c0 .66.26 1.3.73 1.77.47.47 1.11.73 1.77.73h.09a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z" class=""></path></svg>
</button>
</div>
</div>
<!-- Messages -->
<div id="messages" class="ring-1 ring-white/10 bg-white/5 rounded-xl p-4 space-y-4 max-h-[340px] overflow-y-auto scroll-smooth">
<div class="flex items-start gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a7a0f0f5-9a19-4888-87bf-ff8780ff8008_320w.jpg" alt="avatar" class="h-8 w-8 ring-1 ring-white/10 object-cover rounded-full">
<div class="min-w-0">
<div class="flex items-center gap-2">
<p class="text-sm font-medium text-white font-sans" style="">Lina</p>
<span class="text-[11px] text-slate-400 font-sans" style="">09:28</span>
</div>
<div class="mt-1 inline-flex px-3 py-2 rounded-2xl bg-white/5 ring-1 ring-white/10">
<p class="text-sm text-slate-200 font-sans" style="">Morning! Finalizing the announcement copy now.</p>
</div>
</div>
</div>
<div class="flex items-start gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/3eba3b9c-9fcf-4da6-9371-116a96e97133_320w.jpg" alt="avatar" class="h-8 w-8 ring-1 ring-white/10 object-cover rounded-full">
<div class="min-w-0">
<div class="flex items-center gap-2">
<p class="text-sm font-medium text-white font-sans" style="">You</p>
<span class="text-[11px] text-slate-400 font-sans" style="">09:30</span>
</div>
<div class="mt-1 inline-flex px-3 py-2 rounded-2xl bg-gradient-to-br from-violet-500/20 to-indigo-500/20 ring-1 ring-white/10">
<p class="text-sm text-slate-100 font-sans" style="">Awesome. Can we add the new pricing table screenshot?</p>
</div>
</div>
</div>
<div class="flex items-start gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a7a0f0f5-9a19-4888-87bf-ff8780ff8008_320w.jpg" alt="avatar" class="h-8 w-8 ring-1 ring-white/10 object-cover rounded-full">
<div class="min-w-0">
<div class="flex items-center gap-2">
<p class="text-sm font-medium text-white font-sans" style="">Lina</p>
<span class="text-[11px] text-slate-400 font-sans" style="">09:31</span>
</div>
<div class="mt-1 space-y-2">
<div class="inline-flex px-3 py-2 rounded-2xl bg-white/5 ring-1 ring-white/10">
<p class="text-sm text-slate-200 font-sans" style="">Yep, dropping assets shortly.</p>
</div>
<div class="inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-white/5 ring-1 ring-white/10">
<span class="h-8 w-12 overflow-hidden ring-1 ring-white/10 bg-white/10 rounded-lg"></span>
<span class="h-8 w-12 rounded-lg overflow-hidden ring-1 ring-white/10 bg-white/10"></span>
<span class="text-xs text-slate-400 font-sans" style="">2 files</span>
</div>
</div>
</div>
</div>
</div>
<!-- Composer -->
<div class="ring-1 ring-white/10 bg-white/5 rounded-xl p-2">
<form id="chat-form" class="flex gap-2 items-start">
<button type="button" class="p-2 rounded-lg hover:bg-white/10 text-slate-200" aria-label="Add">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4.5 w-4.5"><path d="M12 5v14" class=""></path><path d="M5 12h14" class=""></path></svg>
</button>
<div class="flex-1">
<textarea id="chat-input" rows="1" placeholder="Message #product-launch" class="w-full resize-none outline-none placeholder:text-slate-500 text-sm text-slate-100 bg-transparent pt-2 pr-2 pb-2 pl-2"></textarea>
</div>
<div class="flex items-center gap-1">
<button type="button" class="p-2 rounded-lg hover:bg-white/10 text-slate-200" aria-label="Attach">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4.5 w-4.5"><path d="M13.5 8.5 5.9 16a3 3 0 1 0 4.24 4.24L18 12.38a5 5 0 0 0-7.07-7.07L5 11.24" class=""></path></svg>
</button>
<button type="submit" class="inline-flex gap-1.5 hover:opacity-95 text-xs font-medium text-white bg-gradient-to-br from-violet-500 to-indigo-600 rounded-lg pt-2 pr-3 pb-2 pl-3 items-center" style="">
Send
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5"><path d="m22 2-7 20-4-9-9-4Z" class=""></path><path d="M22 2 11 13" class=""></path></svg>
</button>
</div>
</form>
</div>
<!-- AI Recap -->
<div class="ring-1 ring-white/10 bg-white/5 rounded-xl p-4">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center gap-2">
<span class="inline-flex h-6 w-6 items-center justify-center ring-1 ring-violet-500/30 bg-violet-500/20 rounded-md">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-violet-300"><path d="m12 6 7 4-7 4-7-4 7-4Z" class=""></path><path d="m19 10v6l-7 4-7-4v-6" class=""></path></svg>
</span>
<h4 class="text-sm font-medium text-white tracking-tight font-sans" style="">AI Recap</h4>
</div>
<button class="text-xs text-violet-300 hover:text-violet-200 font-sans" type="button" style="">Refresh</button>
</div>
<ul class="space-y-1.5 text-[13px] text-slate-300 list-disc pl-5">
<li class="font-sans" style="">Announcement copy ready; assets incoming.</li>
<li class="font-sans" style="">Add updated pricing table screenshot to hero.</li>
<li class="font-sans" style="">QA pass after embedding assets.</li>
</ul>
</div>
</div>
</div>
</div>
<script>
(() => {
const form = document.getElementById('chat-form');
const input = document.getElementById('chat-input');
const messages = document.getElementById('messages');
function scrollToBottom() {
messages.scrollTop = messages.scrollHeight;
}
function addMessage(text, who = 'You') {
const row = document.createElement('div');
row.className = 'flex items-start gap-3';
const avatar = who === 'You' ? 'https://i.pravatar.cc/100?img=12' : 'https://i.pravatar.cc/100?img=59';
row.innerHTML = `
<img src="https://images.unsplash.com/photo-1621619856624-42fd193a0661?w=1080&q=80" alt="avatar" class="h-8 w-8 rounded-full ring-1 ring-white/10">
<div class="min-w-0">
<div class="flex items-center gap-2">
<p class="text-sm font-medium text-white">${who}</p>
<span class="text-[11px] text-slate-400">${new Date().toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'})}</span>
</div>
<div class="mt-1 inline-flex px-3 py-2 rounded-2xl ${who === 'You' ? 'bg-gradient-to-br from-violet-500/20 to-indigo-500/20' : 'bg-white/5'} ring-1 ring-white/10">
<p class="text-sm ${who === 'You' ? 'text-slate-100' : 'text-slate-200'}">${text}</p>
</div>
</div>
`;
messages.appendChild(row);
scrollToBottom();
}
form?.addEventListener('submit', (e) => {
e.preventDefault();
const value = (input?.value || '').trim();
if (!value) return;
addMessage(value, 'You');
input.value = '';
setTimeout(() => addMessage('Noted! I’ll update the deck and ping you when ready.', 'Lina'), 900);
});
// Auto-expand textarea rows
input?.addEventListener('input', () => {
input.style.height = 'auto';
input.style.height = Math.min(input.scrollHeight, 120) + 'px';
});
})();
</script>
</section>
</div>
</div>
</section>