jade-hello

As a frontend developer, implement the HomeHero section for the Home page. This section uses `useScroll` and `useTransform` from framer-motion to create a multi-layer parallax effect: background particle field moves at 0.3x scroll speed (`bgY`) and midground glow blobs move at 0.6x scroll speed (`midY`). The `buildParticles` deterministic PRNG function generates 12 (mobile) or 26 (desktop) particle objects with `left`, `top`, `size`, `gold`, `delay`, and `duration` properties. Each particle is rendered as a `motion.span` with `opacity` and `scale` keyframe animations that loop infinitely with `repeatType: 'reverse'`. Two midground blobs (`hh-blob--a`, `hh-blob--b`) provide ambient glow. The `useReducedMotion` hook disables parallax transforms for accessibility. A `useState`/`useEffect` combo detects mobile breakpoint at 768px via resize listener. The foreground content includes an eyebrow label, staggered title word animations, subtitle, and CTA button using `whileInView` triggers. Implement HomeHero.css with particle positioning, gold particle variant styling, blob gradient definitions, and responsive layout.

As a frontend developer, implement the HomeGreetingCard section for the Home page. This section renders an interactive 3D flip card using `useState` for `flipped` and `hovered` state. The `motion.div` stage listens to `onHoverStart`/`onHoverEnd` to animate `y: -8` and `scale: 1.02` on hover, and `onClick`/`onKeyDown` (Enter/Space) to toggle `flipped`. The inner `motion.div` card animates `rotateY` between 0 and 180 degrees with a spring transition, and its `boxShadow` shifts between a subtle and elevated blue glow based on `hovered` state. The front face contains static greeting content; the back face reveals the friendly message. Letter-by-letter stagger animations use `letterParent` and `letterChild` framer-motion variants with `staggerChildren: 0.05` and spring physics (`stiffness: 320, damping: 18`). The `greetingWords` array drives the animated text. Two decorative parallax layers (`hgc-layer-bg`, `hgc-layer-mid`) use CSS custom property `--scroll` for passive depth effect with blob and dot decorations. Implement HomeGreetingCard.css with 3D perspective, backface-visibility, card face positioning, blob/dot styling, and responsive layout.

As a frontend developer, implement the HomeEngagement section for the Home page. This section features a `MagneticButton` sub-component that uses `useRef`, `useState` (for `offset` and `particles`), and `useCallback` for performance. On `mousemove`, it calculates normalized dx/dy relative to button center and clamps magnetic offset to ±4px, animating the wrapper via `motion.div` with spring physics (`stiffness: 350, damping: 18`). On click, the `burst` function generates 10 radially-distributed particle objects (angle-based x/y positions with random distance 34–60px) rendered via `AnimatePresence` as `motion.span` elements that animate from `opacity:1, scale:1` to `opacity:0, scale:0.3` over 650ms. `INSTRUCTION_WORDS` array drives a staggered word-reveal animation using `containerVariants` (`staggerChildren: 0.08`) and `wordVariants` (spring `stiffness: 260, damping: 20`), triggered by `useInView`. The `onActivate` prop callback connects the button to parent interaction logic. Implement HomeEngagement.css with magnetic button styles, particle absolute positioning, word stagger layout, and accent color highlights using `#4A90E2` and `#FFD700`.

As a backend developer, implement the FastAPI greeting endpoint for the jade-hello application. Create a GET /api/greeting endpoint that returns the greeting message JSON payload (e.g., {"message": "Hello there friend."}). Include CORS middleware configuration to allow requests from the frontend origin. Ensure the response time is within 2 seconds as per non-functional requirements. Add basic health check endpoint at GET /health. Note: Frontend section tasks (HomeGreetingCard, HomeHero, HomeEngagement) may depend on this API for any dynamic content.

As a Frontend Developer, set up the global design system and theme configuration for jade-hello. Create a CSS variables file or theme constants module defining all brand colors: primary (#4A90E2), primary_light (#A6C8FF), secondary (#FF6F61), accent (#FFD700), highlight (#FFA500), bg (#FFFFFF), surface (rgba(255,255,255,0.8)), text (#333333), text_muted (#777777), and border (rgba(0,0,0,0.1)). Configure global CSS resets, base typography, and responsive breakpoints. Install and configure framer-motion as the animation library. This task must be completed before all frontend section tasks (03e6a48e, 45892299, ef7739ce) can be fully styled.