Change to new cv

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

@@ -3,6 +3,8 @@ import cors from 'cors';
 import dotenv from 'dotenv';
 import pool from './config/db';
 
+import messagesRouter from './routes/messages';
+
 dotenv.config();
 
 const app = express();
@@ -11,6 +13,10 @@ const port = process.env.PORT || 3000;
 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) => {
     res.json({ status: 'ok', timestamp: new Date() });

backend/src/routes/messages.ts

@@ -0,0 +1,51 @@
+import { Router, Request, Response } from 'express';
+import pool from '../config/db';
+import { RowDataPacket, 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, 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 (!email || email.trim() === '') {
+        errors.push("L'email est requis.");
+    } else if (!isValidEmail(email)) {
+        errors.push("L'format de l'email est invalide.");
+    }
+    // if (!message || message.trim() === '') errors.push('Le message est requis.'); // Message is now optional
+
+    if (errors.length > 0) {
+        res.status(400).json({ status: 'error', errors });
+        return;
+    }
+
+    // Default message if empty
+    const messageContent = (!message || message.trim() === '') ? 'Supprimer toutes les données' : message;
+
+    // 2. Insert into Database
+    try {
+        const query = 'INSERT INTO messages (nom, prenom, email, message) VALUES (?, ?, ?, ?)';
+        const [result] = await pool.query<ResultSetHeader>(query, [nom, prenom, email, messageContent]);
+
+        res.status(201).json({
+            status: 'success',
+            message: 'Demande envoyée avec succès.',
+            id: result.insertId
+        });
+    } catch (error: any) {
+        console.error('Error inserting message:', error);
+        res.status(500).json({ status: 'error', message: 'Erreur serveur lors de la sauvegarde.' });
+    }
+});
+
+export default router;

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/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@emailjs/browser": "^4.4.1",
+        "axios": "^1.13.2",
         "framer-motion": "^12.23.24",
         "lucide-react": "^0.553.0",
         "react": "^19.2.0",
@@ -2135,6 +2136,23 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
+      "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.4",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2211,6 +2229,19 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -2295,6 +2326,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2369,6 +2412,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
@@ -2383,6 +2435,20 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.250",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.250.tgz",
@@ -2390,6 +2456,51 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.25.12",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
@@ -2758,6 +2869,42 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/framer-motion": {
       "version": "12.23.24",
       "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.24.tgz",
@@ -2800,6 +2947,15 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -2810,6 +2966,43 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -2836,6 +3029,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -2853,6 +3058,45 @@
         "node": ">=8"
       }
     },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3070,6 +3314,15 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3094,6 +3347,27 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3312,6 +3586,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",

frontend/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@emailjs/browser": "^4.4.1",
+    "axios": "^1.13.2",
     "framer-motion": "^12.23.24",
     "lucide-react": "^0.553.0",
     "react": "^19.2.0",

frontend/src/App.tsx

@@ -2,10 +2,13 @@ import { useState, useEffect } from 'react';
 import { BrowserRouter, Routes, Route, Navigate, useParams } from 'react-router-dom';
 import { LanguageProvider } from './contexts/LanguageContext';
 import Header from './components/Header';
-import Footer from './components/Footer';
 import Home from './components/Home';
-import TravelMate from './components/TravelMate';
+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';
 
@@ -59,8 +62,12 @@ function AppContent() {
         <main style={{ flex: 1 }}>
           <Routes>
             <Route path="/" element={<Home />} />
-            <Route path="travelmate" element={<TravelMate />} />
+            <Route path="/travelmate" element={<TravelMate />} />
-            <Route path="travelmate/policies" element={<Policies />} />
+            <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 { Link } from 'react-router-dom';
-import { Shield, Smartphone, Map, DollarSign, Users, Globe, Code } from 'lucide-react';
+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,39 +230,105 @@ const TravelMate = () => {
                         </div>
                     </motion.div>
 
-                    {/* Policies CTA */}
+                    {/* Legal & Support Section */}
-                    <motion.div
+                    <motion.div variants={itemVariants} style={{ marginBottom: '6rem' }}>
-                        variants={itemVariants}
+                        <h2 style={{
-                        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))',
                             textAlign: 'center',
-                            maxWidth: '600px',
+                            marginBottom: '4rem',
-                            margin: '0 auto'
+                            fontSize: '2.5rem',
-                        }}
+                            fontWeight: '700',
-                    >
+                            color: 'var(--text-color)'
-                        <Shield className="text-primary" size={48} style={{ marginBottom: '1rem', color: 'var(--primary-color)' }} />
+                        }}>{t('travelmate.legal.title')}</h2>
-                        <h3 style={{ marginBottom: '1.5rem' }}>
+
-                            {t('policies.title')}
+                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '2rem' }}>
-                        </h3>
+                            {/* Privacy Policy Card */}
-                        <Link
+                            <Link to={`/${language}/travelmate/policies`} style={{ textDecoration: 'none', color: 'inherit' }}>
-                            to={`/${language}/travelmate/policies`}
+                                <motion.div
-                            className="btn btn-secondary"
+                                    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={{
-                                display: 'inline-flex',
+                                        background: 'var(--card-bg, rgba(255, 255, 255, 0.03))',
-                                alignItems: 'center',
+                                        backdropFilter: 'blur(10px)',
-                                gap: '10px',
+                                        padding: '2rem',
-                                textDecoration: 'none'
+                                        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'
                                     }}
                                 >
-                            {t('travelmate.policies.link')}
+                                    <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>
+
+                            {/* 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

@@ -0,0 +1,278 @@
+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 EraseData = () => {
+    const { t, language } = useLanguage();
+    const [formData, setFormData] = useState({
+        nom: '',
+        prenom: '',
+        email: '',
+        message: '',
+        confirm: false
+    });
+    const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
+    const [errorMessage, setErrorMessage] = useState('');
+
+    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 {
+            await axios.post('/api/messages', {
+                nom: formData.nom,
+                prenom: formData.prenom,
+                email: formData.email,
+                message: formData.message
+            });
+            setStatus('success');
+            setFormData({ nom: '', prenom: '', email: '', message: '', confirm: false });
+        } catch (error: any) {
+            console.error('Submission error', error);
+            setStatus('error');
+            setErrorMessage(error.response?.data?.message || 'Une erreur est survenue. Veuillez réessayer.');
+        }
+    };
+
+    const containerVariants = {
+        hidden: { opacity: 0, y: 20 },
+        visible: { opacity: 1, y: 0 }
+    };
+
+    return (
+        <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`}
+                    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('erasedata.title')}</h1>
+                    <p style={{ marginBottom: '2rem', opacity: 0.8, lineHeight: '1.6' }}>
+                        {t('erasedata.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('erasedata.success.title')}</h3>
+                            <p>{t('erasedata.success.message')}</p>
+                        </div>
+                    ) : (
+                        <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>
+                                    <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('erasedata.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('erasedata.form.email')}</label>
+                                <input
+                                    type="email"
+                                    required
+                                    value={formData.email}
+                                    onChange={e => setFormData({ ...formData, email: 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('erasedata.form.message')}</label>
+                                <textarea
+                                    required={false}
+                                    rows={4}
+                                    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' }}
+                                    placeholder={t('erasedata.form.placeholder')}
+                                />
+                            </div>
+
+                            <label style={{ display: 'flex', alignItems: 'flex-start', gap: '10px', cursor: 'pointer', opacity: 0.9 }}>
+                                <input
+                                    type="checkbox"
+                                    required
+                                    checked={formData.confirm}
+                                    onChange={e => setFormData({ ...formData, confirm: e.target.checked })}
+                                    style={{ marginTop: '4px', width: '18px', height: '18px' }}
+                                />
+                                <span style={{ fontSize: '0.9rem' }}>
+                                    {t('erasedata.form.confirm')}
+                                </span>
+                            </label>
+
+                            {status === 'error' && (
+                                <div style={{ color: '#EF4444', display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.95rem' }}>
+                                    <AlertCircle size={16} />
+                                    {errorMessage}
+                                </div>
+                            )}
+
+                            <button
+                                type="submit"
+                                disabled={!formData.confirm || status === 'submitting'}
+                                className="btn btn-primary"
+                                style={{
+                                    marginTop: '1rem',
+                                    padding: '1rem',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                    gap: '10px',
+                                    opacity: (!formData.confirm || status === 'submitting') ? 0.5 : 1,
+                                    cursor: (!formData.confirm || status === 'submitting') ? 'not-allowed' : 'pointer'
+                                }}
+                            >
+                                {status === 'submitting' ? t('erasedata.form.submitting') : (
+                                    <>
+                                        <Send size={18} />
+                                        {t('erasedata.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', // 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>
+    );
+};
+
+export default EraseData;

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,11 +181,46 @@ 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.2': 'CI/CD avec Gitea Actions',
-    'travelmate.tech.api.3': 'CI/CD avec Gitea Actions',
     'travelmate.viewCode': 'Voir le code',
 
-    'travelmate.policies.link': 'Voir les politiques de confidentialité',
+    // Erase Data Page
+    'erasedata.title': 'Demande de suppression de données',
+    'erasedata.description': 'Conformément au RGPD et à notre politique de confidentialité, vous pouvez demander la suppression de vos données personnelles associées à Travel Mate. Veuillez remplir le formulaire ci-dessous.',
+    'erasedata.success.title': 'Demande envoyée avec succès',
+    'erasedata.success.message': 'Nous traiterons votre demande dans les plus brefs délais.',
+    'erasedata.form.lastname': 'Nom',
+    'erasedata.form.firstname': 'Prénom',
+    'erasedata.form.email': 'Email du compte à supprimer',
+    'erasedata.form.message': 'Message / Raison (Optionnel)',
+    'erasedata.form.placeholder': 'Je souhaite supprimer mon compte car...',
+    'erasedata.form.confirm': 'Je confirme vouloir supprimer mes données personnelles. Je comprends que cette action est irréversible et entraînera la perte de l\'accès à mon compte Travel Mate.',
+    'erasedata.form.submit': 'Envoyer la demande',
+    'erasedata.form.submitting': 'Envoi en cours...',
+
+    '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',
@@ -207,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 !',
@@ -239,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',
@@ -284,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',
@@ -305,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',
@@ -374,11 +463,46 @@ 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.2': 'CI/CD with Gitea Actions',
-    'travelmate.tech.api.3': 'CI/CD with Gitea Actions',
     'travelmate.viewCode': 'View Code',
 
+    // Erase Data Page
+    'erasedata.title': 'Data Erasure Request',
+    'erasedata.description': 'In accordance with GDPR and our privacy policy, you can request the deletion of your personal data associated with Travel Mate. Please fill out the form below.',
+    'erasedata.success.title': 'Request sent successfully',
+    'erasedata.success.message': 'We will process your request as soon as possible.',
+    'erasedata.form.lastname': 'Last Name',
+    'erasedata.form.firstname': 'First Name',
+    'erasedata.form.email': 'Account Email to Delete',
+    'erasedata.form.message': 'Message / Reason (Optional)',
+    'erasedata.form.placeholder': 'I wish to delete my account because...',
+    'erasedata.form.confirm': 'I confirm that I want to delete my personal data. I understand that this action is irreversible and will result in the loss of access to my Travel Mate account.',
+    'erasedata.form.submit': 'Send Request',
+    'erasedata.form.submitting': 'Sending...',
+
     'travelmate.policies.link': 'View Privacy Policy',
+    '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',
@@ -413,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/_global.scss

@@ -134,6 +134,19 @@ p {
   max-width: 65ch;
 }
 
+// Classes globales pour les boutons
+.btn {
+  @include button-base();
+
+  &-primary {
+    @include button-primary();
+  }
+
+  &-secondary {
+    @include button-secondary();
+  }
+}
+
 // Classes utilitaires
 .container {
   max-width: map-get($breakpoints, xl);

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) {