feat: reduce HeroBanner size, add tabbed content, update AspireC4

[kieronlanning]

Changes

UI Improvements

• HeroBanner: Reduced vertical padding (py-16 lg:py-24 → py-8 lg:py-12) and font sizes so content is visible above the fold on wide screens

Tabbed Project Content

• ContentTabs.astro: New component that shows project pages with both local content and a remote GitHub README in tabs rather than stacking them
• Tab buttons include the GitHub logo icon on the README tab
• Both tabs have \cursor-pointer\ for correct hover UX
• Proper ARIA \ ablist/\ abpanel\ semantics, dark mode support

AspireC4 Project

• Updated content and added makerstack example images

Co-authored-by: Copilot 223556219+Copilot@users.noreply.github.com

[Copilot]

Pull request overview

This PR improves the site’s above-the-fold UX by reducing the Hero banner height, introduces a new tabbed UI to switch between local project content and a remote GitHub README, updates the AspireC4 project write-up with examples/images, and adjusts Tailwind dependency version ranges.

Changes:

• Reduce HeroBanner padding/font sizes and update the homepage banner content to use the Pill link component.
• Add ContentTabs.astro and use it on project pages to present “Overview” vs “GitHub README” as tabs when both are available.
• Expand AspireC4 project content with example screenshots and a code snippet; pin Tailwind packages to patch-only updates (~).

Reviewed changes

Copilot reviewed 6 out of 9 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
src/src/pages/projects/[...slug].astro	Uses the new ContentTabs component when both local content and a remote README exist.
src/src/components/index/MainBanner.astro	Updates homepage hero copy and replaces the projects link with a Pill.
src/src/components/HeroBanner.astro	Reduces vertical spacing and font sizes to make content more visible above the fold.
src/src/components/ContentTabs.astro	New tab UI component with ARIA roles and client-side behavior to switch panels.
src/src/collections/projects/AspireC4.md	Updates AspireC4 description and adds examples/images and a code snippet.
src/package.json	Changes Tailwind dependency ranges from ^ to ~ (patch-only updates).
src/package-lock.json	Reflects the resulting dependency resolution changes from the Tailwind range adjustment.

Files not reviewed (1)

• src/package-lock.json: Language not supported

Comments suppressed due to low confidence (2)

src/src/collections/projects/AspireC4.md:74

• There’s a likely typo in the example summary text: “MarkerStack SPA” vs “MakerStack SPA”. If the project name is MakerStack elsewhere in the doc, this should be made consistent.

        .WithLabel("Web Host")
        .WithSummary(".NET 10/ ASP.NET Minimal API web app. Hosting APIs, and the Astro-based landing site and the MarkerStack SPA");
    })

src/src/collections/projects/AspireC4.md:76

• Inside a csharp code fence, # Note ... isn’t valid C# (should be //), and the line ending .. reads like a typo. Adjusting this keeps the example consistent and copy/pasteable.

        .WithSummary(".NET 10/ ASP.NET Minimal API web app. Hosting APIs, and the Astro-based landing site and the MarkerStack SPA");
    })
    # Note the reference to the database project here, to save you from calling .WithReference(db) as well..
    .WithLikeC4Reference(db, opts => {

[kieronlanning]

@copilot apply changes based on this feedback

[Copilot]

Updated in 66975f2 — src/src/components/index/MainBanner.astro now uses single-quoted Astro/HTML attributes to match the existing repo style. No UI behavior or visual output changed in this update.

[Copilot]

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• telemetry.astro.build
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/kjldev/kjldev/src/node_modules/.bin/astro build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)