crystal-page

As a frontend developer, implement the HomeWelcome section for the Home page. This is the hero/navbar section and serves as the entry point for the Home page. Implement the hw-root section with three animated floating orbs (hw-orb-1, hw-orb-2, hw-orb-3) whose background colors morph from primary blue rgba(74,144,226) to secondary coral rgba(233,78,119) as the user scrolls, using framer-motion's useScroll and useTransform hooks with a [0,600]px scroll range. Each orb uses a distinct useMemo-cached float animation config with different durations (4.2s, 5.4s, 6.0s) and opacity oscillations. The hw-inner content container includes a motion.span eyebrow with opacity/y entrance animation (delay 0.1s), a motion.h1 with scale 0.8→1 spring entrance (cubic bezier [0.22,1,0.36,1], delay 0.2s) containing an hw-headline-accent span, and a motion.p subhead with opacity/y entrance. Includes navLinks array with Dashboard, Settings, Privacy, Terms routes. This section depends on the Landing page tasks to establish page-level chaining.

As a Frontend Developer, configure client-side routing for the Crystal-Page single-page application. Install and set up React Router (or equivalent). Define routes for /Landing and /Home pages as referenced by navigation links across section components (LandingHero links to /Home, LandingCTA has links to /Home and /Landing, HomeWelcome navLinks include Dashboard, Settings, Privacy, Terms, HomeCallToAction secondaryLinks reference /Landing and /Home). Ensure scroll restoration and smooth page transitions between routes are handled correctly. Create a root App component that wraps the router and renders the appropriate page layout. Note: All section tasks depend on this routing foundation being in place.

As a frontend developer, implement the HomeFeatures section for the Home page. Build a 4-card feature grid using a features array with items: 'Single-Page Simplicity', 'Living Minimalist Canvas', 'Seamless Scroll Experience', and 'Effortless Responsive Design', each with inline SVG icons, color variants (primary/secondary/accent), and descriptive text. Use framer-motion's useAnimation hook with cardVariants (hidden: opacity 0, y 40 → visible: staggered by i*0.12s delay, cubic bezier [0.22,1,0.36,1]) and headerVariants for the section header. Integrate gsap with ScrollTrigger (registered via gsap.registerPlugin) using a sectionRef to trigger card entrance animations on scroll. iconGlowColors map applies per-card box-shadow glows in primary rgba(74,144,226,0.55), secondary rgba(233,78,119,0.55), and accent rgba(245,166,35,0.55). This section is independent of HomeWelcome's internal state and can be built in parallel; depends only on HomeWelcome for page structure.

As a frontend developer, implement the HomeShowcase section for the Home page. Build a scroll-driven color-transition showcase using gsap ScrollTrigger with a sectionRef, bgRef, progressRef, accentRef, and scrollHintRef. The bgRef element animates backgroundColor from primary blue to #E94E77 (coral) via gsap.to with scrub:0.5, triggered from 'top center' to 'bottom center'. A progressRef bar animates width from 0 to 100% in sync with scroll. An accentRef element pulses with gsap.fromTo scale 0.9→1.15 and opacity 0.5→1 in a yoyo repeat. Manage progress (0–1 float) and stageIndex (0/1/2) in React useState, updated via a useCallback handleProgress fed by ScrollTrigger's onUpdate self.progress. Render STAGES array (3 items: 'The Canvas Awakens' blue stage, 'The Transition Blooms' mid stage, 'Warmth Takes Over' coral stage) each with title, desc, highlight, and after text fields. This section is independent of HomeFeatures state and can be built in parallel; depends only on HomeWelcome for page structure.

As a frontend developer, implement the HomeCallToAction section for the Home page. Build the hocta-root section with a motion.span eyebrow, motion.h2 headline (scale 0.92→1 spring entrance with cubic bezier [0.22,1,0.36,1]) containing an hocta-headline-accent span for 'simplicity', and a motion.p subhead — all using whileInView with viewport once:true, amount:0.4. Implement a bloom ripple effect: an hocta-btn-bloom div that transitions boxShadow from '0 0 0 0px rgba(248,231,28,0.6)' to '0 0 0 24px rgba(248,231,28,0)' on button hover using isHovered useState toggled by useCallback handlers (handleHoverStart/handleHoverEnd) on mouseEnter, mouseLeave, focus, and blur. The CTA button uses whileHover scale:1.1 and whileTap scale:0.97. Render secondaryLinks list (Return to Landing, Explore Home, How it works, View features) using staggerContainer/staggerItem framer-motion variants (staggerChildren:0.1, delayChildren:0.3, x:-12→0 entrance). Depends on HomeWelcome for page structure.

As a Frontend Developer, assemble the Landing page by composing all Landing section components (LandingHero, LandingContent, LandingInteractive, LandingCTA) into a single Landing page component. Ensure correct section ordering, proper scroll behavior across sections, and that GSAP ScrollTrigger contexts are scoped and cleaned up correctly to prevent conflicts between sections. Verify framer-motion AnimatePresence wrappers are placed at the correct level. Handle any shared scroll state or context that needs to flow between sections.

As a Frontend Developer, assemble the Home page by composing all Home section components (HomeWelcome, HomeFeatures, HomeShowcase, HomeCallToAction) into a single Home page component. Ensure correct section ordering, proper scroll behavior across sections, and that GSAP ScrollTrigger contexts are scoped and cleaned up correctly to prevent conflicts between sections. Verify framer-motion useScroll and useTransform hooks are properly scoped. Handle orb color morph scroll state in HomeWelcome and ensure it does not interfere with HomeShowcase scroll animations.

As a Frontend Developer, audit and implement web accessibility best practices across the entire Crystal-Page application per the Non-Functional Requirements. Ensure all animated elements respect prefers-reduced-motion media query by wrapping framer-motion and GSAP animations with conditional checks. Add proper ARIA labels to interactive elements, ensure keyboard navigation works for all CTAs and nav links, verify sufficient color contrast ratios for the defined palette (primary #4A90E2, secondary #E94E77, accent #F5A623 on white background), add focus-visible styles, and ensure semantic HTML structure is used throughout all section components.

As a Frontend Developer, implement responsive design across all pages and section components to ensure the application adapts to various screen sizes and devices per the Non-Functional Requirements. Define breakpoints for mobile (< 768px), tablet (768px–1024px), and desktop (> 1024px). Ensure the HomeFeatures 4-card grid reflows correctly on smaller screens, LandingContent feature blocks stack properly, orb sizes and positions adjust responsively, and CTA buttons/links remain tappable on mobile. Verify framer-motion and GSAP animations perform acceptably on lower-powered mobile devices.

As a Frontend Developer, optimize the Crystal-Page application for fast load times per the Non-Functional Requirements. Implement code splitting and lazy loading for Landing and Home page components via React.lazy and Suspense. Audit and optimize framer-motion bundle size (use tree-shaking, import only needed components). Ensure GSAP ScrollTrigger instances are properly killed on component unmount to prevent memory leaks. Add appropriate loading states. Configure asset optimization (image compression if any assets are added, font loading strategy). Target a Lighthouse performance score of 90+ on desktop.

As a DevOps Engineer, configure the build and deployment pipeline for the Crystal-Page frontend application. Set up a production build configuration (Vite or Create React App build script). Configure static asset hosting (e.g., Nginx serving the built SPA, or a CDN-backed static host). Ensure the SPA fallback routing is correctly configured so all routes (/, /Landing, /Home) serve index.html. Set up environment-specific build configs if needed. Verify the docker-compose setup (already done) correctly serves the built frontend. Configure any necessary CI/CD steps for automated build on push.