211 lines
12 KiB
TypeScript
211 lines
12 KiB
TypeScript
import React from 'react';
|
|
import { AccordionItem } from '@/components/ui/AccordionItem';
|
|
import { URLS } from '@/lib/config/constants';
|
|
import { Target, Settings, HelpCircle, Users, MessageCircle, Rocket, BookOpen, GitBranch, Gamepad2, Bird, Building, Mail, Cloud } from 'lucide-react';
|
|
|
|
interface AboutSectionProps {
|
|
openAccordion: string | null;
|
|
toggleAccordion: (title: string) => void;
|
|
}
|
|
|
|
export const AboutSection: React.FC<AboutSectionProps> = ({ openAccordion, toggleAccordion }) => (
|
|
<section id="about" className="py-24 md:py-32 px-4 sm:px-6 lg:px-8 bg-white">
|
|
<div className="max-w-6xl mx-auto">
|
|
{/* Header de section moderne */}
|
|
<div className="text-center mb-20">
|
|
{/* Séparateur visuel */}
|
|
<div className="w-24 h-1.5 bg-gradient-to-r from-blue-600 to-blue-400 rounded-full mx-auto mb-8" />
|
|
|
|
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-6 leading-tight">
|
|
À Propos de La Banquise
|
|
</h2>
|
|
<p className="text-lg md:text-xl text-gray-700 max-w-4xl mx-auto leading-relaxed font-medium">
|
|
Une communauté passionnée qui propose des services d'hébergement et des outils collaboratifs pour les développeurs et les gamers.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Section FAQ avec design moderne */}
|
|
<div className="space-y-8">
|
|
<h3 className="text-2xl md:text-3xl font-bold text-gray-800 mb-12 flex items-center justify-center">
|
|
<div className="mr-4 w-10 h-10 bg-gradient-to-r from-blue-600 to-blue-400 rounded-xl flex items-center justify-center">
|
|
<HelpCircle className="w-6 h-6 text-white" strokeWidth={2} />
|
|
</div>
|
|
<span>Questions Fréquentes</span>
|
|
</h3>
|
|
|
|
<AccordionItem
|
|
title={
|
|
<div className="flex items-center">
|
|
<div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center text-white mr-3">
|
|
<Target className="w-5 h-5" strokeWidth={2} />
|
|
</div>
|
|
Notre Mission
|
|
</div>
|
|
}
|
|
isOpen={openAccordion === "mission"}
|
|
onToggle={() => toggleAccordion("mission")}
|
|
>
|
|
<div className="space-y-6 p-6 bg-gray-50 rounded-xl">
|
|
<p className="text-gray-700 leading-relaxed">
|
|
Former les étudiants au déploiement et à la gestion d'une infrastructure, et de maîtriser des technologies entreprise grade.
|
|
Cela permet de fournir une plateforme stable et accessible pour héberger vos projets, partager vos connaissances et jouer ensemble !
|
|
</p>
|
|
<p className="text-gray-700 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-3 mt-6">
|
|
<span className="bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-semibold border border-blue-200">Collaboration</span>
|
|
<span className="bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-semibold border border-blue-200">Innovation</span>
|
|
<span className="bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-semibold border border-blue-200">Accessibilité</span>
|
|
</div>
|
|
</div>
|
|
</AccordionItem>
|
|
|
|
<AccordionItem
|
|
title={
|
|
<div className="flex items-center">
|
|
<div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center text-white mr-3">
|
|
<Settings className="w-5 h-5" strokeWidth={2} />
|
|
</div>
|
|
Nos Services
|
|
</div>
|
|
}
|
|
isOpen={openAccordion === "services"}
|
|
onToggle={() => toggleAccordion("services")}
|
|
>
|
|
<div className="space-y-6 p-6 bg-gray-50 rounded-xl">
|
|
<div className="grid gap-6 md:grid-cols-2">
|
|
{/* Cartes de services avec design moderne */}
|
|
<div className="flex items-start space-x-4 p-6 bg-white rounded-xl shadow-lg border border-gray-200 hover:shadow-xl transition-all duration-300">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white shadow-lg">
|
|
<BookOpen className="w-6 h-6" strokeWidth={2} />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-gray-900 mb-2 text-lg">Wiki</h4>
|
|
<p className="text-gray-600">Documentation collaborative et guides détaillés</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start space-x-4 p-6 bg-white rounded-xl shadow-lg border border-gray-200 hover:shadow-xl transition-all duration-300">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white shadow-lg">
|
|
<GitBranch className="w-6 h-6" strokeWidth={2} />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-gray-900 mb-2 text-lg">Gitea</h4>
|
|
<p className="text-gray-600">Gestion de versions Git auto-hébergée</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start space-x-4 p-6 bg-white rounded-xl shadow-lg border border-gray-200 hover:shadow-xl transition-all duration-300">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white shadow-lg">
|
|
<Gamepad2 className="w-6 h-6" strokeWidth={2} />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-gray-900 mb-2 text-lg">Panel de Jeux</h4>
|
|
<p className="text-gray-600">Interface de gestion pour serveurs de jeux</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start space-x-4 p-6 bg-white rounded-xl shadow-lg border border-gray-200 hover:shadow-xl transition-all duration-300">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white shadow-lg">
|
|
<Bird className="w-6 h-6" strokeWidth={2} />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-gray-900 mb-2 text-lg">Pelican</h4>
|
|
<p className="text-gray-600">Générateur de sites statiques</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start space-x-4 p-6 bg-white rounded-xl shadow-lg border border-gray-200 hover:shadow-xl transition-all duration-300">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white shadow-lg">
|
|
<Building className="w-6 h-6" strokeWidth={2} />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-gray-900 mb-2 text-lg">Intranet</h4>
|
|
<p className="text-gray-600">Espace privé de l'association</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start space-x-4 p-6 bg-white rounded-xl shadow-lg border border-gray-200 hover:shadow-xl transition-all duration-300">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white shadow-lg">
|
|
<Mail className="w-6 h-6" strokeWidth={2} />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-gray-900 mb-2 text-lg">Webmail</h4>
|
|
<p className="text-gray-600">Service de messagerie électronique</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start space-x-4 p-6 bg-white rounded-xl shadow-lg border border-gray-200 hover:shadow-xl transition-all duration-300 md:col-span-2">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white shadow-lg">
|
|
<Cloud className="w-6 h-6" strokeWidth={2} />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-gray-900 mb-2 text-lg">OpenCloud</h4>
|
|
<p className="text-gray-600">Plateforme cloud collaborative pour tous vos besoins</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p className="text-gray-600 mt-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
|
|
<strong className="text-blue-800 flex items-center">
|
|
<Settings className="w-5 h-5 mr-2" strokeWidth={2} />
|
|
Tous nos services
|
|
</strong> sont maintenus avec soin et régulièrement mis à jour pour garantir une expérience optimale.
|
|
</p>
|
|
</div>
|
|
</AccordionItem>
|
|
|
|
<AccordionItem
|
|
title={
|
|
<div className="flex items-center">
|
|
<div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center text-white mr-3">
|
|
<Users className="w-5 h-5" strokeWidth={2} />
|
|
</div>
|
|
Rejoindre l'association
|
|
</div>
|
|
}
|
|
isOpen={openAccordion === "community"}
|
|
onToggle={() => toggleAccordion("community")}
|
|
>
|
|
<div className="space-y-8 p-6 bg-gray-50 rounded-xl">
|
|
<p className="text-gray-700 text-lg leading-relaxed">
|
|
Rejoignez notre serveur Discord pour rejoindre l'asso, échanger avec nous, obtenir de l'aide et rester informé des dernières nouveautés !
|
|
</p>
|
|
|
|
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 border-2 border-blue-200 rounded-2xl p-8">
|
|
<h4 className="font-bold text-gray-900 mb-6 flex items-center text-xl">
|
|
<div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center text-white mr-3">
|
|
<MessageCircle className="w-5 h-5" strokeWidth={2} />
|
|
</div>
|
|
Comment rejoindre l'asso ?
|
|
</h4>
|
|
<ul className="space-y-4 text-gray-700 mb-8">
|
|
<li className="flex items-center text-lg">
|
|
<span className="w-2 h-2 bg-blue-500 rounded-full mr-4"></span>
|
|
Créez un ticket banquise
|
|
</li>
|
|
<li className="flex items-center text-lg">
|
|
<span className="w-2 h-2 bg-blue-500 rounded-full mr-4"></span>
|
|
Donnez votre login EPITA ou expliquez votre situation
|
|
</li>
|
|
<li className="flex items-center text-lg">
|
|
<span className="w-2 h-2 bg-blue-500 rounded-full mr-4"></span>
|
|
Un modérateur validera votre demande et vous donnera accès aux salons discord de l'asso !
|
|
</li>
|
|
</ul>
|
|
|
|
<a
|
|
href={URLS.social.discord}
|
|
className="inline-flex items-center justify-center px-8 py-4 text-lg font-bold text-white bg-gradient-to-r from-blue-600 to-blue-500 rounded-xl shadow-xl hover:shadow-2xl hover:from-blue-700 hover:to-blue-600 transition-all duration-300 transform hover:scale-105 border-2 border-blue-600/20"
|
|
>
|
|
<Rocket className="w-6 h-6 mr-3" strokeWidth={2} />
|
|
Rejoindre Discord
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</AccordionItem>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|