Загрузка...
Карточка "Организационная диаграмма" с CTA и списком функций. UI-компонент для отображения структуры, опций SSO, захвата домена и экспорта. Адаптивный дизайн.
<div class="relative ring-1 ring-white/5 bg-neutral-900/40 border-neutral-800/70 border rounded-3xl shadow-2xl backdrop-blur max-w-xl">
<!-- Subtle grid lines -->
<div class="pointer-events-none absolute inset-0 rounded-3xl [mask-image:radial-gradient(ellipse_at_center,black,transparent_70%)]">
<svg class="absolute inset-0 h-full w-full opacity-[0.08]" aria-hidden="true">
<defs>
<pattern id="grid" width="48" height="48" patternUnits="userSpaceOnUse">
<path d="M 48 0 L 0 0 0 48" fill="none" stroke="white" stroke-width="0.5"></path>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)"></rect>
</svg>
</div>
<div class="relative sm:p-6 lg:p-8 pt-5 pr-5 pb-5 pl-5">
<!-- Diagram -->
<div class="relative mx-auto max-w-2xl">
<!-- Vertical line -->
<div class="absolute left-1/2 top-6 -translate-x-1/2 h-[220px] sm:h-[230px]">
<div class="mx-auto h-full w-px bg-gradient-to-b from-neutral-700/60 via-neutral-700/30 to-neutral-700/60"></div>
</div>
<!-- Node: All Members -->
<div class="relative z-10 mx-auto w-full max-w-xl rounded-2xl border border-neutral-800/80 bg-neutral-900/70 px-4 py-3 sm:px-5 sm:py-4 shadow-lg">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2.5">
<span class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-indigo-500/15 ring-1 ring-indigo-500/30">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="users-round" class="lucide lucide-users-round h-3.5 w-3.5 text-indigo-300"><path d="M18 21a8 8 0 0 0-16 0"></path><circle cx="10" cy="8" r="5"></circle><path d="M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"></path></svg>
</span>
<span class="text-white font-medium">All members</span>
</div>
<!-- Connector dot (top) -->
<span class="absolute -top-3 left-1/2 -translate-x-1/2 h-2.5 w-2.5 rounded-full bg-neutral-800 ring-2 ring-neutral-700"></span>
</div>
<div class="mt-3 rounded-xl border border-neutral-800/80 bg-neutral-900/60 p-3">
<div class="flex items-center gap-2 text-neutral-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="mail" class="lucide lucide-mail h-3.5 w-3.5 text-neutral-400"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg>
<span class="text-sm">@nimbus.io</span>
</div>
<div class="mt-2 flex items-center gap-2 text-neutral-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="mail" class="lucide lucide-mail h-3.5 w-3.5 text-neutral-400"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg>
<span class="text-sm">@eng.nimbus.io</span>
</div>
<div class="mt-2 flex items-center gap-2 text-neutral-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="mail" class="lucide lucide-mail h-3.5 w-3.5 text-neutral-400"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg>
<span class="text-sm">@studio.nimbus.io</span>
</div>
</div>
<!-- Connector dot (bottom) -->
<span class="absolute -bottom-3 left-1/2 -translate-x-1/2 h-2.5 w-2.5 rounded-full bg-neutral-800 ring-2 ring-neutral-700"></span>
</div>
<!-- Node: Organization -->
<div class="relative z-10 mx-auto mt-14 w-full max-w-md rounded-2xl border border-neutral-800/80 bg-neutral-900/70 px-4 py-3 shadow-lg">
<div class="flex items-center gap-2.5">
<span class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-emerald-500/15 ring-1 ring-emerald-500/30">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="building-2" class="lucide lucide-building-2 h-3.5 w-3.5 text-emerald-300"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"></path><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"></path><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"></path><path d="M10 6h4"></path><path d="M10 10h4"></path><path d="M10 14h4"></path><path d="M10 18h4"></path></svg>
</span>
<div class="flex-1">
<p class="text-white font-medium">Nimbus Labs Organization</p>
<p class="text-[13px] text-neutral-400">SSO: SAML • SCIM Provisioning</p>
</div>
</div>
</div>
</div>
<!-- Footer content -->
<div class="mt-10 sm:mt-12 grid gap-4 sm:grid-cols-2">
<div class="flex items-start gap-3 rounded-2xl border border-neutral-800/80 bg-neutral-900/50 p-4">
<span class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-sky-500/15 ring-1 ring-sky-500/30">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="key-round" class="lucide lucide-key-round h-4 w-4 text-sky-300"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"></path><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"></circle></svg>
</span>
<div class="">
<p class="text-white font-medium">Single Sign-On</p>
<p class="text-sm text-neutral-400">Secure access with enforced login flows and session policies.</p>
</div>
</div>
<div class="flex items-start gap-3 rounded-2xl border border-neutral-800/80 bg-neutral-900/50 p-4">
<span class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-violet-500/15 ring-1 ring-violet-500/30">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="fingerprint" class="lucide lucide-fingerprint h-4 w-4 text-violet-300"><path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"></path><path d="M14 13.12c0 2.38 0 6.38-1 8.88"></path><path d="M17.29 21.02c.12-.6.43-2.3.5-3.02"></path><path d="M2 12a10 10 0 0 1 18-6"></path><path d="M2 16h.01"></path><path d="M21.8 16c.2-2 .131-5.354 0-6"></path><path d="M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2"></path><path d="M8.65 22c.21-.66.45-1.32.57-2"></path><path d="M9 6.8a6 6 0 0 1 9 5.2v2"></path></svg>
</span>
<div class="">
<p class="text-white font-medium">Domain Capture</p>
<p class="text-sm text-neutral-400">Automatically claim company domains and route users to the org.</p>
</div>
</div>
</div>
<!-- CTA -->
<div class="mt-8 flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3">
<div class="text-sm text-neutral-400">
Need a different name or brand? We can personalize this to your org.
</div>
<div class="flex gap-2">
<button class="inline-flex items-center justify-center rounded-lg bg-white text-neutral-900 px-3.5 py-2 text-sm font-medium tracking-tight hover:bg-neutral-100 active:bg-neutral-200 transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="wand-2" class="lucide lucide-wand-2 mr-2 h-4 w-4"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"></path><path d="m14 7 3 3"></path><path d="M5 6v4"></path><path d="M19 14v4"></path><path d="M10 2v2"></path><path d="M7 8H3"></path><path d="M21 16h-4"></path><path d="M11 3H9"></path></svg>
Customize copy
</button>
<button class="inline-flex items-center justify-center rounded-lg border border-neutral-800 bg-neutral-900/60 px-3.5 py-2 text-sm text-neutral-200 hover:bg-neutral-900 transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="download" class="lucide lucide-download mr-2 h-4 w-4"><path d="M12 15V3"></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><path d="m7 10 5 5 5-5"></path></svg>
Export asset
</button>
</div>
</div>
</div>
</div>