Added Contact Page

src/App.tsx

@@ -10,6 +10,7 @@ import Home from './pages/home/Home';
 import NotFound from './pages/404/404';
 import Partenaires from './pages/partenaires/Partenaires';
 import Projets from './pages/projets/Projets';
+import Contact from './pages/contact/Contact';
 
 const App: React.FC = () => {
 
@@ -21,6 +22,7 @@ const App: React.FC = () => {
             <Route path="/" element={<Home />} />
             <Route path="/partenaires" element={<Partenaires />} />
             <Route path="/projets" element={<Projets />} />
+            <Route path="/contact" element={<Contact />} />
             <Route path="*" element={<NotFound />} />
           </Routes>
       </div>

src/components/contact/contact.css

@@ -0,0 +1,62 @@
+.contact-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 3em;
+}
+.contact {
+    padding: 2em;
+    background: var(--white);
+    box-shadow: var(--shadow);
+    border-radius: 15px;
+    width: 300px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    text-decoration: none;
+    gap: 3em;
+    transition-duration: .3s;
+}
+.contact:hover {
+    scale: 1.05;
+}
+.contact-icon {
+    font-size: 20px;
+}
+.contact-title {
+    font-size: 18px;
+    font-weight: 600;
+}
+.contact-description {
+    font-size: 14px;
+    color: var(--darkGray);
+}
+.contact-link {
+    margin-top: 2em;
+    padding: 0.5em 1em;
+    background: var(--black);
+    color: var(--white);
+    border-radius: 999px;
+    width: fit-content;
+    font-size: 12px;
+    font-weight: 500;
+    text-transform: uppercase;
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+}
+.contact-link::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 100%;
+    background: var(--main);
+    transition-duration: .3s;
+    z-index: -1;
+    border-radius: 999px;
+}
+.contact:hover .contact-link::before {
+    width: 100%;
+}

src/components/contact/contact.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+import './contact.css';
+
+interface ContactProps {
+    Icon: React.ElementType;
+    title: string;
+    description: string;
+    link: {
+        location: string;
+        text: string;
+    };
+    alt?: string;
+}
+
+interface ContactListProps {
+    contacts: ContactProps[];
+}
+
+const Contact: React.FC<ContactProps> = ({ Icon, title, description, link }) => {
+    return (<a href={link.location} className={'contact'} target="_blank" rel="noreferrer">
+        <Icon className={'contact-icon'} />
+        <div className={'contact-content'}>
+            <h2 className={'contact-title'}>{title}</h2>
+            <p className={'contact-description'}>{description}</p>
+            <p className={'contact-link'}>{link.text}</p>
+        </div>
+    </a>)
+}
+
+export const ContactList: React.FC<ContactListProps> = ({ contacts }) => {
+    return (
+        <div className={'contact-list'}>
+            {contacts.map((contact, index) => (
+                <Contact key={index} {...contact} />
+            ))}
+        </div>
+    );
+}

src/pages/contact/Contact.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { Github, Youtube, Instagram, Handbag, MapPin, ChatBubbleEmpty } from 'iconoir-react';
+import { SocialNetworkList } from '../../components/socialnetwork/socialnetwork.tsx';
+
+import { ContactList } from '../../components/contact/contact.tsx';
+import { Banner } from '../../components/banner/banner.tsx';
+
+import isen_group_photo from '../../assets/isen_group_photo.png';
+
+const Contact: React.FC = () => {
+  return (
+    <>
+      <h1 className={'page-title'}>Nous Contacter</h1>
+      <ContactList
+        contacts={[
+          {
+            Icon: Handbag,
+            title: 'Devenir partenaire',
+            description: 'Devenez vous aussi partenaire de Modelec et soutenez notre projet.',
+            link: { location: 'mailto:partenariat@modelec.club', text: 'partenariat@modelec.club' }
+          },
+          {
+            Icon: MapPin,
+            title: 'Nous rendre visite',
+            description: '33 QUATER Avenue du Champ de Manoeuvre, 44470 Carquefou.',
+            link: { location: 'https://maps.app.goo.gl/UVK3KFS8Zrpx7x9e6', text: 'Voir sur Google Maps' } 
+          },
+          {
+            Icon: ChatBubbleEmpty,
+            title: 'Nous contacter',
+            description: 'Pour toute question ou demande, n\'hésitez pas à nous contacter.',
+            link: { location: 'mailto:contact@modelec.club', text: 'contact@modelec.club' }
+          }
+        ]}
+      />
+      <Banner
+        image={{ src: isen_group_photo, alt: 'Photo de groupe à l\'ISEN' }}
+        header={'Une question ?'}
+      >
+        Vous avez une <b>question</b> vis-à-vis de notre <u>club</u> ou de l'un de nos <u>projets</u> ? N'hésitez pas à nous <u>contacter</u> via l'une des méthode ci-dessus, nous serons ravis de vous répondre.
+      </Banner>
+      <h1 className={'page-title'}>Nos Réseaux</h1>
+      <SocialNetworkList
+        networks={[
+          { Icon: Instagram, name: 'modelec_isen', link: 'https://www.instagram.com/modelec_isen' },
+          { Icon: Youtube, name: 'modelec', link: 'https://youtube.com/modelec' },
+          { Icon: Github, name: 'modelec', link: 'https://www.github.com/modelec' },
+        ]}
+      />
+    </>
+  );
+};
+
+export default Contact;