new web sayt
This commit is contained in:
nabijonovdavronbek619@gmail.com
289
QUICK_START.md
Normal file
289
QUICK_START.md
Normal file
@@ -0,0 +1,289 @@
|
||||
# 🚀 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! 💚
|
||||
Reference in New Issue
Block a user