156 lines
8.5 KiB
TypeScript
156 lines
8.5 KiB
TypeScript
import React from 'react';
|
|
import { AccordionItem } from '@/components/ui/AccordionItem';
|
|
import { URLS } from '@/lib/config/constants';
|
|
import { commonStyles } from '@/lib/styles/components';
|
|
|
|
interface AboutSectionProps {
|
|
openAccordion: string | null;
|
|
toggleAccordion: (title: string) => void;
|
|
}
|
|
|
|
export const AboutSection: React.FC<AboutSectionProps> = ({ openAccordion, toggleAccordion }) => (
|
|
<section id="about" className="relative py-16 sm:py-20 md:py-24 px-4 sm:px-6 md:px-8 z-2 w-full box-border">
|
|
<div className="max-w-4xl mx-auto">
|
|
{/* Header */}
|
|
<div className="text-center mb-12 sm:mb-16 md:mb-20">
|
|
<h2 className={`${commonStyles.text.headingXl} mb-6 sm:mb-8 px-2`} style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)' }}>
|
|
À Propos de La Banquise
|
|
</h2>
|
|
<p className={`${commonStyles.text.muted} text-lg sm:text-xl max-w-3xl mx-auto px-2`} 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-4 sm:space-y-6">
|
|
<h3 className={`${commonStyles.text.headingLg} mb-8 sm:mb-12 flex items-center justify-center px-2`}>
|
|
<span className="text-2xl sm:text-3xl mr-3">❓</span>
|
|
<span className="text-center">Questions Fréquentes</span>
|
|
</h3>
|
|
|
|
<AccordionItem
|
|
title="🎯 Notre Mission"
|
|
isOpen={openAccordion === "mission"}
|
|
onToggle={() => toggleAccordion("mission")}
|
|
>
|
|
<div className="space-y-4">
|
|
<p className={commonStyles.text.muted}>
|
|
Former les étudiants au déploiment et a la gestion d'une infra, et de maitriser 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={commonStyles.text.muted}>
|
|
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 ${commonStyles.gradients.card} rounded-xl ${commonStyles.cards.base}`}>
|
|
<div className={`${commonStyles.icons.small} ${commonStyles.gradients.primaryBr} 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 ${commonStyles.gradients.card} rounded-xl ${commonStyles.cards.base}`}>
|
|
<div className={`${commonStyles.icons.small} ${commonStyles.gradients.primaryBr} 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 ${commonStyles.gradients.card} rounded-xl ${commonStyles.cards.base}`}>
|
|
<div className={`${commonStyles.icons.small} ${commonStyles.gradients.primaryBr} 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 className={`flex items-start space-x-4 p-4 ${commonStyles.gradients.card} rounded-xl ${commonStyles.cards.base}`}>
|
|
<div className={`${commonStyles.icons.small} ${commonStyles.gradients.primaryBr} font-bold`}>🐧</div>
|
|
<div>
|
|
<h4 className="font-semibold text-banquise-gray mb-1">Pelican</h4>
|
|
<p className="text-banquise-gray/80 text-sm">Générateur de sites statiques</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={`flex items-start space-x-4 p-4 ${commonStyles.gradients.card} rounded-xl ${commonStyles.cards.base}`}>
|
|
<div className={`${commonStyles.icons.small} ${commonStyles.gradients.primaryBr} font-bold`}>🏢</div>
|
|
<div>
|
|
<h4 className="font-semibold text-banquise-gray mb-1">Intranet</h4>
|
|
<p className="text-banquise-gray/80 text-sm">Espace privé de l'association</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={`flex items-start space-x-4 p-4 ${commonStyles.gradients.card} rounded-xl ${commonStyles.cards.base}`}>
|
|
<div className={`${commonStyles.icons.small} ${commonStyles.gradients.primaryBr} font-bold`}>📧</div>
|
|
<div>
|
|
<h4 className="font-semibold text-banquise-gray mb-1">Webmail</h4>
|
|
<p className="text-banquise-gray/80 text-sm">Service de messagerie électronique</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={`flex items-start space-x-4 p-4 ${commonStyles.gradients.card} rounded-xl ${commonStyles.cards.base}`}>
|
|
<div className={`${commonStyles.icons.small} ${commonStyles.gradients.primaryBr} font-bold`}>☁️</div>
|
|
<div>
|
|
<h4 className="font-semibold text-banquise-gray mb-1">OpenCloud</h4>
|
|
<p className="text-banquise-gray/80 text-sm">Plateforme cloud collaborative</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p className={`${commonStyles.text.muted} 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 l'association"
|
|
isOpen={openAccordion === "community"}
|
|
onToggle={() => toggleAccordion("community")}
|
|
>
|
|
<div className="space-y-6">
|
|
<p className={commonStyles.text.muted}>
|
|
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={`${commonStyles.cards.base} bg-gradient-to-r from-banquise-blue-dark/20 to-banquise-blue/10 rounded-2xl p-6`}>
|
|
<h4 className="font-semibold text-banquise-gray mb-3 flex items-center">
|
|
<span className="text-xl mr-2">💬</span>
|
|
Comment rejoindre l'asso ?
|
|
</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> Creez un ticket banquise</li>
|
|
<li className="flex items-center"><span className="text-banquise-blue-light mr-2">•</span> Donnez votre login EPITA ou expliquez votre situation</li>
|
|
<li className="flex items-center"><span className="text-banquise-blue-light mr-2">•</span> Un moderateur validera votre demande et vous donnera acces aux salons discord de l'asso !</li>
|
|
</ul>
|
|
|
|
<a
|
|
href={URLS.social.discord}
|
|
className={`${commonStyles.buttons.primary} ${commonStyles.gradients.primary} py-3 px-6 rounded-xl`}
|
|
>
|
|
<span className="mr-3 text-lg">🚀</span>
|
|
Rejoindre Discord
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</AccordionItem>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|