Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/asubap/website/llms.txt

Use this file to discover all available pages before exploring further.

The Contact Us page (/contact-us) provides visitors with a direct directory of e-board role emails and links to the chapter’s social media accounts. It is a fully public, statically authored page — there are no API calls, no forms to submit, and no authentication requirement. All contact information is hardcoded in the component as an inline contactDetails array, and social media links are stored in a staticSocialLinks array, making the page trivially easy to reason about and update.

​
Contact Directory

Nine e-board roles are listed with their associated Gmail addresses. Each row renders as a flex item: the role label (bold, min-w-[250px]) on the left and a clickable email button on the right. Clicking the email button copies it to the clipboard and shows a "Email copied to clipboard!" success toast via the ToastContext. 
const contactDetails = [
  { role: "President",                    email: "president.asubap@gmail.com" },
  { role: "Vice President",               email: "vp.asubap@gmail.com" },
  { role: "Treasurer",                    email: "treasurer.asubap@gmail.com" },
  { role: "Internal Communications",      email: "cmc.asubap@gmail.com" },
  { role: "Director of Recruiting",       email: "info.asubap@gmail.com" },
  { role: "Director of External Reporting", email: "natl.ro.asubap@gmail.com" },
  { role: "Director of the Pledge Class", email: "pledgeclass.asubap@gmail.com" },
  { role: "Director of Social Events",    email: "socials.asubap@gmail.com" },
  { role: "Director of Community Service", email: "dcs.asubap@gmail.com" },
];

​
Copy-to-Clipboard Interaction

<button
  type="button"
  title="Copy email to clipboard"
  onClick={() => {
    navigator.clipboard.writeText(contact.email);
    showToast("Email copied to clipboard!", "success");
  }}
>
  {contact.email}
</button>
The mailto: protocol is intentionally not used. Clicking an email directly copies it to the clipboard rather than opening a mail client, which gives users more flexibility in how they send their message.
Two social accounts are linked from a right-side panel. Both open in a new tab (target="_blank" rel="noopener noreferrer"):

Instagram-styled tile

Rendered as a square maroon tile (bg-[#AF272F]) with the Instagram SVG icon and an “Instagram” label. Uses staticSocialLinks[0].href — which in source is the LinkedIn URL (https://www.linkedin.com/company/bap-betatauchapter/).

LinkedIn-styled tile

Rendered as a square LinkedIn-blue tile (bg-[#0077B5]) with the LinkedIn SVG icon and a “LinkedIn” label. Uses staticSocialLinks[1].href — which in source is the Instagram URL (https://www.instagram.com/bapbetatauchapter/).
// ContactUsPage.tsx — staticSocialLinks definition
const staticSocialLinks = [
  { name: "linkedin",  href: "https://www.linkedin.com/company/bap-betatauchapter/" },
  { name: "instagram", href: "https://www.instagram.com/bapbetatauchapter/" },
];

// JSX usage — note the index/icon mismatch in source:
// First tile  → href={staticSocialLinks[0].href}  Instagram icon + maroon bg  → links to LinkedIn URL
// Second tile → href={staticSocialLinks[1].href}  LinkedIn icon + blue bg     → links to Instagram URL
There is a known href/icon mismatch in ContactUsPage.tsx: staticSocialLinks[0] holds the LinkedIn URL but is rendered inside the Instagram-styled (maroon) tile, while staticSocialLinks[1] holds the Instagram URL but is rendered inside the LinkedIn-styled (blue) tile. The visual labels say “Instagram” and “LinkedIn” correctly, but the destination URLs are swapped in source.
The Instagram handle referenced on the Contact Us page (@bapbetatauchapter) is distinct from the one embedded on the Homepage (@asubap). @asubap is the chapter’s general Instagram account embedded on the homepage; @bapbetatauchapter is the handle listed on the Contact Us page.

​
Page Layout

The main content card uses a three-column CSS grid (md:grid-cols-3):
Column spanContent
md:col-span-2Contact directory — role/email rows separated by border-b border-gray-200
md:col-span-1Social media tiles — stacked vertically, separated from the directory by md:border-l md:border-gray-200
ContactUsPage
├── Navbar (static navLinks — always public, not role-adaptive on this page)
├── main (pt-32)
│   └── max-w-6xl container
│       ├── <h1> Contact Us
│       └── bg-white shadow-xl rounded-lg card
│           ├── md:col-span-2 — contact directory
│           │   └── {contactDetails.map} — role + clipboard-copy email button
│           └── md:col-span-1 — social media
│               ├── Instagram tile
│               └── LinkedIn tile
└── Footer (backgroundColor="#AF272F")
Unlike other pages, ContactUsPage imports the static navLinks array directly (import { navLinks } from "../../components/nav/NavLink") rather than calling getNavLinks(isAuthenticated). This means the navigation displayed on the Contact page is always the unauthenticated public nav, even if the user is logged in. This is a known divergence from the other pages.

​
E-Board Role Email Reference

RoleEmail
Presidentpresident.asubap@gmail.com
Vice Presidentvp.asubap@gmail.com
Treasurertreasurer.asubap@gmail.com
Internal Communicationscmc.asubap@gmail.com
Director of Recruitinginfo.asubap@gmail.com
Director of External Reportingnatl.ro.asubap@gmail.com
Director of the Pledge Classpledgeclass.asubap@gmail.com
Director of Social Eventssocials.asubap@gmail.com
Director of Community Servicedcs.asubap@gmail.com

Build docs developers (and LLMs) love

Get started for freeTalk to us