# Arabic & Dynamic Landing Plugin - Quick Installation

## What This Plugin Does

✅ Sets Arabic as the default language
✅ Adds complete Arabic translations (222+ keys)
✅ Enables RTL support for Arabic
✅ Adds language selector to landing page (top-right)
✅ Auto-cycles industry words on hero section (المطاعم → المتاجر → صالونات التجميل → العيادات الطبية → المقاهي → الفنادق)
✅ Centers hero text for both Arabic and English
✅ Ready for fresh installations

---

## Installation on Fresh Copy

### Step 1: Copy Plugin Files

Copy the entire plugin directory to the new installation:

```bash
scp -r src/server/plugins/arabic-dynamic-landing/ user@new-server:/path/to/app/src/server/plugins/
```

### Step 2: Run Installation Script

```bash
cd /path/to/app
npx tsx --env-file=.env src/server/plugins/arabic-dynamic-landing/install.ts
```

### Step 3: Restart Server

```bash
pm2 restart <app-name>
# or
pm2 restart wakelai
```

---

## Plugin Files Structure

```
src/server/plugins/arabic-dynamic-landing/
├── index.ts                    # Plugin definition
├── install.ts                  # Installation script (run this)
├── manifest.json              # Plugin metadata
├── README.md                  # Full documentation
├── INSTALL.md                 # This file
├── components/
│   └── IndustryRotator.tsx   # Word rotation component
└── translations/
    └── translations.json      # Complete translations
```

---

## What Gets Modified

### Database (via install.ts)
- `languages` table: Arabic added/updated with RTL, set as default
- `translation_keys` table: All keys added with English defaults
- `translations` table: Arabic values inserted

### Application Files (already modified)
- `src/app/(landing)/page.tsx` - Language selector
- `src/app/(landing)/_HomePageContent.tsx` - IndustryRotator import, centered text
- `src/styles/tailwind.css` - RTL styles
- `src/client/contexts/languageConstants.ts` - DEFAULT_LANG = 'ar'
- `src/client/components/ui/LanguageSwitcher.tsx` - Fixed positioning

---

## Verification

After installation, check:

1. **Database**:
```sql
SELECT * FROM languages WHERE code = 'ar';
-- Should show: is_rtl=true, is_default=true, is_active=true
```

2. **Landing Page** (https://wakelai.com):
   - Default language: Arabic
   - Hero text centered
   - Industry words cycling (المطاعم → المتاجر → ...)
   - Language selector at top-right

3. **Language Switch**:
   - Click selector → Switch to English
   - Same cycling effect with English words

---

## Troubleshooting

### Installation fails with DATABASE_URL error
```bash
# Use --env-file flag
npx tsx --env-file=.env src/server/plugins/arabic-dynamic-landing/install.ts
```

### Translations not showing
```bash
# Re-run installation
npx tsx --env-file=.env src/server/plugins/arabic-dynamic-landing/install.ts
pm2 restart wakelai
```

### Word rotation not working
- Check `IndustryRotator.tsx` is in components directory
- Verify import in `_HomePageContent.tsx`
- Check browser console for errors

---

## Uninstallation (Revert to English)

```sql
-- In database
UPDATE languages SET is_default = false WHERE code = 'ar';
UPDATE languages SET is_default = true WHERE code = 'en';

-- Then restart
pm2 restart wakelai
```

---

## Industry Rotator Words

| Key | English | Arabic |
|-----|---------|--------|
| restaurants | restaurants | المطاعم |
| stores | stores | المتاجر |
| beautySalons | beauty salons | صالونات التجميل |
| clinics | medical clinics | العيادات الطبية |
| cafes | cafes | المقاهي |
| hotels | hotels | الفنادق |

Rotation: Every 3.5 seconds with smooth fade transition

---

## Contact

For support: support@wakelai.com