Crush

As a frontend developer, implement the OnboardingHeader section for the Onboarding page. This section renders a branded header using four refs (logoRef, headlineRef, subtitleRef, stepsRef) animated via GSAP's gsap.fromTo with staggered fade-in and y-translate (opacity 0→1, y 12→0, stagger 0.1s, power2.out ease). It displays: (1) the 'Crush' logo with an SVG star icon using oh-logo/oh-logo-icon/oh-logo-star/oh-logo-text classes, (2) an h1 headline 'Let's Get Started', (3) a subtitle paragraph, and (4) a 4-step progress dot indicator using the STEPS array (phone, verify, profile, done) rendered as oh-step-dot spans with oh-step-dot--active on step 0, connected by oh-step-line spans, with ARIA labels for accessibility. Uses a gsap.context for cleanup on unmount. Import OnboardingHeader.css for all oh-* class styles.

As a Backend Developer, implement the core Match Engine as a Firebase Cloud Function. The function must: (1) Validate tier capacity limits for the user, (2) Perform the Mirror Lookup to check if User A exists in User B's crushList, (3) Execute Scenario 1 (No Match): atomically append User B to User A's crushList without notifying User B, (4) Execute Scenario 2 (Mutual Match): run a single atomic Firestore transaction removing both parties from each other's crushLists and appending reciprocal match data to both matchHistory arrays, (5) Trigger FCM push notifications to both devices on mutual match. Enforce the Core Privacy Rule — no unilateral crush reveals.

As a Backend Developer, integrate RevenueCat for managing subscription tiers (Free: 20 slots, Pro: 100 slots, Elite: 2000 slots). Implement a Firebase Cloud Function webhook that listens to RevenueCat subscription events (purchase, renewal, cancellation, upgrade, downgrade) and updates the user's crushLimit field in Firestore accordingly. For Elite tier users, transition crushList storage from the embedded array to a paginated subcollection (eliteCrushes) for document safety. Configure RevenueCat products and entitlements to match tier definitions.

As a Frontend Developer, set up global state management and Firebase SDK integration for the React Native app. Initialize Firebase SDK (Auth, Firestore, FCM) with environment-specific configuration. Implement a global AuthContext providing currentUser, userDocument (with crushList, matchHistory, crushLimit), and auth state listeners using onAuthStateChanged. Set up React Context or Zustand store for shared UI state (tier, slot counts, notifications). Configure FCM foreground/background message handlers and notification permissions. Note: All page-level frontend tasks depend on this setup.

As a frontend developer, implement the OnboardingPhoneInput section for the Onboarding page. This section renders a phone number entry form with the following features: (1) a country code selector using a COUNTRY_CODES array of 10 entries (India, US, UK, AU, JP, CN, DE, FR, UAE, SG) with flag emoji, code, and name — rendered as a styled select with ChevronDown icon from lucide-react; (2) a phone number text input with ref (inputRef) that formats digits in real-time via the formatPhone() utility (supporting +91 with 5+5 space grouping and +1 with (XXX) XXX-XXXX masking); (3) useState hooks for countryCode (default '+91'), phone, error, and loading; (4) handleCountryChange resets phone/error and refocuses input; (5) handlePhoneChange enforces per-country maxLen digit caps and clears errors; (6) validatePhone checks minimum digit length per country code; (7) handleSubmit calls validatePhone, sets loading true, then uses window.setTimeout to simulate async SMS send. Uses AlertCircle and MessageSquare icons from lucide-react for error and submit button states. Import OnboardingPhoneInput.css.

As a frontend developer, implement the OnboardingSMSVerification section for the Onboarding page. This section renders a 6-digit OTP entry UI (CODE_LENGTH=6) with the following features: (1) digits state array of 6 empty strings managed via useState, with a ref array (inputsRef) for programmatic focus control; (2) focusNext callback advances focus to the next empty input after a digit is entered; (3) handleDigitChange strips non-digits, updates the digit at index, clears errors, and calls focusNext; (4) handleKeyDown supports Backspace (clears current or moves to previous), ArrowLeft/ArrowRight navigation between inputs; (5) handlePaste reads clipboard text, strips non-digits, fills up to CODE_LENGTH slots; (6) a countdown timer (RESEND_COOLDOWN=45s) managed via useEffect with window.setInterval for the resend cooldown; (7) verifying and success states; (8) AnimatePresence and motion from framer-motion for error/success message transitions; (9) AlertCircle and CheckCircle icons from lucide-react for feedback states; (10) phone number displayed as '(323) 555-0187'. Import OnboardingSMSVerification.css.

As a frontend developer, implement the OnboardingProgress section for the Onboarding page. This section renders a multi-step progress tracker with: (1) a steps array of 3 items ({label, status}) with statuses 'complete', 'active', 'pending'; (2) sectionRef and barRef for GSAP targeting, plus animated boolean state toggled by an IntersectionObserver (threshold 0.3) on sectionRef; (3) computed values: activeIndex (findIndex of 'active'), displayStep, completedCount, totalSteps, and percent (completedCount/totalSteps * 100); (4) on intersection trigger, GSAP animates all .op-step badges from opacity 0 / y 24 to opacity 1 / y 0 with 0.15s stagger (power2.out), then fills barRef from width '0%' to percent% over 0.8s with 0.3s delay (power3.out); (5) renders a step counter paragraph ('Step N of 3'), a steps row with op-step divs containing op-badge spans (op-badge--pending or op-badge--active) showing a Check icon (lucide-react, size=20, strokeWidth=2.8) for complete steps, and connector lines between steps. Uses gsap.context for cleanup. Import OnboardingProgress.css.

As a frontend developer, implement the DashboardHeader section for the Dashboard page. Build the `DashboardHeader` component using `useState` with a `DEMO_USER` object containing `name`, `tier`, `usedSlots`, and `totalSlots`. Render a `<header className='dh-root'>` with two main sub-regions: (1) `dh-user-row` containing a `dh-avatar` with `User` icon from lucide-react, a `dh-greeting-block` with an `<h1>` greeting and subtitle, and a dynamic `dh-tier` badge with tier-specific CSS modifier (`dh-tier--pro`, etc.) containing a `dh-tier-dot` span; (2) `dh-meta` containing a `dh-slots` block with a `Heart` icon, slots count display (`usedSlots/totalSlots`), and a `dh-slots-bar` progress bar with inline `width` style computed as `(usedSlots/totalSlots)*100%`, plus a `dh-menu` nav with links to `/Dashboard` (Profile), `/Settings`, and `/Login` (Sign Out) using `User`, `Settings`, and `LogOut` lucide icons respectively with a `dh-menu-divider` separator. Apply `DashboardHeader.css` styles. Note: this is a new page-level header component specific to the Dashboard page, not a shared Navbar.

As a Backend Developer, implement the Hot vs. Cold scaling strategy as a Firebase Cloud Function triggered on matchHistory array writes. When matchHistory reaches 101 entries, perform FIFO relay: (1) Pop the oldest match object from the embedded matchHistory array, (2) Write it to the permanent archivedMatches subcollection (users/{phoneNumber}/archivedMatches), (3) Push the newest match to the top of the hot array. Ensure this is atomic and handles concurrent writes safely. This supports infinite scroll pagination in the MatchHistory page frontend tasks.

As a Backend Developer, implement the Unmatch Cloud Function that allows a user to manually unmatch a previously matched contact. The function must: (1) Validate the match exists in both users' matchHistory, (2) Remove the match from both users' matchHistory arrays atomically, (3) Enforce the re-add restriction: prevent either party from re-adding the other's number until unmatch is triggered by both parties, (4) Update a blockedRematches field or similar mechanism on both user documents. Note: DashboardMatchHistory and MatchHistoryList frontend tasks (handleUnmatch) depend on this endpoint.

As a Backend Developer, set up Firebase Cloud Messaging (FCM) push notification service. Implement device token registration and storage on user documents (fcmToken field). Create a notification dispatch utility used by the Match Engine Cloud Function to send simultaneous push notifications to both matched users upon mutual match. Ensure notifications do NOT reveal crush information for unmatched interactions — only fire on confirmed mutual matches. Handle token refresh and invalid token cleanup.

As a Frontend Developer, set up React Navigation for the Crush React Native app. Configure a root navigator with: (1) Auth stack (Landing, Onboarding), (2) Main app stack (Dashboard, AddCrush, MatchHistory, Upgrade). Implement deep linking configuration for FCM notification taps routing to MatchHistory. Set up screen transition animations consistent with the Interaction Model (parallax on Landing, static on internal pages). Configure navigation guards redirecting unauthenticated users to Onboarding. Note: All page-level tasks depend on this navigation scaffold.

As a frontend developer, implement the DashboardCrushSlots section for the Dashboard page. Build the `DashboardCrushSlots` component using `useState` for `slots` (initialized with 8 demo entries each having `id`, `phone`, `initial`, `status` ('waiting'|'matched'|'expired'), and `paletteIdx`) and `visible` (pagination count starting at 8). Define `AVATAR_PALETTE` array of 6 CSS class variants (`dcs-avatar--a` through `dcs-avatar--f`). Implement `handleUnmatch(id)` that filters out a slot by id from state, and `handleLoadMore()` that increments `visible` by 8 up to `slots.length`. Render an empty state with `Heart` icon, title, description, and an `<a href='/AddCrush'>` CTA when `filled === 0`. Otherwise render a `<section className='dcs-root'>` with a `dcs-hd` header showing filled/MAX_CAPACITY (16) counts, and a `dcs-grid` of `<article className='dcs-card'>` elements for `slots.slice(0, visible)` — each card showing a colored avatar span using the palette class, masked phone info, status badge label ('Waiting'/'Matched'/'Expired'), and action buttons using `Eye`, `UserX`, and `Plus` lucide icons. Apply `DashboardCrushSlots.css` styles.

As a frontend developer, implement the DashboardQuickActions section for the Dashboard page. Build the `DashboardQuickActions` component using `useRef` for `btnRefs` array and `useCallback` for three interaction handlers. Implement `handleMouseEnter(index)` and `handleMouseLeave(index)` using `gsap.to()` to animate `scale` to 1.03 and back to 1 with `power2.out` easing. Implement `handleClick(e, index)` that triggers a GSAP spring animation via `gsap.fromTo()` (scale 0.94 → 1 with `elastic.out(1, 0.35)`) and programmatically creates and appends a `<span className='dqa-ripple'>` DOM element positioned via `getBoundingClientRect()` with click-relative coordinates, removing it on `animationend`. Render a `motion.div` wrapper with Framer Motion `initial={{ opacity: 0, y: 32 }}` / `animate={{ opacity: 1, y: 0 }}` entrance animation. Map over `actions` array (Add New Crush → `/AddCrush`, View Match History → `/MatchHistory`, Manage Bulk → `/AddCrush`) using `PlusCircle`, `Clock`, and `Layers` lucide icons, applying variant class modifiers (`dqa-btn--primary`, `dqa-btn--secondary`, `dqa-btn--accent`) and a `dqa-badge` Pro label for the bulk action. Requires `framer-motion` and `gsap` dependencies. Apply `DashboardQuickActions.css` styles.

As a frontend developer, implement the DashboardMatchHistory section for the Dashboard page. Build the `DashboardMatchHistory` component with `useState` hooks for `open` (collapsible panel, default true), `showArchived` (load-more reveals archived list, default false), `loadingMore` (spinner state during 800ms simulated delay), and `unmatching` (tracks which match id is animating unmatch, clears after 1200ms). Define `recentMatches` (10 entries) and `archivedMatches` (5 entries) with fields `id`, `name`, `masked`, `time`, `isMasked`. Implement `getInitials(name)` helper. Define Framer Motion variants: `rowVariants` with `hidden`/`visible(i)`/`exit` states (staggered `i * 0.04s` delay, x-slide from -12), and `listWrapVariants` for height-animate accordion. Use `AnimatePresence` for row exit animations and panel open/close. Render `ChevronRight` toggle icon (rotated when open), `Heart` icon for matched rows, `UserX` for unmatch action, `UserPlus` for re-add, and `Loader2` spinner during `loadingMore`. Show masked entries (isMasked=true) with `••• ••• XXXX` format and blurred styling. Include a 'Load More' button that triggers `handleLoadMore` with simulated async delay before showing archived matches. Apply `DashboardMatchHistory.css` styles. Requires `framer-motion`.

As a frontend developer, implement the DashboardUpgrade section for the Dashboard page. Build the `DashboardUpgrade` component with `useState` for `currentTier` ('regular'|'pro'|'elite') and `capacityPercent` (80). Define a `TIERS` object with three keys (`regular`, `pro`, `elite`) each containing `key`, `name`, `slots`, `price`, `perLabel`, and `features` arrays where each feature has `text` and `icon` ('check'|'star'|'dash'). Implement `renderFeatureIcon(iconType)` that returns a styled span with `Check`, `Star`, or `Minus` lucide icon (size 15, strokeWidth 2.5) with corresponding CSS modifier classes (`du-feature-icon--check`, `du-feature-icon--star`, `du-feature-icon--dash`). When `currentTier === 'elite'`, render an empty hidden section (`du-root--hidden`, `aria-hidden='true'`). Otherwise compute `nextKey` (regular→pro, pro→elite), `currentUsed` from `capacityPercent`, and render a `<section className='du-root'>` with: a `du-badge` containing a `Sparkles` icon (size 13), an `<h2>` showing used/total slot counts, a subtitle, a feature comparison list, and an upgrade CTA button with `ArrowRight` icon. Apply `DashboardUpgrade.css` styles.

As a frontend developer, implement the ACHeader section for the AddCrush page. Build a sticky header component using `ach-root` with a `stuck` state driven by a scroll listener using `requestAnimationFrame` and `getBoundingClientRect`. Include a two-step progress indicator using the `STEPS` array (`Select Contact`, `Confirm`) with `currentStep` state managed via `advanceStep`/`retreatStep` callbacks. Expose step controls globally via `window.__acHeaderAdvanceStep` and `window.__acHeaderRetreatStep` for sibling section communication. Render a top row with an `ArrowLeft` back link to `/Dashboard`, a breadcrumb nav using `ChevronRight` separators, and a help toggle button using `HelpCircle`/`X` icons with `helpOpen` state and `aria-expanded`. Apply `ach--stuck` class for shadow elevation on scroll. Note: Navbar/header pattern may reference DashboardHeader from a prior page.

As a frontend developer, implement the MatchHistoryHeader section for the MatchHistory page. Build the `<header className='mhh-root'>` component using `useState` for `sortIdx` (toggling between 'Recent First' / 'Oldest First' via `SORT_OPTIONS`) and `badgeCount`/`badgePulse` for the animated match-count badge. Implement `useRef` refs for `titleRef`, `subtitleRef`, `toggleRef`, and `badgeRef`. Wire a GSAP `timeline` entrance animation (`fromTo` with `opacity:0, y:10` → `opacity:1, y:0`, stagger 0.08s) on mount for all three refs. Implement badge pulse via `mhh-badge--pulse` class toggled in a `useEffect` on `badgeCount` change with a 500ms timeout. Render the `ArrowUpDown` (lucide-react, size 16) icon inside the sort toggle button with a `mhh-sort-icon--reversed` class applied when `sortIdx === 1`. Apply all `mhh-*` CSS classes per the provided stylesheet.

As a frontend developer, implement the Navbar section for the Upgrade page. This component (Navbar.css) uses useState for scrolled, menuOpen, and theme state, with useEffect hooks for scroll detection (window.scrollY > 8 triggers nv-scrolled class) and theme cycling (system → light → dark via data-theme attribute on documentElement). Renders lucide-react icons: Heart in nv-logo-icon, Moon/Sun for theme toggle, Menu/X for mobile hamburger. Includes nv-brand link, nv-links list with single 'Upgrade' nav link, nv-cta 'Go Pro' button, and nv-mobile drawer with nv-mobile-open class toggle. Note: this Navbar component may already exist from the Landing or Dashboard pages — check for reusability before recreating. Depends on DashboardHeader task (83c9b035) to establish page chain.

As a Backend Developer, implement a Firebase Cloud Function (callable function) that paginates through a user's archivedMatches subcollection for the cold match history retrieval. Accept cursor (last document snapshot or timestamp) and pageSize parameters. Return paginated archived matches in chronological order. This supports the MatchHistoryList infinite scroll and MatchHistoryPagination components which fetch archived matches once the hot 100 threshold is scrolled past. Ensure the caller is authenticated and can only access their own archived matches.

As a Tech Lead, verify the end-to-end integration between the Onboarding frontend (OnboardingPhoneInput, OnboardingSMSVerification) and the Firebase Auth Reverse-SMS backend. Ensure the phone number submitted triggers the MO/Reverse-SMS flow, the webhook correctly marks the user as verified, the OTP fallback works for unsupported carriers, and the app navigates to Dashboard on successful auth. Validate that AuthContext reflects the authenticated state immediately after onboarding completes.

As a frontend developer, implement the ACContactPicker section for the AddCrush page. Build a dual-mode contact selection component with `mode` state toggling between `picker` and `manual` via a `role=tablist` tab switcher. In picker mode, render a searchable list of `suggestedContacts` (8 entries with `name`, `phone`, `badge` fields) filtered via `useMemo` on `searchQuery` matching name or stripped digits. Include a `Search` icon input with a `X` clear button via `handleClearSearch`. Display contact cards with `recent`/`added` badge variants and handle selection via `handleSuggestionClick` setting `selectedContact` and `recentlyPicked`. In manual mode, render a phone input with `formatPhone` auto-formatting to `(XXX) XXX-XXXX` pattern capped at 10 digits, `phoneError` validation state shown via `AlertCircle`, and a `Plus` icon submit button calling `handleAddManual`. Include a `handleContactPick` device-contact fallback stub. Uses `Contact`, `Phone`, `Search`, `X`, `Plus`, `AlertCircle`, `User` from lucide-react.

As a frontend developer, implement the MatchHistoryFilter section for the MatchHistory page. Build the `<section className='mhf-root'>` component with `useState` for `dateFilter` (null or one of '7d'/'30d'/'all') and `statusFilter` (null or 'active'/'unmatched'). Render the `DATE_RANGES` array as pill buttons with `mhf-pill--active` toggled via `aria-pressed` and a click handler that deselects if the same key is clicked again. Render `STATUSES` array similarly with per-item `mhf-pill-badge` count spans. Show the 'Clear' button (with lucide-react `X` size 14 icon) only when `hasActiveFilters` is true, using `mhf-clear--hidden` class otherwise. Implement `clearFilters` via `useCallback` resetting both filters to null. Include `mhf-divider` separators and group labels per the JSX structure.

As a frontend developer, implement the MatchHistoryList section for the MatchHistory page. Build the component using `useState` for `matches` (initialized from `MOCK_MATCHES` with 8 entries), `loadingMore`, `hasMore`, and `loadedArchived`. Use `useRef` for `scrollRef` and `triggerRef`. Implement infinite scroll via `IntersectionObserver` on `triggerRef` to load `ARCHIVED_MATCHES` (4 entries) when the sentinel enters the viewport. Animate each match card using `framer-motion`'s `motion.div` with `cardVariants` (`hidden: {opacity:0, y:28, scale:0.97}` → `visible` with staggered delay `i * 0.06s` and cubic bezier `[0.22,1,0.36,1]`). Implement `handleMouseMove` and `handleMouseLeave` callbacks that set/remove CSS custom properties `--mouse-x`/`--mouse-y` on the card element for a spotlight hover effect. Render `handleView` (logs match ID) and `handleUnmatch` (sets `status: 'unmatched'` in state) action handlers wired to lucide-react `Eye`, `UserX`, `Phone`, and `HeartCrack` icons. Display masked phone numbers and datetime for each match entry.

As a frontend developer, implement the MatchHistoryPagination section for the MatchHistory page. Build the `<nav className='mhp-root'>` component with `useState` for `loaded` (initialized to `PAGE_SIZE = 20`) and `loading`. Derive `hasMore` as `loaded < TOTAL_MATCHES` (145). Implement `handleLoadMore` via `useCallback` that sets `loading: true`, then uses `gsap.delayedCall(0.85, ...)` to simulate async fetch — incrementing `loaded` by `PAGE_SIZE` (clamped to `TOTAL_MATCHES`) and resetting `loading: false`. Render progress text showing `Showing 1–{loaded} of 145 matches` or `All 145 matches loaded` when `showEnd`. Conditionally render the 'Load More' button (with `mhp-spinner` span and `aria-busy` attribute during loading, `disabled` when loading) and the `mhp-end` paragraph (with `aria-live='polite'`) when all matches are loaded.

As a frontend developer, implement the UpgradeHero section for the Upgrade page using @react-three/fiber Canvas with Suspense, OrbitControls from @react-three/drei, and THREE.js. Core 3D component GalaxyStars renders 600 particles in a spiral galaxy distribution using Float32Array position/color/size buffers. Uses useMemo for geometry generation with THREE.Color lerp blending (baseColor '#4A90E2', accentColor '#FFD700', coralColor '#FF6F61'). useFrame drives rotation (y += 0.0003, x += 0.0001) and hovered star pulse animation (sine wave at elapsedTime * 6). Implements useCallback pointer handlers for star hover with cursor style changes. Outside Canvas: ArrowRight, Zap, Shield, Users lucide icons for benefit badges. useState for hoveredIndex. Full 3D hero section with UpgradeHero.css (8106 chars styling).

As a frontend developer, implement the UpgradeTierComparison section for the Upgrade page. Renders a 3-tier comparison table (Free, Pro with 'Popular' badge, Elite with 'Best Value' badge) across 4 categories: Crush List Capacity, Match History, Matching Features, Account & Support. Each row renders inline JSX Check/X lucide icons with utc-check and utc-cross CSS classes (utc-check--accent variant for Elite). Includes a @react-three/fiber Canvas (with useFrame) for ambient 3D background decoration using THREE.js. Uses useState, useEffect, useRef, useCallback, useMemo, and Suspense. Imports Check, X, Star, Zap, Crown, Sparkles from lucide-react. UpgradeTierComparison.css is 8661 chars with full responsive table layout.

As a frontend developer, implement the UpgradeFeatureHighlights section for the Upgrade page. Renders 4 feature cards (expanded-capacity, priority-matching, match-history-depth, vip-privacy) using a features data array with icon components (Heart, Zap, History, Headphones from lucide-react), iconClass CSS variants (coral, gold, blue, orange), badge objects with tier labels (Tiered, Pro+, Elite) and badge-specific CSS classes. Uses gsap + ScrollTrigger (registered via gsap.registerPlugin): a gsap.timeline triggers on 'top 78%' scroll position, animating headingRef from opacity 0/y 24 to visible, then staggering cardsRef items (0.12s stagger, power2.out) with onComplete setting visible state. useRef for sectionRef, headingRef, cardsRef array. UpgradeFeatureHighlights.css is 6464 chars.

As a frontend developer, implement the UpgradePricingCards section for the Upgrade page. Renders 3 tier cards (Free/Pro/Elite) from a tiers array with tierIcon components (Heart, Zap, Crown), monthly/annual pricing toggle (isAnnual useState), and per-tier benefit lists using lucide icons (Users, ShieldCheck, Clock, EyeOff, Gift, Sparkles, CheckCircle2). Uses framer-motion for card animation and gsap + ScrollTrigger.batch for scroll-triggered entrance animations (opacity/transform). Uses useRef for sectionRef and cardRefs array, useCallback for setCardRef, and a registered ref guard. Elite card has isElite flag for special styling (upc-cta-accent). Monthly/annual toggle displays computed savings (showSave flag). UpgradePricingCards.css is 8659 chars with full responsive card layout.

As a frontend developer, implement the UpgradeFAQ section for the Upgrade page. Renders 6 FAQ items from faqData array (categories: Billing, Features, Usage, Security) covering downgrade policy, match history scaling, crush capacity limits, data security, tier gifting, commitments, and upgrade timing. Includes a Search input with X clear button (Search, X lucide icons) for live FAQ filtering, accordion expand/collapse using ChevronDown icon with animated transitions, and HelpCircle/MessageCircle icons for UI decoration. Uses useState for open item tracking and search query, useRef for animation targets, useEffect for scroll/animation, and useCallback for handlers. UpgradeFAQ.css is 6188 chars.

As a frontend developer, implement the UpgradeCTA section for the Upgrade page. Uses IntersectionObserver (threshold 0.2) to set visible state and trigger entrance animations. Three animated background orbs (ucta-orb--blue, ucta-orb--coral, ucta-orb--gold) stored in orbsRef array, animated via gsap.context with individual x/y tweens (speed = 8 + i*6, repeat -1, yoyo, sine.inOut easing). handleMouseMove applies parallax transform to orbs based on mouse position relative to section bounds (factor = (i+1)*18). CSS class toggling for ucta-headline--visible, ucta-subheadline--visible, ucta-actions--visible on intersection. Two CTA buttons: ucta-btn-primary 'Choose Your Tier' and ucta-btn-secondary 'Learn More' with ArrowRight and Shield lucide icons. UpgradeCTA.css is 6566 chars.

As a frontend developer, implement the Footer section for the Upgrade page. Renders ftr-root footer with ftr-glow decorative element (aria-hidden). ftr-top contains ftr-brand-col (Heart icon fill='#fff', 'Crush' brand text, ftr-tagline, Shield ftr-privacy-pill 'Anonymous until matched') and ftr-cols with 3 link columns: Product (1 link: Upgrade), Resources (3 links: How Matching Works, Privacy First, Help Center), Company (3 links: About Crush, Terms of Service, Contact). ftr-bottom has copyright with dynamic year via new Date().getFullYear() and ftr-social buttons for Twitter, Instagram, GitHub using lucide-react icons. Note: this Footer component may already exist from the Landing page — check for reusability. Footer.css is 3936 chars.

As a Tech Lead, verify the end-to-end integration between the Dashboard frontend (DashboardCrushSlots, DashboardMatchHistory, DashboardUpgrade, DashboardHeader) and the Firestore backend. Ensure the crush slots grid reflects the live crushList from Firestore in real-time (onSnapshot listener), the slot counter (used/total) dynamically updates when crushes are added or matched, the unmatch action on DashboardMatchHistory calls the Unmatch Cloud Function, tier information from crushLimit is correctly reflected in DashboardUpgrade and DashboardHeader, and the Elite-tier subcollection mode displays properly for 2000-slot users.

As a frontend developer, implement the ACDuplicationWarning section for the AddCrush page. Build an animated warning card using `gsap` with a `visible` state and `cardRef`. On mount, run a GSAP timeline with a `fromTo` entrance animation (`opacity: 0 → 1`, `y: 16 → 0`, `scale: 0.97 → 1`, `duration: 0.45`, `ease: power2.out`) followed by a nested `.adw-icon-col` bounce animation (`scale: 0.5 → 1`, `rotate: -30 → 0`, `ease: back.out(1.6)`, offset `-=0.2`). Render inside `adw-card` with `role=alert` and `aria-live=polite`. Display an `AlertTriangle` icon in `.adw-icon-col` and a warning message in `.adw-body-col`. Wire `handleCancel` and `handleProceed` callbacks — both execute a GSAP exit animation (`opacity → 0`, `y → -12`, `scale → 0.96`, `ease: power2.in`) then set `visible` to false. Clean up GSAP context via `ctx.revert()` on unmount.

As a frontend developer, implement the ACConfirmation section for the AddCrush page. Build a confirmation card using `cardRef` with `status` state cycling through `idle → loading → success`. On `handleConfirm`, trigger a GSAP scale pulse (`scale: 0.985`, `yoyo: true`, `repeat: 1`) on `cardRef.current`, simulate a 1.2s API delay via `window.setTimeout`, then transition to `success` and show a toast. Auto-dismiss toast after 1800ms by setting `toastExiting` to true, then redirect to `/Dashboard` after 350ms. Render a contact summary card (`acc-card`) with an avatar displaying `contact.initials` (`AR`) or a `User` icon fallback, `acc-avatar-initial` span, contact name `Alex Rivera`, phone `+1 (415) 867-5309`, a `Shield` privacy assurance section, and a confirm button. Wire `handleChangeContact` to smooth-scroll to `.ad-slot-accontactpicker` via `scrollIntoView`. Clean up all `toastTimerRef` timeouts on unmount.

As a Tech Lead, verify the end-to-end integration between the MatchHistory frontend (MatchHistoryList, MatchHistoryPagination, MatchHistoryFilter) and the Archived Matches Pagination Cloud Function backend. Ensure the hot matchHistory array (first 100 entries) loads from Firestore in real-time, infinite scroll at the 100-entry boundary triggers the Cloud Function to fetch archived matches, filters apply correctly to both hot and cold data, and the unmatch action calls the Unmatch Cloud Function and removes the entry from the UI. Validate chronological ordering across hot and cold data boundaries.

As a Tech Lead, verify the end-to-end integration between the Upgrade frontend (UpgradePricingCards, UpgradeTierComparison) and the RevenueCat subscription backend. Ensure tapping an upgrade CTA launches the RevenueCat purchase flow in-app, a successful purchase triggers the RevenueCat webhook Cloud Function which updates crushLimit in Firestore, the Dashboard and DashboardUpgrade components reflect the new tier and capacity immediately, and the Elite tier correctly switches to subcollection-based crushList storage. Validate downgrade and cancellation scenarios.

As a Tech Lead, verify the end-to-end integration between the AddCrush frontend (ACContactPicker, ACConfirmation, ACDuplicationWarning) and the Match Engine Cloud Function backend. Ensure contact selection triggers a real duplicate check against Firestore state, the confirmation card calls the Cloud Function, Scenario 1 (no match) silently adds to crushList, Scenario 2 (mutual match) triggers FCM notifications and updates matchHistory, and the Dashboard slot count reflects the updated crushList after return. Validate tier capacity enforcement shows an appropriate error when limit is reached.