diff --git a/src/css/custom.css b/src/css/custom.css
index 23cc1367..9d30a21f 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -186,3 +186,62 @@ html.theme-light .text-gray-900 {
   color: #1a1a1a !important;
 }
 
+/* Modern Blog Enhancements */
+.modern-gradient-bg {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.modern-card-shadow {
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.modern-card-shadow-hover {
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+
+.modern-backdrop-blur {
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.modern-text-gradient {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.modern-transition {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.modern-hover-lift:hover {
+  transform: translateY(-4px);
+}
+
+.modern-hover-scale:hover {
+  transform: scale(1.02);
+}
+
+/* Smooth scrolling for the entire page */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Enhanced focus styles */
+*:focus {
+  outline: 2px solid #667eea;
+  outline-offset: 2px;
+}
+
+/* Custom selection colors */
+::selection {
+  background: rgba(102, 126, 234, 0.2);
+  color: inherit;
+}
+
+::-moz-selection {
+  background: rgba(102, 126, 234, 0.2);
+  color: inherit;
+}
+
diff --git a/src/pages/blogs/blogs-new.css b/src/pages/blogs/blogs-new.css
new file mode 100644
index 00000000..66ad722d
--- /dev/null
+++ b/src/pages/blogs/blogs-new.css
@@ -0,0 +1,904 @@
+/* Blog Page Styles - RecodeHive Design */
+* {
+  box-sizing: border-box;
+}
+
+.blog-page {
+  font-family: 'Inter', sans-serif;
+  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 50%, #e8ebff 100%);
+  min-height: 100vh;
+}
+
+/* Hero Section */
+.blog-hero-section {
+  padding: 80px 20px 60px;
+  text-align: center;
+  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 50%, #e8ebff 100%);
+}
+
+.blog-hero-container {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.blog-main-title {
+  font-size: 48px;
+  font-weight: 700;
+  margin: 0 0 16px 0;
+  background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  line-height: 1.2;
+}
+
+.blog-main-subtitle {
+  font-size: 16px;
+  color: #64748b;
+  margin: 0 0 40px 0;
+  line-height: 1.6;
+}
+
+/* Category Icons */
+.blog-category-icons {
+  display: flex;
+  justify-content: center;
+  gap: 40px;
+  margin: 40px 0;
+  flex-wrap: wrap;
+}
+
+.category-icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+.category-icon:hover {
+  transform: translateY(-2px);
+}
+
+.icon-wrapper {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.8);
+  border: 1px solid rgba(99, 102, 241, 0.1);
+  transition: all 0.2s ease;
+}
+
+.icon-wrapper svg {
+  width: 24px;
+  height: 24px;
+  color: #6366f1;
+}
+
+/* React Icons styling */
+.icon-wrapper {
+  color: #6366f1;
+}
+
+.icon-wrapper.development {
+  background: rgba(99, 102, 241, 0.1);
+  color: #6366f1;
+}
+
+.icon-wrapper.design {
+  background: rgba(236, 72, 153, 0.1);
+  color: #ec4899;
+}
+
+.icon-wrapper.ai-tech {
+  background: rgba(168, 85, 247, 0.1);
+  color: #a855f7;
+}
+
+.icon-wrapper.innovation {
+  background: rgba(245, 158, 11, 0.1);
+  color: #f59e0b;
+}
+
+.category-icon span {
+  font-size: 12px;
+  color: #64748b;
+  font-weight: 500;
+}
+
+.explore-articles-btn {
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  color: white;
+  border: none;
+  padding: 14px 32px;
+  border-radius: 25px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+  margin-top: 16px;
+}
+
+.explore-articles-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
+}
+
+/* Latest Articles Section */
+.latest-articles-section {
+  padding: 80px 20px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+  position: relative;
+  overflow: hidden;
+}
+
+.latest-articles-section::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background:
+    radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.05) 0%, transparent 50%),
+    radial-gradient(circle at 90% 80%, rgba(168, 85, 247, 0.05) 0%, transparent 50%);
+  pointer-events: none;
+}
+
+.articles-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  position: relative;
+  z-index: 1;
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 64px;
+  position: relative;
+}
+
+.section-title {
+  font-size: 48px;
+  font-weight: 800;
+  color: #1e293b;
+  margin: 0 0 24px 0;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  position: relative;
+}
+
+.section-title::after {
+  content: '';
+  position: absolute;
+  bottom: -12px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80px;
+  height: 4px;
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  border-radius: 2px;
+}
+
+.section-subtitle {
+  font-size: 18px;
+  color: #64748b;
+  margin: 0;
+  line-height: 1.6;
+  max-width: 600px;
+  margin: 0 auto;
+  font-weight: 400;
+}
+
+/* Search Container */
+.search-container {
+  max-width: 500px;
+  margin: 40px auto 0;
+  position: relative;
+}
+
+.search-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: white;
+  border-radius: 16px;
+  padding: 16px 20px;
+  box-shadow:
+    0 4px 20px rgba(0, 0, 0, 0.08),
+    0 1px 3px rgba(0, 0, 0, 0.1);
+  border: 2px solid transparent;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+}
+
+.search-wrapper:focus-within {
+  border-color: #6366f1;
+  box-shadow:
+    0 8px 30px rgba(99, 102, 241, 0.15),
+    0 0 0 4px rgba(99, 102, 241, 0.1);
+  transform: translateY(-2px);
+}
+
+.search-icon {
+  width: 22px;
+  height: 22px;
+  color: #6366f1;
+  margin-right: 16px;
+  flex-shrink: 0;
+  transition: color 0.2s ease;
+}
+
+.search-wrapper:focus-within .search-icon {
+  color: #4f46e5;
+}
+
+.search-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: 16px;
+  color: #1e293b;
+  background: transparent;
+  font-weight: 500;
+}
+
+.search-input::placeholder {
+  color: #94a3b8;
+  font-weight: 400;
+}
+
+.search-decoration {
+  display: none;
+}
+
+/* Search Results Info */
+.search-results-info {
+  text-align: center;
+  margin: 32px 0 24px;
+  padding: 16px 24px;
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(168, 85, 247, 0.05) 100%);
+  border-radius: 12px;
+  border: 1px solid rgba(99, 102, 241, 0.1);
+  max-width: 500px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.search-results-info p {
+  font-size: 15px;
+  color: #475569;
+  margin: 0;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.search-results-info p::before {
+  content: '🔍';
+  font-size: 16px;
+}
+
+/* No Results State */
+.no-results {
+  grid-column: 1 / -1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 300px;
+  text-align: center;
+}
+
+.no-results-content {
+  max-width: 400px;
+}
+
+.no-results-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+  opacity: 0.6;
+}
+
+.no-results h3 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #1e293b;
+  margin: 0 0 8px 0;
+}
+
+.no-results p {
+  font-size: 16px;
+  color: #64748b;
+  margin: 0 0 24px 0;
+  line-height: 1.5;
+}
+
+.clear-search-btn {
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
+}
+
+.clear-search-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
+}
+
+/* Articles Grid */
+.articles-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 32px;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+/* Large Desktop - 3 columns */
+@media (min-width: 1200px) {
+  .articles-grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 40px;
+    max-width: 1400px;
+  }
+}
+
+/* Desktop and Tablet - 2 columns */
+@media (max-width: 1199px) and (min-width: 768px) {
+  .articles-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 32px;
+    max-width: 900px;
+  }
+}
+
+/* Small Tablet - 2 columns with smaller gap */
+@media (max-width: 767px) and (min-width: 576px) {
+  .articles-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+    padding: 0 16px;
+    max-width: 600px;
+  }
+}
+
+/* Mobile - 1 column */
+@media (max-width: 575px) {
+  .articles-grid {
+    grid-template-columns: 1fr;
+    gap: 24px;
+    padding: 0 16px;
+    max-width: 400px;
+  }
+}
+
+/* Article Card */
+.article-card {
+  background: white;
+  border-radius: 20px;
+  overflow: hidden;
+  box-shadow:
+    0 4px 20px rgba(0, 0, 0, 0.08),
+    0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  border: 1px solid rgba(255, 255, 255, 0.8);
+}
+
+.article-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.02) 0%, rgba(168, 85, 247, 0.02) 100%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+}
+
+.article-card:hover {
+  transform: translateY(-8px) scale(1.02);
+  box-shadow:
+    0 20px 60px rgba(0, 0, 0, 0.15),
+    0 8px 20px rgba(99, 102, 241, 0.1);
+}
+
+.article-card:hover::before {
+  opacity: 1;
+}
+
+.card-category {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
+  color: #6366f1;
+  padding: 8px 16px;
+  border-radius: 25px;
+  font-size: 12px;
+  font-weight: 700;
+  z-index: 2;
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(99, 102, 241, 0.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.article-card:hover .card-category {
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  color: white;
+  transform: scale(1.05);
+}
+
+.card-image {
+  height: 220px;
+  overflow: hidden;
+  position: relative;
+  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+}
+
+.card-image::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  z-index: 1;
+}
+
+.article-card:hover .card-image::before {
+  opacity: 1;
+}
+
+.card-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  filter: brightness(1) saturate(1);
+}
+
+.article-card:hover .card-image img {
+  transform: scale(1.08);
+  filter: brightness(1.1) saturate(1.2);
+}
+
+/* Responsive card image heights */
+@media (max-width: 767px) and (min-width: 576px) {
+  .card-image {
+    height: 160px; /* Smaller height for 2-column layout on small screens */
+  }
+}
+
+@media (max-width: 575px) {
+  .card-image {
+    height: 200px; /* Larger height for single column on mobile */
+  }
+}
+
+.card-content {
+  padding: 28px;
+  position: relative;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
+}
+
+.card-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: #1e293b;
+  margin: 0 0 16px 0;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+  transition: color 0.2s ease;
+}
+
+.article-card:hover .card-title {
+  color: #6366f1;
+}
+
+.card-description {
+  font-size: 15px;
+  color: #64748b;
+  line-height: 1.6;
+  margin: 0 0 24px 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-weight: 400;
+}
+
+/* Responsive card content */
+@media (max-width: 767px) and (min-width: 576px) {
+  .card-content {
+    padding: 20px;
+  }
+
+  .card-title {
+    font-size: 18px;
+    margin-bottom: 10px;
+    line-height: 1.4;
+  }
+
+  .card-description {
+    font-size: 13px;
+    margin-bottom: 16px;
+    -webkit-line-clamp: 2;
+  }
+}
+
+@media (max-width: 575px) {
+  .card-content {
+    padding: 24px;
+  }
+
+  .card-title {
+    font-size: 20px;
+    margin-bottom: 12px;
+  }
+
+  .card-description {
+    font-size: 14px;
+    margin-bottom: 20px;
+    -webkit-line-clamp: 3;
+  }
+}
+
+.card-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
+  position: relative;
+}
+
+.card-meta::before {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 40px;
+  height: 2px;
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  border-radius: 1px;
+  opacity: 0;
+  transition: all 0.3s ease;
+}
+
+.article-card:hover .card-meta::before {
+  opacity: 1;
+  width: 80px;
+}
+
+.card-author {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.author-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: white;
+  font-weight: 600;
+  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
+}
+
+.author-name {
+  font-size: 13px;
+  color: #475569;
+  font-weight: 600;
+}
+
+.card-read-time {
+  font-size: 12px;
+  color: #94a3b8;
+  font-weight: 500;
+  background: rgba(148, 163, 184, 0.1);
+  padding: 4px 8px;
+  border-radius: 12px;
+}
+
+/* Responsive card meta */
+@media (max-width: 767px) and (min-width: 576px) {
+  .card-meta {
+    margin-bottom: 14px;
+    padding-bottom: 14px;
+  }
+
+  .author-avatar {
+    width: 26px;
+    height: 26px;
+    font-size: 11px;
+  }
+
+  .author-name {
+    font-size: 11px;
+  }
+
+  .card-read-time {
+    font-size: 10px;
+    padding: 2px 6px;
+  }
+}
+
+@media (max-width: 575px) {
+  .card-meta {
+    margin-bottom: 16px;
+    padding-bottom: 16px;
+  }
+
+  .author-avatar {
+    width: 28px;
+    height: 28px;
+    font-size: 12px;
+  }
+
+  .author-name {
+    font-size: 12px;
+  }
+
+  .card-read-time {
+    font-size: 11px;
+    padding: 3px 6px;
+  }
+}
+
+.card-read-more {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: #6366f1;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 700;
+  padding: 12px 20px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
+  border: 1px solid rgba(99, 102, 241, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.card-read-more::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  transition: left 0.3s ease;
+  z-index: -1;
+}
+
+.card-read-more:hover {
+  color: white;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
+}
+
+.card-read-more:hover::before {
+  left: 0;
+}
+
+/* Responsive read more button */
+@media (max-width: 767px) and (min-width: 576px) {
+  .card-read-more {
+    font-size: 12px;
+    padding: 8px 14px;
+  }
+}
+
+@media (max-width: 575px) {
+  .card-read-more {
+    font-size: 13px;
+    padding: 10px 16px;
+  }
+}
+
+/* Comprehensive Responsive Design */
+
+/* Large Desktop */
+@media (min-width: 1400px) {
+  .articles-container {
+    max-width: 1400px;
+  }
+
+  .articles-grid {
+    gap: 48px;
+  }
+}
+
+/* Desktop */
+@media (max-width: 1199px) and (min-width: 992px) {
+  .section-title {
+    font-size: 42px;
+  }
+
+  .section-subtitle {
+    font-size: 17px;
+  }
+}
+
+/* Tablet */
+@media (max-width: 991px) and (min-width: 768px) {
+  .blog-hero-section {
+    padding: 60px 20px 50px;
+  }
+
+  .blog-main-title {
+    font-size: 40px;
+  }
+
+  .blog-category-icons {
+    gap: 32px;
+  }
+
+  .section-title {
+    font-size: 36px;
+  }
+
+  .section-subtitle {
+    font-size: 16px;
+  }
+
+  .search-container {
+    max-width: 450px;
+  }
+}
+
+/* Mobile Large */
+@media (max-width: 767px) and (min-width: 576px) {
+  .blog-hero-section {
+    padding: 50px 16px 40px;
+  }
+
+  .blog-main-title {
+    font-size: 32px;
+    margin-bottom: 20px;
+  }
+
+  .blog-main-subtitle {
+    font-size: 16px;
+    margin-bottom: 32px;
+  }
+
+  .blog-category-icons {
+    gap: 24px;
+    margin: 32px 0;
+  }
+
+  .icon-wrapper {
+    width: 44px;
+    height: 44px;
+  }
+
+  .section-title {
+    font-size: 32px;
+    margin-bottom: 20px;
+  }
+
+  .section-subtitle {
+    font-size: 15px;
+  }
+
+  .search-container {
+    max-width: 400px;
+    margin-top: 32px;
+  }
+
+  .latest-articles-section {
+    padding: 60px 16px;
+  }
+}
+
+/* Mobile Small */
+@media (max-width: 575px) {
+  .blog-hero-section {
+    padding: 40px 16px 32px;
+  }
+
+  .blog-main-title {
+    font-size: 28px;
+    margin-bottom: 16px;
+    line-height: 1.2;
+  }
+
+  .blog-main-subtitle {
+    font-size: 15px;
+    margin-bottom: 28px;
+  }
+
+  .blog-category-icons {
+    gap: 20px;
+    margin: 28px 0;
+    flex-wrap: wrap;
+  }
+
+  .category-icon {
+    flex: 0 0 calc(50% - 10px);
+    max-width: calc(50% - 10px);
+  }
+
+  .icon-wrapper {
+    width: 40px;
+    height: 40px;
+  }
+
+  .category-icon span {
+    font-size: 11px;
+  }
+
+  .explore-articles-btn {
+    padding: 12px 24px;
+    font-size: 14px;
+  }
+
+  .latest-articles-section {
+    padding: 50px 16px;
+  }
+
+  .section-header {
+    margin-bottom: 48px;
+  }
+
+  .section-title {
+    font-size: 28px;
+    margin-bottom: 16px;
+  }
+
+  .section-subtitle {
+    font-size: 14px;
+  }
+
+  .search-container {
+    max-width: 100%;
+    margin-top: 28px;
+  }
+
+  .search-wrapper {
+    padding: 14px 16px;
+  }
+
+  .search-icon {
+    width: 18px;
+    height: 18px;
+    margin-right: 12px;
+  }
+
+  .search-input {
+    font-size: 15px;
+  }
+}
diff --git a/src/pages/blogs/blogs.css b/src/pages/blogs/blogs.css
new file mode 100644
index 00000000..2b2f860f
--- /dev/null
+++ b/src/pages/blogs/blogs.css
@@ -0,0 +1,1147 @@
+/* Modern Blog Page Styles */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+
+/* CSS Variables for Design System */
+:root {
+  --blog-primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --blog-secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  --blog-accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  --blog-purple-gradient: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
+  --blog-blue-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --blog-pink-gradient: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
+  
+  --blog-text-primary: #1a202c;
+  --blog-text-secondary: #4a5568;
+  --blog-text-muted: #718096;
+  --blog-bg-primary: #ffffff;
+  --blog-bg-secondary: #f7fafc;
+  --blog-bg-card: #ffffff;
+  --blog-border: #e2e8f0;
+  --blog-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --blog-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --blog-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  
+  --blog-spacing-xs: 4px;
+  --blog-spacing-sm: 8px;
+  --blog-spacing-md: 16px;
+  --blog-spacing-lg: 24px;
+  --blog-spacing-xl: 32px;
+  --blog-spacing-2xl: 48px;
+  --blog-spacing-3xl: 64px;
+  
+  --blog-radius-sm: 8px;
+  --blog-radius-md: 12px;
+  --blog-radius-lg: 16px;
+  --blog-radius-xl: 24px;
+  
+  --blog-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --blog-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  --blog-transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Dark Mode Variables */
+[data-theme='dark'] {
+  --blog-text-primary: #f7fafc;
+  --blog-text-secondary: #e2e8f0;
+  --blog-text-muted: #a0aec0;
+  --blog-bg-primary: #1a202c;
+  --blog-bg-secondary: #2d3748;
+  --blog-bg-card: #2d3748;
+  --blog-border: #4a5568;
+  --blog-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+  --blog-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
+  --blog-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+}
+
+/* Global Styles */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--blog-bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--blog-primary-gradient);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--blog-secondary-gradient);
+}
+
+/* Animated Background */
+.blog-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  overflow: hidden;
+}
+
+.blog-background-gradient {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--blog-bg-primary);
+  background-image: 
+    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.1) 0%, transparent 50%);
+}
+
+.blog-background-shapes {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.shape {
+  position: absolute;
+  border-radius: 50%;
+  opacity: 0.1;
+  animation: float 6s ease-in-out infinite;
+}
+
+.shape-1 {
+  width: 200px;
+  height: 200px;
+  background: var(--blog-primary-gradient);
+  top: 10%;
+  left: 10%;
+  animation-delay: 0s;
+}
+
+.shape-2 {
+  width: 150px;
+  height: 150px;
+  background: var(--blog-secondary-gradient);
+  top: 60%;
+  right: 10%;
+  animation-delay: 2s;
+}
+
+.shape-3 {
+  width: 100px;
+  height: 100px;
+  background: var(--blog-accent-gradient);
+  bottom: 20%;
+  left: 50%;
+  animation-delay: 4s;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-20px) rotate(180deg);
+  }
+}
+
+/* Hero Section */
+.blog-hero {
+  position: relative;
+  padding: var(--blog-spacing-3xl) var(--blog-spacing-lg);
+  min-height: 70vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  overflow: hidden;
+}
+
+.blog-hero::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--blog-purple-gradient);
+  opacity: 0.05;
+  z-index: -1;
+}
+
+.blog-hero-content {
+  max-width: 800px;
+  margin: 0 auto;
+  z-index: 1;
+}
+
+.blog-hero-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--blog-spacing-sm) var(--blog-spacing-md);
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 50px;
+  margin-bottom: var(--blog-spacing-lg);
+  animation: fadeInUp 0.6s ease-out;
+}
+
+.blog-hero-badge-text {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--blog-text-primary);
+}
+
+.blog-hero-title {
+  font-size: clamp(2.5rem, 5vw, 4rem);
+  font-weight: 800;
+  line-height: 1.1;
+  margin-bottom: var(--blog-spacing-lg);
+  color: var(--blog-text-primary);
+  animation: fadeInUp 0.6s ease-out 0.1s both;
+}
+
+.blog-hero-highlight {
+  background: var(--blog-primary-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  position: relative;
+}
+
+.blog-hero-description {
+  font-size: 1.25rem;
+  color: var(--blog-text-secondary);
+  margin-bottom: var(--blog-spacing-2xl);
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+  animation: fadeInUp 0.6s ease-out 0.2s both;
+}
+
+/* Search Container */
+.blog-search-container {
+  margin-bottom: var(--blog-spacing-xl);
+  animation: fadeInUp 0.6s ease-out 0.3s both;
+}
+
+.blog-search-wrapper {
+  position: relative;
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+.blog-search-icon {
+  position: absolute;
+  left: var(--blog-spacing-md);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  color: var(--blog-text-muted);
+  z-index: 2;
+}
+
+.blog-search-input {
+  width: 100%;
+  padding: var(--blog-spacing-md) var(--blog-spacing-md) var(--blog-spacing-md) 48px;
+  font-size: 16px;
+  border: 2px solid var(--blog-border);
+  border-radius: var(--blog-radius-lg);
+  background: var(--blog-bg-card);
+  color: var(--blog-text-primary);
+  transition: var(--blog-transition);
+  backdrop-filter: blur(10px);
+}
+
+.blog-search-input:focus {
+  outline: none;
+  border-color: transparent;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1), var(--blog-shadow-lg);
+  background: var(--blog-bg-card);
+}
+
+.blog-search-input::placeholder {
+  color: var(--blog-text-muted);
+}
+
+/* Category Icons */
+.blog-category-icons {
+  display: flex;
+  justify-content: center;
+  gap: var(--blog-spacing-xl);
+  margin-bottom: var(--blog-spacing-2xl);
+  animation: fadeInUp 0.6s ease-out 0.4s both;
+}
+
+.category-icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--blog-spacing-md);
+  cursor: pointer;
+  transition: var(--blog-transition);
+}
+
+.category-icon:hover {
+  transform: translateY(-4px);
+}
+
+.icon-wrapper {
+  width: 64px;
+  height: 64px;
+  background: white;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  transition: var(--blog-transition);
+}
+
+.icon-wrapper svg {
+  width: 28px;
+  height: 28px;
+}
+
+.icon-wrapper.development svg {
+  color: #4f46e5;
+}
+
+.icon-wrapper.design svg {
+  color: #ec4899;
+}
+
+.icon-wrapper.ai-tech svg {
+  color: #ef4444;
+}
+
+.icon-wrapper.innovation svg {
+  color: #8b5cf6;
+}
+
+.category-icon span {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--blog-text-primary);
+  text-align: center;
+}
+
+.category-icon:hover .icon-wrapper {
+  transform: scale(1.1);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+}
+
+/* Explore Articles Button */
+.explore-articles-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--blog-spacing-sm);
+  padding: var(--blog-spacing-md) var(--blog-spacing-xl);
+  background: var(--blog-primary-gradient);
+  color: white;
+  border: none;
+  border-radius: 50px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: var(--blog-transition);
+  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
+  margin-top: var(--blog-spacing-xl);
+  animation: fadeInUp 0.6s ease-out 0.5s both;
+}
+
+.explore-articles-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.4);
+}
+
+/* Category Filter */
+.blog-categories {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--blog-spacing-sm);
+  justify-content: center;
+  animation: fadeInUp 0.6s ease-out 0.4s both;
+}
+
+.blog-category-btn {
+  padding: var(--blog-spacing-sm) var(--blog-spacing-md);
+  border: 2px solid var(--blog-border);
+  background: var(--blog-bg-card);
+  color: var(--blog-text-secondary);
+  border-radius: var(--blog-radius-lg);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--blog-transition);
+  backdrop-filter: blur(10px);
+}
+
+.blog-category-btn:hover {
+  border-color: rgba(102, 126, 234, 0.3);
+  background: rgba(102, 126, 234, 0.05);
+  transform: translateY(-2px);
+}
+
+.blog-category-btn.active {
+  background: var(--blog-primary-gradient);
+  border-color: transparent;
+  color: white;
+  box-shadow: var(--blog-shadow);
+}
+
+/* Animation Keyframes */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* Blog Grid Section */
+.blog-grid-section {
+  padding: var(--blog-spacing-3xl) var(--blog-spacing-lg);
+  position: relative;
+}
+
+.blog-grid-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: var(--blog-spacing-3xl);
+}
+
+.section-title {
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 800;
+  color: var(--blog-text-primary);
+  margin-bottom: var(--blog-spacing-md);
+  animation: fadeInUp 0.6s ease-out;
+}
+
+.section-subtitle {
+  font-size: 1.125rem;
+  color: var(--blog-text-secondary);
+  margin-bottom: var(--blog-spacing-xl);
+  line-height: 1.6;
+  animation: fadeInUp 0.6s ease-out 0.1s both;
+}
+
+/* Search Container for Latest Articles */
+.search-container {
+  position: relative;
+  max-width: 500px;
+  margin: 0 auto;
+  animation: fadeInUp 0.6s ease-out 0.2s both;
+}
+
+.search-wrapper {
+  position: relative;
+}
+
+.search-icon {
+  position: absolute;
+  left: var(--blog-spacing-md);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  color: var(--blog-text-muted);
+  z-index: 2;
+}
+
+.search-input {
+  width: 100%;
+  padding: var(--blog-spacing-md) var(--blog-spacing-md) var(--blog-spacing-md) 48px;
+  font-size: 16px;
+  border: 2px solid var(--blog-border);
+  border-radius: var(--blog-radius-lg);
+  background: var(--blog-bg-card);
+  color: var(--blog-text-primary);
+  transition: var(--blog-transition);
+  backdrop-filter: blur(10px);
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: transparent;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1), var(--blog-shadow-lg);
+  background: var(--blog-bg-card);
+}
+
+.search-input::placeholder {
+  color: var(--blog-text-muted);
+}
+
+/* Search Decoration */
+.search-decoration {
+  position: absolute;
+  right: -60px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.search-line {
+  width: 40px;
+  height: 2px;
+  background: linear-gradient(90deg, #667eea, #764ba2);
+  border-radius: 1px;
+}
+
+.search-dot {
+  width: 8px;
+  height: 8px;
+  background: #ec4899;
+  border-radius: 50%;
+}
+
+.search-circle {
+  width: 12px;
+  height: 12px;
+  border: 2px solid #8b5cf6;
+  border-radius: 50%;
+  background: transparent;
+}
+
+.blog-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: var(--blog-spacing-xl);
+  margin-bottom: var(--blog-spacing-2xl);
+}
+
+/* Blog Card Styles */
+.blog-card {
+  position: relative;
+  opacity: 0;
+  transform: translateY(30px);
+  animation: slideInUp 0.6s ease-out forwards;
+}
+
+.blog-card-animate {
+  animation-delay: var(--animation-delay, 0ms);
+}
+
+.blog-card-inner {
+  height: 100%;
+  border-radius: var(--blog-radius-xl);
+  overflow: hidden;
+  background: var(--blog-bg-card);
+  border: 1px solid var(--blog-border);
+  transition: var(--blog-transition);
+  position: relative;
+}
+
+.blog-card:hover .blog-card-inner {
+  transform: translateY(-8px);
+  box-shadow: var(--blog-shadow-xl);
+  border-color: rgba(102, 126, 234, 0.2);
+}
+
+.blog-card-link {
+  display: block;
+  height: 100%;
+  text-decoration: none;
+  color: inherit;
+}
+
+.blog-card-image-container {
+  position: relative;
+  height: 240px;
+  overflow: hidden;
+}
+
+.blog-card-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: var(--blog-transition-slow);
+}
+
+.blog-card:hover .blog-card-image {
+  transform: scale(1.05);
+}
+
+.blog-card-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    180deg,
+    transparent 0%,
+    transparent 60%,
+    rgba(0, 0, 0, 0.1) 100%
+  );
+  opacity: 0;
+  transition: var(--blog-transition);
+}
+
+.blog-card:hover .blog-card-overlay {
+  opacity: 1;
+}
+
+.blog-card-hover-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  width: 48px;
+  height: 48px;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: var(--blog-transition);
+  backdrop-filter: blur(10px);
+}
+
+.blog-card:hover .blog-card-hover-icon {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.blog-card-hover-icon svg {
+  width: 20px;
+  height: 20px;
+  color: var(--blog-text-primary);
+}
+
+.blog-card-content {
+  padding: var(--blog-spacing-xl);
+  height: calc(100% - 240px);
+  display: flex;
+  flex-direction: column;
+}
+
+.blog-card-category {
+  margin-bottom: var(--blog-spacing-md);
+}
+
+.blog-card-category-badge {
+  display: inline-block;
+  padding: var(--blog-spacing-xs) var(--blog-spacing-sm);
+  background: var(--blog-primary-gradient);
+  color: white;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-radius: var(--blog-radius-sm);
+}
+
+.blog-card-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1.3;
+  color: var(--blog-text-primary);
+  margin-bottom: var(--blog-spacing-md);
+  transition: var(--blog-transition);
+}
+
+.blog-card:hover .blog-card-title {
+  color: #667eea;
+}
+
+.blog-card-description {
+  color: var(--blog-text-secondary);
+  line-height: 1.6;
+  margin-bottom: var(--blog-spacing-lg);
+  flex-grow: 1;
+}
+
+.blog-card-footer {
+  margin-top: auto;
+}
+
+.blog-card-read-more {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--blog-spacing-sm);
+  color: #667eea;
+  font-weight: 600;
+  font-size: 14px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  transition: var(--blog-transition);
+}
+
+.blog-card:hover .blog-card-read-more {
+  gap: var(--blog-spacing-md);
+}
+
+.blog-card-arrow {
+  width: 16px;
+  height: 16px;
+  transition: var(--blog-transition);
+}
+
+.blog-card:hover .blog-card-arrow {
+  transform: translateX(4px);
+}
+
+/* No Results */
+.blog-no-results {
+  text-align: center;
+  padding: var(--blog-spacing-3xl);
+  animation: fadeIn 0.6s ease-out;
+}
+
+.blog-no-results-icon {
+  font-size: 4rem;
+  margin-bottom: var(--blog-spacing-lg);
+  opacity: 0.5;
+}
+
+.blog-no-results-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--blog-text-primary);
+  margin-bottom: var(--blog-spacing-sm);
+}
+
+.blog-no-results-text {
+  color: var(--blog-text-secondary);
+  font-size: 1rem;
+}
+
+/* CTA Section */
+.blog-cta-section {
+  padding: var(--blog-spacing-3xl) var(--blog-spacing-lg);
+  position: relative;
+  overflow: hidden;
+}
+
+.blog-cta-section::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--blog-blue-gradient);
+  opacity: 0.05;
+  z-index: -1;
+}
+
+.blog-cta-container {
+  max-width: 800px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.blog-cta-content {
+  padding: var(--blog-spacing-2xl);
+  background: var(--blog-bg-card);
+  border-radius: var(--blog-radius-xl);
+  border: 1px solid var(--blog-border);
+  box-shadow: var(--blog-shadow-lg);
+  backdrop-filter: blur(10px);
+}
+
+.blog-cta-title {
+  font-size: 2.5rem;
+  font-weight: 800;
+  color: var(--blog-text-primary);
+  margin-bottom: var(--blog-spacing-md);
+  background: var(--blog-primary-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.blog-cta-description {
+  font-size: 1.125rem;
+  color: var(--blog-text-secondary);
+  margin-bottom: var(--blog-spacing-xl);
+  line-height: 1.6;
+}
+
+.blog-cta-buttons {
+  display: flex;
+  gap: var(--blog-spacing-md);
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.blog-cta-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--blog-spacing-sm);
+  padding: var(--blog-spacing-md) var(--blog-spacing-xl);
+  border-radius: var(--blog-radius-lg);
+  font-weight: 600;
+  text-decoration: none;
+  transition: var(--blog-transition);
+  position: relative;
+  overflow: hidden;
+}
+
+.blog-cta-btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.5s;
+}
+
+.blog-cta-btn:hover::before {
+  left: 100%;
+}
+
+.blog-cta-btn-primary {
+  background: var(--blog-primary-gradient);
+  color: white;
+  box-shadow: var(--blog-shadow);
+}
+
+.blog-cta-btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--blog-shadow-lg);
+  color: white;
+}
+
+.blog-cta-btn-secondary {
+  background: var(--blog-bg-card);
+  color: var(--blog-text-primary);
+  border: 2px solid var(--blog-border);
+}
+
+.blog-cta-btn-secondary:hover {
+  background: var(--blog-bg-secondary);
+  border-color: rgba(102, 126, 234, 0.3);
+  transform: translateY(-2px);
+  color: var(--blog-text-primary);
+}
+
+.blog-cta-btn-icon {
+  width: 16px;
+  height: 16px;
+  transition: var(--blog-transition);
+}
+
+.blog-cta-btn:hover .blog-cta-btn-icon {
+  transform: translateX(4px);
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .blog-grid {
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: var(--blog-spacing-lg);
+  }
+
+  .blog-hero {
+    padding: var(--blog-spacing-2xl) var(--blog-spacing-md);
+    min-height: 60vh;
+  }
+
+  .blog-hero-title {
+    font-size: clamp(2rem, 4vw, 3rem);
+  }
+
+  .blog-cta-title {
+    font-size: 2rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .blog-grid {
+    grid-template-columns: 1fr;
+    gap: var(--blog-spacing-md);
+  }
+
+  .blog-hero {
+    padding: var(--blog-spacing-xl) var(--blog-spacing-md);
+    min-height: 50vh;
+  }
+
+  .blog-hero-title {
+    font-size: clamp(1.75rem, 6vw, 2.5rem);
+  }
+
+  .blog-hero-description {
+    font-size: 1rem;
+    margin-bottom: var(--blog-spacing-xl);
+  }
+
+  .blog-search-input {
+    font-size: 16px; /* Prevent zoom on iOS */
+  }
+
+  .blog-categories {
+    gap: var(--blog-spacing-xs);
+  }
+
+  .blog-category-btn {
+    padding: var(--blog-spacing-xs) var(--blog-spacing-sm);
+    font-size: 12px;
+  }
+
+  /* Category Icons Mobile */
+  .blog-category-icons {
+    gap: var(--blog-spacing-lg);
+    flex-wrap: wrap;
+  }
+
+  .icon-wrapper {
+    width: 56px;
+    height: 56px;
+  }
+
+  .icon-wrapper svg {
+    width: 24px;
+    height: 24px;
+  }
+
+  .category-icon span {
+    font-size: 12px;
+  }
+
+  /* Search Container Mobile */
+  .search-decoration {
+    display: none;
+  }
+
+  .search-input {
+    font-size: 16px; /* Prevent zoom on iOS */
+  }
+
+  .blog-card-content {
+    padding: var(--blog-spacing-lg);
+  }
+
+  .blog-card-title {
+    font-size: 1.25rem;
+  }
+
+  .blog-cta-section {
+    padding: var(--blog-spacing-2xl) var(--blog-spacing-md);
+  }
+
+  .blog-cta-content {
+    padding: var(--blog-spacing-xl);
+  }
+
+  .blog-cta-title {
+    font-size: 1.75rem;
+  }
+
+  .blog-cta-description {
+    font-size: 1rem;
+  }
+
+  .blog-cta-buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .blog-cta-btn {
+    width: 100%;
+    max-width: 280px;
+    justify-content: center;
+  }
+}
+
+@media (max-width: 480px) {
+  .blog-hero {
+    padding: var(--blog-spacing-lg) var(--blog-spacing-sm);
+  }
+
+  .blog-grid-section {
+    padding: var(--blog-spacing-2xl) var(--blog-spacing-sm);
+  }
+
+  .blog-grid {
+    gap: var(--blog-spacing-sm);
+  }
+
+  /* Category Icons Small Mobile */
+  .blog-category-icons {
+    gap: var(--blog-spacing-md);
+  }
+
+  .icon-wrapper {
+    width: 48px;
+    height: 48px;
+    border-radius: 16px;
+  }
+
+  .icon-wrapper svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  .category-icon span {
+    font-size: 11px;
+  }
+
+  .explore-articles-btn {
+    padding: var(--blog-spacing-sm) var(--blog-spacing-lg);
+    font-size: 14px;
+  }
+
+  .blog-card-image-container {
+    height: 200px;
+  }
+
+  .blog-card-content {
+    padding: var(--blog-spacing-md);
+    height: calc(100% - 200px);
+  }
+
+  .blog-cta-section {
+    padding: var(--blog-spacing-xl) var(--blog-spacing-sm);
+  }
+
+  .blog-cta-content {
+    padding: var(--blog-spacing-lg);
+  }
+
+  .shape-1 {
+    width: 120px;
+    height: 120px;
+  }
+
+  .shape-2 {
+    width: 100px;
+    height: 100px;
+  }
+
+  .shape-3 {
+    width: 80px;
+    height: 80px;
+  }
+}
+
+/* Accessibility Improvements */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+
+  .shape {
+    animation: none;
+  }
+}
+
+/* Focus States for Accessibility */
+.blog-search-input:focus,
+.blog-category-btn:focus,
+.blog-cta-btn:focus {
+  outline: 2px solid #667eea;
+  outline-offset: 2px;
+}
+
+.blog-card-link:focus {
+  outline: 2px solid #667eea;
+  outline-offset: 4px;
+  border-radius: var(--blog-radius-xl);
+}
+
+/* High Contrast Mode Support */
+@media (prefers-contrast: high) {
+  :root {
+    --blog-border: #000000;
+    --blog-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+  }
+
+  [data-theme='dark'] {
+    --blog-border: #ffffff;
+  }
+
+  .blog-card-inner {
+    border-width: 2px;
+  }
+
+  .blog-category-btn {
+    border-width: 2px;
+  }
+}
+
+/* Print Styles */
+@media print {
+  .blog-background,
+  .blog-search-container,
+  .blog-categories,
+  .blog-cta-section {
+    display: none;
+  }
+
+  .blog-hero {
+    padding: 1rem 0;
+    min-height: auto;
+  }
+
+  .blog-card {
+    break-inside: avoid;
+    margin-bottom: 1rem;
+  }
+
+  .blog-card-inner {
+    box-shadow: none;
+    border: 1px solid #000;
+  }
+}
diff --git a/src/pages/blogs/index.tsx b/src/pages/blogs/index.tsx
index b2df23a2..ba6fe4d1 100644
--- a/src/pages/blogs/index.tsx
+++ b/src/pages/blogs/index.tsx
@@ -1,12 +1,34 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
-import blogs from "../../database/blogs";
+import blogs from "../../database/blogs/index";
 import Head from "@docusaurus/Head";
+import { FaCode, FaPalette, FaBrain, FaStar } from "react-icons/fa";
+import "./blogs-new.css";
 
 export default function Blogs(): React.JSX.Element {
   const { siteConfig } = useDocusaurusContext();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filteredBlogs, setFilteredBlogs] = useState(blogs);
+
+  // Filter blogs based on search term
+  useEffect(() => {
+    if (searchTerm.trim() === "") {
+      setFilteredBlogs(blogs);
+    } else {
+      const filtered = blogs.filter(blog =>
+        blog.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        blog.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        blog.tags?.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()))
+      );
+      setFilteredBlogs(filtered);
+    }
+  }, [searchTerm]);
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value);
+  };
 
   return (
     <Layout
@@ -14,53 +36,157 @@ export default function Blogs(): React.JSX.Element {
       description="Welcome to RecodeHive Blogs. Learn the basics to advanced concepts of web development including HTML, CSS, JavaScript, React, Node.js, DSA, and more."
     >
       <Head>
-        <script
-          async
-          custom-element="amp-auto-ads"
-          src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"
-        />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
       </Head>
-      <section className="m-4 my-10">
-        <div className="text-center mb-8">
-          <h1 className="text-4xl font-bold gradient-text">
-            Welcome to RecodeHive Blogs
-          </h1>
-          <p className="text-lg text-gray-700 dark:text-gray-300">
-            Discover web development articles ranging from HTML and CSS to
-            JavaScript, React, Node.js, DSA, and much more.
-          </p>
-        </div>
-        <div className="grid gap-6 grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-          {blogs.map((blog) => (
-            <BlogCard key={blog.id} blog={blog} />
-          ))}
-        </div>
-      </section>
+
+      <div className="blog-page">
+        {/* Hero Section */}
+        <section className="blog-hero-section">
+          <div className="blog-hero-container">
+            <h1 className="blog-main-title">Welcome to RecodeHive Blogs</h1>
+            <p className="blog-main-subtitle">
+              Discover web development articles ranging from HTML and CSS to JavaScript, React,<br />
+              Node.js, DSA, and much more
+            </p>
+
+            {/* Category Icons */}
+            <div className="blog-category-icons">
+              <div className="category-icon">
+                <div className="icon-wrapper development">
+                  <FaCode />
+                </div>
+                <span>Development</span>
+              </div>
+              <div className="category-icon">
+                <div className="icon-wrapper design">
+                  <FaPalette />
+                </div>
+                <span>Design</span>
+              </div>
+              <div className="category-icon">
+                <div className="icon-wrapper ai-tech">
+                  <FaBrain />
+                </div>
+                <span>AI & Tech</span>
+              </div>
+              <div className="category-icon">
+                <div className="icon-wrapper innovation">
+                  <FaStar />
+                </div>
+                <span>Innovation</span>
+              </div>
+            </div>
+
+            <button className="explore-articles-btn">
+              <span>Explore Articles</span>
+            </button>
+          </div>
+        </section>
+
+        {/* Latest Articles Section */}
+        <section className="latest-articles-section">
+          <div className="articles-container">
+            <div className="section-header">
+              <h2 className="section-title">Latest Articles</h2>
+              <p className="section-subtitle">
+                Stay updated with the latest trends, tutorials, and insights from the world of<br />
+                technology and design
+              </p>
+
+              {/* Search Bar */}
+              <div className="search-container">
+                <div className="search-wrapper">
+                  <svg className="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                    <circle cx="11" cy="11" r="8"></circle>
+                    <path d="m21 21-4.35-4.35"></path>
+                  </svg>
+                  <input
+                    type="text"
+                    placeholder="Search articles..."
+                    className="search-input"
+                    value={searchTerm}
+                    onChange={handleSearchChange}
+                  />
+                </div>
+                <div className="search-decoration">
+                  <div className="search-line"></div>
+                  <div className="search-dot"></div>
+                  <div className="search-circle"></div>
+                </div>
+              </div>
+            </div>
+
+            {/* Search Results Counter */}
+            {searchTerm && (
+              <div className="search-results-info">
+                <p>
+                  {filteredBlogs.length > 0
+                    ? `Found ${filteredBlogs.length} article${filteredBlogs.length !== 1 ? 's' : ''} for "${searchTerm}"`
+                    : `No articles found for "${searchTerm}"`
+                  }
+                </p>
+              </div>
+            )}
+
+            <div className="articles-grid">
+              {filteredBlogs.length > 0 ? (
+                filteredBlogs.map((blog, index) => (
+                  <BlogCard key={blog.id} blog={blog} index={index} />
+                ))
+              ) : (
+                <div className="no-results">
+                  <div className="no-results-content">
+                    <div className="no-results-icon">🔍</div>
+                    <h3>No articles found</h3>
+                    <p>Try adjusting your search terms or browse all articles.</p>
+                    <button
+                      className="clear-search-btn"
+                      onClick={() => setSearchTerm("")}
+                    >
+                      Clear Search
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </section>
+      </div>
     </Layout>
   );
 }
 
+const BlogCard = ({ blog, index }) => {
+  // Get category from blog title or description for demo purposes
+  const getCategory = (title) => {
+    if (title.toLowerCase().includes('design') || title.toLowerCase().includes('ux')) return 'Design';
+    if (title.toLowerCase().includes('ai') || title.toLowerCase().includes('deepmind')) return 'AI & Tech';
+    if (title.toLowerCase().includes('github') || title.toLowerCase().includes('git')) return 'Development';
+    return 'Resources';
+  };
+
+  const category = getCategory(blog.title);
 
-const BlogCard = ({ blog }) => {
   return (
-    <div className="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
-      <Link to={`/blog/${blog.slug}`}>
-        <img
-          src={blog.image}
-          alt={blog.title}
-          className="w-full h-48 object-cover"
-        />
-      </Link>
-      <div className="p-4">
-        <h2 className="text-xl font-semibold text-white">{blog.title}</h2>
-        <p className="text-gray-600 dark:text-gray-400 mb-4">
-          {blog.description}
-        </p>
-        <Link
-          to={`/blog/${blog.slug}`}
-          className="text-blue-600 dark:text-blue-400 hover:underline"
-        >
-          Read More
+    <div className="article-card">
+      <div className="card-category">{category}</div>
+      <div className="card-image">
+        <img src={blog.image} alt={blog.title} />
+      </div>
+      <div className="card-content">
+        <h3 className="card-title">{blog.title}</h3>
+        <p className="card-description">{blog.description}</p>
+        <div className="card-meta">
+          <div className="card-author">
+            <span className="author-avatar">👤</span>
+            <span className="author-name">Author Name</span>
+          </div>
+          <span className="card-read-time">5 min read</span>
+        </div>
+        <Link to={`/blog/${blog.slug}`} className="card-read-more">
+          Read Article →
         </Link>
       </div>
     </div>