Add homesync to projects

frontend/src/App.tsx

@@ -7,6 +7,7 @@ import Footer from './components/Footer';
 import Policies from './components/Policies';
 import TravelMate from './components/TravelMate';
 import EraseData from './components/TravelMate/EraseData';
+import HomeSync from './components/HomeSync';
 import ScrollToTop from './components/ScrollToTop';
 import './styles/main.scss';
 
@@ -63,6 +64,7 @@ function AppContent() {
             <Route path="/travelmate" element={<TravelMate />} />
             <Route path="/travelmate/policies" element={<Policies />} />
             <Route path="/travelmate/erasedata" element={<EraseData />} />
+            <Route path="/homesync" element={<HomeSync />} />
             <Route path="/policies" element={<Policies />} />
           </Routes>
         </main>

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/contexts/LanguageContext.tsx

@@ -79,6 +79,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 +101,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',
@@ -222,6 +229,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 !',
@@ -299,6 +334,7 @@ const translations = {
     'projects.subtitle': 'Discover my achievements and experiences',
     'projects.status.available': 'Coming soon on App Store and Play Store',
     'projects.status.current': 'Current project',
+    'projects.status.personal': 'Personal project',
     'projects.status.online': 'Online',
     'projects.features': 'Main features:',
     'projects.btn.code': 'Code',
@@ -320,6 +356,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',
@@ -443,6 +485,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!',