Homepage Hero And Demo Stage Design

Goal

Restructure the homepage opening so the first screen feels like a clean premium cover and the product video becomes a deliberate second-screen reveal. The target tone is high-end, minimal, and technology-forward, with a launch-stage feel rather than a typical marketing card stack.

Current Problem

The hero section currently includes the product video inside components/layout-content/index.tsx.
On desktop, the first screen can partially reveal the video, which weakens the hero's focus and makes the transition into product content feel accidental.
The current structure mixes two jobs in one section:
- establish the brand/value proposition
- demonstrate the product

Approved Direction

Use a two-stage opening sequence:

First screen: pure hero cover
Second screen: launch-style product demo stage

The first screen should only establish the brand and core value proposition. The second screen should feel like the formal start of the product story.

The intent is not to force a perfectly centered full-screen hero on every viewport. The practical requirement is:

on common desktop/laptop viewports, the hero should read as a standalone opening cover
the product video should not appear in the initial above-the-fold view

Information Architecture

Screen 1: Hero Cover

Keep components/layout-content/index.tsx focused on:

badge
headline
subtitle
primary and secondary CTA
install command block

Remove the video from this component entirely.

Screen 2: Product Demo Stage

Create a new dedicated section component for the video stage:

suggested path: components/layout-demo/index.tsx

This component should contain:

section label
short launch-style heading
one concise supporting sentence
a large centered video stage

Homepage Order

Update app/[locale]/page.tsx to the following section order:

LayoutContent
LayoutDemo
PartnerMarquee
LayoutProducts
LayoutFeatures
CTASection

This keeps the narrative sequence:

what TouAI is
see it in action
explore capabilities

Visual Direction

Hero Cover

Treat the first screen as a cover, not a mixed content stack.
Increase perceived calm through stronger vertical breathing room.
Keep the headline as the dominant visual element.
Avoid adding any product preview back into the first screen.

Recommended spacing target:

keep the existing top offset language close to the current rhythm
increase bottom spacing after the install block so the hero ends more deliberately
do not add min-h-[100dvh] unless implementation shows it improves the composition without forcing awkward vertical centering

Demo Stage

The second screen should feel like a product launch stage:

centered composition
restrained typography
minimal copy
large video as the hero object of the section

This should feel closer to a keynote reveal than a SaaS feature card.

Demo Stage Specifications

Copy Structure

Layout

place the entire section in its own block
use generous top spacing to clearly separate it from the hero
constrain text width to around max-w-2xl
constrain the video stage to around max-w-6xl
center-align the composition for a launch-stage presentation feel

Recommended spacing target:

section top padding: roughly pt-24 to pt-32
title block to video gap: roughly mt-10 to mt-14
section bottom padding should be sufficient to avoid the next marquee feeling attached

Container Styling

keep the page background light and quiet
use a subtle border around the video stage
use either no shadow or a very soft shadow
allow slightly generous radius, but avoid heavy card styling

Recommended implementation bias:

prefer a light border plus a very soft shadow over a heavy standalone shadow
the frame should read as a stage surface, not as a generic marketing card

Visual Restraint

Do not use:

heavy gradients
dark glowing tech visuals
glassmorphism
oversized decorative effects
dense explanatory copy

The section should feel premium through spacing, proportion, and restraint.

Content And i18n

Add a new home.demo group in i18n messages with:

label
title
description

English should be authored intentionally. Chinese should ship in the same change as a direct but polished equivalent so homepage structure stays in sync across locales.

Implementation Plan

Component Changes

`components/layout-content/index.tsx`

remove the bottom <figure> containing the video
keep the component limited to hero content only
preserve the recently added split-title fallback behavior

`components/layout-demo/index.tsx`

add the new second-screen section
render the label, title, description, and video
use the existing video source: /assets/layout-content/open-video.mp4
make the section a semantic <section> with its own visible heading
use restrained framing, not a dense nested card treatment

Video behavior

keep muted and playsInline
keep controls
do not autoplay aggressively if it undermines the calm launch-stage feel
use a stable aspect ratio and responsive width so the stage remains composed on smaller screens
preserve a graceful fallback if autoplay behavior varies by browser

`app/[locale]/page.tsx`

import LayoutDemo
insert it immediately after LayoutContent

Scope Control

This change should not alter:

header structure
partner marquee behavior
products/features content structure
CTA section behavior

The work should stay narrowly scoped to the homepage opening sequence.

Success Criteria

the first screen no longer reveals the video
the hero reads as a clean, premium cover
the video appears as a deliberate second section
the second section feels launch-like, minimal, and product-centric
the homepage opening has a clearer narrative rhythm than before

Risks

if the second section copy becomes too long, it will lose the launch-stage feel
if the video container uses heavy shadow or framing, it will feel like a generic marketing card
if the spacing between the first and second sections is too tight, the original problem will remain

Out Of Scope

changing the homepage visual theme globally
redesigning the header
altering product or features section layouts
replacing the video asset itself