From d925e02b830d18bbb41a20ea39c9feb4e3452e03 Mon Sep 17 00:00:00 2001
From: Poyraz <78071274+poyrazavsever@users.noreply.github.com>
Date: Mon, 29 Jun 2026 23:46:23 +0300
Subject: [PATCH] fix: update ReferenceCards component for improved hover
 effects and quote handling

---
 components/reference-cards.tsx           | 13 +++++--------
 components/references-detail-content.tsx |  2 +-
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/components/reference-cards.tsx b/components/reference-cards.tsx
index 07556c4..33a1b59 100644
--- a/components/reference-cards.tsx
+++ b/components/reference-cards.tsx
@@ -12,25 +12,22 @@ type ReferenceCardsProps = {
 
 export function ReferenceCards({ className, cardClassName, lineClamp }: ReferenceCardsProps) {
   const locale = useLocale();
+  const hoverClassName =
+    "transition-colors duration-200 group-hover:border-red-600/40 group-hover:bg-muted/30 group-hover:shadow-sm";
 
   return (
     <div className={className}>
       {REFERENCES.map((item) => {
         const quoteText = getLocalizedValue(item.quote, locale);
-        const quoteContent = lineClamp ? (
-          <span className="line-clamp-3">{quoteText}</span>
-        ) : (
-          quoteText
-        );
 
         const card = (
           <TestimonialCard
-            quote={quoteContent as any}
+            quote={quoteText}
             author={item.author}
             role={getLocalizedValue(item.role, locale)}
             avatar={item.avatar}
             rating={item.rating}
-            className={`flex flex-col rounded-sm ${cardClassName || "w-70 shrink-0"}`}
+            className={`flex flex-col rounded-sm ${lineClamp ? "[&_p]:line-clamp-3" : ""} ${hoverClassName} ${cardClassName || "w-70 shrink-0"}`}
           />
         );
 
@@ -47,7 +44,7 @@ export function ReferenceCards({ className, cardClassName, lineClamp }: Referenc
             target="_blank"
             rel="noreferrer"
             aria-label={`${item.author} bağlantısı`}
-            className="block h-full transition-transform hover:scale-[1.02]"
+            className="group block h-full"
           >
             {card}
           </a>
diff --git a/components/references-detail-content.tsx b/components/references-detail-content.tsx
index c9f0379..385b0c8 100644
--- a/components/references-detail-content.tsx
+++ b/components/references-detail-content.tsx
@@ -6,7 +6,7 @@ export function ReferencesDetailContent() {
   const t = useTranslations("About");
 
   return (
-    <section className="flex h-full flex-col gap-4 overflow-y-auto">
+    <section className="flex flex-col gap-4 overflow-x-hidden">
       <Link
         href="/about"
         className="inline-flex w-fit items-center rounded-sm border border-border px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"