diff --git a/banquise-website/src/App.tsx b/banquise-website/src/App.tsx index 8afd2d1..21bb3b6 100644 --- a/banquise-website/src/App.tsx +++ b/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'; - -interface 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" - ] - } -]; +import { LanguageSwitcher } from './components/ui/LanguageSwitcher'; +import { useTranslation } from './hooks/useTranslation'; +import type { Service } from './types/service'; const App: React.FC = () => { + const { t, currentLanguage, changeLanguage, availableLanguages } = useTranslation(); const [selectedService, setSelectedService] = useState(null); const [openAccordion, setOpenAccordion] = useState(null); @@ -164,9 +28,26 @@ const App: React.FC = () => { {/* Main Content */}
- - - + {/* Navigation avec sélecteur de langue */} + + } + /> + + + + +
@@ -178,7 +59,8 @@ const App: React.FC = () => { {selectedService && ( setSelectedService(null)} + onClose={() => setSelectedService(null)} + translations={t.common} /> )}
diff --git a/banquise-website/src/components/sections/ServicesSection.tsx b/banquise-website/src/components/sections/ServicesSection.tsx index 5b1f386..b8868c9 100644 --- a/banquise-website/src/components/sections/ServicesSection.tsx +++ b/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 = ({ services, onServiceClick }) => ( +export const ServicesSection: React.FC = ({ + services, + onServiceClick, + translations +}) => (

@@ -51,7 +47,7 @@ export const ServicesSection: React.FC = ({ services, onSe {/* CTA */}
- Découvrir toutes les fonctionnalités + {translations.discoverFeatures}
diff --git a/banquise-website/src/components/ui/LanguageSwitcher.tsx b/banquise-website/src/components/ui/LanguageSwitcher.tsx new file mode 100644 index 0000000..73e97fc --- /dev/null +++ b/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 = ({ + currentLanguage, + onLanguageChange, + availableLanguages +}) => { + const languageNames: Record = { + fr: '🇫🇷 Français', + en: '🇬🇧 English', + //es: '🇪🇸 Español', + //de: '🇩🇪 Deutsch' + }; + + return ( +
+ +
+ ); +}; diff --git a/banquise-website/src/data/translations/en.tsx b/banquise-website/src/data/translations/en.tsx new file mode 100644 index 0000000..62e98ad --- /dev/null +++ b/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..." + } +}; diff --git a/banquise-website/src/data/translations/fr.ts b/banquise-website/src/data/translations/fr.ts new file mode 100644 index 0000000..9c5e223 --- /dev/null +++ b/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..." + } +}; diff --git a/banquise-website/src/data/translations/index.ts b/banquise-website/src/data/translations/index.ts new file mode 100644 index 0000000..4f2a11c --- /dev/null +++ b/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 = { + fr, + en, + // Ajoutez d'autres langues ici : + // es, + // de, +}; + +export const defaultLanguage: Language = 'fr'; +export const availableLanguages: Language[] = ['fr', 'en']; diff --git a/banquise-website/src/hooks/useTranslation.tsx b/banquise-website/src/hooks/useTranslation.tsx new file mode 100644 index 0000000..a9454ef --- /dev/null +++ b/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(() => { + // 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(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[] + }; +}; diff --git a/banquise-website/src/types/i18n.ts b/banquise-website/src/types/i18n.ts new file mode 100644 index 0000000..d7b959a --- /dev/null +++ b/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'; diff --git a/banquise-website/src/types/service.ts b/banquise-website/src/types/service.ts new file mode 100644 index 0000000..f5d7923 --- /dev/null +++ b/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[]; +}