From c637102e20d625fd7703083b32c348a3ebc9fbab Mon Sep 17 00:00:00 2001
From: Poyraz <78071274+poyrazavsever@users.noreply.github.com>
Date: Mon, 29 Jun 2026 10:04:31 +0300
Subject: [PATCH] feat: add reference components including reusable cards,
 section marquee, and detail page content

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

diff --git a/components/reference-cards.tsx b/components/reference-cards.tsx
index bbe788d..07556c4 100644
--- a/components/reference-cards.tsx
+++ b/components/reference-cards.tsx
@@ -16,16 +16,21 @@ export function ReferenceCards({ className, cardClassName, lineClamp }: Referenc
   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={getLocalizedValue(item.quote, locale)}
+            quote={quoteContent as any}
             author={item.author}
             role={getLocalizedValue(item.role, locale)}
             avatar={item.avatar}
             rating={item.rating}
-            className={`flex flex-col h-full rounded-sm [&>*:last-child]:mt-auto ${
-              lineClamp ? "[&>*:first-child]:line-clamp-4" : ""
-            } ${cardClassName || "w-70 shrink-0"}`}
+            className={`flex flex-col rounded-sm ${cardClassName || "w-70 shrink-0"}`}
           />
         );
 
diff --git a/components/references-detail-content.tsx b/components/references-detail-content.tsx
index 8bb5869..c9f0379 100644
--- a/components/references-detail-content.tsx
+++ b/components/references-detail-content.tsx
@@ -15,8 +15,8 @@ export function ReferencesDetailContent() {
       </Link>
 
       <ReferenceCards
-        className="columns-1 gap-4 sm:columns-2 lg:columns-3 [&>a]:mb-4 [&>a]:break-inside-avoid [&>div]:mb-4 [&>div]:break-inside-avoid"
-        cardClassName="w-full"
+        className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 items-start"
+        cardClassName="w-full h-auto"
         lineClamp={false}
       />
     </section>
diff --git a/components/references-section.tsx b/components/references-section.tsx
index d73b148..b375060 100644
--- a/components/references-section.tsx
+++ b/components/references-section.tsx
@@ -7,9 +7,9 @@ export function ReferencesSection() {
     <section className="space-y-8 pt-0 sm:pt-12">
       <div className="relative overflow-hidden rounded-sm py-4">
         {/* We use two sets of cards for seamless infinite marquee effect */}
-        <div className="flex w-max gap-4 animate-marquee pause-on-hover">
-          <ReferenceCards className="flex gap-4 shrink-0" lineClamp={true} cardClassName="w-80" />
-          <ReferenceCards className="flex gap-4 shrink-0" lineClamp={true} cardClassName="w-80" />
+        <div className="flex items-start w-max gap-4 animate-marquee pause-on-hover">
+          <ReferenceCards className="flex items-start gap-4 shrink-0" lineClamp={true} cardClassName="w-80" />
+          <ReferenceCards className="flex items-start gap-4 shrink-0" lineClamp={true} cardClassName="w-80" />
         </div>
         
         <div