Every note gets its own page and its own metadata

Each note in this section has its own URL. Tap the card and you land on a standalone page at /notes/the-note-id. The page is statically generated at build time using generateStaticParams — Next.js reads every entry in the notes array and pre-renders a page for each one. No server-side rendering on request, no loading spinner, no API call. The HTML exists before anyone visits. Each page also gets its own metadata through generateMetadata. The title becomes the note title plus a suffix. The description is the first 160 characters of the body text. OpenGraph and Twitter cards are generated automatically so sharing a note on social media shows a proper preview with the correct title and excerpt. The note page itself is a narrow single-column article with a back link to the full notes list, a type badge showing whether it is a thought, update, building, or tip entry, a timestamp formatted for the UK, tag pills colour-coded by service area, and the full body text at a comfortable reading width. The service accent for the notes section is pink — set as a CSS custom property on the root div so the ServiceNav breadcrumb, the back link, and any accent elements all inherit the same colour without hardcoding it. At the bottom of every note page there is a placeholder for comments — sign in with TikTok to leave a comment, coming soon. The comment system is not built yet but the space is already reserved in the layout. When it ships, it will slot in without touching any of the surrounding markup. One TypeScript object per note, one static page per note, one metadata function per note, zero runtime database queries.