BHATKE VIMUKT SS

As a frontend developer, implement the LandingHero section for the Landing page. Build the hero section using useRef and useLayoutEffect with GSAP orbital animation via gsap.context() applied to iconRefs for three floating SVG icons (HeartIcon, QRIcon, HandIcon). Implement framer-motion scroll-hijacked zoom using useScroll and useTransform — contentScale [1→1.12] and contentY [0→-50px] over first 250px of scroll applied to a motion.div. Render stagger entrance animations using containerVariants (staggerChildren: 0.12, delayChildren: 0.3) and itemVariants (opacity 0→1, y 30→0) with ctaVariants for CTA buttons (scale 0.95→1). Display statsData array (5000+ Donors, 156+ Events, ₹24.5L+ Raised, 12500+ Lives Changed) as stat chips. Include primary and secondary CTA buttons.

As a frontend developer, implement the LandingMission section for the Landing page. Register gsap.registerPlugin(ScrollTrigger) and build a GSAP timeline triggered at 'top 65%' with once:true. Animate eyebrowRef (opacity/y, 0.5s), headlineRef (opacity/y, 0.6s, -0.3s offset), bodyLinesRef array with stagger 0.1 via filter(Boolean), and valueItemsRef array with stagger 0.12 — all using power2.out ease. Render CORE_VALUES array of three cards: Transparency (eye SVG icon, lm-value-icon-wrap--transparency class), Community Impact (users SVG, lm-value-icon-wrap--community), and Accountability (checkmark SVG, lm-value-icon-wrap--accountability). Include a visualRef animated visual panel alongside the text content. All elements start opacity 0 / y offset and animate in on scroll.

As a frontend developer, implement the LandingImpact section for the Landing page. Build four stat cards from IMPACT_DATA (₹24.5L+ Total Donations, 1840+ Donors Engaged, 156+ Events Organized, 12500+ Lives Impacted). Implement CountUpNumber sub-component using useMotionValue, useSpring (stiffness:50, damping:25), and useTransform with springVal.on('change') to drive displayVal state — formatting large numbers as Indian lakh notation (e.g. '24.5L'). Use useInView to trigger count-up animation when cards enter viewport. Render CardIcon sub-component with SVG variants per iconType (donation/donors/events/lives). Draw inline sparkline SVGs using sparkPoints arrays with sparkColor CSS variables per card. Apply framer-motion card entrance animations. Implement formatIndianNumber utility for ≥100000 values.

As a frontend developer, implement the LandingDonationPortal section for the Landing page. Build interactive donation UI with useState hooks: totalDonated, todayTotal (247500), treeStage (0–6), dropActive, successMsg, customAmount, counterPop. Render DONATION_AMOUNTS preset buttons (₹100/Basic, ₹500/Support, ₹1000/Impact, ₹5000/Champion) plus a custom amount text input. Implement drag-and-drop donation dropzone using dropzoneRef with setDropActive for drag events. Build animateTreeGrowth callback using GSAP to animate trunkRef (attr height/y, elastic.out), canopyRef (attr r/opacity, elastic.out), and leavesRef array items (scale/opacity, back.out, staggered delay i*0.05). Render 7-stage TREE_STAGES SVG tree that grows with each donation threshold. Animate particlesRef burst and flashRef overlay on successful donation. Display IMPACT_CARDS (Meals Provided/Education Kits/Health Checkups) with statBase counters and emoji icons. Show successMsg via AnimatePresence and counterPop animation on todayTotal update.

As a frontend developer, implement the LandingImpactGallery section for the Landing page. Build an image gallery from GALLERY_ITEMS array of 6 items across Healthcare, Education, and Emergency Relief categories. Implement category filter tabs using useState to toggle active category and filter displayed cards. Each card renders an Unsplash image with category tag (lig-tag--healthcare, lig-tag--education, lig-tag--emergency classes), caption, description, stat badge, and lucide-react icon (Stethoscope, BookOpen, AlertTriangle, Heart, TrendingUp, Users). Implement framer-motion stagger entrance using containerVariants (staggerChildren:0.1, delayChildren:0.15) and cardVariants (opacity 0→1, y 40→0, scale 0.95→1) with whileInView trigger. Apply useScroll and useTransform for section parallax effect on a decorative background element.

As a frontend developer, implement the LandingDonorTestimonials section for the Landing page. Build an auto-rotating testimonial carousel using useState hooks: currentIndex, isPaused, direction. Implement AUTO_INTERVAL (6000ms) auto-advance using useEffect with setInterval, paused when isPaused is true via onMouseEnter/onMouseLeave. Build useCallback handlers for goNext and goPrev that update direction state (1 or -1) and cycle currentIndex through 6 TESTIMONIALS. Render active testimonial card with AnimatePresence using cardVariants (enter: opacity 0 x:40, center: opacity 1 x:0, exit: opacity 0 x:-40) and direction-aware custom prop for slide direction. Display donor photo (img tag) when hasPhoto is true, otherwise render initials avatar with initials string. Show donor name, amount donated, location, and quote text. Render dot navigation indicators and prev/next arrow buttons.

As a frontend developer, implement the LandingUpcomingEvents section for the Landing page. Render EVENTS array (4 events: Community Skill Workshop, Annual Fundraiser Gala, Donor & Volunteer Meetup, Rural Health Outreach Camp) as animated cards. Use sectionRef and GSAP gsap.context() in useEffect to animate .lue-date-cal elements with fromTo (scale 0.8/rotation -5 → scale 1/rotation 0, back.out(1.7) ease, stagger 0.1) triggered via ScrollTrigger at 'top 80%' once:true, with ctx.revert() cleanup. Apply framer-motion containerVariants (staggerChildren:0.12, delayChildren:0.1) and cardVariants (opacity 0 y:40 → opacity 1 y:0, 0.5s easeOut) for card entrance. Render headerVariants (opacity 0 y:24 → opacity 1 y:0, 0.6s) for section header. Each event card shows day/month calendar badge (.lue-date-cal), weekday, time, title, description, location, tag pill (workshop/fundraiser/meetup/outreach classes), and attendee count. Include parallax decorative background div.

As a frontend developer, implement the LandingCallToAction section for the Landing page. Build CTA section with GSAP floating animation on iconRef (plant icon: y 0→18, duration 2.2, repeat -1, yoyo, sine.inOut ease) cleaned up on unmount. Implement magnetic button effect using handleMouseMove useCallback that reads btnRef.current.getBoundingClientRect(), calculates dx/dy/dist from button center, and applies setBtnOffset up to strength 8 within maxDist 200px — resetting to {x:0,y:0} on handleMouseLeave. Apply btnOffset as translate transform on the CTA button via framer-motion. Implement click ripple effect using handleClick useCallback that captures e.clientX/Y relative to btnRef rect, pushes {id, x, y} into ripples state, and removes after 700ms timeout via rippleIdRef counter. Render ripples via AnimatePresence with scale/opacity animations. Render three-layer parallax background: lcta-bg-layer (orbs 1/2/3, --scroll * -0.2px) and lcta-mid-layer (stars 1–7, --scroll * -0.4px).

As a frontend developer, implement the Footer section for the Landing page. Build footer with useState hooks for inputFocused and email (newsletter input). Render four linkColumns (Get Involved, About Us, Resources, Legal) each with title and links array mapping to anchor tags. Render socialLinks using react-icons (FaFacebookF, FaTwitter, FaInstagram, FaLinkedinIn, FaYoutube) with socialVariants (opacity 0 scale:0.6 → opacity 1 scale:1, 0.4s easeOut). Apply framer-motion containerVariants (staggerChildren:0.1, delayChildren:0.2) and columnVariants (opacity 0 y:20 → opacity 1 y:0, 0.5s easeOut) on motion.div with whileInView (once:true, amount:0.15). Render newsletter email input with inputFocused state toggled on focus/blur. Include brand section with logo/tagline. Render two-layer parallax background: ftr-bg-layer (orbs 1/2/3, --scroll * -0.2px) and ftr-mid-layer (lines 1/2, --scroll * -0.4px). Note: this component may already exist from a previous page if Footer is shared across the application.

As a frontend developer, implement the Navbar section for the Login page. This component (imported from '../styles/Navbar.css') uses useState for mobileOpen and scrolled states, and useEffect hooks for scroll detection (window.scrollY > 10 triggers nb-scrolled class) and body overflow locking when mobile menu is open. Renders NAV_PAGES array (Dashboard, Donors, Events, Reports, Outreach, About, Settings) as nav links with active state detection via window.location.pathname. Includes animated hamburger button (nb-hamburger with nb-open class toggle), mobile overlay (nb-mobile-overlay with nb-visible class), and slide-in mobile menu (nb-mobile-menu). Desktop CTA 'Donate Now' links to /Donate, logo links to /Login with 'BV' mark and 'Bhatke Vimukt' text. Note: This component likely already exists from the Landing page task [67887cb3-76ab-4947-aca3-43d340de4a70] — reuse or reference that implementation.

As a frontend developer, implement the Navbar section for the Events page. This component is shared across pages and may already exist from Landing and Login pages. The Navbar uses two useState hooks (mobileOpen, scrolled) and two useEffect hooks — one for passive scroll detection that toggles the nb-scrolled class when window.scrollY > 10, and another that locks document.body.style.overflow when the mobile menu is open. The NAV_PAGES array defines 7 navigation links (Dashboard, Donors, Events, Reports, Outreach, About, Settings). Active link detection uses window.location.pathname comparison to apply nb-active class. The hamburger button uses aria-expanded and aria-label for accessibility, toggling nb-open class. A nb-mobile-overlay div closes the mobile menu on outside click. The nb-cta-desktop Donate Now button links to /Donate. Import Navbar.css for all nb-prefixed styles. Reuse existing Navbar component if already implemented.

As a frontend developer, implement the `LandingHero` section for the Landing page. Use `useRef` for `rootRef` and `iconRefs` array. Implement scroll-driven zoom via `framer-motion` `useScroll` and `useTransform`: `contentScale` maps `scrollY` [0,250] → [1, 1.12] and `contentY` maps [0,250] → [0, -50px]. Implement GSAP orbital floating animations inside `useLayoutEffect` using `gsap.context()` on `iconRefs` — each icon gets a unique duration (base 6s+) for continuous orbital movement. Render three SVG icon components (`HeartIcon`, `QRIcon`, `HandIcon`) as floating decorations. Animate hero text content using `framer-motion` `containerVariants` (staggerChildren: 0.12, delayChildren: 0.3) and `itemVariants` (opacity 0→1, y 30→0, duration 0.7, cubic ease). CTA button uses `ctaVariants` (opacity, y, scale animation). Render `statsData` array: `5,000+ Donors`, `156+ Events`, `₹24.5L+ Raised`, `12,500+ Lives Changed`. Apply `LandingHero.css`.

As a frontend developer, implement the `LandingDonationPortal` section for the Landing page. Manage state: `totalDonated`, `todayTotal` (init 247500), `treeStage` (0–6), `dropActive`, `successMsg`, `customAmount`, `counterPop`. Use refs: `dropzoneRef`, `trunkRef`, `canopyRef`, `particlesRef`, `flashRef`, `leavesRef` array, `successTimeoutRef`. Implement `DONATION_AMOUNTS` preset buttons (`[100, 500, 1000, 5000]` labeled Basic/Support/Impact/Champion) plus custom amount input. Implement animated SVG tree growth via `animateTreeGrowth(newStage)` using GSAP: `gsap.to(trunkRef)` animates `attr.height` and `attr.y` with `elastic.out(1, 0.5)` ease; `gsap.to(canopyRef)` animates `attr.r` with `elastic.out(1, 0.6)`; leaf nodes in `leavesRef` animate scale/opacity with `back.out(2)` stagger (0.05s delay per leaf) — `TREE_STAGES` array defines 7 growth stages with `trunkH`, `canopyR`, `leaves` counts. Render `IMPACT_CARDS` (Meals/Education/Health) with base stats. Implement drag-and-drop donation dropzone (`dropActive` highlight state). Use `framer-motion` `AnimatePresence` for success message. Apply `LandingDonationPortal.css`.

As a frontend developer, implement the `LandingCallToAction` section for the Landing page. Use refs `iconRef` (plant icon) and `btnRef` (CTA button). Manage `btnOffset` state (`{ x, y }`) for magnetic button effect and `ripples` state array for click ripple animations, with `rippleIdRef` counter. Implement GSAP floating animation on `iconRef` in `useEffect`: `gsap.to` with `y: 18`, `duration: 2.2`, `repeat: -1`, `yoyo: true`, `ease: 'sine.inOut'` — cleanup via `tween.kill()`. Implement `handleMouseMove` magnetic button: calculates `dx/dy` from button center, applies up to 8px offset scaled by proximity within 200px `maxDist`, normalizing direction vector. Implement `handleClick` ripple: records click position relative to button rect, pushes `{ id, x, y }` to `ripples` state, removes after 700ms timeout. Render parallax decorative layers: `lcta-bg-layer` (3 orbs at `-0.2px` scroll factor) and `lcta-mid-layer` (7 stars at `-0.4px` scroll factor) using CSS `var(--scroll)`. Wrap section with `onMouseMove` and `onMouseLeave` handlers. Use `framer-motion` `AnimatePresence`. Apply `LandingCallToAction.css`.

As a frontend developer, implement the LandingHero section for the Landing page. The component uses useRef for rootRef and iconRefs array, and framer-motion's useScroll + useTransform for a scroll-hijacked parallax zoom effect (contentScale 1→1.12, contentY 0→-50px over first 250px of scroll). It features: (1) stagger animation via containerVariants/itemVariants/ctaVariants with framer-motion; (2) GSAP orbital floating animations for three SVG icon components (HeartIcon, QRIcon, HandIcon) using gsap.context() in useLayoutEffect; (3) statsData array showing 5K+ Donors, 120+ Events, ₹2Cr+ Raised as stat chips; (4) primary CTA buttons linking to /Donate. Requires gsap and framer-motion packages.

As a frontend developer, implement the LandingMission section for the Landing page. The component uses gsap.context() with ScrollTrigger (registered via gsap.registerPlugin) to animate in a scroll-triggered timeline that sequences: eyebrowRef opacity/y, headlineRef opacity/y, bodyLinesRef array staggered 0.1s, and valueItemsRef array staggered 0.12s. It renders a CORE_VALUES array of three items (Transparency, Community Impact, Accountability) each with inline SVG icons and colorClass variants (lm-value-icon-wrap--transparency/community/accountability). Also includes a visualRef for a decorative visual panel. Uses refs: sectionRef, eyebrowRef, headlineRef, bodyLinesRef[], valueItemsRef[], visualRef.

As a frontend developer, implement the LandingImpact section for the Landing page. The component renders IMPACT_DATA array (4 cards: Total Donations ₹2,450,000+, Donors Engaged 1,840+, Events Organized 156+, Lives Impacted 12,500+) using a CountUpNumber sub-component that animates via framer-motion useMotionValue + useSpring (stiffness:50, damping:25) triggered by useInView. Each card includes a sparkline SVG with sparkPoints data, CardIcon sub-components per iconType (donation/donors/events/lives), and formatIndianNumber() for lakh-formatted display. Cards use motion.div with stagger via framer-motion useInView. Also uses gsap for additional entrance animations.

As a frontend developer, implement the LandingDonationPortal section for the Landing page. This is the most complex section featuring: (1) useState for totalDonated, todayTotal (₹247,500 seed), treeStage (0–6), dropActive, successMsg, customAmount, counterPop; (2) DONATION_AMOUNTS array (₹100/500/1000/5000 with tier labels Basic/Support/Impact/Champion); (3) drag-and-drop donation dropzone with dropzoneRef; (4) TREE_STAGES array (7 stages) driving a growing SVG tree animated via GSAP — trunkRef (attr height/y), canopyRef (attr r/opacity), leavesRef[] (scale/opacity stagger); (5) particle burst on drop via particlesRef and flashRef; (6) animateTreeGrowth() callback using gsap.to with elastic.out easing; (7) IMPACT_CARDS array (Meals/Education Kits/Health Checkups) with statBase counters; (8) successMsg toast with timeout cleanup via successTimeoutRef; (9) counterPop animation on todayTotal increment; (10) customAmount text input for freeform donations.

As a frontend developer, implement the LandingImpactGallery section for the Landing page. The component renders a GALLERY_ITEMS array of 6 cards (Healthcare, Education, Emergency Relief categories) each with Unsplash images, tagClass variants (lig-tag--healthcare/education/emergency), stat badges, and Lucide icon components (Heart, Users, BookOpen, AlertTriangle, TrendingUp, Stethoscope imported from lucide-react). Uses framer-motion containerVariants (staggerChildren:0.1, delayChildren:0.15) and cardVariants (hidden: opacity:0, y:40, scale:0.95 → visible) with whileInView trigger. Also uses framer-motion useScroll + useTransform for parallax effects on the section. Includes a useState for active/hover card state.

As a frontend developer, implement the LandingDonorTestimonials section for the Landing page. The component uses useState for currentIndex, isPaused, and direction; and useCallback for navigation handlers. It renders TESTIMONIALS array (6 donors: Priya Sharma, Rajesh Patil, Anita Deshmukh, Vikram Joshi, Meera Kulkarni, Suresh Gaikwad) with location, amount, initials, and optional photo URLs from Unsplash. Features: (1) AUTO_INTERVAL = 6000ms auto-advance carousel using useEffect interval cleared on isPaused; (2) AnimatePresence with cardVariants (enter: opacity:0, x:40 → center: opacity:1, x:0 → exit: opacity:0, x:-40) keyed by currentIndex; (3) direction-aware slide transitions; (4) pause on hover via setIsPaused; (5) manual prev/next navigation; (6) dot indicator for 6 slides; (7) avatar rendering with photo fallback to initials badge.

As a frontend developer, implement the LandingUpcomingEvents section for the Landing page. The component uses useRef for sectionRef and a useEffect with gsap.context() to animate .lue-date-cal elements via gsap.fromTo (scale:0.8, rotation:-5 → scale:1, rotation:0, stagger:0.1, ease:'back.out(1.7)') tied to a ScrollTrigger (start:'top 80%', once:true). It renders an EVENTS array of 4 events (Community Skill Workshop, Annual Fundraiser Gala, Donor & Volunteer Meetup, Rural Health Outreach Camp) each with day/month/weekday date badges, time, location, tag variants (workshop/fundraiser/meetup/outreach), and attendees count. Uses framer-motion containerVariants (staggerChildren:0.12), cardVariants (hidden: opacity:0, y:40), and headerVariants (hidden: opacity:0, y:24) all with whileInView. Includes parallax decorative background div.

As a frontend developer, implement the LandingCallToAction section for the Landing page. The component uses useState for btnOffset ({x,y}) and ripples array; useRef for iconRef and btnRef; useCallback for handleMouseMove, handleMouseLeave, and handleClick. Features: (1) GSAP floating animation on iconRef (plant icon) — y:18, duration:2.2, repeat:-1, yoyo:true, ease:'sine.inOut'; (2) magnetic button effect on handleMouseMove calculating distance from button center and applying strength-scaled offset (maxDist:200, strength:8) to btnOffset state; (3) ripple effect on click — calculates x/y from getBoundingClientRect, pushes {id,x,y} to ripples array, auto-removes after 700ms; (4) AnimatePresence for ripple elements; (5) three parallax background layers (lcta-bg-layer, lcta-mid-layer) with bg-orb and mid-star decorative divs; (6) section-level onMouseMove and onMouseLeave handlers.

As a frontend developer, implement the Footer section for the Landing page. The component uses useState for inputFocused and email (newsletter subscription input). It renders: (1) linkColumns array (4 columns: Product, Company, Resources, Legal) each with 3 links to internal routes; (2) socialLinks array using react-icons FaFacebookF, FaTwitter, FaInstagram, FaLinkedinIn with socialVariants (hidden: opacity:0, scale:0.6 → visible); (3) framer-motion containerVariants (staggerChildren:0.1, delayChildren:0.2) and columnVariants (hidden: opacity:0, y:20) with whileInView + viewport once:true, amount:0.15; (4) two parallax background layers (ftr-bg-layer with ftr-bg-orb--1/2/3, ftr-mid-layer with ftr-mid-line--1/2); (5) brand name 'BHATKE VIMUKT SS' with styled span; (6) newsletter email input with focus state styling. Note: this Footer component may already exist from a shared layout — check for existing Footer.jsx before creating a new one.

As a frontend developer, implement the Footer section for the Login page. This component (imported from '../styles/Footer.css') manages email newsletter subscription via useState hooks (email string and subscribed boolean), with handleSubscribe preventing default form submission and toggling subscribed state when email.trim() is truthy. Renders a four-column layout: brand column with 'BV'/'BVSS' logo mark, brand description text about BVSS mission, and social icon links (Twitter, Facebook, Instagram) as SVG icons with aria-labels; platformLinks column (Dashboard, Donors, Events, Reports); engageLinks column (Donate, Outreach, About Us, Settings); supportLinks column (Privacy Policy, Terms of Service, Help Center, Contact Support — all pointing to /About). Note: This component likely already exists from the Landing page task [869e44de-ecd2-4fdb-937a-ccc18d7a6996] — reuse or reference that implementation.

As a frontend developer, implement the Footer section for the Events page. This component is shared across pages and may already exist from Landing and Login pages. The Footer uses two useState hooks (email, subscribed) to manage a newsletter subscription form. The handleSubscribe function prevents default form submission, checks for non-empty trimmed email, sets subscribed to true, and resets email state. The footer renders four columns: a brand column with ftr-logo-mark 'BV', ftr-logo-text 'BVSS', a brand description paragraph, and three social links (Twitter, Facebook, Instagram) with inline SVG icons using stroke-based rendering. Three navigation link arrays are defined — platformLinks (Dashboard, Donors, Events, Reports), engageLinks (Donate, Outreach, About Us, Settings), and supportLinks (Privacy Policy, Terms of Service, Help Center, Contact Support — all pointing to /About). Import Footer.css for all ftr-prefixed styles. Reuse existing Footer component if already implemented.

As a frontend developer, implement the Navbar section for the Donors page. This component reuses the shared Navbar already implemented for Landing, Login, and Events pages. It uses `useState` for `mobileOpen` and `scrolled` states, `useEffect` for scroll listener (passive) that adds `nb-scrolled` class beyond 10px scroll, and a second `useEffect` to lock `document.body.style.overflow` when mobile menu is open. Renders `NAV_PAGES` array (Dashboard, Donors, Events, Reports, Outreach, About, Settings) as `nb-link` anchors with `nb-active` class based on `window.location.pathname`. Includes hamburger button with `aria-expanded`, a `nb-mobile-overlay` div for backdrop dismiss, and a `nb-mobile-menu` slide-in panel. Desktop CTA links to `/Donate`. Logo mark `BV` links to `/Login`. Component should be verified to correctly highlight the Donors nav item as active. Imports `../styles/Navbar.css` with 5901 chars of scoped `nb-` prefixed styles.

As a frontend developer, implement the Footer section for the Donors page. This component reuses the shared Footer already implemented for Landing, Login, and Events pages. Uses `useState` for `email` and `subscribed` states to manage the newsletter subscription form with `handleSubscribe` handler that validates non-empty trimmed email, sets `subscribed` to true, and clears the email input. Renders four columns: brand column with `ftr-logo-mark` (BV), `ftr-logo-text` (BVSS), brand description about BVSS, and social links (Twitter, Facebook, Instagram) with inline SVG icons using `stroke='currentColor'`; platform links column (Dashboard, Donors, Events, Reports); engage links column (Donate, Outreach, About Us, Settings); support links column (Privacy Policy, Terms of Service, Help Center, Contact Support — all pointing to `/About`). Imports `../styles/Footer.css` with 5203 chars of scoped `ftr-` prefixed styles. Verify newsletter form conditional rendering of subscribed confirmation state.