Overview
Adlai Health Food Club is the marketing and membership site for a monthly subscription box of Adlai (Job’s Tears) — a gluten-free, low-glycemic heritage grain harvested by tribal farmers in the Mindanao highlands. The site handles pre-enrollment, plan selection, order tracking, and a full admin panel for managing members, orders, and waybills.
Features
- Custom SVG icon set replacing every emoji — consistent stroke weight, brand-matched amber/green accents, and crisp rendering at any size
- Scroll-triggered reveal animations on every section (
.revealIntersectionObserver pattern, staggered for grids) - Hover micro-interactions on cards, plan tiers, and CTAs — lift, shadow, and color transitions tuned for a calm, premium feel
- Animated hero with parallax-style background, pulsing status dot, and gradient overlay for legible copy
- Full membership flow — plan picker, enrollment form, success page, and member ID generation
- Public order tracker by membership ID or order number
- Admin panel — orders with full detail modal, payments, roles, analytics, and a 4×6 printable waybill PDF
How it works
The public site is a static Astro build with Tailwind for styling and a small client-side IntersectionObserver script that progressively reveals content as the user scrolls. Each section uses the same SVG icon vocabulary so the visual rhythm stays consistent from the hero through the FAQ. Hover states are kept lightweight — transforms and color transitions only — so the page feels responsive without being noisy.
Behind the scenes, enrollment writes to a serverless API that issues a membership ID, and the admin panel reads back orders with full payment, plan, and status detail. Waybills render as a print-optimized 4×6 page for direct thermal printing.