From 7cef36a1ca70a8d1a576dd5dd1b3a4e73328412e Mon Sep 17 00:00:00 2001
From: Dipanshu Rawat <dv451197@gmail.com>
Date: Sat, 4 Oct 2025 14:29:05 +0530
Subject: [PATCH 1/5] fix: card style

---
 .../testimonials/TestimonialCard.tsx          | 96 +++++++++++--------
 1 file changed, 58 insertions(+), 38 deletions(-)

diff --git a/src/components/testimonials/TestimonialCard.tsx b/src/components/testimonials/TestimonialCard.tsx
index d6536b85..90191163 100644
--- a/src/components/testimonials/TestimonialCard.tsx
+++ b/src/components/testimonials/TestimonialCard.tsx
@@ -23,82 +23,102 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
   const { colorMode } = useColorMode();
   const isDark = colorMode === "dark";
 
-  // Function to format the link display
   const formatLinkDisplay = (url: string) => {
     try {
       const urlObj = new URL(url);
-      return urlObj.hostname + urlObj.pathname;
+      return urlObj.hostname.replace("www.", "");
     } catch {
-      // If URL parsing fails, return the original link
       return url;
     }
   };
 
   return (
     <motion.div
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
-      className={`rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 h-[250px] flex flex-col justify-between ${
-        isDark ? "bg-[#1a1a1a] text-white" : "bg-white text-gray-900"
+      initial={{ opacity: 0, y: 12 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -12 }}
+      transition={{ duration: 0.3 }}
+      className={`rounded-2xl max-h-[400px] h-[350px] p-5 shadow-md hover:shadow-lg transition-all duration-300 flex flex-col justify-between ${
+        isDark ? "bg-[#18181b] text-white" : "bg-white text-gray-900"
       }`}
     >
-      {/* Header with Avatar and Name */}
+      {/* Header */}
       <div className="flex items-center gap-4">
-        <Avatar className="w-24 h-24 rounded-full">
-          <AvatarImage src={avatar} className="object-contain" />
-          <AvatarFallback>CN</AvatarFallback>
+        <Avatar className="w-15 h-15 border border-gray-200 dark:border-gray-700">
+          <AvatarImage
+            className="w-15 h-15 object-cover "
+            src={avatar}
+            alt={name}
+          />
+          <AvatarFallback>{name?.charAt(0) ?? "U"}</AvatarFallback>
         </Avatar>
         <div>
-          <h3 className={`font-semibold text-lg ${isDark ? "text-white" : "text-gray-900"}`}>
-            {name}
-          </h3>
-          <p className={`text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`}>
+          <h3 className="font-semibold text-base">{name}</h3>
+          <p className="text-sm text-gray-500 dark:text-gray-400">
             @{username}
           </p>
         </div>
       </div>
 
       {/* Content */}
-      <p className={`line-clamp-3 my-4 flex-grow ${isDark ? "text-gray-300" : "text-gray-700"}`}>
-        {content}
+      <p
+        className={`mt-4 mb-3 text-sm leading-relaxed ${
+          isDark ? "text-gray-300" : "text-gray-700"
+        }`}
+      >
+        {content.length > 220 ? content.slice(0, 220) + "..." : content}
       </p>
 
-      {/* Footer with Hashtags and Date */}
+      {/* Footer */}
       <div
-        className={`flex flex-col gap-2 text-sm pt-2 border-t ${
+        className={`pt-3 mt-auto border-t text-sm flex flex-col gap-2 ${
           isDark ? "border-gray-700" : "border-gray-100"
         }`}
       >
         {/* Hashtags */}
-        <div className="flex gap-2 flex-wrap">
-          {content.match(/#\w+/g)?.map((hashtag, index) => (
-            <span
-              key={index}
-              className="text-blue-500 hover:text-blue-600 cursor-pointer"
-            >
-              {hashtag}
-            </span>
-          ))}
-        </div>
+        {content.match(/#\w+/g) && (
+          <div className="flex flex-wrap gap-2">
+            {content
+              .match(/#\w+/g)
+              ?.slice(0, 3)
+              .map((tag, i) => (
+                <span
+                  key={i}
+                  className={`px-2 py-0.5 rounded-md text-xs font-medium ${
+                    isDark
+                      ? "bg-blue-900/40 text-blue-300"
+                      : "bg-blue-50 text-blue-700"
+                  }`}
+                >
+                  {tag}
+                </span>
+              ))}
+          </div>
+        )}
 
-        {/* Link and Date Row */}
+        {/* Link and Date */}
         <div className="flex items-center justify-between">
-          <a 
-            href={link} 
-            target="_blank" 
+          <a
+            href={link}
+            target="_blank"
             rel="noopener noreferrer"
-            className={`hover:underline cursor-pointer ${
-              isDark ? "text-blue-400 hover:text-blue-300" : "text-blue-600 hover:text-blue-700"
+            className={`truncate max-w-[70%] text-sm font-medium hover:underline ${
+              isDark
+                ? "text-blue-400 hover:text-blue-300"
+                : "text-blue-600 hover:text-blue-700"
             }`}
           >
             {formatLinkDisplay(link)}
           </a>
-          <span className={isDark ? "text-gray-500" : "text-gray-400"}>{date}</span>
+          <span
+            className={`text-xs ${isDark ? "text-gray-500" : "text-gray-400"}`}
+          >
+            {date}
+          </span>
         </div>
       </div>
     </motion.div>
   );
 };
 
-export default TestimonialCard;
\ No newline at end of file
+export default TestimonialCard;

From 8af41c8f5df7c38f40580004efd8ffb8cbc10b06 Mon Sep 17 00:00:00 2001
From: Dipanshu Rawat <dv451197@gmail.com>
Date: Sat, 4 Oct 2025 22:21:23 +0530
Subject: [PATCH 2/5] fix: card height

---
 src/components/testimonials/TestimonialCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/testimonials/TestimonialCard.tsx b/src/components/testimonials/TestimonialCard.tsx
index 90191163..ef7c6614 100644
--- a/src/components/testimonials/TestimonialCard.tsx
+++ b/src/components/testimonials/TestimonialCard.tsx
@@ -38,7 +38,7 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: -12 }}
       transition={{ duration: 0.3 }}
-      className={`rounded-2xl max-h-[400px] h-[350px] p-5 shadow-md hover:shadow-lg transition-all duration-300 flex flex-col justify-between ${
+      className={`rounded-2xl max-h-[250px] h-[246px] p-5 shadow-md hover:shadow-lg transition-all duration-300 flex flex-col justify-between ${
         isDark ? "bg-[#18181b] text-white" : "bg-white text-gray-900"
       }`}
     >

From 42f736cd2076932b6a13e9959a140d48494c0263 Mon Sep 17 00:00:00 2001
From: Dipanshu Rawat <dv451197@gmail.com>
Date: Sat, 4 Oct 2025 22:26:35 +0530
Subject: [PATCH 3/5] fix gap

---
 src/pages/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 12665676..9f74b606 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -88,7 +88,7 @@ export default function Home(): ReactNode {
             <OurProjects OurProjectsData={projectsData} />
           </div>
 
-          <div className="m-4 grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-8">
+          <div className="m-4 grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
             {showTopmate && (
               <div className="col-span-1">
                 <TopMateSection setShowTopmate={setShowTopmate} />

From b58da24a39d015c6d521b20d3de48ef7f5d6e1b1 Mon Sep 17 00:00:00 2001
From: Dipanshu Rawat <dv451197@gmail.com>
Date: Mon, 6 Oct 2025 20:22:21 +0530
Subject: [PATCH 4/5] ref: styles and css

---
 .../testimonials/TestimonialCard.tsx          | 92 +++++++++----------
 1 file changed, 44 insertions(+), 48 deletions(-)

diff --git a/src/components/testimonials/TestimonialCard.tsx b/src/components/testimonials/TestimonialCard.tsx
index ef7c6614..3e93f3b4 100644
--- a/src/components/testimonials/TestimonialCard.tsx
+++ b/src/components/testimonials/TestimonialCard.tsx
@@ -1,3 +1,4 @@
+// prettier-ignore
 import React from "react";
 import { motion } from "framer-motion";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
@@ -26,7 +27,7 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
   const formatLinkDisplay = (url: string) => {
     try {
       const urlObj = new URL(url);
-      return urlObj.hostname.replace("www.", "");
+      return urlObj.hostname + urlObj.pathname;
     } catch {
       return url;
     }
@@ -34,27 +35,30 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
 
   return (
     <motion.div
-      initial={{ opacity: 0, y: 12 }}
-      animate={{ opacity: 1, y: 0 }}
-      exit={{ opacity: 0, y: -12 }}
-      transition={{ duration: 0.3 }}
-      className={`rounded-2xl max-h-[250px] h-[246px] p-5 shadow-md hover:shadow-lg transition-all duration-300 flex flex-col justify-between ${
-        isDark ? "bg-[#18181b] text-white" : "bg-white text-gray-900"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      className={`rounded-2xl p-4 shadow-md hover:shadow-lg transition-shadow duration-300 flex flex-col justify-between ${
+        isDark ? "bg-[#1a1a1a] text-white" : "bg-white text-gray-900"
       }`}
     >
-      {/* Header */}
-      <div className="flex items-center gap-4">
-        <Avatar className="w-15 h-15 border border-gray-200 dark:border-gray-700">
-          <AvatarImage
-            className="w-15 h-15 object-cover "
-            src={avatar}
-            alt={name}
-          />
-          <AvatarFallback>{name?.charAt(0) ?? "U"}</AvatarFallback>
+      {/* Header with Avatar and Name */}
+      <div className="flex items-center gap-3 ">
+        <Avatar className="w-16 h-16 rounded-full">
+          <AvatarImage src={avatar} className="object-cover" />
+          <AvatarFallback>CN</AvatarFallback>
         </Avatar>
-        <div>
-          <h3 className="font-semibold text-base">{name}</h3>
-          <p className="text-sm text-gray-500 dark:text-gray-400">
+        <div className="box-border p-0 m-0">
+          <h3
+            className={`font-semibold text-base ${
+              isDark ? "text-white" : "text-gray-900"
+            }`}
+          >
+            {name}
+          </h3>
+          <p
+            className={`text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`}
+          >
             @{username}
           </p>
         </div>
@@ -62,47 +66,39 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
 
       {/* Content */}
       <p
-        className={`mt-4 mb-3 text-sm leading-relaxed ${
-          isDark ? "text-gray-300" : "text-gray-700"
-        }`}
+        className={`line-clamp-4 ${isDark ? "text-gray-300" : "text-gray-700"}`}
       >
-        {content.length > 220 ? content.slice(0, 220) + "..." : content}
+        {content.length > 100 ? content.slice(0, 99) + "..." : content}
       </p>
 
-      {/* Footer */}
+      {/* Footer with Hashtags and Date */}
       <div
-        className={`pt-3 mt-auto border-t text-sm flex flex-col gap-2 ${
-          isDark ? "border-gray-700" : "border-gray-100"
+        className={`flex flex-col gap-2 text-sm border-t ${
+          isDark ? "border-gray-700" : "border-gray-200"
         }`}
       >
         {/* Hashtags */}
-        {content.match(/#\w+/g) && (
-          <div className="flex flex-wrap gap-2">
-            {content
-              .match(/#\w+/g)
-              ?.slice(0, 3)
-              .map((tag, i) => (
-                <span
-                  key={i}
-                  className={`px-2 py-0.5 rounded-md text-xs font-medium ${
-                    isDark
-                      ? "bg-blue-900/40 text-blue-300"
-                      : "bg-blue-50 text-blue-700"
-                  }`}
-                >
-                  {tag}
-                </span>
-              ))}
-          </div>
-        )}
+        <div className="flex gap-2 flex-wrap">
+          {content
+            .match(/#\w+/g)
+            ?.slice(0, 3)
+            .map((hashtag, index) => (
+              <span
+                key={index}
+                className="text-blue-500 hover:text-blue-600 cursor-pointer"
+              >
+                {hashtag}
+              </span>
+            ))}
+        </div>
 
-        {/* Link and Date */}
-        <div className="flex items-center justify-between">
+        {/* Link and Date Row */}
+        <div className="flex items-center justify-between mt-1">
           <a
             href={link}
             target="_blank"
             rel="noopener noreferrer"
-            className={`truncate max-w-[70%] text-sm font-medium hover:underline ${
+            className={`truncate max-w-[70%] hover:underline cursor-pointer ${
               isDark
                 ? "text-blue-400 hover:text-blue-300"
                 : "text-blue-600 hover:text-blue-700"

From 238338cc42435cfe3dad309c2406bd45b491f817 Mon Sep 17 00:00:00 2001
From: Dipanshu Rawat <dv451197@gmail.com>
Date: Tue, 7 Oct 2025 13:11:08 +0530
Subject: [PATCH 5/5] fix: card image size

---
 .../testimonials/TestimonialCard.tsx          | 77 ++++++++++++-------
 1 file changed, 49 insertions(+), 28 deletions(-)

diff --git a/src/components/testimonials/TestimonialCard.tsx b/src/components/testimonials/TestimonialCard.tsx
index 3e93f3b4..b12f4297 100644
--- a/src/components/testimonials/TestimonialCard.tsx
+++ b/src/components/testimonials/TestimonialCard.tsx
@@ -38,19 +38,32 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
-      className={`rounded-2xl p-4 shadow-md hover:shadow-lg transition-shadow duration-300 flex flex-col justify-between ${
+      className={`rounded-2xl p-6 shadow-md hover:shadow-lg transition-all duration-300 flex flex-col justify-between  h-full ${
         isDark ? "bg-[#1a1a1a] text-white" : "bg-white text-gray-900"
       }`}
     >
-      {/* Header with Avatar and Name */}
-      <div className="flex items-center gap-3 ">
-        <Avatar className="w-16 h-16 rounded-full">
-          <AvatarImage src={avatar} className="object-cover" />
-          <AvatarFallback>CN</AvatarFallback>
-        </Avatar>
-        <div className="box-border p-0 m-0">
+      {/* Header */}
+      <div className="flex items-center gap-4 mb-4">
+        <div className="relative w-16 h-16 flex-shrink-0">
+          <div className="w-full h-full rounded-full overflow-hidden border border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
+            {avatar ? (
+              <img
+                src={avatar}
+                alt={name}
+                className="w-full h-[180px] overflow-hidden object-cover rounded-full"
+                loading="lazy"
+              />
+            ) : (
+              <span className="text-sm font-semibold">
+                {name?.charAt(0)?.toUpperCase() ?? "U"}
+              </span>
+            )}
+          </div>
+        </div>
+
+        <div className="flex flex-col">
           <h3
-            className={`font-semibold text-base ${
+            className={`font-semibold text-lg leading-tight ${
               isDark ? "text-white" : "text-gray-900"
             }`}
           >
@@ -66,34 +79,42 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
 
       {/* Content */}
       <p
-        className={`line-clamp-4 ${isDark ? "text-gray-300" : "text-gray-700"}`}
+        className={`text-sm line-clamp-4 ${
+          isDark ? "text-gray-300" : "text-gray-700"
+        }`}
       >
-        {content.length > 100 ? content.slice(0, 99) + "..." : content}
+        {content.length > 111 ? content.slice(0, 111) + "..." : content}
       </p>
 
-      {/* Footer with Hashtags and Date */}
+      {/* Footer */}
       <div
-        className={`flex flex-col gap-2 text-sm border-t ${
+        className={`pt-1 border-t text-sm flex flex-col gap-2 ${
           isDark ? "border-gray-700" : "border-gray-200"
         }`}
       >
         {/* Hashtags */}
-        <div className="flex gap-2 flex-wrap">
-          {content
-            .match(/#\w+/g)
-            ?.slice(0, 3)
-            .map((hashtag, index) => (
-              <span
-                key={index}
-                className="text-blue-500 hover:text-blue-600 cursor-pointer"
-              >
-                {hashtag}
-              </span>
-            ))}
-        </div>
+        {content.match(/#\w+/g) && (
+          <div className="flex flex-wrap gap-2">
+            {content
+              .match(/#\w+/g)
+              ?.slice(0, 3)
+              .map((tag, i) => (
+                <span
+                  key={i}
+                  className={`px-2 py-0.5 rounded-md text-xs font-medium ${
+                    isDark
+                      ? "bg-blue-900/40 text-blue-300"
+                      : "bg-blue-50 text-blue-700"
+                  }`}
+                >
+                  {tag}
+                </span>
+              ))}
+          </div>
+        )}
 
-        {/* Link and Date Row */}
-        <div className="flex items-center justify-between mt-1">
+        {/* Link and Date */}
+        <div className="flex items-center justify-between">
           <a
             href={link}
             target="_blank"