efaaf16f60
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
- Refactored metadata for contacts, administration, and Ulticards pages to utilize dynamic app names and descriptions. - Introduced new product pages for Ultiai, Ultical, Ulticards, Ultidrive, Ultimail, and Ultimeet with appropriate metadata. - Enhanced layout components to ensure consistent styling and functionality across new product sections. - Updated various components to replace hardcoded labels with dynamic references to improve maintainability and consistency.
111 lines
5.3 KiB
TypeScript
111 lines
5.3 KiB
TypeScript
"use client"
|
|
|
|
import { Icon } from "@iconify/react"
|
|
|
|
const ACCENT = "#34A853"
|
|
|
|
const MESSAGES = [
|
|
{ name: "Léa Fontaine", color: "#34A853", text: "Je partage le planning du sprint." },
|
|
{ name: "Vincent Morel", color: "#4285F4", text: "Parfait, on valide la date de jeudi ?" },
|
|
] as const
|
|
|
|
const REACTIONS = ["👍", "🎉", "👏", "❤️"] as const
|
|
|
|
const TRANSCRIPT = [
|
|
{ speaker: "Léa", text: "On cale la démo client pour jeudi 14 h." },
|
|
{ speaker: "Vincent", text: "Je prépare les slides d'ici mercredi." },
|
|
] as const
|
|
|
|
/** Aperçu statique des outils en réunion UltiMeet — partage d'écran, chat, transcription IA. */
|
|
export function UltimeetCollabDemo() {
|
|
return (
|
|
<div className="flex flex-col gap-3">
|
|
<div className="landing-glass-strong overflow-hidden rounded-2xl shadow-[0_32px_70px_-36px_rgba(30,40,90,0.45)]">
|
|
<div className="grid grid-cols-1 sm:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)]">
|
|
<div className="relative flex min-h-[12rem] flex-col border-b border-[var(--landing-line)] bg-[var(--landing-bg)] sm:border-b-0 sm:border-r">
|
|
<div className="flex items-center gap-2 px-3 py-2 text-[11px] font-medium text-[var(--landing-muted)]">
|
|
<span className="flex items-center gap-1.5 rounded-full bg-[#EA4335]/15 px-2 py-0.5 text-[#EA4335]">
|
|
<span className="size-1.5 rounded-full bg-[#EA4335]" aria-hidden />
|
|
REC
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<Icon icon="mdi:monitor-share" className="size-3.5" style={{ color: ACCENT }} aria-hidden />
|
|
Léa partage son écran
|
|
</span>
|
|
</div>
|
|
<div className="relative mx-3 mb-3 flex-1 overflow-hidden rounded-xl border border-[var(--landing-line)] bg-[var(--landing-chip)]/40">
|
|
<div className="flex flex-col gap-2 p-3">
|
|
<div className="h-2.5 w-1/3 rounded-full bg-[var(--landing-line)]" />
|
|
<div className="h-2 w-3/4 rounded-full bg-[var(--landing-line)]/70" />
|
|
<div className="h-2 w-2/3 rounded-full bg-[var(--landing-line)]/70" />
|
|
<div className="mt-2 grid grid-cols-3 gap-2">
|
|
<div className="h-10 rounded-lg" style={{ backgroundColor: `${ACCENT}33` }} />
|
|
<div className="h-10 rounded-lg bg-[#4285F4]/25" />
|
|
<div className="h-10 rounded-lg bg-[#FBBC04]/25" />
|
|
</div>
|
|
</div>
|
|
<div className="pointer-events-none absolute bottom-2 right-2 flex items-end gap-1 text-lg">
|
|
{REACTIONS.slice(0, 2).map((emoji) => (
|
|
<span key={emoji} aria-hidden>
|
|
{emoji}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col">
|
|
<div className="flex items-center gap-2 border-b border-[var(--landing-line)] px-3 py-2 text-xs font-semibold">
|
|
<Icon icon="mdi:message-text-outline" className="size-4" style={{ color: ACCENT }} aria-hidden />
|
|
Chat
|
|
<span className="ml-auto flex gap-1">
|
|
{REACTIONS.map((emoji) => (
|
|
<span key={emoji} className="text-sm" aria-hidden>
|
|
{emoji}
|
|
</span>
|
|
))}
|
|
</span>
|
|
</div>
|
|
|
|
<ul className="flex flex-1 flex-col gap-2.5 px-3 py-3">
|
|
{MESSAGES.map((message) => (
|
|
<li key={message.text} className="flex gap-2">
|
|
<span
|
|
className="mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full text-[10px] font-semibold text-white"
|
|
style={{ backgroundColor: message.color }}
|
|
aria-hidden
|
|
>
|
|
{message.name.charAt(0)}
|
|
</span>
|
|
<div className="min-w-0">
|
|
<p className="text-[11px] font-medium text-[var(--landing-muted)]">{message.name}</p>
|
|
<p className="text-xs text-[var(--landing-fg)]">{message.text}</p>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<div className="border-t border-[var(--landing-line)] bg-[var(--landing-chip)]/30 px-3 py-2.5">
|
|
<p className="mb-1.5 flex items-center gap-1.5 text-[10px] font-medium uppercase tracking-wide text-[var(--landing-muted)]">
|
|
<img src="/ultiai-mark.svg" alt="" className="size-3.5 object-contain" aria-hidden />
|
|
Transcription en direct · UltiAI
|
|
</p>
|
|
<ul className="flex flex-col gap-1">
|
|
{TRANSCRIPT.map((line) => (
|
|
<li key={line.text} className="text-[11px] leading-snug text-[var(--landing-muted)]">
|
|
<span className="font-semibold text-[var(--landing-fg)]">{line.speaker} :</span> {line.text}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p className="flex items-start gap-2 text-sm text-[var(--landing-muted)]">
|
|
<Icon icon="mdi:incognito" className="mt-0.5 size-4 shrink-0" aria-hidden />
|
|
Aperçu statique — partage d'écran, réactions et transcription IA, rien n'est enregistré.
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|