Create Services page Hero section

[mariana-caldas]

What do we need to build or fix?

Implement the new Services page hero based on the approved mockups and establish the entry point for the new Services experience.

This work includes replacing the existing hero with the new Services hero, updating the primary navigation for the Services environment, and implementing the hero layout and calls to action.

The implementation should follow the approved Services Page Specification and reference documentation before development begins.

---

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.

---

Technical details

Navigation

• Replace the Join Us navigation button with Explore Our Services.
• Update the navigation link to direct users to the Services page.
• Apply this navigation update within the services-dev environment.

Hero Section

Implement the Services hero according to the approved Figma mockups, including:

• Hero background image and overlay.
• Headline.
• Supporting copy.
• Primary CTA (Book a Discovery Call).
• Secondary CTA (Explore More).
• Three informational floating cards.
• Responsive desktop and mobile layouts.

Primary CTA

• Connect the Book a Discovery Call button to the approved Calendly booking link referenced in references.md.

Secondary CTA

Implement the Explore More button.

Open Question

The expected interaction after clicking Explore More should be confirmed with the Design team before implementation is finalized.

Current Assumption

The button scrolls users to the What We Offer section.

Until this behavior is confirmed, avoid implementing interaction logic that depends on unvalidated requirements.

---

Approach suggestions

• Reuse existing navigation and Hero components whenever practical.
• Reuse components from the Web Dev Path Design System whenever available.
• Keep the Hero implementation independent from future page sections.
• Do not implement the interaction logic for the What We Offer section in this issue.
• Any scrolling behavior or interactions with future sections should be implemented after the corresponding section has been developed.

---

Deadline

Please keep in mind that once you assign this task to yourself, it should be completed within 10 days.

---

Acceptance criteria

Implementation

• Services page hero matches the approved Figma design.
• Navigation button is updated from Join Us to Explore Our Services.
• Navigation directs users to the Services page.
• Hero is responsive on desktop and mobile.
• Hero informational cards are implemented.
• Primary CTA opens the configured Calendly booking flow.
• Secondary CTA is implemented.

Validation

• Review implementation against specification.md.

• Review implementation against decisions.md.

• Review implementation against the approved Figma mockups.

• Confirm the expected Explore More interaction with the Design team before implementing any final navigation or scrolling behavior.

• Verify keyboard accessibility.

• Verify responsive behavior.

• Verify browser compatibility (Chrome, Firefox, Edge, and Safari).

• Test the section and components 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.