Mainly sponsor page changes but getting ready to add leadership page

src/components/widgets/OurProjects.astro

@@ -1,49 +1,59 @@
 ---
-import Image from '~/components/common/Image.astro';
+import {Image} from 'astro:assets';
 
 import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
 import Button from '../ui/Button.astro';
 
+export interface Props {
+  title: string,
+  subtitle?: any,
+
+  items: Array<{
+    name: string,
+    description: string,
+    href: string,
+    image: {
+      src: Promise<any>,
+      alt: string,
+    },
+    meetingTimes :Array<{
+      day: string,
+      time: string,
+    }>,
+  }>
+
+  id: string,
+}
+
 const {
   title = await Astro.slots.render('title'),
   subtitle = await Astro.slots.render('subtitle'),
-
   items = [],
 
-  tagline,
-
   id,
-  isDark = false,
-  classes = {},
-  bg = await Astro.slots.render('bg'),
 } = Astro.props;
 ---
 
-<WidgetWrapper id={id} isDark={isDark} containerClass={classes?.container as string} bg={bg}>
+<WidgetWrapper id={id}>
   <div class="p=4">
     <h2 class="text-4xl md:text-5xl font-bold font-heading tracking-tighter text-center">{title}</h2>
     <div class="text-center my-4" set:html={subtitle}></div>
 
     <div class="flex flex-col lg:justify-between lg:flex-row mb-8 gap-8">
       {
-        items.map(({ image, name, description, href, meetingTimes, meetingInfo}) => (
-          <div class="flex flex-col my-4">
+        items.map(({ image, name, description, href, meetingTimes}) => (
+          <div class="flex flex-col my-4 basis-1/3">
             <Image
-              class="mx-auto w-full rounded-lg bg-gray-500 shadow-lg"
-              width="auto"
-              height="960px"
-              widths={[800, 1600]}
-              sizes="(max-width: 768px) 100vw, 432px"
-              layout="responsive"
-              {...image}
+              class="mx-auto w-full rounded-lg bg-gray-500 shadow h-64 object-cover"
+              src={image.src}
+              alt={image.alt}
+              widths={[200, 400, 800]}
             />
             <h3 class="text-xl font-bold font-heading pb-2 py-7">{name}</h3>
             <p class="">{description}</p>
 
             <h3 class="text-large font-bold my-4">Meeting Times 🕒</h3>
 
-            <p>{meetingInfo}</p>
-
             {
               meetingTimes.map(({day, time}) => (
                 <p>{day}: {time}</p>

src/components/widgets/SocialLink.astro

@@ -12,6 +12,6 @@ const { icon, label, href, useButtonStyle } = Astro.props;
 ---
 
 <a class:list={useButtonStyle ? ["flex-row gap-1 inline-flex items-center justify-center rounded-full border-gray-400 border bg-transparent font-medium text-center text-base text-page leading-snug transition py-1.5 px-3 md:px-6 ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2 hover:bg-gray-100 hover:border-gray-600 dark:text-slate-300 dark:border-slate-500 dark:hover:bg-slate-800 dark:hover:border-slate-800"] : ["flex flex-row gap-1"]} href={href}>
-    <Icon name={icon} class="w-8 h-8" />
+    <Icon name={icon} class="w-7 h-7" />
     <p>{label}</p>
 </a>

src/components/widgets/Socials.astro

@@ -18,48 +18,33 @@ const { linkedin, email, facebook, youtube, instagram, classes, useButtonStyle }
 
 <div
   class={twMerge(
-    "font-normal flex flex-row flex-wrap gap-x-3 my-2 text-muted",
+    "font-normal flex flex-row flex-wrap gap-x-3 mt-2 text-muted",
     useButtonStyle ? "gap-y-3" : "",
     classes,
   )}
 >
   {
-    instagram ? (
+    instagram &&
       <SocialLink icon="tabler:brand-instagram" href={instagram} label="Instagram" useButtonStyle={useButtonStyle} />
-    ) : (
-      ""
-    )
   }
 
   {
-    linkedin ? (
+    linkedin &&
       <SocialLink icon="tabler:brand-linkedin" href={linkedin} label="LinkedIn" useButtonStyle={useButtonStyle} />
-    ) : (
-      ""
-    )
   }
 
   {
-    email ? (
+    email &&
       <SocialLink icon="tabler:mail" href={"mailto: " + email} label={email} useButtonStyle={useButtonStyle} />
-    ) : (
-      ""
-    )
   }
 
   {
-    facebook ? (
+    facebook &&
       <SocialLink icon="tabler:brand-facebook" href={facebook} label="Facebook" useButtonStyle={useButtonStyle} />
-    ) : (
-      ""
-    )
   }
 
   {
-    youtube ? (
+    youtube &&
       <SocialLink icon="tabler:brand-youtube" href={youtube} label="YouTube" useButtonStyle={useButtonStyle} />
-    ) : (
-      ""
-    )
   }
 </div>

src/components/widgets/StaffCard.astro

@@ -0,0 +1,36 @@
+---
+import getLeadershipData from "~/leadershipData";
+import { Image } from "astro:assets";
+import Socials from "./Socials.astro";
+
+export interface Props {
+    name: string;
+    noSocials?: boolean;
+}
+
+const { name, noSocials } = Astro.props;
+
+let leadershipData = getLeadershipData(name);
+const images = import.meta.glob<{ default: ImageMetadata }>(
+    "/src/assets/images/staff/*.{jpeg,jpg,png}",
+);
+const imagePath = "/src/assets/images/staff/" + name + ".png";
+const image = images[imagePath]();
+---
+
+<div class="inline-block">
+    <div class="border border-[#ffffff29] bg-page rounded-md p-4 flex flex-col gap-4 shadow-lg m-auto">
+        <Image class="rounded-sm" src={image} alt={name} width="400" />
+        <div>
+            <p class="text-primary font-bold text-xl">{name}</p>
+            <p class="font-bold">{leadershipData.title}</p>
+
+            <div class="py-4">
+                {leadershipData.year && <p>{leadershipData.year}</p>}
+                {leadershipData.major && <p>{leadershipData.major}</p>}
+            </div>
+
+            {!noSocials && <Socials {...getLeadershipData(name)} />}
+        </div>
+    </div>
+</div>

src/leadershipData.ts

@@ -6,6 +6,8 @@ export interface LeadershipRecord {
     title: string;
     linkedin?: string;
     email?: string;
+    year?: string;
+    major?: string;
 }
 
 export default function getLeadershipData(name: string): LeadershipRecord {
@@ -34,7 +36,9 @@ const leadershipData: LeadershipData = {
     "Hana Winchester": {
         title: "Sponsorship Chair",
         linkedin: "https://www.linkedin.com/in/hana-winchester-988282258/",
-        email: "winchester.36@osu.edu"
+        email: "winchester.36@osu.edu",
+        year: "Sophomore",
+        major: "Computer Science & Engineering"
     },
     "Marc Chow": {
         title: "Business Operations Director",

src/pages/index.astro

@@ -71,7 +71,7 @@ const metadata = {
         description:
           "NASA SLI is a research-based, competitive, experiential exploration project striving to provide relevant research through payload components to support the development of NASA’s Space Launch System (SLS) program.",
         image: {
-          src: "~/assets/images/subteam-nasa.webp",
+          src: import("/src/assets/images/subteam-nasa.webp"),
           alt: "NASA Subteam",
         },
         href: getPermalink("/projects/nasa"),
@@ -91,7 +91,7 @@ const metadata = {
         description:
           "SAC competes at Spaceport America Cup, an international collegiate rocketry competition hosted in New Mexico every summer. BSLI competes in the 30k Student Research and Developed (SRAD) category.",
         image: {
-          src: "~/assets/images/subteam-sac.webp",
+          src: import("/src/assets/images/subteam-sac.webp"),
           alt: "Spaceport America Cup Team",
         },
         href: getPermalink("/projects/sac"),
@@ -111,7 +111,7 @@ const metadata = {
         description:
           "BSLI Liquids team focuses on liquid bipropellant rocket engine development. Current development includes working towards test firing an LR-101, and further refining our 1st custom engine.",
         image: {
-          src: "~/assets/images/subteam-liquids.webp",
+          src: import("/src/assets/images/subteam-liquids.webp"),
           alt: "Liquids Team",
         },
         href: getPermalink("/projects/liquids"),
@@ -202,7 +202,7 @@ const metadata = {
       },
     ]}
   >
-    <Fragment slot="title"> Ready to build some rockets? </Fragment>
+    <Fragment slot="title">Ready to build some rockets?</Fragment>
 
     <Fragment slot="subtitle"> </Fragment>
   </CallToAction>