Skip to content

improve the homepage based on feedback#477

Open
okdistribute wants to merge 3 commits into
mainfrom
rae/homepage-redesign
Open

improve the homepage based on feedback#477
okdistribute wants to merge 3 commits into
mainfrom
rae/homepage-redesign

Conversation

@okdistribute

Copy link
Copy Markdown
Contributor

A pass over the homepage (src/app/page.jsx) for clarity and polish. Branched off latest main (so it keeps the /services/hosting link and other recently-merged changes).

Hero

  • Subheadings become a checklist (purple SquareCheck markers).
  • Added a readability scrim — a gradient that's opaque under the text and fades to reveal the animated grid behind it (the grid was making the copy hard to read).

Platform strip

  • A centered row of platform logos: Raspberry Pi, Espressif, Linux, Windows, Apple, Android, Cloudflare, AWS, Azure. Monochrome simple-icons (CC0), recolored via CSS mask so they follow the text color in light/dark.

"Reach every device, on any network"

  • Replaces the 3-tab feature scroller (HomeFeatureTabs) with a single section: the cost-savings graphic (OpenSourceIllustration) + a heading/subhead/4-bullet layout.

"How are people using iroh?"

  • Now a 2-column card grid (was confusing full-width rows), logos removed, with a new File Transfer & Sync card. (Its link is a placeholder → https://docs.iroh.computer; needs a real target.)

Deploy, Monitor, Fix

  • Three dense paragraphs → three scannable bullets (Deploy. / Monitor. / Fix.).

Start building

  • Per-language code tabs (Swift / Rust / JavaScript / Kotlin) instead of a single Rust sample. New CodeBlockTabs component; snippets follow the real iroh-ffi APIs.

Lint clean; verified rendering locally.

🤖 Generated with Claude Code

okdistribute and others added 2 commits June 16, 2026 12:13
- CodeBlockTabs renders multiple syntax-highlighted snippets as a tabbed
  CodeGroup (the multi-language version of CodeBlock).
- public/img/platform-logos: monochrome CC0 simple-icons SVGs for Apple,
  Android, AWS, Azure, Cloudflare, Espressif, Linux, Raspberry Pi, and
  Windows, recolored via CSS mask so they follow the text color in light
  and dark mode.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Hero: turn the subheadings into a checklist and add a readability scrim
  so the text stays legible over the animated grid.
- Add a platform logo strip (Raspberry Pi, Espressif, Linux, Windows,
  Apple, Android, Cloudflare, AWS, Azure).
- Replace the 3-tab feature scroller with a single 'Reach every device'
  section built around the cost-savings graphic.
- Render 'How are people using iroh?' as a 2-column card grid and add a
  File Transfer & Sync card.
- Turn 'Deploy, Monitor, Fix' into scannable bullets.
- Start building: show per-language code snippets (Swift, Rust,
  JavaScript, Kotlin) in tabs instead of a single Rust sample.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@vercel

vercel Bot commented Jun 16, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
iroh-computer Ready Ready Preview, Comment Jun 17, 2026 12:00am

Request Review

@okdistribute okdistribute changed the title Redesign the homepage improve the homepage based on feedback Jun 16, 2026
@n0bot n0bot Bot added this to iroh Jun 16, 2026
@github-project-automation github-project-automation Bot moved this to 🚑 Needs Triage in iroh Jun 16, 2026
The hero copy lived in an absolutely-positioned container with no width,
so on narrow screens it shrink-wrapped to its content (up to max-w-7xl)
and overflowed instead of wrapping. Let it flow and wrap on mobile, and
keep the exact desktop overlay via md: overrides (md:absolute, md:w-auto,
md:h-[600px]).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: 🚑 Needs Triage

Development

Successfully merging this pull request may close these issues.

1 participant