- {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 -
-
-
-
-
-
-
-
-
-
- {selectedService !== null && (
- = ({ openAccordion, toggleAccordion }) => (
+
+
+);
diff --git a/banquise-website/src/components/sections/HeroSection.tsx b/banquise-website/src/components/sections/HeroSection.tsx
new file mode 100644
index 0000000..bd20dca
--- /dev/null
+++ b/banquise-website/src/components/sections/HeroSection.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+export const HeroSection: React.FC = () => (
+
+
+);
diff --git a/banquise-website/src/components/sections/ServicesSection.tsx b/banquise-website/src/components/sections/ServicesSection.tsx
new file mode 100644
index 0000000..bd19ad5
--- /dev/null
+++ b/banquise-website/src/components/sections/ServicesSection.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+// Define interface directly in the component file
+interface Service {
+ name: string;
+ url: string;
+ image: string;
+}
+
+interface ServicesSectionProps {
+ services: Service[];
+ onServiceClick: (service: Service) => void;
+}
+
+export const ServicesSection: React.FC = ({ services, onServiceClick }) => (
+
+
+
+);
diff --git a/banquise-website/src/components/sections/TechFeaturesSection.tsx b/banquise-website/src/components/sections/TechFeaturesSection.tsx
new file mode 100644
index 0000000..0c9a3ac
--- /dev/null
+++ b/banquise-website/src/components/sections/TechFeaturesSection.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+export const TechFeaturesSection: React.FC = () => (
+
+
+
+);
diff --git a/banquise-website/src/components/ui/AccordionItem.tsx b/banquise-website/src/components/ui/AccordionItem.tsx
new file mode 100644
index 0000000..42e5a14
--- /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 }) => (
+ = ({ service, onClose }) => (
+
Nos services
-- Explorez notre écosystème de services conçus pour répondre à vos besoins. -
- -
- {icebergs.map((iceberg) => (
- handleIcebergClick(e, iceberg.id)}
- >
-
-
- {iceberg.service.name}
-
- ))}
- À 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}
-
-
-
- )}
-
- e.stopPropagation()}>
-
-
- {services[selectedService].name}
-{services[selectedService].description}
- -
- setSelectedService(null)} />
+ )}
);
-}
+};
export default App;
diff --git a/banquise-website/src/components/layout/Footer.tsx b/banquise-website/src/components/layout/Footer.tsx
new file mode 100644
index 0000000..7ad770c
--- /dev/null
+++ b/banquise-website/src/components/layout/Footer.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+
+export const Footer: React.FC = () => (
+
+);
diff --git a/banquise-website/src/components/layout/Header.tsx b/banquise-website/src/components/layout/Header.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/banquise-website/src/components/layout/Navigation.tsx b/banquise-website/src/components/layout/Navigation.tsx
new file mode 100644
index 0000000..162c335
--- /dev/null
+++ b/banquise-website/src/components/layout/Navigation.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+
+export const Navigation: React.FC = () => {
+ const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+ return (
+
+ );
+};
diff --git a/banquise-website/src/components/sections/AboutSection.tsx b/banquise-website/src/components/sections/AboutSection.tsx
new file mode 100644
index 0000000..3f710cf
--- /dev/null
+++ b/banquise-website/src/components/sections/AboutSection.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { AccordionItem } from '../ui/AccordionItem';
+
+interface AboutSectionProps {
+ openAccordion: string | null;
+ toggleAccordion: (title: string) => void;
+}
+
+export const AboutSection: React.FCconst banquise = new ServerInfra();
- banquise.deploy('wiki');
- banquise.deploy('gitea');
- banquise.optimize();
- banquise.monitor();
+
+
+
+
-
-
-
-
+
+
+
+ {selectedService && (
+
+
+
+ + À Propos +
+ +
+ 
+
+
+
+
+ La Banquise est une communauté passionnée qui propose des services d'hébergement et des outils collaboratifs pour les développeurs et les gamers.
+
+
+
+ toggleAccordion("mission")}
+ >
+
+
+ toggleAccordion("services")}
+ >
+
+
+ toggleAccordion("community")}
+ >
+
+
+ + 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. +
+-
+
- 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. +
++ Rejoignez notre serveur Discord pour échanger avec la communauté, obtenir de l'aide et rester informé des dernières nouveautés. +
+ + 💬 + Rejoindre Discord + +
+
+
+
+
+ + Bienvenue sur La Banquise +
+ ++ Votre plateforme d'hébergement communautaire +
+ + + Découvrir nos services + → + + + {/* Tech elements background */} +
+
+ 🖥️
+ ⚙️
+ 🚀
+ 💻
+ + Nos Services +
++ Cliquez sur un iceberg pour accéder au service correspondant +
+ +
+ {services.map((service, index) => (
+
+ onServiceClick(service)}
+ >
+ 
+
+ ))}
+
+ {service.name}
+
+ + Technologies Avancées +
++ Découvrez les outils et services que nous mettons à votre disposition +
+ +
+
+
+
+
+
+ 📚
+
+ Documentation
+Accédez à notre wiki complet avec guides et tutoriels détaillés.
+
+
+
+
+ 🔧
+
+ Gestion de Code
+Gitea pour le versioning et la collaboration sur vos projets.
+
+
+
+ 🎮
+
+ Panel de Jeux
+Interface de gestion pour vos serveurs de jeux préférés.
+
+
+);
diff --git a/banquise-website/src/components/ui/Popup.tsx b/banquise-website/src/components/ui/Popup.tsx
new file mode 100644
index 0000000..d7a52cc
--- /dev/null
+++ b/banquise-website/src/components/ui/Popup.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+// Define interface directly in the component file
+interface Service {
+ name: string;
+ url: string;
+ image: string;
+}
+
+interface PopupProps {
+ service: Service;
+ onClose: () => void;
+}
+
+export const Popup: React.FC
+ {title}
+
+ ▼
+
+
+
+
+
+ {children}
+
+
+
+);
diff --git a/banquise-website/src/index.css b/banquise-website/src/index.css
index 29d7987..57c53d0 100644
--- a/banquise-website/src/index.css
+++ b/banquise-website/src/index.css
@@ -2,102 +2,8 @@
@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;
-}
-
-/* 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;
-}
-
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
- font-weight: 700;
-}
-
-h2 {
- font-size: 2.4em;
- font-weight: 600;
-}
-
-h3 {
- font-size: 1.8em;
- font-weight: 600;
-}
-
-p, span, div, a, button, input {
- font-family: var(--font-body);
-}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-
-a:hover {
- color: #535bf2;
-}
-
-body {
- margin: 0;
- padding: 0;
- display: flex;
- min-width: 320px;
- min-height: 100vh;
- width: 100%;
-}
-
-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;
-}
-
-button:hover {
- border-color: #646cff;
-}
-
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
+ --font-heading: 'Dela Gothic One', sans-serif;
+ --font-body: 'Roboto', sans-serif;
}
diff --git a/banquise-website/tailwind.config.js b/banquise-website/tailwind.config.js
index 0bdb22b..724fe8a 100644
--- a/banquise-website/tailwind.config.js
+++ b/banquise-website/tailwind.config.js
@@ -7,11 +7,109 @@ export default {
theme: {
extend: {
colors: {
- // Vous pouvez personnaliser vos couleurs ici
+ banquise: {
+ blue: '#40B4FF',
+ 'blue-dark': '#1F5D89',
+ 'blue-light': '#69B7E2',
+ 'blue-lightest': '#A5F0FF',
+ gray: '#F6F6F6',
+ }
},
fontFamily: {
- // Personnalisation des polices
- }
+ heading: ['Dela Gothic One', 'sans-serif'],
+ body: ['Roboto', 'sans-serif'],
+ },
+ animation: {
+ 'float': 'float 6s ease-in-out infinite',
+ 'float-1': 'float1 5s ease-in-out infinite',
+ 'float-2': 'float2 6s ease-in-out infinite',
+ 'float-3': 'float3 7s ease-in-out infinite',
+ 'wave': 'wave 10s linear infinite',
+ 'wave-reverse': 'waveReverse 15s linear infinite',
+ 'wave-1': 'wave 20s linear infinite',
+ 'wave-2': 'waveReverse 15s linear infinite',
+ 'wave-3': 'wave 12s linear infinite',
+ 'rise': 'rise 10s infinite ease-in',
+ 'tech-float': 'tech-float 10s ease-in-out infinite',
+ 'gentle-float': 'gentle-float 6s ease-in-out infinite',
+ 'fadeIn': 'fadeIn 0.2s ease-out',
+ 'slideUp': 'slideUp 0.3s ease-out',
+ },
+ keyframes: {
+ float: {
+ '0%, 100%': { transform: 'translateY(0)' },
+ '50%': { transform: 'translateY(-10px)' },
+ },
+ float1: {
+ '0%, 100%': { transform: 'translateY(0)' },
+ '50%': { transform: 'translateY(-15px)' },
+ },
+ float2: {
+ '0%, 100%': { transform: 'translateY(0)' },
+ '50%': { transform: 'translateY(-20px)' },
+ },
+ float3: {
+ '0%, 100%': { transform: 'translateY(0)' },
+ '50%': { transform: 'translateY(-10px)' },
+ },
+ 'tech-float': {
+ '0%, 100%': { transform: 'translateY(0) rotate(0deg)', opacity: '0.15' },
+ '50%': { transform: 'translateY(-20px) rotate(10deg)', opacity: '0.25' },
+ },
+ 'gentle-float': {
+ '0%, 100%': { transform: 'translateY(0)' },
+ '50%': { transform: 'translateY(-10px)' },
+ },
+ wave: {
+ '0%': { backgroundPosition: '0' },
+ '100%': { backgroundPosition: '1200px' },
+ },
+ waveReverse: {
+ '0%': { backgroundPosition: '1200px' },
+ '100%': { backgroundPosition: '0' },
+ },
+ rise: {
+ '0%': {
+ bottom: '-100px',
+ transform: 'translateX(0)',
+ opacity: '0.8',
+ },
+ '50%': {
+ transform: 'translateX(40px)',
+ opacity: '0.4',
+ },
+ '100%': {
+ bottom: '1080px',
+ transform: 'translateX(-40px)',
+ opacity: '0',
+ },
+ },
+ fadeIn: {
+ from: { opacity: '0' },
+ to: { opacity: '1' },
+ },
+ slideUp: {
+ from: { transform: 'translateY(30px)', opacity: '0' },
+ to: { transform: 'translateY(0)', opacity: '1' },
+ },
+ },
+ backdropBlur: {
+ 'xs': '2px',
+ },
+ backgroundImage: {
+ 'wave-pattern': "url('data:image/svg+xml,')",
+ 'ocean-gradient': 'linear-gradient(180deg, #40B4FF 0%, #69B7E2 50%, #1F5D89 100%)',
+ },
+ maxHeight: {
+ '0': '0',
+ '1000': '1000px',
+ },
+ spacing: {
+ '72': '18rem',
+ '80': '20rem',
+ '88': '22rem',
+ '96': '24rem',
+ },
},
},
plugins: [
+
+
+ + {service.name} +
++ Accédez directement au service {service.name} en cliquant sur le bouton ci-dessous. +
+ + 🚀 + Accéder à {service.name} + +