Merge branch 'recodehive:main' into frontend

Author: Adez017

src/database/blogs/index.tsx

@@ -58,7 +58,7 @@ const blogs: Blog[] = [
     slug: "git-coding-agent",
   },
       {
-    id: 6,
+    id: 7,
     title: "Apache Spark Tutorial",
     image: "/img/blogs/07-spark-blog-banner.png",
     description:

src/pages/blogs/blogs-new.css

@@ -600,7 +600,7 @@
 /* Search Container */
 .search-container {
   max-width: 600px;
-  margin: 60px auto 0;
+  margin: 30px auto 30px;
   position: relative;
 }
 
@@ -636,7 +636,7 @@
   backdrop-filter: blur(30px);
   border: 2px solid transparent;
   border-radius: 24px;
-  padding: 20px 28px;
+  padding:0;
   box-shadow:
     0 20px 60px rgba(0, 0, 0, 0.08),
     0 8px 32px rgba(99, 102, 241, 0.1),
@@ -678,13 +678,18 @@
 }
 
 .search-icon {
+  position: absolute;
+  left: 16px;
+  top: 50%;
+  transform: translateY(-50%);
   width: 24px;
   height: 24px;
   color: #6366f1;
   margin-right: 18px;
   flex-shrink: 0;
   transition: all 0.3s ease;
   animation: iconPulse 2s ease-in-out infinite;
+  pointer-events: none;
 }
 
 @keyframes iconPulse {
@@ -714,6 +719,7 @@
   font-weight: 500;
   letter-spacing: 0.01em;
   transition: all 0.2s ease;
+  padding: 16px 48px 16px 48px;
 }
 
 .search-input:focus {
@@ -731,12 +737,15 @@
 .search-input::placeholder {
   color: #94a3b8;
   font-weight: 400;
+  font-size: 14px;
 }
 
 .clear-search-icon {
+  position: absolute;
+  right: 16px;
   width: 24px;
   height: 24px;
-  color: #94a3b8;
+  color: #758090;
   background: none;
   border: none;
   cursor: pointer;
@@ -779,6 +788,7 @@
   position: relative;
   z-index: 1;
   transition: transform 0.2s ease;
+  stroke-width: 2.5;
 }
 
 .clear-search-icon:hover svg {