Blog Post

@props([])

{{-- Blog post page — composes marketing blocks around an inline article body built from primitives. --}}
<div class="min-h-screen bg-background text-foreground">
    <x-blocks.header-navbar brand="Northstar" cta="{{ __('Get started') }}" />

    <main>
        <article class="mx-auto max-w-3xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
            {{-- Category + title --}}
            <header class="text-center">
                <x-ui.badge variant="secondary">{{ __('Engineering') }}</x-ui.badge>

                <h1 class="mt-6 text-balance text-4xl font-bold tracking-tight sm:text-5xl">
                    {{ __('Designing a token-first UI system your whole team can ship on') }}
                </h1>

                {{-- Meta row --}}
                <div class="mt-8 flex flex-wrap items-center justify-center gap-x-4 gap-y-4 text-sm text-muted-foreground">
                    <div class="flex items-center gap-4">
                        <x-ui.avatar size="sm" fallback="MS" alt="{{ __('Mara Singh') }}" />
                        <span class="font-medium text-foreground">{{ __('Mara Singh') }}</span>
                    </div>
                    <x-ui.separator orientation="vertical" class="h-4" />
                    <time datetime="2026-06-15">{{ __('June 15, 2026') }}</time>
                    <x-ui.separator orientation="vertical" class="h-4" />
                    <span>{{ __('8 min read') }}</span>
                </div>
            </header>

            {{-- Hero image area --}}
            <figure class="mt-12">
                <div class="aspect-[16/9] w-full rounded-lg bg-muted" role="img" aria-label="{{ __('Article hero illustration') }}"></div>
                <figcaption class="mt-4 text-center text-sm text-muted-foreground">
                    {{ __('Semantic tokens flow from a single source of truth into every surface.') }}
                </figcaption>
            </figure>

            {{-- Article body --}}
            <div class="mt-12 space-y-6 text-sm leading-relaxed text-muted-foreground">
                <p>
                    {{ __('Most design systems start strong and drift within a quarter. A button gets a one-off shade here, a card borrows a hard-coded radius there, and before long the codebase carries a dozen near-identical components nobody trusts. The fix is rarely more components — it is fewer, sharper decisions encoded as tokens.') }}
                </p>
                <p>
                    {{ __('When colour, spacing, radius and motion live as named tokens instead of literal values, a theme change becomes a config edit rather than a search-and-replace marathon. Components stop owning appearance and start owning behaviour, which is exactly where their value lives.') }}
                </p>

                <h2 class="pt-6 text-2xl font-bold tracking-tight text-foreground">{{ __('Start with the smallest stable primitive') }}</h2>
                <p>
                    {{ __('Every robust system bottoms out in a handful of primitives — a button, a badge, an avatar, a separator. Get their data-slots, focus rings and dark-mode behaviour right once, and every block you compose inherits that quality for free. Skip this step and you will paper over the gaps in each new layout.') }}
                </p>

                <blockquote class="border-s-4 border-primary ps-6 text-2xl font-medium italic text-foreground">
                    {{ __('A design system is not a library of components. It is a set of agreements your team can ship on without re-litigating them.') }}
                </blockquote>

                <h2 class="pt-6 text-2xl font-bold tracking-tight text-foreground">{{ __('Compose, don\'t copy') }}</h2>
                <p>
                    {{ __('Once the primitives are solid, blocks are mostly arrangement. A pricing section is cards in a grid; a marketing page is blocks in an order. Because the appearance is delegated to tokens, you can drop the same block into a customer site or an admin surface and it adapts to its context automatically.') }}
                </p>
                <p>
                    {{ __('The payoff compounds. New contributors ship on-brand work on day one, audits get boring in the best way, and the system survives the redesign that kills most others.') }}
                </p>
            </div>

            {{-- Tags --}}
            <div class="mt-12 flex flex-wrap items-center gap-2">
                <span class="text-sm font-medium text-foreground">{{ __('Tagged') }}</span>
                <x-ui.badge variant="outline">{{ __('Design systems') }}</x-ui.badge>
                <x-ui.badge variant="outline">{{ __('Tokens') }}</x-ui.badge>
                <x-ui.badge variant="outline">{{ __('Laravel') }}</x-ui.badge>
                <x-ui.badge variant="outline">{{ __('Blade') }}</x-ui.badge>
            </div>

            <x-ui.separator class="my-10" />

            {{-- Share / back row --}}
            <div class="flex flex-wrap items-center justify-between gap-4">
                <x-ui.button href="#" variant="outline" size="sm">{{ __('Back to blog') }}</x-ui.button>
                <div class="flex items-center gap-2">
                    <x-ui.button variant="ghost" size="sm">{{ __('Share') }}</x-ui.button>
                    <x-ui.button variant="ghost" size="sm">{{ __('Copy link') }}</x-ui.button>
                </div>
            </div>
        </article>

        <x-blocks.waitlist />
    </main>

    <x-blocks.footer-columns brand="Northstar" />
</div>