Preschool & Kindergarten

Project recap: we are building Little Sprouts Preschool — A warm, trustworthy website for a preschool, playschool or kindergarten with programs by age, a day-at-school timeline, facilities, teachers and an admissions form. Stack: Next.js (App Router) + Tailwind CSS. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections.

Now build ONLY section 1 of 9: Navbar.

Requirements:
logo, links (Programs, Our day, Facilities, Teachers, Admissions) and an "Enquire now" button, plus the phone number.

Create it as components/Navbar.jsx (a Server Component unless it needs state or event handlers — then add "use client" and keep the interactive part as small as possible), and add it to app/page.js in position 1.

Rules:
- Use only the existing design tokens and UI components; add new tokens only if truly needed and tell me.
- Mobile-first and responsive at 375px, 768px and 1200px+.
- Accessible: semantic elements, correct heading level (only the hero uses h1), alt text, keyboard focus styles, labels on any form fields.
- Realistic sample content for Little Sprouts Preschool (no lorem ipsum).
- Show me the complete code for every file you create or change.

Project recap: we are building Little Sprouts Preschool — A warm, trustworthy website for a preschool, playschool or kindergarten with programs by age, a day-at-school timeline, facilities, teachers and an admissions form. Stack: Next.js (App Router) + Tailwind CSS. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections.

Now build ONLY section 2 of 9: Hero.

Requirements:
split layout with the headline "Where curious little minds grow", a line about play-based learning, buttons ("Book a school visit", "Download brochure") and a photo, with a badge "Admissions open 2027–28".

Create it as components/Hero.jsx (a Server Component unless it needs state or event handlers — then add "use client" and keep the interactive part as small as possible), and add it to app/page.js in position 2.

Rules:
- Use only the existing design tokens and UI components; add new tokens only if truly needed and tell me.
- Mobile-first and responsive at 375px, 768px and 1200px+.
- Accessible: semantic elements, correct heading level (only the hero uses h1), alt text, keyboard focus styles, labels on any form fields.
- Realistic sample content for Little Sprouts Preschool (no lorem ipsum).
- Show me the complete code for every file you create or change.

Project recap: we are building Little Sprouts Preschool — A warm, trustworthy website for a preschool, playschool or kindergarten with programs by age, a day-at-school timeline, facilities, teachers and an admissions form. Stack: Next.js (App Router) + Tailwind CSS. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections.

Now build ONLY section 3 of 9: Programs by age.

Requirements:
four cards (Playgroup 1.5–2.5 yrs, Nursery 2.5–3.5 yrs, Junior KG 3.5–4.5 yrs, Senior KG 4.5–5.5 yrs) with timings and focus areas.

Create it as components/ProgramsByAge.jsx (a Server Component unless it needs state or event handlers — then add "use client" and keep the interactive part as small as possible), and add it to app/page.js in position 3.

Rules:
- Use only the existing design tokens and UI components; add new tokens only if truly needed and tell me.
- Mobile-first and responsive at 375px, 768px and 1200px+.
- Accessible: semantic elements, correct heading level (only the hero uses h1), alt text, keyboard focus styles, labels on any form fields.
- Realistic sample content for Little Sprouts Preschool (no lorem ipsum).
- Show me the complete code for every file you create or change.

Project recap: we are building Little Sprouts Preschool — A warm, trustworthy website for a preschool, playschool or kindergarten with programs by age, a day-at-school timeline, facilities, teachers and an admissions form. Stack: Next.js (App Router) + Tailwind CSS. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections.

Now build ONLY section 4 of 9: Why parents choose us.

Requirements:
six points (Small class sizes, Trained teachers, CCTV for parents, Healthy meals, Safe transport, Daily updates app) with icons.

Create it as components/WhyParentsChoose.jsx (a Server Component unless it needs state or event handlers — then add "use client" and keep the interactive part as small as possible), and add it to app/page.js in position 4.

Rules:
- Use only the existing design tokens and UI components; add new tokens only if truly needed and tell me.
- Mobile-first and responsive at 375px, 768px and 1200px+.
- Accessible: semantic elements, correct heading level (only the hero uses h1), alt text, keyboard focus styles, labels on any form fields.
- Realistic sample content for Little Sprouts Preschool (no lorem ipsum).
- Show me the complete code for every file you create or change.

Project recap: we are building Little Sprouts Preschool — A warm, trustworthy website for a preschool, playschool or kindergarten with programs by age, a day-at-school timeline, facilities, teachers and an admissions form. Stack: Next.js (App Router) + Tailwind CSS. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections.

Now build ONLY section 5 of 9: A day at school.

Requirements:
a vertical timeline from arrival to pick-up (Circle time, Free play, Snack, Story time, Art, Outdoor play).

Create it as components/ADayAt.jsx (a Server Component unless it needs state or event handlers — then add "use client" and keep the interactive part as small as possible), and add it to app/page.js in position 5.

Rules:
- Use only the existing design tokens and UI components; add new tokens only if truly needed and tell me.
- Mobile-first and responsive at 375px, 768px and 1200px+.
- Accessible: semantic elements, correct heading level (only the hero uses h1), alt text, keyboard focus styles, labels on any form fields.
- Realistic sample content for Little Sprouts Preschool (no lorem ipsum).
- Show me the complete code for every file you create or change.

Project recap: we are building Little Sprouts Preschool — A warm, trustworthy website for a preschool, playschool or kindergarten with programs by age, a day-at-school timeline, facilities, teachers and an admissions form. Stack: Next.js (App Router) + Tailwind CSS. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections.

Now build ONLY section 6 of 9: Facilities.

Requirements:
a photo grid of classrooms, play area, library corner and art room.

Create it as components/Facilities.jsx (a Server Component unless it needs state or event handlers — then add "use client" and keep the interactive part as small as possible), and add it to app/page.js in position 6.

Rules:
- Use only the existing design tokens and UI components; add new tokens only if truly needed and tell me.
- Mobile-first and responsive at 375px, 768px and 1200px+.
- Accessible: semantic elements, correct heading level (only the hero uses h1), alt text, keyboard focus styles, labels on any form fields.
- Realistic sample content for Little Sprouts Preschool (no lorem ipsum).
- Show me the complete code for every file you create or change.

Project recap: we are building Little Sprouts Preschool — A warm, trustworthy website for a preschool, playschool or kindergarten with programs by age, a day-at-school timeline, facilities, teachers and an admissions form. Stack: Next.js (App Router) + Tailwind CSS. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections.

Now build ONLY section 7 of 9: Teachers.

Requirements:
four teacher cards with photo, name, role and qualification.

Create it as components/Teachers.jsx (a Server Component unless it needs state or event handlers — then add "use client" and keep the interactive part as small as possible), and add it to app/page.js in position 7.

Rules:
- Use only the existing design tokens and UI components; add new tokens only if truly needed and tell me.
- Mobile-first and responsive at 375px, 768px and 1200px+.
- Accessible: semantic elements, correct heading level (only the hero uses h1), alt text, keyboard focus styles, labels on any form fields.
- Realistic sample content for Little Sprouts Preschool (no lorem ipsum).
- Show me the complete code for every file you create or change.

Project recap: we are building Little Sprouts Preschool — A warm, trustworthy website for a preschool, playschool or kindergarten with programs by age, a day-at-school timeline, facilities, teachers and an admissions form. Stack: Next.js (App Router) + Tailwind CSS. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections.

Now build ONLY section 8 of 9: Admissions enquiry.

Requirements:
parent name, phone, email, child's age (select), preferred program and a "Request a call back" button, with validation and a thank-you message.

Create it as components/AdmissionsEnquiry.jsx (a Server Component unless it needs state or event handlers — then add "use client" and keep the interactive part as small as possible), and add it to app/page.js in position 8.

Rules:
- Use only the existing design tokens and UI components; add new tokens only if truly needed and tell me.
- Mobile-first and responsive at 375px, 768px and 1200px+.
- Accessible: semantic elements, correct heading level (only the hero uses h1), alt text, keyboard focus styles, labels on any form fields.
- Realistic sample content for Little Sprouts Preschool (no lorem ipsum).
- Show me the complete code for every file you create or change.

Project recap: we are building Little Sprouts Preschool — A warm, trustworthy website for a preschool, playschool or kindergarten with programs by age, a day-at-school timeline, facilities, teachers and an admissions form. Stack: Next.js (App Router) + Tailwind CSS. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections.

Now build ONLY section 9 of 9: Footer.

Requirements:
address, timings, phone, email, map placeholder and social links.

Create it as components/Footer.jsx (a Server Component unless it needs state or event handlers — then add "use client" and keep the interactive part as small as possible), and add it to app/page.js in position 9.

Rules:
- Use only the existing design tokens and UI components; add new tokens only if truly needed and tell me.
- Mobile-first and responsive at 375px, 768px and 1200px+.
- Accessible: semantic elements, correct heading level (only the hero uses h1), alt text, keyboard focus styles, labels on any form fields.
- Realistic sample content for Little Sprouts Preschool (no lorem ipsum).
- Show me the complete code for every file you create or change.

Project recap: we are building Little Sprouts Preschool — A warm, trustworthy website for a preschool, playschool or kindergarten with programs by age, a day-at-school timeline, facilities, teachers and an admissions form. Stack: Next.js (App Router) + Tailwind CSS. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections.

All sections are built. Now add the interactions and animation layer.

Required behaviour:
the timeline items reveal one by one on scroll; the form shows inline errors and a friendly success state.

Also:
- Subtle hover and focus states on every link, button and card.
- Elements fade and slide up slightly as they scroll into view (IntersectionObserver in one small client component); run each animation once.
- Smooth scrolling for in-page links, with an offset for the sticky header.
- Every animation must be disabled when the user has prefers-reduced-motion set.
- Do not add heavy animation libraries. Show the full code of each changed file.

Project recap: we are building Little Sprouts Preschool — A warm, trustworthy website for a preschool, playschool or kindergarten with programs by age, a day-at-school timeline, facilities, teachers and an admissions form. Stack: Next.js (App Router) + Tailwind CSS. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections.

The home page is finished. Now add the admission process as steps, documents required, important dates and the enquiry form.

Route: /admissions.
- Move the Navbar and Footer into app/layout.js (if not already there) so every page shares them, and add a link to this page in the navigation.
- Put shared mock data in a lib/ or data/ file, not inside the component.
- Give the page its own metadata (title and description).
- Same design system and components, responsive and accessible as before.
- Show the full code for every new or changed file.

Project recap: we are building Little Sprouts Preschool — A warm, trustworthy website for a preschool, playschool or kindergarten with programs by age, a day-at-school timeline, facilities, teachers and an admissions form. Stack: Next.js (App Router) + Tailwind CSS. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections.

The home page is finished. Now add a clear fees table per program with term-wise payment schedule and what is included.

Route: /fees.
- Move the Navbar and Footer into app/layout.js (if not already there) so every page shares them, and add a link to this page in the navigation.
- Put shared mock data in a lib/ or data/ file, not inside the component.
- Give the page its own metadata (title and description).
- Same design system and components, responsive and accessible as before.
- Show the full code for every new or changed file.

Project recap: we are building Little Sprouts Preschool — A warm, trustworthy website for a preschool, playschool or kindergarten with programs by age, a day-at-school timeline, facilities, teachers and an admissions form. Stack: Next.js (App Router) + Tailwind CSS. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections.

The home page is finished. Now add albums for school events (Annual day, Sports day, Diwali celebration) with a lightbox.

Route: /gallery.
- Move the Navbar and Footer into app/layout.js (if not already there) so every page shares them, and add a link to this page in the navigation.
- Put shared mock data in a lib/ or data/ file, not inside the component.
- Give the page its own metadata (title and description).
- Same design system and components, responsive and accessible as before.
- Show the full code for every new or changed file.

Project recap: we are building Little Sprouts Preschool — A warm, trustworthy website for a preschool, playschool or kindergarten with programs by age, a day-at-school timeline, facilities, teachers and an admissions form. Stack: Next.js (App Router) + Tailwind CSS. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections.

The home page is finished. Now add a parent dashboard with today's activities, attendance, notices and photos from class, using mock data.

Route: /parents.
- Move the Navbar and Footer into app/layout.js (if not already there) so every page shares them, and add a link to this page in the navigation.
- Put shared mock data in a lib/ or data/ file, not inside the component.
- Give the page its own metadata (title and description).
- Same design system and components, responsive and accessible as before.
- Show the full code for every new or changed file.

Project recap: we are building Little Sprouts Preschool — A warm, trustworthy website for a preschool, playschool or kindergarten with programs by age, a day-at-school timeline, facilities, teachers and an admissions form. Stack: Next.js (App Router) + Tailwind CSS. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections.

Review the whole site and fix problems. Go through it at 360px, 768px, 1024px and 1440px widths and check:
- No horizontal scrolling, nothing overlapping, text never cut off, tap targets at least 44px.
- One h1 per page and a logical heading order; landmarks (header, nav, main, footer).
- Every image has meaningful alt text (or empty alt if decorative); every form field has a label and error messages are announced.
- Everything works with the keyboard alone, focus is always visible, and menus/accordions/modals manage focus and close with Escape.
- Colour contrast of at least 4.5:1 for body text.
List each issue you found and the fix, then show the changed code.

Project recap: we are building Little Sprouts Preschool — A warm, trustworthy website for a preschool, playschool or kindergarten with programs by age, a day-at-school timeline, facilities, teachers and an admissions form. Stack: Next.js (App Router) + Tailwind CSS. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections.

Prepare the site for search engines and fast loading:
- Metadata for every page (title, description, canonical, Open Graph and Twitter card) using the Metadata API, and a title template.
- app/sitemap.js and app/robots.js.
- JSON-LD structured data that fits Little Sprouts Preschool (Organization or LocalBusiness, plus FAQPage if there is an FAQ).
- Use next/image with correct sizes for every image, preload only the hero image, and lazy-load the rest.
- Make sure no component is a Client Component unless it needs to be.
Then tell me how to check the result with Lighthouse and what score to aim for.

Project recap: we are building Little Sprouts Preschool — A warm, trustworthy website for a preschool, playschool or kindergarten with programs by age, a day-at-school timeline, facilities, teachers and an admissions form. Stack: Next.js (App Router) + Tailwind CSS. Keep using the design system, colours, fonts and components we already created; do not rewrite earlier sections.

The site is ready. Walk me through launching it, step by step, for a beginner:
1. Push the project to a new GitHub repository (exact git commands).
2. Deploy it on Vercel (free plan) from that repository.
3. Connect a custom domain and set up HTTPS.
4. Add any environment variables the project needs.
5. Submit the sitemap to Google Search Console.
6. A final pre-launch checklist: replace all sample text, images, prices and contact details with real ones, test every link and form, and check it on a real phone.