(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 (
+
+
+
+
+
+
+
+
+
+ {/* Bouton de retour en haut */}
+
+
+ {selectedService && (
+
setSelectedService(null)} />
+ )}
+ = ({ isOpen, onClose }) => {
+ useEffect(() => {
+ if (isOpen) {
+ document.body.style.overflow = 'hidden';
+ } else {
+ document.body.style.overflow = 'unset';
+ }
+
+ return () => {
+ document.body.style.overflow = 'unset';
+ };
+ }, [isOpen]);
+
+ return (
+
+ {/* Overlay */}
+
+
+ {/* Menu mobile */}
+
+
+ {/* Header */}
+
+
+
+
+
+
+
+
+ {SITE_CONFIG.name}
+
+
Menu Navigation
+
+
+
+
+
+
+
+
+
+ {/* Navigation */}
+
+
+ {/* Navigation Links */}
+
+
+ {/* CTA Button */}
+
+
+
+ {/* Footer */}
+
+
+
+ © 2024 {SITE_CONFIG.name}
+
+
+
+
+ {/* Effet glassmorphism */}
+
+
+
+
+
+
+ {/* Logo section */}
+
+
+
+
+
+
+
+ {SITE_CONFIG.name}
+
+
+ {SITE_CONFIG.tagline}
+
+
+
+
+ {/* 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..e71693f
--- /dev/null
+++ b/banquise-website/src/components/sections/AboutSection.tsx
@@ -0,0 +1,124 @@
+import React from 'react';
+import { AccordionItem } from '../ui/AccordionItem';
+import { URLS } from '../../config/constants';
+import { commonStyles } from '../../styles/components';
+
+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")}
+ >
+
+
+ Former les étudiants au déploiment et a la gestion d'une infra, et de maitriser des technologies entreprise grade.
+ Cela permet de 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..b6b8eac
--- /dev/null
+++ b/banquise-website/src/components/sections/HeroSection.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import banquiseServer from '/src/assets/banquise_server.svg'
+
+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..ad58cef
--- /dev/null
+++ b/banquise-website/src/components/sections/ServicesSection.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+
+// Declare the Service interface here
+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;
+}
+
+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..417c98f
--- /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..2f7fd4d
--- /dev/null
+++ b/banquise-website/src/components/ui/AccordionItem.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+// Définir l'interface localement :
+interface AccordionItemProps {
+ title: string;
+ children: React.ReactNode;
+ isOpen: boolean;
+ onToggle: () => void;
+}
+
+export const AccordionItem: React.FC = ({ title, children, isOpen, onToggle }) => (
+
+
+ {title}
+
+ ▼
+
+
+
+
+ {/* Grille de fond subtile */}
+
+
+ {/* Particules de code flottantes */}
+
+ {floatingElements.map((element, index) => (
+
+ {element.icon}
+
+ ))}
+
+
+ {/* Lignes de connexion animées */}
+
+
+
+
+
+
+ {/* Lignes de connexion entre les éléments */}
+ {[...Array(8)].map((_, i) => (
+
+
+ {/* Cercles de données en mouvement */}
+
+ {[...Array(6)].map((_, i) => (
+
+ ))}
+
+
= ({ service, onClose }) => {
+ // Empêcher le scroll du body quand la popup est ouverte
+ useEffect(() => {
+ document.body.style.overflow = 'hidden';
+
+ return () => {
+ document.body.style.overflow = 'unset';
+ };
+ }, []);
+
+ return (
+
+
+
+ {/* Bouton de fermeture fixe au-dessus du contenu */}
+
+
+ ×
+
+
+
+ {/* Contenu avec scroll vertical uniquement */}
+
+ {/* Header */}
+
+
+
+ {service.icon}
+
+
+
+ {service.name}
+
+
+ Service d'hébergement professionnel
+
+
+ Haute disponibilité
+ Open Source
+ Communautaire
+
+
+
+
+
+ {/* Content - Forcer le fond blanc */}
+
+ {/* Description */}
+
+ 📋
+ Description détaillée
+
+
+
+ {service.description}
+
+
+
+
+ ✓
+
+
+
99.9% Uptime
+
Disponibilité garantie
+
+
+
+
+ 🔒
+
+
+
Sécurisé
+
SSL & Backups
+
+
+
+
+
+ {/* Fonctionnalités */}
+
+ ⚡
+ Fonctionnalités principales
+
+
+ {service.features.map((feature, index) => (
+
+ ))}
+
+
+ {/* Call to action */}
+
+
+
+
+ {/* Decorative elements */}
+
+
+
+
+
+
+
+ {/* Effet de lueur au hover */}
+
+
+ );
+};
diff --git a/banquise-website/src/config/constants.ts b/banquise-website/src/config/constants.ts
new file mode 100644
index 0000000..5a493bf
--- /dev/null
+++ b/banquise-website/src/config/constants.ts
@@ -0,0 +1,20 @@
+export const URLS = {
+ services: {
+ wiki: "https://wiki.la-banquise.fr",
+ gitea: "https://git.la-banquise.fr",
+ panel: "https://panel.la-banquise.fr",
+ auth: "https://auth.la-banquise.fr"
+ },
+ social: {
+ discord: "https://discord.gg/labanquise"
+ },
+ contact: {
+ email: "mailto:contact@la-banquise.fr"
+ }
+} as const;
+
+export const SITE_CONFIG = {
+ name: "La Banquise",
+ description: "Association d'hébergement et lab réseau pour tous les étudiants et associations de l'EPITA",
+ tagline: "Communauté • Hébergement"
+} as const;
diff --git a/banquise-website/src/index.css b/banquise-website/src/index.css
index 29d7987..ca06f66 100644
--- a/banquise-website/src/index.css
+++ b/banquise-website/src/index.css
@@ -2,102 +2,184 @@
@tailwind components;
@tailwind utilities;
-/* Système typographique moderne */
+/* Variables CSS pour les polices */
:root {
- --font-heading: 'Space Grotesk', sans-serif;
- --font-body: 'Inter', system-ui, sans-serif;
-
- font-family: var(--font-body);
- line-height: 1.5;
- font-weight: 400;
-
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
-
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+ --font-heading: 'Dela Gothic One', sans-serif;
+ --font-body: 'Roboto', sans-serif;
}
-/* Hiérarchie typographique */
-h1, h2, h3, h4, h5, h6, .site-name, .welcome-title {
- font-family: var(--font-heading);
- font-weight: 600;
- line-height: 1.2;
- letter-spacing: -0.025em;
+/* Parallax animations */
+@keyframes parallax-slow {
+ 0% { transform: translateY(0px); }
+ 100% { transform: translateY(-50px); }
}
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
- font-weight: 700;
+@keyframes parallax-medium {
+ 0% { transform: translateY(0px); }
+ 100% { transform: translateY(-80px); }
}
-h2 {
- font-size: 2.4em;
- font-weight: 600;
+@keyframes parallax-fast {
+ 0% { transform: translateY(0px); }
+ 100% { transform: translateY(-120px); }
}
-h3 {
- font-size: 1.8em;
- font-weight: 600;
+@keyframes parallax-very-slow {
+ 0% { transform: translateY(0px); }
+ 100% { transform: translateY(-20px); }
}
-p, span, div, a, button, input {
- font-family: var(--font-body);
+/* Floating animations with different speeds */
+@keyframes float-slow {
+ 0%, 100% { transform: translateY(0px) rotate(0deg); }
+ 50% { transform: translateY(-20px) rotate(5deg); }
}
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
+@keyframes float-medium {
+ 0%, 100% { transform: translateY(0px) rotate(0deg); }
+ 50% { transform: translateY(-15px) rotate(-3deg); }
}
-a:hover {
- color: #535bf2;
+@keyframes float-fast {
+ 0%, 100% { transform: translateY(0px) rotate(0deg); }
+ 50% { transform: translateY(-10px) rotate(3deg); }
}
+@keyframes float-very-slow {
+ 0%, 100% { transform: translateY(0px) rotate(0deg); }
+ 50% { transform: translateY(-30px) rotate(-2deg); }
+}
+
+/* Animations pour les éléments flottants */
+@keyframes float-0 {
+ 0%, 100% { transform: translateY(0px) rotate(0deg); }
+ 50% { transform: translateY(-10px) rotate(2deg); }
+}
+
+@keyframes float-1 {
+ 0%, 100% { transform: translateY(0px) rotate(0deg); }
+ 33% { transform: translateY(-8px) rotate(-1deg); }
+ 66% { transform: translateY(-15px) rotate(1deg); }
+}
+
+@keyframes float-2 {
+ 0%, 100% { transform: translateY(0px) rotate(0deg); }
+ 25% { transform: translateY(-12px) rotate(1deg); }
+ 75% { transform: translateY(-6px) rotate(-2deg); }
+}
+
+/* Animation pour l'élément principal du hero */
+@keyframes gentle-float {
+ 0%, 100% { transform: translateY(0px) rotate(0deg); }
+ 50% { transform: translateY(-15px) rotate(1deg); }
+}
+
+.animate-gentle-float {
+ animation: gentle-float 6s ease-in-out infinite;
+}
+
+/* Effet de lueur pour les éléments techniques */
+@keyframes glow-pulse {
+ 0%, 100% {
+ text-shadow: 0 0 5px rgba(168, 218, 255, 0.3),
+ 0 0 10px rgba(168, 218, 255, 0.2),
+ 0 0 15px rgba(168, 218, 255, 0.1);
+ }
+ 50% {
+ text-shadow: 0 0 10px rgba(168, 218, 255, 0.4),
+ 0 0 20px rgba(168, 218, 255, 0.3),
+ 0 0 30px rgba(168, 218, 255, 0.2);
+ }
+}
+
+/* Animation des lignes de connexion */
+@keyframes data-flow {
+ 0% { stroke-dasharray: 0, 100; }
+ 50% { stroke-dasharray: 50, 100; }
+ 100% { stroke-dasharray: 100, 100; }
+}
+
+/* Responsive pour les animations */
+@media (prefers-reduced-motion: reduce) {
+ .animate-gentle-float,
+ .animate-ping,
+ .animate-pulse {
+ animation: none;
+ }
+}
+
+/* Apply animations */
+.animate-parallax-slow {
+ animation: parallax-slow 20s ease-in-out infinite;
+}
+
+.animate-parallax-medium {
+ animation: parallax-medium 15s ease-in-out infinite;
+}
+
+.animate-parallax-fast {
+ animation: parallax-fast 10s ease-in-out infinite;
+}
+
+.animate-parallax-very-slow {
+ animation: parallax-very-slow 30s ease-in-out infinite;
+}
+
+.animate-float-slow {
+ animation: float-slow 8s ease-in-out infinite;
+}
+
+.animate-float-medium {
+ animation: float-medium 6s ease-in-out infinite;
+}
+
+.animate-float-fast {
+ animation: float-fast 4s ease-in-out infinite;
+}
+
+.animate-float-very-slow {
+ animation: float-very-slow 12s ease-in-out infinite;
+}
+
+/* Amélioration du scroll */
+html {
+ scroll-behavior: smooth;
+}
+
+/* Empêcher le scroll horizontal global */
body {
- margin: 0;
- padding: 0;
- display: flex;
- min-width: 320px;
- min-height: 100vh;
- width: 100%;
+ overflow-x: hidden;
}
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: var(--font-body);
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
+/* Styles pour les popups */
+.popup-content {
+ scrollbar-width: thin;
+ scrollbar-color: rgba(31, 93, 137, 0.3) transparent;
}
-button:hover {
- border-color: #646cff;
+.popup-content::-webkit-scrollbar {
+ width: 6px;
}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
+.popup-content::-webkit-scrollbar-track {
+ background: transparent;
}
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
+.popup-content::-webkit-scrollbar-thumb {
+ background: rgba(31, 93, 137, 0.3);
+ border-radius: 3px;
+}
+
+.popup-content::-webkit-scrollbar-thumb:hover {
+ background: rgba(31, 93, 137, 0.5);
+}
+
+/* Animation pour le bouton scroll to top */
+@keyframes bounce-up {
+ 0%, 100% { transform: translateY(0px); }
+ 50% { transform: translateY(-4px); }
+}
+
+.scroll-to-top:hover {
+ animation: bounce-up 0.6s ease-in-out;
}
diff --git a/banquise-website/src/main.tsx b/banquise-website/src/main.tsx
index bef5202..e3f1654 100644
--- a/banquise-website/src/main.tsx
+++ b/banquise-website/src/main.tsx
@@ -3,6 +3,18 @@ import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
+// Ajouter les métadonnées SEO
+document.title = 'La Banquise - Hébergement et Communauté Tech';
+const metaDescription = document.createElement('meta');
+metaDescription.name = 'description';
+metaDescription.content = 'Association d\'hébergement et lab réseau pour tous les étudiants et associations de l\'EPITA. Services Wiki, Gitea, Panel de jeux.';
+document.head.appendChild(metaDescription);
+
+const metaViewport = document.createElement('meta');
+metaViewport.name = 'viewport';
+metaViewport.content = 'width=device-width, initial-scale=1.0';
+document.head.appendChild(metaViewport);
+
createRoot(document.getElementById('root')!).render(