Add business card details

src/components/business-card/business-card.module.scss

@@ -1,27 +1,82 @@
 .root {
 }
 
+.baseCardContent {
+  padding: 0;
+}
+
+.baseCardImage {
+  aspect-ratio: 2/1;
+}
+
+.content {
+  display: flex;
+  column-gap: 24px;
+  padding: 16px;
+}
+
+.restaurantDetailsContainer {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
 .title {
   font-family: inherit;
   font-size: var(--text-large-font-size);
   line-height: var(--text-large-line-height);
   font-weight: 400;
   color: var(--text-emphasized);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.baseCardContent {
-  padding: 0;
+.description {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.baseCardImage {
-  aspect-ratio: 2/1;
+.deliveryTimeContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex-basis: 80px;
+  flex-shrink: 0;
+  background-color: var(--background-accent-light);
+  border-radius: 12px;
+  row-gap: 2px;
 }
 
-.content {
-  padding: 16px;
+.time {
+  font-size: var(--text-small-font-size);
+  line-height: 1;
+}
+
+.units {
+  font-size: var(--text-tiny-font-size);
+  line-height: 1;
 }
 
 .footer {
-  padding: 16px;
+  padding: 8px 16px;
   box-shadow: 0 1px 0 0 var(--border-default) inset;
+  display: flex;
+  column-gap: 8px;
+  color: var(--text-muted);
+  font-size: var(--text-small-font-size);
+  line-height: var(--text-small-line-height);
+}
+
+.deliveryPrice {
+}
+
+.satisfactionScore {
+  display: inline-block;
+  padding-right: 4px;
+  padding-left: 4px;
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px var(--border-emphasized) inset;
 }

src/components/business-card/business-card.tsx

@@ -26,10 +26,21 @@ export const BusinessCard = ({
             {...props}
         >
             <div className={classNames(styles.content, elementsClassNames?.content)}>
-                <h3 className={styles.title}>{title}</h3>
-                <span>{description}</span>
+                <div className={styles.restaurantDetailsContainer}>
+                    <h3 className={styles.title}>{title}</h3>
+                    <span className={styles.description}>{description}</span>
+                </div>
+                <div className={styles.deliveryTimeContainer}>
+                    <span className={styles.time}>35-45 </span>
+                    <span className={styles.units}>min</span>
+                </div>
             </div>
-            <footer className={classNames(styles.footer, elementsClassNames?.footer)}></footer>
+            <footer className={classNames(styles.footer, elementsClassNames?.footer)}>
+                <span className={styles.deliveryPrice}>
+                    <span>$</span>16.00
+                </span>
+                <span className={styles.satisfactionScore}>4.6</span>
+            </footer>
         </BaseCard>
     );
 };