for gitea

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
+- **Multi-language Support**: Uzbek (uz) and Russian (ru) with `next-intl`
-
+- **Modern UI/UX**: Built with TailwindCSS and Framer Motion animations
-- **Performance**: Image optimization, lazy loading, and code splitting# or
+- **3D Product Visualization**: Three.js/React Three Fiber for GLB/GLTF models
-
+- **Responsive Design**: Mobile-first, fully responsive across all devices
-- **Accessibility**: WCAG compliant with keyboard navigation and ARIA labelsbun dev
+- **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**: TypeScript
-- **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 Motion
-- **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
-- **HTTP Client**: Axios## Learn More
-
 - **i18n**: next-intl
-
+- **Icons**: lucide-react
-- **Icons**: lucide-reactTo learn more about Next.js, take a look at the following resources:
-
 - **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
+```
 
-
+3. Run the development server:
-### 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:
 
 ```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
+### Build for Production
-- Russian: http://localhost:3000/ru
-
-### Build & Production:
 
 ```bash
 npm run build
 npm run start
 ```
 
-## 📁 Key Files
+For static export (recommended):
 
-| File                          | Purpose                           |
+```bash
-| ----------------------------- | --------------------------------- |
+npm run build
-| `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" }],
-  },
-];
 ```
 
-### Update Translations
+The static files will be generated in the `out` directory.
 
-Edit `locales/uz.json` and `locales/ru.json`:
+## 📁 Project Structure
 
-```json
+```
-{
+firma/
-  "nav": {
+├── app/                    # Next.js App Router
-    "about": "Biz haqimizda"
+│   ├── 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
+The website supports two languages:
-2. Create a bot and get token
-3. Get your chat ID (use [@userinfobot](https://t.me/userinfobot))
-4. Add to `.env.local`
 
-## 📱 Sections
+- **Uzbek (uz)**: Default language
+- **Russian (ru)**: Secondary language
 
-- **Navbar**: Logo, navigation links, language switcher, mobile menu
+Language switching is available in the navigation bar. All content including product descriptions, features, and UI text is fully translated.
-- **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
+## 📞 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
+- **Sitemap**: Automatically generated at `/sitemap.xml`
-
+- **Meta Tags**: Comprehensive metadata for each page
-### Fonts
+- **Image Optimization**: Next.js automatic image optimization
-
+- **Static Export**: No server required, fast loading times
-Edit `app/layout.tsx` - currently using Geist font family
+- **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
+1. Build the project: `npm run build`
-git push origin main
+2. Deploy the `out` directory to your hosting provider
-# Connect repo on vercel.com
+3. Configure domain and SSL as needed
-# Add .env variables in project settings
-```
 
-### 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
+## 📞 Support
-{
-  "name": "John Doe",
-  "phone": "+998991234567",
-  "message": "Contact message",
-  "productSlug": "schotchik-pump",
-  "lang": "uz"
-}
-```
 
-Sends message to Telegram via bot.
+For technical support or inquiries:
 
-## 🧪 Testing
+- Email: [company email]
-
+- Telegram: @firma_support
-```bash
+- Phone: +998 (99) 869-74-70
-# 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
 
 ---
 
-**Created**: November 2025 | **Status**: Production Ready
+Built with ❤️ for Max Di Group - Industrial Equipment Excellence

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>
+  );
+}

app/detail/page.tsx

@@ -1,14 +0,0 @@
-import { ContactForm } from "@/components/ContactForm";
-import DetailInfo from "@/components/detailPage/detailInfo";
-import React from "react";
-
-export default function Page() {
-  return (
-    <div>
-      <DetailInfo />
-      <section id="contact">
-        <ContactForm />
-      </section>
-    </div>
-  );
-}

app/layout.tsx

@@ -36,6 +36,8 @@ export const metadata: Metadata = {
   },
 };
 
+// for github pages deployment
+
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="uz" dir="ltr">

app/product/[slug]/page.tsx

@@ -0,0 +1,38 @@
+import { ContactForm } from "@/components/ContactForm";
+import DetailInfo from "@/components/detailPage/detailInfo";
+import { Product } from "@/lib/products";
+import { generateSlug } from "@/lib/slug";
+import { getAllProducts } from "@/lib/api";
+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();
+
+  return products.find((product) => generateSlug(product.name_uz) === slug);
+}
+
+export default async function Page({ params }: { params: any }) {
+  const { slug } = await params;
+  const product = await getProduct(slug);
+
+  if (!product) {
+    notFound();
+  }
+
+  return (
+    <div>
+      <DetailInfo product={product} />
+      <section id="contact">
+        <ContactForm />
+      </section>
+    </div>
+  );
+}

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];
+}

components/detailPage/detailInfo.tsx

@@ -3,14 +3,16 @@
 import { motion } from "framer-motion";
 import { useLanguage } from "@/context/language-context";
 import Link from "next/link";
-import { useProduct, useProductStore } from "@/lib/productZustand";
 import Image from "next/image";
+import { Product } from "@/lib/products";
 
-export default function DetailInfo() {
+interface DetailInfoProps {
+  product: Product;
+}
+
+export default function DetailInfo({ product }: DetailInfoProps) {
   const { t, language } = useLanguage();
   const languageIndex = language === "uz" ? true : false;
-  const product = useProduct((state) => state.product);
-  if (product === null) return null;
 
   const handleScroll = (href: string) => {
     const element = document.querySelector(href);
@@ -23,7 +25,7 @@ export default function DetailInfo() {
     <div className="bg-white">
       <div className="max-w-[1200px] mx-auto">
         {/* Header */}
-        <div className="sticky z-10 top-0 sm:p-6 p-2 flex justify-center items-center">
+        <div className="sticky z-10 top-0 md:p-6 p-2 flex justify-center items-center">
           <h2 className="md:text-2xl text-lg font-bold text-gray-900">
             {languageIndex ? product.name_uz : product.name_ru}
           </h2>
@@ -31,34 +33,35 @@ export default function DetailInfo() {
 
         {/* Content */}
         <div className="sm:p-6 p-2">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-8 mb-8">
             {/* Image */}
-            <div className="relative max-sm:w-full max-md:h-50 w-150 h-96 mx-auto rounded-lg overflow-hidden">
+            <div className="relative w-full h-64 sm:h-80 lg:h-96 rounded-lg overflow-hidden bg-gray-50">
               <Image
                 src={`https://admin.promtechno.uz${product.image}`}
-                alt="image"
+                alt={languageIndex ? product.name_uz : product.name_ru}
                 fill
-                className="object-contain max-md:h-50"
+                sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 600px"
+                className="object-contain p-4"
+                priority
               />
             </div>
 
-            <div className="space-y-6 pt-10">
+            {/* Content */}
+            <div className="space-y-4 lg:space-y-6 lg:py-4">
               {/* Description */}
-              <div className="text-gray-800 max-sm:text-[14px]">
+              <div className="text-gray-800 text-sm sm:text-base leading-relaxed">
                 {languageIndex
                   ? product.description_uz
                   : product.description_ru}
               </div>
+
               {/* CTA Buttons */}
-              <div className="space-y-3">
+              <div className="pt-2">
-                <Link
+                <Link href="#contact" onClick={() => handleScroll("#contact")}>
-                  href={"#contact"}
-                  onClick={() => handleScroll("#contact")}
-                >
                   <motion.button
-                    whileHover={{ scale: 1.05 }}
+                    whileHover={{ scale: 1.02 }}
-                    whileTap={{ scale: 0.95 }}
+                    whileTap={{ scale: 0.98 }}
-                    className="w-full px-6 py-3 bg-primary/80 text-white rounded-lg font-semibold hover:bg-primary transition-colors"
+                    className="w-full sm:w-auto px-8 py-3 bg-primary/80 text-white rounded-lg font-semibold hover:bg-primary transition-all duration-300 shadow-md hover:shadow-lg"
                   >
                     {t.contact.send}
                   </motion.button>
@@ -73,7 +76,7 @@ export default function DetailInfo() {
                 {t.features}
               </h3>
               <div className="space-y-3 flex items-start justify-start gap-4 flex-wrap ">
-                {product.features.map((spec, idx) => (
+                {product.features?.map((spec, idx) => (
                   <div
                     key={idx}
                     className="flex flex-col justify-between py-2 border border-gray-100 rounded-lg p-2"

components/productSection/ProductCard.tsx

@@ -19,7 +19,7 @@ export function ProductCard({ product }: ProductCardProps) {
   const setProducts = useProduct((state) => state.setProducts);
   return (
     <Link
-      href={`/detail?${languageIndex ? product.name_uz : product.name_ru}`}
+      href={`/product/${product.slug}`}
       onClick={() => {
         setProductName(languageIndex ? product.name_uz : product.name_ru);
         setProducts(product);
@@ -63,14 +63,14 @@ export function ProductCard({ product }: ProductCardProps) {
           </p>
 
           {/* CTA Button - Always at Bottom */}
-          <motion.button
+          <motion.div
             whileHover={{ scale: 1.02 }}
             whileTap={{ scale: 0.98 }}
             className="w-full flex items-center justify-center gap-2 px-6 py-3 bg-primary text-white rounded-xl font-semibold shadow-lg shadow-blue-500/30 hover:shadow-xl hover:shadow-primary/40 transition-all duration-300 group/button"
           >
             <span>{t.details}</span>
             <ExternalLink className="w-4 h-4 group-hover/button:translate-x-1 transition-transform duration-300" />
-          </motion.button>
+          </motion.div>
         </div>
 
         {/* Decorative Corner */}

components/productSection/ProductsGrid.tsx

@@ -11,6 +11,8 @@ import { ProductCard } from "./ProductCard";
 import axios from "axios";
 import EmptyState from "../productsPage/emptyData";
 import Loading from "../loading";
+import { getAllProducts } from "@/lib/api";
+import { generateSlug } from "@/lib/slug";
 
 // hello everyone
 
@@ -22,14 +24,14 @@ export function ProductsGrid() {
   useEffect(() => {
     async function getData() {
       setLoading(true);
-      await axios
+      const products = await getAllProducts();
-        .get("https://admin.promtechno.uz/api/products/")
+      setAllProducts(
-        .then((res) => {
+        products.map((product: any) => ({
-          console.log("all data main page: ", res?.data);
+          ...product,
-          const allData = res?.data || [];
+          slug: generateSlug(product.name_uz),
-          setAllProducts(allData.slice(0, 3));
+        })).slice(0, 3)
+      );
       setLoading(false);
-        });
     }
     getData();
   }, []);
@@ -61,11 +63,14 @@ export function ProductsGrid() {
             <div className="w-20 h-1 bg-primary mx-auto rounded-full" />
           </motion.div>
 
-          {loading && <div className="w-full flex items-center justify-center">
+          {loading && (
-            <Loading /></div>}
+            <div className="w-full flex items-center justify-center">
+              <Loading />
+            </div>
+          )}
 
           {/* Product Grid */}
-          { loading|| allProducts && allProducts.length > 0 ? (
+          {loading || (allProducts && allProducts.length > 0) ? (
             <motion.div
               initial="hidden"
               whileInView="visible"
@@ -74,9 +79,7 @@ export function ProductsGrid() {
             >
               {allProducts.map((product: any) => (
                 <motion.div key={product.id}>
-                  <ProductCard
+                  <ProductCard product={product} />
-                    product={product}
-                  />
                 </motion.div>
               ))}
             </motion.div>

components/productsPage/products.tsx

@@ -1,10 +1,12 @@
 "use client";
 import { useEffect, useState } from "react";
 import EmptyState from "./emptyData";
-import { ProductModal } from "../productSection/ProductModal";
 import { motion } from "framer-motion";
 import { ProductCard } from "../productSection/ProductCard";
 import axios from "axios";
+import Loading from "../loading";
+import { generateSlug } from "@/lib/slug";
+import { getAllProducts } from "@/lib/api";
 
 const itemVariants = {
   hidden: { opacity: 0, y: 20 },
@@ -12,49 +14,42 @@ const itemVariants = {
 };
 
 export default function Products() {
-  const [allProducts, setAllProducts] = useState<any>(null);
+  const [allProducts, setAllProducts] = useState<any>([]);
-  const [selectedProduct, setSelectedProduct] = useState<any>(null);
+  const [loading, setLoading] = useState<boolean>(false);
 
   useEffect(() => {
     async function getData() {
-      await axios.get("https://admin.promtechno.uz/api/products/").then((res) => {
+      setLoading(true);
-        console.log("all data: ", res?.data);
+      const products = await getAllProducts();
-        const allData = res?.data || [];
+      setAllProducts(
-        setAllProducts(allData);
+        products.map((product: any) => ({
-      });
+          ...product,
+          slug: generateSlug(product.name_uz),
+        }))
+      );
+      setLoading(false);
     }
     getData();
   }, []);
 
-  const handleViewDetails = (id: number) => {
-    const product = allProducts.find((p: any) => p.id === id);
-    if (product) {
-      setSelectedProduct(product);
-    }
-  };
   return (
     <div className="py-20 max-w-[1200px] w-full mx-auto px-2 ">
-      {allProducts && allProducts.length > 0 ? (
+      {loading && (
+        <div className="w-full flex items-center justify-center">
+          <Loading />
+        </div>
+      )}
+      {loading || (allProducts && allProducts.length > 0) ? (
         <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4">
           {allProducts.map((product: any) => (
             <motion.div key={product.id} variants={itemVariants}>
-              <ProductCard
+              <ProductCard product={product} />
-                product={product}
-                onViewDetails={handleViewDetails}
-              />
             </motion.div>
           ))}
         </div>
       ) : (
         <EmptyState page="products" />
       )}
-      {/* Product Modal */}
-      {selectedProduct && (
-        <ProductModal
-          product={selectedProduct}
-          onClose={() => setSelectedProduct(null)}
-        />
-      )}
     </div>
   );
 }

lib/api.ts

@@ -0,0 +1,14 @@
+import { Product } from "@/lib/products";
+
+export async function getAllProducts(): Promise<Product[]> {
+  const res = await fetch("https://admin.promtechno.uz/api/products/", {
+    cache: "force-cache", // build time uchun for gitea
+  });
+
+  if (!res.ok) {
+    console.log("Failed to fetch products");
+    return [];
+  }
+
+  return res.json();
+}

lib/generateStaticParam.ts

@@ -0,0 +1,17 @@
+import axios from "axios";
+import { generateSlug } from "./slug";
+
+export async function generateStaticParams() {
+  try {
+    await axios.get("https://admin.promtechno.uz/api/products/").then((res) => {
+      console.log("all data: ", res?.data);
+      const allData = res?.data || [];
+      return allData.map((product: any) => ({
+        slug: generateSlug(product.name_uz),
+      }));
+    });
+  } catch (error) {
+    console.error("Error in generateStaticParams:", error);
+    return []; // Xato bo'lsa bo'sh array qaytarish
+  }
+}

lib/productZustand.ts

@@ -9,18 +9,11 @@ interface ProductStore {
 }
 
 export const useProductStore = create<ProductStore>()(
-  devtools(
+  devtools((set) => ({
-    persist(
-      (set) => ({
     productName: "",
     setProductName: (name: string) => set({ productName: name }),
     resetProductName: () => set({ productName: "" }),
-      }),
+  }))
-      {
-        name: "product-storage",
-      }
-    )
-  )
 );
 
 interface ProductDetail {

lib/products.ts

@@ -13,4 +13,5 @@ export interface Product {
   description_ru: string;
   features:features[];
   image:string;
+  slug?: string;
 }

lib/slug.ts

@@ -0,0 +1,12 @@
+export function generateSlug(productName: string): string {
+  return productName
+    .toLowerCase()
+    .replace(/\s+/g, "-") // Bo'shliqlarni tire bilan almashtirish
+    .replace(/[()]/g, "") // Qavslarni olib tashlash
+    .replace(/[–—]/g, "-") // Maxsus tire'larni oddiy tire bilan
+    .replace(/%/g, "foiz") // % ni foiz deb yozish
+    .replace(/,/g, "-") // Vergullarni tire bilan
+    .replace(/\.+/g, "-") // Nuqtalarni tire bilan
+    .replace(/-+/g, "-") // Bir nechta tire'ni bitta tire bilan
+    .replace(/^-|-$/g, ""); // Boshi va oxiridagi tire'larni olib tashlash
+}