// site-pages.jsx — All pages for the JTH Beta Club site. // Counts from 0 to `to` with a cubic ease-out over `duration` ms function CountUp({ to, prefix = '', suffix = '', duration = 1200 }) { const [val, setVal] = React.useState(0); React.useEffect(() => { let raf; const start = performance.now(); const step = (now) => { const t = Math.min((now - start) / duration, 1); const ease = 1 - Math.pow(1 - t, 3); setVal(Math.round(ease * to)); if (t < 1) raf = requestAnimationFrame(step); }; raf = requestAnimationFrame(step); return () => cancelAnimationFrame(raf); }, [to, duration]); return <>{prefix}{val.toLocaleString()}{suffix}; } // Shows a real image; falls back to skeleton PhotoSlot if it fails to load function SmartPhoto({ src, alt = '', ratio = '4/3', label, style }) { const [err, setErr] = React.useState(false); if (err) return ; return (
{alt} setErr(true)} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
); } function useLoaded(delay = 200) { const [loaded, setLoaded] = React.useState(false); React.useEffect(() => { const t = setTimeout(() => setLoaded(true), delay); return () => clearTimeout(t); }, []); return loaded; } function PageSkeleton() { const mobile = useMobile(); const navy = '#04294e'; return (
{[1, 2, 3].map((i) => (
))}
); } // =============================================================== HOME function HomePage({ fonts, setPage }) { const navy = '#04294e'; const yellow = '#FFD140'; const mobile = useMobile(); const loaded = useLoaded(); if (!loaded) return ; return (
{/* HERO */}

Beta is
service.

We're the largest student-led organization at Hoggard. We strive to give back to the community and make the world a better place.

{/* CTA RECTANGLE + STICKER */}
{UPCOMING_EVENTS[0] && (
✦ Up next
{UPCOMING_EVENTS[0].title} · {UPCOMING_EVENTS[0].mo.charAt(0).toUpperCase() + UPCOMING_EVENTS[0].mo.slice(1).toLowerCase()} {UPCOMING_EVENTS[0].day}
 )}
Ready to volunteer?
Sign up
for an event.
{STATS.map((s, i) => (
{s.label}
))}
{/* PHOTO COLLAGE */}
{[ 'https://res.cloudinary.com/dbc9mudek/image/upload/v1785864273/betacollage1_gjdkku.jpg', 'https://res.cloudinary.com/dbc9mudek/image/upload/v1785864267/betacollage2_zwz6tx.jpg', 'https://res.cloudinary.com/dbc9mudek/image/upload/v1785864270/betacollage3_ybrpmt.jpg', 'https://res.cloudinary.com/dbc9mudek/image/upload/v1785864270/betacollage4_ucozr0.jpg', 'https://res.cloudinary.com/dbc9mudek/image/upload/v1785864283/betacollage5_g4aofc.png', 'https://res.cloudinary.com/dbc9mudek/image/upload/v1785864264/betacollage6_premrm.png', ].map((src, i) => ( ))}
{/* FEATURED EVENT */}
Signature event
{!mobile &&
}
April 18

Sleep In Heavenly
Peace Bed Build.

After raising over $5,000 in monetary and bedding donations last spring, Hoggard Beta sponsored a Bed Build with Sleep In Heavenly Peace, a local nonprofit that builds and delivers beds to kids in Wilmington who don't have one.

Hoggard Betas worked alongside community members to build 25 beds for kids in our town. We're doing it again this spring.

{/* FOUR PILLARS */}

The four pillars

{!mobile &&
}
{PILLARS.map((c, i) => (
{c.n}
{c.t}

{c.d}

))}
); } // =============================================================== ABOUT function AboutPage({ fonts, setPage }) { const navy = '#04294e'; const yellow = '#FFD140'; const mobile = useMobile(); const loaded = useLoaded(); if (!loaded) return ; return (
About the chapter

Started in
1991.{' '}Still going.

Who we are

Welcome to the largest student-led organization at John T. Hoggard High School, and the largest student service club in Southeastern North Carolina. Our chapter of the National Beta Club was started in 1991 and is built on the core pillars of service, character, leadership, and achievement.

As part of a nationwide network, we uphold the National Beta Club's mission of promoting academic achievement and community involvement. But more than that, Hoggard Beta is a student-driven club, run by a dedicated team of officers who manage events, volunteer opportunities, competitions, and this website.

Membership isn't just about earning service hours - it's about being an engaged leader and making a difference in both our school and community. We encourage every member to stay active, take initiative, and represent the values that define Beta.

✦ Largest service club in SE NC
Our mission

To promote the ideals of academic achievement, character, service, and leadership among students.

{PILLARS.map((c, i) => (
{c.n}
{c.t}

{c.d}

))}
Want in? Apply.
); } // =============================================================== EVENT SIGN UP function SignupPage({ fonts }) { const navy = '#04294e'; const yellow = '#FFD140'; const mobile = useMobile(); const loaded = useLoaded(); if (!loaded) return ; const renderEventList = (events, isRecurring) => { if (events.length === 0) { return (
No events listed yet

Check back soon.

); } return (
{events.map((e, i) => (
{isRecurring ? (
{e.dates}
) : (
{e.day}
{e.mo}
)}
{e.title}
{e.detail}
{e.dateNote && (
↻ {e.dateNote}
)}
{e.spots && (
{e.spots} Slots
)}
{e.url ? ( Sign up here first → ) : !e.url2 ? ( Sign up → ) : null} {e.url2 && ( Here second → )}
))}
); }; return (
Event sign up

Pick an event.
Show up.

All Beta-sponsored events for the semester. Hours from these count toward your requirement. Sign up below, and add the events to your log within one week of the event.

{/* HOUR SUBMISSION FORM */}
Submit Your Hours

After each event, use this form to submit your volunteer hours. Must be submitted within 1 week of the event — late submissions may not be counted.

Submit Hours →
{/* ONE-TIME EVENTS */}

One-Time Events

{!mobile &&
}
{renderEventList(UPCOMING_EVENTS, false)}
{/* RECURRING EVENTS */}

Recurring Events

{!mobile &&
}
{renderEventList(RECURRING_EVENTS, true)}
{/* HOUR LOG DUE DATES */}
Hour log due dates
{[ { l: 'Fall semester log', d: 'Jan 15, 2027', sub: 'All grades' }, { l: 'Spring log · Seniors', d: 'TBD', sub: 'Earlier deadline' }, { l: 'Spring log · Sophomores & Juniors', d: 'TBD', sub: 'Standard deadline' }, ].map((d, i) => (
{d.l}
{d.d}
{d.sub}
))}
); } // =============================================================== REQUEST VOLUNTEERS function VolunteersPage({ fonts }) { const navy = '#04294e'; const yellow = '#FFD140'; const mobile = useMobile(); const loaded = useLoaded(); if (!loaded) return ; return (
For community partners

Need hands?
We've got 'em.

Nonprofits, schools, and community orgs across the Wilmington area. Tell us what you need and our community outreach coordinators will be in touch within 24-72 hours.

Volunteer Request Form
jthbetaclub
); } // =============================================================== INFO function InfoPage({ fonts, setPage }) { const navy = '#04294e'; const yellow = '#FFD140'; const mobile = useMobile(); const loaded = useLoaded(); const tileBgs = ['#fff', yellow, navy, '#fff']; if (!loaded) return ; return (
Info

Member
resources.

Bookmark this page. Everything you need to be a member lives here.

{/* Quick glance requirements */}

Quick glance: requirements

{!mobile &&
}
{[ { g: 'Sophomores', hrs: '20', events: '2', gpa: '3.6 / 3.8', logDue: 'TBD' }, { g: 'Juniors', hrs: '20', events: '2', gpa: '3.6 / 3.8', logDue: 'TBD' }, { g: 'Seniors', hrs: '20', events: '2', gpa: '3.6 / 3.8', logDue: 'TBD' }, ].map((r, i) => (
{r.g}
{[['Hours / yr', r.hrs], ['Events / sem', r.events], ['GPA (unwt / wt)', r.gpa], ['Spring log due', r.logDue]].map(([k, v], j) => (
{k} {v}
))}
))}

Note: Only 2 hours per semester may come from item drives (Blanket Drive, Operation Christmas Child, etc). 5 hours over the fall requirement roll over to spring.

); } // =============================================================== CONTACT function ContactPage({ fonts }) { const navy = '#04294e'; const yellow = '#FFD140'; const mobile = useMobile(); const loaded = useLoaded(); if (!loaded) return ; return (
Contact

Say
hello.

Questions about membership, applications, or partnering on a service event? Email is the fastest way. For club issues, talk to an officer or one of our advisors directly.

Our advisors

{!mobile &&
}
{ADVISORS.map((a, i) => (
{a.name}
{a.role}
{a.email}
))}
@
Email the club

Officers and advisors check this together. Expect a reply within a couple school days.

jthbetaclub@gmail.com
★
Stop by

Meetings happen during the school year. Check the Info page for the current schedule.

John T. Hoggard High School
4305 Shipyard Blvd
Wilmington, NC 28403
); } // =============================================================== LEADERSHIP function LeadershipPage({ fonts, setPage }) { const navy = '#04294e'; const yellow = '#FFD140'; const mobile = useMobile(); const loaded = useLoaded(); const cols = mobile ? 2 : 4; const totalRows = Math.ceil(OFFICERS.length / cols); if (!loaded) return ; return (
2025-26

Current
Leadership.

{/* Officer grid */}
{OFFICERS.map((o, i) => { const row = Math.floor(i / cols); const col = i % cols; const isRowEnd = col === cols - 1 || i === OFFICERS.length - 1; const isLastRow = row === totalRows - 1; const bg = (row + col) % 2 === 0 ? '#fff' : yellow; return (
{o.name}
{o.title}
); })}
{/* Advisors */}

Faculty Advisors

{!mobile &&
}
{ADVISORS.map((a, i) => (
{a.name}
{a.role}
{a.email}
))}
); } // =============================================================== MEMBER REQUIREMENTS function RequirementsPage({ fonts, setPage }) { const navy = '#04294e'; const yellow = '#FFD140'; const mobile = useMobile(); const loaded = useLoaded(); const grades = [ { g: 'Sophomores', hrs: '20', events: '2 / semester', gpa: '3.6 unweighted\n3.8 weighted', fallDue: 'Jan 15, 2027', springDue: 'TBD' }, { g: 'Juniors', hrs: '20', events: '2 / semester', gpa: '3.6 unweighted\n3.8 weighted', fallDue: 'Jan 15, 2027', springDue: 'TBD' }, { g: 'Seniors', hrs: '20', events: '2 / semester', gpa: '3.6 unweighted\n3.8 weighted', fallDue: 'Jan 15, 2027', springDue: 'TBD' }, ]; const notes = [ { icon: '⏱', title: 'Item Drive Hours', body: 'Only 2 hours per semester may come from item drives (Blanket Drive, Operation Christmas Child, etc.). These events are valuable, but can\'t be the majority of your hours.' }, { icon: '→', title: 'Hour Rollover', body: 'If you earn more than 10 hours in the fall semester, up to 5 extra hours carry over to your spring requirement. Complete your log on time to take advantage of this.' }, { icon: '✓', title: 'Attendance', body: 'You must attend at least 2 Beta-sponsored service events per semester. Logging outside volunteer hours counts toward your total, but events matter separately.' }, { icon: '!', title: 'Log Completion', body: 'Complete your hour log by the deadline for your grade. Late logs may not be accepted. Contact an advisor if you have an extenuating circumstance before the deadline.' }, ]; if (!loaded) return ; return (
2025-26

Member
Requirements.

To remain an active member in good standing, you must meet the following requirements each school year. Check your grade level below.

{/* Grade table */}
{grades.map((r, i) => (
{r.g}
{[ ['Annual hours', r.hrs], ['Events', r.events], ['GPA', r.gpa], ['Fall log due', r.fallDue], ['Spring log due', r.springDue], ].map(([k, v], j) => (
{k}
{v}
))}
))}
{/* Notes grid */}

Important notes

{!mobile &&
}
{notes.map((n, i) => { const row = Math.floor(i / 2); const col = i % 2; const isLastRow = row === Math.ceil(notes.length / 2) - 1; return (
{n.icon}
{n.title}

{n.body}

); })}
); } // =============================================================== MEETING PRESENTATIONS function SlidesPage({ fonts, setPage }) { const navy = '#04294e'; const yellow = '#FFD140'; const mobile = useMobile(); const loaded = useLoaded(); if (!loaded) return ; return (
2025-26

Meeting
Presentations.

Presentations from our meetings will be posted here when available.

▶
No presentations yet

Check back after meetings. Slides will be added here when they're ready.

); } // =============================================================== APPLICATIONS function ApplicationsPage({ fonts, setPage }) { const navy = '#04294e'; const yellow = '#FFD140'; const mobile = useMobile(); const loaded = useLoaded(); if (!loaded) return ; const apps = [ { key: 'general', icon: '✓', title: 'General Membership Application', sub: 'For students interested in joining JTH Beta Club. Acceptance is based on GPA, teacher recommendations, and a brief essay.', badge: 'New members', bg: '#fff', }, { key: 'officer', icon: '★', title: 'Officer Application', sub: 'For current members who want to run for a leadership position. Open to Sophomores, Juniors, and Seniors in good standing.', badge: 'Current members', bg: yellow, }, ]; return (
2025-26

Applications.

✕
Applications are closed for 2025-2026

The application window for the current school year has passed. Check back in the fall when new membership applications open.

{apps.map((a) => (
{a.icon}
{a.title}
{a.badge}

{a.sub}

))}
); } Object.assign(window, { SmartPhoto, HomePage, AboutPage, SignupPage, VolunteersPage, InfoPage, ContactPage, LeadershipPage, RequirementsPage, SlidesPage, ApplicationsPage, });