290 lines
6.1 KiB
Markdown
290 lines
6.1 KiB
Markdown
# 🚀 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! 💚
|