Store ad on machines list

app/frontend/src/javascript/components/machines/machines-list.tsx

@@ -7,6 +7,8 @@ import MachineAPI from '../../api/machine';
 import { MachineCard } from './machine-card';
 import { MachinesFilters } from './machines-filters';
 import { User } from '../../models/user';
+import { useTranslation } from 'react-i18next';
+import { FabButton } from '../base/fab-button';
 
 declare const Application: IApplication;
 
@@ -25,6 +27,7 @@ interface MachinesListProps {
  * This component shows a list of all machines and allows filtering on that list.
  */
 export const MachinesList: React.FC<MachinesListProps> = ({ onError, onSuccess, onShowMachine, onReserveMachine, onLoginRequested, onEnrollRequested, user, canProposePacks }) => {
+  const { t } = useTranslation('public');
   // shown machines
   const [machines, setMachines] = useState<Array<Machine>>(null);
   // we keep the full list of machines, for filtering
@@ -56,10 +59,30 @@ export const MachinesList: React.FC<MachinesListProps> = ({ onError, onSuccess,
     setMachines(allMachines.filter(m => !!m.disabled === !status));
   };
 
+  /**
+   * Go to store
+   */
+  const linkToStore = (): void => {
+    window.location.href = '/#!/store';
+  };
+
+  // TODO: Conditionally display the store ad
   return (
     <div className="machines-list">
       <MachinesFilters onStatusSelected={handleFilterByStatus} />
       <div className="all-machines">
+        {false &&
+          <div className='store-ad' onClick={() => linkToStore}>
+            <div className='content'>
+              <h3>{t('app.public.machines_list.store_ad.title')}</h3>
+              <p>{t('app.public.machines_list.store_ad.buy')}</p>
+              <p className='sell'>{t('app.public.machines_list.store_ad.sell')}</p>
+            </div>
+            <FabButton icon={<i className="fa fa-cart-plus fa-lg" />} className="cta" onClick={linkToStore}>
+              {t('app.public.machines_list.store_ad.link')}
+            </FabButton>
+          </div>
+        }
         {machines && machines.map(machine => {
           return <MachineCard key={machine.id}
             user={user}

app/frontend/src/stylesheets/modules/machines/machine-card.scss

@@ -1,11 +1,9 @@
 .machine-card {
   background-color: #fff;
   border: 1px solid #ddd;
-  border-radius: 6px;
-  margin: 0 15px 30px;
-  width: 30%;
-  min-width: 263px;
+  border-radius: var(--border-radius);
   position: relative;
+  overflow: hidden;
 
   &.loading::before {
     content: '';
@@ -37,18 +35,6 @@
     100% { transform: rotate(360deg);}
   }
 
-  @media screen and (max-width: 1219px) {
-    width: 45%;
-    min-width: 195px;
-    margin: 0 auto 30px;
-  }
-
-  @media screen and (max-width: 674px) {
-    width: 95%;
-    max-width: 400px;
-    margin: 0 auto 30px;
-  }
-
   .machine-picture {
     height: 250px;
     background-size: cover;

app/frontend/src/stylesheets/modules/machines/machines-list.scss

@@ -1,6 +1,44 @@
-.machines-list {
+.machines-list { 
   .all-machines {
-    display: flex;
-    flex-wrap: wrap;
+    max-width: 1600px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+    gap: 3.2rem;
+
+    .store-ad {
+      display: flex;
+      flex-direction: column;
+      background-color: var(--main);
+      border-radius: var(--border-radius);
+      overflow: hidden;
+      color: var(--main-text-color);
+      .content {
+        flex: 1;
+        padding: 3.2rem;
+        display: flex;
+        flex-direction: column;
+        h3 {
+          margin: 0 0 2.4rem;
+          @include title-lg;
+          color: var(--main-text-color) !important;
+        }
+        p { margin: 0; }
+        .sell {
+          margin-top: auto;
+          @include text-lg(500);
+        }
+      }
+      .cta {
+        margin-top: auto;
+        width: 100%;
+        height: 5.4rem;
+        justify-content: center;
+        border: none;
+        border-radius: 0;
+        background-color: var(--gray-hard-darkest);
+        color: var(--main-text-color);
+      }
+    }
   }
 }

config/locales/app.public.en.yml

@@ -219,6 +219,11 @@ en:
         new_availability: "Open reservations"
         book: "Book"
         _or_the_: " or the "
+        store_ad:
+          title: "Discover our store"
+          buy: "Check out products from members' projects along with consumable related to the different machines and tools of the workshop."
+          sell: "If you also want to sell your creations, please let us know."
+          link: "To the store"
       machines_filters:
         show_machines: "Show machines"
         status_enabled: "Enabled"