Add optimized landing video asset workflow and prompt command

## Summary

Add a lightweight landing-page video asset workflow to DannFlow:

1. Replace or augment the current hero visual with a sample optimized generated video asset for now.
2. Add a reusable command that generates high-quality prompts for landing-page video assets, especially 3-5 second hero/transition clips for premium sites.

This is **not** for live text-to-video generation on the website. The website should only ship compressed finished assets. The command should help create the prompt that the user can paste into MuAPI/Open Generative AI/Kling/etc.

## Why

DannFlow already has a high-end landing page direction, but the current hero relies on a canvas particle field and a dashboard preview. For client websites, especially premium SaaS/local business pages, a short generated video can create a more Apple-style hero or scroll transition when handled carefully.

The goal is to support this workflow:

```text
Generate master video externally -> optimize variants -> commit static assets -> render responsive video in the landing page
```

No API keys should be needed by the public site. No video generation should happen for visitors.

## Repo context read

Relevant files/patterns:

- `src/components/landing/hero.tsx` currently owns the landing hero, typewriter reveal, CTA, water particles, and dashboard preview.
- `src/components/landing/water-particles.tsx` is the current animated canvas background.
- `src/app/page.tsx` composes the landing sections.
- `src/app/globals.css` contains the Tailwind v4 semantic tokens and animation utilities.
- `.claude/commands/` is the canonical slash-command library.
- `.codex/` is only a compatibility bridge and should not duplicate the command library.
- `.claude/commands/make-command.md` defines how new commands should be created and documented.
- `.codex/commands/claude-command.md` loads Claude commands from `.claude/commands/`.

## Proposed implementation

### 1. Add a sample optimized landing video asset

Add a sample hero video under something like:

```text
public/assets/landing/video/vetmed-hero-desktop.webm
public/assets/landing/video/vetmed-hero-desktop.mp4
public/assets/landing/video/vetmed-hero-mobile.webm
public/assets/landing/video/vetmed-hero-mobile.mp4
public/assets/landing/video/vetmed-hero-poster.webp
```

The first sample can use a veterinary clinic management system direction:

```text
A premium cinematic landing page hero video for a veterinary clinic management system. A modern vet clinic reception desk transforms into a clean floating 3D dashboard interface showing appointments, patient records, inventory, billing, and treatment notes. Subtle holographic UI panels glide smoothly around a central tablet, with soft blue and teal medical lighting, warm clinic ambience, glassmorphism interface details, gentle depth of field, polished SaaS product commercial style. Slow camera push-in, subtle parallax, smooth controlled motion, no fast cuts, no text, no logos, no watermarks, no distorted UI, professional and trustworthy, 5 seconds, seamless loop, centered composition with generous negative space for responsive website cropping.
```

Asset guidance:

- 3-5 seconds.
- Muted/no audio track.
- Desktop target: 1920x1080, ideally 1.5-4 MB.
- Tablet target can reuse desktop or a 1280x720 export.
- Mobile target: vertical or mobile-safe crop, ideally under 2 MB.
- Poster: WebP/AVIF, roughly 80-200 KB.
- Keep important subject matter centered so `object-fit: cover` works.

### 2. Create a reusable landing video component

Add a component such as:

```text
src/components/landing/hero-video.tsx
```

Expected behavior:

- Renders a `` with `autoplay`, `muted`, `loop`, `playsInline`, `preload="metadata"`, and `poster`.
- Uses `` for mobile/desktop variants where browser support permits, or uses a small client component only if needed for source selection.
- Uses `object-cover` and a configurable `object-position`.
- Honors `prefers-reduced-motion` by showing the poster image instead of autoplaying video.
- Does not fetch anything from a provider.
- Does not require any API key.
- Uses semantic tokens only for wrappers/overlays.
- Avoids raw hex/rgba/hardcoded white/black/gray classes in `className`, per `CLAUDE.md` and `/ui` rules.

Suggested markup shape:

```tsx

```

### 3. Wire the sample into the current hero

Update `src/components/landing/hero.tsx` to show the sample video in a safe way:

- Keep existing copy/CTA structure unless a redesign is explicitly part of the task.
- Use the video as an ambient hero background or a framed preview, whichever preserves readability.
- Keep text contrast strong with semantic-token overlays.
- Keep the current canvas particles available only if they do not compete with the video or hurt performance.
- Avoid loading heavy video below the fold.
- Ensure mobile at 375px has no horizontal scroll.

### 4. Add a new Claude command for landing video prompts

Create a new command in `.claude/commands/`, not `.codex/commands/`.

Suggested name:

```text
/landing-video-prompt
```

Suggested purpose:

```text
Generate a production-ready AI video prompt for a landing-page hero, section transition, product reveal, or scroll-scrubbed visual asset.
```

Suggested arguments:

```text

```

The command should output:

1. A still-image prompt for creating a controlled first frame.
2. An image-to-video prompt for animating that frame.
3. Optional text-to-video prompt if no still image will be used.
4. Negative prompt / avoid list.
5. Recommended model settings:
- Prefer Image-to-Video for controlled website assets.
- For Kling/MuAPI: recommend `kling-v3-turbo-pro-image-to-video` for final 1080p assets and `kling-v3-turbo-standard-image-to-video` for drafts.
- Duration: 3-5 seconds.
- Composition: centered subject, generous crop-safe space, no text/logos/watermarks.
6. Web export checklist:
- desktop WebM + MP4
- mobile WebM + MP4 when crop needs it
- poster WebP/AVIF
- remove audio
- target size budgets

Hard constraints for the command:

- It should **not** call any AI video API.
- It should **not** ask for API keys.
- It should create prompts only.
- It should remind the user that finished assets should be optimized before committing.
- It should fit DannFlow command style and update docs according to `.claude/commands/make-command.md`:
- `.claude/commands/README.md`
- `docs/dannflow_docs/claude-workflow.md`
- `SKILLS.md` only if the video skill recommendation needs to be surfaced

### 5. Add asset optimization docs/script

Add documentation, and optionally a small script, for compressing generated master videos.

Suggested doc:

```text
docs/dannflow_docs/landing-video-assets.md
```

Suggested commands:

```bash
# Desktop WebM
ffmpeg -i master.mp4 -an -vf "scale=1920:-2,fps=24" \
-c:v libvpx-vp9 -crf 34 -b:v 0 -row-mt 1 \
public/assets/landing/video/vetmed-hero-desktop.webm

# Desktop MP4 fallback
ffmpeg -i master.mp4 -an -vf "scale=1920:-2,fps=24" \
-c:v libx264 -crf 24 -preset slow -movflags +faststart \
public/assets/landing/video/vetmed-hero-desktop.mp4

# Poster
ffmpeg -i master.mp4 -ss 00:00:01 -vframes 1 \
-vf "scale=1600:-2" \
public/assets/landing/video/vetmed-hero-poster.webp
```

## Acceptance criteria

- [ ] A sample optimized landing video/poster exists under `public/assets/landing/video/`.
- [ ] The landing hero can render the sample video without needing any API key or provider call.
- [ ] Video uses `muted`, `playsInline`, `loop`, a poster image, and safe preload behavior.
- [ ] Reduced-motion users see a static poster or non-autoplay fallback.
- [ ] Mobile, tablet, and desktop layouts work without horizontal scroll.
- [ ] No public API key or provider secret is introduced.
- [ ] New command exists in `.claude/commands/landing-video-prompt.md`.
- [ ] Codex can access the command through `/claude-command landing-video-prompt ...` without duplicating it into `.codex`.
- [ ] Command docs are updated in `.claude/commands/README.md` and `docs/dannflow_docs/claude-workflow.md`.
- [ ] The implementation passes `npm run lint` and `npx tsc --noEmit`.

## Notes

This should be implemented as static asset support and prompt tooling. Live generation belongs outside the visitor-facing website.

Start by reading src/components/landing/hero.tsx, src/components/landing/water-particles.tsx, src/app/page.tsx, and .claude/commands/make-command.md. Review the requested command, asset paths, documentation updates, and acceptance criteria, then run npm run lint and npx tsc --noEmit. Done means the static video workflow, reduced-motion behavior, command, docs, and responsive hero integration all meet the listed criteria without provider calls or API keys.

Written by the indexing model from the issue text.