Improve responsive for mobile version
This commit is contained in:
parent
0197cb01de
commit
851a387044
@ -1,56 +1,56 @@
|
||||
import React from 'react';
|
||||
|
||||
export const Footer: React.FC = () => (
|
||||
<footer className="bg-banquise-blue-dark text-white py-20 px-8 relative z-10 border-t border-banquise-blue-lightest/20 w-full box-border">
|
||||
<div className="flex flex-wrap justify-between max-w-6xl mx-auto gap-8">
|
||||
<div className="flex-1 min-w-64 mb-8 text-left">
|
||||
<h4 className="text-xl mb-8 text-banquise-blue-lightest relative 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">
|
||||
<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">
|
||||
<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>
|
||||
<ul className="list-none p-0 m-0">
|
||||
<li className="mb-3">
|
||||
<a href="https://wiki.labanquise.org" className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1">
|
||||
<ul className="list-none p-0 m-0 space-y-2 sm:space-y-3">
|
||||
<li>
|
||||
<a href="https://wiki.labanquise.org" className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1 text-sm sm:text-base">
|
||||
Wiki
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb-3">
|
||||
<a href="https://git.labanquise.org" className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1">
|
||||
<li>
|
||||
<a href="https://git.labanquise.org" className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1 text-sm sm:text-base">
|
||||
Gitea
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb-3">
|
||||
<a href="https://panel.labanquise.org" className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1">
|
||||
<li>
|
||||
<a href="https://panel.labanquise.org" className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1 text-sm sm:text-base">
|
||||
Panel
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-64 mb-8 text-left">
|
||||
<h4 className="text-xl mb-8 text-banquise-blue-lightest relative 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">
|
||||
<div className="flex-1 min-w-48 sm:min-w-64 mb-6 sm:mb-8 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>
|
||||
<ul className="list-none p-0 m-0">
|
||||
<li className="mb-3">
|
||||
<a href="https://discord.gg/labanquise" className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1">
|
||||
<ul className="list-none p-0 m-0 space-y-2 sm:space-y-3">
|
||||
<li>
|
||||
<a href="https://discord.gg/labanquise" className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1 text-sm sm:text-base">
|
||||
Discord
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-64 mb-8 text-left">
|
||||
<h4 className="text-xl mb-8 text-banquise-blue-lightest relative 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">
|
||||
<div className="flex-1 min-w-48 sm:min-w-64 mb-6 sm:mb-8 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>
|
||||
<ul className="list-none p-0 m-0">
|
||||
<li className="mb-3">
|
||||
<a href="#" className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1">
|
||||
<ul className="list-none p-0 m-0 space-y-2 sm:space-y-3">
|
||||
<li>
|
||||
<a href="#" className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1 text-sm sm:text-base">
|
||||
Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb-3">
|
||||
<a href="mailto:contact@la-banquise.fr" className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1">
|
||||
<li>
|
||||
<a href="mailto:contact@la-banquise.fr" className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1 text-sm sm:text-base">
|
||||
Contact
|
||||
</a>
|
||||
</li>
|
||||
@ -58,7 +58,7 @@ export const Footer: React.FC = () => (
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-banquise-blue-lightest/20 pt-8 mt-12 text-center text-sm text-banquise-gray/70 max-w-6xl mx-auto">
|
||||
<div className="border-t border-banquise-blue-lightest/20 pt-6 sm:pt-8 mt-8 sm:mt-12 text-center text-xs sm:text-sm text-banquise-gray/70 max-w-6xl mx-auto">
|
||||
© 2024 La Banquise. Tous droits réservés.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@ -1,42 +1,182 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
export const Navigation: React.FC = () => {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
|
||||
// Fermer le menu mobile quand on clique en dehors
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
if (window.innerWidth >= 768) {
|
||||
setMobileMenuOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, []);
|
||||
|
||||
// Empêcher le scroll du body quand le menu mobile est ouvert
|
||||
useEffect(() => {
|
||||
if (mobileMenuOpen) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = 'unset';
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.body.style.overflow = 'unset';
|
||||
};
|
||||
}, [mobileMenuOpen]);
|
||||
|
||||
return (
|
||||
<nav className="flex justify-between items-center py-4 px-8 bg-banquise-blue-dark/95 text-white shadow-xl w-full box-border z-50 backdrop-blur-lg border-b border-banquise-blue-lightest/20 sticky top-0">
|
||||
<div className="flex items-center">
|
||||
<img src="/src/assets/banquise.png" alt="Logo La Banquise" className="h-10 w-auto mr-4 drop-shadow-lg" style={{ filter: 'drop-shadow(0 0 8px rgba(168, 218, 255, 0.4))' }} />
|
||||
<h1 className="text-2xl font-bold m-0 text-white tracking-wide font-heading">La Banquise</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 md:flex hidden">
|
||||
<a href="https://discord.gg/labanquise" className="flex items-center bg-gradient-to-r from-banquise-blue to-banquise-blue-light text-white border-0 py-3 px-6 rounded-xl cursor-pointer no-underline font-semibold tracking-wide shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1 hover:scale-105 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">
|
||||
Discord
|
||||
</a>
|
||||
<a href="#login" className="flex items-center bg-banquise-blue-light/90 text-white border-0 py-3 px-6 rounded-xl cursor-pointer no-underline font-semibold tracking-wide shadow-lg transition-all duration-300 hover:bg-banquise-blue-light hover:-translate-y-1 hover:shadow-xl hover:scale-105 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">
|
||||
<span className="mr-2">👤</span>
|
||||
Connexion
|
||||
</a>
|
||||
</div>
|
||||
<>
|
||||
<nav className="flex justify-between items-center py-3 sm:py-4 px-4 sm:px-6 md:px-8 bg-banquise-blue-dark/95 text-white shadow-xl w-full box-border z-50 backdrop-blur-lg border-b border-banquise-blue-lightest/20 sticky top-0">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src="/src/assets/banquise.png"
|
||||
alt="Logo La Banquise"
|
||||
className="h-8 sm:h-10 w-auto mr-3 sm:mr-4 drop-shadow-lg"
|
||||
style={{ filter: 'drop-shadow(0 0 8px rgba(168, 218, 255, 0.4))' }}
|
||||
/>
|
||||
<h1 className="text-lg sm:text-xl md:text-2xl font-bold m-0 text-white tracking-wide font-heading">
|
||||
La Banquise
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Menu desktop */}
|
||||
<div className="hidden md:flex items-center gap-3 sm:gap-4">
|
||||
<a
|
||||
href="https://discord.gg/labanquise"
|
||||
className="flex items-center bg-gradient-to-r from-banquise-blue to-banquise-blue-light text-white border-0 py-2.5 sm:py-3 px-4 sm:px-6 rounded-xl cursor-pointer no-underline font-semibold tracking-wide shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1 hover:scale-105 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white text-sm sm:text-base"
|
||||
>
|
||||
Discord
|
||||
</a>
|
||||
<a
|
||||
href="#login"
|
||||
className="flex items-center bg-banquise-blue-light/90 text-white border-0 py-2.5 sm:py-3 px-4 sm:px-6 rounded-xl cursor-pointer no-underline font-semibold tracking-wide shadow-lg transition-all duration-300 hover:bg-banquise-blue-light hover:-translate-y-1 hover:shadow-xl hover:scale-105 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white text-sm sm:text-base"
|
||||
>
|
||||
<span className="mr-2">👤</span>
|
||||
<span className="hidden sm:inline">Connexion</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="md:hidden bg-transparent border-0 cursor-pointer p-1 z-20 w-10 h-10 relative"
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
>
|
||||
<span className={`block w-6 h-0.5 bg-white my-1 mx-auto transition-all duration-300 ${mobileMenuOpen ? 'translate-y-2 rotate-45' : ''}`}></span>
|
||||
<span className={`block w-6 h-0.5 bg-white my-1 mx-auto transition-all duration-300 ${mobileMenuOpen ? 'opacity-0 scale-0' : ''}`}></span>
|
||||
<span className={`block w-6 h-0.5 bg-white my-1 mx-auto transition-all duration-300 ${mobileMenuOpen ? '-translate-y-2 -rotate-45' : ''}`}></span>
|
||||
</button>
|
||||
{/* Bouton hamburger mobile */}
|
||||
<button
|
||||
className="md:hidden bg-transparent border-0 cursor-pointer p-2 z-50 w-12 h-12 relative touch-manipulation flex flex-col items-center justify-center rounded-lg hover:bg-banquise-blue/20 transition-colors duration-200"
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
aria-label={mobileMenuOpen ? "Fermer le menu" : "Ouvrir le menu"}
|
||||
aria-expanded={mobileMenuOpen}
|
||||
>
|
||||
<span className={`block w-6 h-0.5 bg-white transition-all duration-300 ${mobileMenuOpen ? 'rotate-45 translate-y-1.5' : 'mb-1'}`}></span>
|
||||
<span className={`block w-6 h-0.5 bg-white transition-all duration-300 ${mobileMenuOpen ? 'opacity-0 scale-0' : 'mb-1'}`}></span>
|
||||
<span className={`block w-6 h-0.5 bg-white transition-all duration-300 ${mobileMenuOpen ? '-rotate-45 -translate-y-1.5' : ''}`}></span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
{/* Mobile menu overlay */}
|
||||
<div className={`md:hidden fixed top-0 left-0 w-full h-full bg-black/50 z-14 transition-all duration-300 ${mobileMenuOpen ? 'visible opacity-100' : 'invisible opacity-0'}`} onClick={() => setMobileMenuOpen(false)}></div>
|
||||
|
||||
{/* Mobile menu */}
|
||||
<div className={`md:hidden fixed top-0 right-0 flex-col bg-banquise-blue-dark/98 h-full w-3/5 max-w-xs pt-20 transition-all duration-300 z-15 gap-5 backdrop-blur-lg shadow-xl ${mobileMenuOpen ? 'translate-x-0 visible opacity-100' : 'translate-x-full invisible opacity-0'}`}>
|
||||
<a href="https://discord.gg/labanquise" className="block p-4 text-white no-underline hover:bg-banquise-blue/20">Discord</a>
|
||||
<a href="#login" className="block p-4 text-white no-underline hover:bg-banquise-blue/20">👤 Connexion</a>
|
||||
{/* Menu mobile overlay et contenu */}
|
||||
<div className={`md:hidden fixed inset-0 z-40 transition-all duration-300 ${mobileMenuOpen ? 'visible' : 'invisible'}`}>
|
||||
{/* Overlay sombre */}
|
||||
<div
|
||||
className={`absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity duration-300 ${mobileMenuOpen ? 'opacity-100' : 'opacity-0'}`}
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
/>
|
||||
|
||||
{/* Menu mobile */}
|
||||
<div className={`absolute top-0 right-0 h-full w-80 max-w-[85vw] bg-gradient-to-b from-banquise-blue-dark to-banquise-blue-dark/95 backdrop-blur-lg shadow-2xl transition-transform duration-300 ${mobileMenuOpen ? 'translate-x-0' : 'translate-x-full'}`}>
|
||||
|
||||
{/* Header du menu mobile */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-banquise-blue-lightest/20">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src="/src/assets/banquise.png"
|
||||
alt="Logo La Banquise"
|
||||
className="h-8 w-auto mr-3 drop-shadow-lg"
|
||||
style={{ filter: 'drop-shadow(0 0 8px rgba(168, 218, 255, 0.4))' }}
|
||||
/>
|
||||
<h2 className="text-lg font-bold text-white tracking-wide font-heading">
|
||||
La Banquise
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="bg-transparent border-0 cursor-pointer p-2 text-white hover:bg-banquise-blue/20 rounded-lg transition-colors duration-200"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
aria-label="Fermer le menu"
|
||||
>
|
||||
<span className="block w-6 h-6 relative">
|
||||
<span className="absolute top-1/2 left-1/2 w-4 h-0.5 bg-white transform -translate-x-1/2 -translate-y-1/2 rotate-45"></span>
|
||||
<span className="absolute top-1/2 left-1/2 w-4 h-0.5 bg-white transform -translate-x-1/2 -translate-y-1/2 -rotate-45"></span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Navigation links */}
|
||||
<div className="flex flex-col p-6 space-y-4">
|
||||
<a
|
||||
href="#services"
|
||||
className="flex items-center p-4 text-white no-underline rounded-xl hover:bg-banquise-blue/20 active:bg-banquise-blue/30 transition-all duration-200 text-lg font-medium group"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
<span className="text-2xl mr-4">🚀</span>
|
||||
<span>Nos Services</span>
|
||||
<span className="ml-auto opacity-50 group-hover:opacity-100 transition-opacity duration-200">→</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://discord.gg/labanquise"
|
||||
className="flex items-center p-4 text-white no-underline rounded-xl hover:bg-banquise-blue/20 active:bg-banquise-blue/30 transition-all duration-200 text-lg font-medium group"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
<span className="text-2xl mr-4">💬</span>
|
||||
<span>Discord</span>
|
||||
<span className="ml-auto opacity-50 group-hover:opacity-100 transition-opacity duration-200">↗</span>
|
||||
</a>
|
||||
|
||||
<div className="border-t border-banquise-blue-lightest/20 my-4"></div>
|
||||
|
||||
<a
|
||||
href="#login"
|
||||
className="flex items-center justify-center bg-gradient-to-r from-banquise-blue to-banquise-blue-light text-white border-0 py-4 px-6 rounded-xl cursor-pointer no-underline font-bold tracking-wide shadow-lg transition-all duration-300 hover:shadow-xl hover:scale-105 active:scale-95 text-lg"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
<span className="mr-3 text-xl">👤</span>
|
||||
<span>Se connecter</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Footer du menu mobile */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 border-t border-banquise-blue-lightest/20">
|
||||
<div className="text-center">
|
||||
<p className="text-banquise-gray/70 text-sm mb-3">
|
||||
Rejoignez notre communauté
|
||||
</p>
|
||||
<div className="flex justify-center space-x-4">
|
||||
<a
|
||||
href="https://wiki.labanquise.org"
|
||||
className="text-banquise-blue-lightest hover:text-white transition-colors duration-200 text-sm"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
Wiki
|
||||
</a>
|
||||
<a
|
||||
href="https://git.labanquise.org"
|
||||
className="text-banquise-blue-lightest hover:text-white transition-colors duration-200 text-sm"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
Gitea
|
||||
</a>
|
||||
<a
|
||||
href="https://panel.labanquise.org"
|
||||
className="text-banquise-blue-lightest hover:text-white transition-colors duration-200 text-sm"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
Panel
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -7,24 +7,24 @@ interface AboutSectionProps {
|
||||
}
|
||||
|
||||
export const AboutSection: React.FC<AboutSectionProps> = ({ openAccordion, toggleAccordion }) => (
|
||||
<section className="relative bg-gradient-to-b from-banquise-blue-dark/15 to-banquise-blue-dark/20 backdrop-blur-lg py-24 px-8 z-2 border-t border-banquise-blue-lightest/20 w-full box-border">
|
||||
<section className="relative bg-gradient-to-b from-banquise-blue-dark/15 to-banquise-blue-dark/20 backdrop-blur-lg py-16 sm:py-20 md:py-24 px-4 sm:px-6 md:px-8 z-2 border-t border-banquise-blue-lightest/20 w-full box-border">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-20">
|
||||
<div className="w-20 h-1 bg-gradient-to-r from-banquise-blue-lightest to-banquise-blue mx-auto mb-8 rounded-full"></div>
|
||||
<h2 className="text-banquise-gray text-4xl mb-8 font-heading font-bold tracking-tight" style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)' }}>
|
||||
<div className="text-center mb-12 sm:mb-16 md:mb-20">
|
||||
<div className="w-20 h-1 bg-gradient-to-r from-banquise-blue-lightest to-banquise-blue mx-auto mb-6 sm:mb-8 rounded-full"></div>
|
||||
<h2 className="text-banquise-gray text-2xl sm:text-3xl md:text-4xl mb-6 sm:mb-8 font-heading font-bold tracking-tight px-2" style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)' }}>
|
||||
À Propos de La Banquise
|
||||
</h2>
|
||||
<p className="text-banquise-gray/90 text-xl max-w-3xl mx-auto leading-relaxed" style={{ textShadow: '0 1px 2px rgba(0, 0, 0, 0.1)' }}>
|
||||
<p className="text-banquise-gray/90 text-lg sm:text-xl max-w-3xl mx-auto leading-relaxed px-2" style={{ textShadow: '0 1px 2px rgba(0, 0, 0, 0.1)' }}>
|
||||
Une communauté passionnée qui propose des services d'hébergement et des outils collaboratifs pour les développeurs et les gamers.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-2xl font-bold text-banquise-gray mb-12 font-heading flex items-center justify-center">
|
||||
<span className="text-3xl mr-3">❓</span>
|
||||
Questions Fréquentes
|
||||
<div className="space-y-4 sm:space-y-6">
|
||||
<h3 className="text-xl sm:text-2xl font-bold text-banquise-gray mb-8 sm:mb-12 font-heading flex items-center justify-center px-2">
|
||||
<span className="text-2xl sm:text-3xl mr-3">❓</span>
|
||||
<span className="text-center">Questions Fréquentes</span>
|
||||
</h3>
|
||||
|
||||
<AccordionItem
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
import React from 'react';
|
||||
|
||||
export const HeroSection: React.FC = () => (
|
||||
<section className="min-h-[calc(80vh-72px)] flex flex-col justify-center items-center text-center py-20 w-full max-w-6xl mx-auto px-8 relative z-3">
|
||||
<div className="mb-12 w-48 h-48 rounded-full bg-gradient-to-br from-banquise-blue-dark/20 to-banquise-blue/10 p-6 shadow-2xl animate-gentle-float backdrop-blur-sm border border-banquise-blue-lightest/30">
|
||||
<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">
|
||||
<div className="mb-8 sm:mb-10 md:mb-12 w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 rounded-full bg-gradient-to-br from-banquise-blue-dark/20 to-banquise-blue/10 p-4 sm:p-5 md:p-6 shadow-2xl animate-gentle-float backdrop-blur-sm border border-banquise-blue-lightest/30">
|
||||
<img src="/src/assets/banquise.png" alt="Logo La Banquise" className="w-full h-full object-contain" style={{ filter: 'drop-shadow(0 10px 25px rgba(31, 93, 137, 0.3))' }} />
|
||||
</div>
|
||||
|
||||
<h1 className="text-banquise-gray text-5xl md:text-6xl mb-8 font-extrabold leading-tight max-w-4xl font-heading" style={{ textShadow: '0 2px 10px rgba(0, 0, 0, 0.3)' }}>
|
||||
<h1 className="text-banquise-gray text-3xl sm:text-4xl md:text-5xl lg:text-6xl mb-6 sm:mb-7 md:mb-8 font-extrabold leading-tight max-w-4xl font-heading px-2" style={{ textShadow: '0 2px 10px rgba(0, 0, 0, 0.3)' }}>
|
||||
Bienvenue sur La Banquise
|
||||
</h1>
|
||||
|
||||
<p className="text-banquise-gray text-xl md:text-2xl mb-12 max-w-3xl font-normal opacity-90 leading-relaxed" style={{ textShadow: '0 1px 4px rgba(0, 0, 0, 0.2)' }}>
|
||||
<p className="text-banquise-gray text-lg sm:text-xl md:text-2xl mb-8 sm:mb-10 md:mb-12 max-w-3xl font-normal opacity-90 leading-relaxed px-2" style={{ textShadow: '0 1px 4px rgba(0, 0, 0, 0.2)' }}>
|
||||
Votre plateforme d'hébergement communautaire dédiée aux développeurs et gamers
|
||||
</p>
|
||||
|
||||
<a href="#services" className="inline-flex items-center justify-center bg-gradient-to-r from-banquise-gray to-white text-banquise-blue-dark border-0 py-5 px-12 rounded-2xl text-lg font-bold no-underline shadow-xl transition-all duration-300 min-w-64 hover:-translate-y-2 hover:shadow-2xl hover:scale-105 backdrop-blur-sm border border-banquise-blue-lightest/20">
|
||||
Découvrir nos services
|
||||
<span className="ml-3 text-xl transition-transform duration-300 group-hover:translate-x-1">→</span>
|
||||
<a href="#services" className="inline-flex items-center justify-center bg-gradient-to-r from-banquise-gray to-white text-banquise-blue-dark border-0 py-4 sm:py-5 px-8 sm:px-10 md:px-12 rounded-2xl text-base sm:text-lg font-bold no-underline shadow-xl transition-all duration-300 min-w-48 sm:min-w-56 md:min-w-64 hover:-translate-y-2 hover:shadow-2xl hover:scale-105 backdrop-blur-sm border border-banquise-blue-lightest/20 mx-4">
|
||||
<span className="text-center">Découvrir nos services</span>
|
||||
<span className="ml-2 sm:ml-3 text-lg sm:text-xl transition-transform duration-300 group-hover:translate-x-1">→</span>
|
||||
</a>
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -16,40 +16,40 @@ interface ServicesSectionProps {
|
||||
}
|
||||
|
||||
export const ServicesSection: React.FC<ServicesSectionProps> = ({ services, onServiceClick }) => (
|
||||
<section id="services" className="relative z-2 py-20 w-full max-w-6xl mx-auto px-8">
|
||||
<div className="w-20 h-1 bg-gradient-to-r from-banquise-blue-lightest to-banquise-blue mx-auto mb-8 rounded-full"></div>
|
||||
<h2 className="text-banquise-gray text-4xl mb-6 text-center font-heading font-bold tracking-tight" style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)' }}>
|
||||
<section id="services" className="relative z-2 py-12 sm:py-16 md:py-20 w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8">
|
||||
<div className="w-20 h-1 bg-gradient-to-r from-banquise-blue-lightest to-banquise-blue mx-auto mb-6 sm:mb-8 rounded-full"></div>
|
||||
<h2 className="text-banquise-gray text-2xl sm:text-3xl md:text-4xl mb-4 sm:mb-6 text-center font-heading font-bold tracking-tight px-2" style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)' }}>
|
||||
Nos Services
|
||||
</h2>
|
||||
<p className="text-banquise-gray text-xl opacity-90 mb-16 max-w-4xl text-center mx-auto leading-relaxed" style={{ textShadow: '0 1px 3px rgba(0, 0, 0, 0.2)' }}>
|
||||
<p className="text-banquise-gray text-lg sm:text-xl opacity-90 mb-12 sm:mb-14 md:mb-16 max-w-4xl text-center mx-auto leading-relaxed px-2" style={{ textShadow: '0 1px 3px rgba(0, 0, 0, 0.2)' }}>
|
||||
Cliquez sur un service pour découvrir toutes ses fonctionnalités
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 sm:gap-8 w-full">
|
||||
{services.map((service) => (
|
||||
<div
|
||||
key={service.name}
|
||||
className="group relative bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 backdrop-blur-lg rounded-2xl p-8 border border-banquise-blue-lightest/30 transition-all duration-300 cursor-pointer hover:-translate-y-4 hover:shadow-2xl hover:border-banquise-blue-lightest/50 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8"
|
||||
className="group relative bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 backdrop-blur-lg rounded-2xl p-6 sm:p-8 border border-banquise-blue-lightest/30 transition-all duration-300 cursor-pointer hover:-translate-y-4 hover:shadow-2xl hover:border-banquise-blue-lightest/50 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 active:scale-95"
|
||||
onClick={() => onServiceClick(service)}
|
||||
>
|
||||
{/* Icon */}
|
||||
<div className="mb-8 w-24 h-24 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-2xl flex items-center justify-center text-4xl shadow-lg group-hover:scale-110 transition-transform duration-300 mx-auto">
|
||||
<div className="mb-6 sm:mb-8 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-2xl flex items-center justify-center text-3xl sm:text-4xl shadow-lg group-hover:scale-110 transition-transform duration-300 mx-auto">
|
||||
{service.icon}
|
||||
</div>
|
||||
|
||||
{/* Service name */}
|
||||
<h3 className="text-2xl font-bold text-banquise-gray mb-6 font-heading text-center group-hover:text-banquise-blue-lightest transition-colors duration-300">
|
||||
<h3 className="text-xl sm:text-2xl font-bold text-banquise-gray mb-4 sm:mb-6 font-heading text-center group-hover:text-banquise-blue-lightest transition-colors duration-300">
|
||||
{service.name}
|
||||
</h3>
|
||||
|
||||
{/* Short teaser description */}
|
||||
<p className="text-banquise-gray/80 leading-relaxed mb-8 text-center">
|
||||
<p className="text-banquise-gray/80 leading-relaxed mb-6 sm:mb-8 text-center text-sm sm:text-base">
|
||||
{service.description.split('.')[0]}.
|
||||
</p>
|
||||
|
||||
{/* CTA */}
|
||||
<div className="flex items-center justify-center text-banquise-blue-light font-bold group-hover:text-banquise-blue-lightest transition-colors duration-300">
|
||||
Découvrir toutes les fonctionnalités
|
||||
<div className="flex items-center justify-center text-banquise-blue-light font-bold group-hover:text-banquise-blue-lightest transition-colors duration-300 text-sm sm:text-base">
|
||||
<span className="text-center">Découvrir toutes les fonctionnalités</span>
|
||||
<span className="ml-2 text-lg transition-transform duration-300 group-hover:translate-x-2">→</span>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,45 +1,45 @@
|
||||
import React from 'react';
|
||||
|
||||
export const TechFeaturesSection: React.FC = () => (
|
||||
<section className="py-20 relative z-2 w-full max-w-6xl mx-auto px-8">
|
||||
<div className="w-20 h-1 bg-gradient-to-r from-banquise-blue-lightest to-banquise-blue mx-auto mb-8 rounded-full"></div>
|
||||
<h2 className="text-banquise-gray text-4xl mb-6 text-center font-heading font-bold tracking-tight" style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)' }}>
|
||||
<section className="py-12 sm:py-16 md:py-20 relative z-2 w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8">
|
||||
<div className="w-20 h-1 bg-gradient-to-r from-banquise-blue-lightest to-banquise-blue mx-auto mb-6 sm:mb-8 rounded-full"></div>
|
||||
<h2 className="text-banquise-gray text-2xl sm:text-3xl md:text-4xl mb-4 sm:mb-6 text-center font-heading font-bold tracking-tight px-2" style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)' }}>
|
||||
Notre Infrastructure
|
||||
</h2>
|
||||
<p className="text-banquise-gray text-xl opacity-90 mb-16 max-w-4xl text-center mx-auto leading-relaxed" style={{ textShadow: '0 1px 3px rgba(0, 0, 0, 0.2)' }}>
|
||||
<p className="text-banquise-gray text-lg sm:text-xl opacity-90 mb-12 sm:mb-14 md:mb-16 max-w-4xl text-center mx-auto leading-relaxed px-2" style={{ textShadow: '0 1px 3px rgba(0, 0, 0, 0.2)' }}>
|
||||
Une infrastructure robuste et sécurisée pour vos projets les plus exigeants
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 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-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-4xl mb-6 text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light w-20 h-20 flex items-center justify-center rounded-2xl shadow-lg group-hover:scale-110 transition-transform duration-300">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg: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">
|
||||
🚀
|
||||
</div>
|
||||
<h3 className="text-xl mb-4 text-banquise-gray font-heading font-semibold group-hover:text-banquise-blue-lightest transition-colors duration-300">Serveurs performants</h3>
|
||||
<h3 className="text-lg sm:text-xl mb-3 sm:mb-4 text-banquise-gray font-heading font-semibold group-hover:text-banquise-blue-lightest transition-colors duration-300">Serveurs performants</h3>
|
||||
<p className="text-banquise-gray/80 leading-relaxed text-sm">Infrastructure optimisée pour assurer des performances élevées et une disponibilité maximale de vos applications</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 backdrop-blur-lg rounded-2xl 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-4xl mb-6 text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light w-20 h-20 flex items-center justify-center rounded-2xl shadow-lg group-hover:scale-110 transition-transform duration-300">
|
||||
<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">
|
||||
💾
|
||||
</div>
|
||||
<h3 className="text-xl mb-4 text-banquise-gray font-heading font-semibold group-hover:text-banquise-blue-lightest transition-colors duration-300">Stockage sécurisé</h3>
|
||||
<h3 className="text-lg sm:text-xl mb-3 sm:mb-4 text-banquise-gray font-heading font-semibold group-hover:text-banquise-blue-lightest transition-colors duration-300">Stockage sécurisé</h3>
|
||||
<p className="text-banquise-gray/80 leading-relaxed text-sm">Solutions de stockage distribuées avec redondance pour garantir l'intégrité et la durabilité de vos données</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 backdrop-blur-lg rounded-2xl 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-4xl mb-6 text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light w-20 h-20 flex items-center justify-center rounded-2xl shadow-lg group-hover:scale-110 transition-transform duration-300">
|
||||
<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">
|
||||
🌐
|
||||
</div>
|
||||
<h3 className="text-xl mb-4 text-banquise-gray font-heading font-semibold group-hover:text-banquise-blue-lightest transition-colors duration-300">Réseau optimisé</h3>
|
||||
<h3 className="text-lg sm:text-xl mb-3 sm:mb-4 text-banquise-gray font-heading font-semibold group-hover:text-banquise-blue-lightest transition-colors duration-300">Réseau optimisé</h3>
|
||||
<p className="text-banquise-gray/80 leading-relaxed text-sm">Architecture réseau à haute disponibilité avec une faible latence pour vos applications critiques</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 backdrop-blur-lg rounded-2xl 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-4xl mb-6 text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light w-20 h-20 flex items-center justify-center rounded-2xl shadow-lg group-hover:scale-110 transition-transform duration-300">
|
||||
<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">
|
||||
🛡️
|
||||
</div>
|
||||
<h3 className="text-xl mb-4 text-banquise-gray font-heading font-semibold group-hover:text-banquise-blue-lightest transition-colors duration-300">Sécurité renforcée</h3>
|
||||
<h3 className="text-lg sm:text-xl mb-3 sm:mb-4 text-banquise-gray font-heading font-semibold group-hover:text-banquise-blue-lightest transition-colors duration-300">Sécurité renforcée</h3>
|
||||
<p className="text-banquise-gray/80 leading-relaxed text-sm">Protection contre les menaces avec systèmes de sécurité modernes et mises à jour régulières</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -11,16 +11,16 @@ interface AccordionItemProps {
|
||||
export const AccordionItem: React.FC<AccordionItemProps> = ({ title, children, isOpen, onToggle }) => (
|
||||
<div className={`bg-gradient-to-br from-banquise-blue-dark/15 to-banquise-blue-dark/5 backdrop-blur-lg rounded-2xl overflow-hidden border border-banquise-blue-lightest/30 transition-all duration-300 shadow-sm ${isOpen ? 'shadow-xl border-banquise-blue-lightest/50 scale-[1.01]' : ''} hover:shadow-lg hover:border-banquise-blue-lightest/40`}>
|
||||
<div
|
||||
className="p-8 cursor-pointer flex items-center justify-between font-semibold text-banquise-gray transition-all duration-200 text-lg select-none hover:bg-banquise-blue-dark/10"
|
||||
className="p-4 sm:p-6 md:p-8 cursor-pointer flex items-center justify-between font-semibold text-banquise-gray transition-all duration-200 text-base sm:text-lg select-none hover:bg-banquise-blue-dark/10 active:bg-banquise-blue-dark/15"
|
||||
onClick={onToggle}
|
||||
>
|
||||
<span className="flex items-center">{title}</span>
|
||||
<span className={`text-2xl transition-transform duration-300 text-banquise-blue-lightest ${isOpen ? 'rotate-180' : ''}`}>
|
||||
<span className="flex items-center flex-1 mr-4">{title}</span>
|
||||
<span className={`text-xl sm:text-2xl transition-transform duration-300 text-banquise-blue-lightest flex-shrink-0 ${isOpen ? 'rotate-180' : ''}`}>
|
||||
▼
|
||||
</span>
|
||||
</div>
|
||||
<div className={`transition-all duration-500 overflow-hidden ${isOpen ? 'max-h-[1000px] pb-8 px-8' : 'max-h-0'}`}>
|
||||
<div className="text-banquise-gray/90 leading-relaxed">
|
||||
<div className={`transition-all duration-500 overflow-hidden ${isOpen ? 'max-h-[1000px] pb-4 px-4 sm:pb-6 sm:px-6 md:pb-8 md:px-8' : 'max-h-0'}`}>
|
||||
<div className="text-banquise-gray/90 leading-relaxed text-sm sm:text-base">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -17,78 +17,108 @@ 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-2xl w-full shadow-2xl relative overflow-hidden animate-slideUp border border-banquise-blue-lightest/20">
|
||||
<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">
|
||||
|
||||
{/* Header */}
|
||||
<div className="relative bg-gradient-to-r from-banquise-blue to-banquise-blue-light p-8 text-white">
|
||||
<div className="relative bg-gradient-to-r from-banquise-blue to-banquise-blue-light p-6 sm:p-8 text-white">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute top-6 right-6 bg-white/20 hover:bg-white/30 border-0 text-2xl cursor-pointer text-white flex items-center justify-center w-12 h-12 rounded-full transition-all duration-200 backdrop-blur-sm hover:scale-110"
|
||||
className="absolute top-4 sm:top-6 right-4 sm:right-6 bg-white/20 hover:bg-white/30 border-0 text-xl sm:text-2xl cursor-pointer text-white flex items-center justify-center w-10 h-10 sm:w-12 sm:h-12 rounded-full transition-all duration-200 backdrop-blur-sm hover:scale-110 active:scale-95"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="w-20 h-20 bg-white/20 rounded-3xl flex items-center justify-center text-4xl mr-6 backdrop-blur-sm">
|
||||
<div className="flex flex-col lg:flex-row items-center lg:items-start mb-4">
|
||||
<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>
|
||||
<h2 className="font-heading text-4xl mt-0 mb-2 leading-tight">
|
||||
<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">
|
||||
{service.name}
|
||||
</h2>
|
||||
<div className="text-white/90 text-lg font-medium">
|
||||
<div className="text-white/90 text-base sm:text-lg lg:text-xl font-medium">
|
||||
Service d'hébergement professionnel
|
||||
</div>
|
||||
<div className="mt-4 lg:mt-6 flex flex-wrap gap-2">
|
||||
<span className="bg-white/20 text-white px-3 py-1 rounded-full text-sm font-medium backdrop-blur-sm">Haute disponibilité</span>
|
||||
<span className="bg-white/20 text-white px-3 py-1 rounded-full text-sm font-medium backdrop-blur-sm">Open Source</span>
|
||||
<span className="bg-white/20 text-white px-3 py-1 rounded-full text-sm font-medium backdrop-blur-sm">Communautaire</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-8">
|
||||
{/* Content - Layout simplifié */}
|
||||
<div className="p-6 sm:p-8">
|
||||
{/* Description */}
|
||||
<div className="mb-8">
|
||||
<h3 className="text-xl font-bold text-banquise-blue-dark mb-4 font-heading flex items-center">
|
||||
<span className="text-2xl mr-3">📋</span>
|
||||
Description
|
||||
</h3>
|
||||
<p className="text-banquise-blue-dark/80 leading-relaxed text-lg">
|
||||
<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>
|
||||
Description détaillée
|
||||
</h3>
|
||||
<div className="bg-gradient-to-br from-banquise-blue/5 to-banquise-blue-light/5 rounded-2xl p-4 lg:p-6 border border-banquise-blue/10 mb-8">
|
||||
<p className="text-banquise-blue-dark/80 leading-relaxed text-base sm:text-lg lg:text-xl mb-4">
|
||||
{service.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Features */}
|
||||
<div className="mb-8">
|
||||
<h3 className="text-xl font-bold text-banquise-blue-dark mb-6 font-heading flex items-center">
|
||||
<span className="text-2xl mr-3">⚡</span>
|
||||
Fonctionnalités principales
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{service.features.map((feature, index) => (
|
||||
<div key={index} className="flex items-center bg-banquise-blue/5 rounded-xl p-4 border border-banquise-blue/10 hover:bg-banquise-blue/10 transition-colors duration-200">
|
||||
<div className="w-3 h-3 bg-banquise-blue rounded-full mr-4 flex-shrink-0"></div>
|
||||
<span className="text-banquise-blue-dark/90 font-medium">{feature}</span>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-6">
|
||||
<div className="flex items-center p-3 bg-white/60 rounded-xl border border-banquise-blue/10">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center text-white mr-3">
|
||||
✓
|
||||
</div>
|
||||
))}
|
||||
<div>
|
||||
<div className="font-semibold text-banquise-blue-dark text-sm">99.9% Uptime</div>
|
||||
<div className="text-banquise-blue-dark/70 text-xs">Disponibilité garantie</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center p-3 bg-white/60 rounded-xl border border-banquise-blue/10">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center text-white mr-3">
|
||||
🔒
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-semibold text-banquise-blue-dark text-sm">Sécurisé</div>
|
||||
<div className="text-banquise-blue-dark/70 text-xs">SSL & Backups</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Call to action */}
|
||||
<div className="pt-6 border-t border-banquise-blue/10">
|
||||
{/* Fonctionnalités en colonnes */}
|
||||
<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">
|
||||
{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">
|
||||
<div className="w-2 h-2 bg-white rounded-full"></div>
|
||||
</div>
|
||||
<span className="text-banquise-blue-dark/90 font-medium text-sm lg:text-base leading-relaxed">{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Call to action simplifié */}
|
||||
<div className="pt-6 lg:pt-8 border-t border-banquise-blue/10">
|
||||
<a
|
||||
href={service.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-full inline-flex items-center justify-center bg-gradient-to-r from-banquise-blue to-banquise-blue-light text-white border-0 py-4 px-8 rounded-2xl cursor-pointer no-underline font-bold tracking-wide shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-banquise-blue-light text-lg hover:scale-[1.02]"
|
||||
className="w-full inline-flex items-center justify-center bg-gradient-to-r from-banquise-blue to-banquise-blue-light text-white border-0 py-4 px-6 sm:px-8 rounded-2xl cursor-pointer no-underline font-bold tracking-wide shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-banquise-blue-light text-base lg:text-lg hover:scale-[1.02] active:scale-95"
|
||||
>
|
||||
<span className="mr-3 text-2xl">🚀</span>
|
||||
Accéder à {service.name}
|
||||
<span className="mr-3 text-xl lg:text-2xl">🚀</span>
|
||||
<span>Accéder à {service.name}</span>
|
||||
</a>
|
||||
|
||||
<p className="text-center text-sm text-banquise-blue-dark/60 mt-4">
|
||||
Besoin d'aide ? Rejoignez notre <a href="https://discord.gg/labanquise" className="text-banquise-blue hover:text-banquise-blue-dark transition-colors duration-200 font-medium">Discord</a> pour obtenir du support
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Decorative elements */}
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-banquise-blue-lightest/10 rounded-full -translate-y-16 translate-x-16"></div>
|
||||
<div className="absolute bottom-0 left-0 w-24 h-24 bg-banquise-blue/5 rounded-full translate-y-12 -translate-x-12"></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>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user