refactor: Policies page now dynamically renders sections and includes a Google privacy policy link, removing hardcoded content and tech details.
This commit is contained in:
Van Leemput Dayron
@@ -1,11 +1,13 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { ArrowLeft, Shield, Lock, Eye, Mail, Camera, MapPin, Bell } from 'lucide-react';
|
||||
import { ArrowLeft, ExternalLink } from 'lucide-react';
|
||||
|
||||
const Policies = () => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
const sections = [1, 2, 3, 4, 5, 6];
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
@@ -47,75 +49,49 @@ const Policies = () => {
|
||||
animate="visible"
|
||||
>
|
||||
{/* Header */}
|
||||
<motion.div variants={sectionVariants} style={{ marginBottom: '4rem', textAlign: 'center' }}>
|
||||
<Shield size={64} color="var(--primary-color)" style={{ marginBottom: '1rem' }} />
|
||||
<h1 style={{ fontSize: '2.5rem', marginBottom: '0.5rem' }}>{t('policies.title')}</h1>
|
||||
<p style={{ opacity: 0.6 }}>{t('policies.lastUpdated')}</p>
|
||||
<p style={{ marginTop: '1rem', opacity: 0.9 }}>{t('policies.intro')}</p>
|
||||
<motion.div variants={sectionVariants} style={{ marginBottom: '3rem', textAlign: 'center' }}>
|
||||
{/* Removed large icon as per screenshot text-focus, keeping it simple or small if needed. Screenshot has just text headers usually, but I'll keep it clean. */}
|
||||
<h1 style={{ fontSize: '2rem', marginBottom: '2rem', fontWeight: 'bold' }}>{t('policies.title')}</h1>
|
||||
</motion.div>
|
||||
|
||||
{/* Section 1: Data & Permissions */}
|
||||
<motion.div variants={sectionVariants} className="policy-section" style={{ marginBottom: '3rem' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '1.5rem' }}>
|
||||
<Eye color="var(--primary-color)" size={28} />
|
||||
<h2 style={{ fontSize: '1.8rem', margin: 0 }}>{t('policies.data.title')}</h2>
|
||||
</div>
|
||||
<p style={{ marginBottom: '2rem', opacity: 0.9 }}>{t('policies.data.intro')}</p>
|
||||
|
||||
<div style={{ display: 'grid', gap: '1.5rem', paddingLeft: '1rem' }}>
|
||||
|
||||
{/* Camera */}
|
||||
<div style={{ background: 'var(--card-bg, rgba(255,255,255,0.05))', padding: '1.5rem', borderRadius: '0.5rem' }}>
|
||||
<h3 style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '0.5rem' }}>
|
||||
<Camera size={20} className="text-primary" /> {t('policies.data.camera')}
|
||||
</h3>
|
||||
<p style={{ opacity: 0.8, lineHeight: '1.6' }}>{t('policies.data.camera.desc')}</p>
|
||||
</div>
|
||||
|
||||
{/* GPS */}
|
||||
<div style={{ background: 'var(--card-bg, rgba(255,255,255,0.05))', padding: '1.5rem', borderRadius: '0.5rem' }}>
|
||||
<h3 style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '0.5rem' }}>
|
||||
<MapPin size={20} className="text-primary" /> {t('policies.data.gps')}
|
||||
</h3>
|
||||
<p style={{ opacity: 0.8, lineHeight: '1.6' }}>{t('policies.data.gps.desc')}</p>
|
||||
</div>
|
||||
|
||||
{/* Notifications */}
|
||||
<div style={{ background: 'var(--card-bg, rgba(255,255,255,0.05))', padding: '1.5rem', borderRadius: '0.5rem' }}>
|
||||
<h3 style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '0.5rem' }}>
|
||||
<Bell size={20} className="text-primary" /> {t('policies.data.notif')}
|
||||
</h3>
|
||||
<p style={{ opacity: 0.8, lineHeight: '1.6' }}>{t('policies.data.notif.desc')}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Section 2: Usage */}
|
||||
<motion.div variants={sectionVariants} className="policy-section" style={{ marginBottom: '3rem' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '1rem' }}>
|
||||
<Lock color="var(--primary-color)" size={28} />
|
||||
<h2 style={{ fontSize: '1.8rem', margin: 0 }}>{t('policies.usage.title')}</h2>
|
||||
</div>
|
||||
<p style={{ lineHeight: '1.6', paddingLeft: '40px', opacity: 0.9 }}>
|
||||
{t('policies.usage.content')}
|
||||
{/* Sections Loop */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '2.5rem' }}>
|
||||
{sections.map((num) => (
|
||||
<motion.div key={num} variants={sectionVariants} className="policy-section">
|
||||
<h2 style={{ fontSize: '1.25rem', marginBottom: '0.75rem', fontWeight: '700' }}>
|
||||
{t(`policies.section.${num}.title`)}
|
||||
</h2>
|
||||
<p style={{ lineHeight: '1.6', opacity: 0.8, fontSize: '1rem' }}>
|
||||
{t(`policies.section.${num}.content`)}
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Section 3: Contact */}
|
||||
<motion.div variants={sectionVariants} className="policy-section" style={{ marginBottom: '3rem' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '1rem' }}>
|
||||
<Mail color="var(--primary-color)" size={28} />
|
||||
<h2 style={{ fontSize: '1.8rem', margin: 0 }}>{t('policies.contact.title')}</h2>
|
||||
))}
|
||||
</div>
|
||||
<div style={{ paddingLeft: '40px' }}>
|
||||
<p style={{ lineHeight: '1.6', opacity: 0.9, marginBottom: '0.5rem' }}>
|
||||
{t('policies.contact.content')}
|
||||
</p>
|
||||
<a href="mailto:dev.dayronvl@gmail.com" style={{ color: 'var(--primary-color)', fontWeight: 'bold', fontSize: '1.1rem' }}>
|
||||
dev.dayronvl@gmail.com
|
||||
|
||||
{/* Google Policy Button */}
|
||||
<motion.div variants={sectionVariants} style={{ marginTop: '4rem', textAlign: 'center' }}>
|
||||
<a
|
||||
href="https://policies.google.com/privacy"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
background: '#00695c', // Teal color like in screenshot
|
||||
color: 'white',
|
||||
padding: '12px 24px',
|
||||
borderRadius: '8px',
|
||||
textDecoration: 'none',
|
||||
fontWeight: '500',
|
||||
width: '100%',
|
||||
justifyContent: 'center',
|
||||
maxWidth: '400px'
|
||||
}}
|
||||
>
|
||||
<ExternalLink size={18} />
|
||||
{t('policies.googleBtn')}
|
||||
</a>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
</motion.div>
|
||||
|
||||
@@ -157,61 +157,46 @@ const translations = {
|
||||
'travelmate.page.conclusion': 'Prêt à partir ? Avec Travel Mate, l\'aventure commence dès l\'organisation. Voyagez l\'esprit léger, on s\'occupe du reste.',
|
||||
|
||||
'travelmate.tech.title': '🛠️ Technologies utilisées',
|
||||
'travelmate.tech.frontend': 'Frontend',
|
||||
'travelmate.tech.frontend.1': 'Flutter - Framework de développement mobile cross-platform',
|
||||
'travelmate.tech.frontend.2': 'Dart - Langage de programmation',
|
||||
'travelmate.tech.frontend': 'Frontend Mobile (Flutter)',
|
||||
'travelmate.tech.frontend.1': 'Architecture BLoC pour une gestion d\'état robuste',
|
||||
'travelmate.tech.frontend.2': 'Interface utilisateur fluide et réactive',
|
||||
'travelmate.tech.frontend.3': 'Intégration native (Caméra, GPS, Notifications)',
|
||||
'travelmate.tech.backend': 'Backend (Firebase)',
|
||||
'travelmate.tech.backend.1': 'Authentication (Google, Apple, Email)',
|
||||
'travelmate.tech.backend.2': 'Firestore (Base de données temps réel)',
|
||||
'travelmate.tech.backend.3': 'Cloud Functions (Logique serveur)',
|
||||
'travelmate.tech.backend.4': 'Storage (Médias)',
|
||||
'travelmate.tech.api': 'APIs & Outils',
|
||||
'travelmate.tech.api.1': 'Google Maps API / Mapbox',
|
||||
'travelmate.tech.api.2': 'Stripe (tbc) pour les paiements',
|
||||
'travelmate.tech.api.3': 'CI/CD avec GitHub Actions',
|
||||
'travelmate.viewCode': 'Voir le code',
|
||||
|
||||
'travelmate.tech.frontend.3': 'BloC - Gestion d\'état',
|
||||
'travelmate.policies.link': 'Voir les politiques de confidentialité',
|
||||
|
||||
'travelmate.tech.backend': 'Backend & Services',
|
||||
'travelmate.tech.backend.1': 'Firebase Authentication - Gestion des utilisateurs',
|
||||
'travelmate.tech.backend.2': 'Cloud Firestore - Base de données NoSQL',
|
||||
'travelmate.tech.backend.3': 'Firebase Storage - Stockage de fichiers (photos, documents)',
|
||||
'travelmate.tech.backend.4': 'Firebase Cloud Messaging - Notifications push',
|
||||
// Policies Page
|
||||
'policies.back': 'Retour',
|
||||
'policies.title': 'Politiques de confidentialité',
|
||||
|
||||
'travelmate.tech.api': 'APIs externes',
|
||||
'travelmate.tech.api.1': 'Google Places API - Recherche de lieux et points d\'intérêt',
|
||||
'travelmate.tech.api.2': 'Google Maps API - Cartes et navigation',
|
||||
'travelmate.tech.api.3': 'Google Directions API - Calcul d\'itinéraires',
|
||||
'policies.section.1.title': 'Collecte d\'informations',
|
||||
'policies.section.1.content': 'Nous collectons des informations que vous nous fournissez directement, comme votre nom, adresse e-mail et préférences de voyage.',
|
||||
|
||||
'travelmate.policies.link': 'Voir la politique de confidentialité',
|
||||
'policies.section.2.title': 'Utilisation des données',
|
||||
'policies.section.2.content': 'Vos données sont utilisées pour améliorer votre expérience utilisateur et vous proposer des recommandations personnalisées.',
|
||||
|
||||
// Policies
|
||||
'policies.title': 'Politique de Confidentialité - Travel Mate',
|
||||
'policies.lastUpdated': 'Dernière mise à jour : 05/12/2025',
|
||||
'policies.intro': 'Cette politique de confidentialité explique comment l\'application Travel Mate utilise et protège vos données.',
|
||||
'policies.section.3.title': 'Protection des données',
|
||||
'policies.section.3.content': 'Nous mettons en place des mesures de sécurité appropriées pour protéger vos informations personnelles.',
|
||||
|
||||
'policies.data.title': '1. Données collectées et Permissions',
|
||||
'policies.data.intro': 'Pour fonctionner correctement, l\'application demande les permissions suivantes :',
|
||||
'policies.data.camera': 'Caméra et Galerie (Storage)',
|
||||
'policies.data.camera.desc': 'Pour vous permettre d\'ajouter des photos à vos lieux, activités et photos de profil. Ces images sont stockées sur nos serveurs sécurisés (Firebase).',
|
||||
'policies.data.gps': 'Localisation (GPS)',
|
||||
'policies.data.gps.desc': 'Pour vous montrer votre position sur la carte et calculer des itinéraires. Ces données de localisation ne sont pas enregistrées en permanence dans notre historique.',
|
||||
'policies.data.notif': 'Notifications',
|
||||
'policies.data.notif.desc': 'Pour vous alerter des nouveaux messages ou activités dans vos groupes de voyage.',
|
||||
'policies.section.4.title': 'Partage des données',
|
||||
'policies.section.4.content': 'Nous ne partageons pas vos informations personnelles avec des tiers sans votre consentement explicite.',
|
||||
|
||||
'policies.usage.title': '2. Utilisation des données',
|
||||
'policies.usage.content': 'Vos données (email, profil, voyages) sont stockées de manière sécurisée via les services Google Firebase. Elles ne sont utilisées que pour le fonctionnement de l\'application et ne sont jamais revendues à des tiers.',
|
||||
'policies.section.5.title': 'Vos droits',
|
||||
'policies.section.5.content': 'Vous avez le droit d\'accéder, de corriger ou de supprimer vos données personnelles à tout moment. Veuillez nous contacter pour toute demande.',
|
||||
|
||||
'policies.contact.title': '3. Contact',
|
||||
'policies.contact.content': 'Pour toute question concernant vos données ou pour demander leur suppression, vous pouvez nous contacter à :',
|
||||
'policies.section.6.title': 'Nous contacter',
|
||||
'policies.section.6.content': 'Pour toute question concernant cette politique de confidentialité, veuillez nous contacter à support@travelmate.com',
|
||||
|
||||
'policies.back': 'Retour à Travel Mate',
|
||||
|
||||
// Contact
|
||||
'contact.title': 'Contactez-moi',
|
||||
'contact.subtitle': 'Une question, un projet ou simplement envie d\'échanger ? N\'hésitez pas à me contacter !',
|
||||
'contact.form.name': 'Nom complet',
|
||||
'contact.form.email': 'Email',
|
||||
'contact.form.subject': 'Sujet',
|
||||
'contact.form.message': 'Message',
|
||||
'contact.form.send': 'Envoyer le message',
|
||||
'contact.form.sending': 'Envoi en cours...',
|
||||
'contact.success': 'Message envoyé avec succès ! Je vous répondrai bientôt.',
|
||||
'contact.stayInTouch': 'Restons en contact',
|
||||
'contact.intro': 'Je suis toujours intéressé par de nouveaux projets, des collaborations ou simplement des discussions autour de la technologie. N\'hésitez pas à me contacter !',
|
||||
'contact.findMeOn': 'Retrouvez-moi aussi sur :',
|
||||
'contact.sendMessage': 'Envoyez-moi un message',
|
||||
'policies.googleBtn': 'Politique de confidentialité Google',
|
||||
},
|
||||
en: {
|
||||
// Navigation
|
||||
@@ -353,46 +338,46 @@ const translations = {
|
||||
'travelmate.page.conclusion': 'Ready to go? With Travel Mate, the adventure begins with the planning. Travel with peace of mind, we\'ll handle the rest.',
|
||||
|
||||
'travelmate.tech.title': '🛠️ Technologies Used',
|
||||
'travelmate.tech.frontend': 'Frontend',
|
||||
'travelmate.tech.frontend.1': 'Flutter - Cross-platform mobile development framework',
|
||||
'travelmate.tech.frontend.2': 'Dart - Programming language',
|
||||
|
||||
'travelmate.tech.frontend.3': 'BloC - State management',
|
||||
|
||||
'travelmate.tech.backend': 'Backend & Services',
|
||||
'travelmate.tech.backend.1': 'Firebase Authentication - User management',
|
||||
'travelmate.tech.backend.2': 'Cloud Firestore - NoSQL database',
|
||||
'travelmate.tech.backend.3': 'Firebase Storage - File storage (photos, documents)',
|
||||
'travelmate.tech.backend.4': 'Firebase Cloud Messaging - Push notifications',
|
||||
|
||||
'travelmate.tech.api': 'External APIs',
|
||||
'travelmate.tech.api.1': 'Google Places API - Places and POI search',
|
||||
'travelmate.tech.api.2': 'Google Maps API - Maps and navigation',
|
||||
'travelmate.tech.api.3': 'Google Directions API - Route selection',
|
||||
'travelmate.tech.frontend': 'Mobile Frontend (Flutter)',
|
||||
'travelmate.tech.frontend.1': 'BLoC Architecture for robust state management',
|
||||
'travelmate.tech.frontend.2': 'Fluid and responsive User Interface',
|
||||
'travelmate.tech.frontend.3': 'Native Integration (Camera, GPS, Notifications)',
|
||||
'travelmate.tech.backend': 'Backend (Firebase)',
|
||||
'travelmate.tech.backend.1': 'Authentication (Google, Apple, Email)',
|
||||
'travelmate.tech.backend.2': 'Firestore (Real-time Database)',
|
||||
'travelmate.tech.backend.3': 'Cloud Functions (Server Logic)',
|
||||
'travelmate.tech.backend.4': 'Storage (Media)',
|
||||
'travelmate.tech.api': 'APIs & Tools',
|
||||
'travelmate.tech.api.1': 'Google Maps API / Mapbox',
|
||||
'travelmate.tech.api.2': 'Stripe (tbc) for payments',
|
||||
'travelmate.tech.api.3': 'CI/CD with GitHub Actions',
|
||||
'travelmate.viewCode': 'View Code',
|
||||
|
||||
'travelmate.policies.link': 'View Privacy Policy',
|
||||
|
||||
// Policies
|
||||
'policies.title': 'Privacy Policy - Travel Mate',
|
||||
'policies.lastUpdated': 'Last updated: 05/12/2025',
|
||||
'policies.intro': 'This privacy policy explains how the Travel Mate application uses and protects your data.',
|
||||
// Policies Page
|
||||
'policies.back': 'Back',
|
||||
'policies.title': 'Privacy Policy',
|
||||
|
||||
'policies.data.title': '1. Collected Data and Permissions',
|
||||
'policies.data.intro': 'To function correctly, the application requests the following permissions:',
|
||||
'policies.data.camera': 'Camera and Gallery (Storage)',
|
||||
'policies.data.camera.desc': 'To allow you to add photos to your places, activities, and profile pictures. These images are stored on our secure servers (Firebase).',
|
||||
'policies.data.gps': 'Location (GPS)',
|
||||
'policies.data.gps.desc': 'To show your position on the map and calculate routes. This location data is not permanently recorded in our history.',
|
||||
'policies.data.notif': 'Notifications',
|
||||
'policies.data.notif.desc': 'To alert you of new messages or activities in your travel groups.',
|
||||
'policies.section.1.title': 'Information Collection',
|
||||
'policies.section.1.content': 'We collect information that you provide directly to us, such as your name, email address, and travel preferences.',
|
||||
|
||||
'policies.usage.title': '2. Data Usage',
|
||||
'policies.usage.content': 'Your data (email, profile, trips) is stored securely via Google Firebase services. It is used only for the application\'s operation and is never sold to third parties.',
|
||||
'policies.section.2.title': 'Data Usage',
|
||||
'policies.section.2.content': 'Your data is used to improve your user experience and offer you personalized recommendations.',
|
||||
|
||||
'policies.contact.title': '3. Contact',
|
||||
'policies.contact.content': 'For any questions regarding your data or to request its deletion, you can contact us at:',
|
||||
'policies.section.3.title': 'Data Protection',
|
||||
'policies.section.3.content': 'We implement appropriate security measures to protect your personal information.',
|
||||
|
||||
'policies.back': 'Back to Travel Mate',
|
||||
'policies.section.4.title': 'Data Sharing',
|
||||
'policies.section.4.content': 'We do not share your personal information with third parties without your explicit consent.',
|
||||
|
||||
'policies.section.5.title': 'Your Rights',
|
||||
'policies.section.5.content': 'You have the right to access, correct, or delete your personal data at any time. Please contact us for any request.',
|
||||
|
||||
'policies.section.6.title': 'Contact Us',
|
||||
'policies.section.6.content': 'For any questions regarding this privacy policy, please contact us at support@travelmate.com',
|
||||
|
||||
'policies.googleBtn': 'Google Privacy Policy',
|
||||
|
||||
// Contact
|
||||
'contact.title': 'Contact me',
|
||||
|
||||
Reference in New Issue
Block a user