Event-planner

As a frontend developer, implement the LandingHero section for the Landing page. Build a React Three Fiber `Canvas` scene containing a `BlobField` group of 10 `Blob` mesh components, each using `icosahedronGeometry` with `meshStandardMaterial` (flatShading, transparent, emissive glow). Each `Blob` uses `useFrame` for per-frame animation: sinusoidal Y drift, cosine X drift, rotation on X/Y axes, scroll-driven depth parallax via a `scrollRef`, and smooth scale interpolation on hover. The `BlobField` group tilts in response to mouse position tracked by `useMousePosition` hook (global `mousemove` listener). Include `OrbitControls` from `@react-three/drei`. Overlay `motion` (framer-motion) headline and CTA content with `initial/whileInView` entrance animations. Wire `scrollRef` to track `window.scrollY` for blob parallax. Install dependencies: `@react-three/fiber`, `@react-three/drei`, `framer-motion`.

As a frontend developer, implement the LandingValueProposition section for the Landing page. Render a `VALUE_CARDS` array of 3 cards — `AI-Powered Recommendations` (linking to `/Signup`, color `#1E90FF`, `SparkIcon`), `Local Event Discovery` (linking to `/Events`, color `#FF6347`, `MapPinIcon`), and `Build Your Itinerary` (linking to `/Itinerary`, color `#32CD32`, `RouteIcon`). Each card renders an inline SVG icon, title, description, and a CTA anchor. Include three decorative parallax blobs (`lvp-blob-a/b/c`) using CSS custom property `--scroll` for `translateY` parallax transforms. Wrap card content with framer-motion `motion` components for entrance animations. Use `ArrowIcon` SVG for card CTA arrows. Apply `lvp-root`, `lvp-inner`, `lvp-decor` layout classes.

As a frontend developer, implement the LandingEventMap section for the Landing page. Build a React Three Fiber `Canvas` 3D scene using `@react-three/drei`'s `Float` and `Html` components to render 10 event pin meshes positioned by `x`/`z` coordinates from the `EVENTS` array (covering Music, Food, Sports, Arts, Outdoors categories with their hex colors from `CATEGORIES`). Use `d3-scale` `scaleSequential` and `d3-interpolate` `interpolateRgbBasis` for color gradients, and `THREE` from `three` for geometry. Use `useRef`, `useMemo`, `useState`, `useEffect`, `useCallback` for pin state management and selection. Implement `AnimatePresence` + `motion` (framer-motion) for an animated event detail panel/tooltip that appears on pin selection, showing title, category, date, time, location, price, and description. Include `OrbitControls` for map navigation. Render a category filter bar using the `CATEGORIES` object. Requires: `three`, `@react-three/fiber`, `@react-three/drei`, `d3-scale`, `d3-interpolate`, `framer-motion`.

As a frontend developer, implement the LandingFeatures section for the Landing page. Render a `features` array of 6 feature cards — Smart Recommendations (`SparklesIcon`, `tone: primary`), Budget Filtering (`WalletIcon`, `tone: secondary`), Real-Time Notifications (`BellIcon`, `tone: primary`), Itinerary Planner (`RouteIcon`), Organizer Toolkit (`ToolboxIcon`), and Social & Groups (`UsersIcon`). Each card includes an inline SVG icon component, title, and description text. Wrap cards with framer-motion `motion` for staggered `whileInView` entrance animations. Apply `tone` class variants (`primary`/`secondary`) for accent color theming. Use `lf-root`, `lf-inner`, `lf-grid` layout classes from `LandingFeatures.css`.

As a frontend developer, implement the LandingUserJourney section for the Landing page. Render two journey variants: `userJourney` (kicker: `For Explorers`, CTA→`/Signup`) and `organizerJourney` (kicker: `For Hosts`, CTA→`/Advertise`), each with 4 steps. Implement a `CountBadge` component that uses framer-motion `useMotionValue` and `animate` to count-up a numeric value when in view (tracked via `useInView` hook), with a `delay` prop for staggered entrance. Use `motion` from framer-motion for step card entrance animations with `useInView` triggering. Render `UserIcon` and `OrganizerIcon` SVG components as journey type indicators, and `Arrow` SVG components between journey steps. Apply `luj-root`, journey variant CSS classes from `LandingUserJourney.css`. Use `useState`, `useEffect`, `useRef` for in-view tracking and animated counter state.

As a frontend developer, implement the LandingCTA section for the Landing page. Build a `LandingCTA` component with a magnetic button effect: track mouse position relative to `primaryRef` button center and compute clamped `dx`/`dy` offsets (±15px, 0.35 factor) stored in `magnet` state, applied as CSS transforms. Detect touch devices via `useMemo` with `window.matchMedia('(hover: none)')` to disable magnet on touch. Implement a particle burst animation on button click: generate 14 particles using `useMemo` in a radial pattern with `PARTICLE_COLORS` (`#FFB703`, `#7C3AED`, `#06B6D4`, `#A78BFA`), render via `AnimatePresence` keyed bursts stored in `bursts` state array, auto-removed after 900ms via `setTimeout`. Render 5 decorative `SHAPES` (`lcta-shape-a` through `lcta-shape-e`) with scroll parallax speeds (0.18–0.42). Wrap headline and CTA content in `motion.div` with `whileInView` entrance (`opacity 0→1`, `y 40→0`). Apply `lcta-root`, `lcta-decor`, `lcta-halo`, `lcta-eyebrow`, `lcta-content` layout classes.

As a frontend developer, implement the Footer section for the Landing page. Render a `linkColumns` array of 3 columns — Product (`/Events`, `/Landing`, `/Itinerary`, `/Notifications`), Company (`/Signup`, `/Advertise`, `/OrganizerProfile`, `/Analytics`), Resources (`/Onboarding`, `/Dashboard`, `/EventRegistration`, `/Login`) — as anchor link lists. Render social icon links using `LinkedInIcon`, `GitHubIcon`, and `TwitterIcon` inline SVG components from the `socials` array. Implement a scroll-to-top button with an `ArrowUpIcon` SVG (`ftr-ring-arrow` class) that calls `window.scrollTo`. Use `useState` and `useEffect` to track scroll position for show/hide behavior of the back-to-top button. Wrap footer content in framer-motion `motion` components for entrance animations. Apply `ftr-root`, `ftr-columns`, `ftr-social`, `ftr-ring-arrow` CSS classes. Note: this component may already exist from a previous page — reuse if available.

As a frontend developer, implement the Navigation section for the Signup page. This component may already exist from the Landing page (task 67b1be90-0748-4aa1-a945-3ef278ca9464) — reuse if available. The Navigation component uses useState for mobile menu open/close toggling, renders a navLinks array of 7 links (Home, Events, Dashboard, Itinerary, Advertise, Notifications, Profile), displays a MapPin lucide icon in the logo with 'Weekendly' branding and 'AI Weekend Planner' subtitle, includes nv-burger button with aria-expanded and three span children for hamburger animation, and renders nv-mobile dropdown with nv-show class toggle. Desktop actions include 'Log in' (nv-login) and 'Get Started' (nv-cta) links. All mobile links call closeMenu() onClick.

As a frontend developer, implement the Navigation section for the Login page. This component may already exist from previous pages (Landing, Signup). It uses a `useState` hook for `open` (mobile menu toggle), renders a `nv-root` nav with logo (MapPin icon from lucide-react, 'Weekendly' brand text), a desktop `nv-links` list mapping 7 navLinks (Home, Events, Dashboard, Itinerary, Advertise, Notifications, Profile), and `nv-actions` with Log in / Get Started CTAs plus a hamburger `nv-burger` button that toggles `nv-open` class. Mobile menu renders `nv-mobile`/`nv-show` classes conditionally with `nv-mobile-list` and `nv-mobile-actions`. All mobile links call `closeMenu()` on click. Reuse existing Navigation component if available from Landing page task.

As a Backend Developer, implement user profile management API endpoints using FastAPI. Include: GET /api/users/{user_id} (get profile), PUT /api/users/{user_id} (update profile), PATCH /api/users/{user_id}/interests (update interests array), GET /api/users/{user_id}/saved-events (list saved events), POST /api/users/{user_id}/saved-events (save event), DELETE /api/users/{user_id}/saved-events/{event_id} (unsave event), GET /api/users/{user_id}/notifications (list notifications), PATCH /api/users/{user_id}/notifications/{notif_id}/read (mark as read). Note: Frontend tasks that depend on this include NotificationsList (05acfded), NotificationsFilters (cb4fdbc9), and Profile page components.

As a Backend Developer, implement core events API endpoints using FastAPI. Include: GET /api/events (list events with filtering: category, budget_min, budget_max, date_from, date_to, distance_km, lat, lng, search_query, page, limit), GET /api/events/{event_id} (event detail), POST /api/events (create event — organizer only), PUT /api/events/{event_id} (update event), DELETE /api/events/{event_id} (delete event), GET /api/events/trending (trending events), GET /api/events/featured (featured events), GET /api/events/recommendations (personalized recommendations based on user interests). Use MySQL/MariaDB with SQLAlchemy ORM. Note: Frontend tasks that depend on this include EventBasicInfo (a32d06fe), EventLocationSchedule (191da935), ItineraryTimeline (cec86041), ItineraryHeader (9c8cb62f) and Events page components.

As a Backend Developer, implement organizer profile and event registration API endpoints using FastAPI. Include: POST /api/organizers (register as organizer), GET /api/organizers/{organizer_id} (get organizer profile), PUT /api/organizers/{organizer_id} (update organizer profile including social links, banking info), GET /api/organizers/{organizer_id}/events (list organizer's events), POST /api/events/register (full event registration with details, location, schedule, budget, tags, images), PUT /api/events/{event_id}/publish (publish event), POST /api/events/{event_id}/images (upload event cover image). Secure banking fields with encryption at rest. Note: Frontend tasks that depend on this include OrganizerProfileForm (64df7869), OrganizerProfileHeader (82ec7f60), OrganizerProfileBanking (166ae908), OrganizerProfileSocial (936d807c), OrganizerProfileActions (d3992504), EventBasicInfo (a32d06fe), EventDetailsForm (11bd2064), EventLocationSchedule (191da935), EventReviewSubmit (21b517ca), EventRegistrationHeader (871c20f5).

As a Frontend Developer, set up global state management for the AI Weekend Planner React application. Implementation: (1) Configure React Context + useReducer (or Zustand if preferred) for: AuthContext (currentUser, token, login/logout actions), EventsContext (filters, search query, saved events), ItineraryContext (current itinerary, events list, budget tracking), NotificationsContext (unread count, notifications list); (2) Create custom hooks: useAuth(), useEvents(), useItinerary(), useNotifications() for consuming context; (3) Implement axios instance with JWT interceptors (auto-attach Authorization header, handle 401 refresh token flow); (4) Create a centralized API service layer (api/auth.js, api/events.js, api/itinerary.js, api/notifications.js, api/organizer.js, api/analytics.js) wrapping all backend endpoints; (5) Set up React Query or SWR for server state caching and revalidation. Note: This is a prerequisite for all integration tasks.

As a Backend Developer, implement cross-cutting backend middleware and security configurations for the FastAPI application. Implementation: (1) JWT authentication middleware using python-jose — verify token on protected routes, inject current_user dependency; (2) Role-based access control (RBAC) — user vs organizer role guards via FastAPI dependencies; (3) CORS middleware configuration allowing frontend origins; (4) Rate limiting middleware (slowapi) to prevent abuse on auth endpoints; (5) Request/response logging middleware; (6) Global exception handlers for 400/401/403/404/422/500 responses with consistent error schema; (7) Input validation with Pydantic v2 models for all request bodies; (8) Environment configuration using pydantic-settings (DATABASE_URL, JWT_SECRET, LITELLM_API_KEY, CORS_ORIGINS). All other backend tasks depend on this foundation.

As a frontend developer, implement the InterestSelector section for the Onboarding page. This is Step 1 of 5 in the onboarding flow. It renders a 12-item interest grid (Music, Food & Drink, Sports, Art & Culture, Film & Media, Gaming, Travel, Literature, Fitness, Photography, Science & Tech, Social & Networking) with lucide-react icons and eventCount badges. State is managed via useState([]) for selected interest IDs. toggle() adds/removes IDs from the selected array; selectAll() maps all interest IDs; clearAll() resets to []. Quick action buttons (Select All, Clear All) are conditionally disabled via isAllSelected and hasSelection flags. An is-counter span displays live selection count. Uses framer-motion motion and AnimatePresence for card entrance/exit animations. Includes is-ambient decorative background div and is-step-badge with Sparkles icon.

As a frontend developer, implement the LocationPreferences section for the Onboarding page. Features a city search input with live filtering against citySuggestions array (10 US cities with lat/lng) via filteredCities computed from query state. showSuggestions dropdown is toggled on input focus/blur managed with searchRef and inputRef. handleSelectCity populates the query field and closes suggestions; handleClear resets query and selectedCity. A radius slider ranges from minRadius (5) to maxRadius (50) km controlled by radius useState(15). savedLocations state initialises from presetLocations (Home, Work, Gym with address/distance). handleAddLocation appends a new location from selectedCity with a generated 'star' iconKey; Trash2 button removes entries. activeLocationId useState tracks which saved location card is highlighted. iconMap and iconClassMap resolve lucide-react icons (Home, Briefcase, Dumbbell, Star) and CSS classes per iconKey. Uses framer-motion AnimatePresence for suggestion dropdown and location card animations. threeCanvasRef and animFrameRef suggest a canvas-based map preview is wired but abstracted. Also includes Navigation and Compass icons for UI chrome.

As a frontend developer, implement the BudgetPreferences section for the Onboarding page. This is Step 4 of 7 in the onboarding flow. Renders three budget tier cards (Budget-Friendly: Free–$25 with Zap icon, Moderate: $25–$100 with Star icon, Premium: $100+ with Sparkles icon) each with accentClass and iconClass CSS modifiers, feature tags, and description text. selectedTier useState(null) toggles card selection via handleTierSelect which also syncs maxBudget to tier.maxPrice. A range slider (0–500) controls maxBudget via handleSliderChange which reverse-maps to matched tier. sliderPercent computes fill width as percentage. estimateEventCount() returns a static event count based on maxBudget thresholds (45 to 310 events). matchedTier derived value highlights the tier matching current slider position. ArrowRight, DollarSign, Users, Music, UtensilsCrossed, Beer icons used for UI decoration. bp-step-badge includes animated step dot.

As a frontend developer, implement the NotificationSettings section for the Onboarding page. This is Step 6 of 7 in the onboarding flow. Manages toggles useState object with keys email (true), sms (false), in_app (true) and frequency useState('daily'). Three toggleItems (Email Notifications with Mail icon/ns-icon-email, SMS Alerts with MessageSquare/ns-icon-sms, In-App Notifications with Bell/ns-icon-app) are rendered in a ns-toggle-list. handleToggle flips individual boolean values. Frequency selector renders three ns-freq-btn buttons (Real-time, Daily Digest, Weekly Roundup) with ns-active class on selected value. enabledCount computed from Object.values(toggles).filter(Boolean).length for summary display. Uses framer-motion motion.div with layout, initial/animate/exit opacity+y transitions and AnimatePresence for toggle card list. ChevronRight icon used for card expand affordance.

As a frontend developer, implement the DashboardSidebar section for the Dashboard page. This section renders a responsive aside navigation component using `useState` to manage `drawerOpen` state for mobile drawer behavior. It includes a mobile overlay (`dsb-overlay`, `dsb-overlay-open` classes) that closes the drawer on click, a desktop profile block with avatar initials ('JD'), name, and email, and two nav sections ('Main Menu' and 'Settings') driven by `mainNavItems` and `secondaryNavItems` arrays. Each nav item renders a Lucide icon, label, and optional badge (with `dsb-badge-accent` variant for highlighted badges like Notifications). Active item is indicated via `dsb-active` class and `aria-current='page'`. Uses `framer-motion` and `AnimatePresence` for drawer animation. Icons used: LayoutDashboard, CalendarDays, Bookmark, Map, Bell, Settings, LogOut, Menu, ChevronDown, TrendingUp from lucide-react. Implement full CSS from DashboardSidebar.css (8535 chars) covering desktop sidebar and mobile drawer states.

As a frontend developer, implement the EventsHero section for the Events page. This section features a canvas-based animated particle field using the 2D Canvas API (not Three.js despite the comment) — 70 particles with random positions, velocities, radii, and alpha values rendered with purple fill (`rgba(124,58,237,...)`) and cyan connecting lines (`rgba(6,182,212,...)`) for particles within 90px proximity. Includes a `canvasRef` with a DPR-aware resize handler and `requestAnimationFrame` animation loop with cleanup. The UI includes a location search input with `useState` for `location` and `focused` states, a row of `LOCATION_CHIPS` (San Francisco, New York, Austin, Chicago, Los Angeles) as quick-select buttons that set the location state, an Explore button with `ArrowRight` icon that reads the location state and triggers navigation to the filtered events section, and framer-motion entrance animations. Uses `motion` and `AnimatePresence` from framer-motion, plus `MapPin`, `Search`, `Sparkles`, `ArrowRight` from lucide-react. Imports `EventsHero.css`.

As a frontend developer, implement the ProfileHeader section for the Profile page. Build the `ProfileHeader` component using `useState` to manage a `role` state (defaulting to 'General User'). Render a `ph-root` section containing: a `ph-banner` div with `ph-banner-bg`, `ph-banner-overlay`, and three animated blob divs (`ph-blob-1/2/3`); a `ph-info-card` with a `ph-card-inner` layout. Inside the card, render a `ph-avatar-wrap` with an initials-based avatar ('JD') and an online status indicator (`ph-avatar-status`). Display the user name ('Jordan Davis') in an `h1.ph-name` and a role badge using `ph-role-dot` with conditional class (`organizer` vs `general`). Render a `ph-stats` section mapping over `statsData` array (12 Saved Events, 5 Itineraries, 3 Reviews) into individual `ph-stat` divs with value and label spans. Include a `ph-actions` div with an Edit Profile button using the `Pencil` icon from `lucide-react`. Apply `ProfileHeader.css` for banner gradients, blob animations, and card layout styling.

As a frontend developer, implement the `ProfileSidebar` component with dual desktop/mobile navigation. Manage `activeTab` state (default `'basic-info'`) and `mobileOpen` state (default `false`) via `useState`. Define a `tabs` array of 5 entries — Basic Info (`User`), Interests (`Heart`), Preferences (`Settings`), Notifications (`Bell` with badge `3`), Security (`Shield`) — all using `lucide-react` icons. Render a desktop `<nav class='psb-sidebar'>` with a `psb-section-label`, a `<ul class='psb-tabs'>` mapping each tab to a `<button class='psb-tab'>` with active class `psb-active`, `aria-current` on active, and a `psb-badge` span for tabs with a badge. Include a `psb-divider` and auto-save hint paragraph. Render a `psb-mobile-bar` div acting as a collapsible toggle with `aria-expanded`, `role='button'`, keyboard support (`Enter`/`Space`), displaying the active tab icon, label, and a `ChevronDown` icon that rotates via `psb-open` class. Render a mobile collapsible drawer below the bar that shows the full tab list when `mobileOpen` is true. Apply `ProfileSidebar.css`.

As a frontend developer, implement the `ProfileBasicInfo` component with a rich inline-editing form. Initialize `INITIAL_PROFILE` with fields: `firstName`, `lastName`, `email`, `phone`, `location`, `bio`, and `avatarUrl`. Manage state via `useState`: `editing` (toggle), `saving`, `saveFeedback` (null or `{type, message}`), `form` (copy of INITIAL_PROFILE), `fieldErrors`, `fieldSuccess`, and `avatarPreview`. Use a `useRef` for the hidden `fileInputRef`. Implement `toggleEditing` to reset form/errors/feedback/avatar on cancel. Implement `handleChange(field)` returning an event handler that does live validation: required check, email regex via `validateEmail`, phone regex via `validatePhone`, and updates `fieldErrors`/`fieldSuccess` accordingly. Implement `handleAvatarClick` to trigger the hidden file input when `editing` is true, and `handleAvatarChange` to use `FileReader` to set `avatarPreview` as a data URL. Implement `handleSave` with simulated async saving (`setSaving(true)`), setting `saveFeedback` on success/error. Render a form with avatar upload area, text inputs for all profile fields, a bio textarea, and `CheckCircle`/`AlertCircle` icons from `lucide-react` for per-field inline feedback. Also render a `Camera` icon overlay on the avatar. Apply `ProfileBasicInfo.css`.

As a frontend developer, implement the `ProfileInterests` component for managing user interest tags. Define `INTEREST_CATEGORIES` (6 categories: music, food, sports, arts, tech, nightlife) each with a key, label, lucide-react icon, and 8 `options` strings. Manage `selected` state (initial: `['Live Concerts', 'Food Festivals', 'Hackathons', 'Yoga', 'Gallery Openings']`), `customInput` string state, `saved` boolean state (initial `true`), and a `useRef` for the text input (`inputRef`). Implement `toggleInterest(tag)` with `useCallback` to add/remove tags and enforce a max of 20, setting `saved` to `false`. Implement `removeInterest(tag)` to filter out a tag. Implement `addCustomInterest` that trims input, guards against duplicates and 20-tag limit, appends to `selected`, clears input, and refocuses via `inputRef`. Implement `handleKeyDown` to call `addCustomInterest` on `Enter`. Implement `handleSave` to set `saved` to `true`. Render a `pi-root` section with a `pi-card` containing: a header with title and `Sparkles` icon, category grids mapping each `INTEREST_CATEGORIES` entry with its icon and togglable option chips (showing `Check` icon when selected), a selected-tags chip list with `X` remove buttons, a custom tag input with `Plus` button, and a `Save` button that shows a saved confirmation. Apply `ProfileInterests.css`.

As a frontend developer, implement the `ProfilePreferences` component featuring a Three.js particle field background and Framer Motion animations. Build the `ParticleField` sub-component: use `useRef` for `canvasRef`, initialize a `THREE.Scene`, `THREE.PerspectiveCamera` (FOV 60, z=30), and `THREE.WebGLRenderer` with `alpha: true`. Generate 120 particles via `THREE.BufferGeometry` with random `position` and `size` attributes; apply `THREE.PointsMaterial` (color `0x7c3aed`, additive blending, opacity 0.7). Run an animation loop rotating `points.rotation.y += 0.0006` and `points.rotation.x += 0.00025`. Use a `ResizeObserver` on `containerRef` to keep renderer and camera aspect ratio in sync. Implement the `useMagnetic` hook using `useCallback` mouse move/leave handlers on a ref to apply a CSS `perspective(800px) rotateX/rotateY` tilt transform based on cursor position relative to element center, returning a `style` object. In the main `ProfilePreferences` component, manage preference state for budget range, time-of-day preferences, distance radius, language/locale, and privacy toggle using `useState`. Use `motion.div` from Framer Motion for card entrance animations and hover effects. Render preference sections with `Sliders`, `DollarSign`, `Clock`, `Globe`, `Lock`, `Check`, `ChevronDown`, `Save` icons from `lucide-react`. Include custom dropdowns or sliders as appropriate. Apply `ProfilePreferences.css` and `ppr-particles` canvas class. Dispose Three.js resources on component unmount.

As a frontend developer, implement the `ProfileNotifications` component with animated channel toggles and digest options. Define `digestOptions` array (daily/weekly/off with `Zap`/`Calendar`/`Bell` icons and descriptions) and `notificationTypes` array (newEvents, savedReminders, itineraryUpdates with dot-color classes). Manage state via `useState`: `emailEnabled` (true), `pushEnabled` (true), `smsEnabled` (false), `digest` ('weekly'), `typeToggles` object (all true), and `saved` boolean. Implement `handleSave` that sets `saved` to `true` and resets it after 2200ms via `setTimeout`. Implement `handleReset` to restore all defaults. Implement `toggleType(key)` to flip individual notification type toggles. Render a `pn-root` section with `pn-inner` container. Wrap the main `pn-card` in a `motion.div` with `initial={{ opacity: 0, y: 18 }}` and `animate={{ opacity: 1, y: 0 }}` (0.45s easeOut). Render a `pn-header` with `Bell` icon. In `pn-body`, render a 'Channels' section with three `motion.div` toggle rows (Email with `Mail`, Push with `Smartphone`, SMS with `MessageSquare`) each with `whileHover={{ scale: 1.005 }}`. Render a digest picker selecting among `digestOptions`. Render a notification-types section mapping `notificationTypes` with individual toggles. Use `AnimatePresence` for the save confirmation badge. Apply `ProfileNotifications.css`.

As a frontend developer, implement the `ProfileSecurity` component with password change, 2FA toggle, active sessions management, and account deletion. Define `passwordHints` array (length, uppercase, number, symbol) and implement `checkPasswordStrength(pw)` returning a boolean map for each hint. Define `activeSessions` array with 3 entries (MacBook Pro as current, iPhone 16 Pro, Windows Desktop) each having device, location, ip, lastActive, icon (`Laptop`/`Smartphone`/`Monitor`), iconClass, and current flag. Manage state via `useState`: `showCurrent`, `showNew`, `showConfirm` (password visibility toggles using `Eye`/`EyeOff` icons); `currentPassword`, `newPassword`, `confirmPassword` string values; `errors` object; `success` boolean (auto-clears after 4000ms); `twoFAEnabled` boolean; `deleteConfirmText` string; `showDeleteConfirm` boolean. Implement `handlePasswordChange(e)` with `e.preventDefault()`, validating all three fields (required, min length 8, strength requirements via `checkPasswordStrength`, match confirmation), populating `errors`, and on success clearing fields and showing `CheckCircle` feedback. Implement `handleLogoutSession(id)` to remove a session by id. Render sections: password change form with real-time `passwordHints` indicator dots, 2FA toggle row with `Shield` icon, active sessions list with `Clock`/`MapPin`/`Trash2`/`LogOut` icons per session, and an account deletion area with `AlertTriangle` warning, a text confirmation input (must type 'DELETE'), and a destructive action button. Apply `ProfileSecurity.css`.

As a frontend developer, implement the SignupHero section for the Signup page. The section uses framer-motion with containerVariants (staggerChildren: 0.12, delayChildren: 0.08) and childVariants (spring, stiffness 140, damping 18) for staggered entrance animations triggered via whileInView with viewport once:true, amount:0.3. Renders decorative shr-glow-tl, shr-glow-br radial glows and an shr-ring element. An iconVariants animation (spring, stiffness 200, scale 0.6→1) wraps a Users lucide icon (size 30). The shr-headline includes a shr-headline-accent span for 'Community', and shr-subheadline includes an shr-subheadline-em span. A shr-value paragraph with a bold 'personalized weekend itineraries' phrase completes the content card.

As a frontend developer, implement the SignupForm section for the Signup page. The component manages five state hooks: email, password, selectedInterests (array), termsAccepted (boolean), errors (object), and touched (object). Includes a validationRules object with regex pattern for email and minLength:8 for password. Renders inline validation via validateField(), handleBlur() sets touched state and triggers per-field error display, and handleSubmit() performs full validation then redirects to '/Dashboard' on success via window.location.href. An interests array of 6 items (Music, Food, Sports, Arts, Outdoor, Nightlife) is toggled via toggleInterest(). isFormValid guards the submit button state. Uses Check, Mail, Lock, UserPlus, ArrowRight lucide icons. Includes a terms checkbox (termsAccepted) as a required condition for form validity.

As a frontend developer, implement the SignupBenefits section for the Signup page. Renders a sben-grid of three BenefitCard components mapped from a benefits array with icons Sparkles, MapPin, CalendarHeart (lucide-react). Each BenefitCard uses a useRef and implements mouse-tracking 3D tilt via onMouseMove — computing rotateX/rotateY from mouse position relative to card center with ±8deg range and perspective(800px), resetting on onMouseLeave. Cards use framer-motion motion.div with cardVariants and transformStyle:'preserve-3d'. Section includes two sben-wash decorative background divs and a sben-header with a heading containing a highlighted span for 'Event-planner'.

As a frontend developer, implement the SignupCTA section for the Signup page. This is a simple static section with a scta-inner container rendering: a scta-headline paragraph ('Already have an account?'), a scta-link anchor to '/Login' with an inline scta-link-arrow span (→) marked aria-hidden, a scta-divider decorative div, and a scta-subtle paragraph with social proof copy about joining thousands of users. No state or animations required.

As a frontend developer, implement the Footer section for the Signup page. This component may already exist from the Landing page (task 1c850da8-fca3-45b9-a74e-e7ab3b1561fb) — reuse if available. The Footer uses useState for email and subscribed state to handle a newsletter form (handleSubmit sets subscribed:true and clears email). Renders ftr-glow and ftr-glow-alt decorative divs, a brand column with MapPin icon logo and ftr-socials row mapping Twitter, Instagram, Facebook, Linkedin lucide icons as external links (target='_blank'). Three link columns are rendered via a reusable renderColumn() helper: 'Explore' (4 links), 'Account' (4 links), 'For Organizers' (4 links including Advertise, Analytics, OrganizerProfile, EventRegistration).

As a frontend developer, implement the LoginHero section for the Login page. This is a static presentational component with class `lhr-root` containing a `lhr-content` div. It renders an h1 with class `lhr-headline` that includes a `span.lhr-headline-accent` wrapping the word 'Account', and a `p.lhr-tagline` with the message 'Pick up where you left off — discover events, plan your weekend, and build the perfect itinerary.' No state or interactivity required. Apply LoginHero.css styles.

As a frontend developer, implement the LoginForm section for the Login page. Uses multiple `useState` hooks: `email`, `password`, `showPassword` (boolean for Eye/EyeOff lucide toggle), `remember` (checkbox), `touched` (object tracking blur for email and password fields), `submitting` (boolean for loading state), and `formError` (string). Implements `validationRules` object with inline validators: email checks for '@' presence (error/success), password checks length < 6 (error), < 8 (warning), >= 8 (success). `getInputClass` and `getFeedbackClass` helpers map validation status to CSS classes (`lfm-input-warning`, `lfm-input-error`, `lfm-input-success`, `lfm-feedback-*`). `handleSubmit` prevents default, sets all fields touched, checks for errors, validates non-empty, then sets `submitting=true` and uses `setTimeout` (1200ms) to simulate API call before redirecting to `/Dashboard`. Renders `lfm-card-glow` decorative div, `lfm-card` container with title, subtitle, conditional `lfm-error-banner` (AlertCircle icon + formError text, role='alert'), and a `noValidate` form. Includes email field, password field with show/hide toggle (Eye/EyeOff icons), remember-me checkbox, forgot password link, and submit button with `submitting` state. Uses AlertCircle and Info icons from lucide-react. Replace setTimeout with real auth API call during integration.

As a frontend developer, implement the LoginSignupLink section for the Login page. This is a simple static component with class `lsl-root` containing a `lsl-wrap` div. It renders a paragraph (`lsl-text`) with the text 'Don't have an account?' followed by an anchor (`lsl-link`) linking to `/Signup` with the label 'Sign up here' and a decorative `span.lsl-icon` containing the arrow character '→' (aria-hidden). No state or interactivity. Apply LoginSignupLink.css styles.

As a frontend developer, implement the Footer section for the Login page. This component may already exist from Landing or Signup pages — reuse if available. Uses `useState` for `email` and `subscribed` (newsletter subscription state). Renders two decorative `ftr-glow` divs (aria-hidden). Contains `ftr-brand` with MapPin logo linking to /Home, tagline text, and social icons row mapping `socials` array (Twitter, Instagram, Facebook, LinkedIn from lucide-react) as external links with target='_blank'. Uses a `renderColumn` helper function to render three link columns: 'Explore' (Home, Events, Itinerary, Notifications), 'Account' (Sign Up, Login, Profile, Dashboard), and 'For Organizers' (Advertise, Analytics, OrganizerProfile, EventRegistration). Newsletter form handles `handleSubmit` which validates non-empty email, sets `subscribed=true`, and clears email field. Apply Footer.css styles including ftr-root, ftr-inner, ftr-top layout.

As a frontend developer, implement the Navigation section for the Onboarding page. This reuses the shared Navigation component (may already exist from Landing, Signup, or Login pages). The component uses useState for mobile menu toggle (open/setOpen), renders a responsive nav with nv-root/nv-inner layout, a MapPin lucide icon logo linking to /Home with 'Weekendly' branding and 'AI Weekend Planner' subtitle, a desktop nv-links ul mapping over navLinks array (Home, Events, Dashboard, Itinerary, Advertise, Notifications, Profile), nv-actions div with Log in and Get Started CTAs, and a hamburger nv-burger button with aria-expanded toggling nv-open class. Mobile menu uses nv-mobile/nv-show classes with nv-mobile-list and nv-mobile-actions, each link calling closeMenu onClick. Verify reuse from previous pages before recreating.

As a frontend developer, implement the OrganizerProfileHeader section for the OrganizerProfile page. This section renders a profile header with avatar upload functionality and text fields for display name, professional title, and bio. Key implementation details: useState hooks manage avatarUrl, displayName, professionalTitle, and bio state; useRef (fileInputRef) triggers a hidden file input via handleAvatarClick (keyboard-accessible with Enter/Space); handleAvatarChange validates image MIME type and uses FileReader.readAsDataURL to preview the selected image; handleBioChange enforces a MAX_BIO_LENGTH of 300 characters with a remaining-character counter that applies an 'isBioNearLimit' flag when ≤30 chars remain; the avatar area toggles between an SVG camera-icon placeholder and a live <img> preview; the name row uses CSS class 'oph-name-row' for side-by-side first/last name layout on wider screens. Styles live in OrganizerProfileHeader.css using 'oph-*' BEM-style classes. This is the first (root) section for this page and establishes the page-level dependency on the Signup Navigation task.

As a frontend developer, implement the Navigation section for the Home page. This component uses React `useState` hook (`open`) to manage mobile menu toggle state. It renders a `<nav className="nv-root">` with an inner container housing: (1) a logo link combining `MapPin` icon from lucide-react with 'Weekendly' brand text and 'AI Weekend Planner' subtitle, (2) a desktop `<ul className="nv-links">` rendering 7 nav links (Home, Events, Dashboard, Itinerary, Advertise, Notifications, Profile) from the `navLinks` array, (3) an `nv-actions` div with Log in and Get Started CTAs plus a burger button with 3 `<span>` elements and aria-expanded toggle, and (4) a mobile drawer `<div className="nv-mobile">` with `nv-show` class toggled by `open` state, containing the same nav links plus mobile-specific login/CTA anchors with `closeMenu` onClick handlers. Note: Navigation component may already exist from Login, Signup, or Onboarding pages — reuse or adapt if available.

As a frontend developer, implement the Footer section for the Home page. This component uses React `useState` hooks for `email` and `subscribed` state to manage a newsletter subscription form. It renders a `<footer className="ftr-root">` with two decorative `ftr-glow` divs (aria-hidden). The inner layout includes: (1) an `ftr-brand` column with MapPin logo linking to /Home, a tagline paragraph, and 4 social icon links (Twitter, Instagram, Facebook, LinkedIn from lucide-react) rendered with aria-labels and target="_blank", (2) three link columns rendered via the `renderColumn` helper function — 'Explore' (Home, Events, Itinerary, Notifications), 'Account' (Sign Up, Login, Profile, Dashboard), and 'For Organizers' (Advertise, Analytics, Organizer Profile, Event Registration) — each as `ftr-col` divs with `ftr-link` anchors, and (3) a newsletter form with `handleSubmit` that validates non-empty email, sets `subscribed` to true, and clears the email field. Note: Footer component may already exist from Landing, Signup, Login, or Onboarding pages — reuse or adapt if available.

As a Backend Developer, implement itinerary management API endpoints using FastAPI. Include: GET /api/itineraries (list user itineraries), POST /api/itineraries (create itinerary), GET /api/itineraries/{itinerary_id} (get itinerary with events), PUT /api/itineraries/{itinerary_id} (update itinerary), DELETE /api/itineraries/{itinerary_id} (delete itinerary), POST /api/itineraries/{itinerary_id}/events (add event to itinerary), DELETE /api/itineraries/{itinerary_id}/events/{event_id} (remove event), PATCH /api/itineraries/{itinerary_id}/events/reorder (drag-and-drop reorder), GET /api/itineraries/{itinerary_id}/travel-estimates (travel time and distance between events). Note: Frontend tasks that depend on this include ItineraryTimeline (cec86041), ItineraryMap (032396b9), ItineraryActions (b1661598), ItineraryHeader (9c8cb62f).

As a Backend Developer, implement advertising campaign API endpoints using FastAPI. Include: POST /api/campaigns (create ad campaign), GET /api/campaigns (list organizer campaigns), GET /api/campaigns/{campaign_id} (get campaign details), PUT /api/campaigns/{campaign_id} (update campaign), DELETE /api/campaigns/{campaign_id} (delete campaign), POST /api/campaigns/{campaign_id}/publish (publish campaign), GET /api/campaigns/{campaign_id}/stats (impressions, clicks, conversions). Implement audience targeting parameters (location, interest category, budget range). Note: Frontend tasks that depend on this include AdvertiseHero (600dfb2f) and Advertise page campaign builder components.

As a Backend Developer, implement analytics API endpoints using FastAPI. Include: GET /api/analytics/kpis (total events, registrations, conversion rate, revenue — with date range filter), GET /api/analytics/funnel (conversion funnel data: impressions → views → saves → registrations), GET /api/analytics/performance (time-series chart data for events created, views, saves, registrations by day), GET /api/analytics/audience (demographics, interest distribution, top cities, growth data), GET /api/analytics/engagement (per-event engagement table: views, clicks, saves, share rate, score), GET /api/analytics/export (CSV/PDF export of analytics report). All endpoints scoped to authenticated organizer's events. Note: Frontend tasks that depend on this include AnalyticsKPICards (0c4725ba), AnalyticsConversionFunnel (1773ce7b), AnalyticsEventPerformanceChart (319427a5), AnalyticsAudienceInsights (3d37594c), AnalyticsEngagementMetrics (985c9970), AnalyticsExportActions (8f67befd), AnalyticsHeader (e04a42c6).

As a Backend Developer, implement notifications API endpoints using FastAPI. Include: GET /api/notifications (list user notifications with filters: type, status, page, limit), PATCH /api/notifications/{notif_id}/read (mark single notification as read), POST /api/notifications/read-all (mark all as read), DELETE /api/notifications/{notif_id} (dismiss notification), GET /api/notifications/preferences (get notification preferences), PUT /api/notifications/preferences (update notification preferences: event reminders, promos, system). Implement background task (FastAPI BackgroundTasks or Celery) to dispatch scheduled event reminders. Note: Frontend tasks that depend on this include NotificationsList (05acfded), NotificationsFilters (cb4fdbc9), NotificationsHeader (c6cb21ae), NotificationsEmpty (a5ff1c4b).

As a Backend Developer, implement onboarding API endpoints using FastAPI. Include: GET /api/onboarding/interests (list all available interest categories), POST /api/onboarding/interests (save user's selected interests after signup), GET /api/onboarding/status (check if user has completed onboarding), POST /api/onboarding/complete (mark onboarding as complete, trigger initial recommendations generation). These endpoints are called during the onboarding flow after user registration. Note: Frontend tasks that depend on this include Onboarding page Navigation (97a0a582) and interest selection components.

As an AI Engineer, implement an AI-powered event recommendations engine using LiteLLM for LLM routing and GPT integration. Implementation: (1) Create a RecommendationService class that takes user interests, location, budget, and browsing history as input; (2) Use LiteLLM to route to GPT-5.4 for natural-language event ranking and personalized descriptions; (3) Implement a scoring algorithm combining: interest match score, location proximity score, budget fit score, popularity score, and recency score; (4) Expose via FastAPI endpoint GET /api/events/recommendations with query params: user_id, lat, lng, budget_max, date_from, date_to, limit; (5) Implement response caching (Redis or in-memory) with 15-minute TTL to reduce LLM API calls; (6) Add fallback to rule-based recommendations if LLM is unavailable. Note: Frontend tasks that depend on this include Home page recommendation sections and Events page filter.

As a Tech Lead, verify the end-to-end integration between the authentication frontend implementation (LoginForm, SignupForm) and the backend Auth API. Ensure: JWT tokens are stored securely (httpOnly cookies or secure localStorage), login redirects correctly to Dashboard/Home, signup flow transitions to Onboarding page, token refresh works transparently, protected routes redirect unauthenticated users to Login, and logout clears all auth state. Verify the API responses are handled properly in the UI with correct error messages displayed from backend validation.

As a Tech Lead, verify the end-to-end integration between the OrganizerProfile page frontend and the Organizer Profile backend API. Ensure: profile loads from GET /api/organizers/{id} and pre-populates form fields, save action calls PUT /api/organizers/{id} with all form data (org details, social links, banking info), avatar upload calls POST /api/organizers/{id}/images and returns a URL that updates the preview, the verified badge reflects backend verification status, social link validation errors from backend are shown in the UI, and the delete action calls DELETE /api/organizers/{id} with confirmation flow.

As a Tech Lead, verify the end-to-end integration between the EventRegistration page frontend and the Events/Organizer backend API. Ensure: the multi-step form (BasicInfo → Details → Location/Schedule → Budget → Review) accumulates data correctly across steps, the final submit button calls POST /api/events/register with all form data, image upload sends file to POST /api/events/{id}/images, city autocomplete uses real location data, the review accordion shows the submitted data, draft save persists to localStorage or a draft endpoint, success redirects to the Dashboard with the new event listed, and all validation errors from the backend API are surfaced in the appropriate form fields.

As a frontend developer, implement the OnboardingCTA section for the Onboarding page. Features a progress bar (octa-progress-fill) whose width animates to (completedCount/totalCount)*100% via progress useState(0) set after 300ms timeout in useEffect. Renders four step chips (Interests, Location, Budget, Notifications) with octa-done class and ✓ checkmark spans when step.done is true. Headline includes octa-gradient span wrapping 'discover your weekend'. CTA button uses framer-motion useMotionValue (mouseX, mouseY) and useSpring (stiffness 260, damping 18) for magnetic hover effect via handleMouseMove/handleMouseLeave callbacks on btnRef. springX/springY drive transform translate on the button element. trustItems array ('Takes less than 2 minutes', 'Personalized just for you', 'Change anytime in Settings') rendered as trust badge list. octa-bg-layer provides decorative background layer.

As a frontend developer, implement the DashboardHeader section for the Dashboard page. This section renders a top header bar using `useState` for `searchVal`, `useRef` for `searchRef` and `glowRef`, and a custom `useDateTime` hook that uses `useState` and `useEffect` with `setInterval` (1000ms) to display a live-updating date (`toLocaleDateString` with weekday/month/day) and time (`toLocaleTimeString` HH:MM). Uses `framer-motion` with `containerVariants` (staggerChildren: 0.08, delayChildren: 0.05) and `itemVariants` (opacity/y with easeOut) for staggered entrance animation. Contains a greeting block with `dblh-greeting`, `dblh-greeting-wave` emoji span, `dblh-name-highlight` for the user name ('Sarah'), and a `dblh-date-time` row with Clock icon. Actions block includes a search input with `dblh-search-wrap`, `dblh-search-glow` cursor-reactive glow overlay, Search icon, controlled input with `handleSearchChange`, and a filter button (`dblh-btn-filter`) with SlidersHorizontal icon. Implement full CSS from DashboardHeader.css (5083 chars).

As a frontend developer, implement the DashboardWelcomeBanner section for the Dashboard page. This section renders a promotional banner using `framer-motion` with entry animation (`initial: {opacity:0, y:20}`, `animate: {opacity:1, y:0}`, duration 0.5 easeOut) on the `dwb-inner` container. Contains a `dwb-glow` decorative background element, a `dwb-illustration` div wrapping a CalendarDays icon (size 44, strokeWidth 1.6) with a `whileHover` shake animation (`rotate: [0,-4,4,0]`, duration 0.5 easeInOut), and a `dwb-content` block with `dwb-headline` (featuring `dwb-highlight` span for 'perfect weekend') and `dwb-subtext` describing interest-based recommendations (Music, Food, Sports). A `motion.a` CTA button (`dwb-cta`) links to '/Events' with `whileHover: {scale:1.03}` and `whileTap: {scale:0.97}`, containing an ArrowRight icon. Implement full CSS from DashboardWelcomeBanner.css (3743 chars).

As a frontend developer, implement the DashboardRecommendations section for the Dashboard page. This section renders a horizontally scrollable recommendations carousel using `useState` for `events` (initialized from a 6-item `recommendations` array with id, title, category, categoryClass, date, location, image, saved fields), `canScrollLeft`, and `canScrollRight` scroll-edge state. Uses `useRef` for `carouselRef` and `useCallback` for `updateScrollState` and `handleScroll`. Scroll navigation via ChevronLeft/ChevronRight buttons that call `scrollBy(direction)` computing card width from `.dr-card` offsetWidth + 20px gap. Each card shows an Unsplash image, category badge with `dr-cat-*` color class (music/food/sports/art/tech/outdoors), Bookmark toggle button, event title, MapPin + location, Calendar + date, and a 'View Details' action. Section header includes a Sparkles icon and 'Recommended for You' heading. Implement full CSS from DashboardRecommendations.css (7110 chars) including carousel scroll behavior.

As a frontend developer, implement the DashboardUpcomingEvents section for the Dashboard page. This is the most complex section, featuring a Three.js/R3F ambient particle field background: `ParticleField` component uses `useFrame` to animate 60 particles (Float32Array positions/velocities, count*3 layout) with `THREE.AdditiveBlending` purple `pointsMaterial`, bouncing within bounds; wrapped in `AmbientScene` Canvas (camera z:6, fov:60) with `ambientLight`. Main UI uses `useState` for active tab (`all`/`organizer`/`attending`) and `useMemo` for filtered events from `UPCOMING_EVENTS` array (5 items with isOrganizer/attending flags, attendee avatars, heart/eye/users counts). Uses `AnimatePresence` for tab content transitions. Each event card displays a date block (month/day), category badge (`du-cat-*` class), title, Clock+time, MapPin+venue, attendee avatar stack, and stats row (Eye, Heart, Users counts). Empty state renders a CalendarX illustration with motion animation. Tab bar with 3 tabs (`TABS` array) and `useRef` for indicator positioning. Implement full CSS from DashboardUpcomingEvents.css (8733 chars) including Canvas overlay and card layout.

As a frontend developer, implement the DashboardSavedEvents section for the Dashboard page. This section renders a saved events grid using `useState` for `events` (initialized from 4-item `savedEvents` array with id, name, category, savedDate, thumbnail fields) and `useCallback` for mouse interaction handlers. Features a CSS 3D tilt effect on cards: `handleMouseMove` calculates `rotateX`/`rotateY` from cursor position relative to card center (±8deg range) and applies via `cardEl.style.transform`; `handleMouseLeave` resets to 0deg. The `categoryIcons` map resolves Music→Music, Food→UtensilsCrossed, Sports→Trophy, Arts→Palette icons. Section header (`dse-header`) contains a Bookmark icon wrap, title with `dse-count` badge, and a 'View All Saved' link to '/Itinerary' with ArrowRight icon (only shown when `hasEvents`). Cards in `dse-grid` show category icon, event name, savedDate, and a Heart button. Implement full CSS from DashboardSavedEvents.css (8141 chars) including 3D perspective transform styles.

As a frontend developer, implement the DashboardItineraryPreview section for the Dashboard page. This section renders a weekend itinerary timeline using `useState` for `hasItinerary` (boolean toggle) and `visible` (delayed mount), and `useEffect` with a 60ms `setTimeout` to trigger entrance animation. Uses `AnimatePresence` for empty/populated state transitions. Motion variants defined: `headingVariants` (opacity/y), `cardVariants` (opacity/x with custom `i` delay: `i*0.12`), `dotVariants` (spring scale with `stiffness:400, damping:22`, delay `i*0.12+0.1`), `emptyVariants` (opacity/y). The `sampleItinerary` array (3 items) each has catIcon (Music/UtensilsCrossed/Dumbbell), `catDotClass` (`dip-cat-dot-music/food/sport`), time, period (AM/PM), location, duration, cost, and `badgeVariant` (`dip-tb-alt`, `dip-tb-highlight`). Header shows title, subtitle with event count, and quick-action buttons (`dip-btn-primary` linking to itinerary). Timeline renders cards with animated timeline dots, time badge, category icon, event name, MapPin+location, Clock+duration, cost, and Navigation action. Implement full CSS from DashboardItineraryPreview.css (7456 chars).

As a frontend developer, implement the EventsFilterBar section for the Events page. This section is a rich multi-filter toolbar with multiple `useState` hooks: `openPopover` (which popover is active), `budget` (slider, default 200), `selectedDate` (date preset), `customDate` (date string), `startTime`, `endTime`, `distance` (km selection), and `selectedCats` (array of selected category strings). Features five filter pill buttons — Budget (DollarSign icon), Date (Calendar icon), Time (Clock icon), Distance (MapPin icon), and Categories (Tag icon) — each toggling a popover via `togglePopover`. The Budget popover contains a range slider input. The Date popover shows `datePresets` array (Today, Tomorrow, This Weekend, Next Week, Custom) plus a custom date input. The Time popover has start/end time inputs. The Distance popover shows `distanceOptions` (5/10/25/50 km). The Categories popover renders `categories` array (Music, Food, Sports, Art, Tech, Outdoor, Nightlife, Family) with colored swatches, toggled via `toggleCategory`. A `popoverRef` with `mousedown` outside-click handler closes the active popover. Active filter count badge is computed and displayed. A 'Clear All' button (`clearAll` fn) resets all state. Popover animations use framer-motion `AnimatePresence` with `popoverVariants` (opacity, y, scale). Imports `SlidersHorizontal`, `Calendar`, `Clock`, `MapPin`, `Tag`, `X`, `DollarSign` from lucide-react and `EventsFilterBar.css`.

As a frontend developer, implement the EventsMap section for the Events page. This is a 3D interactive map built with `@react-three/fiber` Canvas and `@react-three/drei` (Html, OrbitControls). Renders 8 `eventPins` data items (Jazz Under the Stars, Summer Night Market, Brooklyn 5K Run, etc.) as 3D pin markers on a stylized map scene using `THREE` geometry. Each pin is colored and glowing per `categoryStyles` (music: #7C3AED, food: #FF6347, sports: #32CD32, art: #FFB703, other: #06B6D4). Clicking a pin opens an Html overlay tooltip via the `Html` drei component. State includes `useState` for selected pin id, panel visibility, and bookmark set. Features a `useFrame` animation hook for pin hover bobbing/pulsing effects and a `useCallback` memoized pin click handler. Side panel slides in with framer-motion `AnimatePresence` showing event details: name, date, price, desc, and action buttons (Bookmark, ChevronRight for full detail). Panel has collapse/expand chevron controls. A `useMemo` derives filtered visible pins. Also includes `Navigation`, `Plus`, `X`, `Clock`, `DollarSign`, `MapPin`, `Bookmark` lucide icons. Imports `EventsMap.css`.

As a frontend developer, implement the EventsGrid section for the Events page. This section renders a grid of 6 event cards (Summer Jazz Festival, Food Truck Fiesta, Urban Soccer Cup Finals, Modern Art Exhibit Opening, Tech Startup Pitch Night, Sunset Yoga in the Park) with Unsplash images. State includes `saved` (Set of saved event ids), `tilt` (object keyed by event id for CSS 3D tilt transform), and `canvasReady` (boolean for Three.js background). Each card features a mouse-move tilt effect using `setTilt` updating x/y rotation values applied as inline transform style. A `Heart` icon button toggles the saved state per card, updating the `saved` Set. Cards display category badge with `badgeClass` (e.g., `eg-badge-music`), star `rating`, `Star` icon, `MapPin`, `Clock`, `dateTime`, `location`, and `price`. There is a `canvasRef` Three.js particle background setup in `setupCanvas` useCallback — checks for `window.THREE` global, creates Scene, PerspectiveCamera, WebGLRenderer with `alpha: true`, and gracefully falls back via `setCanvasReady(false)` if Three.js is unavailable. `animRef` holds the animation frame id for cleanup. Card entrance animations use `motion` from framer-motion with staggered delays. Imports `Star`, `MapPin`, `Clock`, `Heart` from lucide-react and `EventsGrid.css`.

As a frontend developer, implement the SavedEventsPreview section for the Events page. This section displays a horizontally scrollable carousel of 5 saved events (Sunset Jazz & Wine Festival, Downtown Food Truck Rally, Morning Yoga by the Lake, Indie Film Night: Local Shorts, Weekend Farmers Market) initialized from `savedEventsData`. State includes `savedEvents` (array, can be mutated), `toast` (string or null for removal notification), `canScrollLeft` (boolean), and `canScrollRight` (boolean, starts true). A `trackRef` points to the scrollable container div. `updateScrollButtons` useCallback reads `el.scrollLeft`, `el.clientWidth`, `el.scrollWidth` to update the scroll arrow visibility states. `handleScroll` useCallback calls `updateScrollButtons` and is attached as the scroll event listener. `scroll(direction)` function calls `el.scrollBy` with `{ left: ±300, behavior: 'smooth' }`. `removeEvent(id)` removes an event from `savedEvents` state, finds the removed item title, and sets a `toast` message that auto-clears after 3000ms via `setTimeout`. Empty state is derived as `isEmpty = savedEvents.length === 0` and renders a Bookmark + Sparkles empty-state UI. Each card shows: Unsplash image, category badge, title, date (Calendar icon), location (MapPin icon), budget (DollarSign icon), and a Trash2 remove button. Toast notification uses `AnimatePresence` for slide-in/out. Background has two decorative `.sv-glow` divs. Left/right ChevronLeft/ChevronRight scroll buttons are conditionally visible. Imports `Heart`, `Trash2`, `MapPin`, `Calendar`, `ChevronLeft`, `ChevronRight`, `Bookmark`, `Sparkles`, `Clock`, `DollarSign` from lucide-react and `SavedEventsPreview.css`.

As a frontend developer, implement the EventDetailHero section for the EventDetail page. This section renders a full-width banner with an animated image carousel using `useState(currentImage)` and `AnimatePresence` from framer-motion — images transition with opacity+scale animations (`initial={{ opacity: 0, scale: 1.05 }}`, `exit={{ opacity: 0, scale: 0.98 }}`). Includes prev/next navigation handlers (`handlePrevImage`, `handleNextImage`) cycling through 4 Unsplash images. Overlays include: an `ArrowLeft` back link to `/Events`, a `Heart` save/unsave toggle button with `useState(saved)` that fills gold when active, and a metadata bar displaying `Star` rating with `renderStars()` (full/half star logic), attendee count (`Users` icon), date/time range (`Calendar`, `Clock` icons), location (`MapPin`), and price range (`DollarSign`). All rendered with `.eh-` CSS class namespace. Component may reference Navbar from the Events page.

As a frontend developer, implement the CampaignBuilder section for the Advertise page. Build the multi-step campaign creation form using useState hooks for campaignName, description, selectedEvent, assets, dragOver, and currentStep. Implement a 3-step wizard with stepLabels ['Campaign Details', 'Event & Assets', 'Review'] and step indicator UI. Build a drag-and-drop file upload zone with handleDrop, handleDragOver, handleDragLeave handlers that create object URL previews via URL.createObjectURL and track asset type (image/video). Render uploaded asset thumbnails with removeAsset cleanup that calls URL.revokeObjectURL. Implement the sampleEvents dropdown with ChevronDown and a MAX_DESC_CHARS=300 character-limited textarea. Gate the handleNext progression behind isValid (campaignName.trim().length > 0 && selectedEvent !== ''). Use Upload, X, Image, Video, ArrowRight, Info icons from lucide-react. Apply CampaignBuilder.css styles.

As a frontend developer, implement the AudienceSelector section for the Advertise page. Build an interactive audience targeting UI with useState/useMemo/useRef/useCallback hooks. Render the INTEREST_CATEGORIES array (music, food, sports, arts, tech, outdoor, nightlife, family) as toggleable chips with count badges. Integrate a 3D particle field using @react-three/fiber Canvas and a custom AudienceParticles component with 120 particles, per-particle Float32Array buffers for positions/colors/speeds, useFrame animation with sinusoidal wobble, and a reach-based scale computed as `Math.min(0.4 + (reach / 15000) * 1.4, 2.0)`. Particle colors lerp between #1E90FF, #87CEFA, and #32CD32. Wrap the Canvas in React Suspense. Use framer-motion AnimatePresence for interest chip enter/exit transitions. Include location radius, age range, and estimated reach controls with Users, MapPin, Calendar, DollarSign, Hash, Target, TrendingUp, Heart, Navigation2, Clock icons from lucide-react. Apply AudienceSelector.css styles.

As a frontend developer, implement the BudgetAndScheduling section for the Advertise page. Build a budget configuration UI with currency selector (USD/EUR/GBP/INR/CAD/AUD with symbols) and bid strategy radio cards for the three strategies: 'Auto (Maximise Reach)', 'Manual CPC', and 'Target CPC' with Recommended/Advanced/Precision badges. Implement the useCountUp hook that animates numeric display values using requestAnimationFrame with cubic ease-out (`1 - Math.pow(1 - progress, 3)`) over a configurable duration. Integrate a 3D rotating coin using @react-three/fiber Canvas with a RotatingCoin mesh: cylinderGeometry (r=0.8, h=0.15, 48 segments), purple metalness material (#7C3AED), and two cyan torus rings (#06B6D4) on top/bottom faces, rotating at delta*0.8 per frame via useFrame. Use framer-motion AnimatePresence for strategy card transitions. Include date-range scheduling controls and projected metrics display with Wallet, Calendar, Target, TrendingUp, Users, DollarSign, BarChart3 icons. Apply BudgetAndScheduling.css styles.

As a Backend Developer, implement saved events API endpoints using FastAPI. Include: GET /api/users/{user_id}/saved-events (list saved events with pagination and category filter), POST /api/users/{user_id}/saved-events (save an event), DELETE /api/users/{user_id}/saved-events/{event_id} (unsave an event), GET /api/users/{user_id}/saved-events/count (get count of saved events). Ensure proper authorization so users can only access their own saved events. Note: Frontend tasks that depend on this include SavedEventsPreview (6a8481c1), DashboardSavedEvents (1fd74c78), EventDetailSidebar (06e5293d), EventsGrid (b01ae862).

As a Backend Developer, implement event budget and pricing API endpoints using FastAPI. Include: POST /api/events/{event_id}/budget (set event budget configuration with min/max price, currency, ticket tiers), GET /api/events/{event_id}/budget (get budget details), PUT /api/events/{event_id}/budget (update budget), POST /api/events/{event_id}/tickets (create ticket tiers: General, VIP, Premium with prices), GET /api/events/{event_id}/tickets (list ticket tiers). These endpoints support the EventRegistration multi-step form budget step and the EventDetailSidebar ticket purchase flow. Note: Frontend tasks that depend on this include EventBasicInfo (a32d06fe), EventReviewSubmit (21b517ca), EventDetailSidebar (06e5293d).

As a Backend Developer, implement a dedicated event search and filtering API using FastAPI with full-text search capabilities. Include: GET /api/events/search (full-text search with params: q, category[], budget_min, budget_max, date_from, date_to, start_time, end_time, distance_km, lat, lng, sort_by, page, limit), GET /api/events/nearby (location-based events using Haversine formula), GET /api/events/categories (list all event categories with counts). Implement MySQL FULLTEXT index on title/description columns. Support debounced autocomplete via GET /api/events/autocomplete?q=. Note: Frontend tasks that depend on this include EventsFilterBar (81735875), EventsHero (6be0e102), EventsGrid (b01ae862).

As a Backend Developer, implement location and maps integration API endpoints using FastAPI. Include: GET /api/location/geocode?address= (convert address to lat/lng using a geocoding provider), GET /api/location/reverse-geocode?lat=&lng= (convert coordinates to address), GET /api/location/cities?q= (city autocomplete for event registration and location preferences — returns 10 suggestions), GET /api/location/travel-time?origin_lat=&origin_lng=&dest_lat=&dest_lng=&mode= (estimate travel time between two coordinates). Use a geocoding provider (Google Maps API, Mapbox, or OpenStreetMap Nominatim). These endpoints power the 3D map views, EventsMap, ItineraryMap, and LocationPreferences components. Note: Frontend tasks that depend on this include EventsMap (5f4cddac), HomeEventMapShowcase (c4aced4b), ItineraryMap (032396b9), EventDetailLocation (2098c159), LocationPreferences (cb548862).

As a Backend Developer, implement file upload and media management API endpoints using FastAPI. Include: POST /api/media/upload (multipart file upload for event cover images and organizer avatars — validates MIME type image/jpeg|image/png|image/webp, max 5MB, returns CDN URL), DELETE /api/media/{media_id} (delete uploaded media), GET /api/media/{media_id} (get media metadata). Use local storage with configurable S3/MinIO backend via environment variable STORAGE_BACKEND. Resize images on upload (thumbnail 300x200, medium 800x600, full) using Pillow. Note: Frontend tasks that depend on this include EventBasicInfo (a32d06fe), OrganizerProfileHeader (82ec7f60), CampaignBuilder (0e725d85).

As a frontend developer, implement the Footer section for the Onboarding page. This reuses the shared Footer component (may already exist from Landing, Signup, or Login pages). The component uses useState for email and subscribed state, renders ftr-root with two ftr-glow decorative divs (aria-hidden), and ftr-inner containing ftr-top with ftr-brand (MapPin icon logo linking /Home with 'Eventplanner' branding, ftr-tagline paragraph, and ftr-socials mapping over socials array with Twitter/Instagram/Facebook/Linkedin lucide icons as external links). Uses a reusable renderColumn helper rendering ftr-col divs with ftr-col-title and ftr-link anchors for three link columns: Explore (Home, Events, Itinerary, Notifications), Account (Sign Up, Login, Profile, Dashboard), and For Organizers (Advertise, Analytics, OrganizerProfile, EventRegistration). Includes a newsletter form with controlled email input, handleSubmit toggling subscribed state and clearing email. Verify reuse from previous pages before recreating.

As a frontend developer, implement the OrganizerProfileForm section for the OrganizerProfile page. This section renders an 'Organization Details' card with animated form fields using framer-motion. Key implementation details: useState manages formData (orgName, email, phone, website, category) pre-populated with sample values ('Blue Ridge Events Co.', etc.) and a verified boolean toggle; handleChange is a generic field updater keyed on name attributes; handleToggle flips the verified state; the card and section heading animate in via motion.div with opacity/y transitions; individual fields use formFieldVariants with staggered delay (custom index * 0.06s) via AnimatePresence; lucide-react icons (Building2, Mail, Phone, Globe, FolderTree, Shield, ShieldCheck, BadgeCheck) decorate field group labels; EVENT_CATEGORIES array (11 options) populates a category select; a verification badge toggle using ShieldCheck/Shield icons reflects the verified state. Styles in OrganizerProfileForm.css using 'opf-*' classes.

As a frontend developer, implement the OrganizerProfileSocial section for the OrganizerProfile page. This section renders a social media links manager for five platforms: Instagram, Facebook, X (Twitter), LinkedIn, and YouTube. Key implementation details: each platform in the PLATFORMS array carries an id, label, handle hint, placeholder URL, an inline SVG icon, and a validate function using URL-specific regex; useState tracks per-platform URL values and validation error states; useCallback and useRef are used for focus management and debounced validation; framer-motion AnimatePresence handles animated mount/unmount of validation error messages; each platform row shows the SVG icon, a text input bound to the platform's URL, a live format-validation indicator, and a clear button; empty values are treated as valid (optional fields). Styles in OrganizerProfileSocial.css using 'ors-*' classes.

As a frontend developer, implement the OrganizerProfileBanking section for the OrganizerProfile page. This is the most complex section, featuring an animated banking/payment details card with a 3D tilt interaction. Key implementation details: CARD_POSITIONS array (12 entries with x, y, rotate, scale) drives a FloatingCard sub-component that uses framer-motion animate with sinusoidal x/y/rotate expressions and looping opacity [0.06, 0.10, 0.06] to create floating ghost card decorations in the background; CardFloatField wraps the main card and tracks mousePos via onMouseMove, applying a perspective(800px) rotateY/rotateX 3D CSS transform on hover using isHovering state; useRef (containerRef) is used to compute normalized mouse coordinates relative to the card bounding rect; framer-motion AnimatePresence manages conditional reveal of banking form fields; useState and useEffect manage field focus, masking of sensitive values, and section expand/collapse. Styles in OrganizerProfileBanking.css using 'obk-*' classes.

As a frontend developer, implement the Navigation section for the Events page. This component is shared across pages and may already exist from Signup, Login, Onboarding, or Home pages. The Navigation uses useState for mobile menu toggle (open/closeMenu), renders a nv-root nav with nv-inner containing: a logo with MapPin icon from lucide-react linking to /Home, a desktop nv-links ul mapping over 7 navLinks (Home, Events, Dashboard, Itinerary, Advertise, Notifications, Profile), and nv-actions div with Log in/Get Started anchors plus a hamburger nv-burger button with aria-expanded. Mobile menu renders as nv-mobile div with nv-show class toggled, containing nv-mobile-list and nv-mobile-actions with same links calling closeMenu onClick. Import Navigation.css for styling.

As a frontend developer, implement the Footer section for the Events page. This component is shared across pages and may already exist from Signup, Login, Onboarding, or Home pages. The Footer uses useState for email and subscribed state, handling newsletter form submission via handleSubmit (validates non-empty email, sets subscribed true, clears email). Renders ftr-root footer with two decorative ftr-glow divs, and ftr-inner containing ftr-top with: ftr-brand block featuring MapPin logo, tagline text, and four social icon links (Twitter, Instagram, Facebook, LinkedIn from lucide-react with target=_blank). Uses renderColumn helper to render three link columns — Explore (4 links), Account (4 links), For Organizers (4 links including Advertise/Analytics/OrganizerProfile/EventRegistration). Import Footer.css for styling.

As a frontend developer, implement the Navigation section for the Notifications page. This component may already exist from previous pages (Home, Events, Itinerary, Onboarding). It uses a `useState(false)` hook for mobile menu open/close toggling, renders a `navLinks` array of 7 routes including the active 'Notifications' link, displays the Weekendly logo with a `MapPin` icon from lucide-react, and includes desktop `nv-links` pill navigation plus a hamburger `nv-burger` button that toggles `nv-open` class. Mobile menu renders `nv-mobile` with `nv-show` class when open, containing duplicated nav links with `closeMenu` onClick handlers and mobile-specific Log in / Get Started CTAs. Import and apply `Navigation.css`.

As a Tech Lead, verify the end-to-end integration between the Onboarding page frontend and the Onboarding Interests backend API. Ensure: interest categories load from GET /api/onboarding/interests, selected interests are saved via POST /api/onboarding/interests on completion, onboarding status is persisted per user, and the flow correctly redirects to the Home page after completion. Verify the UI handles loading states, API errors, and reflects the saved interests in subsequent pages.

As a Tech Lead, verify the end-to-end integration between the Events page frontend and the Events CRUD backend API. Ensure: events list loads from GET /api/events with all filter parameters (category, budget, date, distance, search_query) correctly serialized and sent, pagination works correctly, the search bar triggers API calls with debounce, filter pills update URL query params and re-fetch, event cards display real data from API responses, the save/unsave button calls POST/DELETE /api/users/{id}/saved-events and reflects state, and loading/empty/error states are handled. Verify AI recommendations load correctly on the Home page from GET /api/events/recommendations.

As a Tech Lead, verify the end-to-end integration between the Itinerary page frontend and the Itinerary backend API. Ensure: itinerary loads from GET /api/itineraries/{id}, events in the timeline reflect real API data, drag-and-drop reordering calls PATCH /api/itineraries/{id}/events/reorder and persists order, adding/removing events calls respective API endpoints, travel estimates load from GET /api/itineraries/{id}/travel-estimates and display in ItineraryMap, the save action calls PUT /api/itineraries/{id}, budget tracker computes from real event cost data, and all framer-motion animations play correctly with real data. Verify date selection updates the itinerary view.

As a Tech Lead, verify the end-to-end integration between the Notifications page frontend and the Notifications backend API. Ensure: notifications load from GET /api/notifications with type and status filters applied, mark-as-read calls PATCH /api/notifications/{id}/read and updates UI state, mark-all-as-read calls POST /api/notifications/read-all, dismiss calls DELETE /api/notifications/{id} and removes item from list, the unread badge count in NotificationsHeader reflects real data, filter pills correctly pass type/status params to API, the empty state shows when API returns zero results, and real-time or polling-based unread count updates work.

As a Tech Lead, verify the end-to-end integration between the Advertise page frontend and the Ad Campaign backend API. Ensure: existing campaigns load from GET /api/campaigns, the campaign builder form submits to POST /api/campaigns, audience targeting parameters are serialized correctly, publish action calls POST /api/campaigns/{id}/publish, campaign stats (impressions, clicks) load from GET /api/campaigns/{id}/stats and display in the UI, and all interactive form states (validation, submission loading, success/error feedback) work correctly with real API responses.

As a Tech Lead, verify the end-to-end integration between the Analytics page frontend and the Analytics backend API. Ensure: KPI cards load from GET /api/analytics/kpis with date range params from AnalyticsHeader, funnel data loads from GET /api/analytics/funnel, performance chart time-series data loads from GET /api/analytics/performance with timeRange param, audience insights (demographics, interest bubbles, city stats, growth) load from GET /api/analytics/audience, engagement table loads from GET /api/analytics/engagement with search and sort params applied server-side or client-side, the date preset and category filter in AnalyticsHeader trigger re-fetches of all charts, and the CSV/PDF export calls GET /api/analytics/export and triggers file download.

As a frontend developer, implement the EventsDetailModal section for the Events page. This is a full-screen slide-up modal with rich event detail content. State includes `isOpen` (modal open/close), `isSaved` (heart/bookmark toggle), `morphIdx` (index cycling through `morphedPaths` SVG wave array for animated header wave), and `scrollPos` (tracks inner scroll position for parallax header effect). The modal opens via a trigger button and can be dismissed by `Escape` keydown listener (cleaned up on unmount) or an X button. The `AnimatePresence` + `motion.div` provide slide-up/fade entrance animation. Content sections include: hero image with parallax offset based on `scrollPos`, an animated SVG wave path morphing through `morphedPaths` array using CSS animation, event metadata (date, time, location with MapPin, Clock icons), a `priceBreakdown` table (General Admission $45, VIP $95, Group $35/ea), organizer card with initials avatar, a `reviews` array (3 reviews from Marcus J., Priya S., David L.) each with `StarRating` sub-component rendering 5 stars filled based on rating, reviewer initials, and review text. Action buttons include Heart (isSaved toggle), Share2, and a Ticket CTA. `morphedPaths` SVG animation cycles `morphIdx` via `setInterval`. Sub-component `StarRating` accepts `rating` and `size` props. Imports `X`, `ChevronLeft`, `MapPin`, `Clock`, `DollarSign`, `Users`, `Star`, `Heart`, `Share2`, `Ticket`, `ExternalLink`, `Calendar`, `Music`, `Zap`, `Send` from lucide-react and `EventsDetailModal.css`.

As a frontend developer, implement the EventDetailOverview section for the EventDetail page. Renders a card grid of 6 overview items (date, time, location, price, distance, capacity) using a `overviewItems` array with Lucide icons (`Calendar`, `Clock`, `MapPin`, `DollarSign`, `Navigation`, `Users`, `Sparkles`). Each item has an `evov-icon-wrap` with per-item color class, label, value, optional sub-text, and optional badge (`evov-badge-accent` for Early Bird, `evov-badge-warning` for Selling Fast with icon). Animated via framer-motion `containerVariants` (staggerChildren: 0.08) and `itemVariants` (opacity+y:16 fade-in), triggered `whileInView` with `once: true`. Price item renders a composite JSX node with `evov-price-amount` and `evov-price-label` spans. Uses `.evov-` CSS class namespace.

As a frontend developer, implement the EventDetailDescription section for the EventDetail page. Features four tabbed subsections: (1) Description — renders `descriptionHtml` as dangerouslySetInnerHTML with rich text (bold, em, paragraphs); (2) Agenda — renders `agendaItems` array (5 timeline entries with time, title, desc) using `Clock` icon and `ClipboardList`; (3) What to Bring — renders `requirements` array (6 items) with `Package` icon and `Check` icons per item; (4) Accessibility — renders `accessibilityItems` (8 items, available true/false) with `Accessibility` icon and check/cross indicators. Includes a `useState(showFullPolicy)` toggle to expand/collapse a cancellation policy block with `AnimatePresence` + `ChevronRight` icon. Uses `FileText`, `Check`, `ChevronRight` from lucide-react. All animated via framer-motion. Uses `.edd-` CSS class namespace.

As a frontend developer, implement the EventDetailSchedule section for the EventDetail page. Renders a vertical timeline of 7 schedule entries from `scheduleData` array, each with: time range, title, description, location (`MapPin`), duration (`Clock`), optional speaker avatar (initials-based, e.g. 'SK', 'MC', 'ER', 'MS'), and a `highlight` flag that visually elevates keynote/panel entries with a `Star` icon and accent styling. Uses `useRef` + `useInView` from framer-motion to animate each timeline item into view. Concurrent workshops (Workshop A & B at 11:45 AM) are displayed as parallel entries. Uses `Mic` icon for speaker rows. Animated stagger via framer-motion variants. Uses `.eds-` or schedule-specific CSS class namespace (`EventDetailSchedule.css`).

As a frontend developer, implement the EventDetailLocation section for the EventDetail page. Renders a location card with: (1) a static Google Maps image (`mapSrc`) inside `edl-map-wrap` with `onError` fallback to a Mapbox dark-v11 static map via `useState(mapLoaded)`; (2) venue address block with `MapPin`, `Phone`, `Globe` icons and 'Get Directions' CTA using `Navigation` icon; (3) Transit options list — 3 entries (Metro Blue Line, Bus 28, Bus 14) each with route name, station, and walk time using `Bus` icon; (4) Parking options list — 3 entries (Civic Center Garage, Mission Street Lot, Street Parking) with details using `Car` icon; (5) Nearby landmarks list — 5 entries using `Landmark` icon; (6) Hours/access block using `Clock` icon. Layout is responsive two-column. Uses `.edl-` CSS class namespace.

As a frontend developer, implement the EventDetailSidebar section for the EventDetail page. This is a sticky sidebar card containing: (1) Price header showing `$29 / person`; (2) animated 'Get Tickets' / 'Buy Tickets (N)' CTA button using framer-motion `whileHover/whileTap` scale and `Ticket` icon, label updates based on `totalTickets`; (3) Ticket type selector — 3 tiers (`ticketTiers`: General $29, VIP $79, Premium $149) each with `Minus`/`Plus` quantity buttons managed via `useState(ticketQty)` object and `updateQty(id, delta)` handler; (4) Order summary with subtotal, 8% fee calculation, and total using `Math.round`; (5) Save toggle (`Heart`, `useState(saved)`); (6) Follow organizer toggle (`UserPlus`/`Check`, `useState(following)`); (7) Share dropdown (`Share2`, `useState(shareOpen)`) with `AnimatePresence` revealing Copy Link, Twitter, Facebook options; (8) Rating breakdown with `ratingBars` (5→1 stars, percentage bars) and `Star` icons. Uses `.eds-` CSS class namespace.

As a frontend developer, implement the EventDetailOrganizer section for the EventDetail page. Features a **cursor-reactive magnetic tilt card** as its distinctive mechanic: a `cardRef` tracks mouse position via `handleMouseMove` callback, computing `dx`/`dy` offsets relative to card center to drive `useState(tilt)` ({x, y} in degrees, clamped to ±8°) and `useState(glowPos)` ({x%, y%}) — these feed framer-motion spring `rotateX`/`rotateY` transforms for a 3D tilt effect with a radial glow trail. Organizer profile displays: avatar with 'SM' initials, verified `Check` badge, name 'Sarah Mitchell', bio text, and `CountUp`-animated stats (47 past events, 1240 followers) triggered via `useRef(statRef)` + `useState(statAnimated)`. Below the profile, an `otherEvents` horizontal carousel (4 cards with gradient thumbnails, title, date, time, location, attendees) with `ChevronLeft`/`ChevronRight` scroll controls and `useRef(trackRef)` + `useState(scrollPos)`. Contact via `Mail` icon button. Imports both `CountUp.css` and `EventDetailOrganizer.css`.

As a frontend developer, implement the EventDetailRelated section for the EventDetail page. Renders a horizontally scrollable carousel of 5 related event cards from `relatedEvents` array (Neon Lights, Sunset Yoga, Street Food Fiesta, Art Walk, Live Jazz) each with: Unsplash thumbnail image with `placeholderGradient` fallback, category badge using `badgeClassMap` (Music, Food, Sports, Art, Wellness mapped to CSS classes), event title, date (`Calendar` icon), location (`MapPin` icon), price, and attendee count with avatar stack using `avatarColors` gradient array. Scroll navigation via `ChevronLeft`/`ChevronRight` buttons driven by `useRef(trackRef)` + `useState(canScrollLeft, canScrollRight)`, updated by `updateScrollState` callback after `scrollBy(direction)` with 350ms timeout. `ArrowRight` CTA for 'View All Events'. Animated entrance via framer-motion. Uses `.edr-` CSS class namespace.

As a frontend developer, implement the PreviewAndConfirm section for the Advertise page. Build a Step 5 of 5 review UI displaying campaign summary via the summaryRows array (Campaign Name, Event, Est. Audience Size, Total Budget, Duration) with accent/purple color variants per row. Render the settingsRows array (Interest Categories, Age Range, Location Radius, Bid Strategy) with dot color classes pc-dot-purple/cyan/green/amber and isTag flag for pill-style rendering. Implement the useMagneticTilt hook using useRef and useState({x,y}) that computes tilt from mouse position relative to element center via getBoundingClientRect and applies rotateX/rotateY transforms. Wrap summary cards in the MagneticCard component that wires ref/tilt/handleMouseMove/handleMouseLeave to a framer-motion div with spring transition (stiffness:300, damping:28). Include Edit3 action buttons per section and Save/CheckCircle confirm button. Use Eye, FileText, Settings, Calendar, Users, DollarSign, Clock, Target, BarChart3, MapPin, Sparkles, Image, Video icons. Apply PreviewAndConfirm.css styles.

As a Backend Developer, implement a background task service for event reminders and notifications using FastAPI BackgroundTasks and APScheduler (or Celery with Redis). Implementation: (1) Schedule reminder jobs when a user saves an event or adds it to an itinerary — fire reminders at 24h, 2h, and 30min before event start_time; (2) Dispatch in-app notifications via POST /api/notifications/dispatch (internal endpoint); (3) Email dispatch integration using SMTP (configurable via EMAIL_HOST, EMAIL_PORT, EMAIL_USER, EMAIL_PASS env vars); (4) Cron job to clean up dismissed/expired notifications older than 30 days. Note: Frontend tasks that depend on this include NotificationsList (05acfded), NotificationsHeader (c6cb21ae).

As a Tech Lead, verify the end-to-end integration between the Profile page frontend and the User Profile backend API. Ensure: ProfileBasicInfo loads from GET /api/users/{user_id} and submits updates via PUT /api/users/{user_id}; avatar upload calls POST /api/media/upload and returns a URL that updates the avatar preview; ProfileInterests loads current interests and saves via PATCH /api/users/{user_id}/interests; ProfileNotifications loads preferences from GET /api/notifications/preferences and saves via PUT /api/notifications/preferences; ProfileSecurity password change calls a dedicated PATCH /api/auth/password endpoint; ProfilePreferences loads and saves user preferences (budget range, distance, language) via PUT /api/users/{user_id}; all form validation errors from backend are surfaced in the UI.

As a Tech Lead, verify the end-to-end integration between the Dashboard page frontend and the backend APIs. Ensure: DashboardRecommendations loads from GET /api/events/recommendations with user interests and location; DashboardSavedEvents loads from GET /api/users/{user_id}/saved-events and the Heart remove button calls DELETE /api/users/{user_id}/saved-events/{event_id}; DashboardItineraryPreview loads from GET /api/itineraries with the most recent itinerary; DashboardUpcomingEvents loads from GET /api/events with upcoming date filter and isOrganizer/attending flags; DashboardWelcomeBanner reflects the authenticated user's name from auth context; all real-time data reflects user-specific content behind JWT authentication.

As a Tech Lead, verify the end-to-end integration between the Home page frontend and the backend APIs. Ensure: HomeRecommendations loads from GET /api/events/recommendations using user interests and current location; HomeEventMapShowcase loads events from GET /api/events with lat/lng bounds; HomeBrowseExperience loads category event counts from GET /api/events/categories; the smart search bar in HomeHero navigates to /Events with correct query params; save/bookmark toggle on event cards calls POST/DELETE /api/users/{user_id}/saved-events; interest chips in the hero reflect user profile data from auth context; and the overall page renders correctly for both authenticated and unauthenticated users.

As a Tech Lead, verify the end-to-end integration between the AI Recommendations Engine and the frontend pages that consume it. Ensure: GET /api/events/recommendations correctly accepts user_id, lat, lng, budget_max, date_from, date_to, and limit params; HomeRecommendations, DashboardRecommendations, and the Events page recommendation section all correctly call this endpoint; LiteLLM routing to GPT is functional and the fallback rule-based system works when LLM is unavailable; Redis/in-memory cache with 15-minute TTL reduces redundant LLM calls; personalized descriptions returned by the AI are displayed in event cards; and performance is acceptable (response under 2s on cache hit, under 8s on cache miss).

As a Tech Lead, verify the end-to-end integration between the LocationPreferences onboarding component and the Maps/Location backend API. Ensure: city search input calls GET /api/location/cities?q= with debounce for autocomplete suggestions; selectedCity lat/lng is stored to user profile via PUT /api/users/{user_id}; radius preference is persisted and used in subsequent GET /api/events/nearby calls; saved locations (Home, Work, Gym) are stored in user profile JSON; and the location data flows correctly to the events recommendation engine so GET /api/events/recommendations uses the user's saved location.

As a frontend developer, implement the OrganizerProfileActions section for the OrganizerProfile page. This section renders the save/cancel/delete action bar with inline feedback messaging. Key implementation details: useState manages isSaving (bool), message ({type, text} or null), and showDeleteConfirm (bool); handleSave simulates a 1200ms async save via setTimeout, sets isSaving=true during the wait, then resolves with a success message; handleCancel calls window.history.back(); handleDeleteClick reveals a delete confirmation UI by setting showDeleteConfirm=true; handleDeleteConfirm dismisses the confirm and sets a success message; dismissMessage clears message on click; the message div uses conditional CSS classes 'opa-message--visible' and 'opa-message--success/error' for animated reveal; inline SVG icons are defined for save (floppy disk), trash (delete), check (success), and error (X-circle) states; aria-live='polite' on the message div ensures screen-reader accessibility. Styles in OrganizerProfileActions.css using 'opa-*' classes.

As a frontend developer, implement the Navigation section for the Itinerary page. This component reuses the shared Navigation component (may already exist from Home, Events, Login, or other pages) featuring: useState hook managing mobile menu open/close state via `open` boolean, a `navLinks` array with 7 routes (Home, Events, Dashboard, Itinerary, Advertise, Notifications, Profile), MapPin lucide icon in the logo mark alongside 'Weekendly' brand title and 'AI Weekend Planner' subtitle, desktop `nv-links` ul rendering anchor tags, `nv-actions` div with Log in and Get Started CTAs plus a hamburger `nv-burger` button with aria-expanded toggling, and a `nv-mobile` drawer conditionally applying `nv-show` class with mobile link list and mobile CTAs. The `closeMenu` callback ensures mobile links dismiss the drawer on click. Apply Navigation.css styles.

As a frontend developer, implement the NotificationsHeader section for the Notifications page. This component uses `useState(false)` for `markedRead` state and hardcodes `unreadCount = 5`. The heading 'Notifications' is split into individual characters via `headingChars` and each `<motion.span>` uses `charVariants` with staggered delay (`0.08 + i * 0.035`), blur-to-clear animation (`filter: blur(4px) → blur(0px)`), and a cubic-bezier ease. An `nh-count-badge` appears via spring animation (`delay: 0.7, stiffness: 380, damping: 18`) when `unreadCount > 0 && !markedRead`. The 'Mark All as Read' `<motion.button>` uses `whileHover={{ scale: 1.03 }}` and `whileTap={{ scale: 0.97 }}` with `CheckCheck` icon from lucide-react; on click sets `markedRead = true`. When marked, an `nh-toast` confirmation replaces the button via a fade-scale transition. A subtitle `nh-subtext` fades in with `delay: 0.4`. Import `framer-motion` and `NotificationsHeader.css`.

As a frontend developer, implement the NotificationsFilters section for the Notifications page. Uses `useState` for `search`, `activeType` (default 'all'), `activeStatus` (default 'unread'), and `showMobileFilter` (default 'type:all|status:unread'). `useMemo` computes `hasActiveFilters` and generates `mobileOptions` by cross-joining `typeFilters` (5 entries: all, reminders, event_updates, recommendations, system) with `statusFilters` (3 entries: unread, read, archived). Desktop renders a `nf-search-row` with a `Search` icon input and an `AnimatePresence`-wrapped clear (`X`) button visible when search has text. Below are two pill filter rows rendered by a shared `renderPills()` helper — each `<motion.button>` has `whileTap={{ scale: 0.95 }}`, `aria-pressed`, and an `nf-pill-count` badge. Mobile renders a `<select>` with combined type/status options parsed via `parseMobileValue()`. A 'Clear All' button appears when `hasActiveFilters` is true. Import `Search`, `X`, `SlidersHorizontal` from lucide-react and `NotificationsFilters.css`.

As a frontend developer, implement the Footer section for the Notifications page. This component may already exist from previous pages (Home, Events, Itinerary, Login). It uses `useState` for `email` and `subscribed` (newsletter form). Two `ftr-glow` decorative divs are rendered `aria-hidden`. The footer body has a `ftr-brand` column with MapPin logo, tagline, and four social icon links (Twitter, Instagram, Facebook, LinkedIn from lucide-react) rendered as `ftr-social` anchors with `target='_blank'`. Three link columns are rendered via a shared `renderColumn()` helper: 'Explore' (Home, Events, Itinerary, Notifications), 'Account' (Sign Up, Login, Profile, Dashboard), and 'For Organizers' (Advertise, Analytics, OrganizerProfile, EventRegistration). Newsletter form submits with `handleSubmit`, sets `subscribed = true` and clears `email`. Import `Footer.css`.

As a frontend developer, implement the AdvertiseCTA section for the Advertise page. Build the campaign launch CTA section with a decorative 3D layer using @react-three/fiber Canvas (camera at [0,0,180], fov:50) containing a FloatingRings component that renders 18 torus meshes (torusGeometry args [1, 0.25, 8, 16]) with meshBasicMaterial in alternating #32CD32 and #1E90FF at opacity 0.19. Each ring has pre-computed position (x from cos/sin of random angle * 80-220 radius, y ±80, z ±50), scale, speed, phase, and axis via useMemo. The useFrame handler animates sinusoidal x/y drift and incremental z/x rotation (0.003/0.002 per frame). Position the Canvas absolutely via acta-canvas-wrap. Render framer-motion animated content: a Send icon badge (spring: stiffness:220, damping:18, delay:0.1 scale-in), headline with <span> highlight (opacity/y fade, delay:0.2), subtitle, and action buttons with Save and ShieldCheck icons. Apply AdvertiseCTA.css styles.

As a Tech Lead, verify the end-to-end integration between the EventDetail page frontend and the Events CRUD backend API. Ensure: event detail loads from GET /api/events/{event_id} and populates EventDetailHero, EventDetailOverview, EventDetailDescription, EventDetailSchedule, EventDetailOrganizer, and EventDetailLocation sections with real data; the save/unsave Heart button calls POST/DELETE /api/users/{user_id}/saved-events and persists state; ticket tier selection in EventDetailSidebar reflects GET /api/events/{event_id}/tickets data; organizer card loads from GET /api/organizers/{organizer_id}; related events load from GET /api/events with matching category; map section renders venue coordinates from real event lat/lng data; and all loading/error states are handled gracefully.

As a Tech Lead, verify the end-to-end integration between the EventsMap frontend component and the Maps/Location backend API. Ensure: event pins on the 3D map load from GET /api/events with lat/lng and category params; clicking a pin opens the detail panel with real event data; bookmark toggle calls POST/DELETE /api/users/{user_id}/saved-events; map bounds update on zoom/pan to fetch events in the visible area; and the static map image in EventDetailLocation falls back correctly when the maps API is unavailable.

As a Tech Lead, verify the end-to-end integration between saved events UI across all pages and the Saved Events backend API. Ensure: save/unsave actions on EventsGrid, EventDetailSidebar, HomeRecommendations, DashboardRecommendations, and SavedEventsPreview all correctly call POST/DELETE /api/users/{user_id}/saved-events; the saved state is synchronized across components via global state (EventsContext savedIds); removing an event from SavedEventsPreview calls the DELETE endpoint and removes it from the list; DashboardSavedEvents count badge reflects the real count from GET /api/users/{user_id}/saved-events/count; and the Itinerary page 'Add to Itinerary' from saved events correctly calls POST /api/itineraries/{id}/events.

As a frontend developer, implement the ItineraryHeader section for the Itinerary page. This component uses useState to track `activeDate` (default index 1) and useRef/useEffect for D3-powered animated stat counters. Imports d3 for number tweening via `d3.interpolateNumber` with `d3.easeCubicOut` over 1800ms duration. Renders a `dateOptions` array of 3 dates (Fri 13, Sat 14 active, Sun 15) as a date selector bar with `ih-date-bar`. The `statsData` array drives 3 animated stat cards (7 Events Planned via CalendarDays icon, 18.4 km Total Distance via MapPin, $145 Estimated Cost via DollarSign). The `useAnimatedCount` custom hook selects DOM elements via d3 and runs the tween transition. `AnimatedStat` sub-component accepts value, prefix, suffix, formatDecimals props and attaches countRef. Top row includes `ih-title-block` with kicker dot, h1 title with accent span 'Austin', subtitle paragraph, and an Edit Plan button with Pencil icon and aria-label. Apply ItineraryHeader.css styles.

As a frontend developer, implement the ItineraryTimeline section for the Itinerary page. Uses useState for `expandedDays` object (all days expanded by default initialized via itineraryData forEach), plus per-event expand state managed via useRef/useCallback. Imports framer-motion's `motion` and `AnimatePresence` for animated expand/collapse of day groups and event detail panels. Uses d3 for any supplementary visual transitions. Renders `itineraryData` array with 2 days (Saturday June 7 with 4 events, Sunday June 8 with 3 events); each event card shows time, duration via Clock icon, name, location via MapPin icon, a cost badge, and an expandable `preview` text panel toggled by ChevronDown icon with rotation animation. Active event (e2 Farmers Market Brunch) receives highlighted styling. Day headers include CalendarDays icon, day label, date, and a collapse toggle. Empty state uses Inbox icon. Apply ItineraryTimeline.css styles.

As a frontend developer, implement the ItineraryMap section for the Itinerary page. Uses useRef for `svgRef` and `containerRef` and `transformRef`, useState for `selectedEventId`, `tooltip` object ({visible, x, y, event}), `dimensions` ({width: 800, height: 560}), and `transform` ({x, y, k}). Implements ResizeObserver via `handleResize` useCallback to update dimensions reactively. `projectPoint` useCallback uses d3.min/d3.max on `itineraryEvents` lat/lng to compute bounds and map geo coordinates to SVG pixel positions. Renders 5 itinerary events (Morning Yoga, Brunch, Street Art Tour, Live Jazz, Sunset Rooftop Dinner) as SVG circle markers with MapPin icons. D3 zoom behavior attached to svgRef updates transformRef and triggers re-render. `travelEstimates` array of 4 leg objects ({from, to, distance, time, mode}) renders a travel summary panel. `AnimatePresence` and `motion` from framer-motion animate tooltip and selected event detail card with Navigation, Clock lucide icons. Plus/Minus buttons for zoom controls. MapIcon for empty/fallback state. Apply ItineraryMap.css styles.

As a frontend developer, implement the ItineraryActions section for the Itinerary page. Uses useState for `reminderOn` (default true) and `feedback` (null | 'save' | 'export' | 'start'). `clearFeedback` useCallback sets a 2800ms setTimeout to reset feedback to null. Three action handlers — `handleSave`, `handleExport`, `handleStart` — each set the corresponding feedback state then call clearFeedback. Renders a primary actions row (`ia-actions-row`) containing: Save & Share motion.button with Share2 icon and spring transition (stiffness 500, damping 30), Print/Export PDF motion.button with Printer icon, Modify Itinerary anchor link with Edit3 icon, and Start Plan motion.button with Play icon — all with whileHover scale 1.04 and whileTap scale 0.96. A reminder toggle div conditionally applies `ia-reminder-on` class when reminderOn; uses Bell/BellOff icons and an htmlFor-linked checkbox. AnimatePresence wraps feedback toast messages using CheckCircle2, FileText, Zap icons. Apply ItineraryActions.css styles.

As a frontend developer, implement the Footer section for the Itinerary page. This component reuses the shared Footer (may already exist from Home, Events, Login, Signup pages). Uses useState for `email` string and `subscribed` boolean. `handleSubmit` prevents default, guards empty trimmed email, sets subscribed true and clears email. Renders two `ftr-glow` decorative divs, a brand column with MapPin logo, tagline text, and social icon links (Twitter, Instagram, Facebook, LinkedIn from lucide-react) opening in new tabs with rel='noreferrer'. `renderColumn` helper generates three link columns: Explore (Home, Events, Itinerary, Notifications), Account (Sign Up, Login, Profile, Dashboard), For Organizers (Advertise, Analytics, OrganizerProfile, EventRegistration). Newsletter subscription form conditionally shows success state when `subscribed` is true. Apply Footer.css styles.

As a frontend developer, implement the NotificationsList section for the Notifications page. Manages `INITIAL_NOTIFICATIONS` array of 8+ items (types: event, rsvp, reminder, promo, system) in local state via `useState`. Each item has `id`, `type`, `title`, `snippet`, `time`, `read`, `detail`, `eventDate`, and optional `location`, `cost`, `guests`. Uses `useCallback` for handlers. `CATEGORY_ICONS` map types to lucide-react icons (Calendar, Bell, CheckCircle, Tag, Info) with per-type CSS classes. Each notification card renders with `AnimatePresence` for mount/dismiss animations. Cards support: mark-as-read toggle, dismiss (`X` button removing item from state), and expand/collapse detail panel via `ChevronDown` toggle with `MoreHorizontal` overflow menu. Expanded detail shows `eventDate` with `Clock`, `location` with `MapPin`, `cost` with `DollarSign`, `guests` with `Users` icons. Unread cards have distinct visual styling. Import all icons from lucide-react, `motion`/`AnimatePresence` from framer-motion, and `NotificationsList.css`.

As a frontend developer, implement the NotificationsEmpty section for the Notifications page. This is a static empty-state component displayed when no notifications match filters. Renders two decorative CSS-animated rotating rings (`ne-bg-ring` and `ne-bg-ring ne-bg-ring-sm`) as `aria-hidden` divs. The icon group contains a `ne-icon-bg` glow layer, a `ne-icon-core` housing `BellRing` (size 28, strokeWidth 2) from lucide-react, and a `ne-icon-dot` notification indicator. Below the icon: an `ne-heading` ('No notifications yet') and `ne-subtext` explanation paragraph. Two CTA buttons in `ne-actions`: a primary anchor link to '/Events' with `Compass` icon and a secondary button ('Adjust Filters') with `SlidersHorizontal` icon. Import `NotificationsEmpty.css`.

As a frontend developer, implement the Navigation section for the EventRegistration page. This component may already exist from previous pages (Home, Events, Itinerary, Notifications). It uses useState for mobile menu open/close state, renders a responsive nav with nv-root/nv-inner CSS classes, includes a MapPin lucide icon in the logo, maps over navLinks array (Home, Events, Dashboard, Itinerary, Advertise, Notifications, Profile), and renders both desktop nv-links and mobile nv-mobile drawer with nv-burger toggle button (aria-expanded). Actions include Log in and Get Started CTAs. Import from '../styles/Navigation.css'.

As a frontend developer, implement the EventRegistrationHeader section for the EventRegistration page. Uses useState for currentStep (1-5) with goToStep/goPrev/goNext handlers. Renders a breadcrumb nav (Dashboard > Events > Register Event) with ChevronRight lucide icons. Displays a dynamic h1 title and subtitle from titles/titleAccents/instructions lookup objects keyed by currentStep. Renders a step indicator (evh-steps) mapping over steps array with evh-step-completed/evh-step-active CSS classes, Check icon for completed steps, and aria-current='step' for active. Includes a progress bar computing Math.round((currentStep/totalSteps)*100). Has Previous/Next navigation buttons. Import from '../styles/EventRegistrationHeader.css'.

As a frontend developer, implement the EventBasicInfo section for the EventRegistration page. Uses multiple useState hooks: eventName, category, description, image, imagePreview, imageError, touched, and formValid. Implements a validators object with per-field rules (eventName: 3-80 chars, category: required, description: 20-500 chars). Renders a category select dropdown from a categories array (music, food, sports, art, tech, outdoor, nightlife, workshop, community, other) with ChevronDown icon. Includes an image upload zone with Upload and X lucide icons, image preview, and drag-and-drop support. Uses handleBlur for touched-field tracking and real-time formValid computation. Displays AlertCircle/CheckCircle2 icons for field validation states. Import from '../styles/EventBasicInfo.css'.

As a frontend developer, implement the EventDetailsForm section for the EventRegistration page. Uses useState for form object (organizerName, contactEmail, phone, websiteUrl, tags array), tagInput, and errors. Renders four text input fields defined as field config objects: organizerField, emailField, phoneField, websiteField. Implements per-field validation with regex patterns (email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, phone: /^\+?[\d\s\-().]{7,20}$/, URL: new URL() check). Renders a tag input with suggestedTags chips (12 preset tags: Music, Food, Sports, Art, Tech, Outdoor, Family, Nightlife, Networking, Workshop, Festival, Community) with add-tag and remove-tag (max 6 tags) interactions. handleBlur triggers field-level validation on blur. Import from '../styles/EventDetailsForm.css'.

As a frontend developer, implement the EventLocationSchedule section for the EventRegistration page. Uses useState for address, cityState, cityQuery, showCityDropdown, activeCityIdx, eventDate, startTime, endTime, manualDuration, and customDuration. Uses useMemo for filteredCities (filtering 49-city array by cityQuery, showing top 8 matches) and computedDuration (auto-calculates hr/min difference from startTime/endTime, or falls back to customDuration when manualDuration is true). Renders city autocomplete dropdown with keyboard navigation (ArrowUp/ArrowDown/Enter) via handleCityKeyDown and handleCitySelect. Uses MapPin, Calendar, Clock, Navigation, Hash lucide icons. Includes date picker, start/end time inputs, and manual duration override toggle. Import from '../styles/EventLocationSchedule.css'.

As a frontend developer, implement the Footer section for the EventRegistration page. This component may already exist from previous pages (Home, Events, Itinerary, Notifications). Uses useState for email and subscribed state. Renders ftr-root with two ftr-glow decorative divs (aria-hidden). Includes ftr-brand with MapPin logo, tagline text, and social links (Twitter, Instagram, Facebook, LinkedIn lucide icons) as ftr-social anchors with target='_blank'. Uses a renderColumn helper to render three link columns: Explore (Home, Events, Itinerary, Notifications), Account (Sign Up, Login, Profile, Dashboard), and For Organizers (Advertise, Analytics, Organizer Profile, Event Registration). Renders a newsletter subscription form with email input and handleSubmit toggling subscribed state. Import from '../styles/Footer.css'.

As a Tech Lead, verify the end-to-end integration between the event reminders background service and the Notifications frontend. Ensure: when a user saves an event or adds it to an itinerary, the reminder scheduler registers jobs for 24h, 2h, and 30min before event start; scheduled reminders appear in NotificationsList as type='reminder' with correct eventDate, location, and cost fields; the unread badge count in NotificationsHeader updates when new reminders arrive (via polling or websocket); ProfileNotifications email/push/sms toggles correctly update the reminder dispatch channels via PUT /api/notifications/preferences; and reminder emails are sent correctly to the user's registered email address.

As a frontend developer, implement the EventReviewSubmit section for the EventRegistration page. Uses framer-motion (motion, AnimatePresence) for animated accordion expand/collapse. Uses useState for expandedId (accordion), termsAccepted (checkbox), submitting, submitted, savingDraft, and draftSaved. Renders four reviewSections (basic-info, details, budget, location) each with icon, label, title, and fields array — mapped to accordion panels toggled via toggleSection handler. Includes a stepLabels progress bar (5 steps). Has a terms acceptance checkbox. Renders a Submit button with Loader2 spinner during submitting state and CheckCircle success animation on submitted. Has a 'Save Draft' action using setSavingDraft/setDraftSaved with timeout. Uses ClipboardCheck, Calendar, MapPin, DollarSign, Clock, ChevronDown, Pencil, Check, Send, FileText, Eye lucide icons. Import from '../styles/EventReviewSubmit.css'.

As a frontend developer, implement the Navigation section for the Advertise page. This component uses `useState` for mobile menu toggle (`open` state) with `setOpen` toggling and `closeMenu` helper. Renders a `<nav className='nv-root'>` with an inner container holding: (1) a logo anchor with `MapPin` lucide icon (size=18, strokeWidth=2.5) linking to /Home, logo title 'Weekendly' and subtitle 'AI Weekend Planner'; (2) a desktop `<ul className='nv-links'>` mapping over 7 `navLinks` (Home, Events, Dashboard, Itinerary, Advertise, Notifications, Profile); (3) `nv-actions` div with Log in and Get Started anchors plus a hamburger `<button>` with aria-expanded and three `<span>` children toggling `nv-open` class; (4) a mobile drawer `<div className='nv-mobile'>` with `nv-show` class when open, duplicating nav links with `onClick={closeMenu}`. Imports Navigation.css. Note: this component likely already exists from previous pages (Itinerary, Notifications, EventRegistration) — reuse if available. Page-level dependency chains from EventRegistration page tasks.

As a Tech Lead, verify the end-to-end integration of the image upload flow across all pages that use it. Ensure: EventBasicInfo drag-and-drop image upload calls POST /api/media/upload and returns a CDN URL stored in event data; OrganizerProfileHeader avatar change triggers POST /api/media/upload and the returned URL is persisted via PUT /api/organizers/{id}; CampaignBuilder asset upload correctly handles image/video MIME types; object URL previews are created via URL.createObjectURL for immediate preview and swapped with CDN URL on successful upload; file size validation (max 5MB) and MIME type validation (image/jpeg|png|webp) errors are surfaced in the UI; and cleanup via URL.revokeObjectURL is called on component unmount.

As a frontend developer, implement the AdvertiseHero section for the Advertise page. This is a static presentational section with no state hooks. Renders `<section className='ah-root'>` with an `ah-inner` container containing: (1) a decorative `ah-accent-bar` div (aria-hidden); (2) an `ah-content` div with a breadcrumb `<nav aria-label='Breadcrumb'>` as an `<ol>` with three items linking Home → Dashboard → Advertise (current); (3) an `<h1 className='ah-headline'>` with text 'Create & Manage' and an `<span className='ah-headline-accent'>Ad Campaigns</span>`; (4) a subheadline paragraph about targeted campaigns; (5) an `ah-meta` div with three `ah-meta-item` rows using `Megaphone` (size=15), `Zap` (size=15, color=var(--primary)), and a dot span — displaying reach stats '500+ daily users', 'Setup in under 3 min', and 'Active campaigns live now'; (6) a CTA anchor `<a className='ah-action' href='#campaign-builder'>` with 'Start New Campaign' text and `ArrowRight` (size=17) icon. Imports AdvertiseHero.css and lucide-react icons ArrowRight, Megaphone, Zap.

As a frontend developer, implement the Footer section for the Advertise page. Uses `useState` for `email` and `subscribed` state to handle newsletter subscription form with `handleSubmit` (prevents default, guards empty email, sets subscribed=true, clears email). Renders `<footer className='ftr-root'>` with two decorative glow divs (aria-hidden), then `ftr-inner` containing: (1) `ftr-top` with `ftr-brand` column (MapPin logo size=20 linking /Home, tagline paragraph, social links row mapping `socials` array with Twitter, Instagram, Facebook, LinkedIn lucide icons size=20, target=_blank); (2) three link columns via `renderColumn` helper rendering `ftr-col` divs — 'Explore' (Home, Events, Itinerary, Notifications), 'Account' (Sign Up, Login, Profile, Dashboard), 'For Organizers' (Advertise, Analytics, OrganizerProfile, EventRegistration). Newsletter email input with conditional subscribed confirmation state. Imports Footer.css and lucide-react MapPin, Twitter, Instagram, Facebook, Linkedin. Note: this Footer component likely already exists from previous pages — reuse if available.

As a frontend developer, implement the AnalyticsHeader section for the Analytics page. This section renders a full header control bar with: (1) a title block showing 'Analytics' label and 'Event Performance' h1; (2) a date range picker using two controlled `<input type='date'>` elements (startDate/endDate state) with a Calendar icon from lucide-react and an arrow separator; (3) DATE_PRESETS array with 7d/30d/90d/1y buttons that call applyPreset() updating both date inputs and activePreset state; (4) CATEGORY_FILTERS array with 6 filter pill buttons (all/music/food/sports/arts/tech) managing activeCategory state; (5) a refresh button with RefreshCw icon that triggers handleRefresh() — sets spinning state true for 700ms to animate the icon — and updates lastRefreshed timestamp displayed via the timeAgo() utility function. Uses useState and useCallback hooks throughout. Imports from '../styles/AnalyticsHeader.css'.

As a Tech Lead, verify the end-to-end integration between the EventRegistration budget step frontend and the Event Budget backend API. Ensure: the budget configuration step in the multi-step form correctly submits ticket tiers (General, VIP, Premium) and pricing to POST /api/events/{event_id}/tickets; event budget min/max is persisted via POST /api/events/{event_id}/budget; the EventReviewSubmit accordion shows real budget data fetched from the API; EventDetailSidebar ticket tier selector reflects the tiers from GET /api/events/{event_id}/tickets; ticket quantity and order summary calculations match backend pricing; and organizer can update ticket pricing via PUT /api/events/{event_id}/budget.

As a frontend developer, implement the AnalyticsKPICards section for the Analytics page. This section renders 4 animated KPI metric cards (Total Events, Total Registrations, Conversion Rate, Revenue) from the KPI_DATA array. Each card uses framer-motion `cardVariants` with staggered entrance animations (delay: i * 0.08, ease cubic bezier). Each card displays: an SVG icon, label, numeric value, change percentage with direction (up/down) indicator, and a D3-rendered sparkline SVG using the sparklineData array and sparklineColor per card. The sparkline is drawn via a d3 line generator with curveMonotoneX. Uses AnimatePresence and motion.div from framer-motion, useRef for SVG sparkline containers, useEffect for D3 rendering, and useCallback for interaction handlers. Imports from '../styles/KPICard.css' and '../styles/AnalyticsKPICards.css'.

As a frontend developer, implement the AnalyticsEventPerformanceChart section for the Analytics page. This section is a fully interactive multi-series D3 line chart. Key details: (1) SERIES_CONFIG defines 4 series — eventsCreated (#1E90FF), views (#FF6347), saves (#32CD32), registrations (#FFD700); (2) generateDailyData(days) produces random-walk time series data; (3) timeRange state (7d/14d/30d/90d) controls days via useMemo-computed rawData; (4) visibleSeries state object toggles individual series on/off via legend clicks; (5) ResizeObserver on containerRef updates chartDims state for responsive SVG sizing; (6) D3 margin object (top:18, right:20, bottom:34, left:42) computes innerW/innerH; (7) tooltip state and cursorX state drive a floating tooltip and vertical cursor line on mouse hover; (8) framer-motion AnimatePresence manages tooltip mount/unmount. Uses useState, useMemo, useRef, useCallback, useEffect extensively. Imports '../styles/AnalyticsEventPerformanceChart.css'.

As a frontend developer, implement the AnalyticsAudienceInsights section for the Analytics page. This section renders multiple audience data visualizations: (1) a Chart.js Pie chart (via react-chartjs-2) using DEMOGRAPHICS array (5 age brackets, colors #1E90FF/#FF6347/#32CD32/#FFD700/#87CEFA) with ChartJS.register for ArcElement, Tooltip, Legend, CategoryScale, LinearScale, PointElement, LineElement, Filler; (2) a D3 force-directed ForceBubbleChart component using INTEREST_DATA (10 interest categories) — d3.forceSimulation with forceCenter, forceCollide (radius d.r+3, 3 iterations), forceX/forceY strength 0.015, alphaDecay 0.02, 120 pre-ticked iterations, rendering bubble <circle> and label elements; (3) TOP_CITIES horizontal bar list with percentage display; (4) a GROWTH_DATA line chart (6 months Jan–Jun). Registers Chart.js components globally. Uses useState, useEffect, useRef, useMemo. Imports '../styles/AnalyticsAudienceInsights.css'.

As a frontend developer, implement the AnalyticsEngagementMetrics section for the Analytics page. This section renders an interactive sortable/searchable/paginated data table of 10 events from ENGAGEMENT_DATA. Key features: (1) COLUMNS array defines 7 columns (event, category, views, clicks, saves, shareRate, engagementScore) all sortable; (2) Search input filters rows by event name using useState; (3) sort state (column + direction) with SortIndicator component rendering ChevronUp/ChevronDown from lucide-react; (4) CATEGORY_ICONS map uses lucide-react icons (Music, UtensilsCrossed, Trophy, Palette, Code, Users); (5) ROWS_PER_PAGE=6 with ChevronLeft/ChevronRight pagination controls; (6) engagementScore column renders a custom EngagementScoreCell component (imported from '../styles/EngagementScoreCell.css'); (7) framer-motion AnimatePresence animates row entrance/exit; (8) D3 used for score color scale. Uses useState, useMemo, useCallback. Imports '../styles/AnalyticsEngagementMetrics.css' and '../styles/EngagementScoreCell.css'.

As a frontend developer, implement the AnalyticsConversionFunnel section for the Analytics page. This section renders an SVG-based conversion funnel with 4 stages from FUNNEL_STAGES (Impressions 28,490 → Views 18,230 → Saves 9,420 → Registrations 3,650). Key details: (1) computeFunnelData() calculates widthPercent, dropOff, dropPercent, and conversionRate per stage; (2) svgDimensions useMemo computes BAR_HEIGHT=52, GAP=18, LABEL_AREA_WIDTH=200, totalHeight dynamically; (3) D3 builds the SVG funnel bars with trapezoid/rectangular shapes; (4) activeStage state and handleBarEnter/handleBarLeave handlers show a floating tooltip (tooltipPos x/y computed from getBoundingClientRect vs containerRef) via AnimatePresence; (5) allConversionStats useMemo computes stage-to-stage conversion rate labels; (6) summary stat cards show OVERALL_CONVERSION (12.8%), TOP_FUNNEL_LOSS (36.0%), REGISTRATION_RATE (39%). Uses useState, useEffect, useRef, useMemo. Imports '../styles/AnalyticsConversionFunnel.css'.

As a frontend developer, implement the AnalyticsExportActions section for the Analytics page. This section renders an export and sharing toolbar. Key features: (1) EXPORT_FORMATS array (CSV/FileSpreadsheet, PDF/FileText, PNG/FileImage) drives ExportButtons component — activeFormat state tracks selected format, active button triggers icon rotation animation via framer-motion (animate rotate:360); (2) SharePanel component with open/closed state, click-outside detection via useEffect + document.addEventListener('mousedown'), AnimatePresence for dropdown reveal, and SHARE_OPTIONS (Twitter, Facebook, Mail, Link2) from lucide-react; (3) DateRangeDisplay sub-component shows Calendar icon with 'Jun 1 → Jun 4, 2026' report period; (4) Download icon from lucide-react on the primary download CTA button; (5) FileBarChart icon for report summary label; (6) all interactive buttons use framer-motion whileTap/whileHover spring animations (stiffness 400-500, damping 20-25); (7) D3 imported (likely for chart-to-PNG export utility). Uses useState, useRef, useEffect, useCallback. Imports '../styles/AnalyticsExportActions.css'.