added speaker tab and images

Author: shansitads

public/assets/speakers/adina_wagner.jpg

@@ -4,6 +4,7 @@ import Navbar from "./components/Navbar";
 import Home from "./components/Home/Home";
 import Projects from "./components/Projects/Projects";
 import FAQ from "./components/Faq";
+import Speakers from "./components/Speakers/Speakers";
 import Footer from "./components/Footer";
 import Teams from './components/Team/Team';
 import Schedule from "./components/Schedule/Schedule";
@@ -38,6 +39,7 @@ function App() {
           <Route path="/projects" element={<Projects />} />
           <Route path="/team" element={<Teams />} />
           <Route path="/faq" element={<FAQ />} />
+          <Route path="/speakers" element={<Speakers />} />
           <Route path="*" element={<Navigate to="/" />} />
         </Routes>
         <Footer />

public/assets/speakers/james_booth.jpg

@@ -13,6 +13,8 @@ import {
 } from "react-icons/ai";
 import Button from "react-bootstrap/Button";
 import { CgGitFork } from "react-icons/cg";
+import { RiSpeakLine } from "react-icons/ri";
+
 
 function NavBar() {
   const [expand, updateExpanded] = useState(false);
@@ -75,6 +77,12 @@ function NavBar() {
               </Nav.Link>
             </Nav.Item>
 
+            <Nav.Item>
+              <Nav.Link as={Link} to="/speakers" onClick={() => updateExpanded(false)}>
+                <RiSpeakLine className="nav-icon" /> Speakers
+              </Nav.Link>
+            </Nav.Item>
+
             <Nav.Item>
               <Nav.Link as={Link} to="/team" onClick={() => updateExpanded(false)}>
                 <AiOutlineTeam className="nav-icon" /> Team

public/assets/speakers/jerome_lecoq.jpg

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Container, Row, Col } from 'react-bootstrap';
+import Particle from '../Particle';
+import speakerData from './speakerData';
+import './speakers.css';
+
+const SpeakerRow = ({ speaker, isEven }) => {
+    const Content = (
+        <Row className={`speaker-content ${isEven ? 'flex-row-reverse' : ''}`}>
+            <Col md={4} className="speaker-img-col">
+                <img
+                    src={speaker.imgPath}
+                    alt={speaker.name}
+                    className="speaker-img"
+                />
+            </Col>
+            <Col md={8} className="speaker-info-col">
+                <div className={`speaker-info ${isEven ? 'text-end' : 'text-start'}`}>
+                    <h2 className="speaker-name">{speaker.name}</h2>
+                    <p className="speaker-bio">{speaker.bio}</p>
+                </div>
+            </Col>
+        </Row>
+    );
+
+    if (speaker.link) {
+        return (
+            <div id={speaker.id} className="speaker-row clickable">
+                <a
+                    href={speaker.link}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="speaker-link"
+                >
+                    {Content}
+                </a>
+            </div>
+        );
+    }
+
+    return (
+        <div id={speaker.id} className="speaker-row">
+            {Content}
+        </div>
+    );
+};
+
+const SpeakerSection = ({ title, speakers }) => (
+    <div className="speaker-section-group">
+        <h2 className="speaker-category-heading">
+            {title}
+        </h2>
+        {speakers.map((speaker, index) => (
+            <SpeakerRow
+                key={speaker.id}
+                speaker={speaker}
+                isEven={index % 2 !== 0}
+            />
+        ))}
+    </div>
+);
+
+function Speakers() {
+    // Split speakers into keynote speakers and panelists
+    const keynoteSpeakers = speakerData.filter(speaker =>
+        speaker.id.startsWith('keynote-')
+    );
+
+    const panelists = speakerData.filter(speaker =>
+        speaker.id.startsWith('panelist-')
+    );
+
+    return (
+        <section>
+            <Container fluid className="speaker-section" id="speakers">
+                <Particle />
+                <Container>
+                    <h1 className="page-heading">
+                        Our <strong className="purple">Speakers</strong>
+                    </h1>
+
+                    {keynoteSpeakers.length > 0 && (
+                        <SpeakerSection
+                            title="Keynote Speakers"
+                            speakers={keynoteSpeakers}
+                        />
+                    )}
+
+                    {panelists.length > 0 && (
+                        <SpeakerSection
+                            title="Panelists"
+                            speakers={panelists}
+                        />
+                    )}
+                </Container>
+            </Container>
+        </section>
+    );
+}
+
+export default Speakers;