As a frontend developer, implement the Navbar section for the Home page. This section provides a shared navigation shell with an animated logo and responsive navigation links. Use motion/react to animate the logo path on initial page load and add hover effects to navigation links. Ensure the navbar is sticky with a fixed height of 72px on desktop and 64px on mobile. The navigation toggle should open and close the menu on mobile. Acceptance criteria: The Navbar must render once on the Home page, providing links to valid project routes. The logo should animate on page load, and links should have a hover underline effect. The mobile menu should toggle open/close. The design must match the provided CSS, with no gradient backgrounds or parallax effects. Access is shared with all personas.
Page access: shared by all personas (Visitor). This is verification context and does not request role-specific implementation.
As a frontend developer, implement the HomeCleaningJourney section on the Home page. This section features a scroll-triggered narrative of the cleaning process with step-by-step visual progression. Use motion/react to create a vertical timeline structure with scroll-linked step reveals. Each step should include an illustration, a connecting line, and descriptive text. The illustrations fade in from the left, and the text fades in from the right as the user scrolls. Ensure the vertical SVG line animates its stroke as a progress indicator. The section should adapt to a single-column layout on mobile and a two-column grid on desktop. Acceptance criteria: The Home page must render the HomeCleaningJourney section exactly once. The section must display five steps with animations triggered by scroll position. The design must match the provided theme, including the accent yellow (#FFC107) for the line. No backend integration is required. The section is accessible to all visitors.
Page access: shared by all personas (Visitor). This is verification context and does not request role-specific implementation.
As a frontend developer, implement the HomeTestimonials section on the Home page. This section displays customer testimonials in a grid layout with star ratings and author names. Use motion/react to animate star ratings with a twinkle effect and apply a 3D tilt on card hover. Ensure the section loads three testimonials with a staggered animation. Acceptance criteria: The Home page must render the HomeTestimonials section exactly once. The section must display three testimonial cards with animated star ratings and hover effects. The design must match the provided theme, including the accent yellow (#FFEB3B) for stars. No backend integration is required. The section is accessible to all visitors.
Page access: shared by all personas (Visitor). This is verification context and does not request role-specific implementation.
As a frontend developer, implement the HomeContact section on the Home page. This section provides contact information and a call-to-action button for inquiries. Use motion/react to create a ripple effect on the CTA button and underline animations on email/phone links. Acceptance criteria: The Home page must render the HomeContact section exactly once. The section must display contact details with interactive links and a CTA button with a ripple effect. The design must match the provided theme, including the bright yellow (#FFEB3B) for the button. No backend integration is required. The section is accessible to all visitors.
Page access: shared by all personas (Visitor). This is verification context and does not request role-specific implementation.
As a frontend developer, implement the Footer section on the Home page. This shared component provides consistent footer content across all pages. Use motion/react to apply color transitions on link hover and subtle scale/rotate effects on social icons. Acceptance criteria: The Home page must render the Footer section exactly once. The section must display brand information, quick links, contact details, and social media icons with hover effects. The design must match the provided theme, including the color transitions. No backend integration is required. The section is accessible to all visitors.
Page access: shared by all personas (Visitor). This is verification context and does not request role-specific implementation.
As a frontend developer, implement the HomeHero section for the Home page. This section features a dynamic hero animation illustrating a cleaning transformation journey. Use motion/react to create a 10-second looping animation of a living room transforming from cluttered to clean, with hover interactions revealing service details. Ensure the animation is responsive and includes a headline and subheadline. Acceptance criteria: The HomeHero must render once on the Home page, displaying the animated illustration and interactive tool overlays. The animation should loop seamlessly, and hover interactions should reveal tool details. The design must match the provided CSS, with no static illustrations or crossfading. Access is shared with all personas.
Page access: shared by all personas (Visitor). This is verification context and does not request role-specific implementation.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the HomeServices section for the Home page. This section displays the company's service offerings in a responsive grid layout. Use motion/react to animate service cards as they enter the viewport, with icons pulsing gently. Ensure the cards have hover effects that lift them slightly and brighten the icons. Acceptance criteria: The HomeServices must render once on the Home page, displaying four service cards with icons, titles, and descriptions. The cards should animate on scroll and have hover effects. The design must match the provided CSS, with no gradient overlays or 3D transforms. Access is shared with all personas.
Page access: shared by all personas (Visitor). This is verification context and does not request role-specific implementation.
Depends on:#1
Waiting for dependencies
No comments yet. Be the first!