-
-
+
+
+
+
- {email}
- 
-
-
+
diff --git a/src/components/board/Officers.astro b/src/components/board/Officers.astro
index 68acd80..a5319ae 100644
--- a/src/components/board/Officers.astro
+++ b/src/components/board/Officers.astro
@@ -1,43 +1,64 @@
---
-import about from "../../images/about.png";
+import about from "../../images/about.webp";
import { Image } from "astro:assets";
-import neko from "../../images/neko.png";
+import neko from "../../images/neko.webp";
import { LiaDotCircle } from "react-icons/lia";
import Officer from "../board/Officer.astro";
+import Filter from "../board/Filter.astro";
import officers from "../../data/officers.json";
+
+// Get all unique types and add 'All' option
+const typeOrder = ["Executives", "Internal", "Events", "Projects"];
+const types = ["All", ...typeOrder];
+
+const currentFilter = "All";
---
-
+
-
-
\ No newline at end of file
++
+
-
-{name}
-
+
{position}
-
-
+
+
diff --git a/src/components/core/About.astro b/src/components/core/About.astro
index 5633c44..15b5db9 100644
--- a/src/components/core/About.astro
+++ b/src/components/core/About.astro
@@ -4,14 +4,14 @@ const {title, text} = Astro.props;
---
+
-
-
+ MEET THE BOARD
-
+
- MEET THE BOARD
+- Erat hendrerit tristique erat; parturient cursus fringilla feugiat. Eget - faucibus fames ridiculus nec egestas convallis cubilia malesuada. Tellus - nibh vivamus tempus molestie tristique quis -
++ Our board comprises 31 students of varying majors, colleges, and interests! + Feel free to reach out for any questions about our position or experiences. +
-
- {
- officers.map((officer) => (
-
+
+ {
+ officers.map((officer) => (
+
+ ))
+ }
+
-
+
\ No newline at end of file
diff --git a/src/components/core/Footer.astro b/src/components/core/Footer.astro
index 316a03d..db12d2b 100644
--- a/src/components/core/Footer.astro
+++ b/src/components/core/Footer.astro
@@ -5,22 +5,22 @@ import whiteLogoHorizontal from "../../images/logos/white_logo_horizontal.svg";
import { IoHeart } from "react-icons/io5";
---
-{title}
+
{text}
+
-
+
made by IEEE UCSD webmasters with
-
-
-
+
+
+
+
+
diff --git a/src/components/core/Question.astro b/src/components/core/Question.astro
index 2f8d67b..ba998be 100644
--- a/src/components/core/Question.astro
+++ b/src/components/core/Question.astro
@@ -1,11 +1,11 @@
---
const {question, answer} = Astro.props;
---
-
-
+
+
diff --git a/src/components/core/Questions.astro b/src/components/core/Questions.astro
index 8b67fc2..b10f878 100644
--- a/src/components/core/Questions.astro
+++ b/src/components/core/Questions.astro
@@ -4,8 +4,8 @@ import { LiaDotCircle } from "react-icons/lia";
const {faq} = Astro.props;
---
-
{question}
-+
{answer}
-
+
+
Frequently Asked Questions diff --git a/src/components/core/Social.astro b/src/components/core/Social.astro index 9d962f9..8c41bdd 100644 --- a/src/components/core/Social.astro +++ b/src/components/core/Social.astro @@ -1,71 +1,79 @@ --- import { LiaDotCircle } from "react-icons/lia"; import { Image } from "astro:assets"; -import evan from "../../images/evan.png"; -import { FaDiscord, FaFacebook } from "react-icons/fa"; +import jellyfish from "../../images/jellyfish.webp"; +import { FaDiscord } from "react-icons/fa"; import { RiInstagramFill } from "react-icons/ri"; +import { MdEmail } from "react-icons/md"; import Link from "next/link"; --- -
-
+
+
Social Media
- Lorem ipsum is placeholder text commonly used in the graphic, print, and - publishing industries f +
+ Stay connected with us on Discord, Facebook, and Instagram! We regularly + post information on upcoming events and competitions.
-
diff --git a/src/components/core/Subtitle.astro b/src/components/core/Subtitle.astro
index 70857c4..6065c13 100644
--- a/src/components/core/Subtitle.astro
+++ b/src/components/core/Subtitle.astro
@@ -3,7 +3,7 @@ const {title} = Astro.props;
import { LiaDotCircle } from "react-icons/lia";
---
-
-
- Facebook
- - +
Instagram
+Email
-
- Discord
- - - -
-
- + Instagram +
+ + + +
+
+ Discord
+ + + +
+
+
+
{title} diff --git a/src/components/core/Title.astro b/src/components/core/Title.astro index a4f7cd6..bf683d8 100644 --- a/src/components/core/Title.astro +++ b/src/components/core/Title.astro @@ -1,11 +1,13 @@ --- -const {title} = Astro.props; +const { title } = Astro.props; import { LiaDotCircle } from "react-icons/lia"; --- -
-
\ No newline at end of file
+- {title} -
-
+
diff --git a/src/components/events/Calendar.jsx b/src/components/events/Calendar.jsx
new file mode 100644
index 0000000..80c271e
--- /dev/null
+++ b/src/components/events/Calendar.jsx
@@ -0,0 +1,358 @@
+import React, { useState, useEffect } from "react";
+
+const Calendar = ({ CALENDAR_API_KEY, EVENT_CALENDAR_ID }) => {
+ const [currentDate, setCurrentDate] = useState(new Date());
+ const [events, setEvents] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [hoveredEvent, setHoveredEvent] = useState(null);
+ const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+
+ const getDaysInMonth = (date) => {
+ const year = date.getFullYear();
+ const month = date.getMonth();
+ const firstDay = new Date(year, month, 1);
+ const lastDay = new Date(year, month + 1, 0);
+ const daysInMonth = lastDay.getDate();
+ const startingDay = firstDay.getDay();
+ const endingDay = lastDay.getDay();
+
+ const days = [];
+ // Add empty slots for days before the first of the month
+ for (let i = 0; i < startingDay; i++) {
+ days.push(null);
+ }
+ // Add all days of the month
+ for (let i = 1; i <= daysInMonth; i++) {
+ days.push(new Date(year, month, i));
+ }
+ // Add empty slots for remaining days in the last week
+ const remainingDays = 6 - endingDay;
+ for (let i = 0; i < remainingDays; i++) {
+ days.push(null);
+ }
+ return days;
+ };
+
+ // Format date to match event dates
+ const formatDate = (date) => {
+ if (!date) return "";
+ return date.toISOString().split("T")[0];
+ };
+
+ // Get events for a specific day
+ const getEventsForDay = (day) => {
+ if (!day) return [];
+ const dayStr = formatDate(day);
+ return events.filter((event) => {
+ const eventDate = event.start.dateTime
+ ? new Date(event.start.dateTime).toISOString().split("T")[0]
+ : event.start.date;
+ return eventDate === dayStr;
+ });
+ };
+
+ // Format time for display
+ const formatEventTime = (dateTimeStr) => {
+ if (!dateTimeStr) return "";
+ const date = new Date(dateTimeStr);
+ return date.toLocaleTimeString("en-US", {
+ hour: "numeric",
+ minute: "2-digit",
+ });
+ };
+
+ useEffect(() => {
+ const calendarId = EVENT_CALENDAR_ID;
+ const userTimeZone = "America/Los_Angeles";
+
+ const loadGapiAndListEvents = async () => {
+ try {
+ console.log("Starting to load events...");
+
+ if (typeof window.gapi === "undefined") {
+ console.log("Loading GAPI script...");
+ await new Promise((resolve, reject) => {
+ const script = document.createElement("script");
+ script.src = "https://apis.google.com/js/api.js";
+ document.body.appendChild(script);
+ script.onload = () => {
+ console.log("GAPI script loaded");
+ window.gapi.load("client", resolve);
+ };
+ script.onerror = () => {
+ console.error("Failed to load GAPI script");
+ reject(new Error("Failed to load the Google API script."));
+ };
+ });
+ }
+
+ console.log("Initializing GAPI client...");
+ await window.gapi.client.init({
+ apiKey: CALENDAR_API_KEY,
+ discoveryDocs: [
+ "https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest",
+ ],
+ });
+
+ // Get first and last day of current month
+ const firstDay = new Date(
+ currentDate.getFullYear(),
+ currentDate.getMonth(),
+ 1,
+ );
+ const lastDay = new Date(
+ currentDate.getFullYear(),
+ currentDate.getMonth() + 1,
+ 0,
+ );
+
+ console.log("Fetching events...");
+ const response = await window.gapi.client.calendar.events.list({
+ calendarId: calendarId,
+ timeZone: userTimeZone,
+ singleEvents: true,
+ timeMin: firstDay.toISOString(),
+ timeMax: lastDay.toISOString(),
+ orderBy: "startTime",
+ });
+
+ console.log("Response received:", response);
+
+ if (response.result.items) {
+ setEvents(response.result.items);
+ }
+ } catch (error) {
+ console.error("Detailed Error: ", error);
+ setError(error.message || "Failed to load events");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ if (!CALENDAR_API_KEY) {
+ setError("API key is missing");
+ setLoading(false);
+ return;
+ }
+
+ setLoading(true);
+ loadGapiAndListEvents();
+ }, [CALENDAR_API_KEY, currentDate]);
+
+ const monthNames = [
+ "Jan",
+ "Feb",
+ "Mar",
+ "Apr",
+ "May",
+ "Jun",
+ "Jul",
+ "Aug",
+ "Sep",
+ "Oct",
+ "Nov",
+ "Dec",
+ ];
+
+ const weekDays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+ const changeMonth = (increment) => {
+ setCurrentDate(
+ new Date(
+ currentDate.getFullYear(),
+ currentDate.getMonth() + increment,
+ 1,
+ ),
+ );
+ };
+
+ const handleEventMouseEnter = (event, e) => {
+ const target = e.target;
+ setTooltipPosition({
+ x: e.clientX,
+ y: e.clientY,
+ });
+ setHoveredEvent({ event, target });
+ };
+
+ const handleEventMouseLeave = () => {
+ setHoveredEvent(null);
+ };
+
+ const handleMouseMove = (e) => {
+ if (hoveredEvent) {
+ // Check if the mouse is still over the event element
+ const rect = hoveredEvent.target.getBoundingClientRect();
+ const isStillHovering =
+ e.clientX >= rect.left &&
+ e.clientX <= rect.right &&
+ e.clientY >= rect.top &&
+ e.clientY <= rect.bottom;
+
+ if (!isStillHovering) {
+ setHoveredEvent(null);
+ } else {
+ setTooltipPosition({
+ x: e.clientX,
+ y: e.clientY,
+ });
+ }
+ }
+ };
+
+ useEffect(() => {
+ const handleScroll = () => {
+ if (hoveredEvent) {
+ const rect = hoveredEvent.target.getBoundingClientRect();
+ const mouseX = tooltipPosition.x - 15; // Subtract the offset added to the tooltip
+ const mouseY = tooltipPosition.y - 15;
+
+ const isStillHovering =
+ mouseX >= rect.left &&
+ mouseX <= rect.right &&
+ mouseY >= rect.top &&
+ mouseY <= rect.bottom;
+
+ if (!isStillHovering) {
+ setHoveredEvent(null);
+ }
+ }
+ };
+
+ window.addEventListener("scroll", handleScroll, true);
+ return () => window.removeEventListener("scroll", handleScroll, true);
+ }, [hoveredEvent, tooltipPosition]);
+
+ if (!CALENDAR_API_KEY) {
+ return (
+ + {title} +
+
+ Error: Calendar API key is not configured
+
+ );
+ }
+
+ return (
+
+ {/* Hovering Calendar Header */}
+
+ );
+};
+
+export default Calendar;
diff --git a/src/components/events/EventList.jsx b/src/components/events/EventList.jsx
new file mode 100644
index 0000000..a6f459c
--- /dev/null
+++ b/src/components/events/EventList.jsx
@@ -0,0 +1,170 @@
+import React, { useEffect, useState } from "react";
+
+const UpcomingEvent = ({ name, location, date, time, delay, description }) => (
+
+
+
+ {/* Main Calendar Body */}
+
+
+
+
+
+ + {monthNames[currentDate.getMonth()]} {currentDate.getFullYear()} +
+ +
+ {/* Week Days Header */}
+
+
+ {weekDays.map((day, index) => (
+
+
+ {/* Calendar Grid */}
+
+
+ ))}
+
+ {day}
+
+
+ {getDaysInMonth(currentDate).map((day, index) => (
+
+
+ {/* Tooltip */}
+ {hoveredEvent && (
+
+ {day && (
+ <>
+
+ ))}
+
+ {day.getDate()}
+
+
+ {getEventsForDay(day).map((event, eventIndex) => (
+
+
+ )}
+ handleEventMouseEnter(event, e)}
+ onMouseLeave={handleEventMouseLeave}
+ >
+ {event.summary}
+
+ ))}
+
+
+ )}
+ + {hoveredEvent.event.summary} +
+ {hoveredEvent.event.description && ( ++ {hoveredEvent.event.description} +
+ )} +
+ {hoveredEvent.event.start.dateTime ? (
+ <>
+
+ + Start: {formatEventTime(hoveredEvent.event.start.dateTime)} +
+End: {formatEventTime(hoveredEvent.event.end.dateTime)}
+ + ) : ( +All day event
+ )} + {hoveredEvent.event.location && ( ++ Location: {hoveredEvent.event.location} +
+ )} +
+
+);
+
+const EventList = ({ CALENDAR_API_KEY, EVENT_CALENDAR_ID }) => {
+ const [events, setEvents] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ const apiKey = CALENDAR_API_KEY;
+ const calendarId = EVENT_CALENDAR_ID;
+ const userTimeZone = "America/Los_Angeles";
+
+ const loadGapiAndListEvents = async () => {
+ try {
+ console.log("Starting to load events...");
+
+ if (typeof window.gapi === "undefined") {
+ console.log("Loading GAPI script...");
+ await new Promise((resolve, reject) => {
+ const script = document.createElement("script");
+ script.src = "https://apis.google.com/js/api.js";
+ document.body.appendChild(script);
+ script.onload = () => {
+ console.log("GAPI script loaded");
+ window.gapi.load("client", resolve);
+ };
+ script.onerror = () => {
+ console.error("Failed to load GAPI script");
+ reject(new Error("Failed to load the Google API script."));
+ };
+ });
+ }
+
+ console.log("Initializing GAPI client...");
+ await window.gapi.client.init({
+ apiKey: apiKey,
+ discoveryDocs: [
+ "https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest",
+ ],
+ });
+
+ console.log("Fetching events...");
+ const response = await window.gapi.client.calendar.events.list({
+ calendarId: calendarId,
+ timeZone: userTimeZone,
+ singleEvents: true,
+ timeMin: new Date().toISOString(),
+ maxResults: 3,
+ orderBy: "startTime",
+ });
+
+ console.log("Response received:", response);
+
+ if (response.result.items) {
+ setEvents(response.result.items);
+ }
+ } catch (error) {
+ console.error("Detailed Error: ", error);
+ setError(error.message || "Failed to load events");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ if (!CALENDAR_API_KEY) {
+ setError("API key is missing");
+ setLoading(false);
+ return;
+ }
+
+ setLoading(true);
+ loadGapiAndListEvents();
+ }, [CALENDAR_API_KEY]);
+
+ if (!CALENDAR_API_KEY) {
+ return (
+ + {name} +
+
+ Location: {location}
+ {date && (
+ <>
+
+
+ {date}
+ + )} + {time && ( + <> + +{time}
+ + )} ++ {description} +
+ +
+ Error: Calendar API key is not configured
+
+ );
+ }
+
+ return (
+
+ {error &&
+ );
+};
+
+export default EventList;
diff --git a/src/components/events/EventTitle.astro b/src/components/events/EventTitle.astro
index bd122ba..0b4faee 100644
--- a/src/components/events/EventTitle.astro
+++ b/src/components/events/EventTitle.astro
@@ -1,20 +1,19 @@
---
import { Image } from "astro:assets";
-import eventbg from "../../images/eventbg.png";
+import eventbg from "../../images/eventbg.webp";
import { LiaDotCircle } from "react-icons/lia";
---
-Error: {error}
} + {!loading && !error && events.length === 0 && ( +
+ {events.map((event, index) => {
+ const startDate = new Date(
+ event.start.dateTime || event.start.date,
+ );
+ const day = startDate.toLocaleDateString("en-US", {
+ weekday: "short",
+ });
+ const date = startDate.toLocaleDateString("en-US", {
+ day: "numeric",
+ month: "short",
+ year: "numeric",
+ });
+ const time = startDate.toLocaleTimeString("en-US", {
+ hour: "numeric",
+ minute: "2-digit",
+ });
+
+ return (
+
+ )}
+
-
-
+EVENTS
-
+
diff --git a/src/components/events/UpcomingEvents.astro b/src/components/events/UpcomingEvents.astro
index 6b9cc3a..f5e4cad 100644
--- a/src/components/events/UpcomingEvents.astro
+++ b/src/components/events/UpcomingEvents.astro
@@ -1,45 +1,28 @@
---
-import UpcomingEvent from "./UpcomingEvent.astro";
import { LiaDotCircle } from "react-icons/lia";
+import EventList from "./EventList.jsx";
+const CALENDAR_API_KEY = import.meta.env.CALENDAR_API_KEY;
+const EVENT_CALENDAR_ID = import.meta.env.EVENT_CALENDAR_ID;
---
-
+
EVENTS
+
-
-
-
-
-
- Upcoming
Events
-
- SCROLL DOWN TO SEE THE UPCOMING EVENTS FOR IEEE! + +
+
diff --git a/src/components/find/FindTitle.astro b/src/components/find/FindTitle.astro
index d3d37ae..0d502ba 100644
--- a/src/components/find/FindTitle.astro
+++ b/src/components/find/FindTitle.astro
@@ -3,22 +3,32 @@ import Link from "next/link";
import { LiaDotCircle } from "react-icons/lia";
---
-
+
+
-
+
+
-
+ Upcoming
Events
-
+ + SCROLL DOWN TO SEE THE UPCOMING EVENTS FOR IEEE! +
+
+
-
-
diff --git a/src/components/join/BuildingLocation.astro b/src/components/join/BuildingLocation.astro
new file mode 100644
index 0000000..2b500eb
--- /dev/null
+++ b/src/components/join/BuildingLocation.astro
@@ -0,0 +1,20 @@
+---
+
+---
+
+
-
- - Contact Us -
-- The IEEE Project Space is an open-access, collaborative space located at EBU1-4710. Students can do homework or get access to basic electronic tools such as soldering stations, breadboard components, and Arduino and Raspberry PI parts! -
-
-
- DISCORD
-
-
-
+
+
+
+
\ No newline at end of file
+
+
-Contact Us
+ The IEEE Project Space is an open-access, collaborative space located at EBU1-4710. Students can + do homework or get access to basic electronic tools such as soldering stations, + breadboard components, and Arduino and Raspberry PI parts! +
+
+
+ DISCORD
+
+
+
+
diff --git a/src/components/join/Findus.astro b/src/components/join/Findus.astro
index 81bbd67..3bc773d 100644
--- a/src/components/join/Findus.astro
+++ b/src/components/join/Findus.astro
@@ -1,8 +1,9 @@
---
-import OH from "./OH.astro"
+import OAH from "./OAH.astro";
+import BuildingLocation from "./BuildingLocation.astro";
---
-Each officer has their own OAH
+Check out our calendar!
+ +
-
\ No newline at end of file
+
+
diff --git a/src/components/join/Involvement.astro b/src/components/join/Involvement.astro
index 8eefd57..ab75b23 100644
--- a/src/components/join/Involvement.astro
+++ b/src/components/join/Involvement.astro
@@ -6,16 +6,16 @@ import { IoMdCalendar } from "react-icons/io";
import { RiRobot2Fill } from "react-icons/ri";
const {image, text, link, delay} = Astro.props;
---
-
+
-
-
+
+
-
{
text === "PROJECTS"?
-
+
+
{text}
-+
UC San Diego’s largest hardware focused hackathon hold by IEEE UCSD, HKN, and TNT diff --git a/src/components/join/Involvements.astro b/src/components/join/Involvements.astro index cfc95b6..a6c3da2 100644 --- a/src/components/join/Involvements.astro +++ b/src/components/join/Involvements.astro @@ -2,8 +2,8 @@ import Involvement from "./Involvement.astro"; import involve from "../../data/involve.json"; --- -
-
+
+
{involve.map((item)=>(
-
-
- Get involve in international IEEE +
+
diff --git a/src/components/join/JoinTitle.astro b/src/components/join/JoinTitle.astro
index 831f9ec..f2222fc 100644
--- a/src/components/join/JoinTitle.astro
+++ b/src/components/join/JoinTitle.astro
@@ -3,22 +3,35 @@ import Link from "next/link";
import { LiaDotCircle } from "react-icons/lia";
---
-+ Get involve in IEEE @ UCSD
-+
How To Keep Up With And Get Engaged With IEEE at UCSD
-
-
diff --git a/src/components/join/OAH.astro b/src/components/join/OAH.astro
new file mode 100644
index 0000000..c638f24
--- /dev/null
+++ b/src/components/join/OAH.astro
@@ -0,0 +1,19 @@
+---
+
+---
+
+
-
- - Join Us -
-- The IEEE Project Space is an open-access, collaborative space located at EBU1-4710. Students can do homework or get access to basic electronic tools such as soldering stations, breadboard components, and Arduino and Raspberry PI parts! -
-
-
- JOIN
-
-
-
+
+
+
+
\ No newline at end of file
+
+
-Join Us
+ The IEEE Project Space is an open-access, collaborative space located at EBU1-4710. Students can + do homework or get access to basic electronic tools such as soldering stations, + breadboard components, and Arduino and Raspberry PI parts! +
+
+
+ JOIN
+
+
+
+
diff --git a/src/components/join/OH.astro b/src/components/join/OH.astro
deleted file mode 100644
index fcd3f36..0000000
--- a/src/components/join/OH.astro
+++ /dev/null
@@ -1,13 +0,0 @@
----
-const {title, subtitle, image} = Astro.props;
----
-
-Each officer has their own OAH
+Check out our calendar!
+ +
-
-
\ No newline at end of file
diff --git a/src/components/join/Resource.jsx b/src/components/join/Resource.jsx
index 60b966b..5f53ca0 100644
--- a/src/components/join/Resource.jsx
+++ b/src/components/join/Resource.jsx
@@ -2,19 +2,19 @@ import Link from "next/link";
const Resource = ({icon, title, text, link}) => {
return (
- - {subtitle} -
-- {title} -
-
-
+
+
{icon}
-
-
+
+
{title}
-+
{text}
-
+
VIEW
diff --git a/src/components/join/Resources.jsx b/src/components/join/Resources.jsx
index b57f3a9..e0ed9f9 100644
--- a/src/components/join/Resources.jsx
+++ b/src/components/join/Resources.jsx
@@ -1,29 +1,29 @@
import Resource from "./Resource.jsx"
import { LiaDotCircle } from "react-icons/lia";
import { RiSlideshowLine } from "react-icons/ri";
-import { BiMoviePlay } from "react-icons/bi";
+import { IoMdGlobe } from "react-icons/io";
const Resources = () => {
return (
-
-
+
+
Member Resources
+
title = "Workshop Slides"
- text = "Hac at maecenas maximus faucibus venenatis blandit. Netus elit fusce a tortor"
+ text = "Find our database of workshop slides here."
link = "http://www.google.com"
/>
- title = "Workshop Videos"
- text = "Hac at maecenas maximus faucibus venenatis blandit. Netus elit fusce a tortor"
- link = "http://www.google.com"
+ icon =
diff --git a/src/components/main_page/About.astro b/src/components/main_page/About.astro
index b4e8088..f359320 100644
--- a/src/components/main_page/About.astro
+++ b/src/components/main_page/About.astro
@@ -1,58 +1,60 @@
---
-import about from "../../images/about.png";
+import about from "../../images/about.webp";
import Link from "next/link";
import { LiaDotCircle } from "react-icons/lia";
import { Image } from "astro:assets";
-import about2 from "../../images/about2.png";
-import about3 from "../../images/about3.png";
-import about4 from "../../images/about4.png";
----
-
+import about2 from "../../images/about2.webp";
+import about3 from "../../images/about3.webp";
+import about4 from "../../images/about4.webp";
---
-
+
-
+
we are ...
About Us
@@ -71,7 +73,7 @@ import about4 from "../../images/about4.png";
diff --git a/src/pages/board.astro b/src/pages/board.astro
index 7584fce..5d7a858 100644
--- a/src/pages/board.astro
+++ b/src/pages/board.astro
@@ -2,18 +2,18 @@
import Layout from "../layouts/Layout.astro";
import Officers from "../components/board/Officers.astro";
import { Image } from "astro:assets";
-import board from "../images/board.png";
+import board from "../images/board.webp";
---