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 offerings and allows visitors to explore each service through an interactive interface.
The implementation should focus on building the section structure as a reusable component while leaving any pending product or design decisions clearly identified for later validation.
SDD References
Before starting implementation, review the following documents:
specs/services-page/specification.mdspecs/services-page/decisions.mdspecs/services-page/references.md
These documents are the source of truth for this initiative.
The approved Figma mockups define the intended user experience, while the content documentation referenced in references.md provides the initial product content.
Technical details
Section Layout
Implement the What We Offer section according to the approved Figma mockups, including:
- Section heading.
- Supporting copy.
- Decorative background 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 current mockups illustrate the intended user experience and should not be treated as the final list of services: we may remove some of the services for our v1 launch, considering our expertise and team capacity).
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 supplied through the product documentation before implementation is finalized.
Pending validation
The following items do not block implementation of the section structure but should be confirmed before the feature is considered complete.
Design Team
- Confirm the interaction triggered by the Explore More button in the Hero section.
- Confirm whether the service category component behaves as a slider, carousel, or another interaction.
- Confirm expected desktop and mobile interaction differences.
- Provide reference websites or interaction examples, if available.
- Confirm whether decorative background elements include animations or remain static.
Product
- Confirm the final list of services that will be available at launch.
- Confirm the content displayed for each service.
- Review the initial content documentation and update it as needed before implementation is finalized.
Approach suggestions
- Reuse components from the Web Dev Path Design System whenever possible.
- Build the service category component to support future additions or changes.
- Separate content from presentation to simplify future updates.
- Keep interaction logic modular so validated animations can be added without restructuring the component.
Deadline
Please keep in mind that once you assign this task to yourself, 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 offerings and allows visitors to explore each service through an interactive interface.
The implementation should focus on building the section structure as a reusable component while leaving any pending product or design decisions clearly identified for later validation.
SDD References
Before starting implementation, review the following documents:
specs/services-page/specification.mdspecs/services-page/decisions.mdspecs/services-page/references.mdThese documents are the source of truth for this initiative.
The approved Figma mockups define the intended user experience, while the content documentation referenced in
references.mdprovides the initial product content.Technical details
Section Layout
Implement the What We Offer section according to the approved Figma mockups, including:
Service Categories
Build the service category component as a reusable interactive element.
The current mockups illustrate the intended user experience and should not be treated as the final list of services: we may remove some of the services for our v1 launch, considering our expertise and team capacity).
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 supplied through the product documentation before implementation is finalized.
Pending validation
The following items do not block implementation of the section structure but should be confirmed before the feature is considered complete.
Design Team
Product
Approach suggestions
Deadline
Please keep in mind that once you assign this task to yourself, it should be completed within 10 days.
Acceptance criteria
Implementation
Validation
Review implementation against
specification.md.Review implementation against
decisions.md.Review implementation against the approved Figma mockups.
Confirm pending design interactions before final implementation.
Confirm final product content before completion.
Verify keyboard accessibility.
Verify responsive behavior.
Verify browser compatibility (Chrome, Firefox, Edge, and Safari).
Test the section across different screen sizes using the browser's inspection tools.
Verify that changes do not negatively affect existing shared components or layouts.
If build issues occur before submitting the Pull Request, run
yarn buildlocally, resolve any errors, and commit the fixes.Update the
CHANGELOG.mdfile if applicable.