What do we need to build?
Implement the What We Offer section based on the approved Services Page mockups.
This section introduces Web Dev Path's service offering and allows visitors to explore each service through an interactive interface.
The implementation should focus on building the section structure, reusable components, responsive layouts, and interaction behaviors while following the approved prototype.
SDD References
Before implementation, review the following documents:
specs/services-page/specification.mdspecs/services-page/decisions.mdspecs/services-page/references.md
The References document contains:
- Approved Figma mockups
- Interactive Figma prototypes
- Content references
- Supporting design documentation
These documents are the source of truth for both layout and interaction behavior.
Technical Details
Section Layout
Implement the section according to the approved Figma mockups, including:
- Section heading
- Introductory description
- Decorative side elements
- Service category component
- Service description panel
- Responsive desktop and mobile layouts
Service Categories
Build the service category component as a reusable interactive element.
The component consists of multiple horizontal rows of service category pills.
Entrance Animation
The section should follow the entrance behavior demonstrated in the approved prototype:
- 1 Section content is revealed.
- 2 Decorative side elements animate into position.
- 3 Service category rows begin their continuous movement after the section is revealed.
Developers should use the approved Figma prototype as the source of truth for animation timing, sequencing, and transitions.
Continuous Movement
Each row of service categories should move horizontally in a subtle continuous loop, similar to an infinite slider.
Rows should move in alternating directions, creating a coordinated visual effect across the section.
Although V1 will likely launch with only two rows of services, the implementation should be designed so additional rows can be added without changing the animation architecture.
A recommended approach is to alternate movement based on row index (odd/even), allowing future rows to inherit the appropriate direction automatically.
The movement should:
- remain smooth and subtle;
- never interfere with readability;
- continue independently of user interaction;
- work consistently across desktop and mobile.
Interaction
Selecting a service category should:
- highlight the selected pill;
- update the service description panel;
- preserve the continuous movement of the remaining rows unless the approved prototype specifies otherwise.
Service Description Panel
Implement the service description panel shown in the approved mockups.
The component should support updating its content dynamically based on the selected service.
Content will be finalized before implementation is completed.
Pending Validation
The overall interaction behavior has been defined through the approved prototype.
The remaining validation is limited to product content.
Product
Design
The approved Figma mockups and interactive prototype are the source of truth for this section.
Before implementation, review the SDD References document and carefully inspect:
- entrance animations;
- section reveal behavior;
- decorative element animations;
- service category movement;
- interaction states;
- animation timing and transitions.
If implementation behavior differs from the prototype or something remains unclear, seek clarification before proceeding.
Approach Suggestions
- Reuse components from the existing design system whenever possible.
- Build the service category component to support future additions or changes.
- Separate animation logic from presentation whenever possible.
- Keep interactions reusable so additional service rows can be introduced without restructuring the component.
Deadline
Please keep in mind that once you assign yourself this task, it should be completed within 10 days.
Acceptance Criteria
Implementation
Validation
What do we need to build?
Implement the What We Offer section based on the approved Services Page mockups.
This section introduces Web Dev Path's service offering and allows visitors to explore each service through an interactive interface.
The implementation should focus on building the section structure, reusable components, responsive layouts, and interaction behaviors while following the approved prototype.
SDD References
Before implementation, review the following documents:
specs/services-page/specification.mdspecs/services-page/decisions.mdspecs/services-page/references.mdThe References document contains:
These documents are the source of truth for both layout and interaction behavior.
Technical Details
Section Layout
Implement the section according to the approved Figma mockups, including:
Service Categories
Build the service category component as a reusable interactive element.
The component consists of multiple horizontal rows of service category pills.
Entrance Animation
The section should follow the entrance behavior demonstrated in the approved prototype:
Developers should use the approved Figma prototype as the source of truth for animation timing, sequencing, and transitions.
Continuous Movement
Each row of service categories should move horizontally in a subtle continuous loop, similar to an infinite slider.
Rows should move in alternating directions, creating a coordinated visual effect across the section.
Although V1 will likely launch with only two rows of services, the implementation should be designed so additional rows can be added without changing the animation architecture.
A recommended approach is to alternate movement based on row index (odd/even), allowing future rows to inherit the appropriate direction automatically.
The movement should:
Interaction
Selecting a service category should:
Service Description Panel
Implement the service description panel shown in the approved mockups.
The component should support updating its content dynamically based on the selected service.
Content will be finalized before implementation is completed.
Pending Validation
The overall interaction behavior has been defined through the approved prototype.
The remaining validation is limited to product content.
Product
Design
The approved Figma mockups and interactive prototype are the source of truth for this section.
Before implementation, review the SDD References document and carefully inspect:
If implementation behavior differs from the prototype or something remains unclear, seek clarification before proceeding.
Approach Suggestions
Deadline
Please keep in mind that once you assign yourself this task, it should be completed within 10 days.
Acceptance Criteria
Implementation
Validation
specification.md.decisions.md.CHANGELOG.mdfile if applicable.