From 184ee4f19fe55ea8d088d7d0d7368cd34cabe273 Mon Sep 17 00:00:00 2001
From: Darshana0906 <mothersdarshana@gmail.com>
Date: Sun, 17 May 2026 11:58:15 +0530
Subject: [PATCH] Enhanced blog section

---
 src/components/blogCarousel/blogCard.tsx     |  24 +-
 src/components/blogCarousel/blogCarousel.css | 388 +++++++++----------
 src/components/blogCarousel/blogCarousel.tsx |  49 ++-
 3 files changed, 221 insertions(+), 240 deletions(-)

diff --git a/src/components/blogCarousel/blogCard.tsx b/src/components/blogCarousel/blogCard.tsx
index 562fa5c9..225ed7b1 100644
--- a/src/components/blogCarousel/blogCard.tsx
+++ b/src/components/blogCarousel/blogCard.tsx
@@ -1,13 +1,13 @@
 "use client";
 import * as React from "react";
-import { useState } from "react";
+
 import { motion } from "framer-motion";
 import Link from "@docusaurus/Link";
-import { Card, CardContent } from "../ui/card";
+
 import { getAuthorNames } from "../../utils/authors";
 
 const BlogCard = ({ type, date, title, content, imageUrl, id, authors }) => {
-  const [isHovered, setIsHovered] = useState(false);
+  
 
   if (!id || !type) {
     return <div>data not fetched properly, imageId and entryId not found</div>;
@@ -45,16 +45,16 @@ const BlogCard = ({ type, date, title, content, imageUrl, id, authors }) => {
         scale: 1.02,
         transition: { duration: 0.4, ease: "easeOut" },
       }}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
+     
       className="relative h-full overflow-hidden transition-all duration-300"
     >
       <Link
-        to={`/blog/${id}`}
-        className="text-decoration-none block h-full"
-        style={{ textDecoration: "none" }}
-      >
-        <div className="article-card h-full">
+  to={`/blog/${id}`}
+  className="block h-full"
+  style={{ textDecoration: "none" }}
+  aria-label={`Read article: ${title}`}   // ← add this
+>
+        <div className="article-card h-full" style={{ cursor: "pointer"}}>
           {/* Category Badge */}
           <div className="card-category">{category}</div>
 
@@ -83,7 +83,9 @@ const BlogCard = ({ type, date, title, content, imageUrl, id, authors }) => {
             </div>
 
             {/* Read More Button */}
-            <div className="card-read-more">Read Article →</div>
+            <span className="card-read-more">
+              <span>Read Article →</span>
+            </span>
           </div>
         </div>
       </Link>
diff --git a/src/components/blogCarousel/blogCarousel.css b/src/components/blogCarousel/blogCarousel.css
index bc9923a0..66a8f1e9 100644
--- a/src/components/blogCarousel/blogCarousel.css
+++ b/src/components/blogCarousel/blogCarousel.css
@@ -1,88 +1,93 @@
-/* Blog Carousel Card Styles - Matching Blog Page Design */
-
-/* Article Card */
+/* ── Article Card ─────────────────────────────────────── */
 .article-card {
-  background: white;
+  background: #ffffff;
   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);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 0.35s ease;
   position: relative;
-  border: 1px solid rgba(255, 255, 255, 0.8);
+  border: 1px solid rgba(147, 51, 234, 0.3);
   height: 100%;
   display: flex;
   flex-direction: column;
+  cursor: pointer;
+}
+
+/* ── Hover: lift + purple glow ── */
+.article-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 20px 48px rgba(147, 51, 234, 0.22),
+    0 4px 12px rgba(147, 51, 234, 0.15);
+  border-color: rgba(147, 51, 234, 0.8);
 }
 
+/* ── Dark mode base ── */
 [data-theme="dark"] .article-card {
-  background: #242526;
-  border: 1px solid rgba(74, 85, 104, 0.3);
-  box-shadow:
-    0 4px 20px rgba(0, 0, 0, 0.4),
-    0 1px 3px rgba(0, 0, 0, 0.3);
+  background: #1e1f20;
+  border: 1px solid rgba(192, 132, 252, 0.2);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
 }
 
+[data-theme="dark"] .article-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 20px 48px rgba(192, 132, 252, 0.28),
+    0 4px 12px rgba(192, 132, 252, 0.18);
+  border-color: rgba(192, 132, 252, 0.8);
+}
+
+/* ── Subtle overlay on hover ── */
 .article-card::before {
   content: "";
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   background: linear-gradient(
     135deg,
-    rgba(99, 102, 241, 0.02) 0%,
-    rgba(168, 85, 247, 0.02) 100%
+    rgba(147, 51, 234, 0.04) 0%,
+    rgba(217, 70, 239, 0.04) 100%
   );
   opacity: 0;
   transition: opacity 0.3s ease;
   pointer-events: none;
+  z-index: 0;
 }
 
 .article-card:hover::before {
   opacity: 1;
 }
 
+/* ── Category badge ── */
 .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%
-  );
+  top: 14px;
+  left: 14px;
+  background: rgba(255, 255, 255, 0.92);
   color: #6366f1;
-  padding: 8px 16px;
+  padding: 5px 13px;
   border-radius: 25px;
-  font-size: 12px;
+  font-size: 11px;
   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;
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(99, 102, 241, 0.15);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  transition: all 0.25s ease;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: 0.6px;
 }
 
 [data-theme="dark"] .card-category {
-  background: linear-gradient(
-    135deg,
-    rgba(36, 37, 38, 0.95) 0%,
-    rgba(26, 32, 44, 0.9) 100%
-  );
+  background: rgba(30, 31, 32, 0.92);
   color: #a78bfa;
-  border: 1px solid rgba(167, 139, 250, 0.2);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(167, 139, 250, 0.25);
 }
 
 .article-card:hover .card-category {
   background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
   color: white;
-  transform: scale(1.05);
+  border-color: transparent;
+  transform: scale(1.04);
 }
 
 [data-theme="dark"] .article-card:hover .card-category {
@@ -90,6 +95,7 @@
   color: #1a202c;
 }
 
+/* ── Card image ── */
 .card-image {
   height: 200px;
   overflow: hidden;
@@ -98,24 +104,21 @@
   flex-shrink: 0;
 }
 
-.card-image::before {
+.card-image::after {
   content: "";
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   background: linear-gradient(
-    135deg,
-    rgba(99, 102, 241, 0.1) 0%,
-    rgba(168, 85, 247, 0.1) 100%
+    to bottom,
+    transparent 50%,
+    rgba(99, 102, 241, 0.08) 100%
   );
   opacity: 0;
-  transition: opacity 0.3s ease;
+  transition: opacity 0.35s ease;
   z-index: 1;
 }
 
-.article-card:hover .card-image::before {
+.article-card:hover .card-image::after {
   opacity: 1;
 }
 
@@ -123,43 +126,38 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  filter: brightness(1) saturate(1);
+  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
+    filter 0.45s ease;
 }
 
 .article-card:hover .card-image img {
-  transform: scale(1.08);
-  filter: brightness(1.1) saturate(1.2);
+  transform: scale(1.07);
+  filter: brightness(1.06) saturate(1.15);
 }
 
+/* ── Card content ── */
 .card-content {
-  padding: 24px;
+  padding: 20px 22px 18px;
   position: relative;
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.95) 0%,
-    rgba(248, 250, 252, 0.95) 100%
-  );
+  z-index: 1;
   flex: 1;
   display: flex;
   flex-direction: column;
+  background: #ffffff;
 }
 
 [data-theme="dark"] .card-content {
-  background: linear-gradient(
-    135deg,
-    rgba(36, 37, 38, 0.95) 0%,
-    rgba(26, 32, 44, 0.95) 100%
-  );
+  background: #1e1f20;
 }
 
+/* ── Title ── */
 .card-title {
-  font-size: 18px;
+  font-size: 17px;
   font-weight: 700;
-  color: #1e293b;
-  margin: 0 0 12px 0;
-  line-height: 1.3;
-  letter-spacing: -0.01em;
+  color: #0f172a;
+  margin: 0 0 10px 0;
+  line-height: 1.35;
+  letter-spacing: -0.015em;
   transition: color 0.2s ease;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -168,7 +166,7 @@
 }
 
 .article-card:hover .card-title {
-  color: #6366f1;
+  color: #9333ea;
 }
 
 [data-theme="dark"] .card-title {
@@ -176,19 +174,19 @@
 }
 
 [data-theme="dark"] .article-card:hover .card-title {
-  color: #a78bfa;
+  color: #c084fc;
 }
 
+/* ── Description ── */
 .card-description {
-  font-size: 14px;
+  font-size: 13.5px;
   color: #64748b;
-  line-height: 1.6;
-  margin: 0 0 20px 0;
+  line-height: 1.65;
+  margin: 0 0 16px 0;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  font-weight: 400;
   flex: 1;
 }
 
@@ -196,39 +194,44 @@
   color: #94a3b8;
 }
 
+/* ── Meta row ── */
 .card-meta {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 16px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
+  margin-bottom: 14px;
+  padding-bottom: 14px;
+  border-bottom: 1px solid rgba(226, 232, 240, 0.7);
   position: relative;
-  gap: 12px;
+  gap: 10px;
 }
 
 [data-theme="dark"] .card-meta {
-  border-bottom-color: rgba(74, 85, 104, 0.3);
+  border-bottom-color: rgba(74, 85, 104, 0.25);
 }
 
-.card-meta::before {
+/* Animated underline on hover */
+.card-meta::after {
   content: "";
   position: absolute;
   bottom: -1px;
   left: 0;
-  width: 40px;
+  width: 0;
   height: 2px;
-  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-  border-radius: 1px;
-  opacity: 0;
-  transition: all 0.3s ease;
+  background: linear-gradient(90deg, #9333ea 0%, #c084fc 100%);
+  border-radius: 2px;
+  transition: width 0.35s ease;
 }
 
-.article-card:hover .card-meta::before {
-  opacity: 1;
-  width: 60px;
+.article-card:hover .card-meta::after {
+  width: 52px;
 }
 
+[data-theme="dark"] .card-meta::after {
+  background: linear-gradient(90deg, #c084fc 0%, #d946ef 100%);
+}
+
+/* ── Author ── */
 .card-author {
   display: flex;
   align-items: center;
@@ -245,17 +248,17 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 14px;
+  font-size: 12px;
   color: white;
-  font-weight: 600;
+  font-weight: 700;
   box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
   flex-shrink: 0;
-  transition: all 0.3s ease;
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
 }
 
-.author-avatar:hover {
+.article-card:hover .author-avatar {
   transform: scale(1.1);
-  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
+  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45);
 }
 
 .author-name {
@@ -268,48 +271,49 @@
   transition: color 0.2s ease;
 }
 
-.author-name:hover {
+.article-card:hover .author-name {
   color: #6366f1;
 }
 
 [data-theme="dark"] .author-name {
-  color: #cbd5e1;
+  color: #94a3b8;
 }
 
-[data-theme="dark"] .author-name:hover {
+[data-theme="dark"] .article-card:hover .author-name {
   color: #a78bfa;
 }
 
+/* ── Read time pill ── */
 .card-read-time {
   font-size: 11px;
-  color: #94a3b8;
-  font-weight: 500;
-  background: rgba(148, 163, 184, 0.1);
-  padding: 4px 8px;
-  border-radius: 12px;
+  color: #6366f1;
+  font-weight: 600;
+  background: rgba(99, 102, 241, 0.08);
+  padding: 3px 10px;
+  border-radius: 20px;
   flex-shrink: 0;
+  border: 1px solid rgba(99, 102, 241, 0.15);
 }
 
 [data-theme="dark"] .card-read-time {
-  color: #64748b;
-  background: rgba(100, 116, 139, 0.2);
+  color: #a78bfa;
+  background: rgba(167, 139, 250, 0.1);
+  border-color: rgba(167, 139, 250, 0.2);
 }
 
+/* ── Read more button ── */
 .card-read-more {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
+  align-self: flex-start;        /* ← fixes full-width stretch */
   color: #6366f1;
   text-decoration: none;
   font-size: 13px;
   font-weight: 700;
-  padding: 10px 16px;
+  padding: 9px 18px;
   border-radius: 12px;
-  background: linear-gradient(
-    135deg,
-    rgba(99, 102, 241, 0.1) 0%,
-    rgba(139, 92, 246, 0.1) 100%
-  );
+  background: rgba(99, 102, 241, 0.08);
   border: 1px solid rgba(99, 102, 241, 0.2);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
@@ -320,137 +324,91 @@
 .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;
+  inset: 0;
+  background: linear-gradient(135deg, #9333ea 0%, #d946ef 100%);
+  transform: translateX(-101%);
+  transition: transform 0.3s ease;
+  z-index: 0;
+}
+
+.card-read-more span {
+  position: relative;
+  z-index: 1;
 }
 
 .card-read-more:hover {
   color: white;
+  border-color: transparent;
+  box-shadow: 0 6px 20px rgba(147, 51, 234, 0.4);
   transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
 }
 
 .card-read-more:hover::before {
-  left: 0;
+  transform: translateX(0);
 }
 
 [data-theme="dark"] .card-read-more {
-  color: #a78bfa;
-  background: linear-gradient(
-    135deg,
-    rgba(167, 139, 250, 0.1) 0%,
-    rgba(192, 132, 252, 0.1) 100%
-  );
-  border-color: rgba(167, 139, 250, 0.2);
+  color: #c084fc;
+  background: rgba(192, 132, 252, 0.08);
+  border-color: rgba(192, 132, 252, 0.2);
 }
 
-[data-theme="dark"] .card-read-more:hover {
-  color: white;
+[data-theme="dark"] .card-read-more::before {
+  background: linear-gradient(135deg, #c084fc 0%, #d946ef 100%);
 }
 
-/* Responsive adjustments for carousel cards */
-@media (max-width: 768px) {
-  .card-image {
-    height: 160px;
-  }
-
-  .card-content {
-    padding: 20px;
-  }
-
-  .card-title {
-    font-size: 16px;
-    margin-bottom: 10px;
-  }
-
-  .card-description {
-    font-size: 13px;
-    margin-bottom: 16px;
-    -webkit-line-clamp: 2;
-  }
-
-  .card-meta {
-    margin-bottom: 12px;
-    padding-bottom: 12px;
-  }
-
-  .author-avatar {
-    width: 24px;
-    height: 24px;
-    font-size: 12px;
-  }
-
-  .author-name {
-    font-size: 11px;
-  }
-
-  .card-read-time {
-    font-size: 10px;
-    padding: 3px 6px;
-  }
-
-  .card-read-more {
-    font-size: 12px;
-    padding: 8px 12px;
-  }
-}
-
-/* Smooth page transitions */
-.page-transition-enter {
-  opacity: 0;
-  transform: translateY(20px);
-}
-
-.page-transition-enter-active {
-  opacity: 1;
-  transform: translateY(0);
-  transition:
-    opacity 0.6s ease-out,
-    transform 0.6s ease-out;
-}
-
-.page-transition-exit {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.page-transition-exit-active {
-  opacity: 0;
-  transform: translateY(-20px);
-  transition:
-    opacity 0.4s ease-in,
-    transform 0.4s ease-in;
+[data-theme="dark"] .card-read-more:hover {
+  color: white;
 }
 
-/* Blog Carousel Section Enhancements */
+/* ── Blog carousel section ── */
 .blog-carousel-section {
-  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 50%, #e8ebff 100%);
-  padding: 5px;
+  background: linear-gradient(160deg, #f8f9ff 0%, #f0f2ff 50%, #e8ebff 100%);
+  padding: 48px 24px;
   position: relative;
   overflow: hidden;
 }
 
 [data-theme="dark"] .blog-carousel-section {
-  background: linear-gradient(135deg, #1b1b1d 0%, #121212 50%, #1a202c 100%);
+  background: linear-gradient(160deg, #131314 0%, #18181b 50%, #1a1f2e 100%);
 }
 
-/* Enhanced Focus States */
+/* ── Focus state ── */
 .article-card:focus-within {
   outline: 2px solid #6366f1;
   outline-offset: 4px;
   border-radius: 24px;
 }
 
-/* Smooth Link Transitions */
-a[href*="/blog/"] {
-  transition: all 0.3s ease;
+/* ── Responsive ── */
+@media (max-width: 768px) {
+  .card-image { height: 160px; }
+  .card-content { padding: 16px 18px 14px; }
+  .card-title { font-size: 15px; }
+  .card-description { font-size: 12.5px; -webkit-line-clamp: 2; }
+  .card-meta { margin-bottom: 10px; padding-bottom: 10px; }
+  .author-avatar { width: 24px; height: 24px; font-size: 10px; }
+  .author-name { font-size: 11px; }
+  .card-read-time { font-size: 10px; }
+  .card-read-more { font-size: 12px; padding: 7px 14px; }
+}
+
+/* ── Page transitions ── */
+.page-transition-enter {
+  opacity: 0;
+  transform: translateY(20px);
 }
-
-a[href*="/blog/"]:hover {
-  text-decoration: none;
+.page-transition-enter-active {
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+}
+.page-transition-exit {
+  opacity: 1;
+  transform: translateY(0);
 }
+.page-transition-exit-active {
+  opacity: 0;
+  transform: translateY(-20px);
+  transition: opacity 0.4s ease-in, transform 0.4s ease-in;
+}
\ No newline at end of file
diff --git a/src/components/blogCarousel/blogCarousel.tsx b/src/components/blogCarousel/blogCarousel.tsx
index c63a55be..ae78ed59 100644
--- a/src/components/blogCarousel/blogCarousel.tsx
+++ b/src/components/blogCarousel/blogCarousel.tsx
@@ -9,11 +9,11 @@ import {
   CarouselPrevious,
   type CarouselApi,
 } from "../ui/carousel";
-import { Button } from "../ui/button";
 import { useEffect, useState } from "react";
 import BlogCard from "./blogCard";
 import blogs from "../../database/blogs";
 import Autoplay from "embla-carousel-autoplay";
+import Link from "@docusaurus/Link";
 import "./blogCarousel.css";
 
 export function BlogCarousel() {
@@ -34,6 +34,25 @@ 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>
+          <h2 className="text-2xl font-semibold text-gray-800 dark:text-gray-100">
+            From the Blog
+          </h2>
+          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+            Latest articles from our contributors
+          </p>
+        </div>
+        <Link
+          to="/blog"
+          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" }}
+        >
+          View all →
+        </Link>
+      </div>
+
       <Carousel
         setApi={setApi}
         className="w-full"
@@ -49,7 +68,7 @@ export function BlogCarousel() {
         ]}
       >
         <CarouselContent className="my-10">
-          {blogs.map((blog, index) => (
+          {blogs.map((blog) => (
             <CarouselItem
               key={blog.id}
               className="basis-full sm:basis-1/2 lg:basis-1/3 xl:basis-1/4"
@@ -67,27 +86,29 @@ export function BlogCarousel() {
           ))}
         </CarouselContent>
 
-        {/* Enhanced Carousel controls */}
+        {/* Carousel Controls */}
         <div className="mt-8 flex items-center justify-center gap-4">
-          <CarouselPrevious className="static h-12 w-12 translate-y-0 border-2 border-blue-200 transition-all duration-300 hover:scale-110 hover:border-blue-400 dark:border-blue-800 dark:hover:border-blue-600" />
-          <div className="flex gap-2">
+          <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" />
+
+          {/* Dot indicators */}
+          <div className="flex items-center gap-2">
             {Array.from({ length: count }).map((_, index) => (
-              <Button
+              <button
                 key={index}
-                variant="ghost"
-                size="sm"
-                className={`h-3 w-3 rounded-full p-0 transition-all duration-300 ${
+                onClick={() => api?.scrollTo(index)}
+                aria-label={`Go to slide ${index + 1}`}
+                className={`h-2 rounded-full transition-all duration-300 ${
                   current === index + 1
-                    ? "scale-125 bg-gradient-to-r from-blue-500 to-purple-500"
-                    : "bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500"
+                    ? "w-5 bg-indigo-500"
+                    : "w-2 bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500"
                 }`}
-                onClick={() => api?.scrollTo(index)}
               />
             ))}
           </div>
-          <CarouselNext className="static h-12 w-12 translate-y-0 border-2 border-blue-200 transition-all duration-300 hover:scale-110 hover:border-blue-400 dark:border-blue-800 dark:hover:border-blue-600" />
+
+          <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" />
         </div>
       </Carousel>
     </div>
   );
-}
+}
\ No newline at end of file