sage-marielle

As a frontend developer, implement the HomeHero section for the Home page. Build a multi-layer parallax hero using useScroll, useTransform, and useSpring from framer-motion. Background layer uses smoothBgScale (1→1.15) and smoothBgY (0→-80px), midground layer smoothMidY (0→-120px), and text layers headlineY, taglineY, ctaY with progressively faster parallax speeds to create depth separation. contentOpacity fades from 1 to 0.15 as user scrolls past 500px. Implement containerVariants with staggerChildren (0.15s) and delayChildren (0.2s), childUp (opacity+y slide) and childScale (opacity+scale) entrance variants. Add hh-bg-image, four hh-deco-frame decorative elements, handleScrollDown smooth scroll to next section, and data-nav-section='hero' attribute. Wrap in motion.section with initial opacity 0 animate to 1.

As a frontend developer, implement the HomeStoryScroll section for the Home page. Build a horizontally scrollable story card grid with four story objects (college, adventure, hometown, family), each with id, tag, tagClass, snapClass, title, snippet, image URL, and alt text. Implement a StoryCard sub-component using useRef and useInView (once: true, margin: '-60px') for scroll-triggered entrance animations: initial {opacity:0, y:40, scale:0.96} animating to {opacity:1, y:0, scale:1} with staggerDelay (index * 0.15s) and spring scale transition (stiffness:260, damping:20). Cards support whileHover ({scale:1.04, y:-6}) and whileTap ({scale:0.98}). Implement expandedId state with setExpandedId toggling hss-card-expanded CSS class via onClick. Each card renders hss-snap-line with story-specific color class and role='article' aria-label.

As a frontend developer, implement the HomeGalleryPreview section for the Home page. Build a 6-card photo preview grid using a PhotoCard sub-component. Each card object has id, caption, gradient (CSS linear-gradient string used as background), and alt text. PhotoCard uses local useState isActive toggled by onHoverStart/onHoverEnd and onTap (handleToggle). Active state animates the card with rotateY:6, rotateX:-4 spring (stiffness:260, damping:20). Use AnimatePresence for two conditionally rendered overlays: gp-card-frame (scale 1.15→1 entrance, opacity/scale exit) and gp-card-overlay with a gp-card-caption that slides in (y:12→0). Include a gp-card-shadow element. Card images use role='img' with aria-label from photo.alt. data-nav-section='gallery-preview' should be on the section wrapper.

As a frontend developer, implement the HomeBiographySnippet section for the Home page. Build a split-layout section with a parallax portrait and animated biography text. Implement a HighlightPhrase sub-component that uses useInView (once:false, margin:'-10% 0px -20% 0px') to animate backgroundColor between rgba(166,200,240,0.35) and transparent on scroll entry/exit. Use useScroll with target=sectionRef and offset=['start end','end start'] to drive portraitY (useTransform 40→-40px) and decoY (0→-60px) parallax transforms applied to hbs-portrait-wrap and hbs-deco-bg respectively. Render hbs-deco-bg with three hbs-deco-shape divs (speed 0.3), hbs-deco-mid with three hbs-deco-line divs (speed 0.5), and hbs-portrait-frame with whileInView scale 0.92→1 entrance animation. Include linkRef with useInView for animated CTA link. Add data-nav-section='biography-snippet'. Render an inline SVG silhouette as portrait placeholder.

As a frontend developer, implement the HomeStoriesPreview section for the Home page. Build an interactive story carousel/tabs UI with four story objects (day-in-life, travels, memories, garden), each containing id, tag, headline, excerpt, color hex, bgGrad (CSS gradient string), and shapes array (SVG circle definitions with cx, cy, r, fill). Implement useState for active story selection and useCallback for handlers. Each story panel renders an SVG background layer using the shapes array as animated circles. Use AnimatePresence for slide transitions between story panels. Display tag badge, headline, and excerpt text per story. Render navigation controls (prev/next or tab indicators) to switch between stories. Apply data-nav-section='stories-preview' to the section wrapper. Each story's bgGrad is applied as background to the panel container.

As a frontend developer, implement the HomeAlbumShowcase section for the Home page. Build a flip-book style photo album with 4 albumPages, each containing left and right photo objects (src URL, title, caption). Implement useState for currentPage (0) and direction using useCallback. Define flipVariants with enterFromRight (rotateY:-90), enterFromLeft (rotateY:90), center (rotateY:0), exitToLeft, exitToRight states and flipTransition (spring stiffness:200, damping:30, mass:1.2). Use AnimatePresence with custom direction prop to animate between pages. Implement captionVariants (hidden/visible/exit with opacity and y:12→0→-8) for caption transitions. Render prev/next navigation buttons, page indicator dots, and a two-column spread layout with left/right photo panels each showing image, title overlay, and caption text. Add data-nav-section='album-showcase' to the section.

As a frontend developer, implement the HomePhotoFrameShowcase section for the Home page. Build a vertical scroll-driven frame gallery with 4 FRAMES objects (frame-gold, frame-silver, frame-wood, frame-ornate), each having style class, quote, attribution, story text, gradient, parallaxSpeed (0.2–0.5), link href, and linkLabel. Implement a PhotoFrame sub-component that uses useScroll and useTransform on scrollYProgress ([0,1] → [0, -parallaxSpeed*120]) for per-frame y parallax at different speeds. Add initial {opacity:0, y:40} with whileInView entrance animation. Implement a FrameImage sub-component rendering a placeholder div with the frame's gradient background and an SVG image icon (rect + circle + polyline). Implement an onOpen modal/lightbox handler showing the full story, quote, attribution, and a link button. Use AnimatePresence for modal open/close transitions. Add data-nav-section='photo-frame-showcase'.

As a frontend developer, implement the HomeCTA section for the Home page. Build three MagneticButton sub-components for Gallery (/Gallery, Camera icon), Stories (/Stories, BookOpen icon), and Contact (/contact, Mail icon) links from lucide-react. Each MagneticButton uses useRef (btnRef), useState (hovered, particles array), useRef (particleIdRef), useMotionValue (mouseX, mouseY), and useTransform to map mouse position [-1,1] → [-6,6]px (textX) and [-4,4]px (textY) for magnetic text shift on hover. handleMouseMove computes normalized dx/dy from button center. handleClick spawns 12 particle elements with random angles, distances (40–100px), colorClasses (hc-particle--light/accent/secondary), scales, and durations, cleaned up after 800ms via setTimeout. Use AnimatePresence to render/exit particles. Buttons have whileHover scale:1.03 and whileTap scale:0.97 spring animations. Add data-nav-section='cta' to the section wrapper.

As a frontend developer, implement the Footer section for the Home page. Build a multi-column footer grid with brand column, quick links, explore links, and contact info. Implement QuickLinkItem sub-component using useState (hovered) with onHoverStart/onHoverEnd and an animated ftr-link-underline div that transitions width 0→'100%' (duration 0.25s easeInOut) on hover. Implement SocialIcon sub-component as motion.a with whileHover ({rotate:15, scale:1.2}) and whileTap ({scale:0.95}) spring animations (stiffness:400, damping:15). Footer component uses useState (toast) with handleCopy that calls navigator.clipboard.writeText and sets a toast message for 2 seconds. contactInfo array contains Mail, Phone (both copyable:true), and MapPin (copyable:false) entries from lucide-react. Render a decorative ftr-deco-bg with three ftr-deco-circle divs using CSS translateY scroll parallax (0.15x speed). Use AnimatePresence for toast notification entrance/exit. Note: this component may already exist from a previous page and can be reused.

Implement FastAPI backend endpoints for photo management: GET /api/photos (list all photos with pagination, filtering by category/tag), GET /api/photos/{id} (single photo detail with caption and metadata), GET /api/photos/featured (featured/homepage photos). Include Photo SQLAlchemy model with fields: id, src, title, caption, category, tags, display_order, is_featured, created_at. Return JSON responses compatible with HomeGalleryPreview, HomeAlbumShowcase, and HomePhotoFrameShowcase frontend sections. Note: frontend section tasks (HomeGalleryPreview, HomeAlbumShowcase, HomePhotoFrameShowcase) should depend on this task once implemented.

Implement FastAPI backend endpoints for stories: GET /api/stories (list all stories), GET /api/stories/{id} (single story detail with associated photos), GET /api/stories/featured (featured stories for homepage preview). Include Story SQLAlchemy model with fields: id, tag, headline, excerpt, content, bg_gradient, color_hex, display_order, is_featured, created_at. Return JSON responses compatible with HomeStoriesPreview and HomeStoryScroll frontend sections. Note: frontend section tasks (HomeStoriesPreview, HomeStoryScroll) should depend on this task once implemented.

Implement FastAPI backend endpoints for biographical content: GET /api/biography (full biography details), GET /api/biography/timeline (chronological timeline entries). Include Biography SQLAlchemy model with fields: id, title, subtitle, body_text, portrait_src, highlight_phrases (JSON array), created_at. Include TimelineEntry model with fields: id, year, event_title, event_description, display_order. Return JSON responses compatible with HomeBiographySnippet frontend section. Note: HomeBiographySnippet frontend task should depend on this task once implemented.

Set up static file serving and image storage for the backend: configure FastAPI StaticFiles mount for /media directory, implement POST /api/admin/photos/upload endpoint accepting multipart form data for image files, add image validation (file type, max size), store uploaded images in a persistent volume-mounted directory. Configure docker-compose volume for media storage persistence. Ensure high-resolution images are served efficiently per the non-functional requirement (gallery supports high-resolution images without compromising performance). Add image URL generation utility that returns absolute URLs based on the server host.

Set up a shared API client layer for the React frontend: create an axios or fetch-based API client configured with the backend base URL from environment variable (REACT_APP_API_URL or VITE_API_URL). Implement typed API functions for all resources: fetchPhotos(), fetchPhoto(id), fetchFeaturedPhotos(), fetchStories(), fetchStory(id), fetchFeaturedStories(), fetchBiography(), fetchTimeline(). Add React Query (or SWR) for data fetching, caching, and loading/error state management. Export shared TypeScript interfaces for Photo, Story, Biography, TimelineEntry response shapes. This enables all frontend section components to consume real backend data instead of hardcoded placeholders.