2.2 KiB
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.