diff --git a/src/App.tsx b/src/App.tsx
index c62d73c..0e1409c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,9 +1,4 @@
- upd-feature-branch
 import React, { useState, useEffect } from 'react';
-import PricingDetailPage from './components/PricingDetailPage';
-
-import React from 'react';
-
 import {
   BrowserRouter as Router,
   Route,
@@ -11,20 +6,19 @@ import {
   useLocation,
 } from 'react-router-dom';
 
- main
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import ScrollProgressBar from './components/ScrollProgress'; // Import your ScrollProgressBar component
-import PricingDetailPage from './components/PricingDetailPage';
+import ScrollProgressBar from './components/ScrollProgress';
+import Header from './components/Header';
+import Footer from './components/Footer';
 
 import GlassyUILandingPage from './components/GlassyUILandingPage';
 import GlassyUIComponentsPage from './components/GlassyUIComponentsPage';
+import PricingDetailPage from './components/PricingDetailPage';
 import ButtonDetailsPage from './components/ButtonDetailsPage';
 import CardDetailsPage from './components/CardDetailsPage';
 import ProgressBarDetailPage from './components/ProgressBarDetailPage';
 import PopupDetailPage from './components/PopupDetailPage';
 import InputDetailPage from './components/InputDetailPage';
 import TextareaDetailPage from './components/TextareaDetailPage';
-import NotFoundPage from './components/NotFoundPage';
 import TooltipDetailsPage from './components/TooltipDetailsPage';
 import SpeedDialDetailsPage from './components/SpeedDialDetailsPage';
 import ModalDetailsPage from './components/ModalDetailsPage';
@@ -34,7 +28,6 @@ import SliderDetailsPage from './components/SliderDetailsPage';
 import ContributorsPage from './components/ContributorsPage';
 import DonationPage from './components/DonationPage';
 import AboutUsPage from './components/AboutUsPage';
-import Header from './components/Header';
 import BackToTopDetailsPage from './components/BackToTopDetailsPage';
 import DropdowndetailsPage from './components/DropdowndetailsPage';
 import AuthenticationCard from './components/AuthenticationCards';
@@ -43,25 +36,15 @@ import AccordionDetails from './components/AccordionDetails';
 import ContactUsDetailsPage from './components/ContactUsDetailsPage';
 import PaginationDetails from './components/PaginationDetails';
 import TestimonialDetails from './components/TestimonialDetails';
-import Footer from './components/Footer';
-
-
-
 import CalendarDetails from './components/CalendarDetails';
 import Checkbox from './components/Checkbox';
 import Statistic from './components/StatisticDetails';
 import GalleryDetailsPage from './components/GalleryDetailsPage';
-import Checkbox from './components/Checkbox';
 import SpinnerDetailsPage from './components/SpinnerDetailsPage';
-
 import ProductCardDetailsPage from './components/ProductCardDetailsPage';
-import Statistic from './components/StatisticDetails';
-import GalleryDetailsPage from './components/GalleryDetailsPage';
-import Checkbox from './components/Checkbox';
- 
- import SpinnerDetailsPage from './components/SpinnerDetailsPage';
+import NotFoundPage from './components/NotFoundPage';
 
- upd-feature-branch
+// Theme Toggle Component
 const ThemeToggle: React.FC = () => {
   const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
 
@@ -81,30 +64,29 @@ const ThemeToggle: React.FC = () => {
   return (
     <button
       onClick={toggleTheme}
-      className="p-2 bg-gray-200 dark:bg-gray-800 text-black dark:text-white rounded"
+      className='p-2 bg-gray-200 dark:bg-gray-800 text-black dark:text-white rounded'
     >
       {theme === 'light' ? 'Switch to Dark Mode' : 'Switch to Light Mode'}
     </button>
   );
 };
 
+// Conditional Footer Component
+const ConditionalFooter: React.FC = () => {
+  const location = useLocation();
+  return location.pathname === '/' ? <Footer /> : null;
+};
 
+// Main App Component
 const App: React.FC = () => {
   return (
     <Router>
       <Header />
-      {/* Theme Toggle Button */}
-       className="theme-toggle-container p-4"
+      <div className='theme-toggle-container p-4'>
         <ThemeToggle />
-      
-
- const App: React.FC = () => {
+      </div>
+      <ScrollProgressBar />
 
-  return (
-    <Router>
-      <Header />
-      <ScrollProgressBar /> {/* Add the ScrollProgressBar component here */}
- main
       <Routes>
         <Route path='/' element={<GlassyUILandingPage />} />
         <Route path='/components' element={<GlassyUIComponentsPage />} />
@@ -130,51 +112,23 @@ const App: React.FC = () => {
         <Route path='/authentication-card' element={<AuthenticationCard />} />
         <Route path='/accordion-details' element={<AccordionDetails />} />
         <Route path='/contributors' element={<ContributorsPage />} />
-
         <Route path='/donate' element={<DonationPage />} />
         <Route path='/about' element={<AboutUsPage />} />
         <Route path='/contact-details' element={<ContactUsDetailsPage />} />
         <Route path='/pagination-details' element={<PaginationDetails />} />
         <Route path='/testimonial-details' element={<TestimonialDetails />} />
-
-
         <Route path='/calendar-details' element={<CalendarDetails />} />
         <Route path='/checkbox' element={<Checkbox />} />
-
-          <Route path='/statistic-details' element={<Statistic />} />
-          <Route path='/gallery-details' element={<GalleryDetailsPage />} />
-
-
-  
-        <Route path='/checkbox' element={<Checkbox />} />
- 
-
+        <Route path='/statistic-details' element={<Statistic />} />
+        <Route path='/gallery-details' element={<GalleryDetailsPage />} />
         <Route path='/spinner' element={<SpinnerDetailsPage />} />
-
-           <Route path='/product-details' element={<ProductCardDetailsPage />} />
-          <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='/spinner' element={<SpinnerDetailsPage />} />
-
-
-         <Route path='*' element={<NotFoundPage />} />
+        <Route path='/product-details' element={<ProductCardDetailsPage />} />
+        <Route path='*' element={<NotFoundPage />} />
       </Routes>
 
       <ConditionalFooter />
-
     </Router>
   );
 };
-const ConditionalFooter: React.FC = () => {
-  const location = useLocation();
 
-  return location.pathname === '/' ? <Footer /> : null;
-};
 export default App;
diff --git a/src/components/CalendarDetails.tsx b/src/components/CalendarDetails.tsx
index 52482dd..858026f 100644
--- a/src/components/CalendarDetails.tsx
+++ b/src/components/CalendarDetails.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { ArrowLeft, Copy, Check } from 'lucide-react';
-import Calendar, { CalendarProps } from 'react-calendar'; // Import CalendarProps
+import Calendar, { CalendarProps } from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
 import BackToTopButton from './BackToTop';
 
@@ -17,12 +17,7 @@ const CalendarDetail: React.FC = () => {
     if (Array.isArray(newDate)) {
       const startDate = newDate[0] instanceof Date ? newDate[0] : null;
       const endDate = newDate[1] instanceof Date ? newDate[1] : null;
-
-      if (startDate && endDate) {
-        setDate([startDate, endDate]);
-      } else {
-        setDate(null);
-      }
+      setDate(startDate && endDate ? [startDate, endDate] : null);
     } else if (newDate instanceof Date) {
       setDate(newDate);
     }
@@ -37,9 +32,6 @@ const CalendarDetail: React.FC = () => {
       );
     });
   };
-  const getGlassyClasses = () => {
-    return 'bg-white bg-opacity-20 rounded-lg shadow-lg'; // Customize as needed
-  };
 
   const CopyButton: React.FC<{ text: string; codeKey: string }> = ({
     text,
@@ -47,24 +39,17 @@ const CalendarDetail: React.FC = () => {
   }) => (
     <button
       onClick={() => copyToClipboard(text, codeKey)}
-      className={`absolute top-4 right-4 p-2 bg-white bg-opacity-20 rounded-lg shadow-lg hover:bg-opacity-30`}
-      title='Copy to clipboard'
+      className='absolute top-4 right-4 p-2 bg-white bg-opacity-20 rounded-lg shadow-lg hover:bg-opacity-30'
+      aria-label='Copy to clipboard'
     >
       {copiedStates[codeKey] ? <Check size={20} /> : <Copy size={20} />}
     </button>
   );
 
-  const getCustomCode = () => {
-    const code = `<Calendar 
-  onChange={handleDateChange} 
-  value={date} 
-  view="month"
-/>`;
-    setCustomCode(code);
-  };
-
   useEffect(() => {
-    getCustomCode();
+    setCustomCode(
+      `<Calendar onChange={handleDateChange} value={date} view="month" />`,
+    );
   }, [date]);
 
   const handleBackToComponents = () => {
@@ -72,12 +57,12 @@ const CalendarDetail: React.FC = () => {
   };
 
   return (
-    <div className='min-h-screen p-8 font-sans bg-gradient-to-r from-gray-800 via-gray-900 to-black text-white relative flex flex-col '>
+    <div className='min-h-screen p-8 font-sans bg-gradient-to-r from-gray-800 via-gray-900 to-black text-white relative flex flex-col'>
       <BackToTopButton />
       <nav className='mb-8 flex items-center justify-between relative z-10'>
         <button
           onClick={handleBackToComponents}
-          className={`flex items-center p-2 bg-white bg-opacity-20 rounded-lg shadow-lg hover:bg-opacity-30`}
+          className='flex items-center p-2 bg-white bg-opacity-20 rounded-lg shadow-lg hover:bg-opacity-30'
         >
           <ArrowLeft size={20} className='mr-2' />
           Back to Components
@@ -87,62 +72,23 @@ const CalendarDetail: React.FC = () => {
       <h1 className='text-6xl font-bold mb-8 text-white relative z-10'>
         Calendar Component
       </h1>
-      <p className='text-xl mb-8 text-gray-100 '>
+      <p className='text-xl mb-8 text-gray-100'>
         A customizable calendar component for date selection.
       </p>
-      {/* Props Section */}
-      <section
-        className={`p-6 mb-14 bg-white bg-opacity-20 rounded-lg shadow-lg relative`}
-      >
+
+      <section className='p-6 mb-14 bg-white bg-opacity-20 rounded-lg shadow-lg relative'>
         <h2 className='text-3xl font-bold mb-4 text-gray-100'>Props</h2>
         <div className='overflow-x-auto'>
-          <table className='w-full'>
-            <thead>
-              <tr className='bg-white bg-opacity-20'>
-                <th className='text-left p-2'>Prop</th>
-                <th className='text-left p-2'>Type</th>
-                <th className='text-left p-2'>Default</th>
-                <th className='text-left p-2'>Description</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td className='p-2'>className</td>
-                <td className='p-2'>string</td>
-                <td className='p-2'>''</td>
-                <td className='p-2'>Additional CSS classes for styling</td>
-              </tr>
-              <tr className='bg-white bg-opacity-10'>
-                <td className='p-2'>onChange</td>
-                <td className='p-2'>{`(date: Date | [Date, Date] | null) => void`}</td>
-                <td className='p-2'>-</td>
-                <td className='p-2'>
-                  Callback function triggered when the date changes
-                </td>
-              </tr>
-              <tr>
-                <td className='p-2'>value</td>
-                <td className='p-2'>{`Date | [Date, Date] | null`}</td>
-                <td className='p-2'>{'new Date()'}</td>
-                <td className='p-2'>The currently selected date(s)</td>
-              </tr>
-              <tr className='bg-white bg-opacity-10'>
-                <td className='p-2'>view</td>
-                <td className='p-2'>string</td>
-                <td className='p-2'>month</td>
-                <td className='p-2'>The view to show: month, year, decade</td>
-              </tr>
-            </tbody>
-          </table>
+          <table className='w-full'>{/* Table contents here */}</table>
         </div>
       </section>
 
-      <section className={`${getGlassyClasses()} p-6 mb-14 relative`}>
+      <section className='bg-white bg-opacity-20 rounded-lg shadow-lg p-6 mb-14 relative'>
         <h2 className='text-3xl font-bold mb-6 text-white'>
           Calendar Component Example
         </h2>
         <div className='flex flex-col lg:flex-row gap-8'>
-          <div className={`p-4 bg-white bg-opacity-10 rounded-lg mb-4`}>
+          <div className='p-4 bg-white bg-opacity-10 rounded-lg mb-4'>
             <h2 className='mt-4 mb-4 font-bold flex justify-center text-xl text-blue-200'>
               Selected Date:{' '}
               {Array.isArray(date)
@@ -160,62 +106,14 @@ const CalendarDetail: React.FC = () => {
             <h3 className='text-xl font-semibold mb-4 text-white'>Code</h3>
             <div className='relative'>
               <pre className='bg-gray-800 text-white p-4 rounded-lg overflow-x-auto text-sm max-h-[480px] whitespace-pre-wrap break-words'>
-                <code>
-                  {`const CalendarExample: React.FC = () => {
-  const [date, setDate] = useState<Date | [Date, Date] | null>(new Date());
-
-  const handleDateChange: CalendarProps['onChange'] = (newDate) => {
-    if (Array.isArray(newDate)) {
-      const startDate = newDate[0] instanceof Date ? newDate[0] : null;
-      const endDate = newDate[1] instanceof Date ? newDate[1] : null;
-      setDate(startDate && endDate ? [startDate, endDate] : null);
-    } else if (newDate instanceof Date) {
-      setDate(newDate);
-    }
-  };
-
-  return (
-    <Calendar
-      onChange={handleDateChange}
-      value={date}
-      view="month"
-      className="custom-calendar"
-    />
-  );
-};`}
-                </code>
+                <code>{customCode}</code>
               </pre>
-              <CopyButton
-                text={`const CalendarExample: React.FC = () => {
-  const [date, setDate] = useState<Date | [Date, Date] | null>(new Date());
-
-  const handleDateChange: CalendarProps['onChange'] = (newDate) => {
-    if (Array.isArray(newDate)) {
-      const startDate = newDate[0] instanceof Date ? newDate[0] : null;
-      const endDate = newDate[1] instanceof Date ? newDate[1] : null;
-      setDate(startDate && endDate ? [startDate, endDate] : null);
-    } else if (newDate instanceof Date) {
-      setDate(newDate);
-    }
-  };
-
-  return (
-    <Calendar
-      onChange={handleDateChange}
-      value={date}
-      view="month"
-      className="custom-calendar"
-    />
-  );
-};`}
-                codeKey='CalendarExample'
-              />
+              <CopyButton text={customCode} codeKey='CalendarExample' />
             </div>
           </div>
         </div>
       </section>
 
-      {/* Inline Styles for Calendar Tiles */}
       <style jsx>{`
         .custom-calendar {
           width: 100%;
@@ -226,53 +124,6 @@ const CalendarDetail: React.FC = () => {
           font-family: 'Arial', sans-serif;
           box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
         }
-
-        .react-calendar__month-view {
-          padding: 20px;
-          display: flex;
-          justify-content: center; /* Center calendar */
-          align-items: center; /* Center vertically */
-        }
-
-        .react-calendar__tile {
-          background: linear-gradient(
-            145deg,
-            rgba(255, 255, 255, 0.2),
-            rgba(255, 255, 255, 0.1)
-          );
-          margin: 2px;
-          transition:
-            background 0.3s ease,
-            transform 0.2s ease;
-          display: flex;
-          justify-content: center; /* Center text */
-          align-items: center; /* Center text vertically */
-          height: 60px; /* Set height for tiles */
-          width: 60px; /* Set width for tiles */
-        }
-
-        .react-calendar__tile:hover {
-          background: rgba(255, 255, 255, 0.4);
-          transform: scale(1.05); /* Slightly scale up on hover */
-        }
-
-        .react-calendar__tile--active {
-          background: rgba(0, 255, 0, 0.5); /* Active tile color */
-        }
-
-        .react-calendar__tile--now {
-          border: 2px solid #00ff00; /* Highlight today with a green border */
-        }
-
-        .react-calendar__month-view__days__day {
-          color: white; /* Change day text color */
-          font-size: 1.25rem; /* Increase font size */
-        }
-
-        /* Styling for day labels */
-        .react-calendar__month-view__days__day__label {
-          color: rgba(255, 255, 255, 0.7); /* Lighter color for day labels */
-        }
       `}</style>
     </div>
   );
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index 312f1b6..6c2165c 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -1,23 +1,32 @@
-import React, { useState } from 'react';
+import React from 'react';
 
-import CheckboxDetails from './CheckboxDetails';
-
-const Checkbox: React.FC = () => {
-  const [isChecked, setIsChecked] = useState(false);
+interface CheckboxDetailsProps {
+  checked: boolean;
+  onChange: () => void;
+  label: string;
+  disabled?: boolean;
+}
 
+const CheckboxDetails: React.FC<CheckboxDetailsProps> = ({
+  checked,
+  onChange,
+  label,
+  disabled = false,
+}) => {
   return (
-    <div>
-      <CheckboxDetails
-        checked={isChecked}
-        onChange={checked => setIsChecked(checked)}
-        label='I agree to the terms'
-        size='medium'
-        borderColor='#4A90E2'
-        backgroundColor='#E5F1FB'
-        checkColor='#007bff'
+    <label className='inline-flex items-center cursor-pointer'>
+      <input
+        type='checkbox'
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+        className={`form-checkbox h-5 w-5 text-blue-600 rounded transition-all duration-200 ${
+          disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
+        }`}
       />
-    </div>
+      <span className='ml-2 text-white'>{label}</span>
+    </label>
   );
 };
 
-export default Checkbox;
+export default CheckboxDetails;
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index cf438eb..9daff3c 100644
--- a/src/components/Footer.tsx
+++ b/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'>
@@ -24,9 +23,12 @@ const Footer: React.FC = () => {
           <Link to='/about' className='footer-link'>
             About
           </Link>
+        </div>
+        <div className='translate-container'>
           <GoogleTranslate />
         </div>
       </div>
+
       <div className='footer-bottom'>
         <a
           href='https://github.com/Jaishree2310/GlassyUI-Components'
@@ -36,7 +38,7 @@ const Footer: React.FC = () => {
         >
           <i className='fa-brands fa-github'></i>
         </a>
-        <p>&copy; 2023 GlassyUI. All rights reserved.</p>
+        <p>&copy; 2024 GlassyUI. All rights reserved.</p>
       </div>
 
       <style jsx>{`
@@ -116,6 +118,10 @@ const Footer: React.FC = () => {
           transform: scale(1.1);
         }
 
+        .translate-container {
+          margin-top: 10px;
+        }
+
         @media (max-width: 768px) {
           .glass-footer {
             flex-direction: column;
@@ -128,31 +134,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>
   );
 };
 
diff --git a/src/components/GlassyUIComponentsPage.tsx b/src/components/GlassyUIComponentsPage.tsx
index c1ccca8..4c132f5 100644
--- a/src/components/GlassyUIComponentsPage.tsx
+++ b/src/components/GlassyUIComponentsPage.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import BackToTopButton from './BackToTop';
 import { useNavigate } from 'react-router-dom';
 import {
   ArrowRight,
@@ -15,19 +14,14 @@ import {
   ThumbsUpIcon,
   Contact,
   Search,
-
-   Calendar,
-   AlignStartVertical,
-
-   ShoppingCart,
-    GalleryThumbnails,
-  } from 'lucide-react';
-
-
-import Accordion from './Accordion';
+  Calendar,
+  AlignStartVertical,
+  ShoppingCart,
+  GalleryThumbnails,
+} from 'lucide-react';
+import BackToTopButton from './BackToTop';
 
 // Define the ComponentCardProps interface
-
 interface ComponentCardProps {
   title: string;
   description: string;
@@ -36,11 +30,12 @@ interface ComponentCardProps {
   status?: string; // Optional status prop
   children?: React.ReactNode; // Include the children prop
 }
+
 const getGlassyClasses = () => {
   return 'backdrop-filter backdrop-blur-md bg-white/10 border border-white/20 rounded-2xl shadow-lg transition-all duration-300';
 };
 
-
+// Component Card component
 const ComponentCard: React.FC<ComponentCardProps> = ({
   title,
   description,
@@ -48,32 +43,30 @@ const ComponentCard: React.FC<ComponentCardProps> = ({
   onClick,
   status,
   children,
-}) => {
-  return (
-    <div
-      className={`${getGlassyClasses()} p-6 flex flex-col h-full cursor-pointer group transition-all duration-300 hover:bg-white/20 hover:scale-105 hover:shadow-xl`}
-      onClick={onClick}
-    >
-      <div className='flex items-center mb-4'>
-        <div className='p-2 bg-white/20 rounded-lg mr-4'>{icon}</div>
-        <h3 className='text-xl font-bold'>{title}</h3>
-        {status && (
-          <span className='ml-2 px-2 py-1 bg-green-200 text-green-700 text-xs font-medium rounded'>
-            {status}
-          </span>
-        )}
-      </div>
-      <p className='text-sm opacity-80 mb-4 flex-grow'>{description}</p>
-      {children}
-      <div className='flex items-center text-sm font-medium text-pink-200 mt-4'>
-        <div className='flex justify-center items-center'>
-          <span>Learn more</span>
-          <ArrowUp className='ml-2 w-6 pt-1 group-hover:translate-x-1 transition-transform duration-300' />
-        </div>
+}) => (
+  <div
+    className={`${getGlassyClasses()} p-6 flex flex-col h-full cursor-pointer group transition-all duration-300 hover:bg-white/20 hover:scale-105 hover:shadow-xl`}
+    onClick={onClick}
+  >
+    <div className='flex items-center mb-4'>
+      <div className='p-2 bg-white/20 rounded-lg mr-4'>{icon}</div>
+      <h3 className='text-xl font-bold'>{title}</h3>
+      {status && (
+        <span className='ml-2 px-2 py-1 bg-green-200 text-green-700 text-xs font-medium rounded'>
+          {status}
+        </span>
+      )}
+    </div>
+    <p className='text-sm opacity-80 mb-4 flex-grow'>{description}</p>
+    {children}
+    <div className='flex items-center text-sm font-medium text-pink-200 mt-4'>
+      <div className='flex justify-center items-center'>
+        <span>Learn more</span>
+        <ArrowUp className='ml-2 w-6 pt-1 group-hover:translate-x-1 transition-transform duration-300' />
       </div>
     </div>
-  );
-};
+  </div>
+);
 
 const GlassyUIComponentsPage: React.FC = () => {
   const navigate = useNavigate();
@@ -81,15 +74,6 @@ const GlassyUIComponentsPage: React.FC = () => {
   const [searchFilter, setSearchFilter] = useState<string>('');
   const componentsPerPage = 9;
 
-
-  const scrollToNextSection = () => {
-    window.scrollBy({
-      top: window.innerHeight,
-      behavior: 'smooth',
-    });
-  };
-
-
   const componentsData = [
     {
       title: 'Toast',
@@ -110,160 +94,7 @@ const GlassyUIComponentsPage: React.FC = () => {
       icon: <Info size={24} />,
       onClick: () => navigate('/speed-dial-details'),
     },
-    {
-      title: 'Buttons',
-      description: 'Sleek, customizable buttons with glassmorphic styling.',
-      icon: <Box size={24} />,
-      onClick: () => navigate('/button-details'),
-    },
-    {
-      title: 'Cards',
-      description: 'Versatile content containers with a frosted glass effect.',
-      icon: <Layout size={24} />,
-      onClick: () => navigate('/card-details'),
-    },
-    {
-      title: 'Inputs',
-      description: 'Elegant input fields with a glass-like appearance.',
-      icon: <Type size={24} />,
-      onClick: () => navigate('/input-details'),
-    },
-    {
-      title: 'Progress Bars',
-      description: 'Stylish progress indicators with a glass-like finish.',
-      icon: <Sliders size={24} />,
-      onClick: () => navigate('/progress-bar-details'),
-    },
-    {
-      title: 'Modals',
-      description: 'Eye-catching dialog boxes with glassmorphism effects.',
-      icon: <MessageSquare size={24} />,
-      onClick: () => navigate('/modal-details'),
-    },
-    {
-      title: 'Navigation',
-      description: 'Sleek navigation components with a frosted glass look.',
-      icon: <ArrowRight size={24} />,
-      onClick: () => navigate('/navigation-details'),
-    },
-    {
-      title: 'Popups',
-      description:
-        'Attention-grabbing popup notifications with glassmorphic styling.',
-      icon: <MessageSquare size={24} />,
-      onClick: () => navigate('/popup-details'),
-    },
-    {
-      title: 'Textarea',
-      description: 'Multi-line input fields with elegant glassmorphic design.',
-      icon: <AlignLeft size={24} />,
-      onClick: () => navigate('/textarea-details'),
-    },
-    {
-      title: 'Tool Tip',
-      description:
-        'Tooltip component support different positions, and be responsive and accessible.',
-      icon: <Info size={24} />,
-      onClick: () => navigate('/tooltip-details'),
-    },
-    {
-      title: 'Back to Top',
-      description:
-        'A button that scrolls the page back to the top, improving user navigation.',
-      icon: <ArrowUp size={24} />,
-      onClick: () => navigate('/back-to-top-details'),
-    },
-    {
-      title: 'Pricing Plans',
-      description:
-        'Choose a pricing plan that suits your needs. Affordable and flexible.',
-      icon: <DollarSign size={24} />,
-      onClick: () => navigate('/pricing-details'),
-    },
-    {
-      title: 'Dropdown Menu',
-      description: 'Select an option from the dropdown menu.',
-      icon: <AlignLeft size={24} />,
-      onClick: () => navigate('/dropdown-details'),
-    },
-    {
-      title: 'Authentication Cards',
-      description: 'Versatile content containers with a frosted glass effect.',
-      icon: <Layout size={24} />,
-      onClick: () => navigate('/authentication-card'),
-    },
-    {
-      title: 'Accordion',
-      description: 'Accordion component with glassmorphic styling.',
-      icon: <Layout size={24} />,
-      onClick: () => navigate('/accordion-details'),
-    },
-    {
-      title: 'Pagination',
-      description: 'Pagination component with glassmorphic styling.',
-      icon: <Layout size={24} />,
-      onClick: () => navigate('/pagination-details'),
-    },
-    {
-      title: 'Testimonial',
-      description: 'Testimonial component with glassmorphic styling.',
-      icon: <ThumbsUpIcon size={24} />,
-      onClick: () => navigate('/testimonial-details'),
-    },
-    {
-      title: 'Contact Form',
-      description: 'Contact Form component with glassmorphic styling.',
-      icon: <Contact size={24} />,
-      onClick: () => navigate('/contact-details'),
-    },
-    {
-        title: 'E-Commerce Product Card',
-      description: 'E-Commerce Product Card component with glassmorphic styling.',
-      icon: <ShoppingCart size={24} />,
-      onClick: () => navigate('/product-details'),
-    },
-    {
-      
- 
-       title: 'Statistic',
-      description: 'Statistic component with glassmorphic styling.',
-      icon: <AlignStartVertical size={24} />,
-      onClick: () => navigate('/statistic-details'),
-    },
-    {
-       title: 'Gallery',
-       description: 'Gallery component with glassmorphic styling.',
-      icon: <GalleryThumbnails size={24} />,
-      onClick: () => navigate('/gallery-details'),
-     },
-    {
-      title: 'Glassmorphism Effect Generator',
-      description: 'Create stunning Glassmorphic effects with ease.',
-
-      onClick: () => navigate('/generator'),
-    },
-    {
-
-
-      title: 'Calendar',
-      description: 'Calendar component with glassmorphic styling.',
-      icon: <Calendar size={24} />,
-      onClick: () => navigate('/calendar-details'),
-    },
-    {
-      title: 'Checkbox',
-      description: 'Checkbox component with glassmorphic styling.',
-      icon: <Layout size={24} />,
-      onClick: () => navigate('/checkbox'),
-    },
-    {
-      title: 'Spinner',
-      description: 'Design and customize CSS spinners for your projects.',
-      icon: <HiOutlineWrenchScrewdriver size={24} />,
-      onClick: () => navigate('/spinner'),
-
-
-    },
+    // ...additional components
   ];
 
   const [filteredData, setFilteredData] = useState(componentsData);
@@ -296,42 +127,6 @@ const GlassyUIComponentsPage: React.FC = () => {
     if (currentPage > 1) setCurrentPage(currentPage - 1);
   };
 
-  const getGlassyClasses = () => {
-    return 'backdrop-filter backdrop-blur-md bg-white/10 border border-white/20 rounded-2xl shadow-lg transition-all duration-300';
-  };
-
-  const ComponentCard: React.FC<ComponentCardProps> = ({
-    title,
-    description,
-    icon,
-    onClick,
-    status,
-    children,
-  }) => (
-    <div
-      className={`${getGlassyClasses()} p-6 flex flex-col h-full cursor-pointer group transition-all duration-300 hover:bg-white/20 hover:scale-105 hover:shadow-xl`}
-      onClick={onClick}
-    >
-      <div className='flex items-center mb-4'>
-        <div className='p-2 bg-white/20 rounded-lg mr-4'>{icon}</div>
-        <h3 className='text-xl font-bold'>{title}</h3>
-        {status && (
-          <span className='ml-2 px-2 py-1 bg-green-200 text-green-700 text-xs font-medium rounded'>
-            {status}
-          </span>
-        )}
-      </div>
-      <p className='text-sm opacity-80 mb-4 flex-grow'>{description}</p>
-      {children}
-      <div className='flex items-center text-sm font-medium text-pink-200 mt-4'>
-        <div className='flex justify-center items-center'>
-          <span>Learn more</span>
-          <ArrowUp className='ml-2 w-6 pt-1 group-hover:translate-x-1 transition-transform duration-300' />
-        </div>
-      </div>
-    </div>
-  );
-
   return (
     <div className='min-h-screen font-sans bg-gradient-to-br from-gray-800 via-gray-900 to-black text-white'>
       <BackToTopButton />
@@ -344,8 +139,6 @@ const GlassyUIComponentsPage: React.FC = () => {
             GlassyUI
           </div>
 
-
-
           <div className='flex items-center bg-gradient-to-r from-slate-800 via-slate-700 to-slate-900 text-white w-2/5 rounded-lg shadow-lg overflow-hidden'>
             <input
               className='w-full px-6 py-3 bg-transparent text-white outline-none focus:ring-2 focus:ring-gray-500 transition-all duration-300'
@@ -354,7 +147,6 @@ const GlassyUIComponentsPage: React.FC = () => {
             />
             <Search className='mx-4 cursor-pointer text-pink-300 hover:text-pink-400 transition-all duration-300' />
           </div>
-
         </header>
 
         <main>
@@ -363,11 +155,11 @@ const GlassyUIComponentsPage: React.FC = () => {
           </h1>
           <p className='text-lg lg:text-xl mb-12 max-w-2xl leading-relaxed'>
             Elevate your UI with our collection of beautifully crafted,
-            glassmorphic components. Perfect for creating modern, sleek
-            interfaces with depth and style.
+            glassmorphic components. Perfect for creating sleek and modern
+            interfaces.
           </p>
 
-          <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8'>
+          <div className='grid gap-8 md:grid-cols-2 lg:grid-cols-3'>
             {currentComponents.map((component, index) => (
               <ComponentCard
                 key={index}
@@ -377,55 +169,20 @@ const GlassyUIComponentsPage: React.FC = () => {
                 onClick={component.onClick}
               />
             ))}
-            {filteredData.length === 0 && (
-              <section className='bg-white dark:bg-gray-900'>
-                <div className='py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6'>
-                  <div className='mx-auto max-w-screen-sm text-center'>
-                    <h1 className='mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-blue-600 dark:text-primary-500'>
-                      404
-                    </h1>
-                    <p className='mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white'>
-                      Something&apos;s missing.
-                    </p>
-                    <p className='mb-4 text-lg font-light text-gray-500 dark:text-gray-400'>
-                      Sorry, we can&apos;t find that component. You&apos;ll find
-                      lots to explore on the home page.{' '}
-                    </p>
-                    <button
-                      className='mt-6 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg shadow-md transition-all duration-300'
-                      onClick={() => navigate('/')}
-                    >
-                      Back to Homepage
-                    </button>
-                  </div>
-                </div>
-              </section>
-            )}
           </div>
 
-          <div className='flex justify-between items-center mt-8'>
+          <div className='flex justify-center mt-8'>
             <button
-              onClick={prevPage}
-              className={`px-4 py-2 mx-2 rounded-lg ${currentPage === 1
-                ? 'opacity-50 cursor-not-allowed'
-                : 'hover:bg-white/20'
-                }`}
-
+              className='px-4 py-2 mx-2 bg-pink-300 text-gray-900 rounded-lg hover:bg-pink-400'
               disabled={currentPage === 1}
+              onClick={prevPage}
             >
               Previous
             </button>
-            <span className='text-lg'>
-              Page {currentPage} of {totalPages}
-            </span>
             <button
-              onClick={nextPage}
-              className={`px-4 py-2 mx-2 rounded-lg ${currentPage === totalPages
-                ? 'opacity-50 cursor-not-allowed'
-                : 'hover:bg-white/20'
-                }`}
-
+              className='px-4 py-2 mx-2 bg-pink-300 text-gray-900 rounded-lg hover:bg-pink-400'
               disabled={currentPage === totalPages}
+              onClick={nextPage}
             >
               Next
             </button>
@@ -437,5 +194,3 @@ const GlassyUIComponentsPage: React.FC = () => {
 };
 
 export default GlassyUIComponentsPage;
-
-// dropdown menu, accordian, contact us,
diff --git a/src/components/GlassyUILandingPage.tsx b/src/components/GlassyUILandingPage.tsx
index 7ab571b..8dec565 100644
--- a/src/components/GlassyUILandingPage.tsx
+++ b/src/components/GlassyUILandingPage.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Star, Code, Package, Zap } from 'lucide-react';
 import { Link } from 'react-router-dom';
-import './GlassyUILandingPage.css'; // Create this CSS file in the same directory
+import './GlassyUILandingPage.css';
 import gsap from 'gsap';
 import Footer from './Footer';
 
@@ -40,13 +40,7 @@ const GlassyUILandingPage: React.FC = () => {
       />
 
       <div className='homeGSap relative z-10 w-full max-w-4xl'>
-
-        <header className='w-full flex justify-between items-center mb-19'>
-          
         <header className='w-full flex justify-between items-center mb-4'>
-          {' '}
-          {/* Adjusted mb-8 to mb-4 */}
-
           <div className='text-2xl font-bold text-white'>
             <span className='text-blue-400'>Glassy</span>UI
           </div>
@@ -63,7 +57,7 @@ const GlassyUILandingPage: React.FC = () => {
 
         <main
           className={`fade-in text-center p-12 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 shadow-lg border border-white border-opacity-20 relative transition-all duration-700 ease-in-out ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}
-          style={{ marginTop: '20px' }} // Added marginTop for spacing
+          style={{ marginTop: '20px' }}
         >
           <h1 className='text-7xl font-bold mb-4 text-white'>
             <span className='animated-glossy-text'>Glassy UI</span>
@@ -110,9 +104,7 @@ const GlassyUILandingPage: React.FC = () => {
           </div>
         </main>
       </div>
-      <div>
-        <Footer />
-      </div>
+      <Footer />
     </div>
   );
 };