empty data component

app/product/page.tsx

@@ -1,9 +1,11 @@
-import React from 'react'
+
+import dynamic from 'next/dynamic'
+const Products = dynamic(() => import('@/components/productsPage/products'));
 
 export default function Page() {
   return (
-    <div>
-      
+    <div className='min-h-screen bg-white'>
+      <Products/>
     </div>
   )
 }

components/Footer.tsx

@@ -34,10 +34,10 @@ export function Footer() {
           initial="hidden"
           whileInView="visible"
           viewport={{ once: true }}
-          className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12"
+          className="grid grid-cols-1 md:grid-cols-4 max-md:justify-items-center gap-8 mb-12"
         >
           {/* Brand */}
-          <motion.div variants={itemVariants}>
+          <motion.div variants={itemVariants} className="max-md:flex flex-col items-center justify-center">
             <h3 className=" mb-2">
               <Image
                 src="/logo.jpg"
@@ -54,8 +54,8 @@ export function Footer() {
 
           {/* Quick Links */}
           <motion.div variants={itemVariants}>
-            <h4 className="font-semibold mb-4">{t.footer.common.quickLinks}</h4>
-            <ul className="space-y-2 text-gray-400 text-sm">
+            <h4 className="font-semibold mb-4 max-md:text-center">{t.footer.common.quickLinks}</h4>
+            <ul className="space-y-2 text-gray-400 text-sm max-md:text-center">
               <li>
                 <a href="#about" className="hover:text-white transition-colors text-[15px] ">
                   {t.footer.common.aboutUs}
@@ -82,8 +82,8 @@ export function Footer() {
 
           {/* Contact Info */}
           <motion.div variants={itemVariants}>
-            <h4 className="font-semibold mb-4">{t.footer.common.contact}</h4>
-            <ul className="space-y-2 text-gray-400 text-sm">
+            <h4 className="font-semibold mb-4 max-md:text-center">{t.footer.common.contact}</h4>
+            <ul className="space-y-2 text-gray-400 text-sm max-md:text-center">
               <li className="text-[15px]">{t.footer.common.email}: info@firma.uz</li>
               <li className="text-[15px]">{t.footer.common.phone}: +998 (99) 869-74-70</li>
               <li className="text-[15px]">{t.footer.common.telegram}: @firma_support</li>

components/productsPage/emptyData.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { FileSearch } from "lucide-react";
+import { useLanguage } from "@/context/language-context";
+
+export default function EmptyState() {
+  const { t } = useLanguage();
+
+  const container = {
+    hidden: { opacity: 0, y: 8 },
+    show: { opacity: 1, y: 0, transition: { staggerChildren: 0.06 } },
+  };
+
+  return (
+    <motion.section
+      aria-labelledby="empty-state-title"
+      className="w-full px-4 py-16 flex items-center justify-center"
+      initial="hidden"
+      animate="show"
+      variants={container}
+    >
+      <div className="max-w-5xl w-full bg-white/60 bg-linear-to-br from-primary to-gray-800 backdrop-blur-md rounded-2xl shadow-lg overflow-hidden">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-center p-8 md:p-12">
+          {/* Illustration / Icon */}
+          <motion.div className="flex items-center justify-center">
+            <motion.div
+              className="p-6 bg-linear-to-tr from-blue-50 to-blue-100 rounded-xl shadow-inner"
+              initial={{ scale: 0.96 }}
+              animate={{ scale: [0.96, 1.02, 0.98, 1] }}
+              transition={{
+                duration: 4,
+                repeat: Infinity,
+                repeatType: "mirror",
+              }}
+            >
+              <FileSearch className="w-28 h-28 text-primary" />
+            </motion.div>
+          </motion.div>
+
+          {/* Content */}
+          <motion.div className="text-center md:text-left">
+            <h3
+              id="empty-state-title"
+              className="text-2xl sm:text-3xl font-semibold text-gray-900 dark:text-gray-100"
+            >
+              {t.empty_data.title || "Hech narsa topilmadi"}
+            </h3>
+
+            <p className="mt-3 text-sm sm:text-base text-gray-600 dark:text-gray-300 max-w-xl mx-auto md:mx-0">
+              {t.empty_data.description}
+            </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
+                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>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </motion.section>
+  );
+}

components/productsPage/products.tsx

@@ -1,16 +1,24 @@
+"use client";
 import { allProduct } from "@/lib/allProducts";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
+import EmptyState from "./emptyData";
 
 export default function Products() {
   const [allProducts, setAllProducts] = useState<any>(null);
   useEffect(() => {
     const all = allProduct();
-    all && Array.isArray(all) ? setAllProducts(all) : setAllProducts([]);
+    all && Array.isArray(all) && all.length > 0
+      ? setAllProducts(all)
+      : setAllProducts([]);
     setAllProducts;
-  }, [allProducts]);
+  }, []);
   return (
-    <div>
+    <div className="">
+      {allProducts && allProducts.length > 0 ? (
         <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4"></div>
+      ) : (
+        <EmptyState />
+      )}
     </div>
   );
 }

lib/allProducts.ts

@@ -2,9 +2,12 @@ import axios from "axios";
 
 export const allProduct = async () => {
     try{
-        const res = await axios.get('')
+        const res = await axios.get('https://api.serenmebel.uz/api/products/');
+        console.log("all products res: ",res);
+        
+        return res
     }catch(err){
         console.log("all product error: ",err);
-        
+        return []
     }
 };

lib/translations.ts

@@ -92,6 +92,10 @@ export const translations = {
     },
     more: "Ko'proq ko'rish",
     details: "Batafsil",
+    empty_data:{
+      description:"Mahsulot topilmadi!!!",
+      back:"Asosiy sahifaga qaytish"
+    }
   },
 
   ru: {