Merge pull request #307 from Sawan-Kushwah/add/notFound

Add/not found #307

client/src/component/Blog.jsx

@@ -6,6 +6,7 @@ import img3 from "../assets/blogs/3.png";
 import img4 from "../assets/blogs/4.jpeg";
 import img5 from "../assets/blogs/5.jpeg";
 import img6 from "../assets/blogs/6.png";
+import { Link } from 'react-router-dom';
 
 
 // Dummy blog data
@@ -120,8 +121,8 @@ export default function BlogPage() {
                 key={category}
                 onClick={() => setSelectedCategory(category)}
                 className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${selectedCategory === category
-                    ? 'bg-blue-500 text-white'
-                    : 'bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200'
+                  ? 'bg-blue-500 text-white'
+                  : 'bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200'
                   }`}
               >
                 {category}
@@ -132,7 +133,7 @@ export default function BlogPage() {
 
         {/* Blog Grid */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {filteredPosts.map(post => (
+          {filteredPosts.length > 0 ? filteredPosts.map(post => (
             <article
               key={post.id}
               className="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300"
@@ -175,7 +176,41 @@ export default function BlogPage() {
                 </div>
               </div>
             </article>
-          ))}
+          ))
+            :
+
+            <section className="bg-white  ">
+              <div className="container flex items-center px-6 py-12 mx-auto">
+                <div className="flex flex-col items-center max-w-sm mx-auto text-center">
+                  <p className="p-3 text-sm font-medium text-blue-500 rounded-full bg-blue-50  ">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" className="w-6 h-6">
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+                    </svg>
+                  </p>
+                  <h1 className="mt-3 text-2xl font-semibold text-gray-800  md:text-3xl">Page not found</h1>
+                  <p className="mt-4 text-gray-500  ">The page you are looking for doesnt exist. Here are some helpful links:</p>
+
+                  <div className="flex items-center w-full mt-6 gap-x-3 shrink-0 sm:w-auto">
+                    <button onClick={() => setSearchTerm('')} className="flex items-center justify-center w-1/2 px-5 py-2 text-sm text-gray-700 transition-colors duration-200 bg-white border rounded-lg gap-x-2 sm:w-auto  hover:bg-gray-100  ">
+                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-5 h-5 rtl:rotate-180">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18" />
+                      </svg>
+
+
+                      <span >Go back</span>
+                    </button>
+
+                    <Link to={'/'} className="w-1/2 px-5 py-2 text-sm tracking-wide text-white transition-colors duration-200 bg-blue-500 rounded-lg shrink-0 sm:w-auto hover:bg-blue-600  ">
+                      Take me home
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+
+
+          }
         </div>
       </div>
     </div>