feat: add reference components including reusable cards, section marquee, and detail page content

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 ${
+            className={`flex flex-col rounded-sm ${cardClassName || "w-70 shrink-0"}`}
-              lineClamp ? "[&>*:first-child]:line-clamp-4" : ""
-            } ${cardClassName || "w-70 shrink-0"}`}
           />
         );
 

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"
+        className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 items-start"
-        cardClassName="w-full"
+        cardClassName="w-full h-auto"
         lineClamp={false}
       />
     </section>

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">
+        <div className="flex items-start w-max gap-4 animate-marquee pause-on-hover">
-          <ReferenceCards className="flex gap-4 shrink-0" lineClamp={true} cardClassName="w-80" />
+          <ReferenceCards className="flex items-start gap-4 shrink-0" lineClamp={true} cardClassName="w-80" />
-          <ReferenceCards className="flex 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