Initial commit: KH3 Group Limited website with enhanced animations and slide+zoom transitions

README.md

@@ -0,0 +1,130 @@
+# KH3 Website
+
+A clean, minimal static website built with HTML, JavaScript, and Tailwind CSS for KH3 - Building Inspiring Spaces.
+
+## Quick Start
+
+### Prerequisites
+
+- Node.js (for Tailwind CSS CLI)
+- npm (comes with Node.js)
+
+### Setup Instructions
+
+1. **Clone or download the project**
+
+   ```bash
+   git clone <repository-url>
+   cd fbs-static
+   ```
+
+2. **Install Tailwind CSS**
+
+   ```bash
+   npm install
+   ```
+
+3. **Generate the optimized CSS**
+
+   ```bash
+   npm run build
+   ```
+
+4. **Open the website**
+   - Open `index.html` in your web browser
+   - Or serve it with a local server
+
+## Project Structure
+
+```
+fbs-static/
+├─ index.html          # Main website page
+├─ about.html          # About Us page
+├─ contact.html        # Contact page
+├─ src/
+│  └─ input.css        # Tailwind directives
+├─ styles/
+│  └─ main.css         # Generated optimized CSS
+├─ js/
+│  └─ main.js          # JavaScript functionality
+├─ assets/images/      # Image assets
+├─ tailwind.config.js  # Tailwind configuration
+├─ package.json        # Dependencies
+└─ README.md           # This file
+```
+
+## Development
+
+### For Active Development
+
+If you're making frequent changes to the HTML, you can use watch mode to automatically regenerate CSS:
+
+```bash
+npm run watch
+```
+
+Keep this running in a terminal while you work. It will automatically rebuild the CSS whenever you save changes to your HTML files.
+
+### Manual Regeneration
+
+If watch mode doesn't work or you prefer manual control:
+
+```bash
+# One-time build
+npm run build
+
+# Watch mode (auto-regenerate on changes)
+npm run watch
+```
+
+**Note:** If watch mode doesn't work, just run the one-time build command after each change.
+
+### What This Does
+
+- Scans your HTML files for used Tailwind classes
+- Generates only the CSS you need (purges unused styles)
+- Creates a tiny, optimized CSS file (~1KB vs ~3MB CDN)
+
+## Features
+
+- **Clean, minimal design** with Tailwind CSS
+- **Optimized performance** with purged CSS
+- **Responsive layout** that works on all devices
+- **No build tools required** for production
+- **Easy maintenance** with Tailwind utility classes
+- **Custom animations** for logo, menu grid, and buttons
+- **Auto-switching hero images**
+- **Staggered loading animations**
+
+## Customization
+
+To add new Tailwind classes:
+
+1. Add the classes to your HTML
+2. Run the CSS generation command
+3. The new styles will be included in the output
+
+To modify the design:
+
+1. Change Tailwind classes in HTML files
+2. Regenerate CSS with the CLI command
+3. Refresh your browser to see changes
+
+## Custom Colors & Animations
+
+The website uses custom KH3 brand colors and animations defined in `tailwind.config.js`:
+
+- **Colors**: kh3-black, kh3-red, kh3-gold, kh3-darkGold, kh3-lightGold
+- **Animations**: logo-float, text-float, border-glow, menu-grid-cycle, fade-in variants
+
+## Production
+
+For production deployment:
+
+1. Run `npm run build` to generate the final CSS
+2. Upload all files to your web server
+3. The website will work without Node.js in production
+
+## License
+
+MIT License