golden-simple

Deploy the current develop branch to the stage environment for this product. Do not implement code changes.

As a frontend developer, implement the CalculatorHeader section for the Calculator page. This section renders a `<header>` with class `ch-header` containing a `motion.div` (ch-inner) that animates in with `opacity: 0 → 1` and `y: -18 → 0` over 0.6s using a custom cubic-bezier ease. Inside, render a `ch-logo-row` containing: (1) a `motion.div` (ch-logo-mark) with a spring-based `whileHover` scale 1.08 + rotate 4deg effect wrapping an inline SVG calculator icon (rect + 6 lines), and (2) an `<h1>` (ch-title) with a `<span class='ch-title-accent'>golden</span>-simple` text. Below the logo row, a `motion.p` (ch-subtitle) reading 'Quick Calculator for Students' animates in with a 0.3s delay. A `motion.div` (ch-border-glow) animates `scaleX: 0 → 1` with a 0.5s delay for a bottom border reveal. Import and apply `CalculatorHeader.css`. This is the root section — no cross-page dependencies.

Deploy the current develop branch to the stage environment for this product. Do not implement code changes.

As a frontend developer, implement the CalculatorContainer section for the Calculator page. This is the core interactive calculator component using `useState` for `display` (init '0'), `expression`, `justComputed` (bool), and `activeOp`; plus a `useRef` (calcRef) for the calculator DOM node. Implement 3D tilt via `useMotionValue` for `mouseX`/`mouseY`, piped through `useSpring` (stiffness 120, damping 20, mass 0.8) and `useTransform` to derive `rotateX` (range [4,-4]) and `rotateY` (range [-4,4]) — applied to the calculator card's `motion.div` for a mouse-tracking tilt effect via `handleMouseMove` and `handleMouseLeave` callbacks. Implement `safeEval` that sanitizes the expression string (replaces `^` with `**`, strips non-arithmetic chars) and uses `new Function` for evaluation with `toPrecision(12)` rounding. Implement `handleNumber` (handles decimal/zero edge cases, respects `justComputed` reset), `handleOperator` (replaces trailing operator, sets `activeOp`), `handleEquals` (calls `safeEval`, appends ` = result` to expression), `handleClear` (resets all state), and `handleParenthesis`. Render a display area showing `expression` and `display`, and a button grid for digits, operators (+,-,*,/), equals, clear, parentheses, and exponent. Import and apply `CalculatorContainer.css`. Depends on CalculatorHeader being in place for page layout context.

As a frontend developer, implement the CalculatorFooter section for the Calculator page. This section renders a `<footer class='cf-root'>` with two animated content blocks. (1) A `motion.div` (cf-tips) uses `containerVariants` (staggerChildren: 0.06) with `whileInView` trigger (once, amount 0.3) to stagger-animate 4 tip cards from `tips` array — each `motion.div` (cf-tip) has `itemVariants` (opacity 0→1, y 16→0, spring stiffness 300 damping 24) plus `whileHover` scale 1.04 and `whileTap` scale 0.97, rendering a `cf-tip-icon` span and label text. (2) A `motion.div` (cf-pemdas) animates in via `whileInView` (opacity 0→1, y 20→0, spring stiffness 200 damping 22, delay 0.15) containing a title 'Order of Operations — PEMDAS' and a `motion.div` (cf-pemdas-grid) that uses the same `containerVariants` stagger to render 6 PEMDAS items (P/E/M/D/A/S) — each `motion.div` (cf-pemdas-item) with a `cf-pemdas-letter` div using a BEM modifier class (e.g., `cf-pemdas-letter--p`) for color coding, and a `cf-pemdas-label` with the operation name and hint symbol. Import and apply `CalculatorFooter.css`.