172 lines
7.6 KiB
TypeScript
172 lines
7.6 KiB
TypeScript
import React from 'react';
|
|
import { AccordionItem } from '@/components/ui/AccordionItem';
|
|
import { SectionHeader } from '@/components/ui/SectionHeader';
|
|
import { ServiceCardAbout } from '@/components/ui/ServiceCardAbout';
|
|
import { AccordionTitle } from '@/components/ui/AccordionTitle';
|
|
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';
|
|
import { cn, commonClasses } from '@/lib/utils';
|
|
|
|
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 - factorisation */}
|
|
<SectionHeader
|
|
title={t.about.title}
|
|
subtitle={t.about.subtitle}
|
|
/>
|
|
|
|
{/* 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={<AccordionTitle icon={Target} title={t.about.mission.title} />}
|
|
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={<AccordionTitle icon={Settings} title={t.about.services.title} />}
|
|
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 - factorisation */}
|
|
<ServiceCardAbout
|
|
icon={BookOpen}
|
|
title={t.about.services.wiki.title}
|
|
description={t.about.services.wiki.description}
|
|
/>
|
|
|
|
<ServiceCardAbout
|
|
icon={GitBranch}
|
|
title={t.about.services.gitea.title}
|
|
description={t.about.services.gitea.description}
|
|
/>
|
|
|
|
<ServiceCardAbout
|
|
icon={Gamepad2}
|
|
title={t.about.services.panel.title}
|
|
description={t.about.services.panel.description}
|
|
/>
|
|
|
|
<ServiceCardAbout
|
|
icon={Bird}
|
|
title={t.about.services.pelican.title}
|
|
description={t.about.services.pelican.description}
|
|
/>
|
|
|
|
<ServiceCardAbout
|
|
icon={Building}
|
|
title={t.about.services.intranet.title}
|
|
description={t.about.services.intranet.description}
|
|
/>
|
|
|
|
<ServiceCardAbout
|
|
icon={Mail}
|
|
title={t.about.services.mails.title}
|
|
description={t.about.services.mails.description}
|
|
/>
|
|
|
|
<ServiceCardAbout
|
|
icon={Cloud}
|
|
title={t.about.services.opencloud.title}
|
|
description={t.about.services.opencloud.description}
|
|
colSpan={true}
|
|
/>
|
|
</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={<AccordionTitle icon={Users} title={t.about.community.title} />}
|
|
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={cn(
|
|
'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',
|
|
commonClasses.transition,
|
|
commonClasses.hoverScale,
|
|
'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>
|
|
);
|
|
};
|