feat: harmony book added to products

public/locales/en/setting.json

@@ -147,6 +147,10 @@
     "harmonyClub": {
       "title": "Harmony Club",
       "description": "Encourage repeat purchases by sending discount codes and points to your customers."
+    },
+    "harmonyBook": {
+      "title": "Harmony Book",
+      "description": "Improve customer engagement and smooth the path to growth and development of your business by making the scheduling process smarter."
     }
   }
 }

public/locales/fa/setting.json

@@ -147,6 +147,10 @@
     "harmonyClub": {
       "title": "هارمونی کلاب",
       "description": "با ارسال کد تخفیف و امتیاز به مشتریان کسب و کارتان آنها را به خرید مجدد ترغیب کنید"
+    },
+    "harmonyBook": {
+      "title": "هارمونی بوک",
+      "description": "با هوشمندسازی فرایند نوبت‌دهی، تعامل با مشتری را بهبود بخشیده و مسیر رشد و توسعه کسب‌و‌کارتان را هموارتر کنید"
     }
   }
 }

src/components/layout/ProductsMenu.tsx

@@ -1,4 +1,4 @@
-import { Menu, Stack, Typography, Box, Button } from '@mui/material';
+import { Menu, Stack, Typography, Box, Button, lighten } from '@mui/material';
 import { blue } from '@mui/material/colors';
 import { Icon } from '@harmony/kit';
 import { ArrowLeft, ArrowRight } from 'iconsax-react';
@@ -43,15 +43,13 @@ export default function ProductsMenu({
         },
       }}
     >
-      {/* 1. Header Link */}
       <Box sx={{ px: 2, py: 1, bgcolor: blue[50] }}>
         <Typography variant="body2" color="primary.main">
           {t('products.menu.title')}
         </Typography>
       </Box>
 
-      <Box sx={{ px: 2, py: 1 }}>
-        {/* 2. Map through products to create MenuItems */}
+      <Stack sx={{ px: 2, py: 1 }} spacing={1}>
         {productsData.map((product) => (
           <Stack
             key={product.id}
@@ -60,7 +58,6 @@ export default function ProductsMenu({
             alignItems="center"
             width="100%"
           >
-            {/* Text Content */}
             <Stack minWidth={0} direction="column" spacing={0.5} flexGrow={1}>
               <Typography variant="h6">{t(product.titleKey)}</Typography>
               <Typography variant="body2" color="text.secondary">
@@ -71,7 +68,6 @@ export default function ProductsMenu({
                 href={product.demoLink}
                 target="_blank"
                 variant="text"
-                color="club"
                 endIcon={
                   <Icon
                     Component={i18n.dir() === 'ltr' ? ArrowRight : ArrowLeft}
@@ -80,6 +76,11 @@ export default function ProductsMenu({
                 sx={{
                   alignSelf: 'flex-start',
                   width: 'unset',
+                  color: product.color,
+
+                  ':hover': {
+                    bgcolor: lighten(product.color, 0.9),
+                  },
                 }}
               >
                 {t('products.menu.getDemo')}
@@ -89,7 +90,7 @@ export default function ProductsMenu({
             <Box sx={{ width: 69 }}>{product.LogoComponent}</Box>
           </Stack>
         ))}
-      </Box>
+      </Stack>
     </Menu>
   );
 }

src/data/products.tsx

@@ -1,4 +1,5 @@
 import Logo from '@/components/Logo';
+import { Box } from '@mui/material';
 import type { ReactElement } from 'react';
 
 export interface Product {
@@ -7,6 +8,7 @@ export interface Product {
   descriptionKey: string;
   LogoComponent: ReactElement;
   demoLink: string;
+  color: string;
 }
 
 export const productsData: Product[] = [
@@ -14,8 +16,29 @@ export const productsData: Product[] = [
     id: 'harmony-club',
     titleKey: 'products.harmonyClub.title',
     descriptionKey: 'products.harmonyClub.description',
-    LogoComponent: <Logo isIcon boxSx={{ width: 69, height: 55 }} />, // Reference the component
-    demoLink: 'https://club.business-harmony.com',
+    LogoComponent: (
+      <Box
+        component="img"
+        src="/src/assets/club-logo.png"
+        sx={{ width: 69, aspectRatio: '1 / 1', objectFit: 'contain' }}
+      />
+    ), // Reference the component
+    demoLink: 'https://business-harmony.com/club/',
+    color: '#ff5722',
+  },
+  {
+    id: 'harmony-book',
+    titleKey: 'products.harmonyBook.title',
+    descriptionKey: 'products.harmonyBook.description',
+    LogoComponent: (
+      <Box
+        component="img"
+        src="/src/assets/book-logo.png"
+        sx={{ width: 69, aspectRatio: '1 / 1', objectFit: 'contain', px: 0.5 }}
+      />
+    ), // Reference the component
+    demoLink: 'https://business-harmony.com/book/',
+    color: '#d3365d',
   },
   // add more products here
 ];