Add support for project Travel Mate

Jenkinsfile

@@ -0,0 +1,68 @@
+pipeline {
+    agent any
+
+    tools {
+        nodejs 'NodeJS 20' 
+    }
+
+    environment {
+        FRONT_DEST = '/var/www/xeewy.be'
+        BACK_DEST = '/var/www/xeewy/backend'
+        SERVICE_NAME = 'xeewy-backend'
+    }
+
+    stages {
+        // --- FRONTEND (Rien ne change ici) ---
+        stage('Build Frontend') {
+            steps {
+                echo '--- Building React Frontend ---'
+                dir('frontend') {
+                    sh 'npm install'
+                    sh 'npm run build'
+                }
+            }
+        }
+
+        stage('Deploy Frontend') {
+            steps {
+                echo '--- Deploying Frontend ---'
+                sh "rm -rf ${FRONT_DEST}/*"
+                sh "cp -r frontend/dist/* ${FRONT_DEST}/" 
+            }
+        }
+
+        // --- BACKEND (C'est ici qu'on change) ---
+        stage('Build Backend') {
+            steps {
+                echo '--- Building TypeScript Backend ---'
+                dir('backend') {
+                    sh 'npm install'
+                    sh 'npm run build' // Compile le TS vers JS (dossier dist/)
+                }
+            }
+        }
+
+        stage('Deploy Backend') {
+            steps {
+                echo '--- Deploying Backend ---'
+                // On copie le dossier compilé (dist) vers le serveur
+                sh "rm -rf ${BACK_DEST}/*"
+                sh "cp backend/package.json ${BACK_DEST}/"
+                sh "cp backend/package-lock.json ${BACK_DEST}/"
+                
+                // Copie du dossier dist (le résultat de la compilation)
+                sh "cp -r backend/dist ${BACK_DEST}/" 
+                
+                // Installation des dépendances de prod uniquement
+                sh "cd ${BACK_DEST} && npm install --production"
+            }
+        }
+
+        stage('Restart Service') {
+            steps {
+                echo '--- Restarting Service ---'
+                sh "sudo systemctl restart ${SERVICE_NAME}"
+            }
+        }
+    }
+}

backend/src/index.ts

@@ -14,6 +14,8 @@ app.use(cors());
 app.use(express.json());
 
 app.use('/api/messages', messagesRouter);
+import supportRouter from './routes/support';
+app.use('/api/support', supportRouter);
 
 // Basic health check
 app.get('/api/health', (req, res) => {

backend/src/routes/support.ts

@@ -0,0 +1,56 @@
+import { Router, Request, Response } from 'express';
+import pool from '../config/db';
+import { ResultSetHeader } from 'mysql2';
+
+const router = Router();
+
+// Validation helper
+const isValidEmail = (email: string) => {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+};
+
+router.post('/', async (req: Request, res: Response): Promise<void> => {
+    const { nom, prenom, account_email, contact_email, message } = req.body;
+
+    // 1. Validation
+    const errors: string[] = [];
+
+    if (!nom || nom.trim() === '') errors.push('Le nom est requis.');
+    if (!prenom || prenom.trim() === '') errors.push('Le prénom est requis.');
+
+    if (!account_email || account_email.trim() === '') {
+        errors.push("L'email du compte est requis.");
+    } else if (!isValidEmail(account_email)) {
+        errors.push("Le format de l'email du compte est invalide.");
+    }
+
+    if (!contact_email || contact_email.trim() === '') {
+        errors.push("L'email de contact est requis.");
+    } else if (!isValidEmail(contact_email)) {
+        errors.push("Le format de l'email de contact est invalide.");
+    }
+
+    if (!message || message.trim() === '') errors.push('Le message est requis.');
+
+    if (errors.length > 0) {
+        res.status(400).json({ status: 'error', errors });
+        return;
+    }
+
+    // 2. Insert into Database
+    try {
+        const query = 'INSERT INTO support_requests (nom, prenom, account_email, contact_email, message) VALUES (?, ?, ?, ?, ?)';
+        const [result] = await pool.query<ResultSetHeader>(query, [nom, prenom, account_email, contact_email, message]);
+
+        res.status(201).json({
+            status: 'success',
+            message: 'Demande de support envoyée avec succès.',
+            id: result.insertId
+        });
+    } catch (error: any) {
+        console.error('Error inserting support request:', error);
+        res.status(500).json({ status: 'error', message: 'Erreur serveur lors de la sauvegarde.' });
+    }
+});
+
+export default router;

frontend/src/App.tsx

@@ -7,6 +7,8 @@ import Footer from './components/Footer';
 import Policies from './components/Policies';
 import TravelMate from './components/TravelMate';
 import EraseData from './components/TravelMate/EraseData';
+import Support from './components/TravelMate/Support';
+import HomeSync from './components/HomeSync';
 import ScrollToTop from './components/ScrollToTop';
 import './styles/main.scss';
 
@@ -60,11 +62,12 @@ function AppContent() {
         <main style={{ flex: 1 }}>
           <Routes>
             <Route path="/" element={<Home />} />
-            <Route path="/travelmate" element={<TravelMate />} >
-              <Route path="policies" element={<Policies />} />
-            </Route>
+            <Route path="/travelmate" element={<TravelMate />} />
+            <Route path="/travelmate/policies" element={<Policies />} />
             <Route path="/travelmate/erasedata" element={<EraseData />} />
+            <Route path="/homesync" element={<HomeSync />} />
             <Route path="/policies" element={<Policies />} />
+            <Route path="/travelmate/support" element={<Support />} />
           </Routes>
         </main>
         <Footer />

frontend/src/components/HomeSync.tsx

@@ -0,0 +1,261 @@
+import { useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { useLanguage } from '../contexts/LanguageContext';
+import { Smartphone, Calendar, ShoppingCart, Users, Lock, Code, Database } from 'lucide-react';
+// import appIcon from '../assets/app_icon.png'; // Using same icon as placeholder if no specific HomeSync icon
+
+const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: { opacity: 1, y: 0 }
+};
+
+const FeatureCard = ({ title, icon: Icon, description }: { title: string, icon: any, description: string }) => (
+    <motion.div
+        variants={itemVariants}
+        className="feature-card"
+        style={{
+            background: 'var(--card-bg, rgba(255, 255, 255, 0.03))',
+            backdropFilter: 'blur(10px)',
+            padding: '2rem',
+            borderRadius: '1.5rem',
+            border: '1px solid var(--border-color, rgba(255, 255, 255, 0.08))',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            textAlign: 'center',
+            transition: 'transform 0.3s ease, box-shadow 0.3s ease',
+            boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
+        }}
+        whileHover={{
+            y: -5,
+            boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+            borderColor: 'var(--primary-color, #4f46e5)'
+        }}
+    >
+        <div style={{
+            marginBottom: '1.5rem',
+            background: 'var(--primary-color-alpha, rgba(79, 70, 229, 0.1))',
+            width: 'fit-content',
+            padding: '12px',
+            borderRadius: '12px'
+        }}>
+            <Icon size={32} color="var(--primary-color)" />
+        </div>
+        <h3 style={{
+            marginBottom: '1rem',
+            fontSize: '1.5rem',
+            fontWeight: '600',
+            color: 'var(--text-color)'
+        }}>
+            {title}
+        </h3>
+        <p style={{
+            opacity: 0.8,
+            lineHeight: '1.7',
+            flex: 1,
+            fontSize: '1rem',
+            color: 'var(--text-color)'
+        }}>
+            {description}
+        </p>
+    </motion.div>
+);
+
+const HomeSync = () => {
+    const { t } = useLanguage();
+
+    const containerVariants = {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: {
+                staggerChildren: 0.2
+            }
+        }
+    };
+
+    useEffect(() => {
+        document.title = "Home Sync";
+    }, []);
+
+    return (
+        <div className="home-sync-page" style={{ paddingTop: '100px', minHeight: '100vh', paddingBottom: '50px' }}>
+            <div className="container" style={{ maxWidth: '1400px', margin: '0 auto', padding: '0 20px' }}>
+
+                <motion.div
+                    variants={containerVariants}
+                    initial="hidden"
+                    animate="visible"
+                >
+                    {/* Header Section */}
+                    <motion.div variants={itemVariants} style={{ textAlign: 'center', marginBottom: '4rem', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                        {/* Placeholder Icon - ideally this would be a specific Home Sync icon */}
+                        <motion.div
+                            style={{
+                                width: '120px',
+                                height: '120px',
+                                borderRadius: '24px',
+                                marginBottom: '2rem',
+                                boxShadow: '0 10px 30px rgba(0,0,0,0.2)',
+                                background: 'linear-gradient(135deg, #6366f1 0%, #a855f7 100%)',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center'
+                            }}
+                            whileHover={{ scale: 1.05, rotate: 5 }}
+                            transition={{ type: "spring", stiffness: 300 }}
+                        >
+                            <Users size={64} color="white" />
+                        </motion.div>
+
+                        <h1 className="gradient-text" style={{ fontSize: '4rem', fontWeight: '800', marginBottom: '1rem' }}>
+                            {t('homesync.page.mainTitle')}
+                        </h1>
+                        <p style={{ fontSize: '1.5rem', opacity: 0.7, maxWidth: '600px', margin: '0 auto 2rem auto' }}>
+                            {t('homesync.page.subtitle')}
+                        </p>
+
+                        {/* View Code Button - Placeholder link since none provided, or maybe just remove if not public */}
+                        {/* Assuming no link provided in description, maybe just skip or add a placeholder? 
+                            The prompt says "Fais lui une page dédiée" but doesn't explicitly give a repo link. 
+                            I'll leave it as a '#', user can update. */
+                        }
+                        <motion.div
+                            className="btn"
+                            style={{
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                gap: '10px',
+                                textDecoration: 'none',
+                                fontSize: '1.1rem',
+                                padding: '0.8rem 1.5rem',
+                                borderRadius: '50px',
+                                background: 'rgba(255,255,255,0.05)',
+                                color: 'var(--text-color)',
+                                opacity: 0.7,
+                                cursor: 'default'
+                            }}
+                        >
+                            <Lock size={20} />
+                            {t('homesync.viewCode')}
+                        </motion.div>
+                    </motion.div>
+
+                    {/* Description as Intro */}
+                    <motion.div variants={itemVariants} style={{ marginBottom: '5rem', maxWidth: '800px', margin: '0 auto 5rem auto', textAlign: 'center' }}>
+                        <p style={{
+                            lineHeight: '1.8',
+                            fontSize: '1.4rem',
+                            opacity: 0.9,
+                            fontStyle: 'italic',
+                            color: 'var(--text-color)'
+                        }}>
+                            "{t('homesync.page.intro')}"
+                        </p>
+                    </motion.div>
+
+                    {/* Highlights Sections */}
+                    <motion.div variants={itemVariants} style={{ marginBottom: '6rem' }}>
+                        <h2 style={{
+                            textAlign: 'center',
+                            marginBottom: '4rem',
+                            fontSize: '2.5rem',
+                            fontWeight: '700',
+                            color: 'var(--text-color)'
+                        }}>{t('homesync.highlights.title')}</h2>
+                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '2.5rem' }}>
+
+                            <FeatureCard
+                                title={t('homesync.highlight.1.title')}
+                                description={t('homesync.highlight.1.desc')}
+                                icon={Calendar}
+                            />
+                            <FeatureCard
+                                title={t('homesync.highlight.2.title')}
+                                description={t('homesync.highlight.2.desc')}
+                                icon={ShoppingCart}
+                            />
+                            <FeatureCard
+                                title={t('homesync.highlight.3.title')}
+                                description={t('homesync.highlight.3.desc')}
+                                icon={Users}
+                            />
+                            <FeatureCard
+                                title={t('homesync.highlight.4.title')}
+                                description={t('homesync.highlight.4.desc')}
+                                icon={Lock}
+                            />
+
+                        </div>
+                    </motion.div>
+
+                    {/* Conclusion */}
+                    <motion.div variants={itemVariants} style={{ marginBottom: '6rem', textAlign: 'center', maxWidth: '800px', margin: '0 auto 6rem auto' }}>
+                        <p style={{
+                            fontSize: '1.8rem',
+                            fontWeight: 'bold',
+                            color: 'var(--primary-color)',
+                            lineHeight: '1.4'
+                        }}>
+                            {t('homesync.page.conclusion')}
+                        </p>
+                    </motion.div>
+
+                    {/* Tech Stack */}
+                    <motion.div variants={itemVariants} style={{ marginBottom: '5rem' }}>
+                        <h2 style={{ textAlign: 'center', marginBottom: '3rem' }}>{t('homesync.tech.title')}</h2>
+                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '2rem' }}>
+
+                            {/* Frontend */}
+                            <div style={{ padding: '1.5rem' }}>
+                                <h3 style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '1.5rem', color: 'var(--primary-color)' }}>
+                                    <Smartphone /> {t('homesync.tech.frontend')}
+                                </h3>
+                                <ul style={{ listStyle: 'none', padding: 0 }}>
+                                    {[1, 2].map(i => (
+                                        <li key={i} style={{ marginBottom: '0.8rem', paddingLeft: '1rem', borderLeft: '2px solid var(--primary-color)' }}>
+                                            {t(`homesync.tech.frontend.${i}`)}
+                                        </li>
+                                    ))}
+                                </ul>
+                            </div>
+
+                            {/* Backend */}
+                            <div style={{ padding: '1.5rem' }}>
+                                <h3 style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '1.5rem', color: 'var(--primary-color)' }}>
+                                    <Database /> {t('homesync.tech.backend')}
+                                </h3>
+                                <ul style={{ listStyle: 'none', padding: 0 }}>
+                                    {[1, 2].map(i => (
+                                        <li key={i} style={{ marginBottom: '0.8rem', paddingLeft: '1rem', borderLeft: '2px solid var(--primary-color)' }}>
+                                            {t(`homesync.tech.backend.${i}`)}
+                                        </li>
+                                    ))}
+                                </ul>
+                            </div>
+
+                            {/* API */}
+                            <div style={{ padding: '1.5rem' }}>
+                                <h3 style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '1.5rem', color: 'var(--primary-color)' }}>
+                                    <Code /> {t('homesync.tech.api')}
+                                </h3>
+                                <ul style={{ listStyle: 'none', padding: 0 }}>
+                                    {[1].map(i => (
+                                        <li key={i} style={{ marginBottom: '0.8rem', paddingLeft: '1rem', borderLeft: '2px solid var(--primary-color)' }}>
+                                            {t(`homesync.tech.api.${i}`)}
+                                        </li>
+                                    ))}
+                                </ul>
+                            </div>
+
+                        </div>
+                    </motion.div>
+
+                </motion.div>
+            </div>
+        </div>
+    );
+};
+
+export default HomeSync;

frontend/src/components/Projects.tsx

@@ -1,5 +1,5 @@
 import { motion } from 'framer-motion';
-import { ExternalLink, MapPin, Wine } from 'lucide-react';
+import { ExternalLink, MapPin, Wine, Users } from 'lucide-react';
 import { useLanguage } from '../contexts/LanguageContext';
 import { Link } from 'react-router-dom';
 
@@ -23,25 +23,44 @@ const Projects = () => {
       links: {
         demo: "/travelmate"
       },
-      image: "/travel-mate-preview.png" // Ajoutez votre image dans le dossier public
+      image: "/travel-mate-preview.png"
+    },
+    {
+      id: 4, // New ID for Home Sync
+      title: t('projects.homeSync.title'),
+      description: t('projects.homeSync.description'),
+      status: t('projects.status.personal'),
+      technologies: ["Flutter", "Firebase", "BLoC"],
+      features: [
+        t('projects.homeSync.feature1'),
+        t('projects.homeSync.feature2'),
+        t('projects.homeSync.feature3'),
+        t('projects.homeSync.feature4')
+      ],
+      color: "#8B5CF6", // Purple/Indigo shade for family/sync theme
+      icon: <Users size={24} />, // Inherited import or need to add
+      links: {
+        demo: "/homesync"
+      },
+      image: "/home-sync-preview.png" // Placeholder
     },
     {
       id: 3,
       title: t('projects.shelbys.title'),
       description: t('projects.shelbys.description'),
       status: t('projects.status.online'),
-      technologies: ["React", "Vite", "TailwindCSS", "Framer Motion"], // Inferring stack based on modern standards and user's other projects
+      technologies: ["React", "Vite", "TailwindCSS", "Framer Motion"],
       features: [
         t('projects.shelbys.feature1'),
         t('projects.shelbys.feature2'),
         t('projects.shelbys.feature4')
       ],
-      color: "#E91E63", // A distinct color
+      color: "#E91E63",
       icon: <Wine size={24} />,
       links: {
         demo: "https://shelbys.be"
       },
-      image: "/shelbys-preview.png" // Placeholder, user might need to add this
+      image: "/shelbys-preview.png"
     },
     {
       id: 2,
@@ -58,7 +77,7 @@ const Projects = () => {
       color: "#2196F3",
       icon: <ExternalLink size={24} />,
       links: {
-        demo: "https://xeewy.be" // Remplacez par votre lien
+        demo: "https://xeewy.be"
       }
     }
   ];

frontend/src/components/TravelMate.tsx

@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
 import { motion } from 'framer-motion';
 import { useLanguage } from '../contexts/LanguageContext';
-import { Link, Outlet } from 'react-router-dom';
-import { Shield, Smartphone, Map, DollarSign, Users, Globe, Code } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { Shield, Smartphone, Map, DollarSign, Users, Globe, Code, ArrowLeft } from 'lucide-react';
 import appIcon from '../assets/app_icon.png';
 
 const itemVariants = {
@@ -219,7 +219,7 @@ const TravelMate = () => {
                                     <Code /> {t('travelmate.tech.api')}
                                 </h3>
                                 <ul style={{ listStyle: 'none', padding: 0 }}>
-                                    {[1, 2, 3].map(i => (
+                                    {[1, 2].map(i => (
                                         <li key={i} style={{ marginBottom: '0.8rem', paddingLeft: '1rem', borderLeft: '2px solid var(--primary-color)' }}>
                                             {t(`travelmate.tech.api.${i}`)}
                                         </li>
@@ -230,57 +230,105 @@ const TravelMate = () => {
                         </div>
                     </motion.div>
 
-                    {/* Policies CTA */}
-                    <motion.div
-                        variants={itemVariants}
-                        style={{
-                            padding: '2rem',
-                            background: 'var(--card-bg, rgba(255, 255, 255, 0.05))',
-                            borderRadius: '1rem',
-                            border: '1px solid var(--border-color, rgba(255, 255, 255, 0.1))',
+                    {/* Legal & Support Section */}
+                    <motion.div variants={itemVariants} style={{ marginBottom: '6rem' }}>
+                        <h2 style={{
                             textAlign: 'center',
-                            maxWidth: '600px',
-                            margin: '0 auto'
-                        }}
-                    >
-                        <Shield className="text-primary" size={48} style={{ marginBottom: '1rem', color: 'var(--primary-color)' }} />
-                        <h3 style={{ marginBottom: '1.5rem' }}>
-                            {t('policies.title')}
-                        </h3>
-                        <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center', flexWrap: 'wrap' }}>
-                            <Link
-                                to={`/${language}/travelmate/policies`}
-                                className="btn btn-secondary"
-                                style={{
-                                    display: 'inline-flex',
-                                    alignItems: 'center',
-                                    gap: '10px',
-                                    textDecoration: 'none'
-                                }}
-                            >
-                                {t('travelmate.policies.link')}
+                            marginBottom: '4rem',
+                            fontSize: '2.5rem',
+                            fontWeight: '700',
+                            color: 'var(--text-color)'
+                        }}>{t('travelmate.legal.title')}</h2>
+
+                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '2rem' }}>
+                            {/* Privacy Policy Card */}
+                            <Link to={`/${language}/travelmate/policies`} style={{ textDecoration: 'none', color: 'inherit' }}>
+                                <motion.div
+                                    whileHover={{ y: -5, boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', borderColor: 'var(--primary-color)' }}
+                                    style={{
+                                        background: 'var(--card-bg, rgba(255, 255, 255, 0.03))',
+                                        backdropFilter: 'blur(10px)',
+                                        padding: '2rem',
+                                        borderRadius: '1.5rem',
+                                        border: '1px solid var(--border-color, rgba(255, 255, 255, 0.08))',
+                                        height: '100%',
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        alignItems: 'flex-start',
+                                        transition: 'all 0.3s ease'
+                                    }}
+                                >
+                                    <Shield size={32} style={{ color: 'var(--primary-color)', marginBottom: '1.5rem' }} />
+                                    <h3 style={{ fontSize: '1.25rem', fontWeight: '600', marginBottom: '1rem' }}>{t('policies.title')}</h3>
+                                    <p style={{ opacity: 0.7, marginBottom: '2rem', flex: 1, lineHeight: '1.6' }}>
+                                        {t('travelmate.legal.privacy.desc')}
+                                    </p>
+                                    <span style={{ color: 'var(--primary-color)', fontWeight: '500', display: 'flex', alignItems: 'center', gap: '8px' }}>
+                                        {t('travelmate.policies.link')} <ArrowLeft size={16} style={{ rotate: '180deg' }} />
+                                    </span>
+                                </motion.div>
                             </Link>
-                            <Link
-                                to={`/${language}/travelmate/erasedata`}
-                                className="btn btn-secondary"
-                                style={{
-                                    display: 'inline-flex',
-                                    alignItems: 'center',
-                                    gap: '10px',
-                                    textDecoration: 'none',
-                                    background: 'rgba(239, 68, 68, 0.1)',
-                                    color: '#EF4444',
-                                    borderColor: 'rgba(239, 68, 68, 0.2)'
-                                }}
-                            >
-                                <Shield size={18} />
-                                {t('travelmate.erasedata.link')}
+
+                            {/* Erase Data Card */}
+                            <Link to={`/${language}/travelmate/erasedata`} style={{ textDecoration: 'none', color: 'inherit' }}>
+                                <motion.div
+                                    whileHover={{ y: -5, boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', borderColor: '#EF4444' }}
+                                    style={{
+                                        background: 'var(--card-bg, rgba(255, 255, 255, 0.03))',
+                                        backdropFilter: 'blur(10px)',
+                                        padding: '2rem',
+                                        borderRadius: '1.5rem',
+                                        border: '1px solid var(--border-color, rgba(255, 255, 255, 0.08))',
+                                        height: '100%',
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        alignItems: 'flex-start',
+                                        transition: 'all 0.3s ease'
+                                    }}
+                                >
+                                    <Shield size={32} style={{ color: '#EF4444', marginBottom: '1.5rem' }} />
+                                    <h3 style={{ fontSize: '1.25rem', fontWeight: '600', marginBottom: '1rem' }}>{t('erasedata.title').split(' ').slice(0, 2).join(' ')}...</h3> {/* Truncate title or use specific one */}
+                                    <p style={{ opacity: 0.7, marginBottom: '2rem', flex: 1, lineHeight: '1.6' }}>
+                                        {t('travelmate.legal.erasedata.desc')}
+                                    </p>
+                                    <span style={{ color: '#EF4444', fontWeight: '500', display: 'flex', alignItems: 'center', gap: '8px' }}>
+                                        {t('travelmate.erasedata.link')} <ArrowLeft size={16} style={{ rotate: '180deg' }} />
+                                    </span>
+                                </motion.div>
+                            </Link>
+
+                            {/* Support Card */}
+                            <Link to={`/${language}/travelmate/support`} style={{ textDecoration: 'none', color: 'inherit' }}>
+                                <motion.div
+                                    whileHover={{ y: -5, boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', borderColor: '#10B981' }}
+                                    style={{
+                                        background: 'var(--card-bg, rgba(255, 255, 255, 0.03))',
+                                        backdropFilter: 'blur(10px)',
+                                        padding: '2rem',
+                                        borderRadius: '1.5rem',
+                                        border: '1px solid var(--border-color, rgba(255, 255, 255, 0.08))',
+                                        height: '100%',
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        alignItems: 'flex-start',
+                                        transition: 'all 0.3s ease'
+                                    }}
+                                >
+                                    <Users size={32} style={{ color: '#10B981', marginBottom: '1.5rem' }} />
+                                    <h3 style={{ fontSize: '1.25rem', fontWeight: '600', marginBottom: '1rem' }}>{t('support.title')}</h3>
+                                    <p style={{ opacity: 0.7, marginBottom: '2rem', flex: 1, lineHeight: '1.6' }}>
+                                        {t('travelmate.legal.support.desc')}
+                                    </p>
+                                    <span style={{ color: '#10B981', fontWeight: '500', display: 'flex', alignItems: 'center', gap: '8px' }}>
+                                        {t('travelmate.support.link')} <ArrowLeft size={16} style={{ rotate: '180deg' }} />
+                                    </span>
+                                </motion.div>
                             </Link>
                         </div>
                     </motion.div>
                 </motion.div>
 
-                <Outlet />
+
             </div>
         </div>
     );

frontend/src/components/TravelMate/EraseData.tsx

@@ -17,17 +17,21 @@ const EraseData = () => {
     const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
     const [errorMessage, setErrorMessage] = useState('');
 
-    const handleSubmit = async (e: React.FormEvent) => {
+    const [showConfirmModal, setShowConfirmModal] = useState(false);
+
+    const handleInitialSubmit = (e: React.FormEvent) => {
         e.preventDefault();
         if (!formData.confirm) return;
+        setShowConfirmModal(true);
+    };
 
+    const handleFinalSubmit = async () => {
+        setShowConfirmModal(false);
         setStatus('submitting');
         setErrorMessage('');
 
         try {
-            // Using absolute URL for localhost dev, in prod simple /api might work if proxied or configured
-            // Assuming localhost:3000 for backend based on previous steps
-            await axios.post('http://localhost:3000/api/messages', {
+            await axios.post('/api/messages', {
                 nom: formData.nom,
                 prenom: formData.prenom,
                 email: formData.email,
@@ -48,7 +52,7 @@ const EraseData = () => {
     };
 
     return (
-        <div className="erase-data-page" style={{ paddingTop: '100px', minHeight: '100vh', paddingBottom: '50px' }}>
+        <div className="erase-data-page" style={{ paddingTop: '100px', minHeight: '100vh', paddingBottom: '50px', position: 'relative' }}>
             <div className="container" style={{ maxWidth: '800px', margin: '0 auto', padding: '0 20px' }}>
                 <Link
                     to={`/${language}/travelmate`}
@@ -96,7 +100,7 @@ const EraseData = () => {
                             <p>{t('erasedata.success.message')}</p>
                         </div>
                     ) : (
-                        <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+                        <form onSubmit={handleInitialSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
                             <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1.5rem' }}>
                                 <div>
                                     <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>{t('erasedata.form.lastname')}</label>
@@ -193,6 +197,80 @@ const EraseData = () => {
                     )}
                 </motion.div>
             </div>
+
+            {/* Confirmation Modal */}
+            {showConfirmModal && (
+                <div style={{
+                    position: 'fixed',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    background: 'rgba(0, 0, 0, 0.7)',
+                    backdropFilter: 'blur(5px)',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    zIndex: 1000,
+                    padding: '20px'
+                }}>
+                    <motion.div
+                        initial={{ scale: 0.9, opacity: 0 }}
+                        animate={{ scale: 1, opacity: 1 }}
+                        style={{
+                            background: '#1a1a1a', // Assuming dark theme is default or hardcoded for now, ideally use var(--card-bg) but opacity might be issue
+                            backgroundColor: 'var(--card-bg, #1a1a1a)',
+                            padding: '2rem',
+                            borderRadius: '1rem',
+                            border: '1px solid var(--border-color, rgba(255,255,255,0.1))',
+                            maxWidth: '500px',
+                            width: '100%',
+                            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)'
+                        }}
+                    >
+                        <h2 style={{ marginBottom: '1rem', display: 'flex', alignItems: 'center', gap: '10px' }}>
+                            <AlertCircle size={24} color="var(--primary-color)" />
+                            {t('modal.confirm.title')}
+                        </h2>
+                        <p style={{ marginBottom: '1.5rem', opacity: 0.8 }}>
+                            {t('modal.confirm.message')}
+                        </p>
+
+                        <div style={{ background: 'rgba(255,255,255,0.05)', padding: '1rem', borderRadius: '0.5rem', marginBottom: '2rem', fontSize: '0.95rem' }}>
+                            <p style={{ marginBottom: '0.5rem' }}><strong>{t('erasedata.form.lastname')}:</strong> {formData.nom}</p>
+                            <p style={{ marginBottom: '0.5rem' }}><strong>{t('erasedata.form.firstname')}:</strong> {formData.prenom}</p>
+                            <p style={{ marginBottom: '0.5rem' }}><strong>{t('erasedata.form.email')}:</strong> {formData.email}</p>
+                            {formData.message && <p><strong>{t('erasedata.form.message')}:</strong> <span style={{ opacity: 0.8, display: 'block', marginTop: '4px', fontStyle: 'italic' }}>"{formData.message}"</span></p>}
+                        </div>
+
+                        <div style={{ display: 'flex', gap: '1rem', justifyContent: 'flex-end' }}>
+                            <button
+                                onClick={() => setShowConfirmModal(false)}
+                                style={{
+                                    padding: '0.8rem 1.5rem',
+                                    borderRadius: '0.5rem',
+                                    background: 'transparent',
+                                    border: '1px solid var(--border-color)',
+                                    color: 'inherit',
+                                    cursor: 'pointer'
+                                }}
+                            >
+                                {t('modal.btn.cancel')}
+                            </button>
+                            <button
+                                onClick={handleFinalSubmit}
+                                className="btn btn-primary"
+                                style={{
+                                    padding: '0.8rem 1.5rem',
+                                    cursor: 'pointer'
+                                }}
+                            >
+                                {t('modal.btn.confirm')}
+                            </button>
+                        </div>
+                    </motion.div>
+                </div>
+            )}
         </div>
     );
 };

frontend/src/components/TravelMate/Support.tsx

@@ -0,0 +1,324 @@
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { useLanguage } from '../../contexts/LanguageContext';
+import { ArrowLeft, Send, CheckCircle, AlertCircle } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import axios from 'axios';
+
+const Support = () => {
+    const { t, language } = useLanguage();
+    const [formData, setFormData] = useState({
+        nom: '',
+        prenom: '',
+        account_email: '',
+        contact_email: '',
+        useSameEmail: false,
+        message: ''
+    });
+    const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
+    const [errorMessage, setErrorMessage] = useState('');
+
+    const handleSameEmailChange = (checked: boolean) => {
+        setFormData(prev => ({
+            ...prev,
+            useSameEmail: checked,
+            contact_email: checked ? prev.account_email : prev.contact_email
+        }));
+    };
+
+    const handleAccountEmailChange = (value: string) => {
+        setFormData(prev => ({
+            ...prev,
+            account_email: value,
+            contact_email: prev.useSameEmail ? value : prev.contact_email
+        }));
+    };
+
+    const [showConfirmModal, setShowConfirmModal] = useState(false);
+
+    const handleInitialSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        setShowConfirmModal(true);
+    };
+
+    const handleFinalSubmit = async () => {
+        setShowConfirmModal(false);
+        setStatus('submitting');
+        setErrorMessage('');
+
+        try {
+            await axios.post('/api/support', {
+                nom: formData.nom,
+                prenom: formData.prenom,
+                account_email: formData.account_email,
+                contact_email: formData.contact_email,
+                message: formData.message
+            });
+            setStatus('success');
+            setFormData({
+                nom: '',
+                prenom: '',
+                account_email: '',
+                contact_email: '',
+                useSameEmail: false,
+                message: ''
+            });
+        } catch (error: any) {
+            console.error('Submission error', error);
+            setStatus('error');
+            setErrorMessage(error.response?.data?.message || t('support.error.generic'));
+        }
+    };
+
+    const containerVariants = {
+        hidden: { opacity: 0, y: 20 },
+        visible: { opacity: 1, y: 0 }
+    };
+
+    return (
+        <div className="support-page" style={{ paddingTop: '100px', minHeight: '100vh', paddingBottom: '50px', position: 'relative' }}>
+            <div className="container" style={{ maxWidth: '800px', margin: '0 auto', padding: '0 20px' }}>
+                <Link
+                    to={`/${language}/travelmate`}
+                    style={{
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        gap: '8px',
+                        marginBottom: '2rem',
+                        textDecoration: 'none',
+                        color: 'var(--text-color)',
+                        opacity: 0.8
+                    }}
+                >
+                    <ArrowLeft size={18} />
+                    {t('policies.back')}
+                </Link>
+
+                <motion.div
+                    initial="hidden"
+                    animate="visible"
+                    variants={containerVariants}
+                    style={{
+                        background: 'var(--card-bg, rgba(255, 255, 255, 0.05))',
+                        padding: '2.5rem',
+                        borderRadius: '1.5rem',
+                        border: '1px solid var(--border-color, rgba(255, 255, 255, 0.1))',
+                    }}
+                >
+                    <h1 style={{ marginBottom: '1.5rem', fontSize: '2rem' }}>{t('support.title')}</h1>
+                    <p style={{ marginBottom: '2rem', opacity: 0.8, lineHeight: '1.6' }}>
+                        {t('support.description')}
+                    </p>
+
+                    {status === 'success' ? (
+                        <div style={{
+                            padding: '2rem',
+                            background: 'rgba(16, 185, 129, 0.1)',
+                            borderRadius: '1rem',
+                            border: '1px solid rgba(16, 185, 129, 0.2)',
+                            textAlign: 'center',
+                            color: '#10B981'
+                        }}>
+                            <CheckCircle size={48} style={{ marginBottom: '1rem' }} />
+                            <h3>{t('support.success.title')}</h3>
+                            <p>{t('support.success.message')}</p>
+                        </div>
+                    ) : (
+                        <form onSubmit={handleInitialSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+                            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1.5rem' }}>
+                                <div>
+                                    <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>{t('support.form.lastname')}</label>
+                                    <input
+                                        type="text"
+                                        required
+                                        value={formData.nom}
+                                        onChange={e => setFormData({ ...formData, nom: e.target.value })}
+                                        className="form-input"
+                                        style={{ width: '100%', padding: '0.8rem', borderRadius: '0.5rem', border: '1px solid var(--border-color)', background: 'rgba(0,0,0,0.2)', color: 'inherit' }}
+                                    />
+                                </div>
+                                <div>
+                                    <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>{t('support.form.firstname')}</label>
+                                    <input
+                                        type="text"
+                                        required
+                                        value={formData.prenom}
+                                        onChange={e => setFormData({ ...formData, prenom: e.target.value })}
+                                        className="form-input"
+                                        style={{ width: '100%', padding: '0.8rem', borderRadius: '0.5rem', border: '1px solid var(--border-color)', background: 'rgba(0,0,0,0.2)', color: 'inherit' }}
+                                    />
+                                </div>
+                            </div>
+
+                            <div>
+                                <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>{t('support.form.accountemail')}</label>
+                                <input
+                                    type="email"
+                                    required
+                                    value={formData.account_email}
+                                    onChange={e => handleAccountEmailChange(e.target.value)}
+                                    className="form-input"
+                                    style={{ width: '100%', padding: '0.8rem', borderRadius: '0.5rem', border: '1px solid var(--border-color)', background: 'rgba(0,0,0,0.2)', color: 'inherit' }}
+                                />
+                            </div>
+
+                            <div style={{ marginBottom: '-0.5rem' }}>
+                                <label style={{ display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer', opacity: 0.9 }}>
+                                    <input
+                                        type="checkbox"
+                                        checked={formData.useSameEmail}
+                                        onChange={e => handleSameEmailChange(e.target.checked)}
+                                        style={{ width: '18px', height: '18px' }}
+                                    />
+                                    <span style={{ fontSize: '0.9rem' }}>
+                                        {t('support.form.sameemail')}
+                                    </span>
+                                </label>
+                            </div>
+
+                            <div>
+                                <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>{t('support.form.contactemail')}</label>
+                                <input
+                                    type="email"
+                                    required
+                                    value={formData.contact_email}
+                                    onChange={e => setFormData({ ...formData, contact_email: e.target.value })}
+                                    disabled={formData.useSameEmail} // Optional: disable if same
+                                    className="form-input"
+                                    style={{
+                                        width: '100%',
+                                        padding: '0.8rem',
+                                        borderRadius: '0.5rem',
+                                        border: '1px solid var(--border-color)',
+                                        background: formData.useSameEmail ? 'rgba(0,0,0,0.1)' : 'rgba(0,0,0,0.2)',
+                                        color: 'inherit',
+                                        opacity: formData.useSameEmail ? 0.7 : 1
+                                    }}
+                                />
+                            </div>
+
+                            <div>
+                                <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>{t('support.form.message')}</label>
+                                <textarea
+                                    required
+                                    rows={5}
+                                    value={formData.message}
+                                    onChange={e => setFormData({ ...formData, message: e.target.value })}
+                                    className="form-input"
+                                    style={{ width: '100%', padding: '0.8rem', borderRadius: '0.5rem', border: '1px solid var(--border-color)', background: 'rgba(0,0,0,0.2)', color: 'inherit' }}
+                                />
+                            </div>
+
+                            {status === 'error' && (
+                                <div style={{ color: '#EF4444', display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.95rem' }}>
+                                    <AlertCircle size={16} />
+                                    {errorMessage}
+                                </div>
+                            )}
+
+                            <button
+                                type="submit"
+                                disabled={status === 'submitting'}
+                                className="btn btn-primary"
+                                style={{
+                                    marginTop: '1rem',
+                                    padding: '1rem',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                    gap: '10px',
+                                    opacity: status === 'submitting' ? 0.7 : 1,
+                                    cursor: status === 'submitting' ? 'wait' : 'pointer'
+                                }}
+                            >
+                                {status === 'submitting' ? t('support.form.submitting') : (
+                                    <>
+                                        <Send size={18} />
+                                        {t('support.form.submit')}
+                                    </>
+                                )}
+                            </button>
+                        </form>
+                    )}
+                </motion.div>
+            </div>
+
+            {/* Confirmation Modal */}
+            {showConfirmModal && (
+                <div style={{
+                    position: 'fixed',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    background: 'rgba(0, 0, 0, 0.7)',
+                    backdropFilter: 'blur(5px)',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    zIndex: 1000,
+                    padding: '20px'
+                }}>
+                    <motion.div
+                        initial={{ scale: 0.9, opacity: 0 }}
+                        animate={{ scale: 1, opacity: 1 }}
+                        style={{
+                            background: '#1a1a1a',
+                            backgroundColor: 'var(--card-bg, #1a1a1a)',
+                            padding: '2rem',
+                            borderRadius: '1rem',
+                            border: '1px solid var(--border-color, rgba(255,255,255,0.1))',
+                            maxWidth: '500px',
+                            width: '100%',
+                            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)'
+                        }}
+                    >
+                        <h2 style={{ marginBottom: '1rem', display: 'flex', alignItems: 'center', gap: '10px' }}>
+                            <AlertCircle size={24} color="var(--primary-color)" />
+                            {t('modal.confirm.title')}
+                        </h2>
+                        <p style={{ marginBottom: '1.5rem', opacity: 0.8 }}>
+                            {t('modal.confirm.message')}
+                        </p>
+
+                        <div style={{ background: 'rgba(255,255,255,0.05)', padding: '1rem', borderRadius: '0.5rem', marginBottom: '2rem', fontSize: '0.95rem' }}>
+                            <p style={{ marginBottom: '0.5rem' }}><strong>{t('support.form.lastname')}:</strong> {formData.nom}</p>
+                            <p style={{ marginBottom: '0.5rem' }}><strong>{t('support.form.firstname')}:</strong> {formData.prenom}</p>
+                            <p style={{ marginBottom: '0.5rem' }}><strong>{t('support.form.accountemail')}:</strong> {formData.account_email}</p>
+                            <p style={{ marginBottom: '0.5rem' }}><strong>{t('support.form.contactemail')}:</strong> {formData.contact_email}</p>
+                            {formData.message && <p><strong>{t('support.form.message')}:</strong> <span style={{ opacity: 0.8, display: 'block', marginTop: '4px', fontStyle: 'italic' }}>"{formData.message}"</span></p>}
+                        </div>
+
+                        <div style={{ display: 'flex', gap: '1rem', justifyContent: 'flex-end' }}>
+                            <button
+                                onClick={() => setShowConfirmModal(false)}
+                                style={{
+                                    padding: '0.8rem 1.5rem',
+                                    borderRadius: '0.5rem',
+                                    background: 'transparent',
+                                    border: '1px solid var(--border-color)',
+                                    color: 'inherit',
+                                    cursor: 'pointer'
+                                }}
+                            >
+                                {t('modal.btn.cancel')}
+                            </button>
+                            <button
+                                onClick={handleFinalSubmit}
+                                className="btn btn-primary"
+                                style={{
+                                    padding: '0.8rem 1.5rem',
+                                    cursor: 'pointer'
+                                }}
+                            >
+                                {t('modal.btn.confirm')}
+                            </button>
+                        </div>
+                    </motion.div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default Support;

frontend/src/contexts/LanguageContext.tsx

@@ -34,6 +34,12 @@ const translations = {
     'btn.viewProjects': 'Voir mes projets',
     'btn.contactMe': 'Me contacter',
 
+    // Modal
+    'modal.confirm.title': 'Vérification',
+    'modal.confirm.message': 'Veuillez vérifier vos informations avant d\'envoyer.',
+    'modal.btn.cancel': 'Annuler',
+    'modal.btn.confirm': 'Confirmer & Envoyer',
+
     // Hero
     'hero.greeting': 'Salut, je suis',
     'hero.title': 'Dayron Van Leemput',
@@ -79,6 +85,7 @@ const translations = {
     'projects.subtitle': 'Découvrez mes réalisations et mes expériences',
     'projects.status.available': 'Bientôt disponible sur App Store et Play Store',
     'projects.status.current': 'Projet actuel',
+    'projects.status.personal': 'Projet personnel',
     'projects.status.online': 'En ligne',
     'projects.features': 'Fonctionnalités principales :',
     'projects.btn.code': 'Code',
@@ -100,6 +107,12 @@ const translations = {
     'projects.shelbys.feature1': 'Design moderne et immersif',
     'projects.shelbys.feature2': 'Présentation du menu',
     'projects.shelbys.feature4': 'Informations pratiques',
+    'projects.homeSync.title': 'Home Sync',
+    'projects.homeSync.description': 'Application de gestion familiale tout-en-un. Synchronisez les calendriers, partagez des listes de courses et gérez votre foyer en toute simplicité.',
+    'projects.homeSync.feature1': 'Calendrier familial partagé',
+    'projects.homeSync.feature2': 'Listes de courses collaboratives',
+    'projects.homeSync.feature3': 'Gestion de foyer simple',
+    'projects.homeSync.feature4': 'Synchronisation Google Agenda',
 
     // Education
     'education.title': 'Formation',
@@ -168,8 +181,7 @@ const translations = {
     '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 Gitea Actions',
+    'travelmate.tech.api.2': 'CI/CD avec Gitea Actions',
     'travelmate.viewCode': 'Voir le code',
 
     // Erase Data Page
@@ -186,8 +198,29 @@ const translations = {
     'erasedata.form.submit': 'Envoyer la demande',
     'erasedata.form.submitting': 'Envoi en cours...',
 
-    'travelmate.policies.link': 'Voir les politiques de confidentialité',
-    'travelmate.erasedata.link': 'Supprimer mes données',
+    'travelmate.policies.link': 'Voir les politiques',
+    'travelmate.erasedata.link': 'Suppression',
+    'travelmate.support.link': 'Assistance',
+
+    'travelmate.legal.title': 'Centre d\'Aide & Légal',
+    'travelmate.legal.privacy.desc': 'Consultez nos engagements concernant vos données personnelles.',
+    'travelmate.legal.erasedata.desc': 'Exercez votre droit à l\'oubli en demandant la suppression de vos données.',
+    'travelmate.legal.support.desc': 'Une question ? Un problème ? Contactez notre équipe support.',
+
+    // Support Page
+    'support.title': 'Assistance Travel Mate',
+    'support.description': 'Besoin d\'aide ? Remplissez le formulaire ci-dessous.',
+    'support.form.lastname': 'Nom',
+    'support.form.firstname': 'Prénom',
+    'support.form.accountemail': 'Email du compte',
+    'support.form.contactemail': 'Email de contact',
+    'support.form.sameemail': 'Utiliser le même email pour le contact',
+    'support.form.message': 'Message',
+    'support.form.submit': 'Envoyer',
+    'support.form.submitting': 'Envoi en cours...',
+    'support.success.title': 'Demande envoyée',
+    'support.success.message': 'Nous vous répondrons dès que possible.',
+    'support.error.generic': 'Une erreur est survenue.',
 
     // Policies Page
     'policies.back': 'Retour',
@@ -222,6 +255,34 @@ const translations = {
 
     'policies.googleBtn': 'Politique de confidentialité Google',
 
+    // Home Sync Page
+    'homesync.page.mainTitle': 'Home Sync 👨‍👩‍👧‍👦',
+    'homesync.page.subtitle': 'L\'organisateur familial ultime',
+    'homesync.page.intro': 'Bienvenue dans Home Sync, l\'application conçue pour simplifier la gestion quotidienne de votre foyer ! Synchronisez vos emplois du temps, gérez des listes de courses partagées et restez organisés, le tout en temps réel. (Projet privé)',
+
+    'homesync.highlights.title': '✨ Fonctionnalités Principales',
+    'homesync.highlight.1.title': 'Calendrier Partagé & Intelligent',
+    'homesync.highlight.1.desc': 'Vue centralisée de tous les événements de la famille. Synchronisation Google Agenda bidirectionnelle (import/export) avec indicateurs visuels.',
+    'homesync.highlight.2.title': 'Listes de Courses Collaboratives',
+    'homesync.highlight.2.desc': 'Ajoutez et cochez des articles en temps réel. Organisation par état et bientôt fonction glisser-déposer pour le parcours en magasin.',
+    'homesync.highlight.3.title': 'Gestion de Foyer',
+    'homesync.highlight.3.desc': 'Créez un foyer ou rejoignez-en un existant via un ID unique. Gestion simple des profils utilisateurs.',
+    'homesync.highlight.4.title': 'Sécurité & Authentification',
+    'homesync.highlight.4.desc': 'Connexion sécurisée via Email ou Google. Vos données familiales restent privées et protégées.',
+
+    'homesync.page.conclusion': 'Reprenez le contrôle de votre organisation familiale avec Home Sync.',
+
+    'homesync.tech.title': '🛠️ Stack Technique',
+    'homesync.tech.frontend': 'Frontend (Flutter)',
+    'homesync.tech.frontend.1': 'Interface utilisateur moderne et réactive',
+    'homesync.tech.frontend.2': 'Gestion d\'état avec BLoC',
+    'homesync.tech.backend': 'Backend / Database (Firebase)',
+    'homesync.tech.backend.1': 'Firestore pour les données temps réel',
+    'homesync.tech.backend.2': 'Authentication (Email, Google)',
+    'homesync.tech.api': 'APIs',
+    'homesync.tech.api.1': 'Google Calendar API',
+    'homesync.viewCode': 'Code source (Privé)',
+
     // Contact
     'contact.title': 'Contactez-moi',
     'contact.subtitle': 'Une question, un projet ou simplement envie de discuter ? N\'hésitez pas à me contacter !',
@@ -254,6 +315,12 @@ const translations = {
     'btn.viewProjects': 'View my projects',
     'btn.contactMe': 'Contact me',
 
+    // Modal
+    'modal.confirm.title': 'Verification',
+    'modal.confirm.message': 'Please review your information before sending.',
+    'modal.btn.cancel': 'Cancel',
+    'modal.btn.confirm': 'Confirm & Send',
+
     // Hero
     'hero.greeting': 'Hi, I am',
     'hero.title': 'Dayron Van Leemput',
@@ -299,6 +366,7 @@ const translations = {
     'projects.subtitle': 'Discover my achievements and experiences',
     'projects.status.available': 'Coming soon on App Store and Play Store',
     'projects.status.current': 'Current project',
+    'projects.status.personal': 'Personal project',
     'projects.status.online': 'Online',
     'projects.features': 'Main features:',
     'projects.btn.code': 'Code',
@@ -320,6 +388,12 @@ const translations = {
     'projects.shelbys.feature1': 'Modern and immersive design',
     'projects.shelbys.feature2': 'Menu presentation',
     'projects.shelbys.feature4': 'Practical information',
+    'projects.homeSync.title': 'Home Sync',
+    'projects.homeSync.description': 'All-in-one family management application. Sync calendars, share shopping lists, and manage your household with ease.',
+    'projects.homeSync.feature1': 'Shared family calendar',
+    'projects.homeSync.feature2': 'Collaborative shopping lists',
+    'projects.homeSync.feature3': 'Simple household management',
+    'projects.homeSync.feature4': 'Google Calendar synchronization',
 
     // Education
     'education.title': 'Education',
@@ -389,8 +463,7 @@ const translations = {
     'travelmate.tech.backend.5': '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 Gitea Actions',
+    'travelmate.tech.api.2': 'CI/CD with Gitea Actions',
     'travelmate.viewCode': 'View Code',
 
     // Erase Data Page
@@ -408,7 +481,28 @@ const translations = {
     'erasedata.form.submitting': 'Sending...',
 
     'travelmate.policies.link': 'View Privacy Policy',
-    'travelmate.erasedata.link': 'Request Data Erasure',
+    'travelmate.erasedata.link': 'Data Deletion',
+    'travelmate.support.link': 'Support',
+
+    'travelmate.legal.title': 'Help & Legal Center',
+    'travelmate.legal.privacy.desc': 'Read about our commitments regarding your personal data.',
+    'travelmate.legal.erasedata.desc': 'Exercise your right to be forgotten by requesting data deletion.',
+    'travelmate.legal.support.desc': 'A question? A problem? Contact our support team.',
+
+    // Support Page
+    'support.title': 'Travel Mate Support',
+    'support.description': 'Need help? Fill out the form below.',
+    'support.form.lastname': 'Last Name',
+    'support.form.firstname': 'First Name',
+    'support.form.accountemail': 'Account Email',
+    'support.form.contactemail': 'Contact Email',
+    'support.form.sameemail': 'Use same email for contact',
+    'support.form.message': 'Message',
+    'support.form.submit': 'Send',
+    'support.form.submitting': 'Sending...',
+    'support.success.title': 'Request Sent',
+    'support.success.message': 'We will reply as soon as possible.',
+    'support.error.generic': 'An error occurred.',
 
     // Policies Page
     'policies.back': 'Back',
@@ -443,6 +537,34 @@ const translations = {
 
     'policies.googleBtn': 'Google Privacy Policy',
 
+    // Home Sync Page
+    'homesync.page.mainTitle': 'Home Sync 👨‍👩‍👧‍👦',
+    'homesync.page.subtitle': 'The ultimate family organizer',
+    'homesync.page.intro': 'Welcome to Home Sync, the app designed to simplify your household\'s daily management! Sync schedules, manage shared shopping lists, and stay organized, all in real-time. (Private Project)',
+
+    'homesync.highlights.title': '✨ Main Features',
+    'homesync.highlight.1.title': 'Shared & Smart Calendar',
+    'homesync.highlight.1.desc': 'Centralized view of all family events. Bidirectional Google Calendar synchronization (import/export) with visual indicators.',
+    'homesync.highlight.2.title': 'Collaborative Shopping Lists',
+    'homesync.highlight.2.desc': 'Add and check off items in real-time. Organized by status and coming soon: drag-and-drop for store routing.',
+    'homesync.highlight.3.title': 'Household Management',
+    'homesync.highlight.3.desc': 'Create a new household or join an existing one via a unique ID. Simple user profile management.',
+    'homesync.highlight.4.title': 'Security & Authentication',
+    'homesync.highlight.4.desc': 'Secure login via Email or Google. Your family data remains private and protected.',
+
+    'homesync.page.conclusion': 'Take back control of your family organization with Home Sync.',
+
+    'homesync.tech.title': '🛠️ Tech Stack',
+    'homesync.tech.frontend': 'Frontend (Flutter)',
+    'homesync.tech.frontend.1': 'Modern and responsive user interface',
+    'homesync.tech.frontend.2': 'State Management with BLoC',
+    'homesync.tech.backend': 'Backend / Database (Firebase)',
+    'homesync.tech.backend.1': 'Firestore for real-time data',
+    'homesync.tech.backend.2': 'Authentication (Email, Google)',
+    'homesync.tech.api': 'APIs',
+    'homesync.tech.api.1': 'Google Calendar API',
+    'homesync.viewCode': 'Source Code (Private)',
+
     // Contact
     'contact.title': 'Contact me',
     'contact.subtitle': 'A question, a project or just want to chat? Feel free to contact me!',

frontend/src/styles/components/_projects.scss

@@ -10,7 +10,9 @@
   background: var(--bg-secondary);
 
   &-grid {
-    @include grid-responsive(400px, 40px);
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 40px;
     margin-bottom: 60px;
 
     @include respond-to(md) {