(null);
-
- // FAQ items for the about section
- const faqItems = useMemo(() => [
- {
- question: "Qui sommes-nous ?",
- answer: (
- <>
- La Banquise est une association étudiante de l'EPITA, dont l'objectif est de former les epiteens a diverses notions de reseau et d'hebergement de servcies.
- Fondée a la rentree 2022, notre asso permet à ceux qui le souhaitent de se former sur des technologies d'hébergement et de réseau, sur nos serveurs, a dispositon des etudiants.
- Notre équipe est composée d'étudiants passionnés par l'informatique, le réseau et le partage de connaissances. Nous mettons notre expertise au service des étudiants et des associations de l'EPITA.
-
- )
- },
- {
- question: "Comment candidater pour rejoindre La Banquise ?",
- answer: (
- <>
- Pour nous rejoindre, rien de plus simple :
-
- Rejoignez notre serveur Discord
- Donnez votre login EPITA dans un ticket, ou expliquer votre situation/besoins.
- Un moderateur vous mettra le role necessaire pour acceder au salons avec tout nos projets sur discord !
-
- Si vous etes motivé.e, peu importe votre niveau technique actuel, n'hesitez pas a venir nous poser des question ou venir demander des ressources pour un projet !
-
- Rejoindre notre Discord
-
- )
- },
- {
- question: "Quels sont nos objectifs ?",
- answer: (
- <>
- Nos principaux objectifs sont :
-
- Former les étudiants aux technologies d'hébergement et de réseau
- Fournir des services informatiques de qualité aux étudiants et associations de l'EPITA
- Promouvoir le partage de connaissances et l'entraide
- Créer un environnement d'apprentissage pratique par l'expérience
- Maintenir une infrastructure robuste et sécurisée
-
-
- )
- },
- {
- question: "Comment utiliser nos services ?",
- answer: (
- <>
- Pour accéder à nos services :
-
- Connectez-vous au service souhaité avec vos identifiants, pour le moment crees par un admin
- Consultez notre Wiki pour obtenir de l'aide sur l'utilisation de chaque service !
-
- Si vous rencontrez des difficultés, n'hésitez pas à demander de l'aide sur notre Discord.
-
- Se Connecter
-
- )
- },
- {
- question: "Comment contribuer a un projet ?",
- answer: (
- <>
- Il existe plusieurs façons de contribuer aux projets La Banquise :
-
- Deployer des services
- Experimenter et documenter le fonctionnement de technologies (k8s, openstack...)
- Aider a gerer les ressources de l'asso
- Contribuer au code source de nos projets via Gitea
- Rédiger ou améliorer la documentation sur notre Wiki
- Proposer de nouvelles idées de services ou d'améliorations
- Aider d'autres utilisateurs sur notre Discord
-
- Toutes les contributions sont les bienvenues, même les plus modestes !
-
- )
- },
- ], []);
-
- const toggleAccordion = (index: number) => {
- setActiveAccordion(activeAccordion === index ? null : index);
- };
-
- return (
-
-
Passer au contenu principal
-
-
-
-
-
- {renderBubbles}
-
-
-
-
-
-
-
Association La Banquise
-
- Association d'hébergement et lab réseau pour tous les étudiants et associations de l'EPITA !
-
-
-
-
-
-
- Notre infrastructure
-
- 25+ serveurs pour répondre à vos besoins
-
-
- Un local a EPITA Lyon, prochainement a Paris ?
-
-
-
-
-
-
Serveurs performants
-
- Infrastructure optimisée pour assurer des performances élevées et une disponibilité maximale de vos applications
-
-
-
-
-
-
-
Stockage sécurisé
-
- Solutions de stockage distribuées avec redondance pour garantir l'intégrité et la durabilité de vos données
-
-
-
-
-
-
-
Réseau optimisé
-
- Architecture réseau à haute disponibilité avec une faible latence pour vos applications critiques
-
-
-
-
-
-
-
Sécurité renforcée
-
- Protection contre les menaces avec systèmes de sécurité modernes et mises à jour régulières
-
-
-
-
-
-
- Nos services
-
- Explorez notre écosystème de services conçus pour répondre à vos besoins.
-
-
-
-
-
-
-
- À propos de nous
-
- Découvrez notre mission et posez-nous vos questions
-
-
-
-
-
-
-
-
- La Banquise est une association étudiante dédiée à l'hébergement de services et à la formation sur les technologies réseau, au service de la communauté EPITA.
-
-
-
- {faqItems.map((item, index) => (
-
-
toggleAccordion(index)}
- role="button"
- aria-expanded={activeAccordion === index}
- aria-controls={`accordion-content-${index}`}
- tabIndex={0}
- onKeyPress={(e) => {
- if (e.key === 'Enter' || e.key === ' ') {
- toggleAccordion(index);
- }
- }}
- >
- {item.question}
-
-
- {item.answer}
-
-
- ))}
-
-
-
- {selectedService !== null && (
-
- )}
-
-
-
-
-
-
(null);
+
+ // Inline accordion logic
+ const [openAccordion, setOpenAccordion] = useState(null);
+ const toggleAccordion = (title: string) => {
+ setOpenAccordion(openAccordion === title ? null : title);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+ {selectedService && (
+
setSelectedService(null)} />
+ )}
+ = ({ isOpen, onClose }) => {
+ // Empêcher le scroll du body quand le menu mobile est ouvert
+ useEffect(() => {
+ if (isOpen) {
+ document.body.style.overflow = 'hidden';
+ } else {
+ document.body.style.overflow = 'unset';
+ }
+
+ return () => {
+ document.body.style.overflow = 'unset';
+ };
+ }, [isOpen]);
+
+ return (
+
+ {/* Overlay amélioré */}
+
+
+ {/* Menu mobile moderne */}
+
+
+ {/* Header moderne */}
+
+
+
+
+
+
+
+
+ La Banquise
+
+
Menu Navigation
+
+
+
+
+
+
+
+
+
+ {/* Navigation moderne */}
+
+
+ {/* Navigation Links */}
+
+
+ {/* CTA Button */}
+
+
+
+ {/* Footer simplifié */}
+
+
+
+ © 2024 La Banquise
+
+
+
+
+ {/* Effet glassmorphism */}
+
+
+
+
+
+
+ {/* Logo section */}
+
+
+
+
+
+
+
+ La Banquise
+
+
+ Communauté • Hébergement
+
+
+
+
+ {/* Navigation links desktop */}
+
+
+ {/* Action buttons desktop */}
+
+
+ {/* Mobile menu button */}
+
setMobileMenuOpen(!mobileMenuOpen)}
+ aria-label={mobileMenuOpen ? "Fermer le menu" : "Ouvrir le menu"}
+ aria-expanded={mobileMenuOpen}
+ >
+
+
+
+
+
+
+
+ {/* Spacer pour compenser la navbar fixed */}
+
+
+ {/* Menu mobile */}
+ setMobileMenuOpen(false)}
+ />
+
+ );
+};
diff --git a/banquise-website/src/components/sections/AboutSection.tsx b/banquise-website/src/components/sections/AboutSection.tsx
new file mode 100644
index 0000000..36ae0f6
--- /dev/null
+++ b/banquise-website/src/components/sections/AboutSection.tsx
@@ -0,0 +1,121 @@
+import React from 'react';
+import { AccordionItem } from '../ui/AccordionItem';
+
+interface AboutSectionProps {
+ openAccordion: string | null;
+ toggleAccordion: (title: string) => void;
+}
+
+export const AboutSection: React.FC = ({ openAccordion, toggleAccordion }) => (
+
+
+ {/* Header */}
+
+
+
+ À Propos de La Banquise
+
+
+ Une communauté passionnée qui propose des services d'hébergement et des outils collaboratifs pour les développeurs et les gamers.
+
+
+
+ {/* FAQ Section */}
+
+
+ ❓
+ Questions Fréquentes
+
+
+
toggleAccordion("mission")}
+ >
+
+
+ Fournir une plateforme stable et accessible pour héberger vos projets, partager vos connaissances et jouer ensemble.
+
+
+ Nous croyons en la puissance de la collaboration et mettons à disposition des outils modernes pour faciliter le travail en équipe.
+
+
+ Collaboration
+ Innovation
+ Accessibilité
+
+
+
+
toggleAccordion("services")}
+ >
+
+
+
+
📚
+
+
Wiki
+
Documentation collaborative et guides détaillés
+
+
+
+
+
🔧
+
+
Gitea
+
Gestion de versions Git auto-hébergée
+
+
+
+
+
🎮
+
+
Panel de Jeux
+
Interface de gestion pour serveurs de jeux
+
+
+
+
+ Tous nos services sont maintenus avec soin et régulièrement mis à jour pour garantir une expérience optimale.
+
+
+
+
toggleAccordion("community")}
+ >
+
+
+ Rejoignez notre serveur Discord pour rejoindre l'asso, échanger avec nous, obtenir de l'aide et rester informé des dernières nouveautés !
+
+
+
+
+ 💬
+ Comment rejoindre l'asso ?
+
+
+ • Creez un ticket banquise• Donnez votre login EPITA ou expliquez votre situation• Un moderateur validera votre demande et vous donnera acces aux salons discord de l'asso !
+
+
+ 🚀
+ Rejoindre Discord
+
+
+
+
+
+);
diff --git a/banquise-website/src/components/sections/HeroSection.tsx b/banquise-website/src/components/sections/HeroSection.tsx
new file mode 100644
index 0000000..b3af103
--- /dev/null
+++ b/banquise-website/src/components/sections/HeroSection.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+export const HeroSection: React.FC = () => (
+
+
+
+
+ Bienvenue sur La Banquise
+
+
+
+ Association d'hébergement et lab réseau pour tous les étudiants et associations de l'EPITA !
+
+
+
+ Découvrir nos services
+ →
+
+
+);
diff --git a/banquise-website/src/components/sections/ServicesSection.tsx b/banquise-website/src/components/sections/ServicesSection.tsx
new file mode 100644
index 0000000..3b57bfd
--- /dev/null
+++ b/banquise-website/src/components/sections/ServicesSection.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+
+// Define interface directly in the component file
+interface Service {
+ name: string;
+ url: string;
+ image: string;
+ description: string;
+ features: string[];
+ icon: string;
+}
+
+interface ServicesSectionProps {
+ services: Service[];
+ onServiceClick: (service: Service) => void;
+}
+
+export const ServicesSection: React.FC = ({ services, onServiceClick }) => (
+
+
+
+ Nos Services
+
+
+ Cliquez sur un service pour découvrir toutes ses fonctionnalités
+
+
+
+ {services.map((service) => (
+
onServiceClick(service)}
+ >
+ {/* Icon */}
+
+ {service.icon}
+
+
+ {/* Service name */}
+
+ {service.name}
+
+
+ {/* Short teaser description */}
+
+ {service.description.split('.')[0]}.
+
+
+ {/* CTA */}
+
+ Découvrir toutes les fonctionnalités
+ →
+
+
+ {/* Subtle hover effect */}
+
+
+ ))}
+
+);
diff --git a/banquise-website/src/components/sections/TechFeaturesSection.tsx b/banquise-website/src/components/sections/TechFeaturesSection.tsx
new file mode 100644
index 0000000..7220677
--- /dev/null
+++ b/banquise-website/src/components/sections/TechFeaturesSection.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+export const TechFeaturesSection: React.FC = () => (
+
+
+
+ Notre Infrastructure
+
+
+ 25+ serveurs pour répondre à vos besoins
+
+
+
+
+
+ 🚀
+
+
Serveurs performants
+
Infrastructure optimisée pour assurer des performances élevées et une disponibilité maximale de vos applications
+
+
+
+
+ 💾
+
+
Stockage sécurisé
+
Solutions de stockage distribuées avec redondance pour garantir l'intégrité et la durabilité de vos données
+
+
+
+
+ 🌐
+
+
Réseau optimisé
+
Architecture réseau à haute disponibilité avec une faible latence pour vos applications critiques
+
+
+
+
+ 🛡️
+
+
Sécurité renforcée
+
Protection contre les menaces avec systèmes de sécurité modernes et mises à jour régulières
+
+
+);
diff --git a/banquise-website/src/components/ui/AccordionItem.tsx b/banquise-website/src/components/ui/AccordionItem.tsx
new file mode 100644
index 0000000..b9c74dd
--- /dev/null
+++ b/banquise-website/src/components/ui/AccordionItem.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+// Define interface directly in the component file
+interface AccordionItemProps {
+ title: string;
+ children: React.ReactNode;
+ isOpen: boolean;
+ onToggle: () => void;
+}
+
+export const AccordionItem: React.FC = ({ title, children, isOpen, onToggle }) => (
+
+
+ {title}
+
+ ▼
+
+
+
+
= ({ service, onClose }) => (
+
+
+
+ {/* Header */}
+
+
+ ×
+
+
+
+
+ {service.icon}
+
+
+
+ {service.name}
+
+
+ Service d'hébergement professionnel
+
+
+ Haute disponibilité
+ Open Source
+ Communautaire
+
+
+
+
+
+ {/* Content - Layout simplifié */}
+
+ {/* Description */}
+
+ 📋
+ Description détaillée
+
+
+
+ {service.description}
+
+
+
+
+ ✓
+
+
+
99.9% Uptime
+
Disponibilité garantie
+
+
+
+
+ 🔒
+
+
+
Sécurisé
+
SSL & Backups
+
+
+
+
+
+ {/* Fonctionnalités en colonnes */}
+
+ ⚡
+ Fonctionnalités principales
+
+
+ {service.features.map((feature, index) => (
+
+ ))}
+
+
+ {/* Call to action simplifié */}
+
+
+
+ {/* Decorative elements - améliorés pour desktop */}
+
+
+
+
+
+