New branch

src/NotFound/NotFound.css

@@ -0,0 +1,40 @@
+.not-found-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background-color: #c85b12;
+  font-family: Arial, sans-serif;
+}
+
+.not-found-image {
+  width: 80px;
+  height: 80px;
+  margin-bottom: 20px;
+}
+
+.not-found-code {
+  font-size: 120px;
+  color: white;
+  background-color: red;
+  padding: 40px 80px;
+  border-radius: 20px;
+  margin: 0;
+}
+
+.home-button {
+  margin-top: 30px;
+  padding: 12px 24px;
+  font-size: 16px;
+  border: none;
+  border-radius: 8px;
+  background-color: #007bff;
+  color: white;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.home-button:hover {
+  background-color: #0056b3;
+}

src/NotFound/NotFound.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import "./NotFound.css";
+import ieeeutdlogo from "../assets/ieeeutdlogo.png"
+
+const NotFound: React.FC = () => {
+  const handleGoHome = () => {
+    window.location.href = "/"; // redirect to home
+  };
+
+  return (
+    <div className="not-found-container">
+      <img
+        src={ieeeutdlogo}
+        alt="Not Found Icon"
+        className="not-found-image"
+      />
+      <h1 className="not-found-code">404</h1>
+      <button className="home-button" onClick={handleGoHome}>
+        Go Back to Home
+      </button>
+    </div>
+  );
+};
+
+export default NotFound;

src/events/ImageBox.css

@@ -0,0 +1,37 @@
+    .image-box {
+    width: 300px;
+    border: 1px solid #000000;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 1px 1px #D3D3D3;
+    font-family: Verdana, sans-serif;
+    background-color: #ffffff;
+    }
+
+    .image-box img {
+    width: 100%;
+    height: 300px;
+    object-fit: cover;
+    display: block;
+    }
+
+    .section {
+    padding: 15px;
+    border-top: 1px solid #000000;
+    font-size: 14px;
+    color: #000000;
+    }
+
+    .field {
+    margin-bottom: 8px;
+    }
+
+    .details {
+    font-weight: bold;
+    text-decoration: underline;
+    margin-right: 5px;
+    }
+
+    .description {
+    margin-top: 10px;
+    }

src/events/ImageBox.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import "./ImageBox.css";
+
+export interface ImageBoxProps {
+  imageUrl: string;
+  name: string;
+  date: string;
+  food: string;
+  description: string;
+}
+
+const ImageBox: React.FC<ImageBoxProps> = ({ imageUrl, name, date, food, description }) => {
+  return (
+    <div className="image-box">
+      <img src={imageUrl} alt="Image not found" />
+      <div className="section">
+        <div className="field">
+          <span className="details">Name:</span> {name}
+        </div>
+        <div className="field">
+          <span className="details">Date:</span> {date}
+        </div>
+        <div className="field">
+          <span className="details">Food:</span> {food}
+        </div>
+        <div className="description">
+          {description}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ImageBox;

src/events/eventcalendar.css

@@ -0,0 +1,87 @@
+.weekly-calendar {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  font-family: Verdana, sans-serif;
+  background-color: white;
+  border: 6px solid #1976d2;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  margin-top: 30px;
+}
+
+.header-row {
+  display: grid;
+  grid-template-columns: 80px repeat(7, 1fr);
+  background-color: white;
+  font-weight: bold;
+  border-bottom: 2px solid black;
+}
+
+.day-col-header {
+  padding: 10px;
+  text-align: center;
+  border-left: 2px solid black;
+  border-right: 2px solid black;
+}
+
+.calendar-body {
+  display: grid;
+  grid-template-columns: 80px repeat(7, 1fr);
+  grid-template-rows: repeat(10, 60px);
+  background-color: white;
+  position: relative;
+}
+
+.time-label {
+  text-align: right;
+  padding: 5px 10px;
+  font-size: 12px;
+  border-top: 2px solid black;
+  border-right: 2px solid black;
+  background-color: white;
+}
+
+.time-slot {
+  border: 2px solid black;
+  background-color: white;
+}
+
+.calendar-event {
+  position: absolute;
+  z-index: 1;
+  color: white;
+  font-size: 0.8rem;
+  padding: 5px 6px;
+  border-radius: 4px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  left: calc(80px + ((100% - 80px) / 7) * var(--column-start));
+  width: calc((100% - 80px) / 7);
+  box-sizing: border-box;
+}
+
+.event-title {
+  font-weight: bold;
+}
+
+.calendar-popup {
+  position: fixed;
+  background-color: #fff;
+  border: 2px solid #000;
+  border-radius: 6px;
+  padding: 10px;
+  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.2);
+  font-size: 0.85rem;
+  max-width: 220px;
+  z-index: 1000;
+  white-space: pre-wrap;
+}
+
+.calendar-event {
+  cursor: pointer; 
+}
+
+.calendar-event:hover {
+  background-color: #f5f5f5;
+}

src/events/eventcalendar.tsx

@@ -0,0 +1,126 @@
+import React, { useState, useEffect } from "react";
+import "./eventcalendar.css";
+
+type CalendarEvent = {
+  day: string;
+  title: string;
+  start: string;
+  end: string;
+  color: string;
+  description: string;
+};
+
+const events: CalendarEvent[] = [
+  {
+    day: "Monday",
+    title: "Tech Talk",
+    start: "10:00",
+    end: "11:00",
+    color: "#673AB7",
+    description: "AI and future tech discussion.",
+  },
+  {
+    day: "Wednesday",
+    title: "Workshop",
+    start: "13:00",
+    end: "15:00",
+    color: "#E91E63",
+    description: "IoT hands-on session.",
+  },
+  {
+    day: "Saturday",
+    title: "Workshop",
+    start: "14:00",
+    end: "15:30",
+    color: "#009688",
+    description: "Lecture",
+  },
+];
+
+const days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
+const times = Array.from({ length: 10 }, (_, i) => `${9 + i}:00`);
+
+const parseTime = (time: string) => {
+  const [h, m] = time.split(":").map(Number);
+  return h * 60 + (m || 0);
+};
+
+const EventCalendar: React.FC = () => {
+  const [popup, setPopup] = useState<{
+    x: number;
+    y: number;
+    content: string;
+  } | null>(null);
+
+  useEffect(() => {
+    const dismiss = () => setPopup(null);
+    document.addEventListener("click", dismiss);
+    return () => document.removeEventListener("click", dismiss);
+  }, []);
+
+  return (
+    <div className="weekly-calendar">
+      <div className="header-row">
+        <div className="time-col" />
+        {days.map((day) => (
+          <div key={day} className="day-col-header">{day}</div>
+        ))}
+      </div>
+
+      <div className="calendar-body">
+        {times.map((time, i) => (
+          <React.Fragment key={i}>
+            <div className="time-label">{time}</div>
+            {days.map((day) => (
+              <div key={`${day}-${time}`} className="time-slot" />
+            ))}
+          </React.Fragment>
+        ))}
+
+        {events.map((event, i) => {
+          const columnStart = days.indexOf(event.day);
+          const start = parseTime(event.start);
+          const end = parseTime(event.end);
+          const top = ((start - 540) / 60) * 60;
+          const height = ((end - start) / 60) * 60;
+
+          return (
+            <div
+              key={i}
+              className="calendar-event"
+              style={{
+                top: `${top}px`,
+                height: `${height}px`,
+                backgroundColor: event.color,
+                "--column-start": columnStart.toString(),
+              } as React.CSSProperties}
+              onClick={(e) => {
+                e.stopPropagation();
+                setPopup({
+                  x: e.clientX + 10,
+                  y: e.clientY + 10,
+                  content: `${event.title}\n${event.start}–${event.end}\n${event.description}`,
+                });
+              }}
+            >
+              <div className="event-title">{event.title}</div>
+            </div>
+          );
+        })}
+
+        {popup && (
+          <div
+            className="calendar-popup"
+            style={{ top: popup.y, left: popup.x }}
+          >
+            {popup.content.split("\n").map((line, idx) => (
+              <div key={idx}>{line}</div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default EventCalendar;

src/events/events.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import ImageBox from "./ImageBox";
+import EventCalendar from "./eventcalendar"; 
+
+const Events: React.FC = () => {
+  return (
+    <div style={{ padding: "20px" }}>
+      <ImageBox
+        imageUrl="/assets/carousel1.jpg"
+        name="Tech Talk"
+        date="June 5, 2025"
+        food="Pizza and Drinks"
+        description="Join us for an engaging discussion on artificial intelligence and future tech trends."
+      />
+      <EventCalendar /> 
+    </div>
+  );
+};
+
+export default Events;