Revamp readme.md

components/Marquee.tsx

@@ -27,7 +27,7 @@ export function Marquee({
         .map((_, i) => (
           <div
             key={i}
-            className={`flex shrink-0 justify-around [gap:var(--gap)] ${vertical ? 'animate-marquee-vertical flex-col' : 'animate-marquee flex-row'} ${pauseOnHover ? 'group-hover:[animation-play-state:paused]' : ''} ${reverse ? '[animation-direction:reverse]' : ''}`}
+            className={`flex shrink-0 justify-around [gap:var(--gap)] will-change-transform [backface-visibility:hidden] ${vertical ? 'animate-marquee-vertical flex-col' : 'animate-marquee flex-row'} ${pauseOnHover ? 'group-hover:[animation-play-state:paused]' : ''} ${reverse ? '[animation-direction:reverse]' : ''}`}
           >
             {children}
           </div>

components/testimonials.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { useRouter } from "next/router";
 import { Marquee } from "./Marquee";
 import Tweets from "../services/Tweets";
 const firstRow = Tweets.slice(0, Tweets.length / 2);
@@ -18,19 +17,25 @@ const ReviewCard = ({
   id: string;
   content: string;
 }) => {
-  const { basePath } = useRouter();
-  const isExternal = typeof avatar === "string" && /^https?:\/\//i.test(avatar);
-  const proxiedAvatar = isExternal ? `${basePath}/api/proxy-image?url=${encodeURIComponent(avatar)}` : avatar;
+  const fallbackAvatar = `https://ui-avatars.com/api/?name=${encodeURIComponent(name)}&background=random&size=64`;
+  const localPlaceholder = "/blog/avatars/avatar-placeholder.svg";
   return (
-    <a href={post} target="_blank" className="lg:mx-2">
+    <a href={post} target="_blank" rel="noopener noreferrer" className="lg:mx-2">
       <figure className="relative w-80 cursor-pointer overflow-hidden rounded-xl border  p-4  border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]">
         <div className="flex flex-row items-center gap-2">
           <img
             className="rounded-full"
             width="32"
             height="32"
-            alt=""
-            src={proxiedAvatar}
+            alt={`${name}'s avatar`}
+            src={avatar}
+            onError={(e) => {
+              const img = e.target as HTMLImageElement;
+              if (img.src !== localPlaceholder) {
+                img.onerror = () => { img.src = localPlaceholder; };
+                img.src = fallbackAvatar;
+              }
+            }}
           />
           <div className="flex flex-col">
             <figcaption className="text-sm font-bold">{name}</figcaption>
@@ -46,23 +51,22 @@ const ReviewCard = ({
 const TwitterTestimonials = () => {
   return (
     <div className="">
-          <h3 className="text-center lg:text-left bg-gradient-to-r from-orange-200 to-orange-100 bg-[length:100%_20px] bg-no-repeat bg-left-bottom w-max mb-6 text-3xl lg:text-4xl heading1 md:text-4xl font-bold tracking-tighter leading-tight mt-16">
-          What our community thinks
-        </h3>
-      <div className="relative flex mb-8  h-[700px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border  ">
-        
-        <Marquee pauseOnHover className="[--duration:20s]">
+      <h3 className="text-center lg:text-left bg-gradient-to-r from-orange-200 to-orange-100 bg-[length:100%_20px] bg-no-repeat bg-left-bottom w-max mb-6 text-3xl lg:text-4xl heading1 md:text-4xl font-bold tracking-tighter leading-tight mt-16">
+        What our community thinks
+      </h3>
+      <div className="relative flex mb-8 h-[700px] w-full flex-col items-center justify-center overflow-hidden rounded-lg bg-transparent marquee-mask">
+
+        <Marquee pauseOnHover repeat={2} className="[--duration:17s]">
           {firstRow.map((tweet) => (
             <ReviewCard key={tweet.id} {...tweet} />
           ))}
         </Marquee>
-        <Marquee reverse pauseOnHover className="[--duration:20s]">
+        <Marquee reverse pauseOnHover repeat={2} className="[--duration:17s]">
           {secondRow.map((tweet) => (
             <ReviewCard key={tweet.id} {...tweet} />
           ))}
         </Marquee>
-        <div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-neutral-100 dark:from-background"></div>
-        <div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-neutral-100 dark:from-background"></div>
+
       </div>
     </div>
   );