185 lines
5.3 KiB
Markdown
185 lines
5.3 KiB
Markdown
# 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
|