Skip to main content
The HiroLeague website is a fully static marketing site built on the ctrimm/astro-genai-startup-theme (MIT license), customized for HiroLeague. For setup, build, and deployment instructions see Website setup & deployment.

​
Design decisions

The theme was chosen because it ships with the full stack we need — Astro, React, Tailwind, shadcn/ui, Framer Motion, and dark mode — without requiring a CMS or external data sources. The site is fully static: all pages are pre-rendered to HTML at build time with no server-side logic. ReactBits (DavidHDev/react-bits, 36k+ stars) is used for animated UI effects. Components are installed via the jsrepo CLI as copy-pasted source files, meaning zero runtime dependency overhead. They work as Astro islands with client:load or client:visible directives. The following sections were removed from the base theme because they were not requested:
  • Pricing.tsx
  • Testimonials.tsx
  • FAQ.tsx
  • The example markdown page (markdown-page.md)

​
Site structure

hiroleague-website/
  src/
    components/
      ui/                    # shadcn/ui primitives (from theme)
      reactbits/             # ReactBits components (copied via CLI)
      Header.tsx
      Hero.tsx
      Features.tsx
      Waitlist.tsx
      Footer.tsx
      ThemeToggle.tsx
    layouts/
      main.astro             # Base layout
    pages/
      index.astro            # Landing page
      blog/
        index.astro          # Blog listing
        why-we-are-building-hiroleague.astro
      privacy.astro
      terms.astro
      404.astro
    styles/
      global.css             # Tailwind v4 tokens, dark-mode variant, animations

​
Sections

Header.tsx — Navigation bar with:
  • HiroLeague logo/text (left)
  • Nav links: GitHub repo, Docs
  • ThemeToggle button (dark/light)
  • Mobile-responsive hamburger menu

​
Hero

Hero.tsx — Main above-the-fold section with:
  • Animated headline using ReactBits BlurText
  • Mysterious tagline copy
  • CTA button that scrolls to the waitlist section
  • Gradient background animation

​
Features

Features.tsx — Four feature cards hinting at what HiroLeague does.

​
Waitlist

Waitlist.tsx — Email capture section with an input + “Notify Me” button. The form markup is UI-only. The backend integration (Brevo embedded form) is tracked in docs/internal_todo.md. Footer.tsx — Copyright line and social icons (YouTube, Instagram, X, LinkedIn, TikTok) using Lucide icons.

​
Editing content

​
Hero, features, waitlist

Edit the corresponding React component in src/components/. The copy is inline — no CMS or separate data file.

​
Blog

Add new articles as .astro files inside src/pages/blog/ following the pattern of why-we-are-building-hiroleague.astro. Then add an entry to the blogPosts array at the top of src/pages/blog/index.astro so the article appears on the listing page.

​
Colors and brand

The design token values are CSS custom properties in src/styles/global.css under :root (light) and .dark (dark). The amber-to-orange brand gradient is applied inline in components — search for from-amber-500 to find all instances.

​
Dark mode

Theme state is stored in localStorage under the key theme. ThemeToggle.tsx reads and writes it. An inline <script is:inline> in src/layouts/main.astro applies the .dark class synchronously on <html> before first paint, preventing the light-to-dark flash on page load.