Updated UI: Added navigation, speaker cards, team section, venue sect…

…ion, and mobile navigation.

package.json

@@ -9,9 +9,11 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@heroicons/react": "^2.1.5",
     "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18",
+    "swiper": "^11.1.14",
     "uuid": "^10.0.0"
   },
   "devDependencies": {

src/app/code-of-conduct/page.js

@@ -3,87 +3,103 @@ import Footer from '@/components/sections/Footer';
 
 export default function CodeOfConduct() {
   return (
-    <main className="container flex mx-auto px-5 py-2 flex-col">
-      <Header />
-      <div className="flex flex-col">
-        <h1 className="text-3xl font-bold mb-4">Code of Conduct</h1>
-        <p className="mb-4">
-          Why do we have an official anti-harassment policy for GDG Montreal events?
-        </p>
-        <ul className="list-disc list-inside mb-4">
-          <li>
-            It sets expectations for behavior at the event. Simply having an anti-harassment policy can prevent harassment.
-          </li>
-          <li>
-            It encourages people to attend who have had bad experiences at other events.
-          </li>
-          <li>
-            It gives event staff/volunteers instructions on how to handle harassment quickly, with the minimum amount of disruption for the event.
-          </li>
-        </ul>
-        <p className="mb-4">
-          GDG Montreal Android is dedicated to providing a harassment-free event experience for everyone, regardless of:
-        </p>
-        <ul className="list-disc list-inside mb-4">
-          <li>gender</li>
-          <li>sexual orientation</li>
-          <li>disability</li>
-          <li>gender identity</li>
-          <li>age</li>
-          <li>race</li>
-          <li>religion</li>
-          <li>nationality</li>
-        </ul>
-        <p className="mb-4">
-          The above is not an exhaustive list — we do not tolerate harassment of event participants in any form.
-        </p>
-        <p className="mb-4">
-          Sexual language and imagery is not appropriate for any event venue, including talks. Event participants violating these rules may be expelled from the event, and even banned from future events at the discretion of the event organizers/management.
-        </p>
-        <p className="mb-4">
-          Harassment includes (but is not limited to):
-        </p>
-        <ul className="list-disc list-inside mb-4">
-          <li>offensive verbal comments related to gender, sexual orientation, disability, gender identity, age, race, religion</li>
-          <li>the use or display of sexual images in public spaces</li>
-          <li>deliberate intimidation</li>
-          <li>stalking</li>
-          <li>harassing photography or recording</li>
-          <li>sustained disruption of talks or other events</li>
-          <li>inappropriate physical contact</li>
-          <li>unwelcome sexual attention</li>
-        </ul>
-        <p className="mb-4">
-          Participants asked to stop any harassing behavior are expected to comply immediately.
-        </p>
-        <p className="mb-4">
-          Exhibiting partners and guest speakers are also subject to the anti-harassment policy. In particular, exhibitors and speakers should not use sexualized images, activities, or other material, or otherwise create a sexualized environment in their slide decks, exhibit material, exhibit staffing, promotional items or demo material.
-        </p>
-        <p className="mb-4">
-          If you are being harassed, notice that someone else is being harassed, or have any other concerns, please contact an organizer or event volunteer immediately. Organizers and event volunteers may be identified by t-shirts or special badges/lanyards. Organizers will investigate the issue and take appropriate action. This may include helping participants contact venue security or local law enforcement, provide escorts, or otherwise assist those experiencing harassment to feel safe for the duration of the event.
-        </p>
-        <h3 className="text-xl font-bold">
-          Contacts:
-        </h3>
-        <ul className="list-disc list-inside mb-4">
-          <li><a href="mailto:[email protected]">[email protected]</a></li>
-          <li><a href="mailto:[email protected]">[email protected]</a></li>
-          <li><a href="mailto:[email protected]">[email protected]</a></li>
-          <li><a href="mailto:[email protected]">[email protected]</a></li>
-          <li><a href="mailto:[email protected]">[email protected]</a></li>
-          <li><a href="mailto:[email protected]">[email protected]</a></li>
-        </ul>
-        <p className="mb-4">
-          Though we hope that we never have to invoke this policy, we believe that having this document helps everyone think a little more about how their actions and words affect the whole community, as well as individuals in the community.
-        </p>
-        <h2 className="text-2xl font-bold">
-          License and attribution
-        </h2>
-        <p className="mb-4">
-          This policy is licensed under the Creative Commons Zero license. This policy is based on several other policies, including the Ohio LinuxFest anti-harassment policy, written by Esther Filderman and Beth Lynn Eicher, and the Con Anti-Harassment Project. Mary Gardiner, Valerie Aurora, Sarah Smith, and Donna Benjamin generalized the policies and added supporting material. Many members of LinuxChix, Geek Feminism and other groups contributed to this work.
-        </p>
-      </div>
-      <Footer />
-    </main >
+
+    <div className="flex flex-col py-10">
+      <h1 className="text-3xl font-bold mb-4">Code of Conduct</h1>
+      <p className="mb-4">
+        Why do we have an official anti-harassment policy for GDG Montreal events?
+      </p>
+      <ul className="list-disc list-inside mb-4">
+        <li>
+          It sets expectations for behavior at the event. Simply having an anti-harassment policy can prevent
+          harassment.
+        </li>
+        <li>
+          It encourages people to attend who have had bad experiences at other events.
+        </li>
+        <li>
+          It gives event staff/volunteers instructions on how to handle harassment quickly, with the minimum amount of
+          disruption for the event.
+        </li>
+      </ul>
+      <p className="mb-4">
+        GDG Montreal Android is dedicated to providing a harassment-free event experience for everyone, regardless of:
+      </p>
+      <ul className="list-disc list-inside mb-4">
+        <li>gender</li>
+        <li>sexual orientation</li>
+        <li>disability</li>
+        <li>gender identity</li>
+        <li>age</li>
+        <li>race</li>
+        <li>religion</li>
+        <li>nationality</li>
+      </ul>
+      <p className="mb-4">
+        The above is not an exhaustive list — we do not tolerate harassment of event participants in any form.
+      </p>
+      <p className="mb-4">
+        Sexual language and imagery is not appropriate for any event venue, including talks. Event participants
+        violating these rules may be expelled from the event, and even banned from future events at the discretion of
+        the event organizers/management.
+      </p>
+      <p className="mb-4">
+        Harassment includes (but is not limited to):
+      </p>
+      <ul className="list-disc list-inside mb-4">
+        <li>offensive verbal comments related to gender, sexual orientation, disability, gender identity, age, race,
+          religion
+        </li>
+        <li>the use or display of sexual images in public spaces</li>
+        <li>deliberate intimidation</li>
+        <li>stalking</li>
+        <li>harassing photography or recording</li>
+        <li>sustained disruption of talks or other events</li>
+        <li>inappropriate physical contact</li>
+        <li>unwelcome sexual attention</li>
+      </ul>
+      <p className="mb-4">
+        Participants asked to stop any harassing behavior are expected to comply immediately.
+      </p>
+      <p className="mb-4">
+        Exhibiting partners and guest speakers are also subject to the anti-harassment policy. In particular, exhibitors
+        and speakers should not use sexualized images, activities, or other material, or otherwise create a sexualized
+        environment in their slide decks, exhibit material, exhibit staffing, promotional items or demo material.
+      </p>
+      <p className="mb-4">
+        If you are being harassed, notice that someone else is being harassed, or have any other concerns, please
+        contact an organizer or event volunteer immediately. Organizers and event volunteers may be identified by
+        t-shirts or special badges/lanyards. Organizers will investigate the issue and take appropriate action. This may
+        include helping participants contact venue security or local law enforcement, provide escorts, or otherwise
+        assist those experiencing harassment to feel safe for the duration of the event.
+      </p>
+      <h3 className="text-xl font-bold">
+        Contacts:
+      </h3>
+      <ul className="list-disc list-inside mb-4">
+        <li><a href="mailto:[email protected]">[email protected]</a></li>
+        <li><a href="mailto:[email protected]">[email protected]</a></li>
+        <li><a href="mailto:[email protected]">[email protected]</a></li>
+        <li><a href="mailto:[email protected]">[email protected]</a></li>
+        <li><a href="mailto:[email protected]">[email protected]</a></li>
+        <li><a href="mailto:[email protected]">[email protected]</a></li>
+      </ul>
+      <p className="mb-4">
+        Though we hope that we never have to invoke this policy, we believe that having this document helps everyone
+        think a little more about how their actions and words affect the whole community, as well as individuals in the
+        community.
+      </p>
+      <h2 className="text-2xl font-bold">
+        License and attribution
+      </h2>
+      <p className="mb-4">
+        This policy is licensed under the Creative Commons Zero license. This policy is based on several other policies,
+        including the Ohio LinuxFest anti-harassment policy, written by Esther Filderman and Beth Lynn Eicher, and the
+        Con Anti-Harassment Project. Mary Gardiner, Valerie Aurora, Sarah Smith, and Donna Benjamin generalized the
+        policies and added supporting material. Many members of LinuxChix, Geek Feminism and other groups contributed to
+        this work.
+      </p>
+    </div>
+
   );
 }

src/app/layout.js

@@ -1,6 +1,8 @@
 import GoogleAnalytics from '@/lib/GoogleAnalytics';
 import '@/styles/globals.css';
 import { Open_Sans } from 'next/font/google';
+import Header from '@/components/sections/Header';
+import Footer from '@/components/sections/Footer';
 
 const openSans = Open_Sans({
   weight: ['400', '700'], // Include the font weights you'll use
@@ -16,8 +18,13 @@ export const metadata = {
 export default function RootLayout({ children }) {
   return (<html lang="en">
     <body className={openSans.className}>
+    <Header />
+    <main className="container flex mx-auto py-2 flex-col flex-grow"> {/* Allow main content to expand */}
       {children}
-      <GoogleAnalytics />
+    </main>
+    <Footer />
+    <GoogleAnalytics />
     </body>
-  </html>);
+    </html>
+  );
 }

src/app/page.js

@@ -1,23 +1,18 @@
-import Header from '@/components/sections/Header';
 import EventHeader from '@/components/sections/EventHeader';
-import Speakers from '@/components/sections/Speakers';
 import Communities from '@/components/sections/Communities';
 import Sponsors from '@/components/sections/Sponsors';
 import EventPhotos from '@/components/sections/EventPhotos';
-import Footer from '@/components/sections/Footer';
+import { eventHeader, venue } from '@/data/data';
+import Venue from '@/components/sections/Venue';
 
 export default function Home() {
   return (
-    <main className="container flex mx-auto px-5 py-2 flex-col">
-      <Header />
-      <div className="flex flex-col gap-20">
-        <EventHeader />
-        <Speakers />
-        <EventPhotos />
-        <Sponsors />
-        <Communities />
-        <Footer />
-      </div>
-    </main>
+    <div className="flex flex-col justify-around gap-20">
+      <EventHeader eventData={eventHeader} />
+      <EventPhotos />
+      <Sponsors />
+      <Communities />
+      <Venue venueData={venue} />
+    </div>
   );
 }

src/components/sections/Speakers.js → src/app/speakers/page.js

@@ -16,7 +16,7 @@ const Speakers = () => {
   const speakers = selectedYear === 2023 ? speakers2023 : speakers2024;
 
   return (
-    <div className="flex flex-col gap-6 text-center items-center justify-center my-10">
+    <div id="speakers" className="flex flex-col gap-6 text-center items-center justify-center my-24">
       <TitleWithSubtitle
         title="Speakers"
         subTitle="Learn from the best in the industry. Our speakers are experts in their field and are excited to share their knowledge with you."
@@ -25,16 +25,14 @@ const Speakers = () => {
 
       <YearSelector years={[2023, 2024]} selectedYear={selectedYear} handleYearChange={handleYearChange} />
 
-      <ul className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 max-w-7xl mx-auto">
+      <ul className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 max-w-7xl mx-auto">
         {speakers.map(speaker => (
-          <li key={speaker.name} className="flex items-center">
+          <li key={speaker.name} className="flex items-start">
             <SpeakerCard speaker={speaker} />
           </li>
         ))}
       </ul>
-      <PillButton onClick={() => {
-        window.open('https://www.papercall.io/devfest-2024-mtl', '_blank');
-      }} label="Submit your proposal" />
+      <PillButton href="https://www.papercall.io/devfest-2024-mtl" label="Submit your proposal" />
     </div>
   );
 };

src/app/team/page.js

@@ -0,0 +1,26 @@
+import TitleWithSubtitle from '@/components/elements/TitleWithSubtitle';
+import PillButton from '@/components/elements/PillButton';
+import SpeakerCard from '@/components/elements/SpeakerCard';
+import { team } from '@/data/data';
+import TeamMemberCard from '@/components/elements/TeamMemberCard';
+
+export default function Home() {
+  return (
+    <div id="speakers" className="flex flex-col gap-6 text-center items-center justify-center my-24">
+      <TitleWithSubtitle
+        title="Team"
+        subTitle="GDG Montreal team is all composed of volunteers who think that empowering, encouraging and inspiring women in tech is important."
+        titleClassName="max-w-2xl"
+        subTitleClassName="max-w-xl" />
+
+      <ul className=" py-6 grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 gap-6 max-w-7xl mx-auto">
+        {team.map(member => (
+          <li key={member.name} className="flex items-start">
+            <TeamMemberCard member={member} />
+          </li>
+        ))}
+      </ul>
+
+    </div>
+  );
+}

src/components/elements/CommunityCard.js

@@ -11,7 +11,7 @@ const CommunityCard = ({ communities }) => {
           <a
             key={uuidv4()} // Add a unique key for each organizer
             href={organizer.website}
-            className="flex items-center justify-center bg-gray-400/5 p-8 sm:p-10"
+            className="flex items-center justify-center  p-8 sm:p-10"
           >
             <Image
               className="max-h-52 w-auto object-contain hover:opacity-80 transition-opacity hover:grayscale grayscale-0"