Some improvment and fix
This commit is contained in:
sahamone
parent
894a73de84
commit
4cd863df48
@ -6,15 +6,15 @@ import { TechFeaturesSection } from './components/sections/TechFeaturesSection';
|
||||
import { ServicesSection } from './components/sections/ServicesSection';
|
||||
import { AboutSection } from './components/sections/AboutSection';
|
||||
import { Popup } from './components/ui/Popup';
|
||||
import icebergImage from './assets/iceberg.png';
|
||||
|
||||
// Define Service interface directly in App
|
||||
interface Service {
|
||||
name: string;
|
||||
url: string;
|
||||
image: string;
|
||||
icon: string;
|
||||
description: string;
|
||||
features: string[];
|
||||
icon: string;
|
||||
}
|
||||
|
||||
const App: React.FC = () => {
|
||||
@ -22,8 +22,13 @@ const App: React.FC = () => {
|
||||
const services: Service[] = [
|
||||
{
|
||||
name: "Wiki",
|
||||
<<<<<<< Updated upstream
|
||||
url: "https://wiki.labanquise.org",
|
||||
image: "/src/assets/iceberg.png",
|
||||
=======
|
||||
url: "https://wiki.la-banquise.fr",
|
||||
image: icebergImage,
|
||||
>>>>>>> Stashed changes
|
||||
icon: "📚",
|
||||
description: "Notre wiki collaboratif est votre centre de documentation technique. Accédez à des guides détaillés, des tutoriels et de la documentation API pour tous nos services.",
|
||||
features: [
|
||||
@ -37,8 +42,13 @@ const App: React.FC = () => {
|
||||
},
|
||||
{
|
||||
name: "Gitea",
|
||||
<<<<<<< Updated upstream
|
||||
url: "https://git.labanquise.org",
|
||||
image: "/src/assets/iceberg.png",
|
||||
=======
|
||||
url: "https://git.la-banquise.fr",
|
||||
image: icebergImage,
|
||||
>>>>>>> Stashed changes
|
||||
icon: "🔧",
|
||||
description: "Instance Gitea auto-hébergée pour la gestion de vos dépôts Git. Collaborez sur vos projets avec un contrôle total sur votre code source.",
|
||||
features: [
|
||||
@ -52,8 +62,13 @@ const App: React.FC = () => {
|
||||
},
|
||||
{
|
||||
name: "Panel",
|
||||
<<<<<<< Updated upstream
|
||||
url: "https://panel.labanquise.org",
|
||||
image: "/src/assets/iceberg.png",
|
||||
=======
|
||||
url: "https://panel.la-banquise.fr",
|
||||
image: icebergImage,
|
||||
>>>>>>> Stashed changes
|
||||
icon: "🎮",
|
||||
description: "Interface de gestion centralisée pour vos serveurs de jeux. Déployez, configurez et surveillez vos serveurs gaming en quelques clics.",
|
||||
features: [
|
||||
|
||||
@ -2,8 +2,8 @@ import React from 'react';
|
||||
|
||||
export const Footer: React.FC = () => (
|
||||
<footer className="bg-banquise-blue-dark text-white py-12 sm:py-16 md:py-20 px-4 sm:px-6 md:px-8 relative z-10 border-t border-banquise-blue-lightest/20 w-full box-border">
|
||||
<div className="flex flex-col sm:flex-row sm:flex-wrap justify-between max-w-6xl mx-auto gap-6 sm:gap-8">
|
||||
<div className="flex-1 min-w-48 sm:min-w-64 mb-6 sm:mb-8 text-left">
|
||||
<div className="flex flex-col md:flex-row justify-between max-w-6xl mx-auto gap-6 sm:gap-8">
|
||||
<div className="flex-1 min-w-0 mb-6 sm:mb-8 md:mb-0 text-left">
|
||||
<h4 className="text-lg sm:text-xl mb-6 sm:mb-8 text-banquise-blue-lightest relative pb-3 sm:pb-4 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-12 after:h-0.5 after:bg-gradient-to-r after:from-banquise-blue-lightest after:to-banquise-blue">
|
||||
Services
|
||||
</h4>
|
||||
@ -26,7 +26,7 @@ export const Footer: React.FC = () => (
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-48 sm:min-w-64 mb-6 sm:mb-8 text-left">
|
||||
<div className="flex-1 min-w-0 mb-6 sm:mb-8 md:mb-0 text-left">
|
||||
<h4 className="text-lg sm:text-xl mb-6 sm:mb-8 text-banquise-blue-lightest relative pb-3 sm:pb-4 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-12 after:h-0.5 after:bg-gradient-to-r after:from-banquise-blue-lightest after:to-banquise-blue">
|
||||
Communauté
|
||||
</h4>
|
||||
@ -39,7 +39,7 @@ export const Footer: React.FC = () => (
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-48 sm:min-w-64 mb-6 sm:mb-8 text-left">
|
||||
<div className="flex-1 min-w-0 mb-6 sm:mb-8 md:mb-0 text-left">
|
||||
<h4 className="text-lg sm:text-xl mb-6 sm:mb-8 text-banquise-blue-lightest relative pb-3 sm:pb-4 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-12 after:h-0.5 after:bg-gradient-to-r after:from-banquise-blue-lightest after:to-banquise-blue">
|
||||
Support
|
||||
</h4>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import banquiseServer from '../../assets/banquise_server.svg'
|
||||
|
||||
interface MobileMenuProps {
|
||||
isOpen: boolean;
|
||||
@ -20,7 +21,7 @@ export const MobileMenu: React.FC<MobileMenuProps> = ({ isOpen, onClose }) => {
|
||||
}, [isOpen]);
|
||||
|
||||
return (
|
||||
<div className={`md:hidden fixed inset-0 z-40 transition-all duration-300 ${isOpen ? 'visible' : 'invisible'}`}>
|
||||
<div className={`md:hidden fixed inset-0 z-[100] transition-all duration-300 ${isOpen ? 'visible' : 'invisible'}`}>
|
||||
{/* Overlay amélioré */}
|
||||
<div
|
||||
className={`absolute inset-0 bg-gradient-to-br from-black/70 via-banquise-blue-dark/50 to-black/70 backdrop-blur-md transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0'}`}
|
||||
@ -28,22 +29,22 @@ export const MobileMenu: React.FC<MobileMenuProps> = ({ isOpen, onClose }) => {
|
||||
/>
|
||||
|
||||
{/* Menu mobile moderne */}
|
||||
<div className={`absolute top-0 right-0 h-full w-80 max-w-[90vw] bg-gradient-to-b from-banquise-blue-dark via-banquise-blue-dark/98 to-banquise-blue-dark/95 backdrop-blur-2xl shadow-2xl transition-transform duration-300 border-l border-banquise-blue-lightest/20 ${isOpen ? 'translate-x-0' : 'translate-x-full'}`}>
|
||||
<div className={`absolute top-0 right-0 h-full w-72 max-w-[85vw] bg-gradient-to-b from-banquise-blue-dark via-banquise-blue-dark/98 to-banquise-blue-dark/95 backdrop-blur-2xl shadow-2xl transition-transform duration-300 border-l border-banquise-blue-lightest/20 ${isOpen ? 'translate-x-0' : 'translate-x-full'}`}>
|
||||
|
||||
{/* Header moderne */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-banquise-blue-lightest/20 bg-gradient-to-r from-banquise-blue-dark/50 to-transparent">
|
||||
{/* Header moderne - retirer le padding top excessif */}
|
||||
<div className="flex items-center justify-between p-4 sm:p-6 pt-6 sm:pt-8 border-b border-banquise-blue-lightest/20 bg-gradient-to-r from-banquise-blue-dark/50 to-transparent">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-banquise-blue-light/20 rounded-full blur-md"></div>
|
||||
<img
|
||||
src="/src/assets/banquise.png"
|
||||
src={banquiseServer}
|
||||
alt="Logo"
|
||||
className="h-10 w-auto relative z-10"
|
||||
className="h-8 sm:h-10 w-auto relative z-10"
|
||||
style={{ filter: 'drop-shadow(0 0 8px rgba(168, 218, 255, 0.6))' }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-lg font-bold text-white font-heading">
|
||||
<span className="text-base sm:text-lg font-bold text-white font-heading">
|
||||
La Banquise
|
||||
</span>
|
||||
<p className="text-banquise-blue-lightest/70 text-xs">Menu Navigation</p>
|
||||
@ -62,7 +63,7 @@ export const MobileMenu: React.FC<MobileMenuProps> = ({ isOpen, onClose }) => {
|
||||
</div>
|
||||
|
||||
{/* Navigation moderne */}
|
||||
<div className="flex flex-col justify-center px-6 py-8 space-y-6">
|
||||
<div className="flex flex-col justify-start px-6 py-8 space-y-6 overflow-y-auto" style={{ height: 'calc(100vh - 120px)' }}>
|
||||
|
||||
{/* Navigation Links */}
|
||||
<div className="space-y-3">
|
||||
@ -116,7 +117,7 @@ export const MobileMenu: React.FC<MobileMenuProps> = ({ isOpen, onClose }) => {
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-indigo-600 to-purple-600 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-200">
|
||||
<svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.211.375-.445.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/>
|
||||
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.211.375-.445.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.68 15.347c-1.182 0-2.157-.982-2.157-2.185 0-1.204.956-2.186 2.157-2.186 1.201 0 2.175.982 2.157 2.186 0 1.203-.956 2.185-2.157 2.185zm6.64 0c-1.182 0-2.157-.982-2.157-2.185 0-1.204.955-2.186 2.157-2.186 1.201 0 2.175.982 2.157 2.186 0 1.203-.956 2.185-2.157 2.185z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
@ -147,7 +148,7 @@ export const MobileMenu: React.FC<MobileMenuProps> = ({ isOpen, onClose }) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer simplifié */}
|
||||
{/* Footer simplifié - repositionné */}
|
||||
<div className="absolute bottom-6 left-6 right-6">
|
||||
<div className="text-center py-4 border-t border-banquise-blue-lightest/20">
|
||||
<p className="text-white/50 text-sm">
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { MobileMenu } from './MobileMenu';
|
||||
<<<<<<< Updated upstream
|
||||
=======
|
||||
import banquiseServer from '../../assets/banquise_server.svg'
|
||||
>>>>>>> Stashed changes
|
||||
|
||||
export const Navigation: React.FC = () => {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
@ -89,7 +93,7 @@ export const Navigation: React.FC = () => {
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-indigo-500 to-purple-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
<div className="relative z-10 flex items-center space-x-2">
|
||||
<svg className="w-4 h-4 lg:w-5 lg:h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.211.375-.445.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/>
|
||||
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.211.375-.445.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.68 15.347c-1.182 0-2.157-.982-2.157-2.185 0-1.204.956-2.186 2.157-2.186 1.201 0 2.175.982 2.157 2.186 0 1.203-.956 2.185-2.157 2.185zm6.64 0c-1.182 0-2.157-.982-2.157-2.185 0-1.204.955-2.186 2.157-2.186 1.201 0 2.175.982 2.157 2.186 0 1.203-.956 2.185-2.157 2.185z"/>
|
||||
</svg>
|
||||
<span>Discord</span>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,8 @@
|
||||
import React from 'react';
|
||||
<<<<<<< Updated upstream
|
||||
=======
|
||||
import banquiseServer from '../../assets/banquise_server.svg'
|
||||
>>>>>>> Stashed changes
|
||||
|
||||
export const HeroSection: React.FC = () => (
|
||||
<section className="min-h-[calc(80vh-72px)] flex flex-col justify-center items-center text-center py-12 sm:py-16 md:py-20 w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8 relative z-3">
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
import React from 'react';
|
||||
|
||||
// Define interface directly in the component file
|
||||
// Declare the Service interface here
|
||||
interface Service {
|
||||
name: string;
|
||||
url: string;
|
||||
image: string;
|
||||
icon: string;
|
||||
description: string;
|
||||
features: string[];
|
||||
icon: string;
|
||||
}
|
||||
|
||||
// Define interface directly in the component file
|
||||
interface ServicesSectionProps {
|
||||
services: Service[];
|
||||
onServiceClick: (service: Service) => void;
|
||||
|
||||
@ -10,7 +10,7 @@ export const TechFeaturesSection: React.FC = () => (
|
||||
25+ serveurs pour répondre à vos besoins
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 w-full">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 sm:gap-6 w-full">
|
||||
<div className="bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 backdrop-blur-lg rounded-2xl p-6 sm:p-8 flex flex-col items-center text-center transition-all duration-300 border border-banquise-blue-lightest/30 hover:-translate-y-3 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 hover:shadow-xl hover:border-banquise-blue-lightest/50 group">
|
||||
<div className="text-3xl sm:text-4xl mb-4 sm:mb-6 text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center rounded-2xl shadow-lg group-hover:scale-110 transition-transform duration-300">
|
||||
🚀
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
|
||||
// Define interface directly in the component file
|
||||
// Définir l'interface localement :
|
||||
interface AccordionItemProps {
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
// Define interface directly in the component file
|
||||
interface Service {
|
||||
name: string;
|
||||
url: string;
|
||||
image: string;
|
||||
icon: string;
|
||||
description: string;
|
||||
features: string[];
|
||||
icon: string;
|
||||
}
|
||||
|
||||
interface PopupProps {
|
||||
@ -17,7 +16,7 @@ interface PopupProps {
|
||||
|
||||
export const Popup: React.FC<PopupProps> = ({ service, onClose }) => (
|
||||
<div className="fixed inset-0 bg-black/60 flex justify-center items-center z-50 p-4 backdrop-blur-md animate-fadeIn">
|
||||
<div className="bg-white text-banquise-blue-dark rounded-3xl max-w-5xl w-full max-h-[90vh] overflow-y-auto shadow-2xl relative animate-slideUp border border-banquise-blue-lightest/20">
|
||||
<div className="bg-white text-banquise-blue-dark rounded-3xl max-w-4xl w-full max-h-[90vh] overflow-y-auto shadow-2xl relative animate-slideUp border border-banquise-blue-lightest/20">
|
||||
|
||||
{/* Header */}
|
||||
<div className="relative bg-gradient-to-r from-banquise-blue to-banquise-blue-light p-6 sm:p-8 text-white">
|
||||
@ -28,12 +27,12 @@ export const Popup: React.FC<PopupProps> = ({ service, onClose }) => (
|
||||
×
|
||||
</button>
|
||||
|
||||
<div className="flex flex-col lg:flex-row items-center lg:items-start mb-4">
|
||||
<div className="flex flex-col lg:flex-row items-center lg:items-start mb-4 pr-12">
|
||||
<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">
|
||||
{service.icon}
|
||||
</div>
|
||||
<div className="text-center lg:text-left flex-1">
|
||||
<h2 className="font-heading text-2xl sm:text-3xl lg:text-5xl mt-0 mb-3 lg:mb-4 leading-tight">
|
||||
<h2 className="font-heading text-2xl sm:text-3xl lg:text-4xl mt-0 mb-3 lg:mb-4 leading-tight">
|
||||
{service.name}
|
||||
</h2>
|
||||
<div className="text-white/90 text-base sm:text-lg lg:text-xl font-medium">
|
||||
@ -48,7 +47,7 @@ export const Popup: React.FC<PopupProps> = ({ service, onClose }) => (
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content - Layout simplifié */}
|
||||
{/* Content */}
|
||||
<div className="p-6 sm:p-8">
|
||||
{/* Description */}
|
||||
<h3 className="text-lg sm:text-xl lg:text-2xl font-bold text-banquise-blue-dark mb-4 lg:mb-6 font-heading flex items-center">
|
||||
@ -81,12 +80,12 @@ export const Popup: React.FC<PopupProps> = ({ service, onClose }) => (
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Fonctionnalités en colonnes */}
|
||||
{/* Fonctionnalités en colonnes optimisées */}
|
||||
<h3 className="text-lg sm:text-xl lg:text-2xl font-bold text-banquise-blue-dark mb-4 lg:mb-6 font-heading flex items-center">
|
||||
<span className="text-xl sm:text-2xl lg:text-3xl mr-3">⚡</span>
|
||||
Fonctionnalités principales
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
|
||||
{service.features.map((feature, index) => (
|
||||
<div key={index} className="flex items-start bg-banquise-blue/5 rounded-xl p-4 border border-banquise-blue/10 hover:bg-banquise-blue/10 transition-colors duration-200 group">
|
||||
<div className="w-6 h-6 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0 group-hover:scale-110 transition-transform duration-200">
|
||||
@ -115,10 +114,9 @@ export const Popup: React.FC<PopupProps> = ({ service, onClose }) => (
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Decorative elements - améliorés pour desktop */}
|
||||
<div className="absolute top-0 right-0 w-24 h-24 lg:w-40 lg:h-40 bg-banquise-blue-lightest/10 rounded-full -translate-y-12 translate-x-12 lg:-translate-y-20 lg:translate-x-20 hidden sm:block"></div>
|
||||
<div className="absolute bottom-0 left-0 w-16 h-16 lg:w-32 lg:h-32 bg-banquise-blue/5 rounded-full translate-y-8 -translate-x-8 lg:translate-y-16 lg:-translate-x-16 hidden sm:block"></div>
|
||||
<div className="absolute top-1/2 left-0 w-20 h-20 lg:w-28 lg:h-28 bg-banquise-blue-light/5 rounded-full -translate-x-10 lg:-translate-x-14 hidden lg:block"></div>
|
||||
{/* Decorative elements optimisés */}
|
||||
<div className="absolute top-0 right-0 w-16 h-16 sm:w-24 sm:h-24 lg:w-32 lg:h-32 bg-banquise-blue-lightest/10 rounded-full -translate-y-8 translate-x-8 sm:-translate-y-12 sm:translate-x-12 lg:-translate-y-16 lg:translate-x-16 hidden sm:block"></div>
|
||||
<div className="absolute bottom-0 left-0 w-12 h-12 sm:w-16 sm:h-16 lg:w-24 lg:h-24 bg-banquise-blue/5 rounded-full translate-y-6 -translate-x-6 sm:translate-y-8 sm:-translate-x-8 lg:translate-y-12 lg:-translate-x-12 hidden sm:block"></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -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(
|
||||
<StrictMode>
|
||||
<App />
|
||||
|
||||
15
banquise-website/src/types/index.ts
Normal file
15
banquise-website/src/types/index.ts
Normal file
@ -0,0 +1,15 @@
|
||||
export interface Service {
|
||||
name: string;
|
||||
url: string;
|
||||
image: string;
|
||||
description: string;
|
||||
features: string[];
|
||||
icon: string;
|
||||
}
|
||||
|
||||
export interface AccordionItemProps {
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
isOpen: boolean;
|
||||
onToggle: () => void;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user