firma/README.md

FIRMA - Industrial Equipment PortfolioThis is a Next.js project bootstrapped with create-next-app.

A modern, responsive Next.js portfolio website for an industrial equipment and pump supplier company. Built with TypeScript, TailwindCSS, Framer Motion, Three.js/R3F, and internationalization support (Uzbek/Russian).## Getting Started

🚀 FeaturesFirst, run the development server:

• Multi-language Support: Uzbek (uz) and Russian (ru) with `next-intl````bash

• Modern UI/UX: Built with TailwindCSS and Framer Motion animationsnpm run dev

• 3D Product Visualization: Three.js/React Three Fiber for GLB/GLTF models# or

• Responsive Design: Mobile-first, fully responsive across all devicesyarn dev

• Telegram Bot Integration: Contact form submissions sent via Telegram bot# or

• SEO Optimized: Proper metadata, structured data, and semantic HTMLpnpm dev

• Performance: Image optimization, lazy loading, and code splitting# or

• Accessibility: WCAG compliant with keyboard navigation and ARIA labelsbun dev

## 🛠️ Tech Stack

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

- **Framework**: Next.js 15+ (App Router)

- **Language**: TypeScriptYou can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

- **Styling**: TailwindCSS

- **Animations**: Framer MotionThis project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.

- **3D Graphics**: Three.js + React Three Fiber + Drei

- **HTTP Client**: Axios## Learn More

- **i18n**: next-intl

- **Icons**: lucide-reactTo learn more about Next.js, take a look at the following resources:

- **Forms**: React Hook Form + Zod

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.

## 📦 Quick Start- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.



### PrerequisitesYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!

- Node.js 18.0+

- npm or yarn## Deploy on Vercel



### SetupThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.



1. **Navigate to project** (already done):Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

   ```bash
   cd /home/zero/Projects/felix/firma

2. Dependencies installed ✓

3. Configure environment variables:

   # Edit .env.local
   TELEGRAM_BOT_TOKEN=your_token_here
   TELEGRAM_CHAT_ID=your_chat_id_here
   NEXT_PUBLIC_SITE_URL=http://localhost:3000
   

4. Add product images to public/images/:

   • hero-pump-1.jpg through hero-pump-5.jpg
   • pump-1.jpg, pump-1-alt.jpg
   • pump-2.jpg, pump-2-alt.jpg
   • pump-3.jpg, pump-3-alt.jpg

🚀 Running the Project

Development:

npm run dev

Visit:

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

Build & Production:

npm run build
npm run start

📁 Key Files

File	Purpose
app/[locale]/page.tsx	Home page template
components/Navbar.tsx	Navigation with language switcher
components/ShowCase.tsx	Hero section with image carousel
components/ProductsGrid.tsx	Product grid and modal
components/ContactForm.tsx	Contact form with Telegram
lib/products.ts	Product data and types
locales/uz.json	Uzbek translations
locales/ru.json	Russian translations
app/api/contact/route.ts	Telegram API endpoint
middleware.ts	i18n routing middleware

🔧 Configuration

Add/Edit Products

Edit lib/products.ts:

export const products: Product[] = [
  {
    id: "1",
    nameKey: "products_list.pump_1.name",
    slug: "schotchik-pump",
    shortDescriptionKey: "products_list.pump_1.shortDescription",
    images: ["/images/pump-1.jpg"],
    specs: [{ key: "Flow Rate", value: "100 L/min" }],
  },
];

Update Translations

Edit locales/uz.json and locales/ru.json:

{
  "nav": {
    "about": "Biz haqimizda"
  }
}

Telegram Bot Setup

1. Message @BotFather on Telegram
2. Create a bot and get token
3. Get your chat ID (use @userinfobot)
4. Add to .env.local

📱 Sections

• Navbar: Logo, navigation links, language switcher, mobile menu
• Hero: Title, subtitle, CTA, image carousel with autoplay
• About: Company info, features, stats
• Products: Grid of product cards with modal details
• FAQ: 3 collapsible Q&A items
• Contact: Form with name, phone, message, product selection
• Footer: Links, social media, copyright

🎨 Customization

Colors

Edit tailwind.config.ts - currently uses blue theme

Animations

Framer Motion used throughout - edit individual component files

Fonts

Edit app/layout.tsx - currently using Geist font family

🚀 Deployment

Vercel (Recommended)

git push origin main
# Connect repo on vercel.com
# Add .env variables in project settings

Other Hosting

Works on any Node.js platform (Railway, Heroku, AWS, DigitalOcean, etc.)

📝 API Routes

POST /api/contact

{
  "name": "John Doe",
  "phone": "+998991234567",
  "message": "Contact message",
  "productSlug": "schotchik-pump",
  "lang": "uz"
}

Sends message to Telegram via bot.

🧪 Testing

# Check for build errors
npm run build

# Check TypeScript
npm run typecheck

# Run linting
npm run lint

📚 Resources

• Next.js Docs
• next-intl
• Framer Motion
• Three.js
• TailwindCSS

📄 License

MIT License - feel free to use for your projects

---

Created: November 2025 | Status: Production Ready