# Home Wireframe

## Page Goal
The homepage should establish brand perception first, then guide users into product discovery or support. It should feel calm, premium, and easy to scan on mobile.

Brand line:
**A refined way to experience music.**

## Structure Overview
1. Hero
2. Featured Products
3. Brand / Technology Statement
4. Support Shortcuts
5. News / Recognition
6. Footer

The homepage should avoid stacking too many sections. Every module must earn its place.

---

## 1. Hero

### Purpose
Set the emotional tone of the brand and communicate the core positioning immediately.

### Content
- Full-width lifestyle still image for the default presentation
- Optional showcase video variant for selected campaigns or launch moments
- Headline
- One-line supporting copy
- Primary CTA
- Secondary CTA

### Draft Copy
Headline:
**A refined way to experience music.**

Supporting line:
Precision audio, shaped for modern listening and made to live beautifully in real spaces.

Primary CTA:
**Explore Products**

Secondary CTA:
**Support**

### Layout Notes
- Keep text block left-aligned or centered only if the image composition supports it.
- Copy width should stay narrow.
- Avoid layered badges, floating cards, or promotional overlays.
- Default launch treatment should prioritize still photography.
- Video can be used as a showcase asset, but it must be silent, slow, and secondary to the copy.

### Mobile Notes
- Crop image for subject clarity, not just center crop.
- Keep headline within 2 lines.
- CTAs stack vertically if space is tight.

### Payload Source
`Homepage.heroScene`

---

## 2. Featured Products

### Purpose
Show the current product focus in a curated way. This section should feel editorial, not catalog-like.

### Content
- Exactly 4 featured products
- Product image
- Model name
- One-line descriptor
- Details CTA

### Section Intro
Eyebrow:
**Featured**

Title:
**Selected products**

Optional supporting line:
A focused range of products designed around clarity, control, and musical presence.

### Product Card Rules
- No prices
- No sales language
- No rating stars, stock labels, or commerce badges
- Use horizontal image composition to reinforce a more editorial and cinematic layout
- Card height should remain visually consistent even when copy length differs by language

### Desktop Layout
- 4-column grid
- Balanced spacing, generous margins

### Mobile Layout
- 1-column stacked cards or 2-column compact grid depending on image ratio and readability
- Prioritize image legibility and tap comfort over density

### Payload Source
`Homepage.featuredProducts` → `Product`

---

## 3. Brand / Technology Statement

### Purpose
Bridge the emotional tone of the hero with the technical credibility of the products.

### Content Direction
This is one restrained section only. It should not become a full spec dump.

### Draft Copy Option
Title:
**Designed with intention. Engineered for clarity.**

Body:
From interface to internal architecture, every detail is shaped to make listening feel more direct, more focused, and more rewarding.

### Layout Options
Selected direction:
- Supporting image on one side
- Statement text on the other
- Horizontal composition with generous whitespace

Alternative reference:
- Full-width text block with minimal background image

### Notes
- Use this section to establish product philosophy, not feature count.
- Keep to one visual idea.

### Payload Source
`Homepage.statement`

---

## 4. Support Shortcuts

### Purpose
Make service resources visible without shifting the homepage into a utility portal.

### Priority
1. FAQ
2. Warranty
3. Contact

### Section Intro
Title:
**Support, made straightforward.**

Supporting line:
Find answers, service information, and contact details without friction.

### Card Structure
Each shortcut card includes:
- Label
- One-line description
- CTA

### Draft Entries
FAQ:
Common answers for setup, playback, connectivity, and product use.
CTA: **View FAQ**

Warranty:
Warranty coverage, regional notes, and service information.
CTA: **Warranty Info**

Contact:
Reach the right team for product, service, or dealer-related questions.
CTA: **Contact Us**

Optional fourth item:
Downloads
CTA: **Downloads**

### Layout Notes
- Use clean cards or simple list rows.
- Avoid making this section visually heavier than Featured Products.
- On mobile, cards should stack with strong spacing.

### Payload Source
`Homepage.supportShortcuts`

---

## 5. News / Recognition

### Purpose
Add proof and recency without making the homepage feel busy.

### Launch Direction
This section should combine light editorial freshness with brand proof.
Include:
- Up to 3 recent news items
- Awards
- Review quotes or media logos

### Recommended Direction
For launch, keep this section light and editorial.
A simple 3-item news row can sit alongside or above a restrained awards / review treatment.
Recognition content should support credibility, not overpower the page.

### Section Intro
Title:
**Latest**

### Layout Notes
- Small footprint
- Low visual contrast compared with Hero and Featured Products
- This section can be removed temporarily if content quality is not ready

### Payload Source
`Homepage.newsHighlights` or curated references from `News Article`

---

## 6. Footer

### Purpose
Close the homepage with clear access to navigation, support, and regional information.

### Structure
Column 1:
Products

Column 2:
Support
- FAQ
- Warranty
- Contact
- Downloads

Column 3:
Company
- About
- News
- Dealers

Column 4:
Language / Legal / Social

### Notes
- Language switch should be visible both in header and footer.
- Footer should feel quiet and highly usable.

---

## Desktop Order
1. Hero
2. Featured Products
3. Brand / Technology Statement
4. Support Shortcuts
5. News / Recognition
6. Footer

## Mobile Order
Keep the same order.
Do not move support above products unless analytics later proves it is necessary.

---

## Section Density Rules
- Maximum 5 homepage content sections before footer.
- No carousel except hero, and hero should not exceed 3 slides.
- One dominant visual idea per section.
- One primary CTA per section.

---

## AI-Slop Avoidance Rules
- No generic gradient backgrounds.
- No glassmorphism overlays.
- No floating fake dashboards.
- No exaggerated animation.
- No over-written marketing copy.
- No generic luxury cliches.

The page should feel intentional, editorial, and brand-specific.

---

## Build Mapping
- Hero → Payload global: Homepage
- Featured Products → referenced Product entries
- Statement → Homepage global rich text field
- Support Shortcuts → Homepage global structured list
- News Highlights → News Article references
- Footer → Global Settings

---

## Open Design Decisions
- Typography personality: neutral modern sans or sharper editorial contrast
- Whether awards appear as logo wall, quote strip, or mixed recognition module
- Whether hero video is launch-day only or a reusable CMS option