Restructuration majeure du projet: migration de flutt vers app, ajout de l'API et mise à jour du site web
This commit is contained in:
d6soft
@@ -1,47 +1,148 @@
|
||||
<script>import "./app.css";
|
||||
import svelteLogo from './assets/svelte.svg'
|
||||
import viteLogo from '/vite.svg'
|
||||
import Counter from './lib/Counter.svelte'</script>
|
||||
<script>
|
||||
import { onMount, tick } from 'svelte';
|
||||
import './app.css';
|
||||
|
||||
<main>
|
||||
<div>
|
||||
<a href="https://vite.dev" target="_blank" rel="noreferrer">
|
||||
<img src="{viteLogo}" class="logo" alt="Vite Logo" />
|
||||
</a>
|
||||
<a href="https://svelte.dev" target="_blank" rel="noreferrer">
|
||||
<img src="{svelteLogo}" class="logo svelte" alt="Svelte Logo" />
|
||||
</a>
|
||||
// Importer les composants communs
|
||||
import Header from './components/Header.svelte';
|
||||
import Footer from './components/Footer.svelte';
|
||||
import CookieConsent from './components/CookieConsent.svelte';
|
||||
import { hasUserMadeCookieChoice, startAnonymousTracking, stopAnonymousTracking } from './lib/cookieService.js';
|
||||
import { trackPageView } from './lib/analyticsService.js';
|
||||
|
||||
// Importer les pages
|
||||
import Accueil from './pages/Accueil.svelte';
|
||||
import Fonctionnalites from './pages/Fonctionnalites.svelte';
|
||||
import Contact from './pages/Contact.svelte';
|
||||
import PolitiqueConfidentialite from './pages/PolitiqueConfidentialite.svelte';
|
||||
import ConditionsUtilisation from './pages/ConditionsUtilisation.svelte';
|
||||
import MentionsLegales from './pages/MentionsLegales.svelte';
|
||||
|
||||
// État pour la page active
|
||||
let activePage = 'accueil';
|
||||
|
||||
// État pour la modal des cookies
|
||||
let showCookieConsent = false;
|
||||
|
||||
// Fonction pour gérer le changement de page basé sur le pathname
|
||||
function handleRouteChange() {
|
||||
// Extraire le pathname sans le premier slash
|
||||
const path = window.location.pathname.slice(1) || 'accueil';
|
||||
activePage = path || 'accueil';
|
||||
|
||||
// Suivre la page vue si l'utilisateur a accepté les cookies
|
||||
trackPageView(activePage);
|
||||
}
|
||||
|
||||
// Gérer le consentement aux cookies
|
||||
function handleCookieConsent(event) {
|
||||
if (event.detail.accepted) {
|
||||
startAnonymousTracking();
|
||||
} else {
|
||||
stopAnonymousTracking();
|
||||
}
|
||||
showCookieConsent = false;
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
// Initialiser la page active au chargement
|
||||
handleRouteChange();
|
||||
|
||||
// Configurer le gestionnaire de navigation pour écouter les clics sur les liens
|
||||
// et intercepter la navigation
|
||||
document.addEventListener('click', (e) => {
|
||||
// Trouver le plus proche élément <a> depuis la cible du clic
|
||||
const link = e.target.closest('a');
|
||||
|
||||
// Si nous n'avons pas de lien ou si le lien est externe ou a un attribut target,
|
||||
// laisser le navigateur gérer normalement
|
||||
if (!link || !link.href.startsWith(window.location.origin) ||
|
||||
link.target || link.hasAttribute('download') ||
|
||||
link.getAttribute('rel') === 'external') {
|
||||
return;
|
||||
}
|
||||
|
||||
// Empêcher le comportement par défaut (navigation du navigateur)
|
||||
e.preventDefault();
|
||||
|
||||
// Extraire le chemin relatif de l'URL
|
||||
const url = new URL(link.href);
|
||||
const path = url.pathname;
|
||||
|
||||
// Mettre à jour l'historique du navigateur sans recharger la page
|
||||
window.history.pushState({}, '', path);
|
||||
|
||||
// Mettre à jour la page active
|
||||
const pagePath = path.slice(1) || 'accueil';
|
||||
activePage = pagePath;
|
||||
|
||||
// Suivre la page vue si l'utilisateur a accepté les cookies
|
||||
trackPageView(activePage);
|
||||
});
|
||||
|
||||
// Écouter les événements popstate (boutons retour/avant du navigateur)
|
||||
window.addEventListener('popstate', handleRouteChange);
|
||||
|
||||
// Vérifier si l'utilisateur a déjà fait un choix pour les cookies
|
||||
// Permettre au DOM de se charger complètement avant d'afficher la modale
|
||||
await tick();
|
||||
|
||||
// Si l'utilisateur n'a pas encore fait de choix, afficher la modal
|
||||
if (!hasUserMadeCookieChoice()) {
|
||||
showCookieConsent = true;
|
||||
} else {
|
||||
// Si l'utilisateur a déjà accepté, démarrer le suivi
|
||||
startAnonymousTracking();
|
||||
// Si l'utilisateur a déjà refusé, s'assurer que le suivi est désactivé
|
||||
stopAnonymousTracking();
|
||||
}
|
||||
|
||||
// Nettoyer les écouteurs d'événement lors du démontage
|
||||
return () => {
|
||||
window.removeEventListener('popstate', handleRouteChange);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="fixed inset-0 bg-gradient-to-t from-blue-900 to-white z-[-20]">
|
||||
<div class="absolute inset-0 z-[-10]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
|
||||
<pattern id="pattern-circles" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
|
||||
<circle id="pattern-circle" cx="10" cy="10" r="5" fill="#FFF" opacity="0.1"></circle>
|
||||
</pattern>
|
||||
<rect id="rect" x="0" y="0" width="100%" height="100%" fill="url(#pattern-circles)"></rect>
|
||||
</svg>
|
||||
</div>
|
||||
<h1>Vite + Svelte</h1>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<Counter></Counter>
|
||||
<main class="flex flex-col min-h-screen relative" class:blur-effect={showCookieConsent}>
|
||||
<Header />
|
||||
|
||||
<div class="flex-grow">
|
||||
{#if activePage === 'accueil'}
|
||||
<Accueil />
|
||||
{:else if activePage === 'fonctionnalites'}
|
||||
<Fonctionnalites />
|
||||
{:else if activePage === 'contact'}
|
||||
<Contact />
|
||||
{:else if activePage === 'politique-confidentialite'}
|
||||
<PolitiqueConfidentialite />
|
||||
{:else if activePage === 'conditions-utilisation'}
|
||||
<ConditionsUtilisation />
|
||||
{:else if activePage === 'mentions-legales'}
|
||||
<MentionsLegales />
|
||||
{:else}
|
||||
<!-- Page 404 simple -->
|
||||
<div class="container mx-auto px-4 py-16 text-center">
|
||||
<h1 class="text-4xl font-bold mb-4">Page non trouvée</h1>
|
||||
<p class="mb-8">La page que vous recherchez n'existe pas.</p>
|
||||
<a href="/accueil" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Retour à l'accueil </a>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer">SvelteKit</a>, the official Svelte app framework powered by Vite!
|
||||
</p>
|
||||
|
||||
<p class="read-the-docs">
|
||||
Click on the Vite and Svelte logos to learn more
|
||||
</p>
|
||||
<Footer />
|
||||
</main>
|
||||
|
||||
|
||||
<style>
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.svelte:hover {
|
||||
filter: drop-shadow(0 0 2em #ff3e00aa);
|
||||
}
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
{#if showCookieConsent}
|
||||
<CookieConsent on:consent={handleCookieConsent} />
|
||||
{/if}
|
||||
|
||||
139
web/src/app.css
139
web/src/app.css
@@ -2,82 +2,115 @@
|
||||
@import "tailwindcss/components";
|
||||
@import "tailwindcss/utilities";
|
||||
|
||||
@font-face {
|
||||
font-family: 'Figtree';
|
||||
src: url('/fonts/Figtree-VariableFont_wght.ttf') format('truetype');
|
||||
font-weight: 100 900;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-family: 'Figtree', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
color: #333333;
|
||||
background-color: #ffffff;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Aspect ratio utilities */
|
||||
.aspect-w-16 {
|
||||
position: relative;
|
||||
padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
|
||||
--tw-aspect-w: 16;
|
||||
}
|
||||
|
||||
.aspect-h-9 {
|
||||
--tw-aspect-h: 9;
|
||||
}
|
||||
|
||||
.aspect-w-16 > * {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Animation utilities */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.animate-fadeIn {
|
||||
animation: fadeIn 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
/* Custom container for sections */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
/* Custom focus styles */
|
||||
*:focus-visible {
|
||||
outline: 2px solid #3b82f6;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
/* Responsive typography */
|
||||
@media (max-width: 640px) {
|
||||
h1 {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
h2 {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
h3 {
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Cookie consent modal styles */
|
||||
.blur-effect {
|
||||
filter: blur(4px);
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Animation pour la modal de cookies */
|
||||
@keyframes slideUp {
|
||||
from { transform: translateY(20px); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
.cookie-modal {
|
||||
animation: slideUp 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
58
web/src/components/CookieConsent.svelte
Normal file
58
web/src/components/CookieConsent.svelte
Normal file
@@ -0,0 +1,58 @@
|
||||
<script>
|
||||
import { onMount, createEventDispatcher } from 'svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
// Fonction pour accepter les cookies
|
||||
function acceptCookies() {
|
||||
// Créer un cookie qui expire dans 2 jours
|
||||
const expiryDate = new Date();
|
||||
expiryDate.setDate(expiryDate.getDate() + 2);
|
||||
|
||||
// Définir le cookie avec la date d'expiration
|
||||
document.cookie = `geosector_cookies_accepted=true; expires=${expiryDate.toUTCString()}; path=/; SameSite=Lax`;
|
||||
|
||||
// Informer le composant parent que l'utilisateur a accepté
|
||||
dispatch('consent', { accepted: true });
|
||||
}
|
||||
|
||||
// Fonction pour refuser les cookies
|
||||
function refuseCookies() {
|
||||
// Définir un cookie de refus qui expire dans 2 jours aussi
|
||||
const expiryDate = new Date();
|
||||
expiryDate.setDate(expiryDate.getDate() + 2);
|
||||
|
||||
// Définir le cookie avec la date d'expiration
|
||||
document.cookie = `geosector_cookies_refused=true; expires=${expiryDate.toUTCString()}; path=/; SameSite=Lax`;
|
||||
|
||||
// Informer le composant parent que l'utilisateur a refusé
|
||||
dispatch('consent', { accepted: false });
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
|
||||
<div class="cookie-modal bg-white rounded-lg shadow-xl p-6 max-w-md w-full">
|
||||
<h2 class="text-2xl font-bold text-gray-800 mb-4">Gestion des cookies</h2>
|
||||
|
||||
<p class="text-gray-600 mb-6">
|
||||
Nous utilisons des cookies pour suivre de façon anonyme l'activité sur ce site.
|
||||
Ces informations nous aident à améliorer votre expérience utilisateur.
|
||||
Les données sont collectées une fois tous les 2 jours. Vous pouvez les accepter ou les refuser.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-end">
|
||||
<button
|
||||
on:click={refuseCookies}
|
||||
class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded transition-colors"
|
||||
>
|
||||
Refuser
|
||||
</button>
|
||||
<button
|
||||
on:click={acceptCookies}
|
||||
class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded transition-colors"
|
||||
>
|
||||
Accepter
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
103
web/src/components/Footer.svelte
Normal file
103
web/src/components/Footer.svelte
Normal file
@@ -0,0 +1,103 @@
|
||||
<script>
|
||||
// Fonction pour gérer la navigation et faire défiler la page vers le haut
|
||||
function handleNavigation(hash) {
|
||||
window.location.hash = hash;
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
</script>
|
||||
|
||||
<footer class="bg-gray-800 text-white py-8">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div>
|
||||
<div class="flex items-center mb-4">
|
||||
<img src="/images/icon-geosector.svg" alt="Geosector" class="h-8 mr-3" />
|
||||
<h3 class="text-xl font-bold">Geosector</h3>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-6">Une application puissante et intuitive, pour une gestion efficace de vos distributions.</p>
|
||||
|
||||
<div class="space-y-3">
|
||||
<p class="text-gray-300 font-semibold">Téléchargez notre application :</p>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<a href="https://apps.apple.com/store" class="inline-flex items-center bg-black text-white rounded-lg px-4 py-2 hover:bg-gray-700 transition-colors">
|
||||
<svg class="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M17.5615 12.5514C17.5615 9.17603 20.3113 7.76353 20.4318 7.69478C18.9985 5.58978 16.7857 5.29103 16.0032 5.26978C14.1546 5.07353 12.3675 6.34603 11.432 6.34603C10.4753 6.34603 9.0315 5.29103 7.4663 5.32103C5.4392 5.35103 3.5495 6.51978 2.5292 8.32603C0.4292 11.9997 2.0047 17.3989 4.0197 20.2014C5.029 21.5785 6.2018 23.1104 7.739 23.0483C9.2232 22.9768 9.769 22.0924 11.5667 22.0924C13.3432 22.0924 13.856 23.0483 15.4107 23.006C17.011 22.9768 18.0313 21.6318 19.01 20.2439C20.171 18.6273 20.6447 17.0429 20.666 16.9489C20.6235 16.9277 17.5933 15.7166 17.5615 12.5514Z"
|
||||
/>
|
||||
<path d="M14.2855 3.77006C15.0787 2.80256 15.6037 1.48381 15.4407 0.144806C14.3157 0.187306 12.876 0.912306 12.0402 1.85856C11.295 2.69631 10.6542 4.06256 10.8385 5.35631C12.1002 5.44381 13.45 4.72381 14.2855 3.77006Z" />
|
||||
</svg>
|
||||
App Store
|
||||
</a>
|
||||
<a href="https://play.google.com/store" class="inline-flex items-center bg-black text-white rounded-lg px-4 py-2 hover:bg-gray-700 transition-colors">
|
||||
<svg class="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.5231 8.74664L14.4231 6.41914L2.33563 18.5066C2.52813 18.9391 2.91063 19.2826 3.40563 19.3441L17.5231 8.74664Z" />
|
||||
<path d="M22.0002 11.3651C22.0002 10.7066 21.6602 10.0988 21.0692 9.76762L18.6927 8.31262L15.3302 10.8338L19.0327 13.5388L21.0402 12.3666C21.6367 12.0363 22.0002 11.7313 22.0002 11.3651Z" />
|
||||
<path d="M2.00031 4.68721V19.3134C2.00031 19.6454 2.10531 19.9077 2.27406 20.1097L14.8628 7.52096L2.93156 0.572206C2.38406 0.906706 2.00031 1.71046 2.00031 2.59046V4.68721Z" />
|
||||
<path d="M14.4234 6.41895L14.7697 6.18945L3.81094 0.141445C3.55969 0.0294453 3.28469 -0.0145547 3.01719 0.00294531L14.4234 6.41895Z" />
|
||||
</svg>
|
||||
Play Store
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-4">Liens rapides</h3>
|
||||
<ul class="space-y-2">
|
||||
<li class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
||||
</svg>
|
||||
<a href="#accueil" class="text-gray-300 hover:text-white transition-colors" on:click|preventDefault={() => handleNavigation('accueil')}>Accueil</a>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
<a href="#fonctionnalites" class="text-gray-300 hover:text-white transition-colors" on:click|preventDefault={() => handleNavigation('fonctionnalites')}>Fonctionnalités</a>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<a href="#contact" class="text-gray-300 hover:text-white transition-colors" on:click|preventDefault={() => handleNavigation('contact')}>Contact</a>
|
||||
</li>
|
||||
<li class="mt-4 pt-4 border-t border-gray-700"></li>
|
||||
<li class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
<a href="#mentions-legales" class="text-gray-300 hover:text-white transition-colors" on:click|preventDefault={() => handleNavigation('mentions-legales')}>Mentions légales</a>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
<a href="#politique-confidentialite" class="text-gray-300 hover:text-white transition-colors" on:click|preventDefault={() => handleNavigation('politique-confidentialite')}>Politique de confidentialité</a>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
<a href="#conditions-utilisation" class="text-gray-300 hover:text-white transition-colors" on:click|preventDefault={() => handleNavigation('conditions-utilisation')}>Conditions d'utilisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-4">Contact</h3>
|
||||
<address class="not-italic text-gray-300">
|
||||
<p>Email: contactgeosector@gmail.com</p>
|
||||
<p>Téléphone: +33 (0)7 69 09 17 06</p>
|
||||
</address>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-gray-700 mt-8 pt-8 text-gray-400">
|
||||
<div class="flex justify-between items-center">
|
||||
<p>© {new Date().getFullYear()} Geosector. Tous droits réservés.</p>
|
||||
<a href="https://d6soft.fr" class="text-blue-400 hover:text-blue-300 font-medium transition-colors" target="_blank" rel="noopener noreferrer">Conception D6SOFT</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
173
web/src/components/Header.svelte
Normal file
173
web/src/components/Header.svelte
Normal file
@@ -0,0 +1,173 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
// État actif pour la navigation
|
||||
let activePage = window.location.hash.slice(1) || 'accueil';
|
||||
let mobileMenuOpen = false;
|
||||
let baseAppUrl = '';
|
||||
|
||||
// Déterminer les URLs en fonction de l'environnement
|
||||
function getEnvironmentUrls() {
|
||||
const hostname = window.location.hostname;
|
||||
let appPrefix = '';
|
||||
|
||||
if (hostname === 'dev.geosector.fr' || hostname.includes('localhost')) {
|
||||
appPrefix = 'dapp';
|
||||
} else if (hostname === 'rec.geosector.fr') {
|
||||
appPrefix = 'rapp';
|
||||
} else {
|
||||
// Production ou autres environnements
|
||||
appPrefix = 'app';
|
||||
}
|
||||
|
||||
// Construire l'URL de base de l'application
|
||||
const domainParts = hostname.split('.');
|
||||
if (domainParts.length >= 2) {
|
||||
// Remplacer le sous-domaine ou ajouter un nouveau préfixe
|
||||
const domain = domainParts.slice(Math.max(domainParts.length - 2, 0)).join('.');
|
||||
return `https://${appPrefix}.${domain}`;
|
||||
}
|
||||
|
||||
// Fallback pour localhost ou cas non prévus
|
||||
return `https://${appPrefix}.geosector.fr`;
|
||||
}
|
||||
|
||||
// Fonction pour changer de page
|
||||
function changePage(page) {
|
||||
activePage = page;
|
||||
window.history.pushState({}, '', `/${page}`);
|
||||
closeMobileMenu();
|
||||
}
|
||||
|
||||
// Fonctions pour le menu mobile
|
||||
function toggleMobileMenu() {
|
||||
mobileMenuOpen = !mobileMenuOpen;
|
||||
}
|
||||
|
||||
function closeMobileMenu() {
|
||||
mobileMenuOpen = false;
|
||||
}
|
||||
|
||||
// Écouter les événements popstate pour mettre à jour la page active
|
||||
if (typeof window !== 'undefined') {
|
||||
window.addEventListener('popstate', () => {
|
||||
activePage = window.location.pathname.slice(1) || 'accueil';
|
||||
});
|
||||
}
|
||||
|
||||
// Initialiser les URLs et configurer les événements
|
||||
onMount(() => {
|
||||
// Déterminer l'URL de base de l'application
|
||||
baseAppUrl = getEnvironmentUrls();
|
||||
|
||||
const handleClickOutside = (event) => {
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
const burgerButton = document.getElementById('burger-button');
|
||||
|
||||
if (mobileMenuOpen && mobileMenu && burgerButton &&
|
||||
!mobileMenu.contains(event.target) &&
|
||||
!burgerButton.contains(event.target)) {
|
||||
closeMobileMenu();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('click', handleClickOutside);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('click', handleClickOutside);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<header class="text-white bg-transparent backdrop-blur-sm z-50 relative">
|
||||
<div class="container mx-auto px-4 py-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center">
|
||||
<div class="mr-3">
|
||||
<a href="/accueil" on:click|preventDefault={() => changePage('accueil')}>
|
||||
<img src="/images/Logo-geosector-horizontal.svg" alt="Geosector" class="h-12" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Burger menu pour mobile -->
|
||||
<button id="burger-button" class="xl:hidden z-50" on:click={toggleMobileMenu}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-[#002C66]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
{#if mobileMenuOpen}
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
{:else}
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
{/if}
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Menu desktop -->
|
||||
<div class="hidden xl:flex items-center gap-6">
|
||||
<nav>
|
||||
<ul class="flex space-x-6">
|
||||
<li>
|
||||
<a href="/accueil" class={`text-[#002C66] hover:text-blue-500 transition-colors ${activePage === 'accueil' ? 'font-bold border-b-2 border-[#002C66]' : ''}`} on:click|preventDefault={() => changePage('accueil')}> Accueil </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/fonctionnalites" class={`text-[#002C66] hover:text-blue-500 transition-colors ${activePage === 'fonctionnalites' ? 'font-bold border-b-2 border-[#002C66]' : ''}`} on:click|preventDefault={() => changePage('fonctionnalites')}> Fonctionnalités </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/contact" class={`text-[#002C66] hover:text-blue-500 transition-colors ${activePage === 'contact' ? 'font-bold border-b-2 border-[#002C66]' : ''}`} on:click|preventDefault={() => changePage('contact')}> Contact </a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="flex gap-3 items-center">
|
||||
<a href="{baseAppUrl}/login/user" class="border-2 border-[#4CAF50] text-[#4CAF50] hover:bg-[#4CAF50] hover:text-white font-medium py-1.5 px-3 rounded-full transition-colors" on:click={() => { sessionStorage.setItem('loginType', 'user'); }}> Connexion Utilisateur </a>
|
||||
<a href="{baseAppUrl}/login" class="border-2 border-red-600 text-red-600 hover:bg-red-600 hover:text-white font-medium py-1.5 px-3 rounded-full transition-colors" on:click={() => { sessionStorage.setItem('loginType', 'admin'); }}> Connexion Administrateur </a>
|
||||
<a href="{baseAppUrl}/register" class="bg-[#E3170A] hover:bg-red-700 text-white font-medium py-2 px-4 rounded-full transition-colors"> S'inscrire </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Menu mobile -->
|
||||
<div id="mobile-menu" class={`fixed top-0 right-0 h-screen w-4/5 max-w-xs bg-white shadow-lg transform transition-transform duration-300 ease-in-out z-40 ${mobileMenuOpen ? 'translate-x-0' : 'translate-x-full'}`}>
|
||||
<div class="p-6">
|
||||
<div class="flex justify-end mb-8">
|
||||
<button on:click={closeMobileMenu} class="text-gray-600" aria-label="Fermer le menu">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav class="mb-8">
|
||||
<ul class="space-y-4">
|
||||
<li>
|
||||
<a href="/accueil" class={`block text-lg text-[#002C66] hover:text-blue-500 transition-colors ${activePage === 'accueil' ? 'font-bold' : ''}`} on:click|preventDefault={() => changePage('accueil')}> Accueil </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/fonctionnalites" class={`block text-lg text-[#002C66] hover:text-blue-500 transition-colors ${activePage === 'fonctionnalites' ? 'font-bold' : ''}`} on:click|preventDefault={() => changePage('fonctionnalites')}> Fonctionnalités </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/contact" class={`block text-lg text-[#002C66] hover:text-blue-500 transition-colors ${activePage === 'contact' ? 'font-bold' : ''}`} on:click|preventDefault={() => changePage('contact')}> Contact </a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="space-y-4">
|
||||
<a href="{baseAppUrl}/login/user" class="block w-full border-2 border-[#4CAF50] text-[#4CAF50] hover:bg-[#4CAF50] hover:text-white font-medium py-2 px-4 rounded-full transition-colors text-center mb-3" on:click={() => { sessionStorage.setItem('loginType', 'user'); }}> Connexion Utilisateur </a>
|
||||
<a href="{baseAppUrl}/login" class="block w-full border-2 border-red-600 text-red-600 hover:bg-red-600 hover:text-white font-medium py-2 px-4 rounded-full transition-colors text-center mb-3" on:click={() => { sessionStorage.setItem('loginType', 'admin'); }}> Connexion Administrateur </a>
|
||||
<a href="{baseAppUrl}/register" class="block w-full bg-[#E3170A] hover:bg-red-700 text-white font-medium py-2 px-4 rounded-full transition-colors text-center"> S'inscrire </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Overlay pour le fond lorsque le menu mobile est ouvert -->
|
||||
{#if mobileMenuOpen}
|
||||
<div
|
||||
class="fixed inset-0 bg-black bg-opacity-50 z-30"
|
||||
on:click={closeMobileMenu}
|
||||
on:keydown={(e) => e.key === 'Escape' && closeMobileMenu()}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-label="Fermer le menu"
|
||||
></div>
|
||||
{/if}
|
||||
</header>
|
||||
120
web/src/lib/analyticsService.js
Normal file
120
web/src/lib/analyticsService.js
Normal file
@@ -0,0 +1,120 @@
|
||||
/**
|
||||
* Service d'analyse pour Geosector
|
||||
* Ce service permet de suivre l'activité des utilisateurs qui ont accepté les cookies
|
||||
*/
|
||||
|
||||
import { getCookie } from './cookieService.js';
|
||||
|
||||
// Clé pour le stockage local du dernier suivi
|
||||
const LAST_TRACKING_KEY = 'geosector_last_tracking';
|
||||
|
||||
// Fonction pour enregistrer une visite de page
|
||||
export function trackPageView(page) {
|
||||
// Ne suivre que si l'utilisateur a accepté les cookies
|
||||
if (getCookie('geosector_cookies_accepted') !== 'true') {
|
||||
console.log('Suivi désactivé : cookies non acceptés');
|
||||
return;
|
||||
}
|
||||
|
||||
// Vérifier si nous devons suivre aujourd'hui (tous les 2 jours)
|
||||
if (!shouldTrackToday()) {
|
||||
console.log('Suivi différé : déjà suivi dans les 2 derniers jours');
|
||||
return;
|
||||
}
|
||||
|
||||
// Enregistrer la date du dernier suivi
|
||||
localStorage.setItem(LAST_TRACKING_KEY, new Date().toISOString());
|
||||
|
||||
// Ici, vous pouvez implémenter le code réel pour envoyer les données d'analyse
|
||||
// Par exemple, une requête fetch vers votre propre endpoint d'analyse
|
||||
console.log(`Page consultée: ${page} - ${new Date().toISOString()}`);
|
||||
|
||||
// Exemple d'implémentation avec un endpoint d'analyse
|
||||
/*
|
||||
fetch('/api/analytics/pageview', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
page,
|
||||
timestamp: new Date().toISOString(),
|
||||
// Autres données anonymes comme la source de trafic, etc.
|
||||
referrer: document.referrer || 'direct',
|
||||
screenSize: `${window.innerWidth}x${window.innerHeight}`,
|
||||
// Un identifiant de session anonyme (pas d'information personnelle)
|
||||
sessionId: getAnonymousSessionId()
|
||||
}),
|
||||
}).catch(error => {
|
||||
console.error('Erreur lors du suivi', error);
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
// Fonction pour vérifier si nous devons suivre aujourd'hui
|
||||
function shouldTrackToday() {
|
||||
const lastTracking = localStorage.getItem(LAST_TRACKING_KEY);
|
||||
|
||||
if (!lastTracking) {
|
||||
return true; // Première visite, nous devons suivre
|
||||
}
|
||||
|
||||
const lastTrackingDate = new Date(lastTracking);
|
||||
const now = new Date();
|
||||
|
||||
// Calculer la différence en millisecondes
|
||||
const diffTime = Math.abs(now - lastTrackingDate);
|
||||
// Convertir en jours
|
||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||
|
||||
// Ne suivre que tous les 2 jours
|
||||
return diffDays >= 2;
|
||||
}
|
||||
|
||||
// Générer un ID de session anonyme
|
||||
function getAnonymousSessionId() {
|
||||
// Vérifier si nous avons déjà un ID de session
|
||||
let sessionId = sessionStorage.getItem('anonymous_session_id');
|
||||
|
||||
if (!sessionId) {
|
||||
// Créer un ID de session aléatoire
|
||||
sessionId = Math.random().toString(36).substring(2, 15);
|
||||
sessionStorage.setItem('anonymous_session_id', sessionId);
|
||||
}
|
||||
|
||||
return sessionId;
|
||||
}
|
||||
|
||||
// Fonction pour suivre un événement spécifique
|
||||
export function trackEvent(category, action, label = null) {
|
||||
// Ne suivre que si l'utilisateur a accepté les cookies
|
||||
if (getCookie('geosector_cookies_accepted') !== 'true') {
|
||||
return;
|
||||
}
|
||||
|
||||
// Vérifier si nous devons suivre aujourd'hui
|
||||
if (!shouldTrackToday()) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`Événement: ${category} - ${action} - ${label || 'N/A'}`);
|
||||
|
||||
// Exemple d'implémentation avec un endpoint d'analyse
|
||||
/*
|
||||
fetch('/api/analytics/event', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
category,
|
||||
action,
|
||||
label,
|
||||
timestamp: new Date().toISOString(),
|
||||
sessionId: getAnonymousSessionId()
|
||||
}),
|
||||
}).catch(error => {
|
||||
console.error('Erreur lors du suivi d\'événement', error);
|
||||
});
|
||||
*/
|
||||
}
|
||||
61
web/src/lib/cookieService.js
Normal file
61
web/src/lib/cookieService.js
Normal file
@@ -0,0 +1,61 @@
|
||||
/**
|
||||
* Service de gestion des cookies pour Geosector
|
||||
*/
|
||||
|
||||
// Vérifie si un cookie existe
|
||||
export function getCookie(name) {
|
||||
const cookieValue = document.cookie
|
||||
.split('; ')
|
||||
.find(row => row.startsWith(`${name}=`));
|
||||
|
||||
if (cookieValue) {
|
||||
return cookieValue.split('=')[1];
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
// Vérifie si l'utilisateur a déjà fait un choix concernant les cookies
|
||||
export function hasUserMadeCookieChoice() {
|
||||
return getCookie('geosector_cookies_accepted') !== null ||
|
||||
getCookie('geosector_cookies_refused') !== null;
|
||||
}
|
||||
|
||||
// Démarre le suivi anonyme si l'utilisateur a accepté les cookies
|
||||
export function startAnonymousTracking() {
|
||||
if (getCookie('geosector_cookies_accepted') === 'true') {
|
||||
// Implémentation du suivi anonyme ici
|
||||
// Par exemple, initialisation de Google Analytics ou d'un autre service de suivi
|
||||
|
||||
// Enregistrer la page actuelle (peut être utilisé dans d'autres composants)
|
||||
const currentPage = window.location.hash.slice(1) || 'accueil';
|
||||
console.log('Suivi anonyme activé - ' + new Date().toISOString());
|
||||
console.log('Page courante: ' + currentPage);
|
||||
|
||||
// Si vous utilisez notre service analyticsService:
|
||||
// import { trackPageView } from './analyticsService.js';
|
||||
// trackPageView(currentPage);
|
||||
|
||||
// On pourrait aussi initialiser Google Analytics ici :
|
||||
// if (window.gtag) {
|
||||
// window.gtag('consent', 'update', {
|
||||
// 'analytics_storage': 'granted'
|
||||
// });
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
// Empêche le suivi si l'utilisateur a refusé les cookies
|
||||
export function stopAnonymousTracking() {
|
||||
if (getCookie('geosector_cookies_refused') === 'true') {
|
||||
// Désactiver tout suivi
|
||||
console.log('Suivi anonyme désactivé - ' + new Date().toISOString());
|
||||
|
||||
// Si on utilisait Google Analytics :
|
||||
// if (window.gtag) {
|
||||
// window.gtag('consent', 'update', {
|
||||
// 'analytics_storage': 'denied'
|
||||
// });
|
||||
// }
|
||||
}
|
||||
}
|
||||
134
web/src/pages/Accueil.svelte
Normal file
134
web/src/pages/Accueil.svelte
Normal file
@@ -0,0 +1,134 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let isVisible = false;
|
||||
|
||||
onMount(() => {
|
||||
isVisible = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="min-h-screen relative">
|
||||
<!-- Section Hero -->
|
||||
<section class="text-white py-16 relative overflow-hidden">
|
||||
<div class="container mx-auto px-4 relative z-10">
|
||||
<div class="flex flex-col md:flex-row items-center">
|
||||
<div class="md:w-1/2 mb-10 md:mb-0">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-6 transition-all duration-700 text-[#002C66]" class:translate-y-0={isVisible} class:opacity-100={isVisible} class:translate-y-10={!isVisible} class:opacity-0={!isVisible}>Gestion efficace de vos distributions de calendriers</h1>
|
||||
<p class="text-xl mb-8 transition-all duration-700 delay-300 text-[#002C66]" class:translate-y-0={isVisible} class:opacity-100={isVisible} class:translate-y-10={!isVisible} class:opacity-0={!isVisible}>Une application puissante et intuitive pour optimiser vos tournées et améliorer votre productivité.</p>
|
||||
<div class="transition-all duration-700 delay-500" class:translate-y-0={isVisible} class:opacity-100={isVisible} class:translate-y-10={!isVisible} class:opacity-0={!isVisible}>
|
||||
<a href="#fonctionnalites" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg inline-block transition-colors"> Découvrir les fonctionnalités </a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hero image/dashboard mockup -->
|
||||
<div class="md:w-1/2 transition-all duration-700 delay-700 relative flex justify-center md:justify-end" class:translate-x-0={isVisible} class:opacity-100={isVisible} class:translate-x-10={!isVisible} class:opacity-0={!isVisible}>
|
||||
<div class="relative w-full max-w-lg h-[400px] md:h-[500px] rounded-xl overflow-hidden border border-blue-300 shadow-2xl shadow-blue-500/20">
|
||||
<div class="absolute inset-0 flex items-center justify-center bg-white">
|
||||
<!-- Placeholder for dashboard screenshot -->
|
||||
<div class="text-center p-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-blue-200 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
<p class="text-gray-500">Dashboard Geosector</p>
|
||||
<p class="text-gray-400 text-sm mt-2">Interface de gestion</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile mockup overlay -->
|
||||
<div class="absolute -bottom-4 -right-4 w-[150px] md:w-[200px] h-[300px] md:h-[400px] bg-white rounded-xl overflow-hidden border border-blue-300 shadow-xl">
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<!-- Placeholder for mobile app screenshot -->
|
||||
<div class="text-center p-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-200 mx-auto mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<p class="text-gray-500 text-xs">Mobile App</p>
|
||||
<p class="text-gray-400 text-xs mt-1">Interface mobile</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section Avantages -->
|
||||
<section class="py-16">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="bg-white bg-opacity-70 backdrop-blur-sm rounded-lg p-8 shadow-lg">
|
||||
<h2 class="text-3xl font-bold text-center mb-12">Pourquoi choisir Geosector ?</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div class="bg-white p-6 rounded-lg shadow-md transition-transform hover:scale-105">
|
||||
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-center mb-2">Optimisation des tournées</h3>
|
||||
<p class="text-gray-600 text-center">Grace au mode Terrain, Geosector aide le membre à traiter les adresses à finaliser proche de lui.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-6 rounded-lg shadow-md transition-transform hover:scale-105">
|
||||
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-center mb-2">Simplicité d'utilisation</h3>
|
||||
<p class="text-gray-600 text-center">Interface intuitive conçue pour faciliter la gestion quotidienne de vos distributions.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-6 rounded-lg shadow-md transition-transform hover:scale-105">
|
||||
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-center mb-2">Sécurité des données</h3>
|
||||
<p class="text-gray-600 text-center">Vos données sont protégées en conformité au RGPD et sauvegardées régulièrement.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section Témoignages -->
|
||||
<section class="py-16">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="bg-white bg-opacity-70 backdrop-blur-sm rounded-lg p-8 shadow-lg">
|
||||
<h2 class="text-3xl font-bold text-center mb-12">Ce que nos clients disent</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div class="bg-white p-6 rounded-lg border border-gray-200">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-12 h-12 bg-blue-200 rounded-full flex items-center justify-center mr-4">
|
||||
<span class="text-blue-800 font-bold">TP</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold">Trystan PAPIN</h4>
|
||||
<p class="text-gray-600 text-sm">Trésorier de l'amicale des SP du Malesherbois</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-700 italic">"Bonjour, Je confirme l’utilisation de l’application Geosector pour l’amicale des SP de Malesherbes. Superbe application encore merci à vous !"</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-6 rounded-lg border border-gray-200">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-12 h-12 bg-blue-200 rounded-full flex items-center justify-center mr-4">
|
||||
<span class="text-blue-800 font-bold">ML</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold">Marie Leroy</h4>
|
||||
<p class="text-gray-600 text-sm">Responsable opérations, LogiExpress</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-700 italic">"L'interface intuitive de Geosector nous a permis de former rapidement nos équipes. La visualisation en temps réel des tournées est un atout majeur pour notre activité quotidienne."</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
310
web/src/pages/ConditionsUtilisation.svelte
Normal file
310
web/src/pages/ConditionsUtilisation.svelte
Normal file
@@ -0,0 +1,310 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let isVisible = false;
|
||||
|
||||
// Fonction pour gérer la navigation et faire défiler la page vers le haut
|
||||
function handleNavigation(hash) {
|
||||
window.location.hash = hash;
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
isVisible = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="min-h-screen relative">
|
||||
<!-- En-tête de section -->
|
||||
<section class="text-white py-12 relative">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-6 transition-all duration-700 text-[#002C66]"
|
||||
class:translate-y-0={isVisible} class:opacity-100={isVisible}
|
||||
class:translate-y-10={!isVisible} class:opacity-0={!isVisible}>
|
||||
Conditions d'utilisation
|
||||
</h1>
|
||||
<p class="text-xl max-w-3xl mx-auto transition-all duration-700 delay-300 text-[#002C66]"
|
||||
class:translate-y-0={isVisible} class:opacity-100={isVisible}
|
||||
class:translate-y-10={!isVisible} class:opacity-0={!isVisible}>
|
||||
Règles et modalités d'utilisation de l'application Geosector
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contenu principal -->
|
||||
<section class="py-12">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="bg-white bg-opacity-70 backdrop-blur-sm rounded-lg p-8 shadow-lg">
|
||||
<div class="max-w-4xl mx-auto prose prose-blue">
|
||||
<p class="text-sm text-gray-500 mb-6">Dernière mise à jour : {new Date().toLocaleDateString('fr-FR', { year: 'numeric', month: 'long', day: 'numeric' })}</p>
|
||||
|
||||
<h2>1. Préambule</h2>
|
||||
<p>
|
||||
Les présentes conditions générales d'utilisation (ci-après dénommées "CGU") régissent l'utilisation de l'application Geosector (ci-après dénommée l'"Application"),
|
||||
accessible via le Web à l'adresse app.geosector.fr, ainsi que sur les plateformes iOS (Apple App Store) et Android (Google Play Store).
|
||||
</p>
|
||||
<p>
|
||||
Geosector est une application dédiée à la gestion de secteurs géographiques et de passages, permettant à ses utilisateurs d'optimiser
|
||||
leurs distributions et tournées. L'application est exploitée par [Nom de la société], dont le siège social est situé à [Adresse complète],
|
||||
immatriculée au Registre du Commerce et des Sociétés de [Ville] sous le numéro [Numéro RCS].
|
||||
</p>
|
||||
<p>
|
||||
En utilisant notre Application, vous acceptez de vous conformer aux présentes CGU. Si vous n'acceptez pas ces conditions,
|
||||
veuillez ne pas utiliser l'Application.
|
||||
</p>
|
||||
|
||||
<h2>2. Définitions</h2>
|
||||
<p>Dans les présentes CGU, les termes suivants ont la signification qui leur est attribuée ci-dessous :</p>
|
||||
<ul>
|
||||
<li><strong>"Application"</strong> désigne l'application Geosector, accessible via le Web, iOS et Android.</li>
|
||||
<li><strong>"Compte"</strong> désigne l'espace personnel de l'Utilisateur sur l'Application.</li>
|
||||
<li><strong>"Contenu"</strong> désigne toutes les informations et données (y compris les textes, images, vidéos, etc.) accessibles ou générées via l'Application.</li>
|
||||
<li><strong>"Fonctionnalités"</strong> désigne les services et outils proposés par l'Application.</li>
|
||||
<li><strong>"Utilisateur"</strong> désigne toute personne physique ou morale ayant accès à l'Application.</li>
|
||||
<li><strong>"Données Personnelles"</strong> désigne toute information se rapportant à une personne physique identifiée ou identifiable.</li>
|
||||
</ul>
|
||||
|
||||
<h2>3. Inscription et compte utilisateur</h2>
|
||||
|
||||
<h3>3.1 Conditions d'inscription</h3>
|
||||
<p>
|
||||
Pour utiliser l'ensemble des Fonctionnalités de l'Application, l'Utilisateur doit créer un Compte en fournissant
|
||||
les informations requises. L'Utilisateur s'engage à fournir des informations exactes, complètes et à jour.
|
||||
Toute fausse déclaration peut entraîner la suspension ou la suppression du Compte.
|
||||
</p>
|
||||
|
||||
<h3>3.2 Sécurité du compte</h3>
|
||||
<p>
|
||||
L'Utilisateur est responsable de la confidentialité de ses identifiants de connexion (nom d'utilisateur et mot de passe)
|
||||
et s'engage à ne pas les communiquer à des tiers. Toute connexion effectuée en utilisant les identifiants de l'Utilisateur
|
||||
sera présumée avoir été effectuée par celui-ci.
|
||||
</p>
|
||||
|
||||
<h3>3.3 Suspension ou suppression de compte</h3>
|
||||
<p>
|
||||
Geosector se réserve le droit de suspendre ou de supprimer un Compte en cas de :
|
||||
</p>
|
||||
<ul>
|
||||
<li>Non-respect des présentes CGU</li>
|
||||
<li>Inactivité prolongée</li>
|
||||
<li>Utilisation frauduleuse ou abusive de l'Application</li>
|
||||
<li>Non-paiement des services payants</li>
|
||||
<li>Demande de l'Utilisateur</li>
|
||||
</ul>
|
||||
|
||||
<h2>4. Utilisation de l'Application</h2>
|
||||
|
||||
<h3>4.1 Licence d'utilisation</h3>
|
||||
<p>
|
||||
Sous réserve du respect des présentes CGU, Geosector accorde à l'Utilisateur une licence limitée, non exclusive,
|
||||
non transférable et révocable pour accéder et utiliser l'Application à des fins professionnelles ou personnelles.
|
||||
</p>
|
||||
|
||||
<h3>4.2 Restrictions d'utilisation</h3>
|
||||
<p>L'Utilisateur s'engage à ne pas :</p>
|
||||
<ul>
|
||||
<li>Utiliser l'Application à des fins illégales ou interdites par les présentes CGU</li>
|
||||
<li>Tenter de perturber le fonctionnement de l'Application ou d'accéder aux données d'autres Utilisateurs</li>
|
||||
<li>Utiliser des robots, spiders, scrapers ou autres moyens automatisés pour accéder à l'Application</li>
|
||||
<li>Contourner les mesures de sécurité de l'Application</li>
|
||||
<li>Reproduire, copier, vendre, revendre ou exploiter toute partie de l'Application sans autorisation écrite préalable</li>
|
||||
<li>Utiliser l'Application d'une manière qui pourrait endommager, désactiver, surcharger ou altérer les serveurs ou les réseaux</li>
|
||||
</ul>
|
||||
|
||||
<h3>4.3 Contenu de l'Utilisateur</h3>
|
||||
<p>
|
||||
En publiant, téléchargeant, ou partageant du Contenu via l'Application, l'Utilisateur accorde à Geosector une licence mondiale,
|
||||
non exclusive, transférable, libre de redevances pour utiliser, reproduire, modifier, adapter, publier, traduire et distribuer ce Contenu
|
||||
dans le cadre de l'exploitation et de l'amélioration de l'Application.
|
||||
</p>
|
||||
<p>
|
||||
L'Utilisateur garantit qu'il dispose des droits nécessaires sur le Contenu qu'il partage et que ce Contenu n'enfreint pas
|
||||
les droits de tiers ni les lois applicables.
|
||||
</p>
|
||||
|
||||
<h2>5. Services payants et abonnements</h2>
|
||||
|
||||
<h3>5.1 Offres et tarifs</h3>
|
||||
<p>
|
||||
Certaines Fonctionnalités de l'Application peuvent être soumises à paiement. Les offres et tarifs sont disponibles sur le site web
|
||||
de Geosector ou directement dans l'Application. Geosector se réserve le droit de modifier ses offres et tarifs à tout moment,
|
||||
moyennant un préavis raisonnable.
|
||||
</p>
|
||||
|
||||
<h3>5.2 Paiement et facturation</h3>
|
||||
<p>
|
||||
Les paiements sont effectués par carte bancaire ou tout autre moyen proposé dans l'Application. Pour les abonnements,
|
||||
le paiement est automatiquement renouvelé à la fin de chaque période, sauf résiliation par l'Utilisateur avant la date de renouvellement.
|
||||
</p>
|
||||
<p>
|
||||
Une facture électronique est mise à disposition de l'Utilisateur pour chaque paiement effectué.
|
||||
</p>
|
||||
|
||||
<h3>5.3 Politique de remboursement</h3>
|
||||
<p>
|
||||
Conformément à la législation applicable, l'Utilisateur bénéficie d'un droit de rétractation de 14 jours à compter de la souscription
|
||||
à un service payant, sauf si l'exécution du service a commencé avec son accord avant la fin de ce délai.
|
||||
</p>
|
||||
<p>
|
||||
Aucun remboursement ne sera accordé après l'expiration du délai de rétractation, sauf en cas de dysfonctionnement majeur de l'Application
|
||||
imputable à Geosector.
|
||||
</p>
|
||||
|
||||
<h2>6. Propriété intellectuelle</h2>
|
||||
|
||||
<h3>6.1 Droits de Geosector</h3>
|
||||
<p>
|
||||
L'Application, y compris son contenu, sa structure, ses fonctionnalités, son code source, ses interfaces, son design,
|
||||
ses logos et ses marques, est la propriété exclusive de Geosector ou de ses concédants de licence.
|
||||
Ces éléments sont protégés par les lois relatives à la propriété intellectuelle.
|
||||
</p>
|
||||
|
||||
<h3>6.2 Droits des Utilisateurs</h3>
|
||||
<p>
|
||||
L'Utilisateur conserve tous les droits de propriété intellectuelle sur le Contenu qu'il crée et partage via l'Application,
|
||||
sous réserve de la licence accordée à Geosector conformément à l'article 4.3.
|
||||
</p>
|
||||
|
||||
<h3>6.3 Signalement d'une violation</h3>
|
||||
<p>
|
||||
Si vous pensez que votre contenu a été utilisé d'une manière qui constitue une violation de vos droits de propriété intellectuelle,
|
||||
veuillez nous contacter à l'adresse suivante : [adresse email].
|
||||
</p>
|
||||
|
||||
<h2>7. Confidentialité et données personnelles</h2>
|
||||
<p>
|
||||
La collecte et le traitement des Données Personnelles des Utilisateurs sont régis par notre Politique de Confidentialité,
|
||||
disponible à l'adresse suivante : <a href="#politique-confidentialite" class="text-blue-600 hover:underline" on:click|preventDefault={() => handleNavigation('politique-confidentialite')}>Politique de confidentialité</a>.
|
||||
</p>
|
||||
|
||||
<h2>8. Limitation de responsabilité</h2>
|
||||
|
||||
<h3>8.1 Disponibilité de l'Application</h3>
|
||||
<p>
|
||||
Geosector s'efforce de maintenir l'Application accessible 24 heures sur 24 et 7 jours sur 7. Cependant, l'accès peut être
|
||||
temporairement suspendu, sans préavis, en raison de maintenance technique, de mise à jour ou pour toute autre raison.
|
||||
</p>
|
||||
<p>
|
||||
Geosector ne peut être tenu responsable de tout dommage résultant de l'indisponibilité temporaire de l'Application.
|
||||
</p>
|
||||
|
||||
<h3>8.2 Contenus et services tiers</h3>
|
||||
<p>
|
||||
L'Application peut contenir des liens vers des sites web ou services tiers. Geosector n'exerce aucun contrôle sur ces sites et services
|
||||
et n'assume aucune responsabilité quant à leur contenu ou leurs pratiques.
|
||||
</p>
|
||||
|
||||
<h3>8.3 Limitation générale de responsabilité</h3>
|
||||
<p>
|
||||
Dans toute la mesure permise par la loi applicable, Geosector ne pourra être tenu responsable de tout dommage indirect,
|
||||
spécial, accessoire, consécutif ou punitif, y compris les pertes de profits, de revenus, de données ou d'opportunités commerciales,
|
||||
résultant de l'utilisation ou de l'impossibilité d'utiliser l'Application.
|
||||
</p>
|
||||
<p>
|
||||
La responsabilité totale de Geosector envers l'Utilisateur pour toute réclamation découlant des présentes CGU ne pourra excéder
|
||||
le montant payé par l'Utilisateur à Geosector au cours des douze (12) mois précédant le fait générateur de la responsabilité.
|
||||
</p>
|
||||
|
||||
<h2>9. Modifications des CGU</h2>
|
||||
<p>
|
||||
Geosector se réserve le droit de modifier les présentes CGU à tout moment. Les Utilisateurs seront informés des modifications
|
||||
par le biais d'une notification dans l'Application ou par e-mail.
|
||||
</p>
|
||||
<p>
|
||||
Les modifications prendront effet à la date indiquée dans la notification. En continuant à utiliser l'Application après cette date,
|
||||
l'Utilisateur accepte les CGU modifiées.
|
||||
</p>
|
||||
<p>
|
||||
Si l'Utilisateur n'accepte pas les modifications, il doit cesser d'utiliser l'Application et, le cas échéant, supprimer son Compte.
|
||||
</p>
|
||||
|
||||
<h2>10. Résiliation</h2>
|
||||
|
||||
<h3>10.1 Résiliation par l'Utilisateur</h3>
|
||||
<p>
|
||||
L'Utilisateur peut, à tout moment, cesser d'utiliser l'Application et supprimer son Compte en suivant la procédure prévue à cet effet
|
||||
dans les paramètres de l'Application.
|
||||
</p>
|
||||
|
||||
<h3>10.2 Résiliation par Geosector</h3>
|
||||
<p>
|
||||
Geosector peut, à sa discrétion, suspendre ou résilier l'accès de l'Utilisateur à l'Application en cas de violation des présentes CGU,
|
||||
sans préjudice de tout autre droit ou recours.
|
||||
</p>
|
||||
|
||||
<h3>10.3 Conséquences de la résiliation</h3>
|
||||
<p>
|
||||
En cas de résiliation, l'Utilisateur perd l'accès à son Compte et à toutes les Fonctionnalités de l'Application.
|
||||
Les sections des présentes CGU relatives à la propriété intellectuelle, à la limitation de responsabilité et au règlement des litiges
|
||||
survivront à la résiliation.
|
||||
</p>
|
||||
|
||||
<h2>11. Dispositions spécifiques aux applications mobiles</h2>
|
||||
|
||||
<h3>11.1 Application iOS (Apple App Store)</h3>
|
||||
<p>
|
||||
Si vous téléchargez l'Application via l'App Store d'Apple, vous reconnaissez et acceptez que :
|
||||
</p>
|
||||
<ul>
|
||||
<li>Ces CGU sont conclues entre vous et Geosector, et non avec Apple</li>
|
||||
<li>Apple n'a aucune obligation de fournir des services de maintenance ou d'assistance concernant l'Application</li>
|
||||
<li>En cas de non-conformité de l'Application avec une garantie applicable, vous pouvez en informer Apple, qui pourra vous rembourser le prix d'achat</li>
|
||||
<li>Apple n'est pas responsable du traitement des réclamations ou de la responsabilité liée à l'Application</li>
|
||||
<li>En cas de réclamation d'un tiers selon laquelle l'Application enfreint ses droits de propriété intellectuelle, Apple n'est pas responsable de l'enquête, de la défense, du règlement et de la décharge de cette réclamation</li>
|
||||
<li>Vous devez vous conformer aux conditions d'utilisation de l'App Store d'Apple lors de l'utilisation de l'Application</li>
|
||||
</ul>
|
||||
|
||||
<h3>11.2 Application Android (Google Play)</h3>
|
||||
<p>
|
||||
Si vous téléchargez l'Application via Google Play, vous reconnaissez et acceptez que :
|
||||
</p>
|
||||
<ul>
|
||||
<li>Ces CGU sont conclues entre vous et Geosector, et non avec Google</li>
|
||||
<li>L'utilisation de l'Application doit respecter les conditions d'utilisation de Google Play</li>
|
||||
<li>Google n'a aucune obligation de fournir des services de maintenance ou d'assistance concernant l'Application</li>
|
||||
</ul>
|
||||
|
||||
<h2>12. Dispositions diverses</h2>
|
||||
|
||||
<h3>12.1 Droit applicable et juridiction compétente</h3>
|
||||
<p>
|
||||
Les présentes CGU sont régies par le droit français. Tout litige relatif à leur interprétation ou à leur exécution relève,
|
||||
à défaut d'accord amiable, de la compétence exclusive des tribunaux français compétents.
|
||||
</p>
|
||||
|
||||
<h3>12.2 Indépendance des clauses</h3>
|
||||
<p>
|
||||
Si une ou plusieurs dispositions des présentes CGU sont tenues pour non valides ou déclarées comme telles en application d'une loi,
|
||||
d'un règlement ou à la suite d'une décision définitive d'une juridiction compétente, les autres stipulations garderont toute leur force
|
||||
et leur portée.
|
||||
</p>
|
||||
|
||||
<h3>12.3 Non-renonciation</h3>
|
||||
<p>
|
||||
Le fait pour Geosector de ne pas se prévaloir d'un manquement de l'Utilisateur à l'une quelconque des obligations visées dans les présentes CGU
|
||||
ne saurait être interprété comme une renonciation à s'en prévaloir ultérieurement.
|
||||
</p>
|
||||
|
||||
<h3>12.4 Communication</h3>
|
||||
<p>
|
||||
Toute notification ou communication dans le cadre des présentes CGU doit être adressée à Geosector par e-mail à l'adresse suivante :
|
||||
[adresse email] ou par courrier postal à l'adresse suivante : [adresse postale].
|
||||
</p>
|
||||
|
||||
<h2>13. Contact</h2>
|
||||
<p>
|
||||
Pour toute question concernant les présentes CGU, veuillez nous contacter à :
|
||||
</p>
|
||||
<p>
|
||||
<strong>Geosector</strong><br />
|
||||
E-mail : <a href="mailto:support@geosector.fr" class="text-blue-600 hover:underline">support@geosector.fr</a><br />
|
||||
Adresse : [Adresse de l'entreprise]<br />
|
||||
Téléphone : +33 (0)1 23 45 67 89
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
200
web/src/pages/Contact.svelte
Normal file
200
web/src/pages/Contact.svelte
Normal file
@@ -0,0 +1,200 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let isVisible = false;
|
||||
let formData = {
|
||||
nom: '',
|
||||
email: '',
|
||||
telephone: '',
|
||||
entreprise: '',
|
||||
message: '',
|
||||
newsletter: false,
|
||||
};
|
||||
let formSubmitted = false;
|
||||
|
||||
function handleSubmit() {
|
||||
// Simuler l'envoi du formulaire
|
||||
formSubmitted = true;
|
||||
// Dans une application réelle, vous enverriez les données à un serveur ici
|
||||
console.log('Formulaire soumis:', formData);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
isVisible = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="min-h-screen relative">
|
||||
<!-- Section Hero -->
|
||||
<section class="text-white py-12 relative">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-6 transition-all duration-700 text-[#002C66]" class:translate-y-0={isVisible} class:opacity-100={isVisible} class:translate-y-10={!isVisible} class:opacity-0={!isVisible}>Contactez-nous</h1>
|
||||
<p class="text-xl max-w-3xl mx-auto transition-all duration-700 delay-300 text-[#002C66]" class:translate-y-0={isVisible} class:opacity-100={isVisible} class:translate-y-10={!isVisible} class:opacity-0={!isVisible}>Notre équipe est à votre disposition pour répondre à toutes vos questions et vous accompagner dans votre projet.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section Formulaire de contact -->
|
||||
<section class="py-16">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="bg-white bg-opacity-70 backdrop-blur-sm rounded-lg p-8 shadow-lg">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
<!-- Informations de contact -->
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold mb-8">Nos coordonnées</h2>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-start">
|
||||
<div class="bg-blue-100 rounded-full p-3 mr-4 flex-shrink-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg mb-1">Téléphone</h3>
|
||||
<p class="text-gray-600">+33 (0)1 23 45 67 89</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start">
|
||||
<div class="bg-blue-100 rounded-full p-3 mr-4 flex-shrink-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg mb-1">Email</h3>
|
||||
<p class="text-gray-600">contact@geosector.fr</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex items-start">
|
||||
<div class="bg-blue-100 rounded-full p-3 mr-4 flex-shrink-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg mb-1">Horaires d'ouverture</h3>
|
||||
<p class="text-gray-600">Lundi - Vendredi: 9h00 - 18h00<br />Samedi - Dimanche: Fermé</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-10">
|
||||
<h3 class="font-semibold text-lg mb-4">Suivez-nous</h3>
|
||||
<div class="flex space-x-4">
|
||||
<a href="https://facebook.com" aria-label="Suivez-nous sur Facebook" class="bg-blue-100 hover:bg-blue-200 text-blue-600 p-3 rounded-full transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://twitter.com" aria-label="Suivez-nous sur Twitter" class="bg-blue-100 hover:bg-blue-200 text-blue-600 p-3 rounded-full transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://linkedin.com" aria-label="Suivez-nous sur LinkedIn" class="bg-blue-100 hover:bg-blue-200 text-blue-600 p-3 rounded-full transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Formulaire de contact -->
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold mb-8">Envoyez-nous un message</h2>
|
||||
|
||||
{#if formSubmitted}
|
||||
<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-6">
|
||||
<p class="font-semibold">Message envoyé avec succès !</p>
|
||||
<p>Nous vous répondrons dans les plus brefs délais.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<form on:submit|preventDefault={handleSubmit} class="space-y-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label for="nom" class="block text-gray-700 font-medium mb-2">Nom complet *</label>
|
||||
<input type="text" id="nom" bind:value={formData.nom} required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email" class="block text-gray-700 font-medium mb-2">Email *</label>
|
||||
<input type="email" id="email" bind:value={formData.email} required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label for="telephone" class="block text-gray-700 font-medium mb-2">Téléphone</label>
|
||||
<input type="tel" id="telephone" bind:value={formData.telephone} class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="entreprise" class="block text-gray-700 font-medium mb-2">Entreprise</label>
|
||||
<input type="text" id="entreprise" bind:value={formData.entreprise} class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="message" class="block text-gray-700 font-medium mb-2">Message *</label>
|
||||
<textarea id="message" bind:value={formData.message} required rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" id="newsletter" bind:checked={formData.newsletter} class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" />
|
||||
<label for="newsletter" class="ml-2 block text-gray-700"> Je souhaite recevoir la newsletter et les actualités de Geosector </label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition-colors"> Envoyer le message </button>
|
||||
</div>
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Section FAQ -->
|
||||
<section class="py-16">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="bg-white bg-opacity-70 backdrop-blur-sm rounded-lg p-8 shadow-lg">
|
||||
<h2 class="text-3xl font-bold text-center mb-12">Questions fréquentes</h2>
|
||||
|
||||
<div class="max-w-3xl mx-auto space-y-6">
|
||||
<div class="bg-white p-6 rounded-lg shadow-md">
|
||||
<h3 class="text-xl font-semibold mb-2">Comment puis-je obtenir une démonstration de Geosector ?</h3>
|
||||
<p class="text-gray-600">Vous pouvez demander une démonstration en remplissant le formulaire de contact ci-dessus ou en nous appelant directement. Un de nos conseillers vous contactera pour organiser une session personnalisée.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-6 rounded-lg shadow-md">
|
||||
<h3 class="text-xl font-semibold mb-2">Combien de temps dure la période d'essai ?</h3>
|
||||
<p class="text-gray-600">Nous proposons une période d'essai gratuite de 14 jours avec toutes les fonctionnalités disponibles. Aucune carte de crédit n'est requise pour commencer votre essai.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-6 rounded-lg shadow-md">
|
||||
<h3 class="text-xl font-semibold mb-2">Proposez-vous des formations pour utiliser votre logiciel ?</h3>
|
||||
<p class="text-gray-600">Oui, nous proposons des sessions de formation complètes pour vous aider à tirer le meilleur parti de Geosector. Ces formations peuvent être réalisées en ligne ou dans vos locaux selon vos préférences.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-6 rounded-lg shadow-md">
|
||||
<h3 class="text-xl font-semibold mb-2">Quels types de support technique proposez-vous ?</h3>
|
||||
<p class="text-gray-600">Nous offrons un support technique par email, téléphone et chat en direct pendant les heures de bureau. Nos clients avec des forfaits premium bénéficient d'un support 24/7.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
244
web/src/pages/Fonctionnalites.svelte
Normal file
244
web/src/pages/Fonctionnalites.svelte
Normal file
@@ -0,0 +1,244 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let isVisible = false;
|
||||
|
||||
onMount(() => {
|
||||
isVisible = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="min-h-screen relative">
|
||||
<!-- Section Hero -->
|
||||
<section class="text-white py-12 relative">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-6 transition-all duration-700 text-[#002C66]" class:translate-y-0={isVisible} class:opacity-100={isVisible} class:translate-y-10={!isVisible} class:opacity-0={!isVisible}>Fonctionnalités</h1>
|
||||
<p class="text-xl max-w-3xl mx-auto transition-all duration-700 delay-300 text-[#002C66]" class:translate-y-0={isVisible} class:opacity-100={isVisible} class:translate-y-10={!isVisible} class:opacity-0={!isVisible}>Découvrez les outils puissants qui font de Geosector la solution idéale pour la gestion de vos distributions.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section Fonctionnalités Principales -->
|
||||
<section class="py-16">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="bg-white bg-opacity-70 backdrop-blur-sm rounded-lg p-8 shadow-lg">
|
||||
<h2 class="text-3xl font-bold text-center mb-12">Fonctionnalités principales</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
<!-- Fonctionnalité 1 -->
|
||||
<div class="flex flex-col md:flex-row items-start">
|
||||
<div class="bg-blue-100 rounded-lg p-4 mb-4 md:mb-0 md:mr-6 flex-shrink-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold mb-2">Cartographie avancée</h3>
|
||||
<p class="text-gray-600 mb-4">Visualisez vos tournées sur des cartes interactives avec des données en temps réel sur le trafic et les conditions météorologiques.</p>
|
||||
<ul class="space-y-2">
|
||||
<li class="flex items-start">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Cartes détaillées avec points d'intérêt</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Suivi GPS en temps réel</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Alertes de trafic et d'incidents</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fonctionnalité 2 -->
|
||||
<div class="flex flex-col md:flex-row items-start">
|
||||
<div class="bg-blue-100 rounded-lg p-4 mb-4 md:mb-0 md:mr-6 flex-shrink-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold mb-2">Optimisation des itinéraires</h3>
|
||||
<p class="text-gray-600 mb-4">Nos algorithmes avancés calculent les itinéraires les plus efficaces en tenant compte de multiples facteurs.</p>
|
||||
<ul class="space-y-2">
|
||||
<li class="flex items-start">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Réduction des coûts de carburant jusqu'à 30%</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Prise en compte des contraintes horaires</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Adaptation dynamique aux conditions réelles</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fonctionnalité 3 -->
|
||||
<div class="flex flex-col md:flex-row items-start">
|
||||
<div class="bg-blue-100 rounded-lg p-4 mb-4 md:mb-0 md:mr-6 flex-shrink-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold mb-2">Planification intelligente</h3>
|
||||
<p class="text-gray-600 mb-4">Planifiez vos tournées à l'avance et adaptez-les facilement en fonction des imprévus.</p>
|
||||
<ul class="space-y-2">
|
||||
<li class="flex items-start">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Calendrier interactif avec vue mensuelle/hebdomadaire/quotidienne</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Gestion des priorités et des urgences</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Notifications automatiques pour les changements</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fonctionnalité 4 -->
|
||||
<div class="flex flex-col md:flex-row items-start">
|
||||
<div class="bg-blue-100 rounded-lg p-4 mb-4 md:mb-0 md:mr-6 flex-shrink-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold mb-2">Rapports et analyses</h3>
|
||||
<p class="text-gray-600 mb-4">Obtenez des insights précieux sur vos opérations grâce à nos outils d'analyse avancés.</p>
|
||||
<ul class="space-y-2">
|
||||
<li class="flex items-start">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Tableaux de bord personnalisables</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Exportation des données en plusieurs formats</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Indicateurs de performance clés (KPIs)</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section Fonctionnalités Mobile -->
|
||||
<section class="py-16">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="bg-white bg-opacity-70 backdrop-blur-sm rounded-lg p-8 shadow-lg">
|
||||
<h2 class="text-3xl font-bold text-center mb-12">Application mobile</h2>
|
||||
|
||||
<div class="flex flex-col md:flex-row items-center">
|
||||
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
|
||||
<h3 class="text-2xl font-semibold mb-4">Emportez Geosector partout avec vous</h3>
|
||||
<p class="text-gray-600 mb-6">Notre application mobile offre toutes les fonctionnalités essentielles pour gérer vos distributions en déplacement.</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start">
|
||||
<div class="bg-blue-100 rounded-full p-2 mr-4 flex-shrink-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold">Interface adaptée aux mobiles</h4>
|
||||
<p class="text-gray-600">Expérience utilisateur optimisée pour les écrans tactiles et la navigation mobile.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start">
|
||||
<div class="bg-blue-100 rounded-full p-2 mr-4 flex-shrink-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold">Mode hors ligne</h4>
|
||||
<p class="text-gray-600">Continuez à travailler même sans connexion internet, avec synchronisation automatique.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start">
|
||||
<div class="bg-blue-100 rounded-full p-2 mr-4 flex-shrink-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold">Notifications push</h4>
|
||||
<p class="text-gray-600">Restez informé des changements importants et des mises à jour en temps réel.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 flex space-x-4">
|
||||
<a href="/" class="inline-block">
|
||||
<img src="https://via.placeholder.com/150x50?text=App+Store" alt="Télécharger sur l'App Store" class="h-12" />
|
||||
</a>
|
||||
<a href="/" class="inline-block">
|
||||
<img src="https://via.placeholder.com/150x50?text=Play+Store" alt="Télécharger sur Google Play" class="h-12" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md:w-1/2">
|
||||
<div class="bg-white p-4 rounded-xl shadow-xl max-w-xs mx-auto">
|
||||
<img src="https://via.placeholder.com/300x600?text=App+Screenshot" alt="Capture d'écran de l'application mobile" class="rounded-lg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section CTA -->
|
||||
<section class="py-16 text-white">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<div class="bg-blue-900 bg-opacity-90 backdrop-blur-sm rounded-lg p-8 shadow-lg">
|
||||
<h2 class="text-3xl font-bold mb-6">Prêt à optimiser vos distributions ?</h2>
|
||||
<p class="text-xl mb-8 max-w-3xl mx-auto">Rejoignez les milliers d'entreprises qui font confiance à Geosector pour améliorer leur efficacité opérationnelle.</p>
|
||||
<a href="#contact" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-lg inline-block transition-colors text-lg"> Demander une démo </a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
118
web/src/pages/MentionsLegales.svelte
Normal file
118
web/src/pages/MentionsLegales.svelte
Normal file
@@ -0,0 +1,118 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let isVisible = false;
|
||||
|
||||
onMount(() => {
|
||||
isVisible = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="min-h-screen relative">
|
||||
<!-- Section Hero -->
|
||||
<section class="text-white py-12 relative">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-6 transition-all duration-700 text-[#002C66]" class:translate-y-0={isVisible} class:opacity-100={isVisible} class:translate-y-10={!isVisible} class:opacity-0={!isVisible}>Mentions Légales</h1>
|
||||
<p class="text-xl max-w-3xl mx-auto transition-all duration-700 delay-300 text-[#002C66]" class:translate-y-0={isVisible} class:opacity-100={isVisible} class:translate-y-10={!isVisible} class:opacity-0={!isVisible}>
|
||||
Informations juridiques relatives à notre site web et application mobile
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section Contenu -->
|
||||
<section class="py-16">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="bg-white bg-opacity-70 backdrop-blur-sm rounded-lg p-8 shadow-lg mb-10">
|
||||
<h2 class="text-2xl font-bold mb-6 text-[#002C66]">1. Éditeur du site et de l'application</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<p>Le site web et l'application mobile Geosector sont édités par :</p>
|
||||
<p class="font-semibold">Geosector</p>
|
||||
<p>SIRET : [Votre numéro SIRET]</p>
|
||||
<p>Adresse : [Votre adresse]</p>
|
||||
<p>Email : contact@geosector.fr</p>
|
||||
<p>Téléphone : [Votre numéro de téléphone]</p>
|
||||
<p>Directeur de la publication : [Nom du directeur de publication]</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white bg-opacity-70 backdrop-blur-sm rounded-lg p-8 shadow-lg mb-10">
|
||||
<h2 class="text-2xl font-bold mb-6 text-[#002C66]">2. Hébergement</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<p>Le site web et l'application mobile Geosector sont hébergés par :</p>
|
||||
<p class="font-semibold">[Nom de l'hébergeur]</p>
|
||||
<p>Adresse : [Adresse de l'hébergeur]</p>
|
||||
<p>Site web : [Site web de l'hébergeur]</p>
|
||||
<p>Email : [Email de l'hébergeur]</p>
|
||||
<p>Téléphone : [Téléphone de l'hébergeur]</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white bg-opacity-70 backdrop-blur-sm rounded-lg p-8 shadow-lg mb-10">
|
||||
<h2 class="text-2xl font-bold mb-6 text-[#002C66]">3. Propriété intellectuelle</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<p>L'ensemble du contenu du site web et de l'application mobile Geosector, incluant sans limitation les textes, graphiques, images, logos, icônes, photographies, est la propriété exclusive de Geosector et est protégé par les lois françaises et internationales relatives à la propriété intellectuelle.</p>
|
||||
|
||||
<p>Toute reproduction, représentation, modification, publication, transmission, adaptation, totale ou partielle des éléments du site ou de l'application, quel que soit le moyen ou le procédé utilisé, est interdite sans autorisation écrite préalable de Geosector.</p>
|
||||
|
||||
<p>Toute utilisation non autorisée des contenus, œuvres ou marques constitue une contrefaçon sanctionnée par le Code de la propriété intellectuelle.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white bg-opacity-70 backdrop-blur-sm rounded-lg p-8 shadow-lg mb-10">
|
||||
<h2 class="text-2xl font-bold mb-6 text-[#002C66]">4. Liens hypertextes</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<p>Le site web et l'application Geosector peuvent contenir des liens hypertextes vers d'autres sites internet ou applications.</p>
|
||||
|
||||
<p>Geosector n'a pas la possibilité de vérifier le contenu des sites ainsi visités, et n'assumera en conséquence aucune responsabilité de ce fait.</p>
|
||||
|
||||
<p>La création de liens hypertextes vers le site web ou l'application Geosector est soumise à l'accord préalable de l'éditeur.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white bg-opacity-70 backdrop-blur-sm rounded-lg p-8 shadow-lg mb-10">
|
||||
<h2 class="text-2xl font-bold mb-6 text-[#002C66]">5. Limitation de responsabilité</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<p>Geosector s'efforce d'assurer au mieux de ses possibilités l'exactitude et la mise à jour des informations diffusées sur son site web et son application mobile, dont elle se réserve le droit de corriger, à tout moment et sans préavis, le contenu.</p>
|
||||
|
||||
<p>Toutefois, Geosector ne peut garantir l'exactitude, la précision ou l'exhaustivité des informations mises à disposition sur son site web et son application.</p>
|
||||
|
||||
<p>En conséquence, Geosector décline toute responsabilité :</p>
|
||||
<ul class="list-disc pl-6 space-y-2">
|
||||
<li>Pour toute imprécision, inexactitude ou omission portant sur des informations disponibles sur le site web ou l'application ;</li>
|
||||
<li>Pour tous dommages résultant d'une intrusion frauduleuse d'un tiers ayant entraîné une modification des informations ou éléments mis à disposition sur le site web ou l'application ;</li>
|
||||
<li>Et plus généralement, pour tous dommages, directs ou indirects, qu'elles qu'en soient les causes, origines, natures ou conséquences, provoqués en raison de l'accès de quiconque au site web ou à l'application ou de l'impossibilité d'y accéder, ainsi que l'utilisation du site web ou de l'application et/ou du crédit accordé à une quelconque information provenant directement ou indirectement de ces derniers.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white bg-opacity-70 backdrop-blur-sm rounded-lg p-8 shadow-lg mb-10">
|
||||
<h2 class="text-2xl font-bold mb-6 text-[#002C66]">6. Loi applicable et juridiction</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<p>Les présentes mentions légales sont régies par la loi française. En cas de litige, les tribunaux français seront seuls compétents.</p>
|
||||
|
||||
<p>Pour toute question relative à l'application des présentes mentions légales, vous pouvez nous contacter à l'adresse email : contact@geosector.fr</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white bg-opacity-70 backdrop-blur-sm rounded-lg p-8 shadow-lg">
|
||||
<h2 class="text-2xl font-bold mb-6 text-[#002C66]">7. Modifications</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<p>Geosector se réserve le droit de modifier les présentes mentions légales à tout moment. L'utilisateur est invité à les consulter régulièrement.</p>
|
||||
|
||||
<p>Dernière mise à jour : {new Date().toLocaleDateString('fr-FR', { year: 'numeric', month: 'long', day: 'numeric' })}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
216
web/src/pages/PolitiqueConfidentialite.svelte
Normal file
216
web/src/pages/PolitiqueConfidentialite.svelte
Normal file
@@ -0,0 +1,216 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let isVisible = false;
|
||||
|
||||
// Fonction pour gérer la navigation et faire défiler la page vers le haut
|
||||
function handleNavigation(hash) {
|
||||
window.location.hash = hash;
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
isVisible = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="min-h-screen relative">
|
||||
<!-- En-tête de section -->
|
||||
<section class="text-white py-12 relative">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-6 transition-all duration-700 text-[#002C66]"
|
||||
class:translate-y-0={isVisible} class:opacity-100={isVisible}
|
||||
class:translate-y-10={!isVisible} class:opacity-0={!isVisible}>
|
||||
Politique de confidentialité
|
||||
</h1>
|
||||
<p class="text-xl max-w-3xl mx-auto transition-all duration-700 delay-300 text-[#002C66]"
|
||||
class:translate-y-0={isVisible} class:opacity-100={isVisible}
|
||||
class:translate-y-10={!isVisible} class:opacity-0={!isVisible}>
|
||||
Protection de vos données personnelles et respect de votre vie privée
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contenu principal -->
|
||||
<section class="py-12">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="bg-white bg-opacity-70 backdrop-blur-sm rounded-lg p-8 shadow-lg">
|
||||
<div class="max-w-4xl mx-auto prose prose-blue">
|
||||
<p class="text-sm text-gray-500 mb-6">Dernière mise à jour : {new Date().toLocaleDateString('fr-FR', { year: 'numeric', month: 'long', day: 'numeric' })}</p>
|
||||
|
||||
<h2>Introduction</h2>
|
||||
<p>
|
||||
Cette politique de confidentialité s'applique à l'application Geosector, disponible sur le Web, iOS et Android,
|
||||
ainsi qu'à tous les services associés (collectivement désignés par "Geosector", "nous", "notre" ou "nos").
|
||||
</p>
|
||||
<p>
|
||||
Chez Geosector, nous accordons une grande importance à la protection de vos données personnelles.
|
||||
Cette politique décrit quelles informations nous collectons, comment nous les utilisons,
|
||||
et quels choix vous avez concernant ces données.
|
||||
</p>
|
||||
<p>
|
||||
Cette politique de confidentialité doit être lue conjointement avec nos <a href="#conditions-utilisation" class="text-blue-600 hover:underline" on:click|preventDefault={() => handleNavigation('conditions-utilisation')}>Conditions d'utilisation</a>, qui régissent votre utilisation de notre application.
|
||||
</p>
|
||||
|
||||
<h2>Quelles informations collectons-nous ?</h2>
|
||||
|
||||
<h3>1. Informations que vous nous fournissez</h3>
|
||||
<ul>
|
||||
<li><strong>Informations de compte :</strong> Lors de l'inscription, nous collectons votre nom, prénom, adresse e-mail, et mot de passe.</li>
|
||||
<li><strong>Informations de profil :</strong> Vous pouvez nous fournir des informations supplémentaires comme votre fonction, l'organisation à laquelle vous appartenez, et votre photo de profil.</li>
|
||||
<li><strong>Contenu utilisateur :</strong> Les informations que vous créez, téléchargez ou partagez via notre application, notamment les secteurs géographiques, les passages, et les commentaires.</li>
|
||||
<li><strong>Communications :</strong> Lorsque vous nous contactez, nous conservons un historique de ces communications.</li>
|
||||
</ul>
|
||||
|
||||
<h3>2. Informations collectées automatiquement</h3>
|
||||
<ul>
|
||||
<li><strong>Données d'utilisation :</strong> Informations sur vos interactions avec notre application, comme les fonctionnalités utilisées, les pages visitées et le temps passé.</li>
|
||||
<li><strong>Informations sur l'appareil :</strong> Type d'appareil, système d'exploitation, version de l'application, langue, fuseau horaire et autres caractéristiques techniques.</li>
|
||||
<li><strong>Données de localisation :</strong> Avec votre consentement, nous collectons des données de géolocalisation précises pour vous permettre d'utiliser les fonctionnalités cartographiques et de secteurs.</li>
|
||||
<li><strong>Cookies et technologies similaires :</strong> Sur notre version web, nous utilisons des cookies et des technologies similaires pour améliorer votre expérience. Pour plus d'informations, consultez notre politique relative aux cookies.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Comment utilisons-nous vos informations ?</h2>
|
||||
<p>Nous utilisons vos informations pour les finalités suivantes :</p>
|
||||
<ul>
|
||||
<li>Fournir, maintenir et améliorer notre application et ses fonctionnalités</li>
|
||||
<li>Créer et gérer votre compte</li>
|
||||
<li>Traiter vos transactions et paiements</li>
|
||||
<li>Vous envoyer des informations techniques, des mises à jour, des alertes de sécurité et des messages administratifs</li>
|
||||
<li>Répondre à vos commentaires et questions et vous fournir un support client</li>
|
||||
<li>Communiquer avec vous à propos de produits, services, offres et événements</li>
|
||||
<li>Surveiller et analyser les tendances, l'utilisation et les activités liées à notre application</li>
|
||||
<li>Détecter, prévenir et résoudre les problèmes techniques et de sécurité</li>
|
||||
<li>Se conformer aux obligations légales</li>
|
||||
</ul>
|
||||
|
||||
<h2>Base légale du traitement (pour les utilisateurs de l'EEE et du Royaume-Uni)</h2>
|
||||
<p>Pour les utilisateurs de l'Espace économique européen (EEE) et du Royaume-Uni, nous traitons vos données personnelles sur les bases légales suivantes :</p>
|
||||
<ul>
|
||||
<li><strong>Exécution d'un contrat :</strong> Lorsque le traitement est nécessaire pour l'exécution d'un contrat auquel vous êtes partie ou pour prendre des mesures à votre demande avant de conclure un contrat.</li>
|
||||
<li><strong>Intérêts légitimes :</strong> Lorsque le traitement est nécessaire pour nos intérêts légitimes ou ceux d'un tiers, et que ces intérêts ne sont pas supplantés par vos intérêts ou droits fondamentaux.</li>
|
||||
<li><strong>Consentement :</strong> Lorsque vous avez donné votre consentement au traitement de vos données personnelles pour une ou plusieurs finalités spécifiques.</li>
|
||||
<li><strong>Obligation légale :</strong> Lorsque le traitement est nécessaire pour respecter une obligation légale à laquelle nous sommes soumis.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Comment partageons-nous vos informations ?</h2>
|
||||
<p>Nous pouvons partager vos informations personnelles avec les tiers suivants :</p>
|
||||
<ul>
|
||||
<li><strong>Prestataires de services :</strong> Nous travaillons avec des prestataires de services tiers qui fournissent des services tels que l'hébergement, l'analyse, le traitement des paiements et le support client.</li>
|
||||
<li><strong>Partenaires professionnels :</strong> Nous pouvons partager des informations avec nos partenaires commerciaux pour offrir certains produits, services ou promotions.</li>
|
||||
<li><strong>Conformité légale :</strong> Nous pouvons divulguer vos informations si nous estimons de bonne foi que cette divulgation est nécessaire pour se conformer à la loi, protéger nos droits ou assurer votre sécurité.</li>
|
||||
<li><strong>Transactions d'entreprise :</strong> En cas de fusion, acquisition, restructuration ou vente d'actifs, vos informations peuvent être transférées dans le cadre de cette transaction.</li>
|
||||
</ul>
|
||||
<p>Nous ne vendons pas vos données personnelles à des tiers.</p>
|
||||
|
||||
<h2>Transferts internationaux de données</h2>
|
||||
<p>
|
||||
Vos informations peuvent être transférées et traitées dans des pays autres que celui où vous résidez.
|
||||
Ces pays peuvent avoir des lois sur la protection des données différentes de celles de votre pays.
|
||||
</p>
|
||||
<p>
|
||||
Si nous transférons des données personnelles provenant de l'EEE, du Royaume-Uni ou de la Suisse vers des pays
|
||||
n'offrant pas un niveau de protection adéquat selon les autorités compétentes, nous utilisons des
|
||||
mécanismes de transfert légalement reconnus, tels que les clauses contractuelles types approuvées par la Commission européenne.
|
||||
</p>
|
||||
|
||||
<h2>Vos droits et choix</h2>
|
||||
<p>Selon votre lieu de résidence, vous pouvez disposer de certains droits concernant vos données personnelles :</p>
|
||||
<ul>
|
||||
<li><strong>Accès et portabilité :</strong> Vous pouvez accéder à vos informations personnelles et en obtenir une copie dans un format structuré, couramment utilisé et lisible par machine.</li>
|
||||
<li><strong>Correction :</strong> Vous pouvez mettre à jour ou corriger vos informations personnelles si elles sont inexactes ou incomplètes.</li>
|
||||
<li><strong>Suppression :</strong> Vous pouvez demander la suppression de vos données personnelles dans certaines circonstances.</li>
|
||||
<li><strong>Restriction et opposition :</strong> Vous pouvez demander la restriction du traitement de vos données personnelles ou vous opposer à leur traitement dans certaines circonstances.</li>
|
||||
<li><strong>Consentement :</strong> Lorsque le traitement est basé sur votre consentement, vous pouvez retirer ce consentement à tout moment.</li>
|
||||
<li><strong>Réclamation :</strong> Vous avez le droit d'introduire une réclamation auprès d'une autorité de protection des données.</li>
|
||||
</ul>
|
||||
<p>
|
||||
Pour exercer ces droits, contactez-nous à l'adresse indiquée dans la section "Nous contacter" ci-dessous.
|
||||
Notez que ces droits peuvent être soumis à des limitations et exceptions prévues par la loi applicable.
|
||||
</p>
|
||||
|
||||
<h2>Conservation des données</h2>
|
||||
<p>
|
||||
Nous conservons vos données personnelles aussi longtemps que nécessaire pour atteindre les finalités décrites dans cette politique,
|
||||
sauf si une période de conservation plus longue est requise ou permise par la loi.
|
||||
Les critères utilisés pour déterminer nos périodes de conservation comprennent :
|
||||
</p>
|
||||
<ul>
|
||||
<li>La durée pendant laquelle nous entretenons une relation continue avec vous et vous fournissons l'application</li>
|
||||
<li>Si nous avons une obligation légale à laquelle nous sommes soumis</li>
|
||||
<li>Si la conservation est souhaitable compte tenu de notre position juridique (par exemple, concernant les délais de prescription applicables, les litiges ou les enquêtes réglementaires)</li>
|
||||
</ul>
|
||||
|
||||
<h2>Sécurité des données</h2>
|
||||
<p>
|
||||
Nous mettons en œuvre des mesures de sécurité techniques et organisationnelles appropriées pour protéger vos données personnelles
|
||||
contre la perte accidentelle, l'utilisation non autorisée, l'altération et la divulgation.
|
||||
Ces mesures comprennent le chiffrement des données, les contrôles d'accès, les pare-feu et les audits de sécurité réguliers.
|
||||
</p>
|
||||
<p>
|
||||
Cependant, aucun système de sécurité n'est impénétrable et nous ne pouvons garantir la sécurité absolue de vos informations.
|
||||
Il est important que vous preniez des précautions pour protéger votre mot de passe et votre appareil.
|
||||
</p>
|
||||
|
||||
<h2>Protection de la vie privée des enfants</h2>
|
||||
<p>
|
||||
Notre application n'est pas destinée aux personnes âgées de moins de 16 ans et nous ne collectons pas sciemment
|
||||
des données personnelles auprès d'enfants de moins de 16 ans. Si vous êtes parent ou tuteur et que vous pensez
|
||||
que votre enfant nous a fourni des informations personnelles, veuillez nous contacter.
|
||||
</p>
|
||||
|
||||
<h2>Modifications de cette politique</h2>
|
||||
<p>
|
||||
Nous pouvons modifier cette politique de confidentialité de temps à autre. Si nous apportons des modifications importantes,
|
||||
nous vous en informerons par e-mail ou par une notification dans notre application avant que les modifications
|
||||
ne prennent effet. Nous vous encourageons à consulter régulièrement cette politique pour rester informé de
|
||||
nos pratiques en matière de protection des données.
|
||||
</p>
|
||||
|
||||
<h2>Nous contacter</h2>
|
||||
<p>
|
||||
Si vous avez des questions concernant cette politique de confidentialité ou nos pratiques en matière de protection des données,
|
||||
veuillez nous contacter à l'adresse suivante :
|
||||
</p>
|
||||
<p>
|
||||
<strong>Geosector</strong><br />
|
||||
E-mail : <a href="mailto:privacy@geosector.fr" class="text-blue-600 hover:underline">privacy@geosector.fr</a><br />
|
||||
Adresse : [Adresse de l'entreprise]<br />
|
||||
Téléphone : +33 (0)1 23 45 67 89
|
||||
</p>
|
||||
|
||||
<h2>Informations spécifiques aux plateformes</h2>
|
||||
|
||||
<h3>Application iOS (Apple App Store)</h3>
|
||||
<p>
|
||||
En utilisant notre application via l'App Store d'Apple, vous reconnaissez qu'Apple n'est pas responsable de nos pratiques
|
||||
en matière de protection des données. Veuillez consulter la politique de confidentialité d'Apple pour plus d'informations
|
||||
sur la façon dont Apple peut collecter et traiter vos données.
|
||||
</p>
|
||||
|
||||
<h3>Application Android (Google Play)</h3>
|
||||
<p>
|
||||
En utilisant notre application via Google Play, vous reconnaissez que Google n'est pas responsable de nos pratiques
|
||||
en matière de protection des données. Veuillez consulter la politique de confidentialité de Google pour plus d'informations
|
||||
sur la façon dont Google peut collecter et traiter vos données.
|
||||
</p>
|
||||
|
||||
<h3>Permissions des applications mobiles</h3>
|
||||
<p>Notre application peut demander certaines permissions sur votre appareil mobile, notamment :</p>
|
||||
<ul>
|
||||
<li><strong>Localisation :</strong> Pour les fonctionnalités basées sur la localisation, comme l'affichage des secteurs et la navigation</li>
|
||||
<li><strong>Stockage :</strong> Pour stocker des données localement sur votre appareil</li>
|
||||
<li><strong>Appareil photo :</strong> Pour scanner des codes QR ou prendre des photos</li>
|
||||
<li><strong>Notifications :</strong> Pour vous envoyer des alertes et des mises à jour importantes</li>
|
||||
</ul>
|
||||
<p>
|
||||
Vous pouvez gérer ces permissions à tout moment dans les paramètres de votre appareil, mais notez que
|
||||
la désactivation de certaines permissions peut limiter les fonctionnalités de l'application.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
Reference in New Issue
Block a user