Domain Entities — react-frontend-app
Overview
This unit has no persisted backend entities. The "domain" here is the static content model and the theme model that drive rendering.
Entity Relationships
Text alternative: A ThemePreference selects a set of ThemeTokens; SiteContent aggregates NavLinks, one HeroContent, many PackageCards, many ProcessSteps, one AboutContent, and one ContactInfo (blue = stateful entity, orange = static value objects).
Entity Definitions
ThemePreference
| Field |
Type |
Required |
Description |
value |
'red' | 'purple' |
Yes |
Currently active theme; defaults to 'red' per BR-1 |
source |
'stored' | 'default' |
Yes |
Whether the value came from localStorage or the default fallback |
ThemeTokens
| Field |
Type |
Required |
Description |
bg, surface, surfaceAlt, line, text, muted |
string (hex) |
Yes |
Neutral palette tokens, taken 1-to-1 from the reference CSS variables |
accent, accentSoft, accentLine |
string (hex/rgba) |
Yes |
Accent palette tokens (red or purple variant), taken 1-to-1 from the reference CSS variables |
NavLink
| Field |
Type |
Required |
Description |
label |
string |
Yes |
Link text (e.g. "Pakketten") |
href |
string |
Yes |
Anchor target (e.g. "#pakketten") |
isCta |
boolean |
No |
Marks the "Start project" call-to-action link |
HeroContent
| Field |
Type |
Required |
Description |
eyebrow |
string |
Yes |
Small label above the heading |
heading |
string |
Yes |
Main H1 text |
lead |
string |
Yes |
Lead paragraph text |
codeLine |
string |
Yes |
The animated code-line snippet text |
PackageCard
| Field |
Type |
Required |
Description |
id |
string |
Yes |
e.g. pakket_01 |
title |
string |
Yes |
e.g. "Landingspagina" |
description |
string |
Yes |
Short description |
price |
string |
Yes |
e.g. "€ 300" or "Op maat" |
priceNote |
string |
Yes |
e.g. "eenmalig, excl. btw" |
features |
string[] |
Yes |
Bullet list of included features |
ctaLabel |
string |
Yes |
Button text |
featured |
boolean |
No |
Marks the "Meest gekozen" (most chosen) card |
ProcessStep
| Field |
Type |
Required |
Description |
label |
string |
Yes |
e.g. "stap 01 — intake" |
title |
string |
Yes |
e.g. "Kennismaken" |
description |
string |
Yes |
Step description |
AboutContent
| Field |
Type |
Required |
Description |
paragraphs |
string[] |
Yes |
About-section body paragraphs |
techStack |
{ label: string; value: string }[] |
Yes |
Tech-stack list items (Front-end, Back-end, API's, Focus) |
ContactInfo
| Field |
Type |
Required |
Description |
heading |
string |
Yes |
Contact section heading |
description |
string |
Yes |
Contact section body text |
email |
string |
Yes |
info@slpsoftware.nl |
mailSubject |
string |
Yes |
Prefilled mailto subject |