5.3 KiB
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
- Clone the repository:
git clone <repository-url>
cd firma
- Install dependencies:
npm install
# or
yarn install
# or
pnpm install
- Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
- Open http://localhost:3000 with your browser to see the result.
Build for Production
npm run build
npm run start
For static export (recommended):
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:
- Build the project:
npm run build - Deploy the
outdirectory to your hosting provider - 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