Create Why Choose Us section

[mariana-caldas]

What do we need to build?

Implement the Why Choose Us section based on the approved Services Page mockups.

This section highlights Web Dev Path's core value proposition using a heading, supporting copy, and three informational cards that summarize the team's approach and expertise.

The implementation should follow the approved design and reuse existing Design System components whenever possible.

---

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 layout and visual design, while the content documentation referenced in references.md contains the finalized copy for this section.

---

Technical details

Section Layout

Implement the Why Choose Us section according to the approved Figma mockups, including:

• Section label.
• Main heading.
• Supporting paragraph.
• Three value cards.
• Responsive desktop and mobile layouts.

---

Value Cards

Implement the three informational cards using reusable components.

The cards are:

• Client-Centric
• Tailored Solutions
• End-to-End Expertise

Each card includes:

• Illustration
• Title
• Supporting description

---

Implementation Notes

There are no known design or product dependencies for this section.

The implementation should follow the approved mockups and existing Design System.

---

Approach suggestions

• Reuse existing card components from the Design System whenever possible.
• Keep the card component reusable for future sections.
• Separate content from presentation to simplify future updates.
• Maintain consistent spacing, typography, and responsive behavior with the rest of the Services page.

---

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.
• Three value cards are implemented.
• Illustrations, titles, and descriptions match the approved content.
• 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.

• 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.