# FIRMA - Industrial Equipment & Pump Supplier Website

A modern, responsive Next.js portfolio website for **Max Di Group** - a company specializing in industrial equipment, pumps, sensors, and technical devices. The website showcases products with 3D visualizations and provides comprehensive information in both Uzbek and Russian languages.

## 🌟 Project Overview

This project is a professional business website for a company that supplies industrial equipment including:

- Pumps and pump aggregates (ASVN-80, SCL 20/24, KM-100, SCN 75/70)
- Liquid flow meters and counters (PPV-100, PPO series)
- Fuel dispensing equipment and modules (MZ-35)
- Safety valves and breathing apparatus (KDM series)
- Filtration systems (FJU series)
- Loading/unloading equipment for rail and road tankers

The website features:

- **3D Product Visualization**: Interactive 3D models using Three.js
- **Multi-language Support**: Full internationalization (Uzbek/Russian)
- **Responsive Design**: Mobile-first approach
- **SEO Optimization**: Proper metadata and structured data
- **Contact Integration**: Telegram bot for inquiries
- **Static Export**: Ready for deployment to any hosting

## 🚀 Features

- **Multi-language Support**: Uzbek (uz) and Russian (ru) with `next-intl`
- **Modern UI/UX**: Built with TailwindCSS and Framer Motion animations
- **3D Product Visualization**: Three.js/React Three Fiber for GLB/GLTF models
- **Responsive Design**: Mobile-first, fully responsive across all devices
- **Telegram Bot Integration**: Contact form submissions sent via Telegram bot
- **SEO Optimized**: Proper metadata, structured data, and semantic HTML
- **Performance**: Image optimization, lazy loading, and code splitting
- **Accessibility**: WCAG compliant with keyboard navigation and ARIA labels
- **Static Export**: Ready for deployment without server requirements

## 🛠️ Tech Stack

- **Framework**: Next.js 15+ (App Router)
- **Language**: TypeScript
- **Styling**: TailwindCSS
- **Animations**: Framer Motion
- **3D Graphics**: Three.js + React Three Fiber + Drei
- **HTTP Client**: Axios
- **i18n**: next-intl
- **Icons**: lucide-react
- **Forms**: React Hook Form + Zod
- **State Management**: Zustand
- **Build**: Static export for optimal performance

## 📦 Quick Start

### Prerequisites

- Node.js 18+
- npm, yarn, or pnpm

### Installation

1. Clone the repository:

```bash
git clone <repository-url>
cd firma
```

2. Install dependencies:

```bash
npm install
# or
yarn install
# or
pnpm install
```

3. Run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```

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

### Build for Production

```bash
npm run build
npm run start
```

For static export (recommended):

```bash
npm run build
```

The static files will be generated in the `out` directory.

## 📁 Project Structure

```
firma/
├── app/                    # Next.js App Router
│   ├── api/               # API routes
│   ├── detail/[slug]/     # Dynamic product detail pages
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   ├── page.tsx           # Homepage
│   └── sitemap.ts         # Sitemap generation
├── components/            # React components
│   ├── detailPage/       # Product detail components
│   ├── productSection/    # Product listing components
│   ├── ui/                # Reusable UI components
│   └── ...
├── context/               # React context providers
├── i18n/                  # Internationalization
├── lib/                   # Utility functions and types
├── locales/               # Translation files
├── public/                # Static assets
│   ├── images/           # Image assets
│   ├── logo.jpg          # Company logo
│   └── ...
└── ...
```

## 🌐 Internationalization

The website supports two languages:

- **Uzbek (uz)**: Default language
- **Russian (ru)**: Secondary language

Language switching is available in the navigation bar. All content including product descriptions, features, and UI text is fully translated.

## 📞 Contact Integration

The contact form integrates with a Telegram bot to send inquiries directly to the company's support team. Configuration requires:

- Telegram Bot Token
- Chat ID for message delivery

## 🔍 SEO & Performance

- **Sitemap**: Automatically generated at `/sitemap.xml`
- **Meta Tags**: Comprehensive metadata for each page
- **Image Optimization**: Next.js automatic image optimization
- **Static Export**: No server required, fast loading times
- **Core Web Vitals**: Optimized for performance metrics

## 🚀 Deployment

The project is configured for static export, making it easy to deploy to any static hosting service:

1. Build the project: `npm run build`
2. Deploy the `out` directory to your hosting provider
3. Configure domain and SSL as needed

Recommended hosting platforms:

- Vercel
- Netlify
- GitHub Pages
- Any static hosting service

## 📝 License

This project is proprietary software for Max Di Group.

## 📞 Support

For technical support or inquiries:

- Email: [company email]
- Telegram: @firma_support
- Phone: +998 (99) 869-74-70

---

Built with ❤️ for Max Di Group - Industrial Equipment Excellence