Steps, eligibility, and the page that will host the contact form. The structure prepares the ground for the next page.
The /admissions page is the second major page you build. It's mostly text and structure — no list-rendering yet — but it ends with the most important piece of Project 2: a placeholder for the contact form, which you'll wire up in the next page.
By the end of this page you'll have:
A working /admissions route
A clear 4-step process visualised on the page
An eligibility section
A "Contact admissions" placeholder area (the form goes there next page)
export const ADMISSION_STEPS = [ { num: 1, title: 'Inquire', desc: 'Submit the inquiry form below. We respond within 2 business days.', }, { num: 2, title: 'Visit', desc: 'Schedule a campus visit for you and your child.', }, { num: 3, title: 'Apply', desc: 'Submit the application form, previous school report, and ID proof.', }, { num: 4, title: 'Assessment & Interview', desc: 'Your child meets two teachers and we chat with the family.', }, { num: 5, title: 'Confirmation', desc: 'Admission letter with fee schedule and joining date.', },] as constexport const ELIGIBILITY = [ { grade: 'Nursery', age: 'Completed 3 years by 31 March', docs: 'Birth certificate, parent ID, address proof', }, { grade: 'Grade 1', age: 'Completed 5 years by 31 March', docs: 'Birth certificate, previous school report (if applicable)', }, { grade: 'Grades 2 to 10', age: 'Age-appropriate to grade', docs: 'Previous school report card, transfer certificate, ID proof', }, { grade: 'Grades 11–12', age: 'Subject to seat availability', docs: 'Grade 10 results, transfer certificate, stream preference', },] as const
Same pattern as BRANCHES — declare the data once, render anywhere.
Open Chrome DevTools (F12 or Cmd+Opt+I). Click the device-emulation icon (or press Ctrl+Shift+M / Cmd+Shift+M). Pick iPhone 14 Pro.
Scroll through /admissions on the mobile view. Most likely things to fix:
5 steps in a row collapses to 1 column on mobile — this is automatic because we used md:grid-cols-5 (5 columns from medium screens up, defaulting to 1 column on small screens). Good.
Table might overflow. We wrapped it in overflow-x-auto so it scrolls horizontally on small screens. Fine for a 3-column table.
Headings might be too big on mobile. We used text-5xl md:text-6xl — 5xl on mobile, 6xl on desktop. Adjust if it feels too cramped.
Make any fixes you spot. Save, see the changes live, commit when satisfied.
You probably want this page reachable from the home page navigation. We'll build the proper <Nav> component when we do the home page, but for now you can quickly add a link to the root layout.tsx if you want to navigate by clicking instead of typing the URL.
Or — equally fine for now — just keep typing /admissions directly. We will set up the proper navigation once.
Adding multiple data shapes (ADMISSION_STEPS, ELIGIBILITY) to one constants file.
Using .map() to render both a grid (steps) and a table (eligibility) from arrays.
Sectioning a long page with consistent visual hierarchy.
Adding an id (contact-form) on a section — useful for anchor links and for the next page when we wire up the form.
Adding a deliberate placeholder for unfinished work.
The next page wires up the inquiry form properly — frontend with React Hook Form + Zod validation, backend with a Supabase Edge Function + Resend, real email delivery.