fix service cards icons

banquise-website/components/common/ServiceCard.tsx

@@ -55,6 +55,26 @@ export const ServiceCard: React.FC<ServiceCardProps> = ({
           'group-hover:shadow-2xl group-hover:scale-110',
           commonClasses.transition
         )}>
+          {service.iconType === 'image' ? (
+            <Image
+              src={service.image as string}
+              alt={service.name}
+              className={cn(
+                'h-12 w-12 object-contain',
+                'transition-transform duration-300 group-hover:scale-110'
+              )}
+              width={48}
+              height={48}
+            />
+          ) : service.lucideIcon ? (
+            <service.lucideIcon
+              className={cn(
+                'h-12 w-12 text-white',
+                'transition-transform duration-300 group-hover:scale-110'
+              )}
+              strokeWidth={1.5}
+            />
+          ) : (
             <Image
               src={service.image as any}
               alt={service.icon}
@@ -65,6 +85,7 @@ export const ServiceCard: React.FC<ServiceCardProps> = ({
               width={48}
               height={48}
             />
+          )}
         </div>
         
         {/* Nom du service */}

banquise-website/components/ui/Popup.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import Image from 'next/image';
 import { URLS } from '@/lib/config/constants';
 import { FeatureBadge, FeatureItem, SectionTitle } from './PopupComponents';
 import { cn, commonClasses } from '@/lib/utils';
@@ -50,8 +51,20 @@ export const Popup: React.FC<PopupProps> = ({ service, onClose, translations })
           {/* Header */}
           <div className="relative bg-gradient-to-r from-blue-600 to-blue-500 p-6 sm:p-8 text-white pr-16 sm:pr-20">
             <div className="flex flex-col lg:flex-row items-center lg:items-start mb-4">
-              <div className="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 bg-white/20 rounded-3xl flex items-center justify-center text-3xl sm:text-4xl lg:text-5xl mb-4 lg:mb-0 lg:mr-8 backdrop-blur-sm">
+              <div className="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 bg-white/20 rounded-3xl flex items-center justify-center mb-4 lg:mb-0 lg:mr-8 backdrop-blur-sm">
-                {service.icon}
+                {service.iconType === 'image' ? (
+                  <Image
+                    src={service.image as string}
+                    alt={service.name}
+                    width={48}
+                    height={48}
+                    className="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 object-contain"
+                  />
+                ) : service.lucideIcon ? (
+                  <service.lucideIcon className="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 text-white" strokeWidth={1.5} />
+                ) : (
+                  <span className="text-3xl sm:text-4xl lg:text-5xl">{service.icon}</span>
+                )}
               </div>
               <div className="text-center lg:text-left flex-1">
                 <h2 className="font-heading text-2xl sm:text-3xl lg:text-4xl mt-0 mb-3 lg:mb-4 leading-tight font-bold text-white">
@@ -111,9 +124,9 @@ export const Popup: React.FC<PopupProps> = ({ service, onClose, translations })
                   'border-0 py-4 px-6 sm:px-8 rounded-2xl cursor-pointer no-underline',
                   'font-bold tracking-wide shadow-lg',
                   commonClasses.transition,
-                  commonClasses.hoverLift,
+                  commonClasses.hoverScale,
                   'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500',
-                  'text-base lg:text-lg hover:scale-[1.02] active:scale-95'
+                  'text-base lg:text-lg'
                 )}
               >
                 <Rocket className="w-6 h-6 lg:w-7 lg:h-7 mr-3" strokeWidth={2} />

banquise-website/lib/data/translations/en.ts

@@ -1,5 +1,6 @@
 import type { Translation } from '@/types/i18n';
 import { URLS } from '@/lib/config/constants';
+import { BookOpen, GitBranch, Gamepad2, KeyRound, Building, Mail } from 'lucide-react';
 
 export const en: Translation = {
   services: [
@@ -8,6 +9,7 @@ export const en: Translation = {
       url: URLS.services.wiki,
       image: "/assets/wikijs.png",
       icon: "📚",
+      iconType: "image",
       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",
@@ -25,6 +27,7 @@ export const en: Translation = {
       url: URLS.services.gitea,
       image: "/assets/Gitea_Logo.png",
       icon: "🔧",
+      iconType: "image",
       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",
@@ -42,6 +45,7 @@ export const en: Translation = {
       url: URLS.services.pelican,
       image: "/assets/pelican.png",
       icon: "🐧",
+      iconType: "image",
       description: "Game server management with dedicated servers (Minecraft, CS2, Palworld, and many others)",
       features: [
         "One-click deployment with pre-configured templates",
@@ -57,6 +61,8 @@ export const en: Translation = {
       url: URLS.services.ssp,
       image: "/assets/banquise.png",
       icon: "🔐",
+      iconType: "lucide",
+      lucideIcon: KeyRound,
       description: "Secure interface for autonomous password management. Easily change your credentials safely.",
       features: [
         "Secure interface to change your password",
@@ -70,6 +76,7 @@ export const en: Translation = {
       url: URLS.services.opencloud,
       image: "/assets/opencloud_logo_white.png",
       icon: "☁️",
+      iconType: "image",
       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",
@@ -87,6 +94,8 @@ export const en: Translation = {
       url: URLS.services.intra,
       image: "/assets/banquise.png",
       icon: "🏢",
+      iconType: "lucide",
+      lucideIcon: Building,
       description: "Secure private space for the association to centralize internal resources, communications and collaboration tools between members.",
       features: [
         "Personalized dashboard for each member",
@@ -104,6 +113,8 @@ export const en: Translation = {
       url: URLS.services.panel,
       image: "/assets/banquise.png",
       icon: "🎮",
+      iconType: "lucide",
+      lucideIcon: Gamepad2,
       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...)",
@@ -120,6 +131,8 @@ export const en: Translation = {
       url: URLS.services.mails,
       image: "/assets/banquise.png",
       icon: "📧",
+      iconType: "lucide",
+      lucideIcon: Mail,
       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",

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

@@ -1,5 +1,6 @@
 import type { Translation } from '@/types/i18n';
 import { URLS } from '@/lib/config/constants';
+import { BookOpen, GitBranch, Gamepad2, KeyRound, Building, Mail } from 'lucide-react';
 
 export const fr: Translation = {
   services: [
@@ -8,6 +9,7 @@ export const fr: Translation = {
       url: URLS.services.wiki,
       image: "/assets/wikijs.png",
       icon: "📚",
+      iconType: "image",
       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",
@@ -25,6 +27,7 @@ export const fr: Translation = {
       url: URLS.services.gitea,
       image: "/assets/Gitea_Logo.png",
       icon: "🔧",
+      iconType: "image",
       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",
@@ -42,6 +45,7 @@ export const fr: Translation = {
       url: URLS.services.pelican,
       image: "/assets/pelican.png",
       icon: "🐧",
+      iconType: "image",
       description: "Gestion de serveurs de jeux avec serveurs dédiés (Minecraft, CS2, Palworld, et bien d'autres)",
       features: [
         "Déploiement en un clic avec templates préconfigurés",
@@ -57,6 +61,8 @@ export const fr: Translation = {
       url: URLS.services.ssp,
       image: "/assets/banquise.png",
       icon: "🔐",
+      iconType: "lucide",
+      lucideIcon: KeyRound,
       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",
@@ -70,6 +76,7 @@ export const fr: Translation = {
       url: URLS.services.opencloud,
       image: "/assets/opencloud_logo_white.png",
       icon: "☁️",
+      iconType: "image",
       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é",
@@ -87,6 +94,8 @@ export const fr: Translation = {
       url: URLS.services.intra,
       image: "/assets/banquise.png",
       icon: "🏢",
+      iconType: "lucide",
+      lucideIcon: Building,
       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",
@@ -104,6 +113,8 @@ export const fr: Translation = {
       url: URLS.services.panel,
       image: "/assets/banquise.png",
       icon: "🎮",
+      iconType: "lucide",
+      lucideIcon: Gamepad2,
       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...)",
@@ -120,6 +131,8 @@ export const fr: Translation = {
       url: URLS.services.mails,
       image: "/assets/banquise.png",
       icon: "📧",
+      iconType: "lucide",
+      lucideIcon: Mail,
       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",

banquise-website/lib/utils/index.ts

@@ -69,6 +69,7 @@ export const commonClasses = {
   
   // Hover effects communs
   hoverScale: 'hover:scale-105 active:scale-95',
+  cardHover: 'hover:shadow-xl hover:-translate-y-1',
   
   // Boutons communs
   buttonBase: 'inline-flex items-center justify-center font-semibold rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400/50',

banquise-website/types/service.ts

@@ -1,10 +1,13 @@
 import type { StaticImageData } from 'next/image'
+import type { LucideIcon } from 'lucide-react'
 
 export interface Service {
   name: string;
   url: string;
   image: string | StaticImageData;
   icon: string;
+  iconType: 'image' | 'lucide';
+  lucideIcon?: LucideIcon;
   description: string;
   features: string[];
 }