From 837aa0875cf05519bc54d0c1045c7b131bbae2c9 Mon Sep 17 00:00:00 2001
From: techxninjas <aadillatif95230@gmail.com>
Date: Sun, 1 Mar 2026 14:46:34 +0530
Subject: [PATCH 1/4] Improved the testimonials card avatar style

---
 src/components/testimonials/TestimonialCard.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/testimonials/TestimonialCard.tsx b/src/components/testimonials/TestimonialCard.tsx
index d9e5be27..7257b4bf 100644
--- a/src/components/testimonials/TestimonialCard.tsx
+++ b/src/components/testimonials/TestimonialCard.tsx
@@ -57,8 +57,9 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
         {/* Header */}
         <div className="mb-6 flex items-center gap-4">
           <div className="relative">
-            <Avatar className="h-16 w-16 border-2 border-gradient-to-r from-purple-500 to-pink-500">
-              <AvatarImage src={avatar} className="object-contain" />
+            <div className="pointer-events-none absolute -inset-1 rounded-full bg-gradient-to-br from-purple-500/35 via-fuchsia-500/25 to-blue-500/35 blur-md" />
+            <Avatar className="relative z-10 h-20 w-20 overflow-hidden border border-white/70 bg-white/70 shadow-[0_10px_30px_-12px_rgba(147,51,234,0.7)] ring-2 ring-purple-300/50">
+              <AvatarImage src={avatar} className="h-full w-full scale-300 object-cover object-center" />
               <AvatarFallback className="bg-gradient-to-br from-purple-500 to-pink-500 text-white font-semibold">
                 {name.charAt(0)}
               </AvatarFallback>

From dcf8fd730d4feeeeae4810f6c34d5b3cc0828717 Mon Sep 17 00:00:00 2001
From: techxninjas <aadillatif95230@gmail.com>
Date: Sun, 1 Mar 2026 14:57:10 +0530
Subject: [PATCH 2/4] FAQs page improved

---
 src/components/faqs/faqs.tsx | 61 ++++++++++++++++++++++++++----------
 1 file changed, 44 insertions(+), 17 deletions(-)

diff --git a/src/components/faqs/faqs.tsx b/src/components/faqs/faqs.tsx
index 5b3465c4..d0405acd 100644
--- a/src/components/faqs/faqs.tsx
+++ b/src/components/faqs/faqs.tsx
@@ -65,12 +65,12 @@ const FAQs: React.FC = () => {
         padding: "2rem 0",
       }}
     >
-      <div className="mx-auto px-2 sm:px-4 lg:px-6">
+      <div className="mx-auto px-2 sm:px-4 lg:max-w-6xl lg:px-10 xl:max-w-7xl xl:px-14">
         <div className="flex flex-col items-center justify-center gap-x-8 gap-y-12 lg:flex-row lg:justify-between xl:gap-28">
           <div className="w-full">
-            <div className="mb-8 lg:mb-16">
+            <div className="mb-8 text-center lg:mb-16">
               <h6
-                className="mb-2 text-center text-lg font-medium lg:text-left"
+                className="mb-2 text-center text-lg font-medium"
                 style={{
                   color: isDark ? "#a78bfa" : "#8b5cf6",
                   fontWeight: 600,
@@ -79,7 +79,7 @@ const FAQs: React.FC = () => {
                 FAQs
               </h6>
               <h2
-                className={`text-center text-4xl font-bold lg:text-left ${
+                className={`text-center text-4xl font-bold ${
                   isDark ? "text-gray-100" : "text-gray-900"
                 } leading-snug`}
               >
@@ -88,7 +88,7 @@ const FAQs: React.FC = () => {
               <p
                 className={`${
                   isDark ? "text-gray-400" : "text-gray-600"
-                } text-center lg:text-left`}
+                } mx-auto text-center`}
               >
                 Find answers to the most common questions about recode hive.
               </p>
@@ -99,25 +99,49 @@ const FAQs: React.FC = () => {
               {faqData.map((faq, index) => (
                 <motion.div
                   key={index}
-                  className="accordion mb-4 h-fit break-inside-avoid border-gray-200 pb-4 dark:border-gray-700"
+                  className="accordion mb-4 h-fit break-inside-avoid overflow-hidden rounded-xl border pb-0 shadow-sm transition-all duration-300 dark:border-gray-700"
+                  style={{
+                    background: isDark
+                      ? "rgba(30, 27, 75, 0.55)"
+                      : "rgba(237, 233, 254, 0.7)",
+                    borderColor: isDark
+                      ? "rgba(139, 92, 246, 0.25)"
+                      : "rgba(139, 92, 246, 0.28)",
+                    backdropFilter: "blur(12px)",
+                  }}
                   initial={{ opacity: 0, y: 10 }}
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ duration: 0.3 }}
                 >
                   <button
-                    className={`accordion-toggle group flex w-full cursor-pointer items-center justify-between rounded-lg p-4 text-lg font-medium transition-all duration-300 focus:outline-none ${
+                    className={`accordion-toggle group flex w-full cursor-pointer items-center justify-between p-4 text-left text-lg font-medium transition-all duration-300 focus:outline-none ${
                       isDark
-                        ? "text-gray-200 hover:text-indigo-400"
-                        : "text-gray-700 hover:text-indigo-600"
+                        ? "text-gray-200 hover:text-indigo-300"
+                        : "text-gray-700 hover:text-indigo-700"
                     }`}
                     style={{
-                      background: isDark
-                        ? "rgba(30, 27, 75, 0.6)"
-                        : "rgba(237, 233, 254, 0.6)",
-                      border: isDark
-                        ? "1px solid rgba(139, 92, 246, 0.2)"
-                        : "1px solid rgba(139, 92, 246, 0.3)",
-                      backdropFilter: "blur(10px)",
+                      background:
+                        activeIndex === index
+                          ? isDark
+                            ? "linear-gradient(135deg, rgba(99,102,241,0.24), rgba(139,92,246,0.16))"
+                            : "linear-gradient(135deg, rgba(224,231,255,0.95), rgba(237,233,254,0.92))"
+                          : isDark
+                            ? "linear-gradient(135deg, rgba(67,56,202,0.18), rgba(76,29,149,0.1))"
+                            : "linear-gradient(135deg, rgba(238,242,255,0.85), rgba(243,232,255,0.78))",
+                      boxShadow:
+                        activeIndex === index
+                          ? isDark
+                            ? "inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 24px -16px rgba(99,102,241,0.7)"
+                            : "inset 0 1px 0 rgba(255,255,255,0.95), 0 10px 26px -18px rgba(99,102,241,0.55)"
+                          : isDark
+                            ? "inset 0 1px 0 rgba(255,255,255,0.08)"
+                            : "inset 0 1px 0 rgba(255,255,255,0.8)",
+                      borderBottom:
+                        activeIndex === index
+                          ? isDark
+                            ? "1px solid rgba(139, 92, 246, 0.35)"
+                            : "1px solid rgba(139, 92, 246, 0.3)"
+                          : "1px solid transparent",
                     }}
                     onClick={() => toggleAccordion(index)}
                   >
@@ -139,10 +163,13 @@ const FAQs: React.FC = () => {
                     transition={{ duration: 0.3, ease: "easeInOut" }}
                   >
                     <div
-                      className={`mt-2 text-base transition-colors duration-200 ${
+                      className={`border-t px-4 pb-4 pt-3 text-base transition-colors duration-200 ${
                         isDark ? "text-gray-300" : "text-gray-900"
                       }`}
                       style={{
+                        borderColor: isDark
+                          ? "rgba(139, 92, 246, 0.22)"
+                          : "rgba(139, 92, 246, 0.24)",
                         color: isDark ? "#d1d5db" : "#111827",
                       }}
                       dangerouslySetInnerHTML={{

From 0f1a4f04fd9be36eea6f508913bc034da979933f Mon Sep 17 00:00:00 2001
From: techxninjas <aadillatif95230@gmail.com>
Date: Sun, 1 Mar 2026 15:01:07 +0530
Subject: [PATCH 3/4] colorMode removed because of no use

---
 src/components/faqs/faqs.tsx                    | 2 +-
 src/components/testimonials/TestimonialCard.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/faqs/faqs.tsx b/src/components/faqs/faqs.tsx
index d0405acd..b9a4b566 100644
--- a/src/components/faqs/faqs.tsx
+++ b/src/components/faqs/faqs.tsx
@@ -44,7 +44,7 @@ const faqData = [
 
 const FAQs: React.FC = () => {
   const [activeIndex, setActiveIndex] = useState<number | null>(null);
-  const { colorMode, isDark } = useSafeColorMode();
+  const { isDark } = useSafeColorMode();
 
   const toggleAccordion = (index: number) => {
     setActiveIndex(activeIndex === index ? null : index);
diff --git a/src/components/testimonials/TestimonialCard.tsx b/src/components/testimonials/TestimonialCard.tsx
index 7257b4bf..d7be5ecb 100644
--- a/src/components/testimonials/TestimonialCard.tsx
+++ b/src/components/testimonials/TestimonialCard.tsx
@@ -21,7 +21,7 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
   avatar,
   link,
 }) => {
-  const { colorMode, isDark } = useSafeColorMode();
+  const { isDark } = useSafeColorMode();
 
   const formatLinkDisplay = (url: string) => {
     try {

From 033a70c83a027abc0c808ecdac0b7a4c6e1acf51 Mon Sep 17 00:00:00 2001
From: techxninjas <aadillatif95230@gmail.com>
Date: Sun, 1 Mar 2026 18:09:47 +0530
Subject: [PATCH 4/4] Improved the consistency

---
 src/components/faqs/faqs.tsx                  | 150 +++++++++---------
 .../testimonials/TestimonialCard.tsx          |   2 +-
 2 files changed, 80 insertions(+), 72 deletions(-)

diff --git a/src/components/faqs/faqs.tsx b/src/components/faqs/faqs.tsx
index b9a4b566..502c0393 100644
--- a/src/components/faqs/faqs.tsx
+++ b/src/components/faqs/faqs.tsx
@@ -96,97 +96,105 @@ const FAQs: React.FC = () => {
 
             {/* Accordion Masonry Columns to prevent sibling expansion */}
             <div className="columns-1 md:columns-2 md:gap-x-6">
-              {faqData.map((faq, index) => (
-                <motion.div
-                  key={index}
-                  className="accordion mb-4 h-fit break-inside-avoid overflow-hidden rounded-xl border pb-0 shadow-sm transition-all duration-300 dark:border-gray-700"
-                  style={{
-                    background: isDark
-                      ? "rgba(30, 27, 75, 0.55)"
-                      : "rgba(237, 233, 254, 0.7)",
-                    borderColor: isDark
-                      ? "rgba(139, 92, 246, 0.25)"
-                      : "rgba(139, 92, 246, 0.28)",
-                    backdropFilter: "blur(12px)",
-                  }}
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.3 }}
-                >
-                  <button
-                    className={`accordion-toggle group flex w-full cursor-pointer items-center justify-between p-4 text-left text-lg font-medium transition-all duration-300 focus:outline-none ${
-                      isDark
-                        ? "text-gray-200 hover:text-indigo-300"
-                        : "text-gray-700 hover:text-indigo-700"
-                    }`}
+              {faqData.map((faq, index) => {
+                const isExpanded = activeIndex === index;
+                const panelId = `faq-panel-${index}`;
+                const triggerId = `faq-trigger-${index}`;
+
+                return (
+                  <motion.div
+                    key={index}
+                    className="accordion mb-4 h-fit break-inside-avoid overflow-hidden rounded-xl border pb-0 shadow-sm transition-all duration-300 dark:border-gray-700"
                     style={{
-                      background:
-                        activeIndex === index
+                      background: isDark
+                        ? "rgba(30, 27, 75, 0.55)"
+                        : "rgba(237, 233, 254, 0.7)",
+                      borderColor: isDark
+                        ? "rgba(139, 92, 246, 0.25)"
+                        : "rgba(139, 92, 246, 0.28)",
+                      backdropFilter: "blur(12px)",
+                    }}
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.3 }}
+                  >
+                    <button
+                      id={triggerId}
+                      aria-expanded={isExpanded}
+                      aria-controls={panelId}
+                      className={`accordion-toggle group flex w-full cursor-pointer items-center justify-between p-4 text-left text-lg font-medium transition-all duration-300 focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-indigo-400 dark:focus-visible:ring-offset-gray-900 ${
+                        isDark
+                          ? "text-gray-200 hover:text-indigo-300"
+                          : "text-gray-700 hover:text-indigo-700"
+                      }`}
+                      style={{
+                        background: isExpanded
                           ? isDark
                             ? "linear-gradient(135deg, rgba(99,102,241,0.24), rgba(139,92,246,0.16))"
                             : "linear-gradient(135deg, rgba(224,231,255,0.95), rgba(237,233,254,0.92))"
                           : isDark
                             ? "linear-gradient(135deg, rgba(67,56,202,0.18), rgba(76,29,149,0.1))"
                             : "linear-gradient(135deg, rgba(238,242,255,0.85), rgba(243,232,255,0.78))",
-                      boxShadow:
-                        activeIndex === index
+                        boxShadow: isExpanded
                           ? isDark
                             ? "inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 24px -16px rgba(99,102,241,0.7)"
                             : "inset 0 1px 0 rgba(255,255,255,0.95), 0 10px 26px -18px rgba(99,102,241,0.55)"
                           : isDark
                             ? "inset 0 1px 0 rgba(255,255,255,0.08)"
                             : "inset 0 1px 0 rgba(255,255,255,0.8)",
-                      borderBottom:
-                        activeIndex === index
+                        borderBottom: isExpanded
                           ? isDark
                             ? "1px solid rgba(139, 92, 246, 0.35)"
                             : "1px solid rgba(139, 92, 246, 0.3)"
                           : "1px solid transparent",
-                    }}
-                    onClick={() => toggleAccordion(index)}
-                  >
-                    {faq.question}
-                    <motion.span
-                      className="transform transition-transform duration-300"
-                      animate={{ rotate: activeIndex === index ? 180 : 0 }}
-                    >
-                      <FiChevronDown size={22} />
-                    </motion.span>
-                  </button>
-                  <motion.div
-                    className="accordion-content overflow-hidden"
-                    initial={{ height: 0, opacity: 0 }}
-                    animate={{
-                      height: activeIndex === index ? "auto" : 0,
-                      opacity: activeIndex === index ? 1 : 0,
-                    }}
-                    transition={{ duration: 0.3, ease: "easeInOut" }}
-                  >
-                    <div
-                      className={`border-t px-4 pb-4 pt-3 text-base transition-colors duration-200 ${
-                        isDark ? "text-gray-300" : "text-gray-900"
-                      }`}
-                      style={{
-                        borderColor: isDark
-                          ? "rgba(139, 92, 246, 0.22)"
-                          : "rgba(139, 92, 246, 0.24)",
-                        color: isDark ? "#d1d5db" : "#111827",
                       }}
-                      dangerouslySetInnerHTML={{
-                        __html: faq.answer
-                          .replace(
-                            /<strong>/g,
-                            `<strong style="color: ${isDark ? "#f3f4f6" : "#000000"}; font-weight: 600;">`,
-                          )
-                          .replace(
-                            /<a /g,
-                            `<a style="color: ${isDark ? "#818cf8" : "#4f46e5"};" `,
-                          ),
+                      onClick={() => toggleAccordion(index)}
+                    >
+                      {faq.question}
+                      <motion.span
+                        className="transform transition-transform duration-300"
+                        animate={{ rotate: isExpanded ? 180 : 0 }}
+                      >
+                        <FiChevronDown size={22} />
+                      </motion.span>
+                    </button>
+                    <motion.div
+                      id={panelId}
+                      aria-labelledby={triggerId}
+                      className="accordion-content overflow-hidden"
+                      initial={{ height: 0, opacity: 0 }}
+                      animate={{
+                        height: isExpanded ? "auto" : 0,
+                        opacity: isExpanded ? 1 : 0,
                       }}
-                    />
+                      transition={{ duration: 0.3, ease: "easeInOut" }}
+                    >
+                      <div
+                        className={`border-t px-4 pb-4 pt-3 text-base transition-colors duration-200 ${
+                          isDark ? "text-gray-300" : "text-gray-900"
+                        }`}
+                        style={{
+                          borderColor: isDark
+                            ? "rgba(139, 92, 246, 0.22)"
+                            : "rgba(139, 92, 246, 0.24)",
+                          color: isDark ? "#d1d5db" : "#111827",
+                        }}
+                        dangerouslySetInnerHTML={{
+                          __html: faq.answer
+                            .replace(
+                              /<strong>/g,
+                              `<strong style="color: ${isDark ? "#f3f4f6" : "#000000"}; font-weight: 600;">`,
+                            )
+                            .replace(
+                              /<a /g,
+                              `<a style="color: ${isDark ? "#818cf8" : "#4f46e5"};" `,
+                            ),
+                        }}
+                      />
+                    </motion.div>
                   </motion.div>
-                </motion.div>
-              ))}
+                );
+              })}
             </div>
           </div>
         </div>
diff --git a/src/components/testimonials/TestimonialCard.tsx b/src/components/testimonials/TestimonialCard.tsx
index d7be5ecb..ede10889 100644
--- a/src/components/testimonials/TestimonialCard.tsx
+++ b/src/components/testimonials/TestimonialCard.tsx
@@ -59,7 +59,7 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
           <div className="relative">
             <div className="pointer-events-none absolute -inset-1 rounded-full bg-gradient-to-br from-purple-500/35 via-fuchsia-500/25 to-blue-500/35 blur-md" />
             <Avatar className="relative z-10 h-20 w-20 overflow-hidden border border-white/70 bg-white/70 shadow-[0_10px_30px_-12px_rgba(147,51,234,0.7)] ring-2 ring-purple-300/50">
-              <AvatarImage src={avatar} className="h-full w-full scale-300 object-cover object-center" />
+              <AvatarImage src={avatar} alt={`${name}'s avatar`} className="h-full w-full scale-[3] object-cover object-center" />
               <AvatarFallback className="bg-gradient-to-br from-purple-500 to-pink-500 text-white font-semibold">
                 {name.charAt(0)}
               </AvatarFallback>