Hero 1 — Centered hero

import Link from "next/link";
import { ArrowRight } from "lucide-react";

import { buttonVariants } from "@/components/ui/button";

/**
 * Shoji hero-1 — Centered hero with eyebrow chip, dual CTA, and meta strip.
 *
 * Surface B (Blocks) contract — design-spec §4.5:
 *   - shadcn primitives only (Button)
 *   - shadcn semantic tokens only (bg-background, text-foreground, border, text-muted-foreground)
 *   - Tailwind default scale, default shadcn radius — no Shoji-specific overrides
 *   - JP optimization: leading-[1.75] for body, font-size ≥ 14px
 */
export function Hero1() {
  return (
    <section className="bg-background text-foreground border-b">
      <div className="mx-auto w-full max-w-6xl px-6 py-24 lg:py-32">
        <div className="flex flex-col items-center gap-8 text-center">
          <p className="text-xs font-mono uppercase tracking-[0.18em] text-muted-foreground">
            <span className="inline-block rounded-md border border-border px-2 py-1">
              NEW · v1.0
            </span>
          </p>

          <h1 className="max-w-3xl text-4xl font-semibold leading-[1.2] tracking-tight md:text-5xl lg:text-6xl">
            あなたのプロダクトを、
            <br />
            最速でリリース。
          </h1>

          <p className="max-w-xl text-base leading-[1.75] text-muted-foreground">
            Shoji の hero ブロックで、ランディングページの最初の画面を5分で組み上げる。
            <br />
            日本語タイポグラフィ最適化済み・AI agent ready。
          </p>

          <div className="flex flex-col items-center gap-3 pt-2 sm:flex-row">
            <Link href="#get-started" className={buttonVariants({ size: "lg" })}>
              無料で試す
              <ArrowRight aria-hidden className="h-4 w-4" />
            </Link>
            <Link
              href="#demo"
              className={buttonVariants({ size: "lg", variant: "outline" })}
            >
              デモを見る
            </Link>
          </div>

          <ul className="flex flex-wrap items-center justify-center gap-x-8 gap-y-2 pt-6 text-xs font-mono text-muted-foreground">
            <li>✓ クレジットカード不要</li>
            <li className="hidden sm:block" aria-hidden>
              ·
            </li>
            <li>✓ 日本語サポート</li>
            <li className="hidden sm:block" aria-hidden>
              ·
            </li>
            <li>✓ MIT base license</li>
          </ul>
        </div>
      </div>
    </section>
  );
}

---
shoji_block: hero-1
shoji_version: 1.1.0
category: marketing
license: MIT
dependencies: ["lucide-react", "next"]
shadcn_primitives: ["button"]
ja_specific: false
---

# hero-1

> Shoji block for AI agents. Paste this entire file to your AI;
> it will scaffold a centered hero that drops cleanly into any shadcn theme.

## Component

```tsx
import Link from "next/link";
import { ArrowRight } from "lucide-react";

import { buttonVariants } from "@/components/ui/button";

export function Hero1() {
  return (
    <section className="bg-background text-foreground border-b">
      <div className="mx-auto w-full max-w-6xl px-6 py-24 lg:py-32">
        <div className="flex flex-col items-center gap-8 text-center">
          <p className="text-xs font-mono uppercase tracking-[0.18em] text-muted-foreground">
            <span className="inline-block rounded-md border border-border px-2 py-1">
              NEW · v1.0
            </span>
          </p>

          <h1 className="max-w-3xl text-4xl font-semibold leading-[1.2] tracking-tight md:text-5xl lg:text-6xl">
            あなたのプロダクトを、
            <br />
            最速でリリース。
          </h1>

          <p className="max-w-xl text-base leading-[1.75] text-muted-foreground">
            日本語タイポグラフィ最適化済み・AI agent ready の hero ブロック。
          </p>

          <div className="flex flex-col items-center gap-3 pt-2 sm:flex-row">
            <Link href="#get-started" className={buttonVariants({ size: "lg" })}>
              無料で試す
              <ArrowRight aria-hidden className="h-4 w-4" />
            </Link>
            <Link
              href="#demo"
              className={buttonVariants({ size: "lg", variant: "outline" })}
            >
              デモを見る
            </Link>
          </div>

          <ul className="flex flex-wrap items-center justify-center gap-x-8 gap-y-2 pt-6 text-xs font-mono text-muted-foreground">
            <li>✓ クレジットカード不要</li>
            <li className="hidden sm:block" aria-hidden>·</li>
            <li>✓ 日本語サポート</li>
            <li className="hidden sm:block" aria-hidden>·</li>
            <li>✓ MIT base license</li>
          </ul>
        </div>
      </div>
    </section>
  );
}
```

## Usage

```tsx
import { Hero1 } from "@/components/blocks/hero-1";

export default function Page() {
  return <Hero1 />;
}
```

## Block contract (Two-surfaces — design-spec §4.5)

This is a **Surface B block** — it inherits your shadcn theme, not Shoji's.

- shadcn primitives only (`Button`)
- shadcn semantic tokens only (`bg-background`, `text-foreground`, `border`, `text-muted-foreground`)
- Tailwind default scale + your shadcn radius — no `rounded-none` enforcement
- Works with any base color (zinc / slate / stone / red / blue) and any style (default / new-york)

## Customization hints

- **Brand color**: change the primary CTA via your `--primary` token. Shoji does not lock CTA color.
- **Body line-height**: `leading-[1.75]` is required for Japanese text. Do not lower below `1.6`.
- **Eyebrow chip**: optional. If used, keep `tracking-[0.18em]` + uppercase.
- **Reduced motion**: respected globally via your `globals.css`. No motion needed in this block.

## A11y

- `<section>` is a landmark; pair with the `<header>`/`<nav>` of your page.
- CTAs are real `<a>` (Next `<Link>`) with descriptive labels (no "Click here").
- Decorative `<li>` separators have `aria-hidden`.
- `ArrowRight` icon is `aria-hidden` because the adjacent text labels the action.

## Why this is a Shoji block

- **JP-tuned by default.** `leading-[1.75]` for body, `tracking-tight` only on display H1.
- **AI agent ready.** This MDX exposes the entire block as one paste-ready prompt with full a11y context.
- **No theming opinions.** No 5-color tokens, no Mincho, no `rounded-none` — drop into any shadcn project.

• lucide-react