detail page added

app/detail/page.tsx

@@ -0,0 +1,14 @@
+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>
+  );
+}

components/detailPage/detailInfo.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { X } from "lucide-react";
+import type { Product } from "@/lib/products";
+import { useLanguage } from "@/context/language-context";
+import Link from "next/link";
+import { useProduct, useProductStore } from "@/lib/productZustand";
+import Image from "next/image";
+
+export default function DetailInfo() {
+  const { t, language } = useLanguage();
+  const languageIndex = language === "uz" ? true : false;
+  const product = useProduct((state) => state.product);
+  if (product === null) return null;
+
+  return (
+    <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">
+          <h2 className="md:text-2xl text-lg font-bold text-gray-900">
+            {languageIndex ? product.name_uz : product.name_ru}
+          </h2>
+        </div>
+
+        {/* Content */}
+        <div className="sm:p-6 p-2">
+          <div className="grid grid-cols-1 md:grid-cols-2 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">
+              <Image
+                src={`https://admin.promtechno.uz${product.image}`}
+                alt="image"
+                fill
+                className="object-contain max-md:h-50"
+              />
+            </div>
+
+            <div className="space-y-6 pt-10">
+              {/* Description */}
+              <div className="text-gray-800 max-sm:text-[14px]">
+                {languageIndex
+                  ? product.description_uz
+                  : product.description_ru}
+              </div>
+              {/* CTA Buttons */}
+              <div className="space-y-3">
+                <Link href={"#contact"}>
+                  <motion.button
+                    whileHover={{ scale: 1.05 }}
+                    whileTap={{ scale: 0.95 }}
+                    className="w-full px-6 py-3 bg-primary/80 text-white rounded-lg font-semibold hover:bg-primary transition-colors"
+                  >
+                    {t.contact.send}
+                  </motion.button>
+                </Link>
+              </div>
+            </div>
+          </div>
+          {/* Specifications */}
+          <div>
+            <div className="mb-8">
+              <h3 className="text-lg font-semibold text-gray-900 mb-4">
+                {t.features}
+              </h3>
+              <div className="space-y-3 flex items-start justify-start gap-4 flex-wrap ">
+                {product.features.map((spec, idx) => (
+                  <div
+                    key={idx}
+                    className="flex flex-col justify-between py-2 border border-gray-100 rounded-lg p-2"
+                  >
+                    <span className="text-gray-600">
+                      {languageIndex ? spec.key_uz : spec.key_ru}:
+                    </span>
+                    <span className="text-gray-900">
+                      {languageIndex ? spec.value_uz : spec.value_ru}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/loading.tsx

@@ -0,0 +1,16 @@
+import { useLanguage } from "@/context/language-context";
+
+export default function Loading() {
+  const { language } = useLanguage();
+  const languageIndex = language === "uz" ? true : false;
+
+  return (
+    <div className="h-52 w-52 rounded-xl bg-linear-to-br from-primary via-primary/60 to-gray-300 backdrop-blur-md flex flex-col items-center justify-center gap-3">
+      <div className="w-8 h-8 border-4 border-gray-300 border-t-white rounded-full animate-spin" />
+
+      <span className="text-white text-lg text-center">
+        {languageIndex ? "Yuklanmoqda..." : "Загрузка..."}
+      </span>
+    </div>
+  );
+}

components/productSection/ProductCard.tsx

@@ -5,16 +5,26 @@ import { motion } from "framer-motion";
 import { ExternalLink } from "lucide-react";
 import { type Product } from "@/lib/products";
 import { useLanguage } from "@/context/language-context";
+import Link from "next/link";
+import { useProduct, useProductStore } from "@/lib/productZustand";
 
 interface ProductCardProps {
   product: Product;
-  onViewDetails: (slug: number) => void;
 }
 
-export function ProductCard({ product, onViewDetails }: ProductCardProps) {
+export function ProductCard({ product }: ProductCardProps) {
   const { t, language } = useLanguage();
   const languageIndex = language === "uz" ? true : false;
+  const setProductName = useProductStore((state) => state.setProductName);
+  const setProducts = useProduct((state) => state.setProducts);
   return (
+    <Link
+      href={`/detail?${languageIndex ? product.name_uz : product.name_ru}`}
+      onClick={() => {
+        setProductName(languageIndex ? product.name_uz : product.name_ru);
+        setProducts(product);
+      }}
+    >
       <motion.div
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
@@ -26,11 +36,12 @@ export function ProductCard({ product, onViewDetails }: ProductCardProps) {
           <motion.div
             whileHover={{ scale: 1.05 }}
             transition={{ duration: 0.4 }}
-          className="w-full h-full"
+            className="w-full h-full relative"
           >
-          <img
+            <Image
               src={`https://admin.promtechno.uz${product.image}`}
-            alt={languageIndex?product.name_uz:product.name_ru}
+              alt={languageIndex ? product.name_uz : product.name_ru}
+              fill
               className="w-full h-full object-cover"
             />
           </motion.div>
@@ -43,19 +54,18 @@ export function ProductCard({ product, onViewDetails }: ProductCardProps) {
         <div className="flex flex-col grow p-6">
           {/* Product Name */}
           <h3 className="text-xl font-bold text-gray-900 mb-3 line-clamp-2 group-hover:text-primary transition-colors duration-300">
-          {languageIndex?product.name_uz:product.name_ru}
+            {languageIndex ? product.name_uz : product.name_ru}
           </h3>
 
           {/* Short Description - Fixed Height with Line Clamp */}
           <p className="text-gray-600 text-sm leading-relaxed mb-4 line-clamp-3 grow">
-          {languageIndex?product.name_uz:product.name_ru}
+            {languageIndex ? product.name_uz : product.name_ru}
           </p>
 
           {/* CTA Button - Always at Bottom */}
           <motion.button
             whileHover={{ scale: 1.02 }}
             whileTap={{ scale: 0.98 }}
-          onClick={() => onViewDetails(product.id)}
             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>
@@ -66,5 +76,6 @@ export function ProductCard({ product, onViewDetails }: ProductCardProps) {
         {/* Decorative Corner */}
         <div className="absolute top-0 right-0 w-20 h-20 bg-linear-to-br from-blue-500/10 to-transparent rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
       </motion.div>
+    </Link>
   );
 }

components/productSection/ProductModal.tsx

@@ -1,122 +0,0 @@
-"use client";
-
-import { motion, AnimatePresence } from "framer-motion";
-import { X } from "lucide-react";
-import type { Product } from "@/lib/products";
-import { useLanguage } from "@/context/language-context";
-import Link from "next/link";
-import { useProductStore } from "@/lib/productZustand";
-import Image from "next/image";
-import { usePathname } from "next/navigation";
-
-interface ProductModalProps {
-  product: Product;
-  onClose: () => void;
-}
-
-// for github firma repo
-
-export function ProductModal({ product, onClose }: ProductModalProps) {
-  const { t, language } = useLanguage();
-  const setProductName = useProductStore((state) => state.setProductName);
-  const languageIndex = language === "uz" ? true : false;
-  const pathName = usePathname();
-  const isPathName = pathName === "/product";
-
-
-  return (
-    <AnimatePresence>
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        exit={{ opacity: 0 }}
-        onClick={onClose}
-        className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4"
-      >
-        <motion.div
-          initial={{ scale: 0.95, opacity: 0 }}
-          animate={{ scale: 1, opacity: 1 }}
-          exit={{ scale: 0.95, opacity: 0 }}
-          onClick={(e) => e.stopPropagation()}
-          className="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto"
-        >
-          {/* Header */}
-          <div className="sticky z-10 top-0 bg-white border-b border-gray-200 sm:p-6 p-2 flex justify-between items-center">
-            <h2 className="md:text-2xl text-lg font-bold text-gray-900">
-              {languageIndex ? product.name_uz : product.name_ru}
-            </h2>
-            <motion.button
-              whileHover={{ scale: 1.1 }}
-              whileTap={{ scale: 0.95 }}
-              onClick={onClose}
-              className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
-            >
-              <X size={24} />
-            </motion.button>
-          </div>
-
-          {/* Content */}
-          <div className="sm:p-6 p-2">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
-              {/* Image */}
-              <div className="relative max-sm:w-full max-md:h-50">
-                <Image
-                  src={`https://admin.promtechno.uz${product.image}`}
-                  alt="image"
-                  fill
-                  className="object-contain max-md:h-50"
-                />
-              </div>
-
-              {/* Specifications */}
-              <div>
-                <div className="mb-8">
-                  <h3 className="text-lg font-semibold text-gray-900 mb-4">
-                    {t.features}
-                  </h3>
-                  <div className="space-y-3">
-                    {product.features.map((spec, idx) => (
-                      <div
-                        key={idx}
-                        className="flex max-sm:flex-col justify-between py-2 border-b border-gray-100"
-                      >
-                        <span className="text-gray-600">
-                          {languageIndex ? spec.key_uz : spec.key_ru}:
-                        </span>
-                        <span className="text-gray-600">
-                          {languageIndex ? spec.value_uz : spec.value_ru}
-                        </span>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-
-                {/* CTA Buttons */}
-                <div className="space-y-3">
-                  <Link href={isPathName ? "/#contact" : "#contact"} >
-                    <motion.button
-                      onClick={() => {
-                        onClose();
-                        setProductName(
-                          languageIndex ? product.name_uz : product.name_ru
-                        );
-                      }}
-                      whileHover={{ scale: 1.05 }}
-                      whileTap={{ scale: 0.95 }}
-                      className="w-full px-6 py-3 bg-primary/80 text-white rounded-lg font-semibold hover:bg-primary transition-colors"
-                    >
-                      {t.contact.send}
-                    </motion.button>
-                  </Link>
-                </div>
-              </div>
-            </div>
-            <div className="text-gray-800 max-sm:text-[14px]">
-              {languageIndex ? product.description_uz : product.description_ru}
-            </div>
-          </div>
-        </motion.div>
-      </motion.div>
-    </AnimatePresence>
-  );
-}

components/productSection/ProductsGrid.tsx

@@ -8,37 +8,32 @@ import { useLanguage } from "@/context/language-context";
 import Link from "next/link";
 import { ChevronsRight } from "lucide-react";
 import { ProductCard } from "./ProductCard";
-import { ProductModal } from "./ProductModal";
 import axios from "axios";
 import EmptyState from "../productsPage/emptyData";
+import Loading from "../loading";
 
 // hello everyone
 
 export function ProductsGrid() {
   const { t } = useLanguage();
-  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
   const [allProducts, setAllProducts] = useState<any>([]);
+  const [loading, setLoading] = useState<boolean>(false);
 
   useEffect(() => {
     async function getData() {
+      setLoading(true);
       await axios
         .get("https://admin.promtechno.uz/api/products/")
         .then((res) => {
           console.log("all data main page: ", res?.data);
           const allData = res?.data || [];
           setAllProducts(allData.slice(0, 3));
+          setLoading(false);
         });
     }
     getData();
   }, []);
 
-  const handleViewDetails = (slug: number) => {
-    const product = allProducts.find((p: any) => p.id === slug);
-    if (product) {
-      setSelectedProduct(product);
-    }
-  };
-
   return (
     <>
       <section id="products" className="relative py-20">
@@ -66,8 +61,11 @@ 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 /></div>}
+
           {/* Product Grid */}
-          {allProducts && allProducts.length > 0 ? (
+          { loading|| allProducts && allProducts.length > 0 ? (
             <motion.div
               initial="hidden"
               whileInView="visible"
@@ -78,7 +76,6 @@ export function ProductsGrid() {
                 <motion.div key={product.id}>
                   <ProductCard
                     product={product}
-                    onViewDetails={handleViewDetails}
                   />
                 </motion.div>
               ))}
@@ -96,14 +93,6 @@ export function ProductsGrid() {
           </Link>
         </div>
       </section>
-
-      {/* Product Modalll */}
-      {selectedProduct && (
-        <ProductModal
-          product={selectedProduct}
-          onClose={() => setSelectedProduct(null)}
-        />
-      )}
     </>
   );
 }

lib/productZustand.ts

@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import { devtools, persist } from "zustand/middleware";
+import type { Product } from "@/lib/products";
 
 interface ProductStore {
   productName: string;
@@ -21,3 +22,22 @@ export const useProductStore = create<ProductStore>()(
     )
   )
 );
+
+interface ProductDetail {
+  product: Product | null;
+  setProducts: (product: Product) => void;
+}
+
+export const useProduct = create<ProductDetail>()(
+  devtools(
+    persist(
+      (set) => ({
+        product: null,
+        setProducts: (product: Product) => set({ product }),
+      }),
+      {
+        name: "product-detail-storage",
+      }
+    )
+  )
+);