🚸 Improved home page and translated into French

home
Alexis Feron 5 months ago
parent 300d55fe76
commit 2ea2eda507

@ -5,7 +5,7 @@
class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
type="button"
>
<p *ngIf="!isHomePage">Add a pin</p>
<p *ngIf="!isHomePage">Ajouter un pin</p>
</button>
<!-- Main modal -->
@ -45,7 +45,7 @@
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
/>
</svg>
<span class="sr-only">Close modal</span>
<span class="sr-only">Fermer la modal</span>
</button>
</div>
<!-- Modal body -->
@ -79,7 +79,7 @@
id="localisation"
formControlName="location"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
placeholder="Enter location"
placeholder="Saisir la localisation"
(focus)="onFocus()"
(blur)="onBlur()"
/>
@ -113,7 +113,7 @@
rows="4"
formControlName="description"
class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Describe your memory"
placeholder="Décrit ton souvenir..."
></textarea>
</div>

@ -21,10 +21,11 @@
d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
/>
</svg>
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
<span class="font-semibold">Click to upload</span> or drag and drop
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400 text-center">
<span class="font-semibold">Cliquez pour télécharger</span><br />
ou glissez-déposez
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">PNG, JPG or GIF</p>
<p class="text-xs text-gray-500 dark:text-gray-400">PNG, JPG ou GIF</p>
</div>
<!-- Input masqué -->

@ -1,58 +1,412 @@
<img src="/home.jpg" alt="image carte du monde" style="width: 100%" />
<hr class="h-3 bg-yellow-50 border-0 brown" />
<img src="/home.jpg" alt="image carte du monde" style="width: 100%">
<hr class="h-3 bg-yellow-50 border-0 brown">
<div style="display: flex; gap: 20px; padding: 20px; justify-content: center; align-items: stretch;">
<section class="bg-white dark:bg-gray-900" style="border-radius: 15px; flex: 1 ; padding: 20px; display: flex; flex-direction: column; justify-content: space-between;">
<div style="display: flex; flex: 3; flex-direction: row;" class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6">
<div>
<img src="/logo.png" alt="Équipe Memory sombre" >
</div>
<div class="mt-4 md:mt-0">
<h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">
Bienvenue sur Memory Map
</h2>
<p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
Plongez dans un voyage interactif à travers vos souvenirs avec
<strong>Memory Map</strong>, l'application qui transforme vos aventures
en une carte unique et personnalisée.
</p>
<p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
Enrichissez vos marqueurs avec des photos, des légendes, des notes personnelles, et même des amis
identifiés pour revivre chaque moment important.
</p>
<button routerLink="/map" class="inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-blue-800">
Commencez votre aventure
<svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<div
style="
display: flex;
gap: 20px;
padding: 20px;
justify-content: center;
align-items: stretch;
"
>
<section
class="bg-white dark:bg-gray-900"
style="
border-radius: 15px;
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
"
>
<div
style="display: flex; flex: 3; flex-direction: row"
class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6"
>
<div>
<img src="/logo.png" alt="Équipe Memory sombre" />
</div>
<div class="mt-4 md:mt-0">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Bienvenue sur Memory Map
</h2>
<p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
Plongez dans un voyage interactif à travers vos souvenirs avec
<strong>Memory Map</strong>, l'application qui transforme vos
aventures en une carte unique et personnalisée.
</p>
<p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
Enrichissez vos marqueurs avec des photos, des légendes, des notes
personnelles, et même des amis identifiés pour revivre chaque moment
important.
</p>
<button
routerLink="/map"
class="inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-blue-800"
>
Commencez votre aventure
<svg
class="ml-2 -mr-1 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
</div>
</section>
<section
class="bg-white dark:bg-gray-900"
style="
border-radius: 15px;
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
"
>
<div
style="display: flex; flex: 3; flex-direction: row"
class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6"
>
<div class="mt-4 md:mt-0">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
L'équipe Memory
</h2>
<p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
Toute l'équipe de <strong>Memory</strong> est fière de vous présenter
<strong>Memory Map</strong>, une application conçue avec passion et
créativité pour vous permettre de revivre vos meilleurs souvenirs et
d'en découvrir de nouveaux.
</p>
<p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
Nous vous remercions de nous accompagner dans cette belle aventure, et
nous avons hâte de voir les magnifiques cartes que vous allez créer !
</p>
<p
class="font-medium text-lg text-center text-gray-900 dark:text-gray-100"
>
Bonne année 2025 à tous, remplie de souvenirs inoubliables 🌍✨
</p>
</div>
<div>
<img src="/logo.png" alt="Équipe Memory sombre" />
</div>
</div>
</section>
</div>
<section class="bg-white dark:bg-gray-900 p-20">
<div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
<div class="max-w-screen-md mb-8 lg:mb-16">
<h2
class="text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Fonctionnalités principales
</h2>
</div>
<div
class="space-y-8 md:grid md:grid-cols-2 lg:grid-cols-3 md:gap-12 md:space-y-0"
>
<div>
<div
class="flex items-center w-20 h-20 rounded-full bg-primary-100 lg:h-24 lg:w-24 dark:bg-primary-900"
>
<svg
class="w-10 h-10 text-gray-800 dark:text-white lg:w-12 lg:h-12"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 24 24"
>
<path
fill-rule="evenodd"
d="M11.906 1.994a8.002 8.002 0 0 1 8.09 8.421 7.996 7.996 0 0 1-1.297 3.957.996.996 0 0 1-.133.204l-.108.129c-.178.243-.37.477-.573.699l-5.112 6.224a1 1 0 0 1-1.545 0L5.982 15.26l-.002-.002a18.146 18.146 0 0 1-.309-.38l-.133-.163a.999.999 0 0 1-.13-.202 7.995 7.995 0 0 1 6.498-12.518ZM15 9.997a3 3 0 1 1-5.999 0 3 3 0 0 1 5.999 0Z"
clip-rule="evenodd"
/>
</svg>
</div>
</section>
<section class="bg-white dark:bg-gray-900" style="border-radius: 15px; flex: 1 ; padding: 20px; display: flex; flex-direction: column; justify-content: space-between;">
<div style="display: flex; flex: 3; flex-direction: row;" class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6">
<div class="mt-4 md:mt-0" >
<h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">
L'équipe Memory
</h2>
<p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
Toute l'équipe de <strong>Memory</strong> est fière de vous présenter
<strong>Memory Map</strong>, une application conçue avec passion et créativité pour vous permettre
de revivre vos meilleurs souvenirs et d'en découvrir de nouveaux.
</p>
<p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
Nous vous remercions de nous accompagner dans cette belle aventure, et nous avons hâte de voir les
magnifiques cartes que vous allez créer !
</p>
<p class="font-medium text-lg text-center text-gray-900 dark:text-gray-100">
Bonne année 2025 à tous, remplie de souvenirs inoubliables 🌍✨
</p>
</div>
<div>
<img src="/logo.png" alt="Équipe Memory sombre" >
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">Placer vos pins</h3>
<p class="text-gray-500 dark:text-gray-400">
Marquez sans effort vos endroits préférés sur la carte. Qu'il s'agisse
d'un joyau caché ou d'une vue à couper le souffle, épinglez les lieux
pour créer une carte personnalisée de vos aventures. N'oubliez jamais
les endroits qui ont rendu votre voyage spécial.
</p>
</div>
<div>
<div
class="flex items-center w-20 h-20 rounded-full bg-primary-100 lg:h-24 lg:w-24 dark:bg-primary-900"
>
<svg
class="w-10 h-10 text-gray-800 dark:text-white lg:w-12 lg:h-12"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 24 24"
>
<path
fill-rule="evenodd"
d="M13 10a1 1 0 0 1 1-1h.01a1 1 0 1 1 0 2H14a1 1 0 0 1-1-1Z"
clip-rule="evenodd"
/>
<path
fill-rule="evenodd"
d="M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12c0 .556-.227 1.06-.593 1.422A.999.999 0 0 1 20.5 20H4a2.002 2.002 0 0 1-2-2V6Zm6.892 12 3.833-5.356-3.99-4.322a1 1 0 0 0-1.549.097L4 12.879V6h16v9.95l-3.257-3.619a1 1 0 0 0-1.557.088L11.2 18H8.892Z"
clip-rule="evenodd"
/>
</svg>
</div>
</section>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">
Ajouter vos Photos
</h3>
<p class="text-gray-500 dark:text-gray-400">
Donnez vie à vos pins avec des images ! Capturez l'essence de vos
souvenirs en joignant des photos aux lieux que vous avez épinglés.
Qu'il s'agisse de couchers de soleil, de points de repère ou de
moments spontanés, créez un journal visuel de vos expériences.
</p>
</div>
<div>
<div
class="flex items-center w-20 h-20 rounded-full bg-primary-100 lg:h-24 lg:w-24 dark:bg-primary-900"
>
<svg
class="w-10 h-10 text-gray-800 dark:text-white lg:w-12 lg:h-12"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 24 24"
>
<path
d="M17.5 3a3.5 3.5 0 0 0-3.456 4.06L8.143 9.704a3.5 3.5 0 1 0-.01 4.6l5.91 2.65a3.5 3.5 0 1 0 .863-1.805l-5.94-2.662a3.53 3.53 0 0 0 .002-.961l5.948-2.667A3.5 3.5 0 1 0 17.5 3Z"
/>
</svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">
Partager vos histoires
</h3>
<p class="text-gray-500 dark:text-gray-400">
WChaque souvenir a une histoire, et vous pouvez maintenant partager la
vôtre. Racontez les moments qui ont rendu chaque lieu inoubliable.
Partagez vos aventures et revivez vos expériences les plus chères à
travers vos propres mots.
</p>
</div>
</div>
</div>
</section>
<section class="dark:bg-white bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-l lg:py-16 lg:px-6">
<div class="mx-auto max-w-screen-md text-center mb-8 lg:mb-12">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold dark:text-gray-800 text-white"
>
Conçu pour des aventuriers comme vous
</h2>
<p class="mb-5 font-light dark:text-gray-500 sm:text-xl text-gray-400">
Chez Memory Map, nous nous concentrons sur la création d'outils qui
transforment vos souvenirs en expériences interactives et mémorables.
</p>
</div>
<div
class="space-y-8 lg:grid lg:grid-cols-2 justify-center mx-auto sm:gap-3 xl:gap-6 gap-x-8 lg:space-y-0 max-w-6xl"
>
<!-- Pricing Card -->
<div
class="flex flex-col justify-center p-6 mx-auto max-w-md text-center text-gray-900 bg-white rounded-lg border border-gray-100 shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white h-full"
>
<h3 class="mb-4 text-2xl font-semibold">Gratuit</h3>
<p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">
Meilleure option pour un usage personnel et pour votre prochain
projet.
</p>
<!-- List -->
<ul role="list" class="mb-8 space-y-4 text-left pt-5">
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>Pins illimités sur votre carte personnelle.</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>Ajoutez des photos à vos souvenirs.</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>Partagez des souvenirs avec vos amis.</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>Accès au système de quêtes.</span>
</li>
</ul>
<a
href="/map"
class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-800 dark:hover:bg-blue-900 dark:focus:ring-blue-900"
>Commencez</a
>
</div>
<!-- Pricing Card -->
<div
class="flex flex-col justify-center p-6 mx-auto max-w-md text-center text-gray-900 bg-white rounded-lg border border-gray-100 shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white h-full"
>
<h3 class="mb-4 text-2xl font-semibold">Premium</h3>
<div class="flex justify-center items-baseline pb-2">
<span class="mr-2 text-3xl font-extrabold">9€</span>
<span class="text-gray-500 dark:text-gray-400">/mois</span>
</div>
<p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">
Parfait pour les aventuriers avides de souvenirs et de fonctionnalités
avancées.
</p>
<!-- List -->
<ul role="list" class="mb-8 space-y-4 text-left pt-5">
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>Pins illimités sur votre carte personnelle.</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>Ajoutez des photos à vos souvenirs.</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>Partagez des souvenirs avec vos amis.</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>Système avancé de quêtes avec badges exclusifs.</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>Support premium.</span>
</li>
</ul>
<a
class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:text-white dark:focus:ring-primary-900"
>Bientôt disponible</a
>
</div>
</div>
</div>
</section>

@ -1,13 +1,9 @@
import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
@Component({
selector: 'app-home-page',
imports: [RouterLink],
templateUrl: './home-page.component.html',
styleUrl: './home-page.component.css'
})
export class HomePageComponent {
}
export class HomePageComponent {}

@ -145,21 +145,21 @@
*ngIf="!isHome"
class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
aria-current="page"
>Home
>Accueil
</a>
<a
href="/map"
*ngIf="isHome"
class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
aria-current="page"
>Map
>Carte
</a>
</li>
<li class="flex items-center space-x-2">
<a
href="#"
class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
>Quests
>Quêtes
</a>
</li>
<li class="flex items-center space-x-2">
@ -169,7 +169,7 @@
<a
href="#"
class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
>Friends
>Amis
</a>
</li>
</ul>

Loading…
Cancel
Save