Merge pull request #65 from nishant0708/hover

[BUG]: Visiblity issue in Benefits section on hover #64
harmeetsingh11 · Jun 7, 2024 · 4262431 · 4262431
2 parents 4585ee0 + 2f3ab12
commit 4262431
Showing 1 changed file with 24 additions and 8 deletions.
diff --git a/src/components/Benefits.tsx b/src/components/Benefits.tsx
@@ -12,19 +12,35 @@ const AboutUs = () => {
         <section className="bg-white dark:bg-gray-900" id="benefits">
             <div className='flex flex-col gap-4'>
                 <div className='justify-center items-center mt-8 ml-8 mb-8 grid md:grid-cols-2 gap-8 md:gap-0'>
-                    <div className='w-11/12 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg bg-gradient-primary hover:text-black dark:bg-gradient-primary p-6' onMouseOver={() => setCodeHovered(true)} onMouseLeave={() => setCodeHovered(false)}>
-                        <div className='flex items-center gap-4'>
+                    <div 
+                        className='w-11/12 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg bg-gradient-primary p-6 hover:text-black dark:hover:text-black' 
+                        onMouseOver={() => setCodeHovered(true)} 
+                        onMouseLeave={() => setCodeHovered(false)}
+                    >
+                        <div className={`flex items-center gap-4 ${codeHovered ? 'text-black dark:text-black' : ''}`}>
                             <img src={codeHovered ? codehover : code} alt="" className='ml-4 mt-4 w-14 h-14' />
-                            <div className='text-gray-900 dark:text-white text-2xl font-bold mb-2'>Improved Readability and Maintainability</div>
+                            <div className={`text-gray-900 dark:text-white text-2xl font-bold mb-2 ${codeHovered ? 'text-black dark:text-black' : ''}`}>
+                                Improved Readability and Maintainability
+                            </div>
                         </div>
-                        <p className='text-lg font-normal text-gray-700 dark:text-gray-400 mb-4 mt-2 text-justify'>Refactoring code is essential for enhancing readability and maintainability. Clear and well-organized code makes it easier for developers to understand the logic, reducing the chances of errors and facilitating collaboration. By refactoring, you invest in code that is not only functional but also sustainable over time, making future modifications and updates more efficient.</p>
+                        <p className={`text-lg font-normal text-gray-700 dark:text-gray-400 mb-4 mt-2 text-justify ${codeHovered ? 'text-black dark:text-black' : ''}`}>
+                            Refactoring code is essential for enhancing readability and maintainability. Clear and well-organized code makes it easier for developers to understand the logic, reducing the chances of errors and facilitating collaboration. By refactoring, you invest in code that is not only functional but also sustainable over time, making future modifications and updates more efficient.
+                        </p>
                     </div>
-                    <div className='about-us-product w-11/12 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg bg-gradient-secondary hover:text-black dark:bg-gradient-secondary p-6' onMouseOver={() => setPerformanceHovered(true)} onMouseLeave={() => setPerformanceHovered(false)}>
-                        <div className='flex items-center gap-4'>
+                    <div 
+                        className='about-us-product w-11/12 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg bg-gradient-secondary p-6 hover:text-black dark:hover:text-black' 
+                        onMouseOver={() => setPerformanceHovered(true)} 
+                        onMouseLeave={() => setPerformanceHovered(false)}
+                    >
+                        <div className={`flex items-center gap-4 ${performanceHovered ? 'text-black dark:text-black' : ''}`}>
                             <img src={performanceHovered ? performancehover : performance} alt="" className='ml-4 mt-4 w-14 h-14' />
-                            <div className='text-gray-900 dark:text-white text-xl font-bold mb-2'>Enhanced Performance and Efficiency</div>
+                            <div className={`text-gray-900 dark:text-white text-xl font-bold mb-2  ${performanceHovered ? 'text-black dark:text-black' : ''}`}>
+                                Enhanced Performance and Efficiency
+                            </div>
                         </div>
-                        <p className='text-lg font-normal text-gray-700 dark:text-gray-400 mb-4 mt-2 text-justify'>Code refactoring plays a crucial role in improving the performance and efficiency of your application. Through optimizations and restructuring, you can eliminate bottlenecks, reduce redundancy, and enhance overall system performance. Refactored code tends to be more streamlined and optimized, leading to a more responsive and scalable software solution.</p>
+                        <p className={`text-lg font-normal text-gray-700 dark:text-gray-400 mb-4 mt-2 text-justify ${performanceHovered ? 'text-black dark:text-black' : ''}`}>
+                            Code refactoring plays a crucial role in improving the performance and efficiency of your application. Through optimizations and restructuring, you can eliminate bottlenecks, reduce redundancy, and enhance overall system performance. Refactored code tends to be more streamlined and optimized, leading to a more responsive and scalable software solution.
+                        </p>
                     </div>
                 </div>
             </div>