SlpSoftware/aidlc-docs/features/react-frontend/construction/react-frontend-app/functional-design/business-rules.md

Business Rules — react-frontend-app

BR-1: Default Theme Rule

The site MUST use the red theme when no stored theme preference exists (first visit, cleared storage, or unsupported storage).

BR-2: Theme Persistence Rule

Whenever the visitor switches themes, the chosen theme MUST be written to localStorage immediately, so a page reload or new visit resolves to the same theme (BR-1 only applies when nothing is stored).

BR-3: Valid Theme Values Rule

Only two theme values are valid: red and purple. If a stored value is anything else (corrupted/unexpected), the app MUST fall back to the default theme (red) rather than error.

BR-4: Content Fidelity Rule

All rendered marketing copy, prices (€300 / €750 / "Op maat"), and the contact e-mail (info@slpsoftware.nl) MUST match the reference HTML designs exactly for this iteration (per requirements FR-1); no content may be altered, abbreviated, or replaced with placeholder text.

BR-5: Reduced Motion Rule

When the visitor's OS/browser signals prefers-reduced-motion: reduce, both the hero caret blink animation AND the theme-switch color transition MUST be instant / non-animated.

BR-6: Single Route Rule (current iteration)

For this iteration, all page sections (nav, hero, packages, process, about, contact, footer) are rendered under a single index route (/). No section requires its own route yet.

Decision Flow: Theme Resolution on Load

graph TD
    load_pref{"Stored theme value exists?"}
    valid_check{"Stored value is 'red' or 'purple'?"}
    use_stored_value["Use stored value as active theme"]
    fallback_default["Fall back to default theme: red"]

    load_pref -->|"No"| fallback_default
    load_pref -->|"Yes"| valid_check
    valid_check -->|"Yes"| use_stored_value
    valid_check -->|"No (corrupted/unexpected)"| fallback_default

    classDef decision fill:#fbd38d,stroke:#92400e,stroke-width:1px,color:#000;
    classDef outcome fill:#9ae6b4,stroke:#2f855a,stroke-width:1px,color:#000;

    class load_pref,valid_check decision;
    class use_stored_value,fallback_default outcome;

Text alternative: If no stored theme exists, or the stored value is not "red"/"purple", the app falls back to red; otherwise the valid stored value is used.