preview (image)
<div class="dashboard relative overflow-hidden bg-text">
<img class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-[55%] h-full w-full object-cover" <?= renderImageUrl('background-dashboard.png', 'backgrounds', 'blur') ?> alt="">
<div class="relative min-h-[88px] md:min-h-[197px] md:pt-12">
<div class="hidden md:flex items-center">
<div class="bg-secondary h-[48px] flex gap-5 items-center rounded-r-button w-full md:pl-10 pl-5 text-white">
<div class="bg-white rounded-full w-9 flex justify-center items-center bg-opacity-20">
<?= icon('dashboard', 'h-9'); ?>
</div>
<span class="text-2.75xl font-semibold">Tableau de bord</span>
</div>
<div class="flex gap-1 justify-end px-5 md:px-10">
<button class="btn btn-icon bg-[#1F2D41] opacity-90 w-fit max-h-[48px] flex gap-5">
<?= icon('chevron-left', 'w-3.5 text-white'); ?>
<?= icon('copilote', 'w-20'); ?>
</button>
<button class="btn btn-icon bg-[#1F2D41] opacity-90 max-w-[48px] aspect-square">
<?= icon('phone-ring', 'w-6.25 text-white'); ?>
</button>
<button class="btn btn-icon bg-[#1F2D41] opacity-90 max-w-[48px] aspect-square">
<?= icon('calendar-squared', 'w-6.25 text-white'); ?>
</button>
</div>
</div>
</div>
<div class="dashboard__wrapper relative text-white">
<div class="dashboard__container">
<div class="dashboard__content relative">
<div class="px-3 md:px-14 pt-7 md:pt-8.5 pb-7.5 xl:pb-0 flex flex-col">
<div class="dashboard__name text-center pb-6 xl:order-1 xl:py-8.75 relative">
<svg class="hidden xl:block xl:absolute w-full bottom-[-5px]" width="1114" height="96" viewBox="0 0 1114 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M137.4 1C68.7001 1 17.675 63.6667 0.5 95H1113C1113 95 1073.5 1 999.138 1H543H137.4Z" fill="url(#paint0_linear_3724_99833)" stroke="url(#paint1_linear_3724_99833)" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_3724_99833" x1="556.75" y1="95" x2="556.75" y2="1" gradientUnits="userSpaceOnUse">
<stop stop-color="#18263C"/>
<stop offset="1" stop-color="#131F33"/>
</linearGradient>
<linearGradient id="paint1_linear_3724_99833" x1="556.75" y1="95" x2="556.75" y2="1" gradientUnits="userSpaceOnUse">
<stop stop-color="#213452" stop-opacity="0.36"/>
<stop offset="1" stop-color="#213A63"/>
</linearGradient>
</defs>
</svg>
<span class="relative block text-lg text-primary-light font-medium xl:text-[22px] xl:-mb-1.25">Bienvenue Alexandre</span>
</div>
<div class="flex flex-wrap xl:flex-nowrap justify-between">
<div class="w-1/2 xl:w-auto"><?php include renderTemplate('account/dashboard/dashboard-compteurs', 'left'); ?></div>
<div class="order-[-1] w-full xl:w-auto xl:w-auto xl:order-none xl:flex-1 flex gap-1.5 md:gap-2.25 mb-11 xl:mb-0">
<div class="flex-1 flex flex-col gap-1.5">
<div class="dashboard-navigation-item dashboard-navigation-item--left min-h-[152px] xl:min-h-0">
<a href="#" class="h-full text-right flex flex-col justify-center xl:gap-2.75 py-7.5 xl:py-6.5 pr-5 md:px-9">
<span class="text-white text-base md:text-xl font-semibold">Carnet de santé</span>
<span class="text-primary-bright text-sm font-medium">2 véhicules suivis</span>
</a>
</div>
<div class="dashboard-navigation-item dashboard-navigation-item--left min-h-[152px] xl:min-h-0">
<a href="#" class="h-full text-right flex flex-col justify-center xl:gap-2.75 py-7.5 xl:py-6.5 pr-5 md:px-9">
<span class="text-white text-base md:text-xl font-semibold">Mes favoris</span>
<span class="text-primary-bright text-sm font-medium">15 favoris</span>
</a>
</div>
<div class="dashboard-navigation-item dashboard-navigation-item--left min-h-[152px] xl:min-h-0">
<a href="#" class="h-full text-right flex flex-col justify-center xl:gap-2.75 py-7.5 xl:py-6.5 pr-5 md:px-9">
<span class="text-white text-base md:text-xl font-semibold">Mes RDV</span>
<span class="text-primary-bright text-sm font-medium">2 RDV à venir</span>
</a>
</div>
<div class="dashboard-navigation-item dashboard-navigation-item--left min-h-[152px] xl:min-h-0">
<a href="#" class="h-full text-right flex flex-col justify-center xl:gap-2.75 py-7.5 xl:py-6.5 pr-5 md:px-9">
<span class="text-white text-base md:text-xl font-semibold">Mon coffre-fort</span>
<span class="text-primary-bright text-sm font-medium">Consulter mes documents</span>
</a>
</div>
</div>
<div class="flex-1 flex flex-col gap-1.5">
<div class="dashboard-navigation-item dashboard-navigation-item--right min-h-[152px] xl:min-h-0">
<a href="#" class="h-full flex flex-col justify-center xl:gap-2.75 py-7.5 xl:py-6.5 pl-5 md:px-9">
<span class="text-white text-base md:text-xl font-semibold">Mes projets</span>
<span class="text-primary-bright text-sm font-medium">2 projets</span>
</a>
</div>
<div class="dashboard-navigation-item dashboard-navigation-item--right min-h-[152px] xl:min-h-0">
<a href="#" class="h-full flex flex-col justify-center xl:gap-2.75 py-7.5 xl:py-6.5 pl-5 md:px-9">
<span class="text-white text-base md:text-xl font-semibold">Mes comparatifs</span>
<span class="text-primary-bright text-sm font-medium">3 véhicules comparés</span>
</a>
</div>
<div class="dashboard-navigation-item dashboard-navigation-item--right min-h-[152px] xl:min-h-0">
<a href="#" class="h-full flex flex-col justify-center xl:gap-2.75 py-7.5 xl:py-6.5 pl-5 md:px-9">
<span class="text-white text-base md:text-xl font-semibold">Mes messages</span>
<span class="text-primary-bright text-sm font-medium">2 nouveaux messages</span>
</a>
</div>
<div class="dashboard-navigation-item dashboard-navigation-item--right min-h-[152px] xl:min-h-0">
<a href="#" class="h-full flex flex-col justify-center xl:gap-2.75 py-7.5 xl:py-6.5 pl-5 md:px-9">
<span class="text-white text-base md:text-xl font-semibold">Mes informations</span>
<span class="text-primary-bright text-sm font-medium">Editer mes informations</span>
</a>
</div>
</div>
</div>
<div class="w-1/2 xl:w-auto"><?php include renderTemplate('account/dashboard/dashboard-compteurs', 'right'); ?></div>
</div>
<div class="dashboard__icons hidden xl:flex gap-10 justify-center pt-10 pb-7.5">
<svg width="34" height="28" viewBox="0 0 34 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.542 1.4917L20.6088 0.493937L20.5754 0.491699H20.542V1.4917ZM20.542 24.825V25.825H20.5754L20.6088 25.8228L20.542 24.825ZM10.8571 6.5062C11.3254 6.21334 11.4675 5.59635 11.1747 5.1281C10.8818 4.65986 10.2648 4.51768 9.79659 4.81053L10.8571 6.5062ZM0.469736 10.6439C0.00149119 10.9367 -0.140689 11.5537 0.152167 12.022C0.445024 12.4902 1.06202 12.6324 1.53026 12.3395L0.469736 10.6439ZM10.8571 14.0062C11.3254 13.7133 11.4675 13.0963 11.1747 12.6281C10.8818 12.1599 10.2648 12.0177 9.79659 12.3105L10.8571 14.0062ZM0.469736 18.1439C0.00149119 18.4367 -0.140689 19.0537 0.152167 19.522C0.445024 19.9902 1.06202 20.1324 1.53026 19.8395L0.469736 18.1439ZM10.8571 21.5062C11.3254 21.2133 11.4675 20.5963 11.1747 20.1281C10.8818 19.6599 10.2648 19.5177 9.79659 19.8105L10.8571 21.5062ZM0.469736 25.6439C0.00149113 25.9367 -0.140689 26.5537 0.152167 27.022C0.445024 27.4902 1.06202 27.6324 1.53026 27.3395L0.469736 25.6439ZM20.4751 2.48946C22.3648 2.61609 25.2912 3.49066 27.7245 5.26798C30.1318 7.02629 31.9778 9.60124 31.9778 13.1584H33.9778C33.9778 8.79883 31.6785 5.67933 28.9042 3.65292C26.1559 1.64551 22.8644 0.645083 20.6088 0.493937L20.4751 2.48946ZM20.542 0.491699C18.8425 0.491699 17.3208 0.885284 16.3282 2.34647C15.4214 3.68152 15.1006 5.72915 15.1006 8.57503H17.1006C17.1006 5.75424 17.4461 4.26021 17.9826 3.47026C18.4336 2.80645 19.1325 2.4917 20.542 2.4917V0.491699ZM20.6088 25.8228C22.8644 25.6716 26.1559 24.6712 28.9042 22.6638C31.6785 20.6374 33.9778 17.5179 33.9778 13.1584H31.9778C31.9778 16.7155 30.1318 19.2904 27.7245 21.0488C25.2912 22.8261 22.3648 23.7006 20.4751 23.8273L20.6088 25.8228ZM20.542 23.825C19.1325 23.825 18.4336 23.5103 17.9826 22.8465C17.4461 22.0565 17.1006 20.5625 17.1006 17.7417H15.1006C15.1006 20.5876 15.4214 22.6352 16.3282 23.9703C17.3208 25.4314 18.8425 25.825 20.542 25.825V23.825ZM17.1006 17.7417V8.57503H15.1006V17.7417H17.1006ZM9.79659 4.81053L0.469736 10.6439L1.53026 12.3395L10.8571 6.5062L9.79659 4.81053ZM9.79659 12.3105L0.469736 18.1439L1.53026 19.8395L10.8571 14.0062L9.79659 12.3105ZM9.79659 19.8105L0.469736 25.6439L1.53026 27.3395L10.8571 21.5062L9.79659 19.8105Z" fill="#0260E7"/>
</svg>
<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.8411 1.74585C16.8411 1.19356 16.3934 0.74585 15.8411 0.74585C15.2888 0.74585 14.8411 1.19356 14.8411 1.74585V6.01445C14.8411 6.56673 15.2888 7.01445 15.8411 7.01445C16.3934 7.01445 16.8411 6.56673 16.8411 6.01445V1.74585ZM6.74561 5.10228C6.35523 4.71162 5.72206 4.7114 5.3314 5.10179C4.94074 5.49218 4.94052 6.12534 5.33091 6.516L8.34717 9.53435C8.73756 9.92501 9.37072 9.92523 9.76138 9.53484C10.152 9.14445 10.1523 8.51129 9.76187 8.12063L6.74561 5.10228ZM26.3513 6.516C26.7417 6.12534 26.7415 5.49217 26.3508 5.10179C25.9601 4.7114 25.327 4.71162 24.9366 5.10228L21.9203 8.12063C21.5299 8.51129 21.5302 9.14445 21.9208 9.53484C22.3115 9.92523 22.9446 9.92501 23.335 9.53435L26.3513 6.516ZM1.97778 14.6188C1.4255 14.6188 0.977783 15.0665 0.977783 15.6188C0.977783 16.1711 1.4255 16.6188 1.97778 16.6188H6.24341C6.7957 16.6188 7.24341 16.1711 7.24341 15.6188C7.24341 15.0665 6.7957 14.6188 6.24341 14.6188H1.97778ZM25.4388 14.6188C24.8865 14.6188 24.4388 15.0665 24.4388 15.6188C24.4388 16.1711 24.8865 16.6188 25.4388 16.6188H29.7044C30.2567 16.6188 30.7044 16.1711 30.7044 15.6188C30.7044 15.0665 30.2567 14.6188 29.7044 14.6188H25.4388ZM9.76187 23.1169C10.1523 22.7263 10.152 22.0931 9.76138 21.7027C9.37072 21.3123 8.73755 21.3126 8.34717 21.7032L5.33091 24.7216C4.94052 25.1122 4.94074 25.7454 5.3314 26.1358C5.72206 26.5262 6.35523 26.526 6.74561 26.1353L9.76187 23.1169ZM23.335 21.7032C22.9446 21.3126 22.3115 21.3123 21.9208 21.7027C21.5302 22.0931 21.5299 22.7263 21.9203 23.1169L24.9366 26.1353C25.327 26.526 25.9601 26.5262 26.3508 26.1358C26.7415 25.7454 26.7417 25.1122 26.3513 24.7216L23.335 21.7032ZM16.8411 25.2231C16.8411 24.6708 16.3934 24.2231 15.8411 24.2231C15.2888 24.2231 14.8411 24.6708 14.8411 25.2231V29.4917C14.8411 30.044 15.2888 30.4917 15.8411 30.4917C16.3934 30.4917 16.8411 30.044 16.8411 29.4917V25.2231ZM20.2396 15.6188C20.2396 18.0517 18.269 20.0217 15.8412 20.0217C13.4133 20.0217 11.4427 18.0517 11.4427 15.6188C11.4427 13.1858 13.4133 11.2159 15.8412 11.2159C18.269 11.2159 20.2396 13.1858 20.2396 15.6188ZM22.2396 15.6188C22.2396 19.155 19.3749 22.0217 15.8412 22.0217C12.3074 22.0217 9.44271 19.155 9.44271 15.6188C9.44271 12.0825 12.3074 9.21587 15.8412 9.21587C19.3749 9.21587 22.2396 12.0825 22.2396 15.6188Z" fill="#01AFAF"/>
</svg>
<svg width="35" height="26" viewBox="0 0 35 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.9697 14.4824C21.1459 15.5414 20.0911 16.3983 18.8858 16.9877C17.6805 17.5771 16.3566 17.8835 15.0149 17.8835H3.9071C3.32289 17.8835 2.76261 17.6514 2.34952 17.2383C1.93642 16.8252 1.70435 16.2649 1.70435 15.6807V7.97107C1.70435 7.38686 1.93642 6.82658 2.34952 6.41348C2.76261 6.00039 3.32289 5.76831 3.9071 5.76831H13.0471C13.5473 5.76845 14.0326 5.93884 14.4231 6.25145L18.4453 9.46306C18.7198 9.68265 19.0428 9.83336 19.3875 9.90259C19.7321 9.97182 20.0883 9.95757 20.4263 9.86103L27.036 7.97107L21.9697 14.4824Z" stroke="#F88F44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5154 1.36279V5.7683" stroke="#F88F44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.10985 1.36279H14.9209" stroke="#F88F44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M27.0363 7.97107L30.3404 9.07245" stroke="#F88F44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M33.6444 21.3257C33.6444 22.1654 33.3109 22.9707 32.7171 23.5644C32.1234 24.1582 31.318 24.4917 30.4783 24.4917C29.6386 24.4917 28.8333 24.1582 28.2396 23.5644C27.6458 22.9707 27.3122 22.1654 27.3122 21.3257C27.3122 19.5723 29.4225 16.0479 30.4783 16.0479C31.5342 16.0479 33.6444 19.5723 33.6444 21.3257Z" stroke="#F88F44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<svg width="39" height="28" viewBox="0 0 39 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.2833 9.82503L19.6318 26.4917M19.6318 19.2C15.5423 19.2 11.6221 19.9138 7.99282 21.2217L1.64429 4.64723C7.24787 2.60644 13.3076 1.4917 19.6318 1.4917C25.956 1.4917 32.0157 2.60644 37.6193 4.64723L31.2708 21.2217C27.6414 19.9138 23.7213 19.2 19.6318 19.2Z" stroke="#C4DCFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<svg width="37" height="33" viewBox="0 0 37 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M35.6744 21.8171C35.6744 25.5469 34.2483 28.9436 31.9116 31.4917L28.7087 28.4061M35.6744 21.8171C35.6744 17.8312 34.0457 14.2257 31.4176 11.6298M35.6744 21.8171H31.8046M7.0376 21.8171C7.0376 25.3956 8.35031 28.6674 10.5205 31.1774L13.6163 28.2814M7.0376 21.8171C7.0376 17.8312 8.66627 14.2257 11.2944 11.6298C13.8804 9.07554 17.4341 7.49872 21.356 7.49872M7.0376 21.8171H10.9074M21.356 7.49872C25.2779 7.49872 28.8316 9.07554 31.4176 11.6298M21.356 7.49872V10.5946M31.4176 11.6298L28.9531 13.9351M21.356 21.4301L14.7773 14.8514" stroke="#FF8E3D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.96986 4.78963L7.08348 3.67601L9.0184 9.48077L3.21364 7.54585L4.32802 6.43147L1.61938 3.72283L3.26122 2.08099L5.96986 4.78963Z" fill="#8697B0"/>
<path d="M5.96986 4.78963L5.26275 5.49674L5.96986 6.20384L6.67696 5.49674L5.96986 4.78963ZM7.08348 3.67601L8.03216 3.35978L7.5205 1.82478L6.37637 2.9689L7.08348 3.67601ZM9.0184 9.48077L8.70217 10.4295L10.5995 11.0619L9.96708 9.16454L9.0184 9.48077ZM3.21364 7.54585L2.50653 6.83874L1.36241 7.98286L2.89741 8.49453L3.21364 7.54585ZM4.32802 6.43147L5.03513 7.13857L5.74224 6.43147L5.03513 5.72436L4.32802 6.43147ZM1.61938 3.72283L0.912278 3.01572L0.205171 3.72283L0.912278 4.42993L1.61938 3.72283ZM3.26122 2.08099L3.96833 1.37389L3.26122 0.66678L2.55411 1.37389L3.26122 2.08099ZM6.67696 5.49674L7.79059 4.38312L6.37637 2.9689L5.26275 4.08252L6.67696 5.49674ZM6.1348 3.99224L8.06972 9.797L9.96708 9.16454L8.03216 3.35978L6.1348 3.99224ZM9.33463 8.53209L3.52987 6.59717L2.89741 8.49453L8.70217 10.4295L9.33463 8.53209ZM3.92075 8.25295L5.03513 7.13857L3.62092 5.72436L2.50653 6.83874L3.92075 8.25295ZM5.03513 5.72436L2.32649 3.01572L0.912278 4.42993L3.62092 7.13857L5.03513 5.72436ZM2.32649 4.42993L3.96833 2.7881L2.55411 1.37389L0.912278 3.01572L2.32649 4.42993ZM2.55411 2.7881L5.26275 5.49674L6.67696 4.08252L3.96833 1.37389L2.55411 2.7881Z" fill="#FF8E3D"/>
</svg>
<svg width="34" height="30" viewBox="0 0 34 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.77184 1.2644C5.77184 1.71968 5.77184 3.72292 5.77184 4.45136C5.77184 5.36193 1.67432 8.54889 1.67432 14.9228C1.67432 20.0219 5.01304 24.3319 6.6824 25.8495H27.6253C29.2946 24.3319 32.6334 20.0219 32.6334 14.9228C32.6334 8.54889 28.5358 5.36193 28.5358 4.45136V1.2644" stroke="#FF6745" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.1539 29.4917V25.8495M11.6906 29.4917V25.8495M22.6173 29.4917V25.8495M27.6254 29.4917V25.8495M6.68248 29.4917V25.8495" stroke="#FF6745" stroke-width="2"/>
<path d="M17.1538 2.63019V13.5569M17.1538 19.4756V19.0203" stroke="#FF6745" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_6515_978)">
<path d="M9.51186 27.3869C12.3405 27.3869 14.6335 25.0938 14.6335 22.2652C14.6335 19.4366 12.3405 17.1436 9.51186 17.1436C6.68325 17.1436 4.3902 19.4366 4.3902 22.2652C4.3902 25.0938 6.68325 27.3869 9.51186 27.3869Z" stroke="#0260E7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.6347 22.2652V2.77018C14.634 2.58184 14.6789 2.39613 14.7656 2.22891C14.8522 2.06169 14.9781 1.91794 15.1324 1.80995C15.2867 1.70196 15.4649 1.63293 15.6517 1.60876C15.8385 1.5846 16.0283 1.60602 16.205 1.67118C18.2087 2.30096 20.0369 3.39147 21.5431 4.85528C23.0492 6.31909 24.1914 8.11547 24.878 10.1004" stroke="#0260E7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_6515_978">
<rect width="28" height="28" fill="white" transform="translate(0.633545 0.491699)"/>
</clipPath>
</defs>
</svg>
<svg width="34" height="26" viewBox="0 0 34 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.1763 6.53363V14.4768" stroke="#FF6745" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.1762 23.8011C23.0888 23.8011 27.882 19.0079 27.882 13.0953C27.882 7.18255 23.0888 2.38934 17.1762 2.38934C11.2634 2.38934 6.47021 7.18255 6.47021 13.0953C6.47021 19.0079 11.2634 23.8011 17.1762 23.8011Z" stroke="#FF6745" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M27.7439 24.4918C29.313 23.037 30.5649 21.2738 31.421 19.3127C32.2771 17.3516 32.719 15.2349 32.719 13.0951C32.719 10.9553 32.2771 8.83857 31.421 6.87749C30.5649 4.91643 29.313 3.15327 27.7439 1.69849" stroke="#FF6745" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.60839 1.69849C5.03921 3.15327 3.78738 4.91643 2.93128 6.87749C2.07519 8.83857 1.6333 10.9553 1.6333 13.0951C1.6333 15.2349 2.07519 17.3516 2.93128 19.3127C3.78738 21.2738 5.03921 23.037 6.60839 24.4918" stroke="#FF6745" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.1692 19.6569C16.883 19.6569 16.6511 19.4251 16.6511 19.1389C16.6511 18.8529 16.883 18.6208 17.1692 18.6208" stroke="#FF6745" stroke-width="2"/>
<path d="M17.1692 19.6569C17.4553 19.6569 17.6872 19.4251 17.6872 19.1389C17.6872 18.8529 17.4553 18.6208 17.1692 18.6208" stroke="#FF6745" stroke-width="2"/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>