@page "/docs/introduction"
@namespace Lumeo.Docs.Pages.Docs

<PageTitle>Introduction — Lumeo</PageTitle>

<!-- ======================= HERO ======================= -->
<section class="relative overflow-hidden">
    <!-- Subtle grid pattern background -->
    <div class="absolute inset-0 bg-[linear-gradient(to_right,hsl(var(--border))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--border))_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_110%)] pointer-events-none opacity-50"></div>

    <Container MaxWidth="4xl" Class="relative px-4 py-20">
        <BlurFade DelayMs="0">
            <Stack Gap="6" Class="items-center text-center">
                <Flex Inline="true" Align="center" Gap="2" Class="rounded-full border border-border/60 bg-background/80 px-3 py-1 text-xs font-medium text-muted-foreground backdrop-blur-sm">
                    <Badge Variant="Badge.BadgeVariant.Default" Class="h-4 px-1.5 text-[10px] leading-none">Getting started</Badge>
                    <Lumeo.Text As="span">You can ship in about 60 seconds.</Lumeo.Text>
                </Flex>

                <Heading Level="1" Class="text-4xl sm:text-5xl font-bold tracking-tight leading-[1.05] max-w-3xl">
                    Welcome to <Lumeo.Text As="span" Class="text-primary">Lumeo</Lumeo.Text>.
                </Heading>

                <div class="max-w-2xl">
                    <TextReveal Text="A Blazor component library inspired by shadcn/ui — beautifully designed, accessible, and composable."
                                Class="block text-base sm:text-lg text-muted-foreground leading-relaxed" />
                </div>

                <!-- Pill badges -->
                <Flex Gap="2" Wrap="true" Justify="center" Class="pt-1">
                    @foreach (var pill in new[] { ("Zap", "WASM"), ("ServerCog", "Server"), ("Code", ".NET 10"), ("Package", "568 KB core"), ("ShieldCheck", "MIT") })
                    {
                        <span class="inline-flex items-center gap-1.5 rounded-full border border-border/40 bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
                            <DynamicIcon Name="@pill.Item1" Class="h-3 w-3 text-primary" />
                            @pill.Item2
                        </span>
                    }
                </Flex>

                <!-- Install command wrapped in BorderBeam -->
                <Stack Align="center" Gap="2" Class="pt-3">
                    <BorderBeam DurationMs="6000" Class="inline-block">
                        <Flex Align="center" Gap="0" Class="rounded-lg border border-border/40 bg-muted/30 pl-4 pr-2 py-2 font-mono text-xs text-foreground backdrop-blur-sm">
                            <Lumeo.Text As="span" Color="muted" Class="mr-2 select-none">$</Lumeo.Text>
                            <Lumeo.Text As="span" Class="whitespace-nowrap">dotnet add package Lumeo</Lumeo.Text>
                        </Flex>
                    </BorderBeam>
                    <Lumeo.Text Size="xs" Color="muted">Core package (~568 KB). Add satellite packages for Charts, DataGrid, Editor, Scheduler, or Gantt as needed.</Lumeo.Text>
                </Stack>
            </Stack>
        </BlurFade>
    </Container>
</section>

<Separator />


<!-- ======================= BODY ======================= -->
<Container MaxWidth="3xl" Class="px-4 py-16">
<Stack Gap="14">

    <!-- ---------- Section: Introduction ---------- -->
    <BlurFade DelayMs="0">
        <Stack Gap="5">
            <Flex Align="center" Gap="3">
                <div class="flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 text-primary font-semibold text-sm shrink-0">
                    <DynamicIcon Name="Sparkles" Class="h-4 w-4" />
                </div>
                <Heading Level="2" Class="text-2xl font-semibold tracking-tight">What Lumeo is</Heading>
            </Flex>
            <Stack Gap="4" Class="ml-12">
                <Lumeo.Text Size="base" Color="muted" Leading="relaxed">
                    Lumeo is a Blazor component library inspired by <Lumeo.Link Href="https://ui.shadcn.com" Class="text-foreground underline underline-offset-4 hover:text-muted-foreground transition-colors">shadcn/ui</Lumeo.Link>,
                    bringing the same philosophy of beautifully designed, accessible, and composable components to the .NET ecosystem.
                    Built on top of Tailwind CSS v4 and targeting .NET 10, Lumeo gives you a complete set of UI primitives that
                    you own and control — no black-box overrides, no style collisions.
                </Lumeo.Text>
                <Lumeo.Text Size="base" Color="muted" Leading="relaxed">
                    Every component is designed with accessibility and developer experience in mind. Components are fully
                    themeable via CSS variables, work seamlessly in both light and dark mode, and expose a consistent
                    parameter API so you can drop them into any Blazor Server or WebAssembly project.
                </Lumeo.Text>
            </Stack>
        </Stack>
    </BlurFade>

    <Separator />

    <!-- ---------- Section: Design philosophy ---------- -->
    <BlurFade DelayMs="0">
        <Stack Gap="5">
            <Flex Align="center" Gap="3">
                <div class="flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 text-primary font-semibold text-sm shrink-0">
                    <DynamicIcon Name="Compass" Class="h-4 w-4" />
                </div>
                <Heading Level="2" Class="text-2xl font-semibold tracking-tight">Design philosophy</Heading>
            </Flex>
            <Stack Gap="4" Class="ml-12">
                <Lumeo.Text Size="base" Color="muted" Leading="relaxed">
                    Lumeo follows shadcn/ui's naming style rather than the prefixed approach you see in MudBlazor
                    (<code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">&lt;MudCard&gt;</code>) or Ant Design Blazor
                    (<code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">&lt;AntCard&gt;</code>). Components are unprefixed —
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">&lt;Card&gt;</code>,
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">&lt;Dialog&gt;</code>,
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">&lt;Button&gt;</code> — and the library uses C#'s
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">@@namespace Lumeo</code> plus a global using to keep markup clean.
                </Lumeo.Text>
                <Lumeo.Text Size="base" Color="muted" Leading="relaxed">
                    This reads like native HTML, matches the shadcn aesthetic the library is inspired by, and keeps your
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">.razor</code> files scannable. If a BCL type
                    collides (e.g. <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Text</code>,
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Link</code>) you can always fully qualify with
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Lumeo.Text</code> — the same pattern you'll see throughout these docs.
                </Lumeo.Text>

                <Heading Level="3" Size="base" Class="pt-2">Slot naming — the <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Content</code> suffix</Heading>
                <Lumeo.Text Size="base" Color="muted" Leading="relaxed">
                    Because names are unprefixed, a <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">RenderFragment</code>
                    slot named <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Icon</code> would shadow the
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">&lt;Icon&gt;</code> component inside its own body. The convention
                    is simple: <Lumeo.Text As="span" Weight="medium" Class="text-foreground">when a slot name would collide with a component name,
                    suffix the slot with <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Content</code></Lumeo.Text>.
                </Lumeo.Text>
                <Lumeo.Text Size="base" Color="muted" Leading="relaxed">
                    Starting in v1.6.0, <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Icon</code> and
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Label</code> slots have been renamed to
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">IconContent</code> and
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">LabelContent</code> across ten components:
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Alert</code>,
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Badge</code>,
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">EmptyState</code>,
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Rating</code>,
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Result</code>,
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Segmented</code>,
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">SidebarMenuButton</code>,
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">StepsItem</code>,
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">TabsTrigger</code>, and
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">TimelineItem</code>. The old names remain as
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">[Obsolete]</code> aliases — existing code keeps working with
                    a compile-time warning, and the aliases are removed in 2.0.
                </Lumeo.Text>

                <Alert Variant="Alert.AlertVariant.Info" Title="Naming tip" ShowIcon="true">
                    Other slot names don't collide and stay as-is —
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">ChildContent</code>,
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">HeaderContent</code>,
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">EmptyContent</code>,
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">LoadingTemplate</code>,
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">TriggerContent</code>,
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">ToolbarContent</code>,
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Actions</code>,
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Extra</code>,
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Leading</code>,
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Trailing</code>,
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Prefix</code>,
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Suffix</code>,
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">LeftIcon</code>, and
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">RightIcon</code>.
                </Alert>
            </Stack>
        </Stack>
    </BlurFade>

    <Separator />

    <!-- ---------- Section: Installation ---------- -->
    <BlurFade DelayMs="0">
        <Stack Gap="6">
            <Flex Align="center" Gap="3">
                <div class="flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 text-primary font-semibold text-sm shrink-0">
                    <DynamicIcon Name="Rocket" Class="h-4 w-4" />
                </div>
                <Heading Level="2" Class="text-2xl font-semibold tracking-tight">Installation</Heading>
            </Flex>
            <Lumeo.Text Size="base" Color="muted" Leading="relaxed" Class="ml-12">
                Install the NuGet package into your Blazor project:
            </Lumeo.Text>

            <!-- Step 1 -->
            <Stack Gap="3" Class="ml-12">
                <Flex Align="center" Gap="2">
                    <span class="flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-semibold">1</span>
                    <Heading Level="3" Size="base">Add the packages</Heading>
                </Flex>
                <Lumeo.Text Size="sm" Color="muted">
                    Lumeo 2.0 follows the DevExpress / Telerik / Microsoft.Extensions model: a small core package
                    plus opt-in satellites for heavy components. The core stays at ~568 KB instead of ~918 KB —
                    you only pay for what you use.
                </Lumeo.Text>
                <div class="rounded-lg overflow-hidden ring-1 ring-border/40" style="background-color: #0a0a0a;">
                    <div class="flex items-center justify-between px-3 py-2 border-b" style="border-color: rgba(255,255,255,0.08);">
                        <div class="flex items-center gap-1.5">
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #ff5f56;"></span>
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #ffbd2e;"></span>
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #27c93f;"></span>
                        </div>
                        <span class="font-mono text-[10px]" style="color: rgba(255,255,255,0.55);">bash</span>
                    </div>
<pre class="font-mono text-[12px] leading-relaxed whitespace-pre overflow-x-auto px-4 py-3 m-0" style="color: #e4e4e7;"><span style="color: #64748b;"># Core — always required (~110 components)</span>
<span style="color: #27c93f;">$</span> <span style="color: #60a5fa;">dotnet</span> add package <span style="color: #fbbf24;">Lumeo</span>

<span style="color: #64748b;"># Add satellites only for what you use:</span>
<span style="color: #27c93f;">$</span> <span style="color: #60a5fa;">dotnet</span> add package <span style="color: #fbbf24;">Lumeo.Charts</span>     <span style="color: #64748b;"># Chart and 30+ subtypes</span>
<span style="color: #27c93f;">$</span> <span style="color: #60a5fa;">dotnet</span> add package <span style="color: #fbbf24;">Lumeo.DataGrid</span>   <span style="color: #64748b;"># DataGrid, DataTable, Filter</span>
<span style="color: #27c93f;">$</span> <span style="color: #60a5fa;">dotnet</span> add package <span style="color: #fbbf24;">Lumeo.Editor</span>     <span style="color: #64748b;"># RichTextEditor</span>
<span style="color: #27c93f;">$</span> <span style="color: #60a5fa;">dotnet</span> add package <span style="color: #fbbf24;">Lumeo.Scheduler</span>  <span style="color: #64748b;"># Scheduler</span>
<span style="color: #27c93f;">$</span> <span style="color: #60a5fa;">dotnet</span> add package <span style="color: #fbbf24;">Lumeo.Gantt</span>      <span style="color: #64748b;"># Gantt</span></pre>
                </div>
                <Lumeo.Text Size="sm" Color="muted">
                    Or reference them directly in your <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">.csproj</code>.
                    All packages share one version (lockstep) — always upgrade them together:
                </Lumeo.Text>
                <div class="rounded-lg overflow-hidden ring-1 ring-border/40" style="background-color: #0a0a0a;">
                    <div class="flex items-center justify-between px-3 py-2 border-b" style="border-color: rgba(255,255,255,0.08);">
                        <div class="flex items-center gap-1.5">
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #ff5f56;"></span>
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #ffbd2e;"></span>
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #27c93f;"></span>
                        </div>
                        <span class="font-mono text-[10px]" style="color: rgba(255,255,255,0.55);">.csproj</span>
                    </div>
<pre class="font-mono text-[12px] leading-relaxed whitespace-pre overflow-x-auto px-4 py-3 m-0" style="color: #e4e4e7;"><span style="color: #94a3b8;">&lt;</span><span style="color: #60a5fa;">ItemGroup</span><span style="color: #94a3b8;">&gt;</span>
  <span style="color: #94a3b8;">&lt;</span><span style="color: #60a5fa;">PackageReference</span> <span style="color: #fbbf24;">Include</span>=<span style="color: #86efac;">"Lumeo"</span>            <span style="color: #fbbf24;">Version</span>=<span style="color: #86efac;">"2.0.0-rc.38"</span> <span style="color: #94a3b8;">/&gt;</span>
  <span style="color: #64748b;">&lt;!-- add only the satellites you need: --&gt;</span>
  <span style="color: #94a3b8;">&lt;</span><span style="color: #60a5fa;">PackageReference</span> <span style="color: #fbbf24;">Include</span>=<span style="color: #86efac;">"Lumeo.Charts"</span>    <span style="color: #fbbf24;">Version</span>=<span style="color: #86efac;">"2.0.0-rc.38"</span> <span style="color: #94a3b8;">/&gt;</span>
  <span style="color: #94a3b8;">&lt;</span><span style="color: #60a5fa;">PackageReference</span> <span style="color: #fbbf24;">Include</span>=<span style="color: #86efac;">"Lumeo.DataGrid"</span>  <span style="color: #fbbf24;">Version</span>=<span style="color: #86efac;">"2.0.0-rc.38"</span> <span style="color: #94a3b8;">/&gt;</span>
  <span style="color: #94a3b8;">&lt;</span><span style="color: #60a5fa;">PackageReference</span> <span style="color: #fbbf24;">Include</span>=<span style="color: #86efac;">"Lumeo.Editor"</span>    <span style="color: #fbbf24;">Version</span>=<span style="color: #86efac;">"2.0.0-rc.38"</span> <span style="color: #94a3b8;">/&gt;</span>
  <span style="color: #94a3b8;">&lt;</span><span style="color: #60a5fa;">PackageReference</span> <span style="color: #fbbf24;">Include</span>=<span style="color: #86efac;">"Lumeo.Scheduler"</span> <span style="color: #fbbf24;">Version</span>=<span style="color: #86efac;">"2.0.0-rc.38"</span> <span style="color: #94a3b8;">/&gt;</span>
  <span style="color: #94a3b8;">&lt;</span><span style="color: #60a5fa;">PackageReference</span> <span style="color: #fbbf24;">Include</span>=<span style="color: #86efac;">"Lumeo.Gantt"</span>     <span style="color: #fbbf24;">Version</span>=<span style="color: #86efac;">"2.0.0-rc.38"</span> <span style="color: #94a3b8;">/&gt;</span>
  <span style="color: #94a3b8;">&lt;</span><span style="color: #60a5fa;">PackageReference</span> <span style="color: #fbbf24;">Include</span>=<span style="color: #86efac;">"Lumeo.Motion"</span>    <span style="color: #fbbf24;">Version</span>=<span style="color: #86efac;">"2.0.0-rc.38"</span> <span style="color: #94a3b8;">/&gt;</span>
<span style="color: #94a3b8;">&lt;/</span><span style="color: #60a5fa;">ItemGroup</span><span style="color: #94a3b8;">&gt;</span></pre>
                </div>
                <Alert Variant="Alert.AlertVariant.Info" Title="No extra namespace imports needed" ShowIcon="true">
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">@@using Lumeo</code> already covers satellite components — no extra
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">@@using</code> directives are required. The
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">lumeo add &lt;component&gt;</code> CLI also detects which satellite a component belongs to
                    and prompts to install it if it isn't referenced yet.
                </Alert>
            </Stack>

            <!-- Step 2 -->
            <Stack Gap="3" Class="ml-12">
                <Flex Align="center" Gap="2">
                    <span class="flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-semibold">2</span>
                    <Heading Level="3" Size="base">Register services</Heading>
                </Flex>
                <Lumeo.Text Size="sm" Color="muted">
                    In your <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Program.cs</code>, register the Lumeo services.
                    This registers <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">ToastService</code>,
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">OverlayService</code>,
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">ThemeService</code>,
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">KeyboardShortcutService</code>, and
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">ComponentInteropService</code>:
                </Lumeo.Text>
                <div class="rounded-lg overflow-hidden ring-1 ring-border/40" style="background-color: #0a0a0a;">
                    <div class="flex items-center justify-between px-3 py-2 border-b" style="border-color: rgba(255,255,255,0.08);">
                        <div class="flex items-center gap-1.5">
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #ff5f56;"></span>
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #ffbd2e;"></span>
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #27c93f;"></span>
                        </div>
                        <span class="font-mono text-[10px]" style="color: rgba(255,255,255,0.55);">Program.cs</span>
                    </div>
<pre class="font-mono text-[12px] leading-relaxed whitespace-pre overflow-x-auto px-4 py-3 m-0" style="color: #e4e4e7;">builder.Services.<span style="color: #a78bfa;">AddLumeo</span>();</pre>
                </div>
            </Stack>

            <!-- Step 3 -->
            <Stack Gap="3" Class="ml-12">
                <Flex Align="center" Gap="2">
                    <span class="flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-semibold">3</span>
                    <Heading Level="3" Size="base">Add global using</Heading>
                </Flex>
                <Lumeo.Text Size="sm" Color="muted">
                    Add the namespace to your <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">_Imports.razor</code> so components are available everywhere:
                </Lumeo.Text>
                <div class="rounded-lg overflow-hidden ring-1 ring-border/40" style="background-color: #0a0a0a;">
                    <div class="flex items-center justify-between px-3 py-2 border-b" style="border-color: rgba(255,255,255,0.08);">
                        <div class="flex items-center gap-1.5">
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #ff5f56;"></span>
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #ffbd2e;"></span>
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #27c93f;"></span>
                        </div>
                        <span class="font-mono text-[10px]" style="color: rgba(255,255,255,0.55);">_Imports.razor</span>
                    </div>
<pre class="font-mono text-[12px] leading-relaxed whitespace-pre overflow-x-auto px-4 py-3 m-0" style="color: #e4e4e7;"><span style="color: #a78bfa;">@@using</span> Lumeo
<span style="color: #a78bfa;">@@using</span> Lumeo.Services</pre>
                </div>
            </Stack>

            <!-- Step 4 -->
            <Stack Gap="3" Class="ml-12">
                <Flex Align="center" Gap="2">
                    <span class="flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-semibold">4</span>
                    <Heading Level="3" Size="base">Add providers to your layout</Heading>
                </Flex>
                <Lumeo.Text Size="sm" Color="muted">
                    Add <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">&lt;ToastProvider /&gt;</code> and
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">&lt;OverlayProvider /&gt;</code> to your
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">MainLayout.razor</code> so toast notifications and programmatic overlays work:
                </Lumeo.Text>
                <div class="rounded-lg overflow-hidden ring-1 ring-border/40" style="background-color: #0a0a0a;">
                    <div class="flex items-center justify-between px-3 py-2 border-b" style="border-color: rgba(255,255,255,0.08);">
                        <div class="flex items-center gap-1.5">
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #ff5f56;"></span>
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #ffbd2e;"></span>
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #27c93f;"></span>
                        </div>
                        <span class="font-mono text-[10px]" style="color: rgba(255,255,255,0.55);">MainLayout.razor</span>
                    </div>
<pre class="font-mono text-[12px] leading-relaxed whitespace-pre overflow-x-auto px-4 py-3 m-0" style="color: #e4e4e7;"><span style="color: #94a3b8;">&lt;</span><span style="color: #60a5fa;">div</span> <span style="color: #fbbf24;">class</span>=<span style="color: #86efac;">"min-h-screen"</span><span style="color: #94a3b8;">&gt;</span>
    @@Body
    <span style="color: #94a3b8;">&lt;</span><span style="color: #a78bfa;">ToastProvider</span> <span style="color: #94a3b8;">/&gt;</span>
    <span style="color: #94a3b8;">&lt;</span><span style="color: #a78bfa;">OverlayProvider</span> <span style="color: #94a3b8;">/&gt;</span>
<span style="color: #94a3b8;">&lt;/</span><span style="color: #60a5fa;">div</span><span style="color: #94a3b8;">&gt;</span></pre>
                </div>
            </Stack>

            <!-- Step 5 -->
            <Stack Gap="3" Class="ml-12">
                <Flex Align="center" Gap="2">
                    <span class="flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-semibold">5</span>
                    <Heading Level="3" Size="base">Include styles and scripts</Heading>
                </Flex>
                <Lumeo.Text Size="sm" Color="muted">
                    Add the following to your
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">index.html</code> (WebAssembly) or
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">App.razor</code>/<code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">_Host.cshtml</code> (Server). Since
                    <Lumeo.Link Href="https://www.nuget.org/packages/Lumeo/1.3.0" Class="text-foreground underline underline-offset-4 hover:text-muted-foreground transition-colors">v1.3.0</Lumeo.Link>
                    the package ships a pre-compiled Tailwind utility stylesheet, so <Lumeo.Text As="span" Weight="medium" Class="text-foreground">no local Tailwind build is required</Lumeo.Text>:
                </Lumeo.Text>
                <div class="rounded-lg overflow-hidden ring-1 ring-border/40" style="background-color: #0a0a0a;">
                    <div class="flex items-center justify-between px-3 py-2 border-b" style="border-color: rgba(255,255,255,0.08);">
                        <div class="flex items-center gap-1.5">
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #ff5f56;"></span>
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #ffbd2e;"></span>
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #27c93f;"></span>
                        </div>
                        <span class="font-mono text-[10px]" style="color: rgba(255,255,255,0.55);">index.html / App.razor</span>
                    </div>
<pre class="font-mono text-[12px] leading-relaxed whitespace-pre overflow-x-auto px-4 py-3 m-0" style="color: #e4e4e7;"><span style="color: #64748b;">&lt;!-- Design tokens: CSS variables + keyframes --&gt;</span>
<span style="color: #94a3b8;">&lt;</span><span style="color: #60a5fa;">link</span> <span style="color: #fbbf24;">rel</span>=<span style="color: #86efac;">"stylesheet"</span> <span style="color: #fbbf24;">href</span>=<span style="color: #86efac;">"_content/Lumeo/css/lumeo.css"</span> <span style="color: #94a3b8;">/&gt;</span>

<span style="color: #64748b;">&lt;!-- Pre-compiled Tailwind utilities used by Lumeo components --&gt;</span>
<span style="color: #94a3b8;">&lt;</span><span style="color: #60a5fa;">link</span> <span style="color: #fbbf24;">rel</span>=<span style="color: #86efac;">"stylesheet"</span> <span style="color: #fbbf24;">href</span>=<span style="color: #86efac;">"_content/Lumeo/css/lumeo-utilities.css"</span> <span style="color: #94a3b8;">/&gt;</span>

<span style="color: #64748b;">&lt;!-- Theme bootstrap (prevents flash of unstyled content) --&gt;</span>
<span style="color: #94a3b8;">&lt;</span><span style="color: #60a5fa;">script</span> <span style="color: #fbbf24;">src</span>=<span style="color: #86efac;">"_content/Lumeo/js/theme.js"</span><span style="color: #94a3b8;">&gt;&lt;/</span><span style="color: #60a5fa;">script</span><span style="color: #94a3b8;">&gt;</span>

<span style="color: #64748b;">&lt;!-- Component interop (loaded on demand) --&gt;</span>
<span style="color: #94a3b8;">&lt;</span><span style="color: #60a5fa;">script</span> <span style="color: #fbbf24;">src</span>=<span style="color: #86efac;">"_content/Lumeo/js/components.js"</span> <span style="color: #fbbf24;">type</span>=<span style="color: #86efac;">"module"</span><span style="color: #94a3b8;">&gt;&lt;/</span><span style="color: #60a5fa;">script</span><span style="color: #94a3b8;">&gt;</span></pre>
                </div>
                <Alert Variant="Alert.AlertVariant.Info" Title="Using Tailwind in your own markup?" ShowIcon="true">
                    If you want to write utility classes yourself, keep your Tailwind v4 build and drop
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">lumeo-utilities.css</code> —
                    your own build will emit every utility Lumeo needs plus anything you use on top. See the
                    <Lumeo.Link Href="https://github.com/Brain2k-0005/Lumeo/blob/master/README.md" Class="text-foreground underline underline-offset-4 hover:text-muted-foreground transition-colors">README</Lumeo.Link>
                    for the <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">@@theme</code> / <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">@@source</code> snippet.
                </Alert>
            </Stack>

            <!-- Step 6 -->
            <Stack Gap="3" Class="ml-12">
                <Flex Align="center" Gap="2">
                    <span class="flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-semibold">6</span>
                    <Heading Level="3" Size="base">(Optional) Configure localization</Heading>
                </Flex>
                <Lumeo.Text Size="sm" Color="muted">
                    Built-in English and German translations ship in v1.2.0+. Select a culture via the standard ASP.NET
                    request-localization middleware, or override specific strings during
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">AddLumeo</code>:
                </Lumeo.Text>
                <div class="rounded-lg overflow-hidden ring-1 ring-border/40" style="background-color: #0a0a0a;">
                    <div class="flex items-center justify-between px-3 py-2 border-b" style="border-color: rgba(255,255,255,0.08);">
                        <div class="flex items-center gap-1.5">
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #ff5f56;"></span>
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #ffbd2e;"></span>
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #27c93f;"></span>
                        </div>
                        <span class="font-mono text-[10px]" style="color: rgba(255,255,255,0.55);">Program.cs</span>
                    </div>
<pre class="font-mono text-[12px] leading-relaxed whitespace-pre overflow-x-auto px-4 py-3 m-0" style="color: #e4e4e7;">builder.Services.<span style="color: #a78bfa;">AddLumeo</span>(opts =&gt;
{
    opts.<span style="color: #a78bfa;">Add</span>(<span style="color: #86efac;">"de"</span>, <span style="color: #86efac;">"DataGrid.NoData"</span>, <span style="color: #86efac;">"Keine Datensätze"</span>);
    opts.<span style="color: #a78bfa;">AddMany</span>(<span style="color: #86efac;">"fr"</span>, <span style="color: #60a5fa;">new</span> Dictionary&lt;<span style="color: #60a5fa;">string</span>, <span style="color: #60a5fa;">string</span>&gt;
    {
        [<span style="color: #86efac;">"DataGrid.NoData"</span>]     = <span style="color: #86efac;">"Aucune donnée"</span>,
        [<span style="color: #86efac;">"Pagination.Previous"</span>] = <span style="color: #86efac;">"Précédent"</span>,
    });
});</pre>
                </div>
            </Stack>
        </Stack>
    </BlurFade>

    <Separator />

    <!-- ---------- Section: Usage ---------- -->
    <BlurFade DelayMs="0">
        <Stack Gap="5">
            <Flex Align="center" Gap="3">
                <div class="flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 text-primary font-semibold text-sm shrink-0">
                    <DynamicIcon Name="Code2" Class="h-4 w-4" />
                </div>
                <Heading Level="2" Class="text-2xl font-semibold tracking-tight">Usage</Heading>
            </Flex>
            <Stack Gap="4" Class="ml-12">
                <Lumeo.Text Size="base" Color="muted" Leading="relaxed">
                    Once installed, you can start using components directly in your <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">.razor</code> files.
                    Here is a simple example using the <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Button</code> component:
                </Lumeo.Text>
                <div class="rounded-lg overflow-hidden ring-1 ring-border/40" style="background-color: #0a0a0a;">
                    <div class="flex items-center justify-between px-3 py-2 border-b" style="border-color: rgba(255,255,255,0.08);">
                        <div class="flex items-center gap-1.5">
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #ff5f56;"></span>
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #ffbd2e;"></span>
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #27c93f;"></span>
                        </div>
                        <span class="font-mono text-[10px]" style="color: rgba(255,255,255,0.55);">Page.razor</span>
                    </div>
<pre class="font-mono text-[12px] leading-relaxed whitespace-pre overflow-x-auto px-4 py-3 m-0" style="color: #e4e4e7;"><span style="color: #64748b;">&lt;!-- Default button --&gt;</span>
<span style="color: #94a3b8;">&lt;</span><span style="color: #a78bfa;">Button</span><span style="color: #94a3b8;">&gt;</span>Click me<span style="color: #94a3b8;">&lt;/</span><span style="color: #a78bfa;">Button</span><span style="color: #94a3b8;">&gt;</span>

<span style="color: #64748b;">&lt;!-- Variant and size --&gt;</span>
<span style="color: #94a3b8;">&lt;</span><span style="color: #a78bfa;">Button</span> <span style="color: #fbbf24;">Variant</span>=<span style="color: #86efac;">"Button.ButtonVariant.Outline"</span> <span style="color: #fbbf24;">Size</span>=<span style="color: #86efac;">"Button.ButtonSize.Sm"</span><span style="color: #94a3b8;">&gt;</span>
    Save changes
<span style="color: #94a3b8;">&lt;/</span><span style="color: #a78bfa;">Button</span><span style="color: #94a3b8;">&gt;</span>

<span style="color: #64748b;">&lt;!-- With click handler --&gt;</span>
<span style="color: #94a3b8;">&lt;</span><span style="color: #a78bfa;">Button</span> <span style="color: #fbbf24;">OnClick</span>=<span style="color: #86efac;">"HandleClick"</span><span style="color: #94a3b8;">&gt;</span>Submit<span style="color: #94a3b8;">&lt;/</span><span style="color: #a78bfa;">Button</span><span style="color: #94a3b8;">&gt;</span></pre>
                </div>
                <Alert Variant="Alert.AlertVariant.Default" Title="Every component accepts Class and AdditionalAttributes" ShowIcon="true">
                    Pass extra Tailwind classes with <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Class</code> and any remaining
                    HTML attributes are forwarded to the root element via
                    <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">AdditionalAttributes</code>.
                </Alert>
            </Stack>
        </Stack>
    </BlurFade>

    <Separator />

    <!-- ---------- Section: Theming ---------- -->
    <BlurFade DelayMs="0">
        <Stack Gap="5">
            <Flex Align="center" Gap="3">
                <div class="flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 text-primary font-semibold text-sm shrink-0">
                    <DynamicIcon Name="Palette" Class="h-4 w-4" />
                </div>
                <Heading Level="2" Class="text-2xl font-semibold tracking-tight">Theming</Heading>
            </Flex>
            <Stack Gap="4" Class="ml-12">
                <Lumeo.Text Size="base" Color="muted" Leading="relaxed">
                    Lumeo uses CSS custom properties (variables) for all colors and design tokens. There are no hardcoded hex
                    values or raw HSL colors anywhere in the component library. This means:
                </Lumeo.Text>
                <ul class="space-y-2 text-base text-muted-foreground list-none">
                    <li class="flex items-start gap-2">
                        <DynamicIcon Name="Check" Class="mt-1 h-4 w-4 text-primary shrink-0" />
                        <span>Dark mode works automatically via variable swaps — no <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">dark:</code> Tailwind prefixes needed.</span>
                    </li>
                    <li class="flex items-start gap-2">
                        <DynamicIcon Name="Check" Class="mt-1 h-4 w-4 text-primary shrink-0" />
                        <span>You can swap the entire palette by overriding a handful of CSS variables in your own stylesheet.</span>
                    </li>
                    <li class="flex items-start gap-2">
                        <DynamicIcon Name="Check" Class="mt-1 h-4 w-4 text-primary shrink-0" />
                        <span>Multiple built-in themes are available out of the box.</span>
                    </li>
                </ul>
                <Lumeo.Text Size="base" Color="muted" Leading="relaxed">
                    Open the <strong class="text-foreground font-medium">customizer panel</strong> in the top-right of any
                    docs page (the <Blazicon Svg="Lucide.SlidersHorizontal" class="inline h-3.5 w-3.5" /> icon, or press <kbd class="rounded border border-border/60 bg-muted px-1.5 py-0.5 text-[11px] font-mono">Ctrl&nbsp;+&nbsp;B</kbd>) to preview every built-in theme against the live page and copy the matching <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">lumeo apply --preset</code> command.
                </Lumeo.Text>
            </Stack>
        </Stack>
    </BlurFade>

    <Separator />

    <!-- ---------- Section: Services ---------- -->
    <BlurFade DelayMs="0">
        <Stack Gap="6">
            <Flex Align="center" Gap="3">
                <div class="flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 text-primary font-semibold text-sm shrink-0">
                    <DynamicIcon Name="ServerCog" Class="h-4 w-4" />
                </div>
                <Heading Level="2" Class="text-2xl font-semibold tracking-tight">Services</Heading>
            </Flex>
            <Lumeo.Text Size="base" Color="muted" Leading="relaxed" Class="ml-12">
                Lumeo ships with 5 scoped services that handle common app concerns. All are registered by
                <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">builder.Services.AddLumeo()</code> and can be injected anywhere with
                <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">@@inject</code>.
            </Lumeo.Text>

            <Grid Columns="2" Gap="4" Class="grid-cols-1 sm:grid-cols-2 ml-12">

                <Stack Gap="2" Class="rounded-xl border border-border/40 bg-card p-4 hover:border-border hover:-translate-y-0.5 hover:shadow-sm transition-all">
                    <Heading Level="3" Size="base">ToastService</Heading>
                    <Lumeo.Text Size="sm" Color="muted">
                        Show, dismiss, and update toast notifications from C# code. Supports variants (success, error, warning, info),
                        action buttons, persistent toasts, and async promise toasts.
                    </Lumeo.Text>
                    <Lumeo.Link Href="docs/services/toast" Class="text-sm text-primary underline underline-offset-4 hover:text-foreground transition-colors mt-auto">View docs →</Lumeo.Link>
                </Stack>

                <Stack Gap="2" Class="rounded-xl border border-border/40 bg-card p-4 hover:border-border hover:-translate-y-0.5 hover:shadow-sm transition-all">
                    <Heading Level="3" Size="base">OverlayService</Heading>
                    <Lumeo.Text Size="sm" Color="muted">
                        Open dialogs, sheets, drawers, and alert dialogs programmatically from code. Await results with
                        <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">ShowDialogAsync&lt;T&gt;()</code>.
                    </Lumeo.Text>
                    <Lumeo.Link Href="docs/services/overlay" Class="text-sm text-primary underline underline-offset-4 hover:text-foreground transition-colors mt-auto">View docs →</Lumeo.Link>
                </Stack>

                <Stack Gap="2" Class="rounded-xl border border-border/40 bg-card p-4 hover:border-border hover:-translate-y-0.5 hover:shadow-sm transition-all">
                    <Heading Level="3" Size="base">ThemeService</Heading>
                    <Lumeo.Text Size="sm" Color="muted">
                        Switch between light/dark/system mode, change color schemes at runtime, and listen for theme changes with events.
                    </Lumeo.Text>
                    <Lumeo.Link Href="docs/services/theme" Class="text-sm text-primary underline underline-offset-4 hover:text-foreground transition-colors mt-auto">View docs →</Lumeo.Link>
                </Stack>

                <Stack Gap="2" Class="rounded-xl border border-border/40 bg-card p-4 hover:border-border hover:-translate-y-0.5 hover:shadow-sm transition-all">
                    <Heading Level="3" Size="base" Class="break-all">KeyboardShortcutService</Heading>
                    <Lumeo.Text Size="sm" Color="muted">
                        Register global keyboard shortcuts like <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">ctrl+k</code> or
                        <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">ctrl+shift+p</code> from C# code. Auto-cleanup with IDisposable handles.
                    </Lumeo.Text>
                    <Lumeo.Link Href="docs/services/keyboard-shortcuts" Class="text-sm text-primary underline underline-offset-4 hover:text-foreground transition-colors mt-auto">View docs →</Lumeo.Link>
                </Stack>

                <Stack Gap="2" Class="rounded-xl border border-border/40 bg-card p-4 hover:border-border hover:-translate-y-0.5 hover:shadow-sm transition-all">
                    <Heading Level="3" Size="base" Class="break-all">ComponentInteropService</Heading>
                    <Lumeo.Text Size="sm" Color="muted">
                        Low-level JS interop helpers used by components: scroll locking, focus traps, click-outside detection, clipboard,
                        element positioning, and more. Useful for building custom components.
                    </Lumeo.Text>
                    <Lumeo.Link Href="docs/services/component-interop" Class="text-sm text-primary underline underline-offset-4 hover:text-foreground transition-colors mt-auto">View docs →</Lumeo.Link>
                </Stack>

            </Grid>
        </Stack>
    </BlurFade>

    <Separator />

    <!-- ---------- Section: Components ---------- -->
    <BlurFade DelayMs="0">
        <Stack Gap="6">
            <Flex Align="center" Gap="3">
                <div class="flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 text-primary font-semibold text-sm shrink-0">
                    <DynamicIcon Name="Blocks" Class="h-4 w-4" />
                </div>
                <Heading Level="2" Class="text-2xl font-semibold tracking-tight">Components</Heading>
            </Flex>
            <Lumeo.Text Size="base" Color="muted" Leading="relaxed" Class="ml-12">
                Lumeo ships with 75+ components organized into nine categories:
            </Lumeo.Text>

            <Grid Columns="2" Gap="4" Class="grid-cols-1 sm:grid-cols-2 ml-12">

                <Stack Gap="2" Class="rounded-xl border border-border/40 bg-card p-4 hover:border-border hover:-translate-y-0.5 hover:shadow-sm transition-all">
                    <Heading Level="3" Size="base">Form</Heading>
                    <Lumeo.Text Size="sm" Color="muted">
                        Button, Cascader, Checkbox, Color Picker, Combobox, Date Picker, Date Time Picker, File Upload,
                        Filter, Form, Input, Label, Mention, Number Input, OTP Input, Radio Group, Segmented, Select,
                        Slider, Switch, Tag Input, Textarea, Time Picker, Toggle, Toggle Group.
                    </Lumeo.Text>
                    <Lumeo.Link Href="components/button" Class="text-sm text-primary underline underline-offset-4 hover:text-foreground transition-colors mt-auto">Browse Form components →</Lumeo.Link>
                </Stack>

                <Stack Gap="2" Class="rounded-xl border border-border/40 bg-card p-4 hover:border-border hover:-translate-y-0.5 hover:shadow-sm transition-all">
                    <Heading Level="3" Size="base">Layout</Heading>
                    <Lumeo.Text Size="sm" Color="muted">
                        Accordion, Aspect Ratio, Calendar, Card, Carousel, Collapsible, Resizable, Scroll Area,
                        Separator, Tabs.
                    </Lumeo.Text>
                    <Lumeo.Link Href="components/card" Class="text-sm text-primary underline underline-offset-4 hover:text-foreground transition-colors mt-auto">Browse Layout components →</Lumeo.Link>
                </Stack>

                <Stack Gap="2" Class="rounded-xl border border-border/40 bg-card p-4 hover:border-border hover:-translate-y-0.5 hover:shadow-sm transition-all">
                    <Heading Level="3" Size="base">Feedback</Heading>
                    <Lumeo.Text Size="sm" Color="muted">
                        Alert, Badge, Empty State, Progress, Result, Skeleton, Spinner, Toast.
                    </Lumeo.Text>
                    <Lumeo.Link Href="components/alert" Class="text-sm text-primary underline underline-offset-4 hover:text-foreground transition-colors mt-auto">Browse Feedback components →</Lumeo.Link>
                </Stack>

                <Stack Gap="2" Class="rounded-xl border border-border/40 bg-card p-4 hover:border-border hover:-translate-y-0.5 hover:shadow-sm transition-all">
                    <Heading Level="3" Size="base">Overlay</Heading>
                    <Lumeo.Text Size="sm" Color="muted">
                        Alert Dialog, Command, Context Menu, Dialog, Drawer, Dropdown Menu, Hover Card, Popover,
                        Sheet, Tooltip, Tour.
                    </Lumeo.Text>
                    <Lumeo.Link Href="components/dialog" Class="text-sm text-primary underline underline-offset-4 hover:text-foreground transition-colors mt-auto">Browse Overlay components →</Lumeo.Link>
                </Stack>

                <Stack Gap="2" Class="rounded-xl border border-border/40 bg-card p-4 hover:border-border hover:-translate-y-0.5 hover:shadow-sm transition-all">
                    <Heading Level="3" Size="base">Navigation</Heading>
                    <Lumeo.Text Size="sm" Color="muted">
                        Breadcrumb, Menubar, Navigation Menu, Pagination, Sidebar, Steps.
                    </Lumeo.Text>
                    <Lumeo.Link Href="components/breadcrumb" Class="text-sm text-primary underline underline-offset-4 hover:text-foreground transition-colors mt-auto">Browse Navigation components →</Lumeo.Link>
                </Stack>

                <Stack Gap="2" Class="rounded-xl border border-border/40 bg-card p-4 hover:border-border hover:-translate-y-0.5 hover:shadow-sm transition-all">
                    <Heading Level="3" Size="base">Data Display</Heading>
                    <Lumeo.Text Size="sm" Color="muted">
                        Avatar, Chart, Data Grid, Data Table, Descriptions, Image, Rating, Statistic, Table, Timeline.
                    </Lumeo.Text>
                    <Lumeo.Link Href="components/table" Class="text-sm text-primary underline underline-offset-4 hover:text-foreground transition-colors mt-auto">Browse Data Display components →</Lumeo.Link>
                </Stack>

                <Stack Gap="2" Class="rounded-xl border border-border/40 bg-card p-4 hover:border-border hover:-translate-y-0.5 hover:shadow-sm transition-all">
                    <Heading Level="3" Size="base">Utility</Heading>
                    <Lumeo.Text Size="sm" Color="muted">
                        Affix, Back To Top, Kbd, Scrollspy, Transfer, Tree View, Watermark.
                    </Lumeo.Text>
                    <Lumeo.Link Href="components/kbd" Class="text-sm text-primary underline underline-offset-4 hover:text-foreground transition-colors mt-auto">Browse Utility components →</Lumeo.Link>
                </Stack>

                <Stack Gap="2" Class="rounded-xl border border-border/40 bg-card p-4 hover:border-border hover:-translate-y-0.5 hover:shadow-sm transition-all">
                    <Heading Level="3" Size="base">Theme</Heading>
                    <Lumeo.Text Size="sm" Color="muted">
                        Theme Switcher, Theme Toggle.
                    </Lumeo.Text>
                    <Lumeo.Link Href="components/theme-switcher" Class="text-sm text-primary underline underline-offset-4 hover:text-foreground transition-colors mt-auto">Browse Theme components →</Lumeo.Link>
                </Stack>

            </Grid>
        </Stack>
    </BlurFade>

</Stack>
</Container>

<Separator />


<!-- ======================= FINAL CTA ======================= -->
<section class="py-20">
    <Container MaxWidth="4xl" Class="px-4">
        <div class="relative overflow-hidden rounded-2xl border border-border/60 bg-card p-10 sm:p-14">
            <Sparkles Count="14" Class="absolute inset-0 pointer-events-none">
                <span></span>
            </Sparkles>
            <div class="relative z-10">
                <BlurFade DelayMs="0">
                    <Stack Gap="4" Class="text-center items-center">
                        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary">
                            <DynamicIcon Name="Rocket" Class="h-5 w-5" />
                        </div>
                        <Heading Level="2" Class="text-3xl sm:text-4xl font-bold tracking-tight max-w-2xl">
                            You're ready to build.
                        </Heading>
                        <Lumeo.Text Color="muted" Class="max-w-xl text-base leading-relaxed">
                            Services registered, stylesheets linked, providers mounted. Time to start composing.
                        </Lumeo.Text>
                        <Flex Gap="3" Wrap="true" Justify="center" Class="pt-2">
                            <Lumeo.Link Href="components/button" Class="no-underline">
                                <ShimmerButton Size="Button.ButtonSize.Lg" Class="rounded-lg">
                                    Browse components
                                    <DynamicIcon Name="ArrowRight" Class="h-4 w-4" />
                                </ShimmerButton>
                            </Lumeo.Link>
                            <Lumeo.Link Href="blocks" Class="inline-flex h-10 items-center gap-2 justify-center rounded-lg border border-border/60 bg-background px-6 text-sm font-semibold text-foreground hover:bg-accent hover:text-accent-foreground transition-colors no-underline">
                                <DynamicIcon Name="LayoutGrid" Class="h-4 w-4" />
                                See blocks
                            </Lumeo.Link>
                        </Flex>
                    </Stack>
                </BlurFade>
            </div>
        </div>
    </Container>
</section>
