Add hackathon link section and style updates

.github/workflows/eslint.yml

@@ -5,6 +5,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.16.1
       - name: Install modules
         run: yarn
       - name: Run ESLint

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

components/AlumniHighlights.jsx

@@ -1,4 +1,5 @@
 import Image from 'next/image';
+
 import Heading from './Heading';
 import AlumniCarousel from './AlumniCarousel';
 import { UnderlineTypes } from '../utils/underlineType';

components/EventTileImage.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import Image from 'next/image';
+const EVENTS_IMAGE = 'w-40 h-1/3 md:w-full md:h-full rounded-3xl  relative';
+
+import { rgbDataURL } from '../utils/blurImage';
+
+export const EventTileImage = ({ image }) => {
+  return (
+    <div>
+      <div>
+        <Image
+          className={EVENTS_IMAGE}
+          src={`https:${image.fields.file.url}`}
+          alt={image.fields.title || 'Event image'}
+          width={400}
+          height={100}
+          placeholder="blur"
+          objectFit="cover"
+          blurDataURL={rgbDataURL()}
+        />
+      </div>
+    </div>
+  );
+};

components/EventsCarousel.jsx

@@ -4,38 +4,42 @@ import styles from '../components/RolesCarousel.module.css';
 import 'swiper/css/navigation';
 import TextSection from './TextSection';
 import Heading from './Heading';
-import Image from 'next/image';
+import { EventTileImage } from './EventTileImage';
 
-const CAROUSEL_CONTAINER = 'w-4/5 md:hidden swiper-button swiperContainer relative';
+const CAROUSEL_CONTAINER = 'w-4/5  md:hidden swiper-button swiperContainer relative';
 const ARROW_INIT = { left: 'swiper-button-prev', right: 'swiper-button-next' };
 const LEFT_NAVIGATION_ARROW = styles.swiperButtonPrev;
 const RIGHT_NAVIGATION_ARROW = styles.swiperButtonNext;
 
 const EVENT_TILE = 'flex flex-col h-96 bg-white rounded-3xl items-center px-4 justify-evenly';
-const EVENT_SVG = '/svgs/homepage/events.svg';
+const TILE_IMAGE_CONTAINER = 'flex flex-row justify-center md:flex-row md:justify-around lg:justify-center relative';
 
-const EventTile = ({ eventName, description }) => {
+const EventTile = ({ eventName, description, image }) => {
   const descriptionText = description.content[0].content[0].value || 'Invalid description';
 
   return (
     <div className={EVENT_TILE}>
-      <Heading classes="text-3xl font-medium" underlineType="None">
+      <Heading classes="p-0 text-lg font-medium" underlineType="None">
         {eventName}
       </Heading>
-      <Image src={EVENT_SVG} alt="event image" width={180} height={180} objectFit="cover" />
-      <TextSection classes="text-sm pb-10">{descriptionText}</TextSection>
+      <div className={TILE_IMAGE_CONTAINER}>
+        <div>
+          <EventTileImage image={image} />
+        </div>
+      </div>
+      <TextSection classes="text-xs sm:py-2 ">{descriptionText}</TextSection>
     </div>
   );
 };
 
-const EventCarousel = ({ event }) => {
+const EventCarousel = ({ upcomingEvent }) => {
   return (
     <div className={CAROUSEL_CONTAINER}>
       <div className={`${ARROW_INIT.left} ${LEFT_NAVIGATION_ARROW}`}></div>
       <Carousel navigation={{ prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next', clickable: true }}>
-        {event.map((event) => (
-          <SwiperSlide key={event.id}>
-            <EventTile {...event} />
+        {upcomingEvent.map((upcomingEvent) => (
+          <SwiperSlide key={upcomingEvent.id}>
+            <EventTile {...upcomingEvent} />
           </SwiperSlide>
         ))}
       </Carousel>

components/EventsTiles.jsx

@@ -1,41 +1,40 @@
 import TextSection from './TextSection';
 import Heading from './Heading';
-import Image from 'next/image';
+import { EventTileImage } from './EventTileImage';
 
 const EVENTS_TILES_CONTAINER = 'w-4/5 mx-auto flex flex-wrap md:flex hidden';
-const EVENT_TILE = 'flex flex-col h-96 bg-white rounded-3xl items-center px-4 justify-evenly';
-const EVENT_SVG = '/svgs/homepage/events.svg';
+const EVENT_TILE = 'flex flex-col size-full bg-white rounded-3xl items-center px-4 justify-evenly';
 
-const EventTile = ({ eventName, description }) => {
+const EventTile = ({ eventName, description, image }) => {
   const descriptionText = description.content[0].content[0].value;
   return (
     <div className={EVENT_TILE}>
-      <Heading classes="text-3xl font-medium" underlineType="None">
+      <Heading classes=" text-3xl py-2 font-medium" underlineType="None">
         {eventName}
       </Heading>
-      <Image src={EVENT_SVG} alt="event image" width={180} height={180} objectFit="cover" />
-      <TextSection classes="text-sm">{descriptionText}</TextSection>
+      <EventTileImage image={image} />
+      <TextSection classes=" md:text-md p-10">{descriptionText}</TextSection>
     </div>
   );
 };
 
-const EventsTiles = ({ event }) => {
+const EventsTiles = ({ upcomingEvent }) => {
   return (
     <div className={EVENTS_TILES_CONTAINER}>
       {/* First Column (One Large Row) */}
       <div className="w-full lg:w-1/2 p-4">
         <div className={`${EVENT_TILE} h-full`}>
-          {event.slice(0, 1).map((event) => (
-            <EventTile key={event.id} {...event} />
+          {upcomingEvent.slice(0, 1).map((upcomingEvent) => (
+            <EventTile key={upcomingEvent.id} {...upcomingEvent} />
           ))}
         </div>
       </div>
       {/* Second Column (Two Smaller Rows) */}
       <div className="w-full lg:w-1/2 flex flex-wrap">
-        {event.slice(1, 3).map((event) => (
-          <div key={event.id} className="w-full lg:h-1/2 p-4">
+        {upcomingEvent.slice(1, 3).map((upcomingEvent) => (
+          <div key={upcomingEvent.id} className="w-full lg:h-1/2 p-4">
             <div className={`${EVENT_TILE} `}>
-              <EventTile {...event} />
+              <EventTile {...upcomingEvent} />
             </div>
           </div>
         ))}

components/HackathonLink.jsx

@@ -0,0 +1,39 @@
+
+import Heading from './Heading';
+import { UnderlineTypes } from '../utils/underlineType';
+import TextSection from './TextSection';
+import Link from 'next/link';
+
+
+
+const HackathonLink = () => {
+    return (
+    <div className="flex flex-col items-center bg-orange z-0 pb-12 md:pb-16 lg:pb-20">
+        <div className="flex items-baseline space-x-4 mb-4 pt-16 px-10 md:px-24 lg:px-48">
+            <Heading classes="text-white text-[2.25rem]" underlineType={UnderlineTypes.PURPLE_SHORT_UNDERLINE}>
+            Join the Change at Our Hackathons: Hack the Change
+            </Heading>
+        </div>
+        <TextSection classes="text-white pb-5 z-10 px-10 md:px-24 lg:px-48 md:py-4">
+            Dive into collaborative innovation with Code the Change YYC's hackathons! Designed to empower 
+            student developers and create real-world impact, our hackathons offer an exciting opportunity 
+            to learn, build, and connect. Whether you're solving pressing challenges or sharpening your 
+            skills, there's a place for everyone.
+        </TextSection>
+        <TextSection classes="text-white pb-5 z-10 px-10 md:px-24 lg:px-48 md:py-4 font-medium">
+            Explore upcoming events, resources, and more at: {' '}
+        </TextSection>
+        <TextSection classes="text-white pb-10 z-20 px-10 md:px-24 lg:px-48 md:py-4">
+            <Link 
+                href="https://hackthechangeyyc.ca" 
+                target="_blank" 
+                rel="noopener noreferrer" 
+                className="text-blue font-semibold underline">
+                <span>hackthechangeyyc.ca</span>
+            </Link>
+       </TextSection>
+    </div>
+    );
+};
+
+export default HackathonLink;

components/HackathonTimeline.jsx

@@ -53,6 +53,7 @@ const HackathonTimeline = () => {
         {HACKATHONS.map((hackathon, index) => (
           <HackathonSection hackathon={hackathon} key={index} index={index}/>
         ))}
+
       </div>
     </div>
   );

components/UpcomingEvents.jsx

@@ -3,7 +3,7 @@ import EventsTiles from './EventsTiles';
 import Heading from './Heading';
 import { UnderlineTypes } from '../utils/underlineType';
 
-const UpcomingEvents = ({ event }) => {
+const UpcomingEvents = ({ upcomingEvent }) => {
   return (
     <div className="flex flex-col items-center bg-orange z-0 pb-12 md:pb-16 lg:pb-20">
       <div className="flex items-baseline space-x-4 mb-4">
@@ -12,8 +12,8 @@ const UpcomingEvents = ({ event }) => {
           Events
         </Heading>
       </div>
-      <EventsCarousel event={event} />
-      <EventsTiles event={event} />
+      <EventsCarousel upcomingEvent={upcomingEvent} />
+      <EventsTiles upcomingEvent={upcomingEvent} />
     </div>
   );
 };

data/hackathons.js

@@ -32,5 +32,8 @@ export const HACKATHONS = [
     topic: 'Climate Action',
     blurb: 'Our first ever hackathon! Shout out to Benevity for letting us hold it there.'
   },
+
 ];
 
+
+

data/projects.js

@@ -1,51 +1,60 @@
-import RubyForGood from "../public/images/projects/rfg.png";
-import YWCA from "../public/images/projects/ywca.png";
-import Mindfuel from "../public/images/projects/mindfuel.png";
-import AMHAC from "../public/images/projects/amhac.png";
-import AXS from "../public/images/projects/axs_map.png";
+import RubyForGood from '../public/images/projects/rfg.png';
+import YWCA from '../public/images/projects/ywca.png';
+import Mindfuel from '../public/images/projects/mindfuel.png';
+import AMHAC from '../public/images/projects/amhac.png';
+import AXS from '../public/images/projects/axs_map.png';
+import ScubaSeas from '../public/images/projects/ScubaSeas.png';
 
 export const projects = [
   {
     logo: RubyForGood,
-    name: "Ruby for Good CASA",
-    liveProjectLink: "https://casavolunteertracking.org/",
-    githubLink: "https://github.com/rubyforgood/casa/issues/1017",
+    name: 'Ruby for Good CASA',
+    liveProjectLink: 'https://casavolunteertracking.org/',
+    githubLink: 'https://github.com/rubyforgood/casa/issues/1017',
     descriptions: [
-      "Built an SMS Twilio integration within a volunteer management system for the nonprofit CASA, which serves foster youth in counties across America",
+      'Built an SMS Twilio integration within a volunteer management system for the nonprofit CASA, which serves foster youth in counties across America',
     ],
   },
   {
     logo: YWCA,
-    name: "E-learning Storefront",
+    name: 'E-learning Storefront',
     descriptions: [
-      "Creation and design of a storefront website with e-commerce integrated",
+      'Creation and design of a storefront website with e-commerce integrated',
       "Build APIs to interface with companies' different E-Learning platforms",
-      "Work with secure registration and authentication technologies",
+      'Work with secure registration and authentication technologies',
     ],
   },
   {
     logo: Mindfuel,
-    name: "Mindfuel System Redesign",
+    name: 'Mindfuel System Redesign',
     descriptions: [
-      "Build an activity board that contains new aggregated data everyday",
-      "Start from scratch or build on top of current system",
-      "Work with skilled developers from the Mindfuel team",
+      'Build an activity board that contains new aggregated data everyday',
+      'Start from scratch or build on top of current system',
+      'Work with skilled developers from the Mindfuel team',
     ],
   },
   {
     logo: AXS,
-    name: "AXS Map",
-    liveProjectLink: "https://www.axsmap.com/",
-    githubLink: "https://github.com/axsmap/app",
-    descriptions: ["A tool designed to help us map inclusion in communities and find more places for more people."],
+    name: 'AXS Map',
+    liveProjectLink: 'https://www.axsmap.com/',
+    githubLink: 'https://github.com/axsmap/app',
+    descriptions: ['A tool designed to help us map inclusion in communities and find more places for more people.'],
   },
   {
     logo: AMHAC,
-    name: "Alberta Mental Health Advocacy Coalition",
+    name: 'Alberta Mental Health Advocacy Coalition',
     descriptions: [
-      "Create and design the organization website and logo",
-      "Expand their online presence to reach more individuals",
-      "Good project for members who are at the beginning of their programming journey",
+      'Create and design the organization website and logo',
+      'Expand their online presence to reach more individuals',
+      'Good project for members who are at the beginning of their programming journey',
+    ],
+  },
+  {
+    logo: ScubaSeas,
+    name: 'ScubaSeas',
+    descriptions: [
+      'Open source mobile app that helps divers map out the entire ocean',
+      'Mobile App Developers needed to contribute to the open source project',
     ],
   },
 ];

next.config.js

@@ -5,7 +5,7 @@ require('dotenv').config();
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
-  PUBLIC_ACCESS_TOKEN: process.env.NEXT_PUBLIC_ACCESS_TOKEN,
+  PUBLIC_ACCESS_TOKEN: process.env.PUBLIC_ACCESS_TOKEN,
   // Allow images fromm contentful
   images: {
     domains: ['images.ctfassets.net'],

package.json

@@ -34,5 +34,18 @@
   },
   "engines": {
     "node": "^18.16.1"
-  }
+  },
+  "description": "First, run the development server:",
+  "main": "next.config.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Code-the-Change-YYC/code-the-change-yyc-site.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Code-the-Change-YYC/code-the-change-yyc-site/issues"
+  },
+  "homepage": "https://github.com/Code-the-Change-YYC/code-the-change-yyc-site#readme"
 }

pages/events/index.js

@@ -3,19 +3,24 @@ import PastEventsCarousel from '../../components/PastEventsCarousel';
 import EventsBanner from '../../components/EventsBanner';
 import UpcomingEvents from '../../components/UpcomingEvents';
 import { fetchContent } from '../../api/apiRoot';
+import HackathonLink from '../../components/HackathonLink';
+
+
 
 export async function getStaticProps() {
-  const event = await fetchContent('upcomingEvents');
+  const upcomingEvent = await fetchContent('upcomingEvents');
   const pastEvent = await fetchContent('pastEvents');
-  return { props: { event, pastEvent } };
+  console.log(upcomingEvent);
+  return { props: { upcomingEvent, pastEvent } };
 }
 
-const Events = ({ event, pastEvent }) => {
+const Events = ({ upcomingEvent, pastEvent }) => {
   return (
     <div className="flex flex-col w-full mt-5 md:mt-0 lg:mt-0 ">
       <EventsBanner />
-      <UpcomingEvents event={event} />
+      <UpcomingEvents upcomingEvent={upcomingEvent} />
       <HackathonTimeline />
+      <HackathonLink />
       <PastEventsCarousel pastEvent={pastEvent} />
     </div>
   );