123 lines
6.9 KiB
TypeScript
123 lines
6.9 KiB
TypeScript
import React from 'react';
|
|
import { AccordionItem } from '../ui/AccordionItem';
|
|
|
|
interface AboutSectionProps {
|
|
openAccordion: string | null;
|
|
toggleAccordion: (title: string) => void;
|
|
}
|
|
|
|
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">
|
|
<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)' }}>
|
|
À 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)' }}>
|
|
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
|
|
</h3>
|
|
|
|
<AccordionItem
|
|
title="🎯 Notre Mission"
|
|
isOpen={openAccordion === "mission"}
|
|
onToggle={() => toggleAccordion("mission")}
|
|
>
|
|
<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.
|
|
</p>
|
|
<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.
|
|
</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
|
|
title="🛠️ Nos Services"
|
|
isOpen={openAccordion === "services"}
|
|
onToggle={() => toggleAccordion("services")}
|
|
>
|
|
<div className="space-y-6">
|
|
<div className="grid gap-4">
|
|
<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">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.
|
|
</p>
|
|
</div>
|
|
</AccordionItem>
|
|
|
|
<AccordionItem
|
|
title="🤝 Rejoindre la Communauté"
|
|
isOpen={openAccordion === "community"}
|
|
onToggle={() => toggleAccordion("community")}
|
|
>
|
|
<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.
|
|
</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
|
|
href="https://discord.gg/labanquise"
|
|
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-3 text-lg">🚀</span>
|
|
Rejoindre Discord
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</AccordionItem>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|