sweet-project

As a frontend developer, implement the CalculatorDisplay section for the Calculator page. This section renders the calculator's output panel using two key areas: a `cd-expression` div (aria-live='polite') showing the current in-progress expression from state, and a `cd-result` div wrapped in Framer Motion's `AnimatePresence` with `mode='popLayout'` for spring-animated result transitions (opacity 0.6→1, y: 8→0, stiffness 300, damping 25). Uses `useState` for `expression` and `result` ('0' default), and `useRef` for the root element. GSAP animates a CSS custom property `--cd-glow` on mouseenter/mouseleave events (power2.out 0.4s in, power2.inOut 0.6s out) to create a shimmer background effect. Listens for custom `calc-update` window events (dispatched by CalculatorKeypad) via `e.detail.expression` and `e.detail.result` to update display state. Component is self-contained with no props — state is driven entirely by custom events.

As a frontend developer, implement the CalculatorKeypad section for the Calculator page. This section renders a 19-button grid layout (`ck-grid`) using a static `keypadButtons` array defining each button's `label`, `type` (clear, function, operator, number, equals), and optional `span` flag for the zero button. Each button is a Framer Motion `motion.button` with three animation variants: `rest` (scale 1), `hover` (scale 1.03), `tap` (scale 0.95), using a shared `springTransition` (stiffness 400, damping 20, mass 0.8). Button click handler `handlePress` (memoized with `useCallback`) dispatches a custom `calc-input` window event with `{ key: label }` detail — this event drives the CalculatorDisplay's `calc-update` response. CSS classes are dynamically applied as `ck-btn ck-btn--{type}` with `ck-btn--zero` for the spanning zero button. No internal state — fully event-driven output.

As a frontend developer, implement the CalculatorFooter section for the Calculator page. This is a simple static `<footer>` with class `cfooter-root` containing a Framer Motion `motion.p` that animates in on mount (opacity 0→0.85, y: 6→0, duration 0.6s, delay 0.3s, easeOut). The paragraph displays the text 'sweet-project calculator' followed by a decorative `<span className='cfooter-dot' />` separator and the tagline 'simple & reliable'. No state or interactivity — purely presentational with entrance animation. Component may be reusable across pages if the project expands.