website-enchun-mgr/docs/prd/03-ui-enhancement-goals.md

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:

/* 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:

// 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