# 🚀 FIRMA - Quick Start Guide

## What's Ready?

✅ Complete Next.js project structure  
✅ All components built and working  
✅ i18n setup (Uzbek/Russian)  
✅ Telegram integration ready  
✅ Build successful  
✅ Dev server running

## 5-Minute Setup

### 1. Configure Telegram Bot (2 minutes)

**Get Telegram Credentials:**

1. Open Telegram → Search `@BotFather`
2. Type `/newbot` and follow prompts
3. Copy the **token** provided
4. Search `@userinfobot`
5. Copy your **chat ID**

**Add to `.env.local`:**

```bash
TELEGRAM_BOT_TOKEN=your_token_here
TELEGRAM_CHAT_ID=your_chat_id_here
```

### 2. Add Product Images (2 minutes)

Place images in `public/images/`:

**Required files:**

- `hero-pump-1.jpg` through `hero-pump-5.jpg` (for hero carousel)
- `pump-1.jpg`, `pump-1-alt.jpg`
- `pump-2.jpg`, `pump-2-alt.jpg`
- `pump-3.jpg`, `pump-3-alt.jpg`

**Or use placeholder URLs** in `lib/products.ts` and `app/[locale]/page.tsx`

### 3. Start Development Server (1 minute)

```bash
npm run dev
```

**Visit:**

- Uzbek: http://localhost:3000/uz
- Russian: http://localhost:3000/ru

---

## What You Can Do Right Now

### ✏️ Edit Translations

- File: `locales/uz.json` (Uzbek)
- File: `locales/ru.json` (Russian)
- Changes appear instantly in dev mode

### 📦 Add/Edit Products

- File: `lib/products.ts`
- Add new products to the array
- Update in: `locales/uz.json` and `locales/ru.json`

### 🎨 Customize Colors

- File: `tailwind.config.ts`
- Edit the `colors` section
- Rebuild with `npm run build`

### 📝 Update Company Info

- Files: `locales/uz.json` and `locales/ru.json`
- Key: `about.content`
- Edit your company description

---

## Component Locations

| Component  | File                          | What It Does                  |
| ---------- | ----------------------------- | ----------------------------- |
| Navigation | `components/Navbar.tsx`       | Logo, menu, language switcher |
| Hero       | `components/ShowCase.tsx`     | Title, image carousel, CTA    |
| About      | `components/About.tsx`        | Company info with stats       |
| Products   | `components/ProductsGrid.tsx` | Product grid and modal        |
| FAQ        | `components/FAQ.tsx`          | Questions & answers           |
| Contact    | `components/ContactForm.tsx`  | Contact form → Telegram       |
| Footer     | `components/Footer.tsx`       | Links and info                |

---

## Important Files

```
firma/
├── app/[locale]/page.tsx      ← HOME PAGE (edit to reorder sections)
├── lib/products.ts            ← PRODUCTS DATA (edit to add/change products)
├── locales/uz.json            ← UZBEK TEXT (edit translations)
├── locales/ru.json            ← RUSSIAN TEXT (edit translations)
├── .env.local                 ← SECRETS (add Telegram token & chat ID)
└── public/images/             ← PRODUCT IMAGES (place your images here)
```

---

## Helpful Commands

```bash
# Start development (live reload)
npm run dev

# Build for production
npm run build

# Check TypeScript errors
npm run typecheck

# Run linting
npm run lint

# Clean rebuild
rm -rf .next && npm run build
```

---

## Testing the Contact Form

1. Fill out the contact form on the website
2. Submit
3. Check your Telegram for the message
4. ✅ Should receive a formatted message with all details

---

## Customization Checklist

- [ ] Add Telegram bot token and chat ID to `.env.local`
- [ ] Add product images to `public/images/`
- [ ] Update company info in `locales/uz.json`
- [ ] Update company info in `locales/ru.json`
- [ ] Add/edit products in `lib/products.ts`
- [ ] Test contact form (submit test message)
- [ ] Verify images display correctly
- [ ] Check both languages work
- [ ] Test on mobile (responsive)
- [ ] Run `npm run build` (final check)

---

## File Editing Guide

### Adding a New Product

1. **Edit `lib/products.ts`:**

```typescript
{
  id: '4',
  nameKey: 'products_list.pump_4.name',
  slug: 'new-pump',
  shortDescriptionKey: 'products_list.pump_4.shortDescription',
  images: ['/images/pump-4.jpg'],
  specs: [
    { key: 'Flow Rate', value: '200 L/min' },
  ],
}
```

2. **Add to `locales/uz.json`:**

```json
"products_list": {
  "pump_4": {
    "name": "Yangi Nasos",
    "shortDescription": "Tavsifi..."
  }
}
```

3. **Add to `locales/ru.json`:**

```json
"products_list": {
  "pump_4": {
    "name": "Новый Насос",
    "shortDescription": "Описание..."
  }
}
```

---

## Deployment (3 Steps)

1. **Push to GitHub:**

```bash
git add .
git commit -m "Add images and configure"
git push origin main
```

2. **Go to [vercel.com](https://vercel.com)**

   - Import your GitHub repository
   - Add `.env` variables:
     - `TELEGRAM_BOT_TOKEN`
     - `TELEGRAM_CHAT_ID`
   - Click Deploy

3. **Done!** 🎉
   - Your site is live
   - Get URL from Vercel dashboard
   - All changes auto-deploy on push

---

## Troubleshooting

### Images Not Showing?

- Check file names match exactly (case-sensitive)
- Verify files are in `public/images/`
- Clear browser cache (Ctrl+Shift+Delete)

### Contact Form Not Sending?

- Check Telegram token and chat ID in `.env.local`
- Verify bot is active on Telegram
- Check Vercel logs for errors

### Language Not Switching?

- Clear browser cache
- Restart dev server
- Check `.next` folder doesn't exist

### Build Fails?

```bash
# Clean and reinstall
rm -rf node_modules .next
npm install
npm run build
```

---

## Support Resources

- 📖 [Next.js Docs](https://nextjs.org/docs)
- 🌍 [next-intl Docs](https://next-intl-docs.vercel.app/)
- ✨ [Framer Motion](https://www.framer.com/motion/)
- 🎨 [TailwindCSS](https://tailwindcss.com/)

---

## Performance Tips

- ✅ Images use Next.js Image component (auto-optimized)
- ✅ Code-splitting enabled (fast initial load)
- ✅ Lazy loading on scroll
- ✅ Animations use GPU acceleration
- ✅ TypeScript catches bugs early

---

## Next Steps

1. ✅ **Configure Telegram** - Add token and chat ID
2. ✅ **Add Images** - Place product photos
3. ✅ **Test Locally** - Run `npm run dev`
4. ✅ **Deploy** - Push to GitHub & Vercel
5. ✅ **Monitor** - Check Telegram for messages

---

**Ready to start?** 🚀  
`npm run dev` then visit http://localhost:3000/uz

Happy coding! 💚