admin/src/scenes/develop/AssetsPresentationPage.jsx
/* eslint-disable prettier/prettier */
/* ------------------------------------------------------
Cette Page est générée automatiquement par le script /utils/generate-assets-presentation-page.js
------------------------------------------------------ */
import React, { useState, useEffect } from "react";
import Arrowup_1 from "../../assets/ArrowUp.jsx";
import Bin_1 from "../../assets/Bin.jsx";
import Clock_1 from "../../assets/Clock.jsx";
import Clocksvg_1 from "../../assets/Clock.svg";
import Close_1 from "../../assets/Close.jsx";
import Download_1 from "../../assets/Download.jsx";
import Duplicate_1 from "../../assets/Duplicate.jsx";
import Eyeslash_1 from "../../assets/EyeSlash.jsx";
import Fileicon_1 from "../../assets/FileIcon.jsx";
import Iconchangementcohorte_1 from "../../assets/IconChangementCohorte.jsx";
import Jva_roundpng_1 from "../../assets/JVA_round.png";
import Lineariceberg_1 from "../../assets/Linear-IceBerg.jsx";
import Linearmap_1 from "../../assets/Linear-Map.jsx";
import Pinlocation_1 from "../../assets/PinLocation.jsx";
import Questionmark_1 from "../../assets/QuestionMark.jsx";
import Roundwarning_1 from "../../assets/RoundWarning.jsx";
import Yellowwarning_1 from "../../assets/YellowWarning.jsx";
import Archivesvg_1 from "../../assets/archive.svg";
import Arrowpng_1 from "../../assets/arrow.png";
import Attachmentsvg_1 from "../../assets/attachment.svg";
import Authpng_1 from "../../assets/auth.png";
import Avatarjpg_1 from "../../assets/avatar.jpg";
import Binsvg_1 from "../../assets/bin.svg";
import Burgersvg_1 from "../../assets/burger.svg";
import Cancelpng_1 from "../../assets/cancel.png";
import Closesvg_1 from "../../assets/close.svg";
import Close_iconpng_1 from "../../assets/close_icon.png";
import Comment_1 from "../../assets/comment.jsx";
import Copysvg_1 from "../../assets/copy.svg";
import Crosssvg_1 from "../../assets/cross.svg";
import Dangersvg_1 from "../../assets/danger.svg";
import Deletesvg_1 from "../../assets/delete.svg";
import Dotssvg_1 from "../../assets/dots.svg";
import Downchevronsvg_1 from "../../assets/down-chevron.svg";
import Downloadsvg_1 from "../../assets/download.svg";
import Dropdown_arrowpng_1 from "../../assets/dropdown_arrow.png";
import Duplicatesvg_1 from "../../assets/duplicate.svg";
import Export_iconpng_1 from "../../assets/export_icon.png";
import Eye_copysvg_1 from "../../assets/eye copy.svg";
import Eyeslashsvg_1 from "../../assets/eye-slash.svg";
import Eyesvg_1 from "../../assets/eye.svg";
import Fc_logo_v2png_1 from "../../assets/fc_logo_v2.png";
import Filtersvg_1 from "../../assets/filter.svg";
import Frpng_2 from "../../assets/fr.png";
import Helpsvg_2 from "../../assets/help.svg";
import Imagesvg_4 from "../../assets/image.svg";
import Impersonatesvg_4 from "../../assets/impersonate.svg";
import Informationsvg_4 from "../../assets/information.svg";
import Leftsvg_4 from "../../assets/left.svg";
import Linksvg_4 from "../../assets/link.svg";
import Lockopensvg_4 from "../../assets/lock-open.svg";
import Locksvg_4 from "../../assets/lock.svg";
import Loginjpg_4 from "../../assets/login.jpg";
import Logoplaceholderpng_4 from "../../assets/logo-placeholder.png";
import Logosnupng_4 from "../../assets/logo-snu.png";
import Menusvg_4 from "../../assets/menu.svg";
import Messagessvg_4 from "../../assets/messages.svg";
import Newsvg_4 from "../../assets/new.svg";
import Notesvg_4 from "../../assets/note.svg";
import Notificationsvg_4 from "../../assets/notification.svg";
import Pencilsvg_4 from "../../assets/pencil.svg";
import Placeholderwhitesvg_4 from "../../assets/placeholder-white.svg";
import Placeholdersvg_4 from "../../assets/placeholder.svg";
import Plussvg_4 from "../../assets/plus.svg";
import Quotationsvg_5 from "../../assets/quotation.svg";
import Rangjpg_5 from "../../assets/rang.jpg";
import Reactivelistsortarrowsvg_5 from "../../assets/reactiveList-sort-arrow.svg";
import Rightgraysvg_5 from "../../assets/right-gray.svg";
import Rightsvg_5 from "../../assets/right.svg";
import Rubberstampnotvalidedsvg_5 from "../../assets/rubberStampNotValided.svg";
import Rubberstampvalidedsvg_5 from "../../assets/rubberStampValided.svg";
import Smilyjpg_5 from "../../assets/smily.jpg";
import Timbresvg_5 from "../../assets/timbre.svg";
import Togglecheckedsvg_5 from "../../assets/toggleChecked.svg";
import Toggleuncheckedsvg_5 from "../../assets/toggleUnchecked.svg";
import Toolspng_5 from "../../assets/tools.png";
import Flagfr_2 from "../../assets/flags/FlagFr.jsx";
import Citoyennete_3 from "../../assets/iconDomain/citoyennete.jsx";
import Culture_3 from "../../assets/iconDomain/culture.jsx";
import Defaultsvg_3 from "../../assets/iconDomain/default.svg";
import Defenseetmemoire_3 from "../../assets/iconDomain/defense-et-memoire.jsx";
import Education_3 from "../../assets/iconDomain/education.jsx";
import Environment_3 from "../../assets/iconDomain/environment.jsx";
import Preparationmilitaire_3 from "../../assets/iconDomain/preparation-militaire.jsx";
import Sante_3 from "../../assets/iconDomain/sante.jsx";
import Securite_3 from "../../assets/iconDomain/securite.jsx";
import Solidarite_3 from "../../assets/iconDomain/solidarite.jsx";
import Sport_3 from "../../assets/iconDomain/sport.jsx";
import Academiccap_4 from "../../assets/icons/AcademicCap.jsx";
import Addimage_4 from "../../assets/icons/AddImage.jsx";
import Adjustablewrench_4 from "../../assets/icons/AdjustableWrench.jsx";
import Arrowcircleright_4 from "../../assets/icons/ArrowCircleRight.jsx";
import Arrownarrowleft_4 from "../../assets/icons/ArrowNarrowLeft.jsx";
import Avion_4 from "../../assets/icons/Avion.jsx";
import Badgecheck_4 from "../../assets/icons/BadgeCheck.jsx";
import Bell_4 from "../../assets/icons/Bell.jsx";
import Bus_4 from "../../assets/icons/Bus.jsx";
import Calendar_4 from "../../assets/icons/Calendar.jsx";
import Check_4 from "../../assets/icons/Check.jsx";
import Checkcircle_4 from "../../assets/icons/CheckCircle.jsx";
import Chevrondown_4 from "../../assets/icons/ChevronDown.jsx";
import Chevronright_4 from "../../assets/icons/ChevronRight.jsx";
import Clipboardlist_4 from "../../assets/icons/ClipboardList.jsx";
import Cni_4 from "../../assets/icons/UploadedFileIcon.jsx";
import Cursorclick_4 from "../../assets/icons/CursorClick.jsx";
import Download_4 from "../../assets/icons/Download.jsx";
import Exclamationcircle_4 from "../../assets/icons/ExclamationCircle.jsx";
import Externallink_4 from "../../assets/icons/ExternalLink.jsx";
import Eye_4 from "../../assets/icons/Eye.jsx";
import Filter_4 from "../../assets/icons/Filter.jsx";
import Franceconnect_4 from "../../assets/icons/FranceConnect.jsx";
import Frenchmap_4 from "../../assets/icons/FrenchMap.jsx";
import Fusee_4 from "../../assets/icons/Fusee.jsx";
import Hammer_4 from "../../assets/icons/Hammer.jsx";
import History_4 from "../../assets/icons/History.jsx";
import Hourglass_4 from "../../assets/icons/HourGlass.jsx";
import Iceberg_4 from "../../assets/icons/Iceberg.jsx";
import Icebergcolor_4 from "../../assets/icons/IcebergColor.jsx";
import Informationcircle_4 from "../../assets/icons/InformationCircle.jsx";
import Mapcolor_4 from "../../assets/icons/MapColor.jsx";
import Menu_4 from "../../assets/icons/Menu.jsx";
import Minus_4 from "../../assets/icons/Minus.jsx";
import None_4 from "../../assets/icons/None.jsx";
import Paperclip_4 from "../../assets/icons/PaperClip.jsx";
import Pencil_4 from "../../assets/icons/Pencil.jsx";
import Pencilalt_4 from "../../assets/icons/PencilAlt.jsx";
import People_4 from "../../assets/icons/People.jsx";
import Phone_4 from "../../assets/icons/Phone.jsx";
import Plus_4 from "../../assets/icons/Plus.jsx";
import Profil_4 from "../../assets/icons/Profil.jsx";
import Refresh_4 from "../../assets/icons/Refresh.jsx";
import Screwdriver_4 from "../../assets/icons/Screwdriver.jsx";
import Selector_4 from "../../assets/icons/Selector.jsx";
import Shieldcheck_4 from "../../assets/icons/ShieldCheck.jsx";
import Simplefileicon_4 from "../../assets/icons/SimpleFileIcon.jsx";
import Speakerphone_4 from "../../assets/icons/SpeakerPhone.jsx";
import Sun_4 from "../../assets/icons/Sun.jsx";
import Switchhorizontal_4 from "../../assets/icons/SwitchHorizontal.jsx";
import Takeplace_4 from "../../assets/icons/TakePlace.jsx";
import Template_4 from "../../assets/icons/Template.jsx";
import Trash_4 from "../../assets/icons/Trash.jsx";
import Viewlist_4 from "../../assets/icons/ViewList.jsx";
import Warning_4 from "../../assets/icons/Warning.jsx";
import Xcircle_4 from "../../assets/icons/XCircle.jsx";
import Bafajpg_5 from "../../assets/programmes-engagement/bafa.jpg";
import Benevolejpg_5 from "../../assets/programmes-engagement/benevole.jpg";
import Brevetfederauxjpg_5 from "../../assets/programmes-engagement/brevet-federaux.jpg";
import Cecjpg_5 from "../../assets/programmes-engagement/cec.jpg";
import Corpseuropeensolidaritepng_5 from "../../assets/programmes-engagement/corps-europeen-solidarite.png";
import Defaultpng_5 from "../../assets/programmes-engagement/default.png";
import Erasmusjpg_5 from "../../assets/programmes-engagement/erasmus.jpg";
import Jeveuxaiderjpg_5 from "../../assets/programmes-engagement/je-veux-aider.jpg";
import Jeunebenevolejpg_5 from "../../assets/programmes-engagement/jeune-benevole.jpg";
import Juniorsassociationjpg_5 from "../../assets/programmes-engagement/juniors-association.jpg";
import Planmercredipng_5 from "../../assets/programmes-engagement/plan-mercredi.png";
import Reservearmeesjpg_5 from "../../assets/programmes-engagement/reserve-armees.jpg";
import Reserveeducationjpg_5 from "../../assets/programmes-engagement/reserve-education.jpg";
import Reservegendarmeriejpg_5 from "../../assets/programmes-engagement/reserve-gendarmerie.jpg";
import Reservepolicejpg_5 from "../../assets/programmes-engagement/reserve-police.jpg";
import Sapeurpompier2jpg_5 from "../../assets/programmes-engagement/sapeur-pompier-2.jpg";
import Sapeurpompierjpg_5 from "../../assets/programmes-engagement/sapeur-pompier.jpg";
import Serviceciviqueinternationaljpg_5 from "../../assets/programmes-engagement/service-civique-international.jpg";
import Serviceciviquejpg_5 from "../../assets/programmes-engagement/service-civique.jpg";
import Volontariatsolidariteinternationalejpg_5 from "../../assets/programmes-engagement/volontariat-solidarite-internationale.jpg";
export default function AssetsPresentationPage() {
const [filter, setFilter] = useState("");
useEffect(() => {
const filterText = filter && filter.trim().length > 0 ? filter.trim().toLowerCase() : "";
if (filterText && filterText.length > 0) {
document.querySelectorAll("[data-name]").forEach((element) => {
if (element.getAttribute("data-name").indexOf(filterText) >= 0) {
element.style.display = "block";
} else {
element.style.display = "none";
}
});
} else {
document.querySelectorAll("[data-name]").forEach((element) => {
element.style.display = "block";
});
}
}, [filter]);
function changeFilter(e) {
setFilter(e.target.value);
}
function resetFilter() {
setFilter("");
}
return (
<div className="p-8">
<div className="flex items-center justify-center">
<div className="mr-2 text-[#BBBBBB]">Filtre :</div>
<input type="text" value={filter} onChange={changeFilter} className="p-1 border-[1px] border-[#BBBBBB] rounded-md" />
<div
className="ml-2 w-[24px] h-[24px] text-[#BBBBBB] hover:border-[1px] hover:border-[#DDDDDD] rounded-md hover:text-[#808080] cursor-pointer flex items-center justify-center"
onClick={resetFilter}>
<div className="w-[10px] h-[10px]">
<Close_1 />
</div>
</div>
</div>
<div className="">
<div className="text-3xl font-bold text-[#000000] my-8">assets</div>
<div className="grid grid-cols-8 gap-4">
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="arrowup.jsx">
<Arrowup_1 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">ArrowUp.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="bin.jsx">
<Bin_1 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Bin.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="clock.jsx">
<Clock_1 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Clock.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="clock.svg">
<img src={Clocksvg_1} alt="Clock.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Clock.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="close.jsx">
<Close_1 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Close.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="download.jsx">
<Download_1 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Download.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="duplicate.jsx">
<Duplicate_1 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Duplicate.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="eyeslash.jsx">
<Eyeslash_1 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">EyeSlash.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="fileicon.jsx">
<Fileicon_1 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">FileIcon.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="iconchangementcohorte.jsx">
<Iconchangementcohorte_1 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">IconChangementCohorte.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="jva_round.png">
<img src={Jva_roundpng_1} alt="JVA_round.png" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">JVA_round.png</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="linear-iceberg.jsx">
<Lineariceberg_1 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Linear-IceBerg.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="linear-map.jsx">
<Linearmap_1 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Linear-Map.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="pinlocation.jsx">
<Pinlocation_1 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">PinLocation.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="questionmark.jsx">
<Questionmark_1 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">QuestionMark.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="roundwarning.jsx">
<Roundwarning_1 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">RoundWarning.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="yellowwarning.jsx">
<Yellowwarning_1 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">YellowWarning.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="archive.svg">
<img src={Archivesvg_1} alt="archive.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">archive.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="arrow.png">
<img src={Arrowpng_1} alt="arrow.png" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">arrow.png</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="attachment.svg">
<img src={Attachmentsvg_1} alt="attachment.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">attachment.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="auth.png">
<img src={Authpng_1} alt="auth.png" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">auth.png</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="avatar.jpg">
<img src={Avatarjpg_1} alt="avatar.jpg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">avatar.jpg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="bin.svg">
<img src={Binsvg_1} alt="bin.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">bin.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="burger.svg">
<img src={Burgersvg_1} alt="burger.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">burger.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="cancel.png">
<img src={Cancelpng_1} alt="cancel.png" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">cancel.png</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="close.svg">
<img src={Closesvg_1} alt="close.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">close.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="close_icon.png">
<img src={Close_iconpng_1} alt="close_icon.png" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">close_icon.png</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="comment.jsx">
<Comment_1 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">comment.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="copy.svg">
<img src={Copysvg_1} alt="copy.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">copy.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="cross.svg">
<img src={Crosssvg_1} alt="cross.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">cross.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="danger.svg">
<img src={Dangersvg_1} alt="danger.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">danger.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="delete.svg">
<img src={Deletesvg_1} alt="delete.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">delete.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="dots.svg">
<img src={Dotssvg_1} alt="dots.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">dots.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="down-chevron.svg">
<img src={Downchevronsvg_1} alt="down-chevron.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">down-chevron.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="download.svg">
<img src={Downloadsvg_1} alt="download.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">download.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="dropdown_arrow.png">
<img src={Dropdown_arrowpng_1} alt="dropdown_arrow.png" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">dropdown_arrow.png</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="duplicate.svg">
<img src={Duplicatesvg_1} alt="duplicate.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">duplicate.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="export_icon.png">
<img src={Export_iconpng_1} alt="export_icon.png" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">export_icon.png</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="eye copy.svg">
<img src={Eye_copysvg_1} alt="eye copy.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">eye copy.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="eye-slash.svg">
<img src={Eyeslashsvg_1} alt="eye-slash.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">eye-slash.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="eye.svg">
<img src={Eyesvg_1} alt="eye.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">eye.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="fc_logo_v2.png">
<img src={Fc_logo_v2png_1} alt="fc_logo_v2.png" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">fc_logo_v2.png</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="filter.svg">
<img src={Filtersvg_1} alt="filter.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">filter.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="fr.png">
<img src={Frpng_2} alt="fr.png" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">fr.png</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="help.svg">
<img src={Helpsvg_2} alt="help.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">help.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="image.svg">
<img src={Imagesvg_4} alt="image.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">image.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="impersonate.svg">
<img src={Impersonatesvg_4} alt="impersonate.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">impersonate.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="information.svg">
<img src={Informationsvg_4} alt="information.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">information.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="left.svg">
<img src={Leftsvg_4} alt="left.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">left.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="link.svg">
<img src={Linksvg_4} alt="link.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">link.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="lock-open.svg">
<img src={Lockopensvg_4} alt="lock-open.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">lock-open.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="lock.svg">
<img src={Locksvg_4} alt="lock.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">lock.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="login.jpg">
<img src={Loginjpg_4} alt="login.jpg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">login.jpg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="logo-placeholder.png">
<img src={Logoplaceholderpng_4} alt="logo-placeholder.png" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">logo-placeholder.png</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="logo-snu.png">
<img src={Logosnupng_4} alt="logo-snu.png" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">logo-snu.png</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="menu.svg">
<img src={Menusvg_4} alt="menu.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">menu.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="messages.svg">
<img src={Messagessvg_4} alt="messages.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">messages.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="new.svg">
<img src={Newsvg_4} alt="new.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">new.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="note.svg">
<img src={Notesvg_4} alt="note.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">note.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="notification.svg">
<img src={Notificationsvg_4} alt="notification.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">notification.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="pencil.svg">
<img src={Pencilsvg_4} alt="pencil.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">pencil.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="placeholder-white.svg">
<img src={Placeholderwhitesvg_4} alt="placeholder-white.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">placeholder-white.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="placeholder.svg">
<img src={Placeholdersvg_4} alt="placeholder.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">placeholder.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="plus.svg">
<img src={Plussvg_4} alt="plus.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">plus.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="quotation.svg">
<img src={Quotationsvg_5} alt="quotation.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">quotation.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="rang.jpg">
<img src={Rangjpg_5} alt="rang.jpg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">rang.jpg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="reactivelist-sort-arrow.svg">
<img src={Reactivelistsortarrowsvg_5} alt="reactiveList-sort-arrow.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">reactiveList-sort-arrow.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="right-gray.svg">
<img src={Rightgraysvg_5} alt="right-gray.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">right-gray.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="right.svg">
<img src={Rightsvg_5} alt="right.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">right.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="rubberstampnotvalided.svg">
<img src={Rubberstampnotvalidedsvg_5} alt="rubberStampNotValided.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">rubberStampNotValided.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="rubberstampvalided.svg">
<img src={Rubberstampvalidedsvg_5} alt="rubberStampValided.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">rubberStampValided.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="smily.jpg">
<img src={Smilyjpg_5} alt="smily.jpg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">smily.jpg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="timbre.svg">
<img src={Timbresvg_5} alt="timbre.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">timbre.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="togglechecked.svg">
<img src={Togglecheckedsvg_5} alt="toggleChecked.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">toggleChecked.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="toggleunchecked.svg">
<img src={Toggleuncheckedsvg_5} alt="toggleUnchecked.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">toggleUnchecked.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="tools.png">
<img src={Toolspng_5} alt="tools.png" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">tools.png</div>
</div>
</div>
<div className="">
<div className="">
<div className="text-3xl font-bold text-[#000000] my-8">flags</div>
<div className="grid grid-cols-8 gap-4">
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="flagfr.jsx">
<Flagfr_2 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">FlagFr.js</div>
</div>
</div>
<div className=""></div>
</div>
<div className="">
<div className="text-3xl font-bold text-[#000000] my-8">iconDomain</div>
<div className="grid grid-cols-8 gap-4">
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="citoyennete.jsx">
<Citoyennete_3 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">citoyennete.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="culture.jsx">
<Culture_3 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">culture.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="default.svg">
<img src={Defaultsvg_3} alt="default.svg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">default.svg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="defense-et-memoire.jsx">
<Defenseetmemoire_3 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">defense-et-memoire.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="education.jsx">
<Education_3 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">education.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="environment.jsx">
<Environment_3 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">environment.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="preparation-militaire.jsx">
<Preparationmilitaire_3 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">preparation-militaire.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="sante.jsx">
<Sante_3 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">sante.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="securite.jsx">
<Securite_3 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">securite.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="solidarite.jsx">
<Solidarite_3 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">solidarite.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="sport.jsx">
<Sport_3 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">sport.js</div>
</div>
</div>
<div className=""></div>
</div>
<div className="">
<div className="text-3xl font-bold text-[#000000] my-8">icons</div>
<div className="grid grid-cols-8 gap-4">
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="academiccap.jsx">
<Academiccap_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">AcademicCap.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="addimage.jsx">
<Addimage_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">AddImage.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="adjustablewrench.jsx">
<Adjustablewrench_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">AdjustableWrench.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="arrowcircleright.jsx">
<Arrowcircleright_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">ArrowCircleRight.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="arrownarrowleft.jsx">
<Arrownarrowleft_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">ArrowNarrowLeft.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="avion.jsx">
<Avion_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Avion.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="badgecheck.jsx">
<Badgecheck_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">BadgeCheck.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="bell.jsx">
<Bell_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Bell.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="bus.jsx">
<Bus_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Bus.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="calendar.jsx">
<Calendar_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Calendar.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="check.jsx">
<Check_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Check.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="checkcircle.jsx">
<Checkcircle_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">CheckCircle.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="chevrondown.jsx">
<Chevrondown_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">ChevronDown.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="chevronright.jsx">
<Chevronright_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">ChevronRight.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="clipboardlist.jsx">
<Clipboardlist_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">ClipboardList.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="cni.jsx">
<Cni_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Cni.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="cursorclick.jsx">
<Cursorclick_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">CursorClick.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="download.jsx">
<Download_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Download.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="exclamationcircle.jsx">
<Exclamationcircle_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">ExclamationCircle.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="externallink.jsx">
<Externallink_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">ExternalLink.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="eye.jsx">
<Eye_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Eye.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="filter.jsx">
<Filter_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Filter.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="franceconnect.jsx">
<Franceconnect_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">FranceConnect.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="frenchmap.jsx">
<Frenchmap_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">FrenchMap.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="fusee.jsx">
<Fusee_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Fusee.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="hammer.jsx">
<Hammer_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Hammer.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="history.jsx">
<History_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">History.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="hourglass.jsx">
<Hourglass_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">HourGlass.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="iceberg.jsx">
<Iceberg_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Iceberg.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="icebergcolor.jsx">
<Icebergcolor_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">IcebergColor.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="informationcircle.jsx">
<Informationcircle_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">InformationCircle.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="mapcolor.jsx">
<Mapcolor_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">MapColor.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="menu.jsx">
<Menu_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Menu.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="minus.jsx">
<Minus_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Minus.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="none.jsx">
<None_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">None.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="paperclip.jsx">
<Paperclip_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">PaperClip.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="pencil.jsx">
<Pencil_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Pencil.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="pencilalt.jsx">
<Pencilalt_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">PencilAlt.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="people.jsx">
<People_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">People.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="phone.jsx">
<Phone_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Phone.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="plus.jsx">
<Plus_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Plus.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="profil.jsx">
<Profil_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Profil.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="refresh.jsx">
<Refresh_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Refresh.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="screwdriver.jsx">
<Screwdriver_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Screwdriver.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="selector.jsx">
<Selector_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Selector.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="shieldcheck.jsx">
<Shieldcheck_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">ShieldCheck.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="simplefileicon.jsx">
<Simplefileicon_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">SimpleFileIcon.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="speakerphone.jsx">
<Speakerphone_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">SpeakerPhone.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="sun.jsx">
<Sun_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Sun.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="switchhorizontal.jsx">
<Switchhorizontal_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">SwitchHorizontal.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="takeplace.jsx">
<Takeplace_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">TakePlace.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="template.jsx">
<Template_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Template.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="trash.jsx">
<Trash_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Trash.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="viewlist.jsx">
<Viewlist_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">ViewList.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="warning.jsx">
<Warning_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">Warning.js</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="xcircle.jsx">
<Xcircle_4 />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">XCircle.js</div>
</div>
</div>
<div className=""></div>
</div>
<div className="">
<div className="text-3xl font-bold text-[#000000] my-8">programmes-engagement</div>
<div className="grid grid-cols-8 gap-4">
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="bafa.jpg">
<img src={Bafajpg_5} alt="bafa.jpg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">bafa.jpg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="benevole.jpg">
<img src={Benevolejpg_5} alt="benevole.jpg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">benevole.jpg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="brevet-federaux.jpg">
<img src={Brevetfederauxjpg_5} alt="brevet-federaux.jpg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">brevet-federaux.jpg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="cec.jpg">
<img src={Cecjpg_5} alt="cec.jpg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">cec.jpg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="corps-europeen-solidarite.png">
<img src={Corpseuropeensolidaritepng_5} alt="corps-europeen-solidarite.png" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">corps-europeen-solidarite.png</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="default.png">
<img src={Defaultpng_5} alt="default.png" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">default.png</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="erasmus.jpg">
<img src={Erasmusjpg_5} alt="erasmus.jpg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">erasmus.jpg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="je-veux-aider.jpg">
<img src={Jeveuxaiderjpg_5} alt="je-veux-aider.jpg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">je-veux-aider.jpg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="jeune-benevole.jpg">
<img src={Jeunebenevolejpg_5} alt="jeune-benevole.jpg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">jeune-benevole.jpg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="juniors-association.jpg">
<img src={Juniorsassociationjpg_5} alt="juniors-association.jpg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">juniors-association.jpg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="plan-mercredi.png">
<img src={Planmercredipng_5} alt="plan-mercredi.png" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">plan-mercredi.png</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="reserve-armees.jpg">
<img src={Reservearmeesjpg_5} alt="reserve-armees.jpg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">reserve-armees.jpg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="reserve-education.jpg">
<img src={Reserveeducationjpg_5} alt="reserve-education.jpg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">reserve-education.jpg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="reserve-gendarmerie.jpg">
<img src={Reservegendarmeriejpg_5} alt="reserve-gendarmerie.jpg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">reserve-gendarmerie.jpg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="reserve-police.jpg">
<img src={Reservepolicejpg_5} alt="reserve-police.jpg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">reserve-police.jpg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="sapeur-pompier-2.jpg">
<img src={Sapeurpompier2jpg_5} alt="sapeur-pompier-2.jpg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">sapeur-pompier-2.jpg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="sapeur-pompier.jpg">
<img src={Sapeurpompierjpg_5} alt="sapeur-pompier.jpg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">sapeur-pompier.jpg</div>
</div>
<div
className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center"
data-name="service-civique-international.jpg">
<img src={Serviceciviqueinternationaljpg_5} alt="service-civique-international.jpg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">service-civique-international.jpg</div>
</div>
<div className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center" data-name="service-civique.jpg">
<img src={Serviceciviquejpg_5} alt="service-civique.jpg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">service-civique.jpg</div>
</div>
<div
className="border-[1px] border-[#AAAAAA] bg-[#DDDDDD] p-4 relative mb-8 rounded-md flex items-center justify-center"
data-name="volontariat-solidarite-internationale.jpg">
<img src={Volontariatsolidariteinternationalejpg_5} alt="volontariat-solidarite-internationale.jpg" crossOrigin="anonymous" className="" />
<div className="absolute top-[100%] left-[0] right-[0] mt-1 text-sm font-regular text-[#808080]">volontariat-solidarite-internationale.jpg</div>
</div>
</div>
<div className=""></div>
</div>
</div>
</div>
</div>
);
}