added the blog page changes

Author: sanjay-kv

src/components/blogCarousel/blogCarousel.css

@@ -562,14 +562,95 @@
 
 /* ── Blog carousel section ── */
 .blog-carousel-section {
-  background: linear-gradient(160deg, #f8f9ff 0%, #f0f2ff 50%, #e8ebff 100%);
-  padding: 48px 24px;
+  background: #fafaf8;
+  padding: 64px 24px 48px;
   position: relative;
   overflow: hidden;
+  transition: background 0.4s ease;
 }
 
 [data-theme="dark"] .blog-carousel-section {
-  background: linear-gradient(160deg, #131314 0%, #18181b 50%, #1a1f2e 100%);
+  background: #17181c;
+}
+
+/* ── Section header ── */
+.blog-section-header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.blog-section-eyebrow {
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: #16a34a;
+  margin: 0 0 0.5rem;
+}
+
+[data-theme="dark"] .blog-section-eyebrow {
+  color: #4ade80;
+}
+
+.blog-section-title {
+  font-family: "Space Grotesk", Inter, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", sans-serif;
+  font-weight: 700;
+  font-size: 40px;
+  line-height: 1.15;
+  letter-spacing: -0.03em;
+  color: #111827;
+  margin: 0;
+}
+
+[data-theme="dark"] .blog-section-title {
+  color: #f9fafb;
+}
+
+.blog-section-subtitle {
+  font-size: 16px;
+  color: #4b5563;
+  margin: 0.5rem 0 0;
+}
+
+[data-theme="dark"] .blog-section-subtitle {
+  color: #9ca3af;
+}
+
+.blog-section-viewall {
+  flex-shrink: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: #16a34a;
+  text-decoration: none;
+  transition: color 0.25s ease;
+}
+
+.blog-section-viewall:hover {
+  color: #15803d;
+  text-decoration: none;
+}
+
+[data-theme="dark"] .blog-section-viewall {
+  color: #4ade80;
+}
+
+[data-theme="dark"] .blog-section-viewall:hover {
+  color: #86efac;
+}
+
+@media (max-width: 650px) {
+  .blog-section-title {
+    font-size: 30px;
+  }
+
+  .blog-section-subtitle {
+    font-size: 14px;
+  }
 }
 
 /* ── Focus state ── */

src/components/blogCarousel/blogCarousel.tsx

@@ -41,20 +41,15 @@ export function BlogCarousel() {
   return (
     <div className="max-w-8xl mx-auto w-full px-4">
       {/* Section Header */}
-      <div className="flex items-center justify-between mb-6">
+      <div className="blog-section-header">
         <div>
-          <h2 className="text-2xl font-semibold text-gray-800 dark:text-gray-100">
-            From the Blog
-          </h2>
-          <p className="text-sm text-black-500 dark:text-gray-400 mt-1">
+          <p className="blog-section-eyebrow">✦ Blog</p>
+          <h2 className="blog-section-title">From the Blog</h2>
+          <p className="blog-section-subtitle">
             Latest articles from our contributors
           </p>
         </div>
-        <Link
-          to="/blogs"
-          className="flex items-center gap-1.5 text-sm font-medium text-indigo-600 border border-indigo-200 px-4 py-2 rounded-lg hover:bg-indigo-50 transition-all dark:text-indigo-400 dark:border-indigo-800 dark:hover:bg-indigo-950"
-          style={{ textDecoration: "none" }}
-        >
+        <Link to="/blogs" className="blog-section-viewall">
           View all →
         </Link>
       </div>
@@ -98,7 +93,7 @@ export function BlogCarousel() {
 
         {/* Carousel Controls */}
         <div className="mt-8 flex items-center justify-center gap-4">
-          <CarouselPrevious className="static h-10 w-10 translate-y-0 border border-indigo-200 transition-all duration-300 hover:scale-110 hover:border-indigo-400 dark:border-indigo-800 dark:hover:border-indigo-600" />
+          <CarouselPrevious className="static h-10 w-10 translate-y-0 border border-green-200 transition-all duration-300 hover:scale-110 hover:border-green-500 dark:border-green-900 dark:hover:border-green-600" />
 
           {/* Dot indicators */}
           <div className="flex items-center gap-2">
@@ -108,14 +103,14 @@ export function BlogCarousel() {
                 onClick={() => api?.scrollTo(index)}
                 aria-label={`Go to slide ${index + 1}`}
                 className={`h-2 rounded-full transition-all duration-300 ${current === index + 1
-                  ? "w-5 bg-indigo-500"
+                  ? "w-5 bg-green-600 dark:bg-green-400"
                   : "w-2 bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500"
                   }`}
               />
             ))}
           </div>
 
-          <CarouselNext className="static h-10 w-10 translate-y-0 border border-indigo-200 transition-all duration-300 hover:scale-110 hover:border-indigo-400 dark:border-indigo-800 dark:hover:border-indigo-600" />
+          <CarouselNext className="static h-10 w-10 translate-y-0 border border-green-200 transition-all duration-300 hover:scale-110 hover:border-green-500 dark:border-green-900 dark:hover:border-green-600" />
         </div>
       </Carousel>
     </div>