215 lines
11 KiB
TypeScript
215 lines
11 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';
|
|
import { useTranslation } from '@/lib/hooks/useTranslation';
|
|
|
|
interface AboutSectionProps {
|
|
openAccordion: string | null;
|
|
toggleAccordion: (title: string) => void;
|
|
}
|
|
|
|
export const AboutSection: React.FC<AboutSectionProps> = ({ openAccordion, toggleAccordion }) => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<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">
|
|
{t.about.title}
|
|
</h2>
|
|
<p className="text-lg md:text-xl text-gray-700 max-w-4xl mx-auto leading-relaxed font-medium">
|
|
{t.about.subtitle}
|
|
</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>{t.about.faqTitle}</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>
|
|
{t.about.mission.title}
|
|
</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">
|
|
{t.about.mission.description1}
|
|
</p>
|
|
<p className="text-gray-700 leading-relaxed">
|
|
{t.about.mission.description2}
|
|
</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">{t.about.mission.tags.collaboration}</span>
|
|
<span className="bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-semibold border border-blue-200">{t.about.mission.tags.innovation}</span>
|
|
<span className="bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-semibold border border-blue-200">{t.about.mission.tags.accessibility}</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>
|
|
{t.about.services.title}
|
|
</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">{t.about.services.wiki.title}</h4>
|
|
<p className="text-gray-600">{t.about.services.wiki.description}</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">{t.about.services.gitea.title}</h4>
|
|
<p className="text-gray-600">{t.about.services.gitea.description}</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">{t.about.services.panel.title}</h4>
|
|
<p className="text-gray-600">{t.about.services.panel.description}</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">{t.about.services.pelican.title}</h4>
|
|
<p className="text-gray-600">{t.about.services.pelican.description}</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">{t.about.services.intranet.title}</h4>
|
|
<p className="text-gray-600">{t.about.services.intranet.description}</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">{t.about.services.mails.title}</h4>
|
|
<p className="text-gray-600">{t.about.services.mails.description}</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">{t.about.services.opencloud.title}</h4>
|
|
<p className="text-gray-600">{t.about.services.opencloud.description}</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} />
|
|
{t.about.services.title}
|
|
</strong> {t.about.services.note}
|
|
</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>
|
|
{t.about.community.title}
|
|
</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">
|
|
{t.about.community.description}
|
|
</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>
|
|
{t.about.community.howToJoin}
|
|
</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>
|
|
{t.about.community.steps.step1}
|
|
</li>
|
|
<li className="flex items-center text-lg">
|
|
<span className="w-2 h-2 bg-blue-500 rounded-full mr-4"></span>
|
|
{t.about.community.steps.step2}
|
|
</li>
|
|
<li className="flex items-center text-lg">
|
|
<span className="w-2 h-2 bg-blue-500 rounded-full mr-4"></span>
|
|
{t.about.community.steps.step3}
|
|
</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} />
|
|
{t.about.community.joinDiscord}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</AccordionItem>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|