chore: baseline import
This commit is contained in:
Codex
@@ -0,0 +1,298 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user