Drycleaners website

Create API endpoints for managing visitor data, including quote requests and contact messages.

Implement authentication for admin users, including login and session management.

As a Backend Developer, create API endpoints to handle quote requests, including validation and persistence of quote data. Ensure the API supports CRUD operations for quotes and integrates with the frontend for real-time updates. Acceptance criteria: The API must handle quote creation, retrieval, update, and deletion, with appropriate validation and error handling. The API must be secure and performant, adhering to RESTful principles.

As a Backend Developer, create API endpoints to handle contact form submissions, including validation and persistence of contact data. Ensure the API supports CRUD operations for contact messages and integrates with the frontend for real-time updates. Acceptance criteria: The API must handle contact message creation, retrieval, update, and deletion, with appropriate validation and error handling. The API must be secure and performant, adhering to RESTful principles.

As a Data Engineer, define and implement data retention policies for quote requests and contact messages. Ensure that data is retained according to business requirements and legal regulations, with automated cleanup processes in place. Acceptance criteria: Data retention policies must be documented and implemented, with automated processes to clean up old data according to the defined policies.

Develop role-based access control middleware to protect admin routes and ensure only authorized access.

Create a shared API client service for frontend to interact with backend APIs.

As a frontend developer, implement the Navbar section for the Home page. This section provides a shared navigation shell with a logo, primary page links (Home, About Us, Services, Gallery, Testimonials, FAQs, Contact Us), and a responsive mobile hamburger menu. It includes click-to-call and WhatsApp quick links for mobile accessibility. The Navbar should feature a magnetic logo draw effect on hover, a slide-in menu for mobile using Framer Motion's AnimatePresence, and link hover animations. Ensure the Navbar adapts to different screen sizes and maintains accessibility standards. Acceptance criteria: The Navbar must render exactly once on the Home page, expose all valid project routes, adapt layout for mobile/tablet/desktop, and provide quick contact access. The design structure must match the provided CSS, and the interactions must include responsive navigation toggle, page link navigation, click-to-call, and WhatsApp quick link. The Navbar is accessible by all personas, but links to restricted pages must be conditionally shown. Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the HomeHero section for the Home page. This section features a dynamic illustration of a garment being cleaned, with a scroll-triggered animation transitioning the garment from dirty to clean. The animation loops every 10 seconds when not in view, using motion/react for seamless transitions. It includes a primary headline about Queen's Cleaners, a subheadline emphasizing professional service, and prominent 'Get Quote' and 'Learn More' CTAs. Acceptance criteria: The HomeHero must render exactly once on the Home page, showcase the cleaning transformation visually, communicate the primary value proposition, and guide visitors to key actions. The design structure must match the provided CSS, and interactions must include scroll-triggered garment animation, animation loop pause/resume on visibility, and CTA button hover states. The HomeHero is accessible by Visitors only. Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the HomeBeforeAfterSliderDrag section on the Home page. This section manages the state for the before-and-after slider interaction, including drag detection, position calculation, and input handling for mouse, keyboard, and touch events. It uses a custom React hook `useSliderDrag` to manage `sliderPosition` (0-100) and `isDragging` state, applying spring physics on release. The section broadcasts state changes via a window CustomEvent for the sibling HomeBeforeAfterSliderDisplay to render the current position. Ensure the slider snaps to the nearest end with spring physics and supports keyboard navigation with arrow keys. Acceptance criteria: The Home page must render the HomeBeforeAfterSliderDrag component exactly once. The component must detect and handle drag, touch, and keyboard inputs, updating the slider position accordingly. The design must adhere to the provided CSS, ensuring the slider handle and track are styled correctly. The component must broadcast state changes to the sibling display component. The page is accessible by Visitors only. Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the HomeTestimonials section on the Home page. This section should display customer testimonials in a responsive layout, using a carousel on mobile and a grid on desktop. Each testimonial card should include the customer's name, star rating, quote text, and date. Implement scroll-reveal animations using Framer Motion to animate cards into view as the user scrolls. Ensure the 'View All Testimonials' CTA navigates to the Testimonials page. Testimonial data should be sourced from the canonical testimonials entity. Acceptance criteria: Home page must render the HomeTestimonials section once; testimonial cards must animate on scroll; the design must match the provided CSS; the 'View All Testimonials' CTA must navigate correctly; access is shared between Admin and Visitor personas. Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the HomeCTA section at the bottom of the Home page. This section should feature two prominent action buttons: 'Get a Quote' and 'Contact Us'. The primary button should animate from a solid accent color to a gradient on hover, while the secondary button should underline and change text color on hover. Ensure both buttons navigate to their respective pages. The layout should adapt for mobile by stacking buttons vertically. Acceptance criteria: Home page must render the HomeCTA section once; buttons must animate on hover and focus; the design must match the provided CSS; buttons must navigate correctly; access is restricted to Visitors only. Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the Footer section for the Home page. This section includes the brand, multiple link groups (Services, Company, Support), business hours, contact information, social media links (Facebook, Instagram, Twitter), legal links (Privacy, Terms), and a copyright notice. The layout should be responsive, stacking link groups vertically on mobile and displaying them in columns on desktop. Social media icons should animate on hover with a slight color shift and scale. The copyright text should fade in as the page loads. Ensure the footer is consistent across all pages and includes structured data for local SEO in Toronto. Acceptance criteria: - The Footer component must render exactly once at the bottom of the Home page. - All link groups must be collapsible on mobile and expanded on desktop. - Social media icons must animate on hover. - The copyright notice must fade in on page load. - The footer must be accessible to all personas (Admin, Visitor) as it is shared across pages. Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the LoginForm section for the Login page. This section includes a centered authentication panel with email and password input fields, a 'remember me' checkbox, form validation with inline error messages, a sign-in button, a forgot password link, and a submit error display. The form should validate inputs, handle form submission to the backend authentication service, and manage loading and error states. Acceptance criteria: The LoginForm must render exactly once on the Login page, collect and validate email and password inputs, display validation errors inline, and handle form submission with a simulated backend request. The design must match the provided CSS, and the form should be accessible and readable across all viewports. The form should only be accessible to Admin users. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the AboutStory section for the About Us page. This section narrates the founding story of Queen's Cleaners, featuring milestones from 2005 to 2024. It includes a headline 'Our Story', multiple paragraphs detailing the brand's history, a pull quote, and a timeline of milestones. The section uses motion animations for text and timeline items. Ensure the layout is responsive, stacking text and visuals on mobile and arranging them side-by-side on desktop. Acceptance criteria: The About Us page must render the AboutStory section exactly once. The section must display the headline, story paragraphs, pull quote, and timeline as described. The design structure and theme must match the provided CSS. No backend integration is required. The page is accessible by Visitors only. Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the AboutMission section for the About Us page. This section presents Queen's Cleaners' mission statement and operational philosophy. It includes a headline 'Our Mission', a mission statement, and supporting descriptive text. The section uses motion animations for a smooth entrance effect. Ensure the layout is responsive, with text sizing adapting from mobile to desktop. Acceptance criteria: The About Us page must render the AboutMission section exactly once. The section must display the mission headline, statement, and supporting text as described. The design structure and theme must match the provided CSS. No backend integration is required. The page is accessible by Visitors only. Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the AboutValues section for the About Us page. This section showcases Queen's Cleaners' core values using a responsive grid layout. It includes value cards with icons, titles, and descriptions for 'Exceptional Craftsmanship', 'Eco‑Conscious Care', 'Community First', and 'Trusted Reliability'. The section features hover effects on value cards and a responsive grid reflow. Acceptance criteria: The About Us page must render the AboutValues section exactly once. The section must display the value cards with icons, titles, and descriptions as described. The design structure and theme must match the provided CSS. No backend integration is required. The page is accessible by Visitors only. Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the AboutTeam section for the About Us page. This section features key team members with photos, names, roles, and brief bios. It includes a grid layout with hover effects on team cards and image lazy-loading on mobile. Acceptance criteria: The About Us page must render the AboutTeam section exactly once. The section must display team member cards with photos, names, roles, and bios as described. The design structure and theme must match the provided CSS. No backend integration is required. The page is accessible by Visitors only. Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the AboutCTA section for the About Us page. This section encourages visitors to take the next step with a headline, subheadline, and two action buttons ('View Our Services' and 'Get a Free Quote'). It features hover states on CTAs and a responsive layout that stacks buttons vertically on mobile and arranges them horizontally on desktop. Acceptance criteria: The About Us page must render the AboutCTA section exactly once. The section must display the headline, subheadline, and action buttons as described. The design structure and theme must match the provided CSS. No backend integration is required. The page is accessible by Visitors only. Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the ContactInfo section for the Contact Us page. This section should display business contact information, including phone, email, address, and business hours, with clickable links for phone and email. Acceptance criteria: The ContactInfo section must render exactly once on the Contact Us page, displaying all contact details with action buttons for phone and WhatsApp. The design must match the provided CSS. The section should be accessible to Visitors only, as per the page access context. No backend integration is required. Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the ContactMap section for the Contact Us page. This section should embed a Google Map showing the business location with a marker and provide a link for directions. Acceptance criteria: The ContactMap must render exactly once on the Contact Us page, displaying the map centered on the specified coordinates with an interactive marker. The design must match the provided CSS. The section should be accessible to Visitors only, as per the page access context. No backend integration is required. Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the DashboardWelcome section for the Dashboard page. This section displays a personalized welcome message to the admin, including the current date and time, and a brief summary of the dashboard's purpose. The greeting should adjust based on the time of day (morning, afternoon, evening). Acceptance criteria: The DashboardWelcome must render exactly once on the Dashboard page, display the admin's name, current date and time, and a motivational message. The design should include a subtle background accent using the primary color. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the DashboardStats section for the Dashboard page. This section displays four metric cards showing Total Services, Total Quote Requests, Pending Messages, and Last Update. Each card should display a numeric value with an icon and be arranged in a responsive grid. Acceptance criteria: The DashboardStats must render exactly once on the Dashboard page, display the four metrics as per the design, and adapt to different screen sizes (4 columns on desktop, 2 on tablet, 1 on mobile). Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the DashboardBusinessHours section to manage and display business hours. This section should show a table with Day, Hours, and Status columns for all 7 days. An Edit button should toggle an edit mode where each day becomes editable with time inputs and a status toggle. Save and Cancel buttons should appear in edit mode to persist or discard changes. Ensure the section is accessible only to Admins. Acceptance criteria: 1) The DashboardBusinessHours component must render on the Dashboard page for Admins only. 2) The table must display current business hours and status for each day. 3) The Edit button must toggle edit mode, allowing changes to hours and status. 4) The Save button must persist changes, and the Cancel button must discard them. 5) The design must match the provided CSS styles. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the DashboardQuickLinks section to provide quick navigation to common admin tasks. This section should display links as cards with icons and labels for tasks like Upload Photos, Manage Testimonials, Manage FAQs, Configure Security Settings, and Manage Backups. The layout should be a responsive grid. Ensure the section is accessible only to Admins. Acceptance criteria: 1) The DashboardQuickLinks component must render on the Dashboard page for Admins only. 2) Each link must navigate to the correct admin page. 3) The grid layout must be responsive, adjusting the number of columns based on screen size. 4) The design must match the provided CSS styles. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the QuoteServicesReference section to list Queen's Cleaners' core service offerings. This section should display service titles, descriptions, and icons in a card grid format. Acceptance criteria: The QuoteServicesReference must render on the Quote page, displaying a grid of service cards with titles, descriptions, and icons. The design must match the provided CSS, and the section should be accessible to Visitors only. No backend integration is required. Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the QuoteFAQ section to address common quote request questions. This section should use an accordion format to display questions and answers. Acceptance criteria: The QuoteFAQ must render on the Quote page, allowing users to expand and collapse FAQ items. The design must match the provided CSS, and the section should be accessible to Visitors only. No backend integration is required. Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the InboxHeader section for the Inbox page. This section displays the active section title, total and pending counts, and includes a refresh button and view toggle. Use the provided JSX to render the header with dynamic section titles and statistics. Implement the refresh functionality using the useCallback hook to simulate data refresh. Ensure the header is responsive and adheres to the design tokens specified in the CSS. Acceptance criteria: The InboxHeader must render on the Inbox page, display the correct section title and counts, and provide functional refresh and view toggle buttons. The header must be accessible only to Admin users. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the SettingsHeader section for the Settings page. This section introduces the page with a title 'Settings', optional descriptive text about admin configuration capabilities, and a breadcrumb for navigation context. Acceptance criteria: The SettingsHeader component must render exactly once on the Settings page, displaying the title 'Settings', a description about managing security preferences, and a breadcrumb navigation with links to 'Home', 'Dashboard', and 'Settings'. The component should be accessible only to Admin users. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the SecuritySettings section for the Settings page. This section manages security configurations, including two-factor authentication, password requirements, and change password functionality. It displays toggle switches for 2FA status, form fields for password policy settings, and a change password form. Includes save and cancel actions with success/error messages. Acceptance criteria: The SecuritySettings component must render exactly once on the Settings page, allowing Admin users to toggle 2FA, configure password requirements, and change passwords with validation. The section must handle save and cancel actions, displaying appropriate success or error messages. The component should be responsive and accessible only to Admin users. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a Backend Developer, implement business logic for processing quote requests, including validation rules, pricing calculations, and any necessary transformations. Ensure the logic is encapsulated in a service layer that can be reused across different parts of the application. Acceptance criteria: The business logic must correctly validate and process quote requests, applying any necessary pricing calculations and transformations. The logic must be testable and maintainable.

As a Backend Developer, implement business logic for processing contact form submissions, including validation rules and any necessary transformations. Ensure the logic is encapsulated in a service layer that can be reused across different parts of the application. Acceptance criteria: The business logic must correctly validate and process contact form submissions, applying any necessary transformations. The logic must be testable and maintainable.

As a frontend developer, implement the HomeBeforeAfterSliderDisplay section on the Home page. This section visually renders the before-and-after slider, receiving `sliderPosition` from HomeBeforeAfterSliderDrag. It displays before and after images with a clipped visual indicator based on the slider position. The component must be fully responsive, adapting to touch and mouse contexts, and must not manage any state itself. Acceptance criteria: The Home page must render the HomeBeforeAfterSliderDisplay component exactly once. The component must visually display the before and after images, with the 'after' image clipped according to the slider position. The slider handle must be positioned and animated smoothly using Framer Motion, with a percentage label indicating the current position. The design must adhere to the provided CSS, ensuring responsiveness across devices. The page is accessible by Visitors only. Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the HomeServices section on the Home page. This section should showcase core dry-cleaning services in a responsive grid layout, displaying 2-4 service cards depending on the screen size. Each card should include an icon, name, brief description, and a 'Learn More' link. Implement hover animations using Framer Motion to lift and scale the cards with a shadow bloom effect. Ensure the 'View All Services' CTA navigates to the Services page. Service data should be sourced from the canonical services entity. Acceptance criteria: Home page must render the HomeServices section once; service cards must display with hover animations; the design must match the provided CSS; the 'Learn More' links and 'View All Services' CTA must navigate correctly; access is restricted to Visitors only. Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the AboutHero section for the About Us page. This section introduces the page with a headline 'About Queen’s Cleaners' and a tagline 'Toronto’s trusted neighbour dry cleaner — delivering spotless garments and dependable care since our doors first opened.' It includes a visual accent with a Shirt icon and an accent line. The section uses motion animations for a smooth entrance effect. Ensure the layout is responsive, adapting heading size and layout from mobile to desktop. Acceptance criteria: The About Us page must render the AboutHero section exactly once. The section must display the headline, tagline, and visual accent as described. The design structure and theme must match the provided CSS. No backend integration is required. The page is accessible by Visitors only. Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the ServiceHero section for the Services page. This section introduces the Services offering with a headline, tagline, and a contextual CTA directing users to explore or request quotes. The section uses an IntersectionObserver to animate the headline and tagline into view. The CTA button navigates to the Quote page. Acceptance criteria: The ServiceHero component must render exactly once on the Services page. The headline 'Our Services' and tagline 'Expert garment care for Toronto — from everyday wear to specialty fabrics.' must animate into view when scrolled into the viewport. The 'Get a Quote' button must be visible and navigate to '/Quote' when clicked. The design must match the provided CSS, including animations and responsive behavior. Access is shared between Admin and Visitor personas. Page access: shared by all personas (Admin, Visitor). This is verification context and does not request role-specific implementation.

As a frontend developer, implement the ServicesGrid section for the Services page. This section displays all dry-cleaning services as interactive cards with category filter controls, service cards showing name, description, base price, and icons. It owns the filtered service list state and supports sorting. Each card is clickable to view details or request a quote. Acceptance criteria: The ServicesGrid component must render exactly once on the Services page. It must display service cards with correct details and icons, support filtering by category, and allow sorting by name and price. Clicking a service card must navigate to the quote page with the service ID as a query parameter. The design must match the provided CSS, including responsive behavior. Access is shared between Admin and Visitor personas. Page access: shared by all personas (Admin, Visitor). This is verification context and does not request role-specific implementation.

As a frontend developer, implement the ContactHero section for the Contact Us page. This section should display a page title 'Contact Us' and a descriptive tagline explaining the contact methods available. Ensure the visual accent line is styled as per the design. Acceptance criteria: The ContactHero section must render exactly once on the Contact Us page, displaying the title and tagline with the specified styles. The section should be accessible to Visitors only, as per the page access context. The design structure and theme must match the provided CSS. No backend integration is required. Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the ContactForm section for the Contact Us page. This section should include fields for name, email, phone, subject, and message, with real-time validation and submission handling. The form should provide success and error feedback messages. Acceptance criteria: The ContactForm must render exactly once on the Contact Us page, allowing Visitors to submit inquiries. The form must validate inputs on blur and submit, and display appropriate feedback. The design must match the provided CSS. The form submission should simulate sending an inquiry to a business email, requiring backend integration for actual email sending. Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the DashboardSidebar section for the Dashboard page. This section provides a vertical navigation sidebar for the admin dashboard, containing links to Services, Gallery, Testimonials, FAQs, Business Hours, Inbox, and Settings, organized by category. It should highlight the current section and collapse to a hamburger menu on mobile. Ensure the sidebar is responsive and highlights the active section based on the current path. Include conditional rendering for links based on access context (e.g., Business Hours and Inbox are Admin-only). Acceptance criteria: The DashboardSidebar must render exactly once on the Dashboard page, provide navigation links as per the design, highlight the active section, and collapse on mobile. The sidebar must respect the access context, showing Admin-only links conditionally. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the DashboardServices section for the Dashboard page. This section manages the services list, displaying a table with columns for Service Name, Category, Price, and Active Status. It includes action buttons for editing and deleting services, and an 'Add Service' button. The edit form should slide in or overlay, allowing modifications to service details. Acceptance criteria: The DashboardServices must render exactly once on the Dashboard page, display the services table with inline actions, and provide a functional form for adding/editing services. The form must validate inputs and update the list upon saving. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the DashboardInbox section to display and manage quote requests and contact messages. This section includes filter tabs (All, Quote Requests, Contact Messages) and a list/table view with columns for Type, Sender Name, Message Preview, Status, and Received Date. Each row is clickable to expand and show full inquiry details, including a Reply button, Mark as Read toggle, and Archive/Delete options. The inbox state (selectedInquiryId, filterType) is managed here. Ensure the section is accessible only to Admins. Acceptance criteria: 1) The DashboardInbox component must render on the Dashboard page for Admins only. 2) The filter tabs must correctly filter inquiries by type. 3) Clicking a row must expand it to show full details with actionable buttons. 4) The Reply button must open a modal for composing a response. 5) The Mark as Read toggle must update the inquiry status. 6) The Delete button must remove the inquiry after confirmation. 7) The design must match the provided CSS styles. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the GalleryGrid section for the Gallery page. This section displays an interactive before/after gallery grid with drag-enabled sliders for image comparison. Implement category filtering, hover-triggered animations, and ensure a responsive layout with 3 columns on desktop, 2 on tablet, and 1 on mobile. Use the motion library for animations and manage the slider interaction using motion values and transforms. Acceptance criteria: The GalleryGrid section must render exactly once on the Gallery page, displaying project cards with before/after sliders, category filters, and hover animations. The section must be accessible to both Admin and Visitor personas. The section must integrate with the backend to fetch gallery project data, requiring the 'frontend.api.client' capability. Page access: shared by all personas (Admin, Visitor). This is verification context and does not request role-specific implementation.

As a frontend developer, implement the QuoteFormPanel section to capture and validate customer quote request data. This section includes fields for customer name, email, phone, service type, garment description, and urgency level, with validation and submission handling. Use state management for formData, formErrors, isSubmitting, and submitSuccess. Acceptance criteria: The QuoteFormPanel must render on the Quote page, allowing users to fill out and submit the form. Validation errors should display appropriately, and a success message should appear upon submission. The form must be responsive and accessible to Visitors only. Backend integration is required for form submission. Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the BusinessHoursWithContact section to display weekly business hours and guide visitors toward contact engagement. This section should include a table or grid of business hours with open/closed status, a contact headline, and multiple contact methods (phone, WhatsApp, Contact Us link). Ensure the layout is responsive, adapting from horizontal cards on desktop to vertical stacked rows on mobile. Acceptance criteria: The BusinessHoursWithContact component must render exactly once on the Business Hours page, displaying business hours and contact options as specified. The design must adhere to the provided CSS, ensuring responsive behavior across devices. The section is accessible only to Admin users. Backend integration is required to fetch business hours data. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the InboxQuoteRequests section for the Inbox page. This section manages customer quote requests, displaying them in a list with filtering, sorting, and selection capabilities. Use the provided JSX to render quote cards with customer details and status badges. Implement filtering and sorting logic using useMemo, and handle quote selection and response composition. Ensure the section is responsive and matches the design tokens specified in the CSS. Acceptance criteria: The InboxQuoteRequests must render on the Inbox page, allow filtering and sorting of quotes, display detailed information on selection, and enable response composition. The section must be accessible only to Admin users. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the BackupManagement section on the Settings page. This section includes a backup history table displaying columns for name, date, size, type, and status of backups. It provides controls for triggering manual backups, configuring automatic backup schedules (daily, weekly, monthly), setting backup retention policies, and viewing backup details. The section must be fully responsive, with a mobile-friendly table/card layout. Ensure the section interacts with the backend to manage backup records, including triggering backups, updating schedules, and handling restore/download actions. Acceptance criteria: - The Settings page must render the BackupManagement component exactly once. - The backup history table/cards must display backup records with accurate details. - Controls for manual backup, schedule configuration, and retention policy must function as per design. - The section must interact with the backend to trigger backups and update configurations. - Access to this section is restricted to Admin persona only. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the GalleryHero section for the Gallery page. This section introduces the gallery with a compelling headline and supporting text, establishing the visual hierarchy and context for the before/after showcase below. Use the motion library to animate the headline and supporting text with a fade-in effect and a subtle visual accent that expands horizontally. Ensure the section is styled according to the provided CSS, maintaining the responsive design adjustments for different screen sizes. Acceptance criteria: The GalleryHero section must render exactly once on the Gallery page, displaying the headline 'Before & After Gallery' and the supporting text. The animation must match the specified motion parameters. The section must be accessible to both Admin and Visitor personas. Page access: shared by all personas (Admin, Visitor). This is verification context and does not request role-specific implementation.

As a frontend developer, implement the QuoteHero section to introduce the quote request feature and reinforce Queen's Cleaners expertise. This section should display a headline, subheadline, supporting text, and a trust statement with a visual cue. Use the LazyMotion and motion components for animations, ensuring the headline underline animates on view. Acceptance criteria: The QuoteHero section must render on the Quote page, displaying the headline 'Get Your Quote in Minutes' with an animated underline, subheadline, supporting text, and trust statement. The design must match the provided CSS, and the section should be accessible to Visitors only. No backend integration is required. Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the BusinessHoursHero section to introduce the Business Hours page with a clear headline and subheadline. This section should include a Clock icon from 'lucide-react', a headline 'Business Hours', and a subheadline 'Plan your visit or reach out—we’re here to serve Toronto'. Ensure the section maintains visual consistency with other informational pages through typography and subtle background. Acceptance criteria: The BusinessHoursHero component must render exactly once on the Business Hours page, displaying the headline and subheadline as specified. The design must adhere to the provided CSS, ensuring responsive behavior across devices. The section is accessible only to Admin users. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the InboxSidebar section for the Inbox page. This section provides navigation between Quote Requests and Contact Messages views, displays unread counts, and offers filter shortcuts. Use the provided JSX to render tabs with icons and counts, and ensure the active tab is highlighted. Implement the useEffect hook to set the active tab based on URL parameters. Ensure the sidebar is responsive and matches the design tokens specified in the CSS. Acceptance criteria: The InboxSidebar must render on the Inbox page, allow navigation between tabs, display correct unread counts, and provide functional filter shortcuts. The sidebar must be accessible only to Admin users. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the InboxContactMessages section to manage and respond to customer contact messages. This section should display a paginated list of contact messages with message cards showing customer name, subject, date, and status. Implement filtering by status (new, reviewed), sorting options (date, subject), and selection of messages to view details. The detail panel should show full message content and provide reply options. Implement inline actions to mark messages as reviewed or delete them. Ensure the section is accessible only to Admins as per the page access context. Acceptance criteria: 1) The Inbox page must render the InboxContactMessages component exactly once. 2) The component must display message cards with correct data and allow filtering, sorting, and selection. 3) The design must match the provided CSS styles, including responsive behavior. 4) The section must integrate with the backend to fetch and update message data, requiring the 'frontend.api.client' capability. 5) Access to this section must be restricted to Admins only. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the SettingsNav section for the Settings page. This section provides a vertical sidebar navigation for the settings sections, displaying Security and Backup sections as clickable tabs with a visual indicator of the current section. It should collapse to a mobile drawer below 768px. Ensure the use of IntersectionObserver to highlight the active section based on scroll position and handle mobile toggle functionality. Acceptance criteria: The SettingsNav component must render exactly once on the Settings page, displaying tabs for 'Security' and 'Backup'. The active tab must be highlighted based on scroll position. The mobile toggle should function correctly, collapsing the navigation into a drawer below 768px. The component should be accessible only to Admin users. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a Tech Lead, verify the end-to-end integration between the Quote frontend implementation and the Quote backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

As a Tech Lead, verify the end-to-end integration between the Contact Us frontend implementation and the Contact Us backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

As a frontend developer, implement the TestimonialsHero section to introduce the Testimonials page with a compelling headline, subheading, and visual accents. Ensure the section sets the visual tone and communicates the value of customer reviews. Acceptance criteria: The TestimonialsHero component must render exactly once on the Testimonials page, displaying the headline 'What Our Customers Say', a subheading, and a visual accent bar. The design must match the provided CSS, including the gradient background and accent elements. The section should be accessible to both Admin and Visitor personas. Page access: shared by all personas (Admin, Visitor). This is verification context and does not request role-specific implementation.

As a frontend developer, implement the FAQsHero section to introduce the FAQs page with a dynamic header. This section should include a 'Frequently Asked Questions' headline, a descriptive tagline, and a call-to-action link. The section should respond to mouse movements to create a visual effect using CSS variables for mouse position. Ensure the motion animations for the headline and tagline are smooth and only trigger once when the section comes into view. Acceptance criteria: The FAQsHero section must render exactly once on the FAQs page, displaying the headline, tagline, and CTA link. The design must match the provided CSS, including responsive adjustments. The mouse movement effect must update CSS variables for the background decoration. The section must be accessible to both Admin and Visitor personas. Page access: shared by all personas (Admin, Visitor). This is verification context and does not request role-specific implementation.