Homepage Hero Demo Stage Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Turn the homepage opening into a two-stage narrative by keeping the first screen as a pure hero cover and moving the product video into a dedicated second-screen launch-style demo section.

Architecture: Keep LayoutContent narrowly focused on hero copy, CTAs, and the install command. Introduce a separate LayoutDemo section component for the product video and place it immediately after the hero on the homepage so the opening sequence reads as cover first, product stage second.

Tech Stack: Next.js App Router, React, TypeScript, Tailwind CSS v4, next-intl

File Map

Existing files to modify

components/layout-content/index.tsx Remove the embedded video figure so the component only renders hero content.
app/[locale]/page.tsx Insert the new demo stage directly after LayoutContent.
i18n/messages/en.json Add the new home.demo copy for the second-screen section.
i18n/messages/zh.json Add the matching home.demo copy for locale parity.

New files to create

components/layout-demo/index.tsx Render the standalone second-screen launch-style video section.

Verification targets

Homepage route in browser
Lints for touched files

Task 1: Remove Video From Hero

Files:

Modify: components/layout-content/index.tsx
Test: homepage visual smoke check
Step 1: Inspect the current hero/video boundary

Read components/layout-content/index.tsx and confirm the <figure> containing /assets/layout-content/open-video.mp4 is the only video block inside the hero component.

Step 2: Remove the embedded video figure

Delete the bottom <figure> from LayoutContent and keep the rest of the hero structure intact:

badge
split-title fallback behavior
subtitle
primary/secondary CTA group
install command block
Step 3: Re-read the component for layout regressions

Confirm the JSX still has a clean single-section structure with no dangling imports, wrappers, or spacing anomalies.

Step 4: Tune the hero ending spacing

Adjust hero bottom spacing after the install block so the section ends more deliberately once the video is removed. Start from the approved spec guidance rather than introducing new layout patterns.

Task 2: Add Standalone Demo Stage Component

Files:

Create: components/layout-demo/index.tsx
Test: homepage visual smoke check
Step 1: Define the section structure

Create a semantic <section> with:

an aria-labelledby
a small section label
a visible heading with an id used by aria-labelledby
one short supporting sentence
a centered video stage

Use useTranslations("home.demo") in this component so it consumes the new i18n group added in Task 3.

Step 2: Implement the launch-stage visual treatment

Use a restrained composition:

light background
centered text block constrained near max-w-2xl
video stage constrained near max-w-6xl
subtle border
very soft shadow or equivalent restrained framing
calm spacing with enough top padding to feel separate from the hero
enough bottom spacing so the following PartnerMarquee does not feel attached, without modifying PartnerMarquee itself

Start from the approved spacing ranges:

section top padding around pt-24 to pt-32
title block to video gap around mt-10 to mt-14

Do not introduce heavy gradients, glassmorphism, or decorative launch effects while pursuing the premium feel.

Step 3: Implement video behavior

Render the existing source /assets/layout-content/open-video.mp4 with:

muted
playsInline
controls
responsive width
stable aspect ratio-friendly presentation

Use a conservative playback strategy:

prefer no autoplay for the stage section
rely on the built-in controls for playback
ensure the section still reads well even before interaction, without assuming autoplay support

Task 3: Add Demo Copy To i18n

Files:

Modify: i18n/messages/en.json
Modify: i18n/messages/zh.json
Test: homepage renders in both locales without missing keys
Step 1: Add English copy

Add home.demo with:

label
title
description

Use launch-style, restrained language aligned with the approved spec.

Step 2: Add Chinese copy

Add the matching home.demo keys in zh.json with polished direct equivalents so locale structure remains in sync.

Step 3: Sanity-check key nesting

Confirm the new keys live under the homepage namespace and do not disturb adjacent message groups.

Task 4: Insert Demo Stage Into Homepage Flow

Files:

Modify: app/[locale]/page.tsx
Test: homepage visual smoke check
Step 1: Import the new component

Import LayoutDemo from components/layout-demo.

Step 2: Reorder the opening sequence

Update the page composition to:

LayoutContent
LayoutDemo
PartnerMarquee
LayoutProducts
LayoutFeatures
CTASection

Step 3: Verify narrative continuity

Read the final page structure and confirm the opening sequence now matches:

value proposition first
product reveal second
deeper capability sections after

Task 5: Verification

Files:

Verify: components/layout-content/index.tsx
Verify: components/layout-demo/index.tsx
Verify: app/[locale]/page.tsx
Verify: i18n/messages/en.json
Verify: i18n/messages/zh.json
Step 1: Run lints for touched files

Use the editor lint tool on the touched files and fix any newly introduced issues.

Step 2: Visually verify the homepage

Check the homepage and confirm:

the first screen no longer shows the video
the hero reads as a clean cover
the second screen feels like a deliberate launch-stage demo
the spacing between the demo stage and the following marquee feels intentional without editing PartnerMarquee
Step 3: Record any residual risks

If the hero still feels too short on common desktop viewports or the demo stage feels too card-like, note those as follow-up polish items instead of widening scope during this task.