Home Page, Navigation, and Final Deploy

import type { Metadata } from 'next'
import Link from 'next/link'
import { SCHOOL, BRANCHES } from '@/lib/constants'
import { BranchCard } from '@/components/BranchCard'
 
export const metadata: Metadata = {
  title: `${SCHOOL.name} — ${SCHOOL.tagline}`,
  description: `${SCHOOL.name}, a ${SCHOOL.type} school in ${SCHOOL.city} since ${SCHOOL.founded}. ${BRANCHES.length} campuses.`,
}
 
export default function HomePage() {
  return (
    <>
      {/* Hero */}
      <section className="relative bg-dark-base text-white">
        <div className="absolute inset-0 opacity-30">
          <img src="/hero.jpg" alt="" className="w-full h-full object-cover" />
        </div>
        <div className="relative max-w-6xl mx-auto px-4 py-24 md:py-32 text-center">
          <p className="text-sm font-semibold uppercase tracking-widest text-amber mb-4">
            {SCHOOL.type} · Since {SCHOOL.founded}
          </p>
          <h1 className="font-display text-5xl md:text-7xl font-bold tracking-tight mb-6 max-w-4xl mx-auto leading-[1.05]">
            {SCHOOL.tagline}
          </h1>
          <p className="text-lg text-gray-300 mb-10 max-w-2xl mx-auto">
            {SCHOOL.name} — {BRANCHES.length} campuses across {SCHOOL.city}, one consistent curriculum, teachers who stay for years.
          </p>
          <div className="flex flex-wrap gap-3 justify-center">
            <Link href="/admissions"
              className="inline-flex items-center gap-2 bg-amber hover:bg-amber-dark text-dark-base font-semibold px-6 py-3 rounded-full transition-colors">
              Plan a Visit
            </Link>
            <Link href="/branches"
              className="inline-flex items-center gap-2 bg-white/10 hover:bg-white/20 text-white font-semibold px-6 py-3 rounded-full transition-colors backdrop-blur-sm">
              See Our Campuses
            </Link>
          </div>
        </div>
      </section>
 
      {/* About strip */}
      <section className="max-w-4xl mx-auto px-4 py-20 text-center">
        <p className="text-sm font-semibold uppercase tracking-widest text-indigo mb-4">About us</p>
        <h2 className="font-display text-4xl md:text-5xl font-bold text-dark-base mb-6">
          A school where children stay curious.
        </h2>
        <p className="text-lg text-gray-700 leading-relaxed">
          For over {new Date().getFullYear() - SCHOOL.founded} years, {SCHOOL.name} has helped children become confident, capable adults. Our small class sizes, long-tenured teachers, and emphasis on curiosity over rote learning have made us a quiet favourite of {SCHOOL.city} families.
        </p>
        <Link href="/about" className="inline-block mt-6 text-indigo hover:text-indigo-hover font-semibold">
          Read our full story &rarr;
        </Link>
      </section>
 
      {/* Featured branches */}
      <section className="bg-off-white py-20">
        <div className="max-w-6xl mx-auto px-4">
          <div className="text-center mb-12">
            <p className="text-sm font-semibold uppercase tracking-widest text-indigo mb-3">Our campuses</p>
            <h2 className="font-display text-4xl md:text-5xl font-bold text-dark-base">
              {BRANCHES.length} branches, one school
            </h2>
          </div>
          <div className="grid md:grid-cols-3 gap-6">
            {BRANCHES.map(branch => (
              <BranchCard key={branch.slug} branch={branch} />
            ))}
          </div>
          <div className="text-center mt-10">
            <Link href="/branches" className="inline-flex items-center gap-2 text-indigo hover:text-indigo-hover font-semibold">
              See full branch details &rarr;
            </Link>
          </div>
        </div>
      </section>
 
      {/* Admissions CTA */}
      <section className="max-w-4xl mx-auto px-4 py-24 text-center">
        <p className="text-sm font-semibold uppercase tracking-widest text-indigo mb-3">Admissions</p>
        <h2 className="font-display text-4xl md:text-5xl font-bold text-dark-base mb-4">
          Ready to meet us?
        </h2>
        <p className="text-lg text-gray-700 mb-8 max-w-xl mx-auto">
          Submit an inquiry today — we respond within 2 business days. No commitment.
        </p>
        <Link href="/admissions#contact-form"
          className="inline-flex items-center gap-2 bg-indigo hover:bg-indigo-hover text-white font-semibold px-8 py-3.5 rounded-full transition-colors">
          Send an inquiry
        </Link>
      </section>
    </>
  )
}

import Link from 'next/link'
import { SCHOOL } from '@/lib/constants'
 
const LINKS = [
  { label: 'Branches',   href: '/branches' },
  { label: 'Admissions', href: '/admissions' },
  { label: 'About',      href: '/about' },
]
 
export function Nav() {
  return (
    <header className="sticky top-0 z-40 bg-white/95 backdrop-blur border-b border-gray-100">
      <nav className="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
        <Link href="/" className="font-display text-xl font-bold tracking-tight text-dark-base">
          {SCHOOL.name}
        </Link>
        <div className="hidden md:flex items-center gap-8">
          {LINKS.map(l => (
            <Link key={l.href} href={l.href}
              className="text-[14px] font-medium text-gray-700 hover:text-indigo transition-colors">
              {l.label}
            </Link>
          ))}
          <Link href="/admissions#contact-form"
            className="inline-flex items-center gap-1.5 bg-indigo hover:bg-indigo-hover text-white text-[13px] font-semibold px-4 py-2 rounded-full transition-colors">
            Apply now
          </Link>
        </div>
        {/* Mobile menu hint — real mobile menu is a stretch task */}
        <Link href="/admissions#contact-form" className="md:hidden bg-indigo text-white text-[12px] font-semibold px-3 py-1.5 rounded-full">
          Apply
        </Link>
      </nav>
    </header>
  )
}

import Link from 'next/link'
import { SCHOOL, CONTACT, BRANCHES } from '@/lib/constants'
 
export function Footer() {
  return (
    <footer className="bg-dark-base text-gray-300 py-16 mt-20">
      <div className="max-w-6xl mx-auto px-4 grid md:grid-cols-4 gap-10">
        <div className="md:col-span-2">
          <p className="font-display text-2xl font-bold text-white mb-3">{SCHOOL.name}</p>
          <p className="text-[14px] text-gray-400 mb-4 max-w-sm">{SCHOOL.tagline}</p>
          <p className="text-[13px] text-gray-500">{SCHOOL.type} · Since {SCHOOL.founded}</p>
        </div>
 
        <div>
          <p className="text-[12px] font-semibold uppercase tracking-widest text-white mb-3">Visit</p>
          <ul className="space-y-2 text-[13px]">
            {BRANCHES.map(b => (
              <li key={b.slug}>
                <span className="text-gray-400">{b.name}</span>
              </li>
            ))}
          </ul>
          <Link href="/branches" className="inline-block mt-3 text-[13px] text-indigo hover:text-white transition-colors">
            All campuses &rarr;
          </Link>
        </div>
 
        <div>
          <p className="text-[12px] font-semibold uppercase tracking-widest text-white mb-3">Contact</p>
          <ul className="space-y-2 text-[13px]">
            <li><a href={`tel:${CONTACT.phoneTel}`} className="hover:text-white transition-colors">{CONTACT.phoneDisplay}</a></li>
            <li><a href={`mailto:${CONTACT.generalEmail}`} className="hover:text-white transition-colors">{CONTACT.generalEmail}</a></li>
            <li className="text-gray-500">{CONTACT.hours}</li>
          </ul>
        </div>
      </div>
 
      <div className="max-w-6xl mx-auto px-4 mt-12 pt-6 border-t border-gray-800 text-[12px] text-gray-500 flex flex-wrap justify-between gap-2">
        <p>&copy; {new Date().getFullYear()} {SCHOOL.name}. All rights reserved.</p>
        <p>Built with Next.js</p>
      </div>
    </footer>
  )
}

import { Nav } from '@/components/Nav'
import { Footer } from '@/components/Footer'
// ...
 
return (
  <html lang="en" className={`${dmSans.variable} ${cormorant.variable}`}>
    <body className="font-sans bg-white text-dark-base antialiased flex flex-col min-h-screen">
      <Nav />
      <div className="flex-1">{children}</div>
      <Footer />
    </body>
  </html>
)

import type { Metadata } from 'next'
import { SCHOOL } from '@/lib/constants'
 
export const metadata: Metadata = {
  title: `About — ${SCHOOL.name}`,
  description: `The story of ${SCHOOL.name}, our philosophy, and what makes our schools different.`,
}
 
export default function AboutPage() {
  return (
    <main className="max-w-3xl mx-auto px-4 py-16">
      <div className="text-center mb-12">
        <p className="text-sm font-semibold uppercase tracking-widest text-indigo mb-3">About us</p>
        <h1 className="font-display text-5xl md:text-6xl font-bold tracking-tight text-dark-base">
          Our story
        </h1>
      </div>
 
      <div className="prose prose-lg text-gray-700 space-y-6 leading-relaxed">
        <p>
          {SCHOOL.name} began in {SCHOOL.founded} with a single classroom and twelve students. The founder, a working teacher, wanted to build a school where children stayed curious — not one where curiosity was crushed by exams.
        </p>
        <p>
          More than {new Date().getFullYear() - SCHOOL.founded} years on, we have grown to three campuses across {SCHOOL.city}, serving over 2,000 children. The classrooms are different. The philosophy isn't.
        </p>
        <h2 className="font-display text-3xl text-dark-base mt-12">What we believe</h2>
        <p>
          A child's job is to be curious. A school's job is not to interfere with that. Everything we do — small classes, long-tenured teachers, a robotics lab from Grade 4, weekly time for self-directed projects — is shaped by that one belief.
        </p>
        <h2 className="font-display text-3xl text-dark-base mt-12">What you'll notice when you visit</h2>
        <p>
          Children speak freely with teachers. Classrooms have project work on the walls, not just exam timetables. There is a sense of *un-hurriedness* that is hard to put into words but easy to feel.
        </p>
        <h2 className="font-display text-3xl text-dark-base mt-12">Visit us</h2>
        <p>
          The best way to know whether we are right for your family is to spend an hour at one of our campuses. Pick a day. We'll show you around.
        </p>
      </div>
    </main>
  )
}

git add .
git commit -m "home page, nav, footer, about page"
git push