Hover effect of About US page is fixed #266

src/App.tsx

@@ -7,7 +7,7 @@ import {
   useLocation,
 } from 'react-router-dom';
 
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+//import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import ScrollProgressBar from './components/ScrollProgress'; // Import your ScrollProgressBar component
 import PricingDetailPage from './components/PricingDetailPage';
 
@@ -39,10 +39,10 @@ import ContactUsDetailsPage from './components/ContactUsDetailsPage';
 import PaginationDetails from './components/PaginationDetails';
 import TestimonialDetails from './components/TestimonialDetails';
 import Footer from './components/Footer';
-  import Statistic from './components/StatisticDetails';
-  import GalleryDetailsPage from './components/GalleryDetailsPage';
-  import Checkbox from './components/Checkbox';
- 
+import Statistic from './components/StatisticDetails';
+import GalleryDetailsPage from './components/GalleryDetailsPage';
+import Checkbox from './components/Checkbox';
+
 const App: React.FC = () => {
   return (
     <Router>
@@ -79,17 +79,14 @@ const App: React.FC = () => {
         <Route path='/contact-details' element={<ContactUsDetailsPage />} />
         <Route path='/pagination-details' element={<PaginationDetails />} />
         <Route path='/testimonial-details' element={<TestimonialDetails />} />
-          <Route path='/statistic-details' element={<Statistic />} />
-          <Route path='/gallery-details' element={<GalleryDetailsPage />} />
+        <Route path='/statistic-details' element={<Statistic />} />
+        <Route path='/gallery-details' element={<GalleryDetailsPage />} />
 
-
         <Route path='/checkbox' element={<Checkbox />} />
- 
+
         <Route path='*' element={<NotFoundPage />} />
       </Routes>
-
       <ConditionalFooter />
-
     </Router>
   );
 };

src/components/AboutUsPage.tsx

@@ -73,7 +73,8 @@ const AboutUsHeader = styled.div`
   }
 
   h1:hover {
-    transform: scale(1.1); // Scale up the heading on hover
+    transform: scale(1.2) rotate(0deg); // Scale and rotate for dynamic effect
+    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.5); // Stronger glow
   }
 
   p {
@@ -100,7 +101,7 @@ const AboutUsContent = styled.section`
   margin-bottom: 30px; // Space below the content section
   display: flex; // Flexbox for vertical layout
   flex-direction: column; // Arrange children in a column
-  gap: 20px; // Space between sections
+  gap: 25px; // Space between sections
 
   h2 {
     font-size: 2em; // Increase font size for subheadings
@@ -111,9 +112,10 @@ const AboutUsContent = styled.section`
   }
 
   h2:hover {
-    color: #2980b9; // Change color on hover
+    color: #ffffff; // Slightly darker blue on hover
+    transform: translateX(5px); // Slide right slightly
+    //text-shadow: 1px 1px 5px rgba(52, 152, 219, 0.8); // Glow effect
   }
-
   p {
     font-size: 1.2em; // Larger font size for paragraph text
     color: #f9f9f9; // Light gray color for text

src/components/Checkbox.tsx

@@ -1,20 +1,19 @@
 import React, { useState } from 'react';
-
-import CheckboxDetails from './CheckboxDetails';
+import CheckboxDetails from './CheckboxDetails'; // Ensure the path is correct
 
 const Checkbox: React.FC = () => {
   const [isChecked, setIsChecked] = useState(false);
 
   return (
     <div>
       <CheckboxDetails
-        checked={isChecked}
-        onChange={checked => setIsChecked(checked)}
-        label='I agree to the terms'
-        size='medium'
-        borderColor='#4A90E2'
-        backgroundColor='#E5F1FB'
-        checkColor='#007bff'
+      //checked={setIsChecked}
+      //onChange={setIsChecked} // Directly pass setIsChecked
+      //label="I agree to the terms"
+      //size="medium" // Pass size if necessary
+      //borderColor="#4A90E2" // Pass border color
+      //backgroundColor="#fff" // Pass background color
+      //checkColor="#000" // Pass check color
       />
     </div>
   );

src/components/CheckboxDetails.tsx

@@ -4,20 +4,18 @@ import { ArrowLeft, Copy, Check } from 'lucide-react';
 import BackToTopButton from './BackToTop';
 
 // Custom Checkbox component
-const Checkbox = ({
-  checked,
-  onChange,
-  label,
-}: {
+interface CheckboxProps {
   checked: boolean;
-  onChange: () => void;
+  onChange: (checked: boolean) => void; // Updated to accept boolean
   label: string;
-}) => (
+}
+
+const Checkbox: React.FC<CheckboxProps> = ({ checked, onChange, label }) => (
   <label className='inline-flex items-center'>
     <input
       type='checkbox'
       checked={checked}
-      onChange={onChange}
+      onChange={() => onChange(!checked)} // Toggle checked state
       className='form-checkbox h-5 w-5 text-blue-600 rounded'
     />
     <span className='ml-2 text-white'>{label}</span>
@@ -29,11 +27,11 @@ const CheckboxDetailsPage: React.FC = () => {
   const [copiedStates, setCopiedStates] = useState<{ [key: string]: boolean }>(
     {},
   );
-  const [isChecked, setIsChecked] = useState<any>(false);
+  const [isChecked, setIsChecked] = useState(false); // Changed to boolean
 
   const getGlassyClasses = (opacity = 20) => {
     return `backdrop-filter backdrop-blur-lg bg-white bg-opacity-${opacity} 
-  border border-white border-opacity-20 rounded-lg shadow-lg transition-all duration-300`;
+    border border-white border-opacity-20 rounded-lg shadow-lg transition-all duration-300`;
   };
 
   const copyToClipboard = (text: string, key: string) => {
@@ -79,7 +77,6 @@ const CheckboxDetailsPage: React.FC = () => {
   checked={isChecked} 
   onChange={() => setIsChecked(!isChecked)} 
   label="Custom Styled Checkbox" 
-  className={getGlassyClasses()} 
 />`;
 
   const propsTable = (
@@ -165,7 +162,7 @@ const CheckboxDetailsPage: React.FC = () => {
           <div className='relative mt-8'>
             <Checkbox
               checked={isChecked}
-              onChange={() => setIsChecked(!isChecked)}
+              onChange={setIsChecked} // Directly pass setIsChecked
               label='Custom Styled Checkbox'
             />
             <pre className='bg-gray-800 text-white p-6 rounded-lg mt-4 overflow-x-auto whitespace-pre-wrap max-sm:text-[0.55rem]'>

src/components/Footer.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import GoogleTranslate from './GoogleTranslator';
 
-
 const Footer: React.FC = () => {
   return (
     <footer className='glass-footer'>
@@ -27,6 +26,7 @@ const Footer: React.FC = () => {
           <GoogleTranslate />
         </div>
       </div>
+
       <div className='footer-bottom'>
         <a
           href='https://github.com/Jaishree2310/GlassyUI-Components'
@@ -128,31 +128,7 @@ const Footer: React.FC = () => {
           }
         }
       `}</style>
-        <div>
-          <p
-            style={{
-              fontSize: '14px',
-              color: '#fff',
-              position: 'relative',
-              right: '-300px',
-            }}
-          >
-            &copy; 2024 GlassyUI. All rights reserved.
-          </p>
-          <div
-            style={{
-              fontSize: '14px',
-              color: '#fff',
-              position: 'relative',
-              right: '-300px',
-              top: '10px',
-            }}
-          >
-            <GoogleTranslate />
-          </div>
-        </div>
-      </footer>
-    </>
+    </footer>
   );
 };