discovery page

apps/web/src/components/layout/AppLayout/styles.ts

@@ -1,5 +1,6 @@
 import { type CSSProperties } from 'react';
 
 export const contentWrapper: CSSProperties = {
+  paddingTop: 'calc(0.75rem + env(safe-area-inset-top, 0px))',
   paddingBottom: '5rem',
 };

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

@@ -3,6 +3,9 @@ import { DiscoveryHeader } from './components/DiscoveryHeader/DiscoveryHeader';
 import * as styles from './styles';
 import { SearchBar } from './components/SearchBar/SearchBar';
 import { CategoryPills } from './components/CategoryPills/CategoryPills';
+import { SectionHeader } from './components/SectionHeader/SectionHeader';
+import { BusinessCard } from './components/BusinessCard/BusinessCard';
+
 export const DiscoveryPage = () => {
   const user = useAuthStore((state) => state.user);
   const token = useAuthStore((state) => state.token);
@@ -14,8 +17,43 @@ export const DiscoveryPage = () => {
       <DiscoveryHeader name={name} avatar={avatar} />
       <SearchBar />
       <CategoryPills />
-      {/* PromoBanner — next */}
-      {/* SectionHeader + BusinessCards — next */}
+      <SectionHeader title="מומלצים בקרבתך ⭐" />
+      <div
+        style={{
+          display: 'flex',
+          gap: '1rem',
+          overflowX: 'auto',
+          scrollbarWidth: 'none',
+          padding: '0.75rem',
+        }}
+      >
+        <BusinessCard
+          name="ברבר שופ TLV"
+          category="ספרות"
+          location="דיזנגוף"
+          distance="0.4 ק״מ"
+          rating={4.9}
+          reviewCount={127}
+          isOpen={true}
+        />
+        <BusinessCard
+          name="נייל בר"
+          category="ציפורניים"
+          location="רוטשילד"
+          distance="1.2 ק״מ"
+          rating={4.7}
+          reviewCount={89}
+        />
+        <BusinessCard
+          name="סטודיו לעיצוב שיער"
+          category="עיצוב שיער"
+          location="בן יהודה"
+          distance="0.8 ק״מ"
+          rating={4.8}
+          reviewCount={54}
+          isOpen={true}
+        />
+      </div>
     </div>
   );
 };

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

@@ -52,40 +52,44 @@ export const BusinessCard = ({
         <div style={styles.getAvatarWrapper(token)}>
           <SolyAvatar variant="medium" name={name} src={logoImage} />
         </div>
-      </div>
-      <div style={styles.businessName}>
-        <SolyTypography variant="pageTitle">{name}</SolyTypography>
         {isOpen && (
-          <SolyTag variant="status">
+          <SolyTag
+            variant="highlight"
+            style={{ ...styles.statusTagStyle, ...styles.openTagStyle }}
+          >
             <SolyTypography variant="captionInherit">
               {'פתוח עכשיו'}
             </SolyTypography>
           </SolyTag>
         )}
       </div>
+      <div style={styles.ratingRow}>
+        <SolyRating variant="compact" value={rating} />
+        <SolyTypography variant="caption">{`(${reviewCount})`}</SolyTypography>
+      </div>
+      <div style={styles.businessName}>
+        <SolyTypography variant="sectionTitle" style={styles.nameText}>
+          {name}
+        </SolyTypography>
+      </div>
       <div style={styles.infoArea}>
         <div style={styles.desc}>
-          <SolyTypography variant="caption">
+          <SolyTypography variant="caption" style={styles.categoryText}>
             {`${category} · ${location}`}
           </SolyTypography>
           <div style={styles.distanceDiv}>
             <MapPin style={styles.getLocationIconStyle(token)} />
             <SolyTypography variant="caption">{distance}</SolyTypography>
           </div>
         </div>
-        <div style={styles.bookAndRevDiv}>
-          <div style={styles.ratingDiv}>
-            <SolyRating variant="compact" value={rating} />
-            <SolyTypography variant="caption">
-              {`(${reviewCount})`}
-            </SolyTypography>
-          </div>
-          <SolyButton variant="gradient" style={styles.getBookStyle(token)}>
-            <SolyTypography variant="body" style={styles.getBookColor(token)}>
-              {'קבע תור'}
-            </SolyTypography>
-          </SolyButton>
-        </div>
+        <SolyButton
+          variant="gradient"
+          style={{ ...styles.getBookStyle(token), width: '100%' }}
+        >
+          <SolyTypography variant="body" style={styles.getBookColor(token)}>
+            {'קבע תור'}
+          </SolyTypography>
+        </SolyButton>
       </div>
     </div>
   );

apps/web/src/pages/customer/DiscoveryPage/components/BusinessCard/styles.ts

@@ -5,13 +5,17 @@ export const getContainerStyle = (token: GlobalToken): CSSProperties => ({
   borderRadius: '1rem',
   overflow: 'hidden',
   backgroundColor: token.colorBgContainer,
-  boxShadow: token.boxShadowTertiary,
-  width: '16rem',
+  boxShadow: token.boxShadowSecondary,
+  width: '13rem',
+  height: '14rem',
+  flexShrink: 0,
+  display: 'flex',
+  flexDirection: 'column',
 });
 
 export const bannerSection: CSSProperties = {
   position: 'relative',
-  height: '6rem',
+  height: '5rem',
 };
 
 export const bannerImage: CSSProperties = {
@@ -30,23 +34,24 @@ export const getAvatarWrapper = (token: GlobalToken): CSSProperties => ({
 
 export const infoArea: CSSProperties = {
   display: 'flex',
-  flexDirection: 'row',
-  padding: '1rem',
-  gap: '1rem',
+  flexDirection: 'column',
+  justifyContent: 'flex-end',
+  padding: '0 0.75rem 0.5rem',
+  gap: '0.25rem',
+  flex: 1,
 };
 
 export const desc: CSSProperties = {
   display: 'flex',
   flexDirection: 'column',
-  gap: '0.2rem',
+  gap: '0.15rem',
 };
 
 export const distanceDiv: CSSProperties = {
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
   gap: '0.25rem',
-  marginTop: '1rem',
 };
 
 export const getLocationIconStyle = (token: GlobalToken): CSSProperties => ({
@@ -63,25 +68,50 @@ export const ratingDiv: CSSProperties = {
   gap: '0.5rem',
 };
 
-export const businessName: CSSProperties = {
-  margin: '1.5rem 1rem 0rem 1rem',
+export const ratingRow: CSSProperties = {
   display: 'flex',
   flexDirection: 'row',
-  justifyContent: 'space-between',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  gap: '0.25rem',
+  margin: '1.75rem 0.75rem 0 0.75rem',
+};
+
+export const businessName: CSSProperties = {
+  margin: '0.1rem 0.75rem 0 0.75rem',
+};
+
+export const openTagStyle: CSSProperties = {
+  position: 'absolute',
+  bottom: '0.4rem',
+  left: '0.5rem',
+};
+
+export const nameText: CSSProperties = {
+  overflow: 'hidden',
+  display: '-webkit-box',
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: 'vertical',
+  flex: 1,
+};
+
+export const categoryText: CSSProperties = {
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
 };
 
 export const getBookColor = (token: GlobalToken): CSSProperties => ({
   color: token.colorBgContainer,
 });
 
-export const bookAndRevDiv: CSSProperties = {
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '1rem',
-};
-
 export const getBookStyle = (token: GlobalToken): CSSProperties => {
   return {
     boxShadow: token.boxShadowSecondary,
   };
 };
+
+export const statusTagStyle: CSSProperties = {
+  padding: '0 0.35rem',
+  lineHeight: 1,
+};

apps/web/src/pages/customer/DiscoveryPage/components/SectionHeader/SectionHeader.tsx

@@ -0,0 +1,28 @@
+import { theme } from 'antd';
+import { SolyTypography } from '@soly/ui';
+import * as styles from './styles';
+
+interface SectionHeaderProps {
+  title: string;
+  onSeeAll?: () => void;
+}
+
+export const SectionHeader = ({ title, onSeeAll }: SectionHeaderProps) => {
+  const { token } = theme.useToken();
+  return (
+    <div style={styles.containerStyle}>
+      <SolyTypography variant="pageTitle">{title}</SolyTypography>
+      {onSeeAll && (
+        <button
+          type="button"
+          style={styles.getSeeAllStyle(token)}
+          onClick={onSeeAll}
+        >
+          <SolyTypography variant="captionInherit" color={token.colorPrimary}>
+            {'ראה הכל'}
+          </SolyTypography>
+        </button>
+      )}
+    </div>
+  );
+};

apps/web/src/pages/customer/DiscoveryPage/components/SectionHeader/styles.ts

@@ -0,0 +1,18 @@
+import type { CSSProperties } from 'react';
+import type { GlobalToken } from 'antd';
+
+export const containerStyle: CSSProperties = {
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '0 0.75rem',
+};
+
+export const getSeeAllStyle = (token: GlobalToken): CSSProperties => ({
+  background: 'none',
+  border: 'none',
+  padding: 0,
+  cursor: 'pointer',
+  color: token.colorPrimary,
+});

apps/web/src/pages/customer/DiscoveryPage/styles.ts

@@ -3,5 +3,5 @@ import type { CSSProperties } from 'react';
 export const pageContainer: CSSProperties = {
   display: 'flex',
   flexDirection: 'column',
-  gap: '1rem',
+  gap: '0.5rem',
 };