Deboy
README.md

Agape Education Center Website

A modern, responsive school website built for Agape Education Center featuring sections for Kindergarten, Primary School, and Junior Secondary education levels.

Features

  • Responsive Design: Mobile-first approach with clean, intuitive UI
  • Color Scheme: Black, white, and red (uniform colors) with green and white accents (games kit colors)
  • Hero Section: Features school motto "Your future is here"
  • Multiple Pages: About Us, Admissions, Calendar, Staff Directory, Events, Media Gallery, Contact
  • Modular Design: Easily extendable for future parent/student portal integration
  • Interactive Elements: Large CTAs, testimonial carousels, consistent layout

Project Structure

├── backend/
│   ├── index.ts             # Main Hono server
│   └── README.md
├── frontend/
│   ├── components/
│   │   ├── App.tsx          # Main React app
│   │   ├── Header.tsx       # Navigation header
│   │   ├── Footer.tsx       # Site footer
│   │   ├── Hero.tsx         # Hero section
│   │   └── pages/           # Page components
│   ├── index.html           # Main HTML template
│   ├── index.tsx            # Frontend entry point
│   ├── style.css            # Custom styles
│   └── README.md
├── shared/
│   ├── types.ts             # Shared TypeScript types
│   └── README.md
└── README.md

Technology Stack

  • Backend: Hono (TypeScript)
  • Frontend: React 18.2.0 with TypeScript
  • Styling: TailwindCSS
  • Icons: Lucide React
  • Deployment: Val Town

Getting Started

The website is served from the backend which handles routing and serves static assets. The main entry point is /backend/index.ts.

Color Scheme

  • Primary: Black (#000000), White (#FFFFFF), Red (#DC2626) - Uniform colors
  • Accent: Green (#16A34A), White (#FFFFFF) - Games kit colors
  • Supporting: Gray shades for text and backgrounds

Pages

  1. Home: Hero section with motto, school overview, quick links
  2. About Us: School history, mission, vision, values
  3. Admissions: Application process, requirements, fees
  4. Calendar: Academic calendar and important dates
  5. Staff Directory: Faculty and staff information
  6. Events: Upcoming and past school events
  7. Media Gallery: Photos and videos from school activities
  8. Contact: Contact information and inquiry form

Future Extensions

The modular design allows for easy addition of:

  • Parent portal
  • Student portal
  • Online learning management system
  • Payment gateway integration
  • Mobile app integration