feat: added about us api integration

[jenniferhuangg]

Description

Type of Change

• Bug fix
• New feature
• Refactor / code improvement
• Documentation update
• Style / UI change
• Configuration change

Changes Made

• Added Supabase Exec table API integration for About Us page
• Members show up dynamically and show up under a team, grouped by index
• Has default photo if no photo for exec added
• Edited text size to fit photo margins
• Works on different screen sizes

Screenshots / Recordings

Testing

• Tested locally
• Verified on mobile / responsive views
• Added or updated tests

Checklist

• Code follows the project's style guidelines
• No new warnings or errors in the console
• Related documentation has been updated (if applicable)
• PR title follows conventional format (e.g., feat:, fix:, refactor:)

Related Issues

Additional Notes

[Copilot]

Pull request overview

Adds dynamic Executive Team rendering on the About page by fetching exec member data from a Supabase Edge Function, along with UI updates to support remote profile images and a default placeholder when images are missing.

Changes:

• Fetch exec team data from Supabase and render team sections dynamically.
• Add a default “person” placeholder when an exec member has no image.
• Allow Next Image optimization for images hosted on the project’s Supabase domain.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.

File	Description
frontend/next.config.ts	Allows next/image to load/optimize images from the Supabase project domain.
frontend/components/FlipCard.jsx	Adds a placeholder graphic for missing images; adjusts name/role text layout.
frontend/components/ExecutiveSection.jsx	Replaces hardcoded exec data with a client-side fetch + dynamic grouping/rendering.

[kr1shap]

The ordering is wrong, can we fix this? There is many more but I can't attach all.

[kr1shap]

@tjhiaj is it fine to have the hostname of our project URL public? This is for Nextjs to render our images from our bucket

[Copilot]

Pull request overview

Adds dynamic “About Us / Executive Team” data loading by proxying Supabase Exec table data through a Next.js API route and rendering members in grouped sections on the About Us page.

Changes:

• Added /api/execs route handler to proxy Supabase Edge Function exec responses.
• Refactored ExecutiveSection to fetch execs dynamically and group members by configured order_index ranges and role buckets.
• Updated UI components to support missing photos (placeholder) and added Supabase image host allowlist for next/image.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
frontend/next.config.ts	Allows next/image to load remote images from the Supabase project domain.
frontend/components/PersonPlaceholder.jsx	Adds a default placeholder graphic for exec cards with no photo.
frontend/components/Navbar.tsx	Updates the About nav link to the /aboutus route.
frontend/components/FlipCard.jsx	Uses the placeholder when imageUrl is missing; tweaks image sizing and text layout.
frontend/components/ExecutiveSection.jsx	Fetches exec data from /api/execs, groups it into sections, and renders role-based rows.
frontend/app/api/execs/route.js	Introduces a Next.js API proxy to call the Supabase exec Edge Function.

[kr1shap]

Ditto comments,

For the hostname URL under next config (whatever the file is), use this

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "uhugvwdetrwvhhrsyvoz.supabase.co",
        pathname: "/storage/v1/object/public/event-images/**",
      },
    ],
  },
};

export default nextConfig;

Other comments left by copilot, take a look and see if there is anything that shoould be changed from that.

[jenniferhuangg]

I fixed the pr comments, here is a visual of layout