✨(front) improve pages

Based on recent feedbacks, we did various improvements.

src/pages/products/index.tsx

@@ -46,7 +46,7 @@ const ProductsDetails = () => {
           .filter(([, v]) => v.displayDetails)
           .map(
             (
-              [, { logo, screenshot, name, url, caption, description, items }],
+              [, { logo, screenshot, keepRawScreenshot, name, url, caption, description, items }],
               index
             ) => (
               <div className="flex gap-6 flex-col md:flex-row" key={name}>
@@ -79,11 +79,18 @@ const ProductsDetails = () => {
                 </div>
                 <div
                   className={
-                    'md:w-1/2 ' +
+                    'md:w-1/2 flex ' +
                     (index % 2 === 0 ? 'md:order-2' : 'md:order-1')
                   }
                 >
-                  <Image src={screenshot!} alt="Tchap screenshot"></Image>
+                  {keepRawScreenshot ? (
+                    <Image src={screenshot!} alt={name + " screenshot"}></Image>
+                  ) : (
+                    <div className="flex justify-center items-center">
+                      <Image src={screenshot!} width={500} alt={name + " screenshot"} className="w-4/6 border-8 border-white rounded-lg shadow-2xl"></Image>
+                    </div>
+                  )}
+
                 </div>
               </div>
             )

src/utils/products.tsx

@@ -1,19 +1,19 @@
 import TchapLogo from '@/assets/products/tchap.svg'
 import TchapScreenshot from '@/assets/products/tchap_screenshot.png'
 import ResanaLogo from '@/assets/products/resana.svg'
-import ResanaScreenshot from '@/assets/products/resana_screenshot.png'
+import ResanaScreenshot from '@/assets/products/resana_screenshot.webp'
 import WebinaireLogo from '@/assets/products/webinaire.svg'
-import WebinaireScreenshot from '@/assets/products/webinaire_screenshot.png'
+import WebinaireScreenshot from '@/assets/products/webinaire_screenshot.webp'
 import VisioLogo from '@/assets/products/visio.svg'
-import VisioScreenshot from '@/assets/products/visio_screenshot.png'
+import VisioScreenshot from '@/assets/products/visio_screenshot.webp'
 import PadLogo from '@/assets/products/pad.svg'
 import PadScreenshot from '@/assets/products/pad_screenshot.png'
 import GristLogo from '@/assets/products/grist.svg'
 import GristScreenshot from '@/assets/products/grist_screenshot.png'
 import FranceTransfertLogo from '@/assets/products/france_transfert.svg'
 import FranceTransfertScreenshot from '@/assets/products/france_transfert_screenshot.png'
 import MessagerieLogo from '@/assets/products/messagerie.svg'
-import MessagerieScreenshot from '@/assets/products/messagerie_screenshot.png'
+import MessagerieScreenshot from '@/assets/products/messagerie_screenshot.webp'
 import { StaticImageData } from 'next/image'
 import AudioConfSvg from '@/assets/products/audioconf.svg'
 import DocsSvg from '@/assets/products/docs.svg'
@@ -25,6 +25,7 @@ export const PRODUCTS: Record<
   {
     logo: StaticImageData
     screenshot?: StaticImageData
+    keepRawScreenshot?: boolean
     name?: string
     url?: string
     caption?: string
@@ -37,6 +38,7 @@ export const PRODUCTS: Record<
     displayDetails: true,
     logo: TchapLogo,
     screenshot: TchapScreenshot,
+    keepRawScreenshot: true,
     name: 'Tchap',
     url: 'https://tchap.beta.gouv.fr/',
     caption: 'la messagerie instantanée de la sphère publique',