discovery page

[Lavi2910]

Description

Related Issue(s)

Fixes SOLY-

Checklist

• I have performed a self-review of my own code
• My changes generate no new warnings

Screenshots (if appropriate)

[Copilot]

Pull request overview

This PR updates the customer Discovery page layout by introducing a reusable section header, adjusting spacing, and refreshing the BusinessCard presentation, along with a global layout tweak for safe-area top padding.

Changes:

• Added a new SectionHeader component with an optional “see all” action.
• Updated BusinessCard layout/styling (compact card sizing, new rating row placement, adjusted typography/ellipsis behavior).
• Tweaked Discovery page spacing and added a horizontal “recommended near you” card scroller; added safe-area-aware top padding in AppLayout.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
apps/web/src/pages/customer/DiscoveryPage/styles.ts	Adjusts Discovery page container spacing (gap).
apps/web/src/pages/customer/DiscoveryPage/components/SectionHeader/styles.ts	Adds styles for the new SectionHeader layout and “see all” button.
apps/web/src/pages/customer/DiscoveryPage/components/SectionHeader/SectionHeader.tsx	Introduces the SectionHeader component used on the Discovery page.
apps/web/src/pages/customer/DiscoveryPage/components/BusinessCard/styles.ts	Updates BusinessCard layout metrics (dimensions, rows, truncation, tag placement).
apps/web/src/pages/customer/DiscoveryPage/components/BusinessCard/BusinessCard.tsx	Restructures BusinessCard markup (open tag, rating row, full-width CTA).
apps/web/src/pages/customer/DiscoveryPage/DiscoveryPage.tsx	Renders the new section header + horizontal BusinessCard list on the page.
apps/web/src/components/layout/AppLayout/styles.ts	Adds safe-area top padding to the app content wrapper.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The horizontal scroller styles are defined inline in JSX, which makes the component harder to maintain and causes a new style object to be created on every render. Consider extracting this to DiscoveryPage/styles.ts (similar to CategoryPills’ scrollContainerStyle) so it’s reusable and consistent.

[Copilot]

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (3)

apps/web/src/pages/customer/DiscoveryPage/components/BusinessCard/BusinessCard.tsx:88

• This visible "קבע תור" CTA has no onClick, navigation, or disabled state, so users can tap it and nothing happens. Wire it to the booking flow (or hide/disable it until that flow exists) before rendering these cards on the discovery page.

        <SolyButton
          variant="gradient"
          style={{ ...styles.getBookStyle(token), width: '100%' }}
        >

apps/web/src/pages/customer/DiscoveryPage/DiscoveryPage.tsx:47

• The rendered recommendations are not connected to the selected category. CategoryPills keeps its active key internally and this static card list is always rendered, so choosing (for example) the nails category still leaves the barber and hair-studio cards visible.

        <BusinessCard
          name="נייל בר"
          category="ציפורניים"
          location="רוטשילד"
          distance="1.2 ק״מ"
          rating={4.7}
          reviewCount={89}
        />
        <BusinessCard

apps/web/src/pages/customer/DiscoveryPage/components/BusinessCard/BusinessCard.tsx:90

• Each card exposes a button whose accessible name is only "קבע תור". In a list of repeated cards, screen-reader button navigation will show several identical actions without the business name, so the CTA should include contextual labelling for the specific business.

        <SolyButton
          variant="gradient"
          style={{ ...styles.getBookStyle(token), width: '100%' }}
        >
          <SolyTypography variant="body" style={styles.getBookColor(token)}>
            {'קבע תור'}