website-front/banquise-website/src/App.tsx

import React, { useState } from 'react';
import { Navigation } from './components/layout/Navigation';
import { HeroSection } from './components/sections/HeroSection';
import { ServicesSection } from './components/sections/ServicesSection';
import { TechFeaturesSection } from './components/sections/TechFeaturesSection';
import { AboutSection } from './components/sections/AboutSection';
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"
    ]
  }
];

const App: React.FC = () => {
  const [selectedService, setSelectedService] = useState<Service | null>(null);
  const [openAccordion, setOpenAccordion] = useState<string | null>(null);

  const toggleAccordion = (title: string) => {
    setOpenAccordion(openAccordion === title ? null : title);
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-banquise-blue-dark via-banquise-blue-dark/95 to-banquise-blue-dark text-white overflow-x-hidden relative">
      {/* Background Effects */}
      <ParallaxBackground />
      
      {/* Main Content */}
      <div className="relative z-10">
        <Navigation />
        <HeroSection />
        <ServicesSection services={services} onServiceClick={setSelectedService} />
        <TechFeaturesSection />
        <AboutSection openAccordion={openAccordion} toggleAccordion={toggleAccordion} />
        <Footer />
      </div>

      {/* UI Components */}
      <ScrollToTopButton />
      
      {selectedService && (
        <Popup 
          service={selectedService} 
          onClose={() => setSelectedService(null)} 
        />
      )}
    </div>
  );
};

export default App;