init

banquise-website/src/App.tsx

@@ -8,148 +8,12 @@ import { Footer } from './components/layout/Footer';
 import { Popup } from './components/ui/Popup';
 import { ScrollToTopButton } from './components/ui/ScrollToTopButton';
 import { ParallaxBackground } from './components/ui/ParallaxBackground';
-import { URLS } from './config/constants';
+import { LanguageSwitcher } from './components/ui/LanguageSwitcher';
-
+import { useTranslation } from './hooks/useTranslation';
-interface Service {
+import type { Service } from './types/service';
-  name: string;
-  url: string;
-  image: string;
-  icon: string;
-  description: string;
-  features: string[];
-}
-
-const services = [
-  {
-    name: "Wiki",
-    url: URLS.services.wiki,
-    image: "/path/to/wiki-image.jpg",
-    icon: "📚",
-    description: "Plateforme collaborative de documentation technique et de partage de connaissances. Créez, modifiez et organisez vos guides, tutoriels et documentations en équipe avec un système de versioning intégré.",
-    features: [
-      "Éditeur markdown avancé avec prévisualisation en temps réel",
-      "Système de versioning pour suivre les modifications",
-      "Collaboration en temps réel avec plusieurs contributeurs",
-      "Recherche intelligente dans tous les documents",
-      "Templates prédéfinis pour différents types de documentation",
-      "Système de commentaires et de révisions",
-      "Export PDF et HTML pour partage externe",
-      "Intégration avec Git pour la sauvegarde"
-    ]
-  },
-  {
-    name: "Gitea",
-    url: URLS.services.gitea,
-    image: "/path/to/gitea-image.jpg",
-    icon: "🔧",
-    description: "Service Git auto-hébergé lightweight et performant pour vos projets de développement. Alternative open-source à GitHub avec toutes les fonctionnalités essentielles pour gérer vos repositories.",
-    features: [
-      "Repositories Git illimités publics et privés",
-      "Interface web intuitive pour la gestion des projets",
-      "Issues et pull requests avec système de review",
-      "Wiki intégré pour chaque projet",
-      "Actions CI/CD pour l'automatisation",
-      "Gestion fine des permissions et des équipes",
-      "API REST complète pour l'intégration",
-      "Webhooks pour les notifications externes"
-    ]
-  },
-  {
-    name: "Panel Gaming",
-    url: URLS.services.panel,
-    image: "/path/to/panel-image.jpg",
-    icon: "🎮",
-    description: "Interface de gestion centralisée pour tous vos serveurs de jeux. Déployez, configurez et surveillez facilement vos serveurs Minecraft, CS2, Garry's Mod et bien d'autres.",
-    features: [
-      "Support de 20+ jeux populaires (Minecraft, CS2, GMod...)",
-      "Déploiement en un clic avec templates préconfigurés",
-      "Console d'administration en temps réel",
-      "Gestion des fichiers avec éditeur intégré",
-      "Monitoring des performances et ressources",
-      "Système de sauvegarde automatique",
-      "Planificateur de tâches automatisées"
-    ]
-  },
-  {
-    name: "Pelican",
-    url: URLS.services.pelican,
-    image: "/path/to/pelican-image.jpg",
-    icon: "🐧",
-    description: "Pelican is the ultimate, free game server control panel offering high flying security.",
-    features: [
-      "Gestion de serveurs de jeux avec serveurs dedies (Minecraft, CS2, Palworld...)",
-      "Déploiement en un clic avec templates préconfigurés",
-      "Console d'administration en temps réel",
-      "Gestion des fichiers avec éditeur intégré",
-      "Monitoring des performances et ressources",
-      "Système de sauvegarde automatique",
-      "Planificateur de tâches automatisées"         
-    ]
-  },
-  {
-    name: "Intranet",
-    url: URLS.services.intra,
-    image: "/path/to/intra-image.jpg",
-    icon: "🏢",
-    description: "Espace privé sécurisé de l'association pour centraliser les ressources internes, communications et outils de collaboration entre membres.",
-    features: [
-      "Tableau de bord personnalisé pour chaque membre",
-      "Calendrier des événements et réunions",
-      "Partage de fichiers sécurisé",
-      "Forums de discussion privés",
-      "Annuaire des membres avec profils",
-      "Système de notifications internes",
-      "Gestion des projets et tâches",
-      "Archive des décisions et procès-verbaux"
-    ]
-  },
-  {
-    name: "Mails",
-    url: URLS.services.mails,
-    image: "/path/to/mails-image.jpg",
-    icon: "📧",
-    description: "Service de messagerie électronique professionnel avec interface web moderne. Bénéficiez d'une adresse email personnalisée @la-banquise.fr avec toutes les fonctionnalités avancées.",
-    features: [
-      "Adresses email personnalisées @la-banquise.fr",
-      "Interface webmail moderne et responsive",
-      "Filtres anti-spam et antivirus intégrés",
-      "Contacts et calendrier synchronisés",
-      "Support IMAP/SMTP pour clients externes",
-      "Stockage généreux avec archivage",
-      "Chiffrement des communications",
-      "Sauvegarde automatique des données"
-    ]
-  },
-  {
-    name: "Password change",
-    url: URLS.services.ssp,
-    image: "/path/to/mails-image.jpg",
-    icon: "📧",
-    description: "Password reset.",
-    features: [
-      "Interface pour changer votre mot de passe"
-    ]
-  },
-  {
-    name: "Opencloud",
-    url: URLS.services.opencloud,
-    image: "/path/to/opencloud-image.jpg",
-    icon: "☁️",
-    description: "Plateforme cloud collaborative open-source pour le stockage, le partage et la synchronisation de fichiers. Alternative libre à Google Drive avec contrôle total sur vos données.",
-    features: [
-      "Stockage cloud sécurisé et chiffré",
-      "Synchronisation multi-appareils",
-      "Partage de fichiers avec liens sécurisés",
-      "Édition collaborative de documents",
-      "Versioning automatique des fichiers",
-      "Applications mobiles natives",
-      "Intégration avec outils externes",
-      "Sauvegarde géoredondante des données"
-    ]
-  }
-];
 
 const App: React.FC = () => {
+  const { t, currentLanguage, changeLanguage, availableLanguages } = useTranslation();
   const [selectedService, setSelectedService] = useState<Service | null>(null);
   const [openAccordion, setOpenAccordion] = useState<string | null>(null);
 
@@ -164,9 +28,26 @@ const App: React.FC = () => {
       
       {/* Main Content */}
       <div className="relative z-10">
-        <Navigation />
+        {/* Navigation avec sélecteur de langue */}
-        <HeroSection />
+        <Navigation 
-        <ServicesSection services={services} onServiceClick={setSelectedService} />
+          translations={t.navigation}
+          languageSwitcher={
+            <LanguageSwitcher 
+              currentLanguage={currentLanguage}
+              onLanguageChange={changeLanguage}
+              availableLanguages={availableLanguages}
+            />
+          }
+        />
+        
+        <HeroSection translations={t.hero} />
+        
+        <ServicesSection 
+          services={t.services} 
+          onServiceClick={setSelectedService}
+          translations={t.common}
+        />
+        
         <TechFeaturesSection />
         <AboutSection openAccordion={openAccordion} toggleAccordion={toggleAccordion} />
         <Footer />
@@ -179,6 +60,7 @@ const App: React.FC = () => {
         <Popup 
           service={selectedService} 
           onClose={() => setSelectedService(null)}
+          translations={t.common}
         />
       )}
     </div>

banquise-website/src/components/sections/ServicesSection.tsx

@@ -1,23 +1,19 @@
 import React from 'react';
+import type { Service } from '../../types/service';
 
-// Update the Service interface to match your actual service objects
-interface Service {
-  name: string;
-  url: string;
-  image: string;
-  icon: string;
-  description: string;
-  features: string[];
-}
-
-// Define interface directly in the component file
 interface ServicesSectionProps {
   services: Service[];
-
   onServiceClick: (service: Service) => void;
+  translations: {
+    discoverFeatures: string;
+  };
 }
 
-export const ServicesSection: React.FC<ServicesSectionProps> = ({ services, onServiceClick }) => (
+export const ServicesSection: React.FC<ServicesSectionProps> = ({ 
+  services, 
+  onServiceClick, 
+  translations 
+}) => (
   <section id="services" className="relative z-2 py-12 sm:py-16 md:py-20 w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8">
     <div className="w-20 h-1 bg-gradient-to-r from-banquise-blue-lightest to-banquise-blue mx-auto mb-6 sm:mb-8 rounded-full"></div>
     <h2 className="text-banquise-gray text-2xl sm:text-3xl md:text-4xl mb-4 sm:mb-6 text-center font-heading font-bold tracking-tight px-2" style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)' }}>
@@ -51,7 +47,7 @@ export const ServicesSection: React.FC<ServicesSectionProps> = ({ services, onSe
           
           {/* CTA */}
           <div className="flex items-center justify-center text-banquise-blue-light font-bold group-hover:text-banquise-blue-lightest transition-colors duration-300 text-sm sm:text-base">
-            <span className="text-center">Découvrir toutes les fonctionnalités</span>
+            <span className="text-center">{translations.discoverFeatures}</span>
             <span className="ml-2 text-lg transition-transform duration-300 group-hover:translate-x-2">→</span>
           </div>
           

banquise-website/src/components/ui/LanguageSwitcher.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { Language } from '../../types/i18n';
+
+interface LanguageSwitcherProps {
+  currentLanguage: Language;
+  onLanguageChange: (language: Language) => void;
+  availableLanguages: Language[];
+}
+
+export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
+  currentLanguage,
+  onLanguageChange,
+  availableLanguages
+}) => {
+  const languageNames: Record<Language, string> = {
+    fr: '🇫🇷 Français',
+    en: '🇬🇧 English',
+    //es: '🇪🇸 Español',
+    //de: '🇩🇪 Deutsch'
+  };
+
+  return (
+    <div className="relative inline-block">
+      <select
+        value={currentLanguage}
+        onChange={(e) => onLanguageChange(e.target.value as Language)}
+        className="bg-banquise-blue-dark/20 border border-banquise-blue-lightest/30 text-banquise-gray rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-banquise-blue-light"
+      >
+        {availableLanguages.map((lang) => (
+          <option key={lang} value={lang} className="bg-banquise-blue-dark text-banquise-gray">
+            {languageNames[lang]}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};

banquise-website/src/data/translations/en.tsx

@@ -0,0 +1,153 @@
+import type { Translation } from '../../types/i18n';
+import { URLS } from '../../config/constants';
+
+export const en: Translation = {
+  services: [
+    {
+      name: "Wiki",
+      url: URLS.services.wiki,
+      image: "/path/to/wiki-image.jpg",
+      icon: "📚",
+      description: "Collaborative technical documentation and knowledge sharing platform. Create, edit and organize your guides, tutorials and documentation as a team with integrated versioning system.",
+      features: [
+        "Advanced markdown editor with real-time preview",
+        "Versioning system to track changes",
+        "Real-time collaboration with multiple contributors",
+        "Smart search across all documents",
+        "Predefined templates for different documentation types",
+        "Comment and revision system",
+        "PDF and HTML export for external sharing",
+        "Git integration for backup"
+      ]
+    },
+    {
+      name: "Gitea",
+      url: URLS.services.gitea,
+      image: "/path/to/gitea-image.jpg",
+      icon: "🔧",
+      description: "Lightweight and performant self-hosted Git service for your development projects. Open-source alternative to GitHub with all essential features for managing your repositories.",
+      features: [
+        "Unlimited public and private Git repositories",
+        "Intuitive web interface for project management",
+        "Issues and pull requests with review system",
+        "Integrated wiki for each project",
+        "CI/CD actions for automation",
+        "Fine-grained permissions and team management",
+        "Complete REST API for integration",
+        "Webhooks for external notifications"
+      ]
+    },
+    {
+      name: "Gaming Panel",
+      url: URLS.services.panel,
+      image: "/path/to/panel-image.jpg",
+      icon: "🎮",
+      description: "Centralized management interface for all your game servers. Easily deploy, configure and monitor your Minecraft, CS2, Garry's Mod and many other servers.",
+      features: [
+        "Support for 20+ popular games (Minecraft, CS2, GMod...)",
+        "One-click deployment with pre-configured templates",
+        "Real-time administration console",
+        "File management with integrated editor",
+        "Performance and resource monitoring",
+        "Automatic backup system",
+        "Automated task scheduler"
+      ]
+    },
+    {
+      name: "Pelican",
+      url: URLS.services.pelican,
+      image: "/path/to/pelican-image.jpg",
+      icon: "🐧",
+      description: "Ultra-fast and flexible Python static site generator. Create blogs, portfolios or documentation sites with optimal performance and simplified deployment.",
+      features: [
+        "Game server management with dedicated servers (Minecraft, CS2, Palworld...)",
+        "One-click deployment with pre-configured templates",
+        "Real-time administration console",
+        "File management with integrated editor",
+        "Performance and resource monitoring",
+        "Automatic backup system",
+        "Automated task scheduler"
+      ]
+    },
+    {
+      name: "Intranet",
+      url: URLS.services.intra,
+      image: "/path/to/intra-image.jpg",
+      icon: "🏢",
+      description: "Secure private space for the association to centralize internal resources, communications and collaboration tools between members.",
+      features: [
+        "Personalized dashboard for each member",
+        "Event and meeting calendar",
+        "Secure file sharing",
+        "Private discussion forums",
+        "Member directory with profiles",
+        "Internal notification system",
+        "Project and task management",
+        "Archive of decisions and minutes"
+      ]
+    },
+    {
+      name: "Mails",
+      url: URLS.services.mails,
+      image: "/path/to/mails-image.jpg",
+      icon: "📧",
+      description: "Professional email service with modern web interface. Benefit from a personalized @la-banquise.fr email address with all advanced features.",
+      features: [
+        "Personalized @la-banquise.fr email addresses",
+        "Modern and responsive webmail interface",
+        "Integrated anti-spam and antivirus filters",
+        "Synchronized contacts and calendar",
+        "IMAP/SMTP support for external clients",
+        "Generous storage with archiving",
+        "Communication encryption",
+        "Automatic data backup"
+      ]
+    },
+    {
+      name: "Password Change",
+      url: URLS.services.ssp,
+      image: "/path/to/ssp-image.jpg",
+      icon: "🔐",
+      description: "Secure interface for autonomous password management. Easily change your credentials safely.",
+      features: [
+        "Secure interface to change your password",
+        "Password complexity validation",
+        "Email notifications of changes",
+        "Modification history"
+      ]
+    },
+    {
+      name: "OpenCloud",
+      url: URLS.services.opencloud,
+      image: "/path/to/opencloud-image.jpg",
+      icon: "☁️",
+      description: "Open-source collaborative cloud platform for file storage, sharing and synchronization. Free alternative to Google Drive with full control over your data.",
+      features: [
+        "Secure and encrypted cloud storage",
+        "Multi-device synchronization",
+        "File sharing with secure links",
+        "Collaborative document editing",
+        "Automatic file versioning",
+        "Native mobile applications",
+        "Integration with external tools",
+        "Geo-redundant data backup"
+      ]
+    }
+  ],
+  hero: {
+    title: "Welcome to La Banquise",
+    subtitle: "Your trusted technology partner",
+    cta: "Discover our services"
+  },
+  navigation: {
+    home: "Home",
+    services: "Services",
+    about: "About",
+    contact: "Contact"
+  },
+  common: {
+    discoverFeatures: "Discover all features",
+    close: "Close",
+    loading: "Loading..."
+  }
+};

banquise-website/src/data/translations/fr.ts

@@ -0,0 +1,153 @@
+import type { Translation } from '../../types/i18n';
+import { URLS } from '../../config/constants';
+
+export const fr: Translation = {
+  services: [
+    {
+      name: "Wiki",
+      url: URLS.services.wiki,
+      image: "/path/to/wiki-image.jpg",
+      icon: "📚",
+      description: "Plateforme collaborative de documentation technique et de partage de connaissances. Créez, modifiez et organisez vos guides, tutoriels et documentations en équipe avec un système de versioning intégré.",
+      features: [
+        "Éditeur markdown avancé avec prévisualisation en temps réel",
+        "Système de versioning pour suivre les modifications",
+        "Collaboration en temps réel avec plusieurs contributeurs",
+        "Recherche intelligente dans tous les documents",
+        "Templates prédéfinis pour différents types de documentation",
+        "Système de commentaires et de révisions",
+        "Export PDF et HTML pour partage externe",
+        "Intégration avec Git pour la sauvegarde"
+      ]
+    },
+    {
+      name: "Gitea",
+      url: URLS.services.gitea,
+      image: "/path/to/gitea-image.jpg",
+      icon: "🔧",
+      description: "Service Git auto-hébergé lightweight et performant pour vos projets de développement. Alternative open-source à GitHub avec toutes les fonctionnalités essentielles pour gérer vos repositories.",
+      features: [
+        "Repositories Git illimités publics et privés",
+        "Interface web intuitive pour la gestion des projets",
+        "Issues et pull requests avec système de review",
+        "Wiki intégré pour chaque projet",
+        "Actions CI/CD pour l'automatisation",
+        "Gestion fine des permissions et des équipes",
+        "API REST complète pour l'intégration",
+        "Webhooks pour les notifications externes"
+      ]
+    },
+    {
+      name: "Panel Gaming",
+      url: URLS.services.panel,
+      image: "/path/to/panel-image.jpg",
+      icon: "🎮",
+      description: "Interface de gestion centralisée pour tous vos serveurs de jeux. Déployez, configurez et surveillez facilement vos serveurs Minecraft, CS2, Garry's Mod et bien d'autres.",
+      features: [
+        "Support de 20+ jeux populaires (Minecraft, CS2, GMod...)",
+        "Déploiement en un clic avec templates préconfigurés",
+        "Console d'administration en temps réel",
+        "Gestion des fichiers avec éditeur intégré",
+        "Monitoring des performances et ressources",
+        "Système de sauvegarde automatique",
+        "Planificateur de tâches automatisées"
+      ]
+    },
+    {
+      name: "Pelican",
+      url: URLS.services.pelican,
+      image: "/path/to/pelican-image.jpg",
+      icon: "🐧",
+      description: "Générateur de sites statiques Python ultra-rapide et flexible. Créez des blogs, portfolios ou sites de documentation avec une performance optimale et un déploiement simplifié.",
+      features: [
+        "Gestion de serveurs de jeux avec serveurs dédiés (Minecraft, CS2, Palworld...)",
+        "Déploiement en un clic avec templates préconfigurés",
+        "Console d'administration en temps réel",
+        "Gestion des fichiers avec éditeur intégré",
+        "Monitoring des performances et ressources",
+        "Système de sauvegarde automatique",
+        "Planificateur de tâches automatisées"
+      ]
+    },
+    {
+      name: "Intranet",
+      url: URLS.services.intra,
+      image: "/path/to/intra-image.jpg",
+      icon: "🏢",
+      description: "Espace privé sécurisé de l'association pour centraliser les ressources internes, communications et outils de collaboration entre membres.",
+      features: [
+        "Tableau de bord personnalisé pour chaque membre",
+        "Calendrier des événements et réunions",
+        "Partage de fichiers sécurisé",
+        "Forums de discussion privés",
+        "Annuaire des membres avec profils",
+        "Système de notifications internes",
+        "Gestion des projets et tâches",
+        "Archive des décisions et procès-verbaux"
+      ]
+    },
+    {
+      name: "Mails",
+      url: URLS.services.mails,
+      image: "/path/to/mails-image.jpg",
+      icon: "📧",
+      description: "Service de messagerie électronique professionnel avec interface web moderne. Bénéficiez d'une adresse email personnalisée @la-banquise.fr avec toutes les fonctionnalités avancées.",
+      features: [
+        "Adresses email personnalisées @la-banquise.fr",
+        "Interface webmail moderne et responsive",
+        "Filtres anti-spam et antivirus intégrés",
+        "Contacts et calendrier synchronisés",
+        "Support IMAP/SMTP pour clients externes",
+        "Stockage généreux avec archivage",
+        "Chiffrement des communications",
+        "Sauvegarde automatique des données"
+      ]
+    },
+    {
+      name: "Changement de mot de passe",
+      url: URLS.services.ssp,
+      image: "/path/to/ssp-image.jpg",
+      icon: "🔐",
+      description: "Interface sécurisée pour la gestion autonome de vos mots de passe. Changez facilement vos identifiants en toute sécurité.",
+      features: [
+        "Interface sécurisée pour changer votre mot de passe",
+        "Validation de la complexité des mots de passe",
+        "Notifications par email des changements",
+        "Historique des modifications"
+      ]
+    },
+    {
+      name: "OpenCloud",
+      url: URLS.services.opencloud,
+      image: "/path/to/opencloud-image.jpg",
+      icon: "☁️",
+      description: "Plateforme cloud collaborative open-source pour le stockage, le partage et la synchronisation de fichiers. Alternative libre à Google Drive avec contrôle total sur vos données.",
+      features: [
+        "Stockage cloud sécurisé et chiffré",
+        "Synchronisation multi-appareils",
+        "Partage de fichiers avec liens sécurisés",
+        "Édition collaborative de documents",
+        "Versioning automatique des fichiers",
+        "Applications mobiles natives",
+        "Intégration avec outils externes",
+        "Sauvegarde géoredondante des données"
+      ]
+    }
+  ],
+  hero: {
+    title: "Bienvenue chez La Banquise",
+    subtitle: "Votre partenaire technologique de confiance",
+    cta: "Découvrir nos services"
+  },
+  navigation: {
+    home: "Accueil",
+    services: "Services",
+    about: "À propos",
+    contact: "Contact"
+  },
+  common: {
+    discoverFeatures: "Découvrir toutes les fonctionnalités",
+    close: "Fermer",
+    loading: "Chargement..."
+  }
+};

banquise-website/src/data/translations/index.ts

@@ -0,0 +1,14 @@
+import { fr } from './fr';
+import { en } from './en';
+import type { Language, Translation } from '../../types/i18n';
+
+export const translations: Record<Language, Translation> = {
+  fr,
+  en,
+  // Ajoutez d'autres langues ici :
+  // es,
+  // de,
+};
+
+export const defaultLanguage: Language = 'fr';
+export const availableLanguages: Language[] = ['fr', 'en'];

banquise-website/src/hooks/useTranslation.tsx

@@ -0,0 +1,31 @@
+import { useState, useEffect } from 'react';
+import type { Language, Translation } from '../types/i18n';
+import { translations, defaultLanguage } from '../data/translations';
+
+export const useTranslation = () => {
+  const [currentLanguage, setCurrentLanguage] = useState<Language>(() => {
+    // Récupérer la langue depuis localStorage ou utiliser la langue par défaut
+    const saved = localStorage.getItem('language') as Language;
+    return saved && translations[saved] ? saved : defaultLanguage;
+  });
+
+  const [t, setT] = useState<Translation>(translations[currentLanguage]);
+
+  useEffect(() => {
+    setT(translations[currentLanguage]);
+    localStorage.setItem('language', currentLanguage);
+  }, [currentLanguage]);
+
+  const changeLanguage = (language: Language) => {
+    if (translations[language]) {
+      setCurrentLanguage(language);
+    }
+  };
+
+  return {
+    t,
+    currentLanguage,
+    changeLanguage,
+    availableLanguages: Object.keys(translations) as Language[]
+  };
+};

banquise-website/src/types/i18n.ts

@@ -0,0 +1,23 @@
+import type { Service } from './service';
+
+export interface Translation {
+  services: Service[];
+  hero: {
+    title: string;
+    subtitle: string;
+    cta: string;
+  };
+  navigation: {
+    home: string;
+    services: string;
+    about: string;
+    contact: string;
+  };
+  common: {
+    discoverFeatures: string;
+    close: string;
+    loading: string;
+  };
+}
+
+export type Language = 'fr' | 'en'; //| 'es' | 'de';

banquise-website/src/types/service.ts

@@ -0,0 +1,8 @@
+export interface Service {
+  name: string;
+  url: string;
+  image: string;
+  icon: string;
+  description: string;
+  features: string[];
+}