feat: add title attributes to buttons

Author: abhinav-1305

src/components/Cards/product-card.tsx

@@ -73,6 +73,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
           <Button
             className="bg-blue-400 hover:bg-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700 text-white text-sm px-6 py-2.5 rounded-full font-medium transition-colors duration-200 shadow-sm hover:shadow-md cursor-pointer"
             onClick={handleDemoButtonClick}
+            title="View Demo"
           >
             Demo
           </Button>

src/pages/Home.tsx

@@ -53,6 +53,7 @@ export const Home = () => {
             <a
               href="#demos"
               className="inline-block px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow transition-all text-lg"
+              title="Scroll to demos section"
             >
               View Demos
             </a>

src/pages/demo-list/mifosx.tsx

@@ -58,6 +58,7 @@ export default function MifosXDemos() {
             <Button
               className="bg-blue-500 text-white px-3 py-1 rounded text-sm hover:bg-blue-600 cursor-pointer"
               onClick={() => NavigateToDemo(id, demoName)}
+              title="Start this demo"
             >
               Start Demo
             </Button>
@@ -155,6 +156,7 @@ export default function MifosXDemos() {
               onClick={() => table.setPageIndex(0)}
               disabled={!table.getCanPreviousPage()}
               className="p-2 disabled:opacity-50 disabled:cursor-not-allowed"
+              title="First page"
             >
               <ChevronsLeft className="h-4 w-4" />
             </Button>
@@ -165,6 +167,7 @@ export default function MifosXDemos() {
               onClick={() => table.previousPage()}
               disabled={!table.getCanPreviousPage()}
               className="p-2 disabled:opacity-50 disabled:cursor-not-allowed"
+              title="Previous page"
             >
               <ChevronLeft className="h-4 w-4" />
             </Button>
@@ -175,6 +178,7 @@ export default function MifosXDemos() {
               onClick={() => table.nextPage()}
               disabled={!table.getCanNextPage()}
               className="p-2 disabled:opacity-50 disabled:cursor-not-allowed"
+              title="Next page"
             >
               <ChevronRight className="h-4 w-4" />
             </Button>
@@ -185,6 +189,7 @@ export default function MifosXDemos() {
               onClick={() => table.setPageIndex(table.getPageCount() - 1)}
               disabled={!table.getCanNextPage()}
               className="p-2 disabled:opacity-50 disabled:cursor-not-allowed"
+              title="Last page"
             >
               <ChevronsRight className="h-4 w-4" />
             </Button>

src/pages/demo-list/phee.tsx

@@ -39,7 +39,7 @@ export default function PheeDemos() {
         id: 'action',
         header: '',
         cell: () => (
-          <Button className="bg-blue-500 text-white px-3 py-1 rounded text-sm hover:bg-blue-600 cursor-pointer">
+          <Button className="bg-blue-500 text-white px-3 py-1 rounded text-sm hover:bg-blue-600 cursor-pointer" title="Start this demo">
             Start Demo
           </Button>
         ),
@@ -129,6 +129,7 @@ export default function PheeDemos() {
               onClick={() => table.setPageIndex(0)}
               disabled={!table.getCanPreviousPage()}
               className="p-2 disabled:opacity-50 disabled:cursor-not-allowed"
+              title="First page"
             >
               <ChevronsLeft className="h-4 w-4" />
             </Button>
@@ -139,6 +140,7 @@ export default function PheeDemos() {
               onClick={() => table.previousPage()}
               disabled={!table.getCanPreviousPage()}
               className="p-2 disabled:opacity-50 disabled:cursor-not-allowed"
+              title="Previous page"
             >
               <ChevronLeft className="h-4 w-4" />
             </Button>
@@ -149,6 +151,7 @@ export default function PheeDemos() {
               onClick={() => table.nextPage()}
               disabled={!table.getCanNextPage()}
               className="p-2 disabled:opacity-50 disabled:cursor-not-allowed"
+              title="Next page"
             >
               <ChevronRight className="h-4 w-4" />
             </Button>
@@ -159,6 +162,7 @@ export default function PheeDemos() {
               onClick={() => table.setPageIndex(table.getPageCount() - 1)}
               disabled={!table.getCanNextPage()}
               className="p-2 disabled:opacity-50 disabled:cursor-not-allowed"
+              title="Last page"
             >
               <ChevronsRight className="h-4 w-4" />
             </Button>

src/pages/demo-list/vnext.tsx

@@ -39,7 +39,7 @@ export default function MifosXDemos() {
         id: 'action',
         header: '',
         cell: () => (
-          <Button className="bg-blue-500 text-white px-3 py-1 rounded text-sm hover:bg-blue-600 cursor-pointer">
+          <Button className="bg-blue-500 text-white px-3 py-1 rounded text-sm hover:bg-blue-600 cursor-pointer" title="Start this demo">
             Start Demo
           </Button>
         ),
@@ -129,6 +129,7 @@ export default function MifosXDemos() {
               onClick={() => table.setPageIndex(0)}
               disabled={!table.getCanPreviousPage()}
               className="p-2 disabled:opacity-50 disabled:cursor-not-allowed"
+              title="First page"
             >
               <ChevronsLeft className="h-4 w-4" />
             </Button>
@@ -139,6 +140,7 @@ export default function MifosXDemos() {
               onClick={() => table.previousPage()}
               disabled={!table.getCanPreviousPage()}
               className="p-2 disabled:opacity-50 disabled:cursor-not-allowed"
+              title="Previous page"
             >
               <ChevronLeft className="h-4 w-4" />
             </Button>
@@ -149,6 +151,7 @@ export default function MifosXDemos() {
               onClick={() => table.nextPage()}
               disabled={!table.getCanNextPage()}
               className="p-2 disabled:opacity-50 disabled:cursor-not-allowed"
+              title="Next page"
             >
               <ChevronRight className="h-4 w-4" />
             </Button>
@@ -159,6 +162,7 @@ export default function MifosXDemos() {
               onClick={() => table.setPageIndex(table.getPageCount() - 1)}
               disabled={!table.getCanNextPage()}
               className="p-2 disabled:opacity-50 disabled:cursor-not-allowed"
+              title="Last page"
             >
               <ChevronsRight className="h-4 w-4" />
             </Button>

src/pages/demo/demo-page.tsx

@@ -116,6 +116,7 @@ export const DemoPage = () => {
               onClick={handlePrevious}
               disabled={currentStep === 0}
               className="flex items-center gap-2 px-4 py-2 text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer"
+              title="Go to previous step"
             >
               <ChevronLeft size={16} />
               Previous
@@ -124,6 +125,7 @@ export const DemoPage = () => {
               onClick={handleNext}
               disabled={currentStep === SampleDemoJsonFile.steps.length - 1}
               className="flex items-center gap-2 px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 dark:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer"
+              title="Go to next step"
             >
               Next
               <ChevronRight size={16} />
@@ -143,6 +145,7 @@ export const DemoPage = () => {
                       ? 'bg-blue-100 border-blue-300 text-blue-800 dark:text-gray-600'
                       : 'bg-gray-50 border-gray-200 text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-800 dark:hover:bg-gray-900 dark:text-gray-300'
                   }`}
+                  title={`Go to step: ${step.title}`}
                 >
                   <div className="flex items-center gap-3">
                     <div