added backend

components/productSection/ProductCard.tsx

@@ -3,62 +3,68 @@
 import Image from "next/image";
 import { motion } from "framer-motion";
 import { ExternalLink } from "lucide-react";
-import type { Product } from "@/lib/products";
+import { type Product } from "@/lib/products";
 import { useLanguage } from "@/context/language-context";
 
 interface ProductCardProps {
   product: Product;
-  onViewDetails: (slug: string) => void;
+  onViewDetails: (slug: number) => void;
 }
 
 export function ProductCard({ product, onViewDetails }: ProductCardProps) {
-  const {t} = useLanguage();
+  const { t, language } = useLanguage();
+  const languageIndex = language === "uz" ? true : false;
   return (
     <motion.div
-      whileHover={{ y: -8 }}
+      initial={{ opacity: 0, y: 20 }}
-      className="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow"
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+      className="group relative h-full flex flex-col bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-2xl transition-all duration-300 border border-gray-100"
     >
-      {/* Image */}
+      {/* Image Container - Fixed Height */}
-      <div className="relative h-48 bg-gray-100 overflow-hidden group">
+      <div className="relative w-full h-64 overflow-hidden bg-linear-to-br from-gray-50 to-gray-100">
-        <Image
+        <motion.div
-          src={product.images[0]}
+          whileHover={{ scale: 1.05 }}
-          alt={product.nameKey}
+          transition={{ duration: 0.4 }}
-          fill
+          className="w-full h-full"
-          className="object-contain group-hover:scale-110 transition-transform duration-300"
+        >
+          <img
+            src={`https://api.serenmebel.uz${product.image}`}
+            alt={languageIndex?product.name_uz:product.name_ru}
+            className="w-full h-full object-cover"
           />
-        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors" />
+        </motion.div>
+        
+        {/* Gradient Overlay */}
+        <div className="absolute inset-0 bg-linear-to-t from-black/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
       </div>
 
-      {/* Content */}
+      {/* Content Container - Flex Grow */}
-      <div className="p-6">
+      <div className="flex flex-col grow p-6">
-        <h3 className="text-xl font-bold text-gray-900 mb-2">
+        {/* Product Name */}
-          {product.nameKey}
+        <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}
         </h3>
-        <p className="text-gray-600 text-sm mb-4">
+
-          {product.shortDescriptionKey}
+        {/* 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}
         </p>
 
-        {/* Specs Preview */}
+        {/* CTA Button - Always at Bottom */}
-        {/* <div className="mb-4 space-y-2">
-          {product.specs.slice(0, 2).map((spec, idx) => (
-            <div key={idx} className="flex justify-between text-sm">
-              <span className="text-gray-600">{spec.key}:</span>
-              <span className="font-semibold text-gray-900">{spec.value}</span>
-            </div>
-          ))}
-        </div> */}
-
-        {/* CTA Button */}
         <motion.button
-          whileHover={{ scale: 1.05 }}
+          whileHover={{ scale: 1.02 }}
-          whileTap={{ scale: 0.95 }}
+          whileTap={{ scale: 0.98 }}
-          onClick={() => onViewDetails(product.slug)}
+          onClick={() => onViewDetails(product.id)}
-          className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-primary/80 text-white rounded-lg font-medium hover:bg-primary transition-colors"
+          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"
         >
-          {t.details}
+          <span>{t.details}</span>
-          <ExternalLink size={16} />
+          <ExternalLink className="w-4 h-4 group-hover/button:translate-x-1 transition-transform duration-300" />
         </motion.button>
       </div>
+
+      {/* 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>
   );
 }

components/productSection/ProductModal.tsx

@@ -2,11 +2,12 @@
 
 import { motion, AnimatePresence } from "framer-motion";
 import { X } from "lucide-react";
-import { ProductViewer } from "./ProductViewer";
 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;
@@ -14,8 +15,12 @@ interface ProductModalProps {
 }
 
 export function ProductModal({ product, onClose }: ProductModalProps) {
-  const { t } = useLanguage();
+  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>
@@ -34,9 +39,9 @@ export function ProductModal({ product, onClose }: ProductModalProps) {
           className="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto"
         >
           {/* Header */}
-          <div className="sticky top-0 bg-white border-b border-gray-200 p-6 flex justify-between items-center">
+          <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="text-2xl font-bold text-gray-900">
+            <h2 className="md:text-2xl text-lg font-bold text-gray-900">
-              {product.nameKey}
+              {languageIndex ? product.name_uz : product.name_ru}
             </h2>
             <motion.button
               whileHover={{ scale: 1.1 }}
@@ -49,39 +54,35 @@ export function ProductModal({ product, onClose }: ProductModalProps) {
           </div>
 
           {/* Content */}
-          <div className="p-6">
+          <div className="sm:p-6 p-2">
             <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
-              {/* 3D Viewer / Gallery */}
+              {/* Image */}
-              <div>
+              <div className="relative max-sm:w-full max-md:h-50">
-                <ProductViewer
+                <Image
-                  modelUrl={product.model3D}
+                  src={`https://api.serenmebel.uz${product.image}`}
-                  images={product.images}
+                  alt="image"
-                  autoRotate={true}
+                  fill
+                  className="object-contain max-md:h-50"
                 />
               </div>
 
-              {/* Details */}
-              <div>
-                <p className="text-gray-600 mb-6">
-                  {product.longDescriptionKey
-                    ? product.longDescriptionKey
-                    : product.shortDescriptionKey}
-                </p>
-
               {/* Specifications */}
+              <div>
                 <div className="mb-8">
                   <h3 className="text-lg font-semibold text-gray-900 mb-4">
-                    Technical Specifications
+                    {t.features}
                   </h3>
                   <div className="space-y-3">
-                    {product.specs.map((spec, idx) => (
+                    {product.features.map((spec, idx) => (
                       <div
                         key={idx}
-                        className="flex justify-between py-2 border-b border-gray-100"
+                        className="flex max-sm:flex-col justify-between py-2 border-b border-gray-100"
                       >
-                        <span className="text-gray-600">{spec.key}:</span>
+                        <span className="text-gray-600">
-                        <span className="font-semibold text-gray-900">
+                          {languageIndex ? spec.key_uz : spec.key_ru}:
-                          {spec.value}
+                        </span>
+                        <span className="text-gray-600">
+                          {languageIndex ? spec.value_uz : spec.value_ru}
                         </span>
                       </div>
                     ))}
@@ -90,15 +91,17 @@ export function ProductModal({ product, onClose }: ProductModalProps) {
 
                 {/* CTA Buttons */}
                 <div className="space-y-3">
-                  <Link href="#contact">
+                  <Link href={isPathName ? "/#contact" : "#contact"} >
                     <motion.button
                       onClick={() => {
                         onClose();
-                        setProductName(product.nameKey);
+                        setProductName(
+                          languageIndex ? product.name_uz : product.name_ru
+                        );
                       }}
                       whileHover={{ scale: 1.05 }}
                       whileTap={{ scale: 0.95 }}
-                      className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-colors"
+                      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>
@@ -106,6 +109,9 @@ export function ProductModal({ product, onClose }: ProductModalProps) {
                 </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>

components/productSection/ProductsGrid.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { motion } from "framer-motion";
-import { getAllProducts } from "@/lib/products";
 import type { Product } from "@/lib/products";
 import Image from "next/image";
 import { useLanguage } from "@/context/language-context";
@@ -10,34 +9,33 @@ import Link from "next/link";
 import { ChevronsRight } from "lucide-react";
 import { ProductCard } from "./ProductCard";
 import { ProductModal } from "./ProductModal";
+import axios from "axios";
 
 // hello everyone
 
 export function ProductsGrid() {
   const { t } = useLanguage();
-  const products = getAllProducts();
   const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
+  const [allProducts, setAllProducts] = useState<any>([]);
 
-  const handleViewDetails = (slug: string) => {
+  useEffect(() => {
-    const product = products.find((p) => p.slug === slug);
+    async function getData() {
+      await axios.get("https://api.serenmebel.uz/api/products/").then((res) => {
+        console.log("all data main page: ", res?.data);
+        const allData = res?.data || [];
+        setAllProducts(allData.slice(0,3));
+      });
+    }
+    getData();
+  }, []);
+
+  const handleViewDetails = (slug: number) => {
+    const product = allProducts.find((p: any) => p.id === slug);
     if (product) {
       setSelectedProduct(product);
     }
   };
 
-  const containerVariants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: { staggerChildren: 0.1 },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: { opacity: 1, y: 0 },
-  };
-
   return (
     <>
       <section id="products" className="relative py-20">
@@ -67,14 +65,13 @@ export function ProductsGrid() {
 
           {/* Product Grid */}
           <motion.div
-            variants={containerVariants}
             initial="hidden"
             whileInView="visible"
             viewport={{ once: true }}
             className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
           >
-            {products.map((product) => (
+            {allProducts.map((product: any) => (
-              <motion.div key={product.id} variants={itemVariants}>
+              <motion.div key={product.id} >
                 <ProductCard
                   product={product}
                   onViewDetails={handleViewDetails}

components/productsPage/emptyData.tsx

@@ -55,12 +55,12 @@ export default function EmptyState() {
             </p>
 
             <div className="mt-6 flex flex-col sm:flex-row items-center sm:items-start gap-3 md:gap-4 justify-center md:justify-start">
-              <motion.a
+              <motion.div
                 className="inline-flex items-center justify-center px-5 py-2.5 bg-primary/70 hover:bg-primary text-white rounded-lg shadow-md transition-colors text-sm font-medium"
                 // @ts-ignore allow Link-like anchor
               >
                 <Link href="/">{t.empty_data.back || "Bosh sahifa"}</Link>
-              </motion.a>
+              </motion.div>
             </div>
           </motion.div>
         </div>

components/productsPage/products.tsx

@@ -1,10 +1,10 @@
 "use client";
 import { useEffect, useState } from "react";
 import EmptyState from "./emptyData";
-import { GET } from "@/lib/allProducts";
 import { ProductModal } from "../productSection/ProductModal";
 import { motion } from "framer-motion";
 import { ProductCard } from "../productSection/ProductCard";
+import axios from "axios";
 
 const itemVariants = {
   hidden: { opacity: 0, y: 20 },
@@ -14,21 +14,26 @@ const itemVariants = {
 export default function Products() {
   const [allProducts, setAllProducts] = useState<any>(null);
   const [selectedProduct, setSelectedProduct] = useState<any>(null);
-  const all = GET();
+
   useEffect(() => {
-    all && Array.isArray(all) && all.length > 0
+    async function getData() {
-      ? setAllProducts(all)
+      await axios.get("https://api.serenmebel.uz/api/products/").then((res) => {
-      : setAllProducts([]);
+        console.log("all data: ", res?.data);
-    setAllProducts;
+        const allData = res?.data || [];
-  }, [all]);
+        setAllProducts(allData);
-  const handleViewDetails = (slug: string) => {
+      });
-    const product = allProducts.find((p: any) => p.slug === slug);
+    }
+    getData();
+  }, []);
+
+  const handleViewDetails = (id: number) => {
+    const product = allProducts.find((p: any) => p.id === id);
     if (product) {
       setSelectedProduct(product);
     }
   };
   return (
-    <div className="">
+    <div className="py-20 max-w-[1200px] w-full mx-auto px-2 ">
       {allProducts && allProducts.length > 0 ? (
         <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4">
           {allProducts.map((product: any) => (

lib/allProducts.ts

@@ -1,14 +0,0 @@
-import axios from "axios";
-
-export async function GET() {
-  try {
-    const res = await axios.get("https://api.serenmebel.uz/api/products/");
-    console.log("all products res: ", res?.data);
-
-    return Response.json(res.data);
-  } catch (error: any) {
-    console.log("all products error: ", error);
-
-    return Response.json({ error: error.message });
-  }
-}

lib/products.ts

@@ -1,61 +1,16 @@
+interface features {
+  key_uz: string;
+  key_ru: string;
+  value_uz: string;
+  value_ru: string;
+}
+
 export interface Product {
-  id: string;
+  id: number;
-  nameKey: string;
+  name_uz: string;
-  slug: string;
+  name_ru: string;
-  shortDescriptionKey: string;
+  description_uz: string;
-  longDescriptionKey?: string;
+  description_ru: string;
-  images: string[];
+  features:features[];
-  model3D?: string;
+  image:string;
-  specs: { key: string; value: string }[];
-}
-
-// Sample products data
-export const products: Product[] = [
-  {
-    id: "1",
-    nameKey: "Schotchik Nasos",
-    slug: "Yuqori sifatli schotchik nasos, benzin, dizel va kerosinni tashishda ishlatiladi.",
-    shortDescriptionKey: "Xavfsiz neft mahsulotlarini tashish uchun",
-    images: ["/product/product.jpg", "/images/pump-1-alt.jpg"],
-    specs: [
-      { key: "Flow Rate", value: "100 L/min" },
-      { key: "Pressure", value: "10 bar" },
-      { key: "Power", value: "5.5 kW" },
-      { key: "Temperature Range", value: "-10°C to 60°C" },
-    ],
-  },
-  {
-    id: "2",
-    nameKey: "Agregat Nasos",
-    slug: "Katta volumli neft mahsulotlarini tashishda o'rnatilgan.",
-    shortDescriptionKey: "Kuchli va ishonchli aggregat nasos",
-    images: ["/product/product1.jpg", "/images/pump-2-alt.jpg"],
-    specs: [
-      { key: "Flow Rate", value: "250 L/min" },
-      { key: "Pressure", value: "15 bar" },
-      { key: "Power", value: "11 kW" },
-      { key: "Temperature Range", value: "-10°C to 70°C" },
-    ],
-  },
-  {
-    id: "3",
-    nameKey: "СЦЛ 20/24",
-    slug:"Chuqurligi 20-24 metrda ishlaydigan professional nasos.",
-    shortDescriptionKey: "Professional kalibrli nasos",
-    images: ["/product/product2.jpg", "/images/pump-3-alt.jpg"],
-    specs: [
-      { key: "Depth Rating", value: "20-24 m" },
-      { key: "Flow Rate", value: "150 L/min" },
-      { key: "Suction Lift", value: "7 m" },
-      { key: "Power", value: "7.5 kW" },
-    ],
-  },
-];
-
-export function getProductBySlug(slug: string): Product | undefined {
-  return products.find((p) => p.slug === slug);
-}
-
-export function getAllProducts(): Product[] {
-  return products;
 }

lib/translations.ts

@@ -92,6 +92,7 @@ export const translations = {
     },
     more: "Ko'proq ko'rish",
     details: "Batafsil",
+    features: "Texnik tavsiflar",
     empty_data: {
       description: "Mahsulot topilmadi!!!",
       back: "Asosiy sahifaga qaytish",
@@ -195,6 +196,7 @@ export const translations = {
     },
     more: "Смотреть больше",
     details: "Подробнее",
+    features: "Технические характеристики",
     empty_data: {
       description: "Товар не найден!!!",
       back: "Вернуться на главную страницу",

locales/ru.json

@@ -16,7 +16,8 @@
   },
   "products": {
     "title": "Продукты",
-    "viewDetails": "Подробнее"
+    "viewDetails": "Подробнее",
+    "features": "Технические характеристики"
   },
   "faq": {
     "title": "Часто Задаваемые Вопросы",

locales/uz.json

@@ -16,7 +16,8 @@
   },
   "products": {
     "title": "Mahsulotlar",
-    "viewDetails": "Batafsil"
+    "viewDetails": "Batafsil",
+    "features": "Texnik tavsiflar"
   },
   "faq": {
     "title": "Tez-tez So'raladigan Savollar",

next.config.ts

@@ -1,7 +1,18 @@
+import type { NextConfig } from "next";
+import createNextIntlPlugin from "next-intl/plugin";
 
-import createNextIntlPlugin from 'next-intl/plugin';
+const nextConfig: NextConfig = {
- 
+  images: {
-const nextConfig = {};
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "api.serenmebel.uz",
+        pathname: "/resources/media/**",
+      },
+    ],
+  },
+};
 
 const withNextIntl = createNextIntlPlugin();
+
 export default withNextIntl(nextConfig);