Files

nabijonovdavronbek619@gmail.com f9d27ec11d new web sayt

2025-11-25 21:06:55 +05:00

6.1 KiB

Raw Blame History

🚀 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:

Open Telegram → Search @BotFather
Type /newbot and follow prompts
Copy the token provided
Search @userinfobot
Copy your chat ID

Add to .env.local:

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)

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

# 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

Fill out the contact form on the website
Submit
Check your Telegram for the message
✅ 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

Edit lib/products.ts:

{
  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' },
  ],
}

Add to locales/uz.json:

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

Add to locales/ru.json:

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

Deployment (3 Steps)

Push to GitHub:

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

Go to vercel.com
- Import your GitHub repository
- Add .env variables:
  - TELEGRAM_BOT_TOKEN
  - TELEGRAM_CHAT_ID
- Click Deploy
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?

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

Support Resources

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

✅ Configure Telegram - Add token and chat ID
✅ Add Images - Place product photos
✅ Test Locally - Run npm run dev
✅ Deploy - Push to GitHub & Vercel
✅ Monitor - Check Telegram for messages

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

Happy coding! 💚

6.1 KiB Raw Blame History Unescape Escape