<div class="w-full max-w-3xl space-y-4">
    <BbBreadcrumb>
        <BbBreadcrumbList AutoSeparator>
            <BbBreadcrumbItem>
                <BbBreadcrumbLink Href="#">Home</BbBreadcrumbLink>
            </BbBreadcrumbItem>
            <BbBreadcrumbItem>
                <BbBreadcrumbLink Href="#">Projects</BbBreadcrumbLink>
            </BbBreadcrumbItem>
            <BbBreadcrumbItem>
                <BbBreadcrumbPage>Website Redesign</BbBreadcrumbPage>
            </BbBreadcrumbItem>
        </BbBreadcrumbList>
    </BbBreadcrumb>

    <div class="flex items-start justify-between gap-4">
        <div class="space-y-1">
            <h1 class="text-3xl font-bold tracking-tight">Website Redesign</h1>
            <p class="text-muted-foreground">Redesigning the company website with modern components and improved UX.</p>
        </div>
        <div class="flex items-center gap-2 shrink-0">
            <BbButton Variant="ButtonVariant.Outline">
                <!-- download icon SVG -->
                Export
            </BbButton>
            <BbButton>
                <!-- plus icon SVG -->
                New Task
            </BbButton>
        </div>
    </div>

    <BbTabs DefaultValue="overview">
        <BbTabsList>
            <BbTabsTrigger Value="overview">Overview</BbTabsTrigger>
            <BbTabsTrigger Value="tasks">Tasks</BbTabsTrigger>
            <BbTabsTrigger Value="settings">Settings</BbTabsTrigger>
        </BbTabsList>
    </BbTabs>

    <BbSeparator />
</div>