+
diff --git a/banquise-website/src/components/ui/Background.tsx b/banquise-website/src/components/ui/Background.tsx
new file mode 100644
index 0000000..428a875
--- /dev/null
+++ b/banquise-website/src/components/ui/Background.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const Background: React.FC = () => {
+ return (
+
+ );
+};
diff --git a/banquise-website/src/components/ui/ParallaxBackground.tsx b/banquise-website/src/components/ui/ParallaxBackground.tsx
deleted file mode 100644
index b8e33b5..0000000
--- a/banquise-website/src/components/ui/ParallaxBackground.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-export const ParallaxBackground: React.FC = () => {
- const [scrollY, setScrollY] = useState(0);
-
- useEffect(() => {
- const handleScroll = () => {
- setScrollY(window.scrollY);
- };
-
- window.addEventListener('scroll', handleScroll);
- return () => window.removeEventListener('scroll', handleScroll);
- }, []);
-
- // Éléments flottants avec différentes vitesses de parallaxe
- const floatingElements = [
- // Serveurs et équipements
- { icon: '🖥️', x: 10, y: 20, speed: 0.3, size: 'text-2xl', opacity: 0.1 },
- { icon: '🖲️', x: 85, y: 15, speed: 0.2, size: 'text-xl', opacity: 0.08 },
- { icon: '⚙️', x: 75, y: 45, speed: 0.4, size: 'text-3xl', opacity: 0.12 },
- { icon: '🔧', x: 15, y: 60, speed: 0.25, size: 'text-lg', opacity: 0.06 },
- { icon: '💾', x: 90, y: 70, speed: 0.35, size: 'text-2xl', opacity: 0.1 },
-
- // Code et développement
- { icon: '<>', x: 30, y: 35, speed: 0.15, size: 'text-xl', opacity: 0.08, isText: true },
- { icon: '{ }', x: 60, y: 25, speed: 0.28, size: 'text-2xl', opacity: 0.1, isText: true },
- { icon: '#!/bin', x: 5, y: 80, speed: 0.2, size: 'text-sm', opacity: 0.06, isText: true },
- { icon: 'git', x: 80, y: 85, speed: 0.32, size: 'text-lg', opacity: 0.08, isText: true },
-
- // Réseau et connectivité
- { icon: '🌐', x: 45, y: 10, speed: 0.22, size: 'text-2xl', opacity: 0.09 },
- { icon: '🔗', x: 25, y: 75, speed: 0.18, size: 'text-xl', opacity: 0.07 },
- { icon: '📡', x: 70, y: 55, speed: 0.26, size: 'text-lg', opacity: 0.08 },
-
- // Sécurité
- { icon: '🔒', x: 55, y: 40, speed: 0.3, size: 'text-xl', opacity: 0.09 },
- { icon: '🛡️', x: 35, y: 65, speed: 0.24, size: 'text-2xl', opacity: 0.1 },
- { icon: '🔑', x: 85, y: 30, speed: 0.16, size: 'text-lg', opacity: 0.07 },
-
- // Données et stockage
- { icon: '💿', x: 20, y: 45, speed: 0.28, size: 'text-xl', opacity: 0.08 },
- { icon: '📊', x: 65, y: 75, speed: 0.22, size: 'text-2xl', opacity: 0.09 },
- { icon: '📈', x: 40, y: 20, speed: 0.34, size: 'text-lg', opacity: 0.07 },
-
- // Éléments techniques supplémentaires
- { icon: 'sudo', x: 12, y: 90, speed: 0.19, size: 'text-sm', opacity: 0.06, isText: true },
- { icon: 'SSH', x: 78, y: 12, speed: 0.31, size: 'text-base', opacity: 0.08, isText: true },
- { icon: 'API', x: 92, y: 50, speed: 0.27, size: 'text-lg', opacity: 0.09, isText: true },
- { icon: 'TCP', x: 8, y: 30, speed: 0.23, size: 'text-base', opacity: 0.07, isText: true },
- { icon: 'HTTP', x: 50, y: 80, speed: 0.29, size: 'text-sm', opacity: 0.06, isText: true },
- ];
-
- return (
-
- {/* Grille de fond subtile */}
-
-
- {/* Particules de code flottantes */}
-
- {floatingElements.map((element, index) => (
-
- {element.icon}
-
- ))}
-
-
- {/* Lignes de connexion animées */}
-
-
- {/* Cercles de données en mouvement */}
-
- {[...Array(6)].map((_, i) => (
-
- ))}
-
-
- );
-};
diff --git a/banquise-website/src/components/ui/Popup.tsx b/banquise-website/src/components/ui/Popup.tsx
index 8ed8158..daeed06 100644
--- a/banquise-website/src/components/ui/Popup.tsx
+++ b/banquise-website/src/components/ui/Popup.tsx
@@ -1,21 +1,8 @@
import React, { useEffect } from 'react';
-import { URLS } from '../../config/constants';
+import type { IPopupProps } from '../../shared/types';
+import { Button } from '../common';
-interface Service {
- name: string;
- url: string;
- image: string;
- icon: string;
- description: string;
- features: string[];
-}
-
-interface PopupProps {
- service: Service;
- onClose: () => void;
-}
-
-export const Popup: React.FC
= ({ service, onClose }) => {
+export const Popup: React.FC = ({ service, onClose }) => {
// Empêcher le scroll du body quand la popup est ouverte
useEffect(() => {
document.body.style.overflow = 'hidden';
@@ -25,8 +12,17 @@ export const Popup: React.FC = ({ service, onClose }) => {
};
}, []);
+ const handleBackdropClick = (e: React.MouseEvent) => {
+ if (e.target === e.currentTarget) {
+ onClose();
+ }
+ };
+
return (
-
+
{/* Bouton de fermeture fixe au-dessus du contenu */}
@@ -49,56 +45,37 @@ export const Popup: React.FC
= ({ service, onClose }) => {
{service.icon}
-
+
{service.name}
-
- Service d'hébergement professionnel
-
-
- Haute disponibilité
- Open Source
- Communautaire
-
+
+ {service.description}
+
+
+ {/* CTA Button */}
+
+
+
+
+ Connectez-vous avec vos identifiants EPITA
+
+
- {/* Description */}
-
- 📋
- Description détaillée
-
-
-
- {service.description}
-
-
-
-
- ✓
-
-
-
99.9% Uptime
-
Disponibilité garantie
-
-
-
-
- 🔒
-
-
-
Sécurisé
-
SSL & Backups
-
-
-
-
-
- {/* Fonctionnalités */}
-
+ {/* Features Section */}
+
+
⚡
Fonctionnalités principales
@@ -108,33 +85,45 @@ export const Popup: React.FC
= ({ service, onClose }) => {
- {feature}
+
+ {feature}
+
-
- 🚀
- Accéder à {service.name}
-
-
-
- Besoin d'aide ? Rejoignez notre Discord pour obtenir du support
+
+ {/* Support Section */}
+
+
+ 💬
+ Besoin d'aide ?
+
+
+ Notre équipe est là pour vous accompagner dans l'utilisation de ce service.
+
+
+
+