From 56a85a87662822347b34a56eab1e9e84788225b1 Mon Sep 17 00:00:00 2001
From: Narottam <Narottam.bxr8845@gmail.com>
Date: Thu, 14 May 2026 14:42:36 +0530
Subject: [PATCH] fix: improve dark mode readability and UI consistency

---
 src/app/components/TopNavBar.tsx     | 10 +++---
 src/app/home/Features.tsx            | 13 ++++---
 src/app/home/QuestionsAndAnswers.tsx | 22 +++++++-----
 src/app/home/Steps.tsx               | 23 +++++++-----
 src/app/home/Testimonials.tsx        | 52 ++++++++++++++++++++--------
 src/app/layout.tsx                   |  2 +-
 6 files changed, 81 insertions(+), 41 deletions(-)

diff --git a/src/app/components/TopNavBar.tsx b/src/app/components/TopNavBar.tsx
index c781d58..a69b698 100644
--- a/src/app/components/TopNavBar.tsx
+++ b/src/app/components/TopNavBar.tsx
@@ -47,11 +47,11 @@ export const TopNavBar = () => {
           <span className="sr-only">OpenResume</span>
 
           <Image
-            src={logoSrc}
-            alt="OpenResume Logo"
-            className="h-8 w-full"
-            priority
-          />
+  src={logoSrc}
+  alt="OpenResume Logo"
+  className="h-8 w-full dark:invert"
+  priority
+/>
         </Link>
 
         <nav
diff --git a/src/app/home/Features.tsx b/src/app/home/Features.tsx
index dd812f6..346a02b 100644
--- a/src/app/home/Features.tsx
+++ b/src/app/home/Features.tsx
@@ -43,16 +43,19 @@ export const Features = () => {
         <dl className="grid grid-cols-1 justify-items-center gap-y-8 lg:grid-cols-2 lg:gap-x-6 lg:gap-y-16">
           {FEATURES.map(({ src, title, text }) => (
             <div className="px-2" key={title}>
-              <div className="relative w-96 self-center pl-16">
-                <dt className="text-2xl font-bold">
+              <div className="relative w-96 self-center rounded-2xl p-5 pl-16 transition-colors duration-300 dark:bg-gray-900/60">
+                <dt className="text-2xl font-bold text-gray-900 dark:text-white">
                   <Image
                     src={src}
-                    className="absolute left-0 top-1 h-12 w-12"
+                    className="absolute left-4 top-5 h-12 w-12"
                     alt="Feature icon"
                   />
                   {title}
                 </dt>
-                <dd className="mt-2">{text}</dd>
+
+                <dd className="mt-2 leading-relaxed text-gray-600 dark:text-gray-300">
+                  {text}
+                </dd>
               </div>
             </div>
           ))}
@@ -60,4 +63,4 @@ export const Features = () => {
       </div>
     </section>
   );
-};
+};
\ No newline at end of file
diff --git a/src/app/home/QuestionsAndAnswers.tsx b/src/app/home/QuestionsAndAnswers.tsx
index 4f3167c..db38d9d 100644
--- a/src/app/home/QuestionsAndAnswers.tsx
+++ b/src/app/home/QuestionsAndAnswers.tsx
@@ -39,7 +39,7 @@ const QAS = [
           stands out with 2 distinctive features:
         </p>{" "}
         <p>
-          <span className="font-semibold">
+          <span className="font-semibold text-gray-800 dark:text-gray-100">
             1. OpenResume is designed specifically for the U.S. job market and
             best practices.
           </span>
@@ -55,7 +55,7 @@ const QAS = [
           single column design works best for AST. <br />{" "}
         </p>
         <p>
-          <span className="font-semibold">
+          <span className="font-semibold text-gray-800 dark:text-gray-100">
             2. OpenResume is super privacy focus.
           </span>{" "}
           <br />
@@ -124,13 +124,19 @@ const QAS = [
 
 export const QuestionsAndAnswers = () => {
   return (
-    <section className="mx-auto max-w-3xl divide-y divide-gray-300 lg:mt-4 lg:px-2">
-      <h2 className="text-center text-3xl font-bold">Questions & Answers</h2>
-      <div className="mt-6 divide-y divide-gray-300">
+    <section className="mx-auto max-w-3xl divide-y divide-gray-300 rounded-2xl px-4 py-10 text-gray-900 transition-colors duration-300 dark:divide-gray-700 dark:text-gray-100 lg:mt-4 lg:px-6">
+      <h2 className="text-center text-3xl font-bold text-gray-900 dark:text-white">
+        Questions & Answers
+      </h2>
+
+      <div className="mt-6 divide-y divide-gray-300 dark:divide-gray-700">
         {QAS.map(({ question, answer }) => (
           <div key={question} className="py-6">
-            <h3 className="font-semibold leading-7">{question}</h3>
-            <div className="mt-3 grid gap-2 leading-7 text-gray-600">
+            <h3 className="font-semibold leading-7 text-gray-900 dark:text-white">
+              {question}
+            </h3>
+
+            <div className="mt-3 grid gap-3 leading-7 text-gray-600 dark:text-gray-300">
               {answer}
             </div>
           </div>
@@ -138,4 +144,4 @@ export const QuestionsAndAnswers = () => {
       </div>
     </section>
   );
-};
+};
\ No newline at end of file
diff --git a/src/app/home/Steps.tsx b/src/app/home/Steps.tsx
index d6787fd..5f8c9b9 100644
--- a/src/app/home/Steps.tsx
+++ b/src/app/home/Steps.tsx
@@ -6,27 +6,34 @@ const STEPS = [
 
 export const Steps = () => {
   return (
-    <section className="mx-auto mt-8 rounded-2xl bg-sky-50 bg-dot px-8 pb-12 pt-10 lg:mt-2">
-      <h1 className="text-center text-3xl font-bold">3 Simple Steps</h1>
+    <section className="mx-auto mt-8 rounded-2xl bg-sky-50 bg-dot px-8 pb-12 pt-10 dark:bg-gray-900 lg:mt-2">
+      <h1 className="text-center text-3xl font-bold text-gray-900 dark:text-white">
+        3 Simple Steps
+      </h1>
+
       <div className="mt-8 flex justify-center">
         <dl className="flex flex-col gap-y-10 lg:flex-row lg:justify-center lg:gap-x-20">
           {STEPS.map(({ title, text }, idx) => (
             <div className="relative self-start pl-14" key={idx}>
-              <dt className="text-lg font-bold">
-                <div className="bg-primary absolute left-0 top-1 flex h-10 w-10 select-none items-center justify-center rounded-full p-[3.5px] opacity-80">
-                  <div className="flex h-full w-full items-center justify-center rounded-full bg-white">
-                    <div className="text-primary -mt-0.5 text-2xl">
+              <dt className="text-lg font-bold text-gray-900 dark:text-white">
+                <div className="bg-primary absolute left-0 top-1 flex h-10 w-10 select-none items-center justify-center rounded-full p-[3.5px] opacity-90">
+                  <div className="flex h-full w-full items-center justify-center rounded-full bg-white dark:bg-gray-800">
+                    <div className="text-primary -mt-0.5 text-2xl font-semibold dark:text-sky-300">
                       {idx + 1}
                     </div>
                   </div>
                 </div>
+
                 {title}
               </dt>
-              <dd>{text}</dd>
+
+              <dd className="text-gray-600 dark:text-gray-300">
+                {text}
+              </dd>
             </div>
           ))}
         </dl>
       </div>
     </section>
   );
-};
+};
\ No newline at end of file
diff --git a/src/app/home/Testimonials.tsx b/src/app/home/Testimonials.tsx
index f141ca8..b72cf53 100644
--- a/src/app/home/Testimonials.tsx
+++ b/src/app/home/Testimonials.tsx
@@ -33,17 +33,21 @@ const TESTIMONIALS = [
 
 const LG_TESTIMONIALS_CLASSNAMES = [
   "z-10",
-  "translate-x-44 translate-y-24 opacity-40",
-  "translate-x-32 -translate-y-28 opacity-40",
+  "translate-x-44 translate-y-24 opacity-70",
+  "translate-x-32 -translate-y-28 opacity-70",
 ];
+
 const SM_TESTIMONIALS_CLASSNAMES = ["z-10", "opacity-0", "opacity-0"];
-const ROTATION_INTERVAL_MS = 8 * 1000; // 8s
+
+const ROTATION_INTERVAL_MS = 8 * 1000;
 
 export const Testimonials = ({ children }: { children?: React.ReactNode }) => {
   const [testimonialsClassNames, setTestimonialsClassNames] = useState(
     LG_TESTIMONIALS_CLASSNAMES
   );
+
   const isHoveredOnTestimonial = useRef(false);
+
   useEffect(() => {
     const intervalId = setInterval(() => {
       if (!isHoveredOnTestimonial.current) {
@@ -52,10 +56,12 @@ export const Testimonials = ({ children }: { children?: React.ReactNode }) => {
         });
       }
     }, ROTATION_INTERVAL_MS);
+
     return () => clearInterval(intervalId);
   }, []);
 
   const { isLg } = useTailwindBreakpoints();
+
   useEffect(() => {
     setTestimonialsClassNames(
       isLg ? LG_TESTIMONIALS_CLASSNAMES : SM_TESTIMONIALS_CLASSNAMES
@@ -64,19 +70,21 @@ export const Testimonials = ({ children }: { children?: React.ReactNode }) => {
 
   return (
     <section className="mx-auto -mt-2 px-8 pb-24">
-      <h2 className="mb-8 text-center text-3xl font-bold">
+      <h2 className="mb-8 text-center text-3xl font-bold text-gray-900 dark:text-white">
         People{" "}
         <Image src={heartSrc} alt="love" className="-mt-1 inline-block w-7" />{" "}
         OpenResume
       </h2>
+
       <div className="mx-auto mt-10 h-[235px] max-w-lg lg:h-[400px] lg:pt-28">
         <div className="relative lg:ml-[-50px]">
           {TESTIMONIALS.map(({ src, quote, name, title }, idx) => {
             const className = testimonialsClassNames[idx];
+
             return (
               <div
                 key={idx}
-                className={`bg-primary absolute max-w-lg rounded-[1.7rem] bg-opacity-30 shadow-md transition-all duration-1000 ease-linear ${className}`}
+                className={`bg-primary absolute max-w-lg rounded-[1.7rem] bg-opacity-30 shadow-lg transition-all duration-1000 ease-linear dark:shadow-black/40 ${className}`}
                 onMouseEnter={() => {
                   if (className === "z-10") {
                     isHoveredOnTestimonial.current = true;
@@ -88,38 +96,53 @@ export const Testimonials = ({ children }: { children?: React.ReactNode }) => {
                   }
                 }}
               >
-                <figure className="m-1 flex gap-5 rounded-3xl bg-white p-5 text-gray-900 lg:p-7">
+                <figure className="m-1 flex gap-5 rounded-3xl bg-white p-5 text-gray-900 dark:bg-gray-800 dark:text-gray-100 lg:p-7">
                   <Image
                     className="hidden h-24 w-24 select-none rounded-full lg:block"
                     src={src}
                     alt="profile"
                   />
+
                   <div>
                     <blockquote>
-                      <p className="before:content-['“'] after:content-['”']">
+                      <p className="leading-relaxed before:content-['“'] after:content-['”']">
                         {quote}
                       </p>
                     </blockquote>
+
                     <figcaption className="mt-3">
                       <div className="hidden gap-2 lg:flex">
-                        <div className="font-semibold">{name}</div>
+                        <div className="font-semibold text-gray-900 dark:text-white">
+                          {name}
+                        </div>
+
                         <div
-                          className="select-none text-gray-700"
+                          className="select-none text-gray-500 dark:text-gray-400"
                           aria-hidden="true"
                         >
                           •
                         </div>
-                        <div className="text-gray-600">{title}</div>
+
+                        <div className="text-gray-600 dark:text-gray-300">
+                          {title}
+                        </div>
                       </div>
+
                       <div className="flex gap-4 lg:hidden">
                         <Image
-                          className=" block h-12 w-12 select-none rounded-full"
+                          className="block h-12 w-12 select-none rounded-full"
                           src={src}
                           alt="profile"
                         />
+
                         <div>
-                          <div className="font-semibold">{name}</div>
-                          <div className="text-gray-600">{title}</div>
+                          <div className="font-semibold text-gray-900 dark:text-white">
+                            {name}
+                          </div>
+
+                          <div className="text-gray-600 dark:text-gray-300">
+                            {title}
+                          </div>
                         </div>
                       </div>
                     </figcaption>
@@ -130,7 +153,8 @@ export const Testimonials = ({ children }: { children?: React.ReactNode }) => {
           })}
         </div>
       </div>
+
       {children}
     </section>
   );
-};
+};
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 249c39f..01ea162 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -15,7 +15,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className="bg-white text-gray-900 dark:bg-gray-950 dark:text-white">
+      <body className="min-h-screen bg-white text-gray-900 transition-colors duration-300 dark:bg-gray-950 dark:text-gray-100">
         <TopNavBar />
         {children}
         <Analytics />