Sunsam Bhai ko Galat sabit krna

As a frontend developer, implement the CalculatorHero section for the Calculator page. This full-viewport hero uses framer-motion's useScroll and useTransform hooks to create parallax depth: bgY transforms scrollY [0,1000] to [0,-200] for the background layer and midY to [0,-120] for the midground. The section renders three layers: (1) a motion.div background layer (ch-bg-layer) containing a motion.div with animate={{ background: bgGradient }} transitioning between four COLOR_PALETTES (morning, afternoon, evening, night) every 8 seconds via setInterval cycling through phases array; (2) a ch-midground layer displaying 8 floating MATH_SYMBOLS ('+','−','×','÷','=','%','√','π') as ch-float-symbol spans; (3) decorative corner accents. getTimePhase() reads new Date().getHours() to initialize the phase state. contentVariants uses staggerChildren:0.15 with cubic-bezier [0.22,1,0.36,1] easing. bgGradient is a 135deg linear-gradient built from palette.from, palette.via, palette.to values.

As a frontend developer, implement the CalculatorDisplay section for the Calculator page. This component accepts input, result, and showResult props. It manages two state hooks: inputKey (incremented via useEffect on input changes to trigger re-render key for AnimatePresence) and glowing (boolean set true for 600ms via setTimeout when showResult && result !== '0'). The cd-display-panel uses whileHover={{ y:-4, boxShadow }} with spring transition (stiffness:300, damping:25) and conditionally applies cd-display-panel--glowing class. The input line uses AnimatePresence mode='wait' with key={inputKey} and animate={{ scale:[1,1.05,1] }} spring transition (stiffness:400, damping:20). The result line uses AnimatePresence with initial={{ opacity:0, scale:0.95 }}, animate with scale pulse and boxShadow glow animation ['0 0 0px #F4A261','0 0 16px #F4A261','0 0 0px #F4A261'] when glowing is true. Two decorative cd-deco-orb divs use CSS var(--scroll) parallax at -0.2px multiplier.

As a frontend developer, implement the CalculatorNumberPad section for the Calculator page. This component accepts onNumberInput callback prop and manages clickedBtn state (set to button value on click, reset to null after 180ms timeout via useCallback). NUMBER_BUTTONS array contains 11 entries (7,8,9,4,5,6,1,2,3,0,.) rendered as an 11-item cnp-grid. Each motion.button uses springTransition (stiffness:300, damping:20) with whileHover={{ y:-12, scale:1.08, boxShadow:'0 8px 32px rgba(0,0,0,0.25)' }} and whileTap={{ scale:0.95, y:0 }}. Buttons conditionally receive cnp-btn--clicked class. Each button contains an AnimatePresence-wrapped motion.span (cnp-btn-flash) that appears when clickedBtn matches the button value, animating initial={{ opacity:0.45 }} to animate={{ opacity:0 }} over 0.3s for click flash effect. Two parallax layers use CSS var(--scroll) at -0.2px and -0.4px multipliers for depth orbs (cnp-parallax-orb--1, --2, --3).

As a frontend developer, implement the CalculatorOperators section for the Calculator page. This component accepts onOperatorInput and activeOperator props. OPERATOR_MAP maps id strings (plus/minus/multiply/divide) to math symbols (+/-/*/÷). SYMBOL_TO_ID reverses this mapping. The operators array contains 4 entries each with id, symbol (Unicode: '−' \u2212, '×' \u00D7, '÷' \u00F7), label, color (#2A9D8F/#E76F51/#F4A261/#E9C46A), className, and activeClass. activeId is derived from SYMBOL_TO_ID[activeOperatorProp]. Each motion.button applies co-button, op.className, and conditionally op.activeClass. whileHover applies y:-12, scale:1.08, and a color-specific boxShadow using `${op.color}66` and `${op.color}44` opacity suffixes. Active buttons receive inline style with borderColor and boxShadow set to op.color. The co-card wrapper has initial={{ opacity:0, y:30 }} entrance animation and CSS parallax at -0.5px. Two parallax blobs (co-parallax-blob-1, --2) use -0.3px multiplier.

As a frontend developer, implement the CalculatorActions section for the Calculator page. This component accepts onEquals and onClear callbacks. It manages equalsPulsing (true for 450ms on equals click) and clearPulsing (true for 350ms on clear click) boolean states. The ca-actions__parallax-layer contains a decorative SVG (100% width, viewBox 0 0 600 120, opacity 0.06) with three circles: cx=100 fill var(--accent,#F4A261), cx=500 fill var(--secondary,#E76F51), cx=300 fill var(--primary,#2A9D8F). The Equals button uses buttonSpring (stiffness:400, damping:25) with whileHover={{ scale:1.12, y:-12, boxShadow with rgba(244,162,97,0.35) }} and whileTap={{ scale:0.95 }}. An AnimatePresence-wrapped ca-actions__pulse-overlay motion.div appears when equalsPulsing, animating opacity:[0.8,1.0,0.8] with backgroundColor '#F4A261' over 0.4s. The Clear button mirrors this pattern with rgba(231,111,81,0.35) hover shadow and '#E76F51' pulse backgroundColor over 0.35s duration. Content wrapper applies CSS parallax at -0.5px multiplier.

As a backend developer, implement the FastAPI health check endpoint (GET /health) that returns application status, version, and database connectivity status. This serves as the foundation for all other backend work and docker-compose/k8s readiness probes. Include response model with status, version, and uptime fields.

As a frontend developer, create the API client service layer (src/services/calculatorService.js or .ts) using fetch or axios to communicate with the FastAPI backend. Implement calculateExpression(operand1, operand2, operator) function that calls POST /api/calculate. Include error handling for network failures, division by zero (HTTP 400), and server errors (HTTP 500). Export typed response interfaces. This service will be consumed by the CalculatorActions section's onEquals callback and the CalculatorDisplay section for result rendering. Note: CalculatorActions task (7b57e934) should integrate this service in the onEquals handler.

As a frontend developer, create the global theme CSS file (src/styles/theme.css) with all CSS custom properties from the SRD: --primary:#2A9D8F, --primary-light:#A8DADC, --secondary:#E76F51, --accent:#F4A261, --highlight:#E9C46A, --bg:#F1FAEE, --surface:rgba(42,157,143,0.8), --text:#264653, --text-muted:#8D99AE, --border:rgba(233,69,96,0.2). Include font-family ('Inter', -apple-system), global resets, and --scroll CSS variable declaration for parallax. This is a prerequisite for all section CSS files.