Pages and screens

Profile and settings

Two screens with one shape: a form with a Save button. Not a list, and not a dashboard.

Where they are

/profile is the person: avatar, name, contact details, the sections that describe them.
Settings opens from the gear in the header rather than a route, because it is something you adjust while working rather than a place you navigate to. Appearance, theme, layout and direction all live there.

Settings is page type 4

One bordered card of sections with a fixed Save footer. Not a data table, and not a dashboard. The footer stays visible while the content scrolls, so the Save button is never something a reader has to find.

the shape

<div className="flex h-full flex-col">
  <PageChrome title="Settings" />
  <div className={PAGE_SCROLL}>
    <Card>
      <Section title="Profile">…</Section>
      <Section title="Notifications">…</Section>
    </Card>
  </div>
  <footer className="border-t border-border p-4">
    <FormActions />        {/* fixed, outside the scroll */}
  </footer>
</div>

⚠️ A settings screen that saves nothing is a trap

The Save button in the demo updates component state. Wire it to your API before shipping, and until you do, do not leave it looking enabled: a control that looks live and discards the press is worse than one that is absent.

What you connect

The account. Name, email and avatar are demo values.
Persistence. Theme and layout choices survive a reload because they are stored locally; nothing else is stored anywhere.
Password and security. The fields are inputs. There is no auth system behind them.