Chat AI and School Landing Webpage

1. System Description

This system is a standalone, responsive HTML website designed for a school or educational institution. It's built using modern web technologies like Tailwind CSS for styling and JavaScript for interactivity, including a dynamic AI chatbot. The website is self-contained within a single HTML file, making it easy to deploy and share.

2. Key Features

• Responsive Design: The website is designed to adapt seamlessly to various screen sizes (desktops, tablets, mobile phones) using Bootstrap principles and Tailwind CSS utility classes, ensuring a consistent user experience across devices.

• Intuitive Navigation:

  • A sticky navigation bar remains visible as users scroll.

  • Desktop: Features smooth hover animations with an expanding underline effect and a subtle lift for each menu item.

  • Mobile: Implements a hamburger menu that toggles a full-screen overlay navigation, with animated link transitions for a modern feel.

• Hero Section: A prominent introductory section with a compelling headline, a brief description, and a clear call-to-action button, set against a customizable background image.

• Enrollment Section: A dedicated form for prospective students to easily submit their personal and course preference details.

• Course List Section: Showcases various academic or workshop offerings in an organized, card-based layout, providing brief descriptions and "Learn More" buttons for each course.

• Contact Us Section: Provides essential contact information (address, phone, email) and a contact form for inquiries, facilitating communication with the school.

• AI Chatbot Integration:

  • A floating, clickable button on the bottom-right corner activates a chat window.

  • The chatbot is powered by the Gemini API (gemini-2.0-flash model), allowing it to respond to user queries in real-time.

  • Includes a loading indicator to show when the AI is generating a response.

  • Maintains a basic chat history within the session to provide context to the AI.