sitemap added

2026-01-09 18:28:22 +05:00
parent c2c39d44a0
commit cd50a10539
3 changed files with 199 additions and 176 deletions
--- a/README.md
+++ b/README.md
@@ -1,242 +1,184 @@
-# FIRMA - Industrial Equipment PortfolioThis is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# FIRMA - Industrial Equipment & Pump Supplier Website

-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
+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.

-## 🚀 FeaturesFirst, run the development server:
+## 🌟 Project Overview

- **Multi-language Support**: Uzbek (uz) and Russian (ru) with `next-intl````bash
+This project is a professional business website for a company that supplies industrial equipment including:

- **Modern UI/UX**: Built with TailwindCSS and Framer Motion animationsnpm run dev
+- 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

- **3D Product Visualization**: Three.js/React Three Fiber for GLB/GLTF models# or
+The website features:

- **Responsive Design**: Mobile-first, fully responsive across all devicesyarn dev
+- **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

- **Telegram Bot Integration**: Contact form submissions sent via Telegram bot# or
+## 🚀 Features

- **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
-
-````
+- **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

-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.
-
+- **Language**: TypeScript
 - **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.
-
+- **Animations**: Framer Motion
 - **3D Graphics**: Three.js + React Three Fiber + Drei
-
- **HTTP Client**: Axios## Learn More
-
+- **HTTP Client**: Axios
 - **i18n**: next-intl
-
- **Icons**: lucide-reactTo learn more about Next.js, take a look at the following resources:
-
+- **Icons**: lucide-react
 - **Forms**: React Hook Form + Zod
+- **State Management**: Zustand
+- **Build**: Static export for optimal performance

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

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

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

+### Installation

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

- Node.js 18.0+
+```bash
+git clone <repository-url>
+cd firma
+```

- npm or yarn## Deploy on Vercel
+2. Install dependencies:

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

-
-### 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**:
-
-   ```bash
-   # 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:
+3. Run the development server:

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

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

- Uzbek: http://localhost:3000/uz
- Russian: http://localhost:3000/ru
-
-### Build & Production:
+### Build for Production

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

-## 📁 Key Files
+For static export (recommended):

-| 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`:
-
-```typescript
-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" }],
-  },
-];
+```bash
+npm run build
 ```

-### Update Translations
+The static files will be generated in the `out` directory.

-Edit `locales/uz.json` and `locales/ru.json`:
+## 📁 Project Structure

-```json
-{
-  "nav": {
-    "about": "Biz haqimizda"
-  }
-}
+```
+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
+│   └── ...
+└── ...
 ```

-### Telegram Bot Setup
+## 🌐 Internationalization

-1. Message [@BotFather](https://t.me/BotFather) on Telegram
-2. Create a bot and get token
-3. Get your chat ID (use [@userinfobot](https://t.me/userinfobot))
-4. Add to `.env.local`
+The website supports two languages:

-## 📱 Sections
+- **Uzbek (uz)**: Default language
+- **Russian (ru)**: Secondary language

- **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
+Language switching is available in the navigation bar. All content including product descriptions, features, and UI text is fully translated.

-## 🎨 Customization
+## 📞 Contact Integration

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

-Edit `tailwind.config.ts` - currently uses blue theme
+- Telegram Bot Token
+- Chat ID for message delivery

-### Animations
+## 🔍 SEO & Performance

-Framer Motion used throughout - edit individual component files
-
-### Fonts
-
-Edit `app/layout.tsx` - currently using Geist font family
+- **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

-### Vercel (Recommended)
+The project is configured for static export, making it easy to deploy to any static hosting service:

-```bash
-git push origin main
-# Connect repo on vercel.com
-# Add .env variables in project settings
-```
+1. Build the project: `npm run build`
+2. Deploy the `out` directory to your hosting provider
+3. Configure domain and SSL as needed

-### Other Hosting
+Recommended hosting platforms:

-Works on any Node.js platform (Railway, Heroku, AWS, DigitalOcean, etc.)
+- Vercel
+- Netlify
+- GitHub Pages
+- Any static hosting service

-## 📝 API Routes
+## 📝 License

-### POST `/api/contact`
+This project is proprietary software for Max Di Group.

-```json
-{
-  "name": "John Doe",
-  "phone": "+998991234567",
-  "message": "Contact message",
-  "productSlug": "schotchik-pump",
-  "lang": "uz"
-}
-```
+## 📞 Support

-Sends message to Telegram via bot.
+For technical support or inquiries:

-## 🧪 Testing
-
-```bash
-# Check for build errors
-npm run build
-
-# Check TypeScript
-npm run typecheck
-
-# Run linting
-npm run lint
-```
-
-## 📚 Resources
-
- [Next.js Docs](https://nextjs.org/docs)
- [next-intl](https://next-intl-docs.vercel.app/)
- [Framer Motion](https://www.framer.com/motion/)
- [Three.js](https://threejs.org/)
- [TailwindCSS](https://tailwindcss.com/)
-
-## 📄 License
-
-MIT License - feel free to use for your projects
+- Email: [company email]
+- Telegram: @firma_support
+- Phone: +998 (99) 869-74-70

 ---

-**Created**: November 2025 | **Status**: Production Ready
+Built with ❤️ for Max Di Group - Industrial Equipment Excellence
--- a/app/detail/[slug]/page.tsx
+++ b/app/detail/[slug]/page.tsx
@@ -0,0 +1,38 @@
+import { ContactForm } from "@/components/ContactForm";
+import DetailInfo from "@/components/detailPage/detailInfo";
+import { getAllProducts } from "@/lib/api";
+import { Product } from "@/lib/products";
+import { generateSlug } from "@/lib/slug";
+import { notFound } from "next/navigation";
+
+export async function generateStaticParams() {
+  const products = await getAllProducts();
+
+  return products.map((product) => ({
+    slug: generateSlug(product.name_uz),
+  }));
+}
+
+async function getProduct(slug: string): Promise<Product | undefined> {
+  const products = await getAllProducts();
+  console.log("slug: ", slug);
+
+  return products.find((product) => generateSlug(product.name_uz) === slug);
+}
+
+export default async function Page({ params }: { params: { slug: string } }) {
+  const product = await getProduct(params.slug);
+
+  if (!product) {
+    notFound();
+  }
+
+  return (
+    <div>
+      <DetailInfo product={product} />
+      <section id="contact">
+        <ContactForm />
+      </section>
+    </div>
+  );
+}
--- a/app/sitemap.ts
+++ b/app/sitemap.ts
@@ -0,0 +1,43 @@
+export const dynamic = "force-static";
+
+import { MetadataRoute } from "next";
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const baseUrl = "https://promtechno.uz";
+
+  // Static pages
+  const staticPages = [
+    {
+      url: baseUrl,
+      lastModified: new Date(),
+      changeFrequency: "weekly" as const,
+      priority: 1,
+    },
+  ];
+
+  // Product detail pages - based on actual product slugs from API
+  const productSlugs = [
+    "ppv-100-1-6-su-6-0-60-0-5foiz-mexanik-suyuqlik-hisoblagichi",
+    "ppo-40-0-6-su-suyuqlik-hisoblagichi",
+    "ppo-25-1-6-su-oval-tishli-suyuqlik-hisoblagichi",
+    "scl-20-24-nasosi",
+    "km-100-80-170e-elektro-nasosi",
+    "scn-75-70-nasosi",
+    "usn-150-04-pastdan-tushirish-quyi-oqizish-qurilmasi-ta-sir-zonasi-4-m",
+    "asn-80-02-yuqoridan-quyish-qurilmasi",
+    "usn-100-usn-76-neft-mahsulotlari-va-maxsus-suyuqliklarni-pastdan-oqizish-qurilmalari",
+    "mexanik-nafas-olish-klapani-kdm-100-150-200-250-ichki-yong-inga-qarshi-himoyali",
+    "fju-100-1-6-suyuqlik-filtri",
+    "yoqilg-i-quyish-moduli-mz-35",
+    "asvn-80-nasos-agregati",
+  ];
+
+  const productPages = productSlugs.map((slug) => ({
+    url: `${baseUrl}/detail/${slug}`,
+    lastModified: new Date(),
+    changeFrequency: "monthly" as const,
+    priority: 0.8,
+  }));
+
+  return [...staticPages, ...productPages];
+}