feat(#47): add map preview

app/accueil/page.tsx

@@ -2,6 +2,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 
 import {Slider} from '../../src/components/blocs/slider/Slider';
+import {MapPreview} from '../../src/components/map/MapPreview';
 import {Navbar} from '../../src/components/navbar/Navbar';
 import {Onboarding} from '../../src/components/onboarding/Onboarding';
 import {Profile} from '../../src/components/profile/Profile';
@@ -64,6 +65,7 @@ export default function Home() {
             link="/accueil#"
           />
           <Slider title="Actualités" items={tempData} link="/accueil#" />
+          <MapPreview />
         </div>
       </div>
     </>

src/components/map/MapPreview.tsx

@@ -0,0 +1,45 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+import styles from './mapPreview.module.css';
+
+const filtersImageUrls = [
+  '/icons/map/filter/map_restaurant.svg',
+  '/icons/map/filter/map_cle.svg',
+  '/icons/map/filter/map_coeur.svg',
+  '/icons/map/filter/map_point_interrogation.svg',
+  '/icons/map/filter/map_localisation.svg',
+  '/icons/map/filter/map_appareil_photo.svg',
+  '/icons/map/filter/map_supermarche.svg',
+];
+
+export const MapPreview = () => {
+  return (
+    <div className={styles.previewContainer}>
+      <h4>Se repérer au Japon</h4>
+
+      <div className={styles.mapContainer}>
+        <Link href="#">
+          <Image
+            src="/illustrations/map.svg"
+            width={315}
+            height={200}
+            alt="Carte"
+          />
+        </Link>
+        <div className={styles.filters}>
+          {filtersImageUrls.map((url, id) => (
+            <Image
+              key={id}
+              className={styles.filter}
+              src={url}
+              alt="filtre"
+              width={25}
+              height={25}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/map/mapPreview.module.css

@@ -0,0 +1,37 @@
+.previewContainer {
+  text-align: center;
+
+  h4 {
+    font-size: 16px;
+    margin-bottom: 20px;
+  }
+
+  .mapContainer,
+  a {
+    display: block;
+    position: relative;
+    width: max-content;
+    height: max-content;
+
+    .filters {
+      position: absolute;
+      width: max-content;
+      height: max-content;
+      bottom: 0;
+      left: 50%;
+      transform: translate(-50%, 50%);
+      display: flex;
+      justify-content: space-between;
+      gap: 15px;
+      flex-wrap: nowrap;
+      padding: 15px 10px;
+      border-radius: 15px;
+      background: white;
+      box-shadow: 0 8px 28px 0 rgba(20, 20, 43, 0.1);
+
+      .filter:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}