Add GitHub Pages deployment and update amenities images

.github/DEPLOYMENT.md

@@ -0,0 +1,89 @@
+# GitHub Pages Deployment Guide
+
+This project uses GitHub Actions to automatically build and deploy to GitHub Pages from both `main` and `dev` branches.
+
+## Setup Instructions
+
+### 1. Enable GitHub Pages
+
+1. Go to your repository settings
+2. Navigate to **Pages** (under "Code and automation")
+3. Under **Source**, select **GitHub Actions**
+
+### 2. Deployment Strategy
+
+The workflow automatically:
+- Builds the `main` branch and deploys to the root path (`/`)
+- Builds the `dev` branch and deploys to `/dev/` path
+- Combines both builds into a single deployment
+
+### 3. Triggering Deployments
+
+Deployments are triggered automatically when you push to either:
+- `main` branch → Updates the production site at `https://<username>.github.io/<repo>/`
+- `dev` branch → Updates the dev site at `https://<username>.github.io/<repo>/dev/`
+
+Both builds happen together regardless of which branch triggered the workflow, ensuring both sites are always in sync with their respective branches.
+
+## URLs
+
+After deployment, your sites will be available at:
+
+- **Production (main)**: `https://<username>.github.io/<repo>/`
+- **Development (dev)**: `https://<username>.github.io/<repo>/dev/`
+
+Replace `<username>` with your GitHub username and `<repo>` with your repository name.
+
+## How It Works
+
+1. **Build Phase**:
+   - Checks out and builds the `main` branch with base path `/`
+   - Checks out and builds the `dev` branch with base path `/dev/`
+   - Combines both builds into a single deployment directory
+
+2. **Deploy Phase**:
+   - Uploads the combined artifact to GitHub Pages
+   - GitHub Pages serves both sites from the same deployment
+
+## Monitoring Deployments
+
+- Go to the **Actions** tab in your repository
+- View the workflow runs for "Build and Deploy to GitHub Pages"
+- Each run shows the build and deployment status
+
+## Troubleshooting
+
+### Deployment fails with "Artifact not found"
+- Ensure the workflow has completed the build phase successfully
+- Check the build logs for any compilation errors
+
+### 404 errors on deployed site
+- Verify that GitHub Pages is enabled in repository settings
+- Confirm the source is set to "GitHub Actions"
+- Wait a few minutes after deployment completes
+
+### Assets not loading correctly
+- Check that `vite.config.ts` correctly sets the base path
+- Verify the VITE_BASE_PATH environment variable in the workflow
+
+## Local Testing
+
+To test the builds locally before deploying:
+
+```bash
+# Test main branch build
+VITE_BASE_PATH=/ npm run build
+npm run preview
+
+# Test dev branch build
+VITE_BASE_PATH=/dev/ npm run build
+npm run preview
+```
+
+## Customization
+
+To modify deployment behavior, edit `.github/workflows/deploy.yml`:
+
+- Change trigger branches in the `on.push.branches` section
+- Modify base paths in the `VITE_BASE_PATH` environment variables
+- Adjust Node.js version in the `Setup Node.js` step

.github/workflows/deploy.yml

@@ -0,0 +1,86 @@
+name: Build and Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+      - dev
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout main branch
+        uses: actions/checkout@v4
+        with:
+          ref: main
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build main branch
+        run: npm run build
+        env:
+          VITE_BASE_PATH: '/ace/'
+
+      - name: Create deploy directory
+        run: mkdir -p deploy
+
+      - name: Copy main build to root
+        run: cp -r dist/* deploy/
+
+      - name: Checkout dev branch
+        uses: actions/checkout@v4
+        with:
+          ref: dev
+          clean: false
+
+      - name: Clean previous build
+        run: rm -rf dist node_modules
+
+      - name: Install dependencies for dev
+        run: npm install
+
+      - name: Build dev branch
+        run: npm run build
+        env:
+          VITE_BASE_PATH: '/ace/dev/'
+
+      - name: Copy dev build to /dev subdirectory
+        run: |
+          mkdir -p deploy/dev
+          cp -r dist/* deploy/dev/
+
+      - name: Upload combined artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./deploy
+
+  deploy:
+    needs: build-and-deploy
+    runs-on: ubuntu-latest
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -0,0 +1,34 @@
+# Dependencies
+node_modules/
+.pnp
+.pnp.js
+
+# Testing
+coverage/
+
+# Production
+dist/
+build/
+
+# Misc
+.DS_Store
+*.pem
+
+# Debug logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Local env files
+.env
+.env*.local
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+Thumbs.db

App.tsx

@@ -244,7 +244,7 @@ const App: React.FC = () => {
                     </div>
                     <div className="flex-1 h-[400px] bg-slate-800 rounded-3xl overflow-hidden relative group">
                         {/* Updated Image to Vertical Farm Look */}
-                       <img src="./vertical-farm.jpg" className="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity duration-500" alt="Vertical Farming" />
+                       <img src="/api/placeholder/800/600" data-placeholder-src="vertical-farm-robots.jpg" className="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity duration-500" alt="Vertical Farming with Autonomous Robots" />
                        <div className="absolute inset-0 flex items-center justify-center">
                          <span className="px-4 py-2 bg-black/50 backdrop-blur-md rounded-lg border border-white/10 text-sm font-mono text-tennis-yellow">STATUS: CULTIVATING</span>
                        </div>
@@ -278,7 +278,7 @@ const App: React.FC = () => {
                        </div>
                     </div>
                     <div className="flex-1 h-[400px] bg-slate-800 rounded-3xl overflow-hidden relative group">
-                        <img src="./tennis-hud.jpg" className="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity duration-500" alt="Tennis Courts with HUD" />
+                        <img src="/api/placeholder/800/600" data-placeholder-src="tennis-court-biomechanics-hud.jpg" className="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity duration-500" alt="Tennis Court with Real-time Biomechanics HUD" />
                     </div>
                   </div>