Create How It Works section

[mariana-caldas]

What do we need to build?

Implement the How It Works section based on the approved Services Page mockups.

This section presents the client journey through four project phases using an interactive step component. Each phase displays additional information when selected, guiding visitors through the Web Dev Path delivery process.

The implementation should focus on building the reusable component and interaction while keeping any pending product or design decisions clearly identified for later validation.

---

SDD References

Before starting implementation, review the following documents:

• specs/services-page/specification.md
• specs/services-page/decisions.md
• specs/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 How It Works section according to the approved Figma mockups, including:

• Section heading.
• Supporting copy.
• Project illustration.
• Interactive project phases.
• Phase description panel.
• Primary call-to-action.
• Responsive desktop and mobile layouts.

---

Project Phases

Build the project phases as a reusable interactive component.

The component should support four phases:

1. Share Your Project
2. Get Your Team
3. We Build Together
4. Project Launch

Selecting a phase should update the information displayed in the description panel.

---

Call to Action

Implement the Let's Discuss Your Project button.

The button should connect to the project's Calendly booking page.

---

Implementation Notes

The following items do not block implementation of the section structure but should be confirmed before the feature is considered complete.

Requires Design confirmation

• Confirm the interaction used when switching between project phases.
• Confirm whether the transition includes animations or additional visual effects.
• Confirm whether desktop and mobile interactions behave identically.
• Confirm that the call-to-action button is displayed only when the final phase (Project Launch) is selected.
• Provide reference websites or interaction examples, if available.

Requires Product confirmation

• Finalize the content for:
  • Get Your Team
  • We Build Together
• Review and update the initial content documentation before implementation is finalized.

---

Approach suggestions

• Reuse components from the Web Dev Path Design System whenever possible.
• Build the project phase component so content can be updated without changing the implementation.
• 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

• Section matches the approved Figma mockups.
• Interactive project phase component is implemented.
• Phase description updates correctly when a phase is selected.
• Calendly button is implemented.
• Desktop and mobile layouts are responsive.
• Components are reusable where practical.

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 build locally, resolve any errors, and commit the fixes.

• Update the CHANGELOG.md file if applicable.