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 Homepage is the first page every visitor sees and is fully accessible without authentication. It composes two core sections — a full-screen Hero banner and a WhoWeAre information block — inside a white Navbar / maroon Footer shell. Navigation links adapt at render time: unauthenticated visitors receive the public nav (About Us, Our Sponsors, Events, E-Board & Faculty, Membership, Log In), while authenticated users receive the members-only nav (Network, Sponsors, Events, Dashboard). The page reads isAuthenticated and role from the useAuth() context and passes both into Navbar and WhoWeAre.

​
Layout Overview

<Homepage>
  <Navbar links={getNavLinks(isAuthenticated)} backgroundColor="#FFFFFF" outlineColor="#AF272F" />
  <main>
    <Hero />        {/* full-screen section with id="hero" */}
    <WhoWeAre />    {/* section with id="who-we-are" */}
  </main>
  <Footer backgroundColor="#AF272F" />
</Homepage>

​
Hero Component

The Hero renders a full-viewport-height (h-screen) section using BAP_Homepage_BG.png as a background image with a dark #101010 overlay at 70% opacity. Content is centered with the chapter name, sub-title, and BAP_Logo.png. GPU-acceleration hints (translate3d, backfaceVisibility: hidden) are applied to the image and overlay to prevent repaint jank on scroll.

IntersectionObserver

Watches the hero element at a 10% visibility threshold. When the hero scrolls out of view the animated scroll-arrow hides itself, keeping the UI clean on the WhoWeAre section.

Scroll Arrow

A ChevronDown button (Lucide) positioned bottom-4 sm:bottom-6 md:bottom-8 right-8 sm:right-16 md:right-24 calls scrollIntoView({ behavior: 'smooth' }) targeting #who-we-are. The button is conditionally rendered only while isVisible is true.
// Hero.tsx — IntersectionObserver setup
const observer = new IntersectionObserver(
  ([entry]) => setIsVisible(entry.isIntersecting),
  { threshold: 0.1 }
);
observer.observe(heroRef.current);

​
WhoWeAre Component

The WhoWeAre section (id="who-we-are") renders below the Hero and handles three independent concerns:
1

Fetch dynamic apply-form URL

On mount, the component calls GET /links?link_name=forms to retrieve the current Google Form URL set by e-board administrators. A fallback URL is pre-seeded in state so the button is never broken even if the request fails.
const response = await fetch(
  `${import.meta.env.VITE_BACKEND_URL}/links?link_name=forms`
);
const data = await response.json();
setApplyFormUrl(data[0]?.link || "");
2

Load Instagram embed script

A <script src="//www.instagram.com/embed.js"> tag is appended to document.body dynamically. If window.instgrm already exists (script cached), window.instgrm.Embeds.process() is called immediately to re-process the embed. The script is removed on component unmount.
3

Render two-column layout

A responsive CSS grid (grid-cols-1 md:grid-cols-2) places the Who We Are prose and apply button on the left, and an Instagram profile embed (@asubap) on the right. On mobile the columns stack with the text first.

​
Apply Button & E-Board Edit

The Click Here To Apply! button opens applyFormUrl in a new tab. When the logged-in role is "e-board", a pencil-icon overlay button appears on the top-right corner of the apply button. Clicking it opens a Modal with a text input, allowing the e-board to overwrite the URL via a PUT /links request. 
// E-board URL update — WhoWeAre.tsx
const response = await fetch(`${import.meta.env.VITE_BACKEND_URL}/links`, {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${session.access_token}`,
  },
  body: JSON.stringify({ link_name: "forms", link: newUrl }),
});
The apply-form URL update is authenticated — only users with the "e-board" role can see the edit button. Changes take effect immediately for all visitors on the next page load.

​
Member Testimonial

Below the two-column grid a blockquote testimonial is rendered inside a bg-gray-50 card with a left border-[#AF272F] accent. The quote is attributed to “BAP Beta Tau Member” and is statically authored in the component. Navigation links are generated by getNavLinks(isAuthenticated) exported from NavLink.ts. The function returns one of two static arrays: 
[
  { name: "About Us",        href: "/about" },
  { name: "Our Sponsors",    href: "/sponsors" },
  { name: "Events",          href: "/events" },
  { name: "E-Board & Faculty", href: "/eboard-faculty" },
  { name: "Membership",      href: "/membership" },
  { name: "Log In",          href: "/login" },
]
PropValue
backgroundColor#FFFFFF
outlineColor#AF272F
title"Beta Alpha Psi | Beta Tau Chapter"
Footer backgroundColor#AF272F
The role prop is forwarded to Navbar so the nav bar can render role-specific controls (e.g., the admin dashboard link) without needing its own auth context call.

Build docs developers (and LLMs) love

Get started for freeTalk to us