docs: add research assets, screenshots and guides
Include supplementary documentation, research notes on Lexical/UX, and setup guides.
This commit is contained in:
221
docs/prd/03-ui-enhancement-goals.md
Normal file
221
docs/prd/03-ui-enhancement-goals.md
Normal file
@@ -0,0 +1,221 @@
|
||||
# 3. User Interface Enhancement Goals
|
||||
|
||||
**Last Updated:** 2025-01-29
|
||||
|
||||
Since this migration involves complete UI reconstruction, this section defines how UI enhancements integrate with the existing design.
|
||||
|
||||
---
|
||||
|
||||
## Integration with Existing UI
|
||||
|
||||
### Design System Extraction
|
||||
|
||||
Based on analysis of the original Webflow HTML, the following key design patterns have been identified:
|
||||
|
||||
#### Typography System
|
||||
|
||||
**Fonts:**
|
||||
- **Primary Font:** Noto Sans TC (weights: 100, 300, 400, 500, 700, 900)
|
||||
- **Display Font:** Quicksand (weights: 300, 400, 500, 600, 700)
|
||||
- **Source:** Google Fonts
|
||||
|
||||
**Responsive Font Sizes:**
|
||||
```css
|
||||
/* Desktop and above */
|
||||
html { font-size: 19px; }
|
||||
|
||||
/* Tablet */
|
||||
@media (max-width: 991px) {
|
||||
html { font-size: 19px; }
|
||||
}
|
||||
|
||||
/* Mobile - Landscape */
|
||||
@media (max-width: 767px) {
|
||||
html { font-size: 16px; }
|
||||
}
|
||||
|
||||
/* Mobile - Portrait */
|
||||
@media (max-width: 479px) {
|
||||
html { font-size: 13px; }
|
||||
}
|
||||
```
|
||||
|
||||
#### Icon System
|
||||
- **Library:** Google Material Icons
|
||||
- **Variants:** Outlined, Two Tone, Round, Sharp
|
||||
|
||||
#### Layout Patterns
|
||||
- **Container-based layout** (`w-container` class in Webflow)
|
||||
- **Grid system** for feature cards, portfolio, footer
|
||||
- **Sticky navigation** with scroll effects
|
||||
- **Responsive hamburger menu** for mobile
|
||||
|
||||
#### Component Patterns
|
||||
- Hero sections with overlay backgrounds
|
||||
- Feature cards with icon + text
|
||||
- Comparison tables (Enchun vs competitors)
|
||||
- Call-to-action sections
|
||||
- Dynamic footer with blog categories
|
||||
|
||||
---
|
||||
|
||||
## Modified/New Screens and Views
|
||||
|
||||
### Pages to Reconstruct
|
||||
|
||||
#### 1. Homepage (`/`)
|
||||
- Hero section with overlay
|
||||
- Service features grid
|
||||
- Portfolio preview
|
||||
- CTA section
|
||||
|
||||
#### 2. About Enchun (`/about`)
|
||||
- Hero section
|
||||
- Service features (4 cards)
|
||||
- Comparison table (Enchun vs others)
|
||||
- CTA section
|
||||
|
||||
#### 3. Marketing Solutions (`/solutions`)
|
||||
- Services list
|
||||
- Detail sections for each service
|
||||
|
||||
#### 4. Marketing Magnifier (`/blog`)
|
||||
- Blog listing page
|
||||
- Category filters
|
||||
- Article cards with thumbnails
|
||||
|
||||
#### 5. Teams (`/teams`)
|
||||
- Team member profiles
|
||||
|
||||
#### 6. Website Portfolio (`/portfolio`)
|
||||
- Portfolio grid (2 columns)
|
||||
- Project cards with external links
|
||||
|
||||
#### 7. Contact Us (`/contact`)
|
||||
- Contact form
|
||||
- Contact information
|
||||
- CTA section
|
||||
|
||||
#### 8. Article Detail (`/blog/[slug]`)
|
||||
- Dynamic content from Payload CMS
|
||||
- Related articles
|
||||
- Social sharing
|
||||
|
||||
#### 9. Category Page (`/blog/category/[slug]`)
|
||||
- Filtered article list
|
||||
- Category description
|
||||
|
||||
#### 10. Project Detail (`/portfolio/[slug]`)
|
||||
- Project details
|
||||
- Case study content
|
||||
|
||||
### New Admin Interface
|
||||
|
||||
#### 11. Login Page (`/admin/login`)
|
||||
- Login form with email/password
|
||||
- Error handling
|
||||
- Redirect after login
|
||||
|
||||
#### 12. Dashboard (`/admin/dashboard`)
|
||||
- Welcome message
|
||||
- Quick stats
|
||||
- Recent activity
|
||||
|
||||
#### 13. CMS Admin Interface (`/admin/cms`)
|
||||
- Embedded Payload CMS admin panel
|
||||
- Protected by authentication
|
||||
|
||||
---
|
||||
|
||||
## UI Consistency Requirements
|
||||
|
||||
### Responsive Design Requirements
|
||||
|
||||
#### Breakpoint Definition
|
||||
- **Desktop:** > 991px
|
||||
- **Tablet:** 768px - 991px
|
||||
- **Mobile Landscape:** 480px - 767px
|
||||
- **Mobile Portrait:** < 479px
|
||||
|
||||
#### Consistency Rules
|
||||
|
||||
**UC1:** All pages must use a unified Header component including:
|
||||
- Enchun logo
|
||||
- Navigation links (About, Solutions, Marketing Magnifier, Teams, Portfolio, Contact)
|
||||
- Hot/New badges (Solutions shows "hot", Marketing Magnifier shows "new")
|
||||
- Mobile hamburger menu
|
||||
|
||||
**UC2:** All pages must use a unified Footer component including:
|
||||
- Enchun logo and description
|
||||
- Contact information (phone, Email, Facebook)
|
||||
- Marketing solution links
|
||||
- Marketing magnifier category links (dynamically fetched from Payload CMS)
|
||||
- Copyright notice (2018 - 2024)
|
||||
|
||||
**UC3:** All CTA buttons must follow consistent styling:
|
||||
- Consistent colors, spacing, border-radius
|
||||
- Hover effects
|
||||
- Material icons integration
|
||||
|
||||
**UC4:** All form elements must:
|
||||
- Use consistent input styling
|
||||
- Provide clear error messages
|
||||
- Support keyboard navigation
|
||||
- Meet WCAG 2.1 AA contrast requirements
|
||||
|
||||
**UC5:** Images and media must:
|
||||
- Use Next.js Image or Astro Image optimization
|
||||
- Support responsive loading
|
||||
- Provide alt text
|
||||
- Implement lazy loading
|
||||
|
||||
**UC6:** Animations and transitions must:
|
||||
- Maintain smooth scroll effects similar to original Webflow
|
||||
- Use CSS transitions and transforms
|
||||
- Respect user's `prefers-reduced-motion` setting
|
||||
|
||||
**UC7:** Typography must:
|
||||
- Follow hierarchy structure (H1 > H2 > H3 > H4)
|
||||
- Use consistent spacing system (based on Tailwind spacing scale)
|
||||
- Maintain consistent line-height and letter-spacing
|
||||
|
||||
**UC8:** Accessibility must:
|
||||
- All interactive elements accessible via keyboard
|
||||
- Clear focus indicators
|
||||
- Semantic HTML (proper use of `<nav>`, `<main>`, `<article>`, `<section>`)
|
||||
- ARIA labels for custom components
|
||||
|
||||
---
|
||||
|
||||
## Design Tokens
|
||||
|
||||
### Color System (To Be Extracted)
|
||||
|
||||
The following color system needs to be extracted from Webflow CSS and converted to Tailwind configuration:
|
||||
|
||||
```javascript
|
||||
// tailwind.config.js (to be completed)
|
||||
module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
// Extract from enchun.webflow.shared.557e15b5a.css
|
||||
brand: {
|
||||
primary: '', // To be extracted
|
||||
secondary: '', // To be extracted
|
||||
accent: '', // To be extracted
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Spacing System
|
||||
- Base spacing unit: Tailwind default (4px)
|
||||
- Consistent padding/margins for components
|
||||
- Container max-widths aligned with breakpoints
|
||||
|
||||
---
|
||||
|
||||
**Next Section:** [Technical Constraints and Integration Requirements](./04-technical-constraints.md)
|
||||
Reference in New Issue
Block a user