mammoth-calculator

As a frontend developer, implement the Navbar section for the Landing page. Build the `Navbar` component using `useState` (menuOpen, scrolled) and `useEffect` for scroll detection (`window.scrollY > 40` threshold) and body overflow locking when mobile menu is open. Render an animated SVG logo with `motion.rect` path-draw animations (`strokeDashoffset` from 128→0 and 56→0) using framer-motion. Implement the mobile slide-in menu with `menuVariants` (x: '100%'→0), `overlayVariants` (opacity), and staggered `linkContainerVariants`/`linkItemVariants` for nav links (Landing, BasicCalculator, ScientificCalculator). Apply `nb-bar--scrolled` class conditionally. Note: this component may already exist from a previous page if Navbar is shared.

As a Frontend Developer, set up the global theme and design system for the Mammoth-Calculator app. Define CSS custom properties and/or a theme config file for all SRD-specified colors: primary (#1A5276), primary_light (#5499C7), secondary (#D35400), accent (#F1C40F), highlight (#F39C12), bg (#F4F6F7), surface (rgba(255,255,255,0.9)), text (#2C3E50), text_muted (#7F8C8D), border (rgba(44,62,80,0.2)). Set up global font styles, reset CSS, and any shared utility classes. Ensure theme tokens are consumable by all page components.

As a Backend Developer, initialize Alembic for database migrations with MySQL/MariaDB. Set up alembic.ini, env.py, and the versions/ directory. Create an initial migration baseline. Define any application-level tables needed (e.g., calculation history or locale settings if required). Ensure the migration scripts run cleanly on docker-compose startup and in Kubernetes. Note: The SRD specifies MySQL or MariaDB with Alembic; even a minimal schema baseline is required.

As a frontend developer, implement the `LandingHero` section for the Landing page. Use `useRef` + `useInView` (margin: '-80px', once: true) to trigger scroll-based entrance. Animate the headline ('Powerful Calculator, Anywhere') character-by-character using `charVariants` (opacity 0→1, y 24→0, rotateX -40→0) with per-character stagger delay (`i * 0.03`). Animate subheadline words with `wordVariants` (delay: 0.6 + i*0.06). Render a `badgeVariants` badge and CTA buttons via `ctaContainerVariants`/`ctaItemVariants` with staggerChildren 0.12, delayChildren 1.2. Implement `MagneticButton` sub-component using `useRef`, `useState` offset {x,y}, `onMouseMove`/`onMouseLeave` with 0.2 magnetic factor and spring animation (stiffness 250, damping 18, mass 0.6). Render animated gradient background (`lh-gradient-bg`), parallax shape layer (`lh-parallax-bg`, transform based on CSS `--scroll` variable), and `lh-shape` decorative elements.

As a frontend developer, implement the `LandingFeatures` section for the Landing page. Render three feature items from the `FEATURES` array (arithmetic, scientific, switching) using `useState` for active selection. Implement `ModeToggle` sub-component with `useState(isScientific)` controlling a slide toggle UI. Render custom SVG icon components: `CalcIcon`, `ScienceIcon`, `ToggleIcon` mapped via `iconMap`. Use `AnimatePresence` for feature detail transitions. Each feature card shows title, hint, description, example (when non-null), and exampleIcon. Apply framer-motion entrance animations for cards and use `motion` + `AnimatePresence` for toggling active feature content.

As a frontend developer, implement the `LandingCalculator3D` section for the Landing page. Build an interactive 3D calculator using `@react-three/fiber` (`Canvas`, `useFrame`), `@react-three/drei` (`OrbitControls`, `RoundedBox`, `Text`), and `three` (THREE). Implement `CalcButton3D` sub-component with `useRef`, `useState(pressed)`, `targetY`/`currentY` refs, and `useFrame` for smooth press animation (currentY lerp toward -0.06 on press). Use `CALC_BUTTONS` layout data (5 rows including wide '0' button) with color-coded keys: clear (#D35400), operator (#F39C12), function (#5499C7), digit (#2C3E50). Handle `onPointerDown`, `onPointerUp`, `onPointerOver`, `onPointerOut` events with cursor changes. Wrap in a `motion`/`AnimatePresence` overlay for display readout. Use `useMemo`, `useRef`, `useEffect`, `useState` for calculator state management and scene orchestration.

As a frontend developer, implement the `LandingModes` section for the Landing page. Use `useState('basic')` for `activeMode` toggling between 'basic' and 'scientific' tabs. Render `basicOps` (4 items: +, −, ×, ÷) and `scientificOps` (4 items: sin, log, xⁿ, π) operation arrays. Implement `FlipCard` sub-component with `useState(flipped)`, handling `onClick`, `onMouseEnter` (flip true), `onMouseLeave` (flip false) interactions. Each FlipCard renders a front face (symbol, name, desc, arrow SVG) and back face (example, label) using CSS 3D perspective transform with `lm-flip-card--flipped` class. Animate card entrance with `whileInView` (opacity 0→1, y 20→0, once: true, margin: '-40px'). Render a column-level hover handler (`handleColumnEnter`) that sets activeMode.

As a frontend developer, implement the `LandingUserFlows` section for the Landing page. Render two `FlowPath` sub-components: one for `basicSteps` (5 steps) and one for `scientificSteps` (5 steps), controlled by a `variant` prop ('basic'/'scientific'). In `FlowPath`, use `useRef` (svgRef, pathRef, stepsContainerRef, timelineRef), `useState` (pathLength, activeSteps), and `useEffect` to measure SVG path `getTotalLength()` and initialize GSAP `strokeDashoffset`. Animate the SVG connector path draw via `gsap.timeline()` triggered by `sectionInView` prop (from parent `useInView` with `margin: '-80px'`). Reveal step indicators sequentially by pushing to `activeSteps` state. Each step renders title and desc text. Import `gsap` for path and step animations alongside `framer-motion`'s `useInView`.

As a frontend developer, implement the `LandingStats` section for the Landing page. Render 4 `StatCard` sub-components from `STATS` array (50ms, 15+, 100%, 2s) using `useInView` on a wrapper ref. Each `StatCard` uses `useRef` (numberRef, progressRef), `hasAnimated` ref guard, and framer-motion `animate()` to count up from 0 to `stat.number` over 1.6s with `delay: index * 0.15` and ease `[0.22, 1, 0.36, 1]`. On each `onUpdate`, update `numberRef.current.textContent` and calculate SVG ring `strokeDashoffset` from `RING_CIRCUMFERENCE * (1 - progress)` where `RING_RADIUS=48` and `RING_CIRCUMFERENCE=2*Math.PI*48`. Render Lucide icons (`Zap`, `Target`, `Smartphone`, `Sliders`). Animate card entrance with `motion.div` (opacity 0→1, y 40→0) staggered by `index * 0.12`.

As a frontend developer, implement the `LandingPerformance` section for the Landing page. Use `useRef` + `useInView` (once: true, margin: '-60px') to trigger entrance animations. Render 4 performance cards from `performanceCards` array (speed, responsive, locale, scalable) using Lucide icons (`Zap`, `Smartphone`, `Globe`, `Server`). Animate cards via `staggerContainer` variants (staggerChildren: 0.1, delayChildren: 0.05) and `cardVariants` (opacity 0→1, y 24→0). Animate bottom border accent with `borderVariants` (scaleX 0→1, delay 0.3). Animate section header with `headerVariants` (opacity 0→1, y 16→0). Render parallax decorative layer (`lp-parallax-mid`) with 3 blob shapes (`lp-deco-blob--1/2/3`) using CSS `--scroll` variable transform at -0.5px multiplier. Each card shows `metric`, `title`, `desc`, and icon.

As a frontend developer, implement the `LandingUseCases` section for the Landing page. Render two `PersonaCard` sub-components from `personas` array (Basic User / Student & Professional, Scientific User / Researcher & Educator). Each `PersonaCard` uses `useState(isActive)` toggled by `onHoverStart`/`onHoverEnd` and `onTouchStart`. Apply `cardVariants` with rest/hover states (backgroundColor rgba transitions). Each card features an animated morphing SVG using `motion.path` animating between `pathResting` and `pathActive` d-attribute values, and `innerResting`/`innerActive` stroke paths, keyed by `isBasic` variant. Render persona quote, author attribution, description paragraph, and a CTA `motion.a` linking to `/BasicCalculator` or `/ScientificCalculator`. Apply variant-specific stroke and fill colors (`strokeColor`, `fillColor`).

As a frontend developer, implement the `LandingCTA` section for the Landing page. Use `useState(bursts)`, `useRef(sectionRef)`, and `useInView` (once: true, margin: '-80px'). Implement `createParticles(x, y)` factory that generates 14 particles with random angle/distance spread, random size (4-9px), and colors from `PARTICLE_COLORS` (['#F1C40F','#F39C12','#5499C7','#ffffff','#D35400']). Render `ParticleBurst` sub-component using `AnimatePresence` with `onExitComplete` cleanup; each particle animates opacity 1→0, scale 1→0, x/y→tx/ty over 0.6s easeOut. Animate section headline with `headlineVariants` (y 30→0), subheadline with `subheadlineVariants` (delay 0.15), CTA buttons via `buttonContainerVariants` (staggerChildren 0.12, delayChildren 0.35) and `buttonVariants`. Apply pulsing glow keyframe animations (`glowPrimary`, `glowSecondary`) to primary and secondary CTA buttons. Render trust indicators with `trustVariants` (delay 0.6).

As a frontend developer, implement the `Footer` section for the Landing page. Render 4 link columns from `linkColumns` array (Product, Docs, Support, About) each with 4 `FooterLink` sub-components. Each `FooterLink` uses `useState(hovered)` with `onMouseEnter`/`onMouseLeave` and renders a `motion.div` underline that animates `scaleX` 0→1 on hover (duration 0.3, easeOut). Render `SocialIcon` sub-components using `motion.div` with `whileHover` (rotate 180°, scale 1.2, duration 0.3 easeInOut). Render a parallax decorative background layer (`ftr-parallax-bg`) with 3 shape divs using CSS `--scroll` variable at -0.2px multiplier. Render brand logo area with `ftr-logo-icon` 'M' monogram and brand name 'mammoth-calculator'. Note: this Footer component may already exist from another page if shared. Note: this Footer component may already exist from a previous page if Footer is shared.