### **Product Requirements Document: `enchun.tw` Website Migration to Astro (v2)**

**1. Introduction**

This document outlines the requirements for migrating the existing `enchun.tw` website to a new, modern web application built with the Astro framework and managed by Payload CMS. The primary goal is to create a faster, more secure, and more maintainable website, complete with a secure authentication system and a user-friendly editing experience for copywriters. The project will preserve all existing content, functionality, and SEO value while implementing a more logical site structure.

**2. Goals & Objectives**

*   **Performance:** Achieve Lighthouse scores of 95+ on public-facing pages.
*   **Maintainability:** Provide a user-friendly, web-based interface for content editors via Payload CMS, protected by a robust authentication system.
*   **Developer Experience:** Leverage Astro's modern features for a fast frontend build process and easier component management.
*   **Security:** Implement role-based access control (RBAC) to secure the CMS and dashboard areas.
*   **Future-Proofing:** Build on a modern, flexible stack that can easily integrate with other services and APIs.

**3. Target Audience**

*   **Public Users:** Potential and existing clients, industry peers.
*   **Authenticated Users:**
    *   **Content Editors/Copywriters:** Internal team members who will manage website content.
    *   **Administrators:** Technical staff responsible for managing users and site settings.

**4. Functional Requirements**

**4.1. Redesigned Page Structure & Routing**

The application will feature a clear separation between public and protected routes.

*   **Public Routes:**
    *   `/` (Homepage)
    *   `/about`
    *   `/contact`
    *   `/solutions`
    *   `/blog` (Blog listing page)
    *   `/blog/[slug]` (Individual blog posts)
    *   `/blog/category/[category-slug]` (Blog category pages)
    *   `/portfolio` (Portfolio listing page)
    *   `/portfolio/[slug]` (Individual portfolio projects)
    *   `/teams`
    *   `/marketing-class`

*   **Protected Routes (Require Authentication):**
    *   `/admin/login` (Login page)
    *   `/admin/dashboard` (A general dashboard for authenticated users)
    *   `/admin/cms` (The embedded Payload CMS admin interface)

**4.2. Authentication & Authorization**

*   **Authentication Provider:** The site will use **Auth.js (`astro-auth`)** to handle user authentication.
*   **Login:** A dedicated login page will be available at `/admin/login`.
*   **Access Control:** All routes under `/admin/*` will be protected. Unauthenticated users attempting to access these routes will be redirected to the login page.
*   **Role-Based Access Control (RBAC):**
    *   **Administrator (`admin`):** Full access to the Payload CMS, including content creation/editing, user management, and system settings.
    *   **Editor (`editor`):** Can create, edit, and manage content (blog posts, portfolio items) but cannot access system settings or manage users.
    *   The CMS and dashboard will restrict visibility and actions based on the logged-in user's role.

**4.3. Key Features**

*   **Content Management:** All public content will be managed via a self-hosted Payload CMS instance. The CMS admin panel will be accessible only to authenticated users at `/admin/cms`.
*   **Contact Form:** The public `/contact` page will feature a functional contact form. Submissions will be handled securely by a Cloudflare Worker.
*   **SEO:**
    *   A dynamic `sitemap.xml` will be automatically generated.
    *   Payload CMS will include dedicated SEO fields (meta title, description, Open Graph tags) for all pages and collections.
    *   **Redirects:** A 301 redirect map will be implemented to permanently redirect all old URLs from `enchun-sitemap.md` to their new, redesigned equivalents to preserve SEO equity.

**5. Non-Functional Requirements**

*   **Styling:** The project will use **Tailwind CSS**.
*   **Accessibility:** The site must adhere to WCAG 2.1 AA standards.
*   **Deployment:** The Astro frontend will be deployed on **Cloudflare Pages** in SSR (Server-Side Rendering) mode to support the authentication layer. The Payload CMS backend and serverless functions will run on **Cloudflare Workers**.

**6. Technology Stack**

*   **Framework:** Astro (in SSR mode)
*   **Authentication:** Auth.js (`astro-auth`)
*   **UI Components:** Astro components
*   **Styling:** Tailwind CSS
*   **CMS:** Payload CMS
*   **Deployment:** Cloudflare Pages & Cloudflare Workers

**7. Migration Plan (High-Level)**

1.  **Phase 1: Project Setup**
    *   Initialize a new Astro project configured for SSR.
    *   Set up Payload CMS for Cloudflare Workers.
    *   Configure Tailwind CSS.
2.  **Phase 2: Authentication & CMS Setup**
    *   Integrate `astro-auth` and configure the login flow.
    *   Define the collections and user roles (`admin`, `editor`) within Payload.
3.  **Phase 3: Content Migration**
    *   Write a script to import content from the CSV files into the Payload CMS via its API.
4.  **Phase 4: Page & Template Implementation**
    *   Build all public pages and templates, fetching data from the Payload API.
    *   Build the protected `/admin` area, including the dashboard and the embedded CMS panel.
5.  **Phase 5: Functionality & SEO**
    *   Implement the contact form with its Cloudflare Worker backend.
    *   Implement the 301 redirect map and all other SEO requirements.
6.  **Phase 6: Testing & Deployment**
    *   Thoroughly test all public pages, protected routes, user roles, and functionality.
    *   Deploy the full stack to Cloudflare.
    *   Configure DNS and go live.

**8. Out of Scope**

*   Frontend user accounts or public-facing login capabilities.
*   A complete visual redesign. The project aims to migrate the existing design to the new framework.