banquise/website-front
7
0
Fork 0
Code Issues 3 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Improve UI unity

Browse Source
This commit is contained in:
Sacha VAUDEY 2025-05-31 21:53:14 +02:00
parent 257b182544
commit 0bf2a01d72
8 changed files with 160 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
banquise-website/src/App.tsx
View File

@ -80,32 +80,32 @@ const App: React.FC = () => {
<Navigation /> <Navigation />
<main className="flex-1 flex flex-col overflow-x-hidden overflow-y-auto"> <main className="flex-1 flex flex-col overflow-x-hidden overflow-y-auto">
<div className="relative flex-1 bg-ocean-gradient w-full min-h-[calc(100vh-72px)] flex flex-col justify-start items-center overflow-x-hidden"> <div className="relative flex-1 bg-ocean-gradient w-full min-h-screen flex flex-col justify-start items-center overflow-x-hidden">
<HeroSection /> <HeroSection />
<TechFeaturesSection /> <TechFeaturesSection />
<ServicesSection services={services} onServiceClick={setSelectedService} /> <ServicesSection services={services} onServiceClick={setSelectedService} />
<AboutSection openAccordion={openAccordion} toggleAccordion={toggleAccordion} /> <AboutSection openAccordion={openAccordion} toggleAccordion={toggleAccordion} />
{/* Waves effect */} {/* Waves effect - repositioned to not interfere with content */}
<div className="absolute bottom-0 left-0 w-full h-52 overflow-hidden z-1 pointer-events-none"> <div className="absolute bottom-0 left-0 w-full h-40 overflow-hidden z-0 pointer-events-none">
<div className="absolute bottom-0 left-0 w-full h-28 bg-wave-pattern bg-repeat-x opacity-30 animate-wave-1 z-1" style={{ backgroundSize: '1200px 100px' }}></div> <div className="absolute bottom-0 left-0 w-full h-24 bg-wave-pattern bg-repeat-x opacity-20 animate-wave-1 z-1" style={{ backgroundSize: '1200px 100px' }}></div>
<div className="absolute -bottom-3 left-0 w-full h-28 bg-wave-pattern bg-repeat-x opacity-50 animate-wave-2 z-2" style={{ backgroundSize: '1200px 100px', animationDelay: '-5s' }}></div> <div className="absolute -bottom-2 left-0 w-full h-24 bg-wave-pattern bg-repeat-x opacity-30 animate-wave-2 z-2" style={{ backgroundSize: '1200px 100px', animationDelay: '-5s' }}></div>
<div className="absolute -bottom-5 left-0 w-full h-28 bg-wave-pattern bg-repeat-x opacity-70 animate-wave-3 z-3" style={{ backgroundSize: '1200px 100px', animationDelay: '-2s' }}></div> <div className="absolute -bottom-4 left-0 w-full h-24 bg-wave-pattern bg-repeat-x opacity-40 animate-wave-3 z-3" style={{ backgroundSize: '1200px 100px', animationDelay: '-2s' }}></div>
</div> </div>
{/* Bubbles effect */} {/* Bubbles effect - reduced quantity and repositioned */}
<div className="absolute w-full h-full overflow-hidden top-0 left-0 z-1 pointer-events-none"> <div className="absolute w-full h-full overflow-hidden top-0 left-0 z-0 pointer-events-none">
{[...Array(7)].map((_, i) => ( {[...Array(5)].map((_, i) => (
<div <div
key={i} key={i}
className={`absolute -bottom-5 rounded-full bg-banquise-blue-lightest/20 opacity-80 animate-rise`} className={`absolute -bottom-5 rounded-full bg-banquise-blue-lightest/15 opacity-60 animate-rise`}
style={{ style={{
width: `${[25, 30, 35, 28, 22, 32, 20][i]}px`, width: `${[20, 25, 30, 22, 28][i]}px`,
height: `${[25, 30, 35, 28, 22, 32, 20][i]}px`, height: `${[20, 25, 30, 22, 28][i]}px`,
left: `${[10, 20, 35, 50, 65, 80, 90][i]}%`, left: `${[15, 35, 55, 75, 95][i]}%`,
animationDuration: `${[8, 9, 10, 7, 12, 9, 8][i]}s`, animationDuration: `${[10, 12, 14, 11, 13][i]}s`,
animationDelay: `${[0, 1, 2, 0, 3, 1.5, 2.5][i]}s`, animationDelay: `${[0, 2, 4, 1, 3][i]}s`,
}} }}
></div> ></div>
))} ))}

18
banquise-website/src/components/layout/Footer.tsx
View File

@ -1,10 +1,10 @@
import React from 'react'; import React from 'react';
export const Footer: React.FC = () => ( export const Footer: React.FC = () => (
<footer className="bg-banquise-blue-dark text-white py-16 px-8 pt-16 relative z-3 border-t border-white/10 w-full box-border"> <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 mt-20">
<div className="flex flex-wrap justify-between max-w-6xl mx-auto"> <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 px-6"> <div className="flex-1 min-w-64 mb-8 text-left">
<h4 className="text-xl mb-6 text-banquise-blue-lightest relative pb-3 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-10 after:h-0.5 after:bg-banquise-blue-lightest"> <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">
Services Services
</h4> </h4>
<ul className="list-none p-0 m-0"> <ul className="list-none p-0 m-0">
@ -26,8 +26,8 @@ export const Footer: React.FC = () => (
</ul> </ul>
</div> </div>
<div className="flex-1 min-w-64 mb-8 text-left px-6"> <div className="flex-1 min-w-64 mb-8 text-left">
<h4 className="text-xl mb-6 text-banquise-blue-lightest relative pb-3 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-10 after:h-0.5 after:bg-banquise-blue-lightest"> <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">
Communauté Communauté
</h4> </h4>
<ul className="list-none p-0 m-0"> <ul className="list-none p-0 m-0">
@ -39,8 +39,8 @@ export const Footer: React.FC = () => (
</ul> </ul>
</div> </div>
<div className="flex-1 min-w-64 mb-8 text-left px-6"> <div className="flex-1 min-w-64 mb-8 text-left">
<h4 className="text-xl mb-6 text-banquise-blue-lightest relative pb-3 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-10 after:h-0.5 after:bg-banquise-blue-lightest"> <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">
Support Support
</h4> </h4>
<ul className="list-none p-0 m-0"> <ul className="list-none p-0 m-0">
@ -58,7 +58,7 @@ export const Footer: React.FC = () => (
</div> </div>
</div> </div>
<div className="border-t border-white/10 pt-6 mt-8 text-center text-sm text-white/70 max-w-6xl mx-auto"> <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">
© 2024 La Banquise. Tous droits réservés. © 2024 La Banquise. Tous droits réservés.
</div> </div>
</footer> </footer>

10
banquise-website/src/components/layout/Navigation.tsx
View File

@ -4,17 +4,17 @@ export const Navigation: React.FC = () => {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
return ( return (
<nav className="flex justify-between items-center py-3 px-8 bg-banquise-blue-dark/95 text-white shadow-lg w-full box-border z-10 backdrop-blur-lg border-b border-white/10 sticky top-0"> <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"> <div className="flex items-center">
<img src="/src/assets/banquise.png" alt="Logo La Banquise" className="h-9 w-auto mr-4 drop-shadow-lg" style={{ filter: 'drop-shadow(0 0 5px rgba(168, 218, 255, 0.4))' }} /> <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> <h1 className="text-2xl font-bold m-0 text-white tracking-wide font-heading">La Banquise</h1>
</div> </div>
<div className="flex items-center gap-3 md:flex hidden"> <div className="flex items-center gap-4 md:flex hidden">
<a href="https://discord.gg/labanquise" className="flex items-center bg-banquise-blue text-white border-0 py-2 px-5 rounded-md cursor-pointer no-underline font-semibold tracking-wide shadow-lg transition-all duration-200 hover:bg-banquise-blue/80 hover:-translate-y-0.5 hover:shadow-xl hover:text-white hover:shadow-banquise-blue/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"> <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 Discord
</a> </a>
<a href="#login" className="flex items-center bg-banquise-blue-light/90 text-white border-0 py-2 px-5 rounded-md cursor-pointer no-underline font-semibold tracking-wide shadow-lg transition-all duration-200 hover:bg-banquise-blue-light hover:-translate-y-0.5 hover:shadow-xl hover:text-white hover:shadow-banquise-blue-light/50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"> <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> <span className="mr-2">👤</span>
Connexion Connexion
</a> </a>

98
banquise-website/src/components/sections/AboutSection.tsx
View File

@ -7,38 +7,44 @@ interface AboutSectionProps {
} }
export const AboutSection: React.FC<AboutSectionProps> = ({ openAccordion, toggleAccordion }) => ( export const AboutSection: React.FC<AboutSectionProps> = ({ openAccordion, toggleAccordion }) => (
<section className="relative bg-banquise-blue-dark/15 backdrop-blur-lg m-0 py-16 px-8 z-2 border-t border-white/10 border-b border-white/10 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-24 px-8 z-2 border-t border-banquise-blue-lightest/20 w-full box-border mt-20">
<div className="max-w-5xl mx-auto flex flex-col items-center w-full"> <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> <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-4 text-center font-heading font-bold tracking-tight" style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)' }}> <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)' }}>
À Propos À Propos de La Banquise
</h2> </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)' }}>
<div className="max-w-48 mx-auto mb-8 relative z-2"> Une communauté passionnée qui propose des services d'hébergement et des outils collaboratifs pour les développeurs et les gamers.
<img </p>
src="/src/assets/banquise.png"
alt="Logo La Banquise"
className="w-full h-auto rounded-full p-4 bg-white/5 border-2 border-banquise-blue-lightest/30 shadow-xl animate-gentle-float"
style={{ boxShadow: '0 10px 25px rgba(31, 93, 137, 0.3)' }}
/>
</div> </div>
<div className="text-center max-w-4xl mx-auto mb-10 text-banquise-gray text-lg leading-relaxed" style={{ textShadow: '0 1px 2px rgba(0, 0, 0, 0.1)' }}> {/* FAQ Section */}
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. <div className="space-y-6">
</div> <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
</h3>
<div className="w-full flex flex-col gap-4 mt-6">
<AccordionItem <AccordionItem
title="🎯 Notre Mission" title="🎯 Notre Mission"
isOpen={openAccordion === "mission"} isOpen={openAccordion === "mission"}
onToggle={() => toggleAccordion("mission")} onToggle={() => toggleAccordion("mission")}
> >
<p className="mt-0 mb-4"> <div className="space-y-4">
<p className="text-banquise-gray/90 leading-relaxed">
Fournir une plateforme stable et accessible pour héberger vos projets, partager vos connaissances et jouer ensemble. Fournir une plateforme stable et accessible pour héberger vos projets, partager vos connaissances et jouer ensemble.
</p> </p>
<p className="mb-0"> <p className="text-banquise-gray/90 leading-relaxed">
Nous croyons en la puissance de la collaboration et mettons à disposition des outils modernes pour faciliter le travail en équipe. Nous croyons en la puissance de la collaboration et mettons à disposition des outils modernes pour faciliter le travail en équipe.
</p> </p>
<div className="flex flex-wrap gap-2 mt-4">
<span className="bg-banquise-blue/20 text-banquise-blue-light px-3 py-1 rounded-full text-sm font-medium">Collaboration</span>
<span className="bg-banquise-blue/20 text-banquise-blue-light px-3 py-1 rounded-full text-sm font-medium">Innovation</span>
<span className="bg-banquise-blue/20 text-banquise-blue-light px-3 py-1 rounded-full text-sm font-medium">Accessibilité</span>
</div>
</div>
</AccordionItem> </AccordionItem>
<AccordionItem <AccordionItem
@ -46,14 +52,36 @@ export const AboutSection: React.FC<AboutSectionProps> = ({ openAccordion, toggl
isOpen={openAccordion === "services"} isOpen={openAccordion === "services"}
onToggle={() => toggleAccordion("services")} onToggle={() => toggleAccordion("services")}
> >
<ul className="mt-2 mb-2 pl-6"> <div className="space-y-6">
<li className="mb-2"><strong>Wiki :</strong> Documentation collaborative et guides détaillés</li> <div className="grid gap-4">
<li className="mb-2"><strong>Gitea :</strong> Gestion de versions Git auto-hébergée</li> <div className="flex items-start space-x-4 p-4 bg-banquise-blue-dark/10 rounded-xl border border-banquise-blue-lightest/20">
<li className="mb-2"><strong>Panel de Jeux :</strong> Interface de gestion pour serveurs de jeux</li> <div className="w-10 h-10 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-lg flex items-center justify-center text-white font-bold">📚</div>
</ul> <div>
<p className="mb-0"> <h4 className="font-semibold text-banquise-gray mb-1">Wiki</h4>
<p className="text-banquise-gray/80 text-sm">Documentation collaborative et guides détaillés</p>
</div>
</div>
<div className="flex items-start space-x-4 p-4 bg-banquise-blue-dark/10 rounded-xl border border-banquise-blue-lightest/20">
<div className="w-10 h-10 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-lg flex items-center justify-center text-white font-bold">🔧</div>
<div>
<h4 className="font-semibold text-banquise-gray mb-1">Gitea</h4>
<p className="text-banquise-gray/80 text-sm">Gestion de versions Git auto-hébergée</p>
</div>
</div>
<div className="flex items-start space-x-4 p-4 bg-banquise-blue-dark/10 rounded-xl border border-banquise-blue-lightest/20">
<div className="w-10 h-10 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-lg flex items-center justify-center text-white font-bold">🎮</div>
<div>
<h4 className="font-semibold text-banquise-gray mb-1">Panel de Jeux</h4>
<p className="text-banquise-gray/80 text-sm">Interface de gestion pour serveurs de jeux</p>
</div>
</div>
</div>
<p className="text-banquise-gray/90 leading-relaxed mt-4">
Tous nos services sont maintenus avec soin et régulièrement mis à jour pour garantir une expérience optimale. Tous nos services sont maintenus avec soin et régulièrement mis à jour pour garantir une expérience optimale.
</p> </p>
</div>
</AccordionItem> </AccordionItem>
<AccordionItem <AccordionItem
@ -61,16 +89,32 @@ export const AboutSection: React.FC<AboutSectionProps> = ({ openAccordion, toggl
isOpen={openAccordion === "community"} isOpen={openAccordion === "community"}
onToggle={() => toggleAccordion("community")} onToggle={() => toggleAccordion("community")}
> >
<p className="mt-0 mb-4"> <div className="space-y-6">
<p className="text-banquise-gray/90 leading-relaxed">
Rejoignez notre serveur Discord pour échanger avec la communauté, obtenir de l'aide et rester informé des dernières nouveautés. Rejoignez notre serveur Discord pour échanger avec la communauté, obtenir de l'aide et rester informé des dernières nouveautés.
</p> </p>
<div className="bg-gradient-to-r from-banquise-blue-dark/20 to-banquise-blue/10 rounded-2xl p-6 border border-banquise-blue-lightest/30">
<h4 className="font-semibold text-banquise-gray mb-3 flex items-center">
<span className="text-xl mr-2">💬</span>
Avantages de rejoindre
</h4>
<ul className="space-y-2 text-banquise-gray/80 text-sm mb-6">
<li className="flex items-center"><span className="text-banquise-blue-light mr-2">•</span> Support technique prioritaire</li>
<li className="flex items-center"><span className="text-banquise-blue-light mr-2">•</span> Accès aux bêta-tests</li>
<li className="flex items-center"><span className="text-banquise-blue-light mr-2">•</span> Échanges avec les développeurs</li>
<li className="flex items-center"><span className="text-banquise-blue-light mr-2">•</span> Annonces en avant-première</li>
</ul>
<a <a
href="https://discord.gg/labanquise" href="https://discord.gg/labanquise"
className="inline-flex items-center bg-banquise-blue text-white border-0 py-3 px-5 rounded-md mt-4 no-underline font-semibold transition-all duration-200 hover:bg-banquise-blue/80 hover:-translate-y-1 hover:shadow-lg" className="inline-flex items-center bg-gradient-to-r from-banquise-blue to-banquise-blue-light text-white border-0 py-3 px-6 rounded-xl no-underline font-bold transition-all duration-300 hover:shadow-lg hover:-translate-y-1 hover:scale-105"
> >
<span className="mr-2 text-sm">💬</span> <span className="mr-3 text-lg">🚀</span>
Rejoindre Discord Rejoindre Discord
</a> </a>
</div>
</div>
</AccordionItem> </AccordionItem>
</div> </div>
</div> </div>

28
banquise-website/src/components/sections/HeroSection.tsx
View File

@ -1,30 +1,30 @@
import React from 'react'; import React from 'react';
export const HeroSection: React.FC = () => ( export const HeroSection: React.FC = () => (
<section className="min-h-[calc(70vh-72px)] flex flex-col justify-center items-center text-center pt-12 pb-12 mt-0 w-full max-w-6xl mx-auto px-8 relative z-3"> <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-8 w-40 h-40 rounded-full bg-white/10 p-4 shadow-2xl animate-gentle-float"> <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">
<img src="/src/assets/banquise.png" alt="Logo La Banquise" className="w-full h-full object-contain" style={{ filter: 'drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2))' }} /> <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> </div>
<h1 className="text-banquise-gray text-6xl mb-6 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-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)' }}>
Bienvenue sur La Banquise Bienvenue sur La Banquise
</h1> </h1>
<p className="text-banquise-gray text-2xl mb-10 max-w-3xl font-normal opacity-90" style={{ textShadow: '0 1px 4px rgba(0, 0, 0, 0.2)' }}> <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)' }}>
Votre plateforme d'hébergement communautaire Votre plateforme d'hébergement communautaire dédiée aux développeurs et gamers
</p> </p>
<a href="#services" className="inline-flex items-center justify-center bg-banquise-gray text-banquise-blue-dark border-0 py-4 px-10 rounded-full text-lg font-semibold no-underline shadow-lg transition-all duration-300 min-w-52 hover:-translate-y-1 hover:shadow-xl hover:bg-white"> <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 Découvrir nos services
<span className="ml-3 transition-transform duration-200 hover:translate-x-1">→</span> <span className="ml-3 text-xl transition-transform duration-300 group-hover:translate-x-1">→</span>
</a> </a>
{/* Tech elements background */} {/* Tech elements background - repositioned to avoid overlap */}
<div className="absolute top-0 left-0 w-full h-full pointer-events-none z-1"> <div className="absolute top-0 left-0 w-full h-full pointer-events-none z-1 overflow-hidden">
<div className="absolute top-[15%] left-[10%] text-4xl text-white/15 animate-tech-float">🖥️</div> <div className="absolute top-[20%] left-[5%] text-3xl text-banquise-blue-lightest/20 animate-tech-float">🖥️</div>
<div className="absolute top-[25%] right-[15%] text-4xl text-white/15 animate-tech-float" style={{ animationDelay: '2s' }}>⚙️</div> <div className="absolute top-[30%] right-[8%] text-3xl text-banquise-blue-lightest/20 animate-tech-float" style={{ animationDelay: '2s' }}>⚙️</div>
<div className="absolute bottom-[20%] left-[15%] text-4xl text-white/15 animate-tech-float" style={{ animationDelay: '1s' }}>🚀</div> <div className="absolute bottom-[25%] left-[8%] text-3xl text-banquise-blue-lightest/20 animate-tech-float" style={{ animationDelay: '1s' }}>🚀</div>
<div className="absolute bottom-[30%] right-[10%] text-4xl text-white/15 animate-tech-float" style={{ animationDelay: '3s' }}>💻</div> <div className="absolute bottom-[35%] right-[5%] text-3xl text-banquise-blue-lightest/20 animate-tech-float" style={{ animationDelay: '3s' }}>💻</div>
</div> </div>
</section> </section>
); );

18
banquise-website/src/components/sections/ServicesSection.tsx
View File

@ -16,12 +16,12 @@ interface ServicesSectionProps {
} }
export const ServicesSection: React.FC<ServicesSectionProps> = ({ services, onServiceClick }) => ( export const ServicesSection: React.FC<ServicesSectionProps> = ({ services, onServiceClick }) => (
<section id="services" className="relative z-2 pt-12 pb-20 mt-0 mb-0 w-full max-w-6xl mx-auto px-8"> <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> <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-4 text-center font-heading font-bold tracking-tight" style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)' }}> <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)' }}>
Nos Services Nos Services
</h2> </h2>
<p className="text-banquise-gray text-xl opacity-90 mb-14 max-w-4xl text-center mx-auto" style={{ textShadow: '0 1px 3px rgba(0, 0, 0, 0.2)' }}> <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)' }}>
Cliquez sur un service pour découvrir toutes ses fonctionnalités Cliquez sur un service pour découvrir toutes ses fonctionnalités
</p> </p>
@ -29,28 +29,28 @@ export const ServicesSection: React.FC<ServicesSectionProps> = ({ services, onSe
{services.map((service) => ( {services.map((service) => (
<div <div
key={service.name} 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-3 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-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"
onClick={() => onServiceClick(service)} onClick={() => onServiceClick(service)}
> >
{/* Icon */} {/* Icon */}
<div className="mb-6 w-20 h-20 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-105 transition-transform duration-300 mx-auto"> <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">
{service.icon} {service.icon}
</div> </div>
{/* Service name */} {/* Service name */}
<h3 className="text-2xl font-bold text-banquise-gray mb-4 font-heading text-center group-hover:text-banquise-blue-lightest transition-colors duration-300"> <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">
{service.name} {service.name}
</h3> </h3>
{/* Short teaser description */} {/* Short teaser description */}
<p className="text-banquise-gray/80 leading-relaxed mb-8 text-center text-sm"> <p className="text-banquise-gray/80 leading-relaxed mb-8 text-center">
{service.description.split('.')[0]}. {service.description.split('.')[0]}.
</p> </p>
{/* CTA */} {/* CTA */}
<div className="flex items-center justify-center text-banquise-blue-light font-bold text-sm group-hover:text-banquise-blue-lightest transition-colors duration-300"> <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 Découvrir toutes les fonctionnalités
<span className="ml-2 transition-transform duration-300 group-hover:translate-x-1">→</span> <span className="ml-2 text-lg transition-transform duration-300 group-hover:translate-x-2">→</span>
</div> </div>
{/* Subtle hover effect */} {/* Subtle hover effect */}

32
banquise-website/src/components/sections/TechFeaturesSection.tsx
View File

@ -1,45 +1,45 @@
import React from 'react'; import React from 'react';
export const TechFeaturesSection: React.FC = () => ( export const TechFeaturesSection: React.FC = () => (
<section className="pt-12 pb-16 relative z-2 w-full max-w-6xl mx-auto px-8"> <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> <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-4 text-center font-heading font-bold tracking-tight" style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)' }}> <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)' }}>
Notre Infrastructure Notre Infrastructure
</h2> </h2>
<p className="text-banquise-gray text-xl opacity-90 mb-14 max-w-4xl text-center mx-auto" style={{ textShadow: '0 1px 3px rgba(0, 0, 0, 0.2)' }}> <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)' }}>
Une infrastructure robuste et sécurisée pour vos projets les plus exigeants Une infrastructure robuste et sécurisée pour vos projets les plus exigeants
</p> </p>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 w-full"> <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-2 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 hover:shadow-xl hover:border-banquise-blue-lightest/50"> <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-18 h-18 flex items-center justify-center rounded-2xl shadow-lg"> <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> </div>
<h3 className="text-xl mb-4 text-banquise-gray font-heading font-semibold">Serveurs performants</h3> <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>
<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> <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>
<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-2 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 hover:shadow-xl hover:border-banquise-blue-lightest/50"> <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-18 h-18 flex items-center justify-center rounded-2xl shadow-lg"> <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> </div>
<h3 className="text-xl mb-4 text-banquise-gray font-heading font-semibold">Stockage sécurisé</h3> <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>
<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> <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>
<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-2 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 hover:shadow-xl hover:border-banquise-blue-lightest/50"> <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-18 h-18 flex items-center justify-center rounded-2xl shadow-lg"> <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> </div>
<h3 className="text-xl mb-4 text-banquise-gray font-heading font-semibold">Réseau optimisé</h3> <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>
<p className="text-banquise-gray/80 leading-relaxed text-sm">Architecture réseau à haute disponibilité avec une faible latence pour vos applications critiques</p> <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>
<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-2 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 hover:shadow-xl hover:border-banquise-blue-lightest/50"> <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-18 h-18 flex items-center justify-center rounded-2xl shadow-lg"> <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> </div>
<h3 className="text-xl mb-4 text-banquise-gray font-heading font-semibold">Sécurité renforcée</h3> <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>
<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> <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>
</div> </div>

10
banquise-website/src/components/ui/AccordionItem.tsx
View File

@ -9,17 +9,17 @@ interface AccordionItemProps {
} }
export const AccordionItem: React.FC<AccordionItemProps> = ({ title, children, isOpen, onToggle }) => ( export const AccordionItem: React.FC<AccordionItemProps> = ({ title, children, isOpen, onToggle }) => (
<div className={`bg-banquise-blue-dark/10 rounded-xl overflow-hidden border border-banquise-blue-lightest/20 transition-all duration-300 shadow-sm ${isOpen ? 'shadow-lg' : ''} hover:bg-banquise-blue-dark/20 hover:shadow-md`}> <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 <div
className="p-5 cursor-pointer flex items-center justify-between font-semibold text-banquise-gray bg-banquise-blue-dark/20 transition-all duration-200 text-lg select-none hover:bg-banquise-blue/20" 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"
onClick={onToggle} onClick={onToggle}
> >
{title} <span className="flex items-center">{title}</span>
<span className={`text-xl transition-transform duration-300 text-banquise-blue-lightest ${isOpen ? 'rotate-180' : ''}`}> <span className={`text-2xl transition-transform duration-300 text-banquise-blue-lightest ${isOpen ? 'rotate-180' : ''}`}>
▼ ▼
</span> </span>
</div> </div>
<div className={`transition-all duration-500 overflow-hidden bg-banquise-blue-dark/5 ${isOpen ? 'max-h-1000 p-6' : 'max-h-0'}`}> <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="text-banquise-gray/90 leading-relaxed">
{children} {children}
</div> </div>