adds LIghtning Talks page. updates home page. modifies unit test to look for Meetup Link as a button

jsconfig.json

@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+      "target": "es6",
+      "module": "commonjs",
+      "checkJs": true,
+      "esModuleInterop": true,
+      "allowSyntheticDefaultImports": true,
+      "baseUrl": "./",
+      "paths": {
+        "@/*": ["src/*"]
+      },
+      "lib": ["es6", "dom"]
+    },
+    "exclude": ["node_modules", "**/node_modules/*"]
+  }
+

src/assets/flexboxgrid.css

@@ -532,6 +532,7 @@
     -webkit-box-flex: 0;
     -ms-flex: 0 0 auto;
     flex: 0 0 auto;
+    font-size: 1.3rem;
     padding-right: 0.5rem;
     padding-left: 0.5rem;
   }

src/components/Navigation.vue

@@ -1,10 +1,13 @@
 <template>
   <nav>
     <div class="row center-xs">
-      <div class="col-xs-6 col-md-2 link-space">
+      <div class="col-xs-4 col-md-2">
         <RouterLink :to="{name: 'home'}">Home page</RouterLink>
       </div>
-      <div class="col-xs-6 col-md-2">
+      <div class="col-xs-4 col-md-2">
+        <RouterLink :to="{name: 'lightningtalks'}">Lightning Talks</RouterLink>
+      </div>
+      <div class="col-xs-4 col-md-2">
         <RouterLink :to="{name: 'code-of-conduct'}">Code of Conduct</RouterLink>
       </div>
     </div>
@@ -13,8 +16,6 @@
         <img src="../assets/img/bcc_banner_long.svg" alt="Baltimore Code & Coffee logo"/>
       </div>
     </div>
-    <!-- Maybe we'll need this later, leaving it in for now -->
-    <!--        <RouterLink to="/">Home</RouterLink>-->
   </nav>
 </template>
 

src/router/index.js

@@ -14,6 +14,11 @@ const router = createRouter({
       name: 'code-of-conduct',
       component: () => import('../views/CodeOfConduct.vue'),
     },
+    {
+      path: '/lightningtalks',
+      name: 'lightningtalks',
+      component: () => import('../views/LightningTalks.vue'),
+    },
     {
       path: '/anonymous-report',
       name: 'report',

src/views/HomeView.test.js

@@ -10,12 +10,12 @@ describe("Home view component", () => {
     afterEach(() => {
         cleanup();
     });
-
-    it("contains a link to the meet up", () => {
-        // Should throw an error if we don't have the link to the slack
-        screen.getByRole("link", {name: "Meet Up"});
+    
+    it("contains a link to the Meet Up page", () => {
+        // This will throw an error if the link with text "Meet Up page" is not found
+        screen.getByRole("link", { name: /meet up page/i });
     });
-
+    
     it("contains a link to the baltimore tech slack", () => {
         // Should throw an error if we don't have the link to the slack
         screen.getByRole("link", {name: "Baltimore Tech Slack"});

src/views/HomeView.vue

@@ -1,28 +1,112 @@
 <template>
-  <div>
-    <div class="row">
-      <div class="col-xs-12 center-xs">
-        <p>Check out our next <a href="https://www.meetup.com/baltimore-code-and-coffee/events/" target="_blank">Meet Up</a>.</p>
-        <p>Join the conversation on the <a href="https://slofile.com/slack/baltimoretech" target="_blank">Baltimore Tech Slack</a>. (Click on the +Join button)</p>
+  <div class="event-page">
+
+    <div class="content">
+      <p>Welcome to our community gathering, a space where professionals, students, hobbyists, and dabblers come together to share work, projects, questions, or just to connect. Whether you're a technical person or tech-adjacent, we welcome you to join us.</p>
+
+      <div class="info-section">
+        <h1>Join Us!</h1>
+        <div class="call-to-action">
+          <a href="https://www.meetup.com/baltimore-code-and-coffee/events/" target="_blank" class="meetup-link">Meet Up page</a>
+          <a href="https://slofile.com/slack/baltimoretech" target="_blank" class="slack-link">Baltimore Tech Slack</a>
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col directions">
+
+      <div class="venue-directions">
+        <h2>Directions to Digital Harbor Foundation</h2>
+        <p><strong>Address:</strong> 1045 Light Street, Federal Hill</p>
+        <p><strong>Parking:</strong> Available at the back of the building or metered street parking. Alternatively, the West Street Garage is nearby.</p>
+        <p><strong>Public Transport:</strong> The free Charm City Circulator bus is an excellent option for local residents.</p>
+        <p><strong>Accessibility:</strong> Entry is through the main door on Light Street. If closed, ring the doorbell.</p>
+      </div>
+
+      <div class="venue-directions">
         <h2>Directions to Spark</h2>
-        <p>Spark is located in the heart of Power Plant Live in Baltimore City's Inner Harbor.</p>
-        <p>You can park at 15 Frederick St then follow the stairs/elevator down to the first floor of the Ram's Head. Go thru the hallway until you are inside of Power Plant then make a left. We are next to the ClueRoom. There will be a number to text once you arrive for someone to let you in.</p>
+        <p><strong>Address:</strong> 15 Frederick St, Inner Harbor</p>
+        <p><strong>Parking:</strong> Options include the parking lot at Frederick St, metered street parking, or the West Street Garage.</p>
+        <p><strong>Public Transport:</strong> Consider the Charm City Circulator for a convenient, free ride.</p>
+        <p><strong>Accessibility:</strong> Enter through the hallway at the first floor of the Ram's Head. If the main door is closed, instructions for entry will be provided on-site.</p>
       </div>
     </div>
   </div>
 </template>
 
-
 <style lang="scss">
-  @import "../assets/globals";
-  @import "../assets/theme/color_palette";
-  @import "../assets/theme/screen_sizes";
+@import "../assets/globals";
+@import "../assets/theme/color_palette";
+@import "../assets/theme/screen_sizes";
+
+.event-page {
+  display: flex;
+  justify-content: center; /* Center .content horizontally */
+  height: 100%; /* Full height to enable centering */
+
+  .content {
+    width: 65%; /* Set the width to 50% of its parent */
+    margin: auto; /* Centering within the page */
+    font-size: 1.3rem; /* Increased font size */
+    line-height: 2; /* Double line spacing */
+    text-align: left; /* Align the text to the left */
 
-  .directions {
-    padding: 0 30px 30px 30px;
+    .info-section {
+      text-align: center;
+      margin: 40px 0;
+
+      h1 {
+        margin-bottom: 10px;
+      }
+
+      p {
+        margin-bottom: 20px;
+      }
+    }
+
+    .call-to-action {
+      display: flex;
+      justify-content: center;
+      gap: 20px;
+      margin-top: 10px;
+
+      .meetup-link, .slack-link {
+        background-color: $midnight_blue1;
+        color: white;
+        padding: 15px 20px;
+        border-radius: 5px;
+        font-size: 1.6rem;
+        text-decoration: none;
+        transition: background-color 0.3s;
+
+        &:hover {
+          background-color: darken($midnight_blue1, 10%);
+        }
+      }
+    }
+
+    .venue-directions {
+      padding: 10px;
+      border-bottom: 1px solid #eee;
+
+      h2 {
+        color: $midnight_blue1;
+        margin-bottom: 10px;
+        font-size: 2rem;
+      }
+
+      p {
+        margin-bottom: 5px;
+        padding: 5px
+        strong {
+          font-weight: bold;
+        }
+      }
+    }
   }
-</style>
+
+  @media (orientation: portrait) {
+      .content {
+        width: 100%; /* Full width in portrait mode */
+        padding: 0 10px; /* Add padding to not touch the very edge of the screen */
+      }
+    }
+}
+</style>

src/views/LightningTalks.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="lightning-talks">
+    <h1 class="title">⚡ Lightning Talks in Baltimore ⚡</h1>
+
+    <div class="intro">
+      <p>Join the vibrant and dynamic series of Lightning Talks hosted at Baltimore's most innovative spaces like
+        <strong>Fast Forward University, Spark, and Betamore.</strong></p>
+      <p>Engage with local tech enthusiasts, entrepreneurs, and professionals in a series of rapid, insightful
+        presentations.</p>
+    </div>
+
+    <div class="sponsor-banner">
+      <img src="../assets/img/smartlogic.svg" alt="Sponsored by SmartLogic">
+      <p class="sponsor-text">Sponsored by SmartLogic</p>
+    </div>
+
+    <h2 class="section-title">Featured Talk</h2>
+    <p>Discover the three kinds of data with Julian Loiacono in this example talk:</p>
+    <div class="video-embed">
+      <iframe width="560" height="315" src="https://www.youtube.com/embed/-o1Wm2MaK3w" title="YouTube video player"
+        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen></iframe>
+    </div>
+
+    <div class="talk-requirements">
+      <h2 class="section-title">Talk Requirements</h2>
+      <b>Duration:</b> Max 10 minutes
+      <br>
+      <b>Q&A:</b> Max 5 minutes
+      <br>
+      <br>
+    </div>  
+    <div class="talk-requirements">
+      <a href="LINK_TO_SIGNUP_FORM" target="_blank" class="signup-btn">Sign Up for a Lightning Talk</a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LightningTalks',
+  // component setup and logic go here
+};
+</script>
+
+
+<style lang="scss">
+@import "../assets/theme/color_palette";
+
+.lightning-talks {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  max-width: 800px;
+  margin: auto;
+  padding: 20px;
+}
+
+.title {
+  text-align: center;
+  font-weight: bold;
+  color: $midnight_blue1;
+  margin-bottom: 10px;
+}
+
+.intro p,
+.sponsor-text {
+  text-align: center;
+  line-height: 1.6;
+  font-size: 1.3rem;
+}
+
+.section-title {
+  color: $midnight_blue1;
+  text-align: center;
+  margin-bottom: 15px;
+  font-size: 2rem;
+}
+
+.sponsor-banner img {
+  max-width: 100%;
+  height: auto;
+}
+
+.sponsor-text {
+  margin-top: 10px;
+  font-style: italic;
+}
+
+.video-embed iframe {
+  max-width: 100%;
+  border: none;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.talk-requirements {
+  font-size: 2rem;
+  text-align: center;
+  padding: 0;
+  margin-bottom: 3px;
+
+}
+
+.signup-btn {
+  margin-top: 20px;
+  background-color: $midnight_blue1;
+  color: white;
+  padding: 12px 40px;
+  text-decoration: none;
+  border-radius: 5px;
+  font-size: 3rem;
+  transition: background-color 0.3s ease;
+  font-weight: bold;
+  margin-bottom: 50px;
+  margin-top:140px;
+}
+
+.signup-btn:hover {
+  background-color: $midnight_blue1;
+  font-size: 3rem;
+}
+</style>