ok

src/components/Daha2.jsx

@@ -5,41 +5,45 @@ import { H3, H4, PXXS } from '@/components/text';
 const categories = [
   {
     name: 'VEDA I',
-    href: '#',
+    vedaId: 'veda1',
     image: '/images/veda1.jpg',
     imageAlt: 'veda1',
     description: 'The ideal retreat for space and privacy, perfect for intimate gatherings.',
   },
   {
     name: 'VEDA II',
-    href: '#',
+    vedaId: 'veda2',
     image: '/images/veda2.jpg',
     imageAlt: 'veda2',
     description: 'The perfect blend of spaciousness and privacy, great for larger groups seeking comfort.',
   },
   {
     name: 'VEDA III',
-    href: '#',
+    vedaId: 'veda3',
     image: '/images/veda3.jpg',
     imageAlt: 'veda3',
     description: ' An ideal choice for those valuing privacy and intimacy in a cozy setting.',
   },
   {
     name: 'VEDA IV',
-    href: '#',
+    vedaId: 'veda4',
     image: '/images/veda4.jpg',
     imageAlt: 'veda4.',
     description: 'Spacious and private, this option accommodates larger gatherings with ease.',
   },
 ]
 
-export default function Daha2() {
+export default function Daha2({ onVedaSelect }) {
   return (
     <div className="bg-transparent">
       <div className="mx-auto max-w-xl px-6 pt-4 pb-12  lg:max-w-7xl lg:px-0">
         <div className="mt-10 space-y-12 lg:grid lg:grid-cols-4 lg:gap-x-2 lg:space-y-0">
           {categories.map((category) => (
-            <a key={category.name} href={category.href} className="group block">
+            <div 
+              key={category.name} 
+              className="group block cursor-pointer"
+              onClick={() => onVedaSelect(category.vedaId)}
+            >
               <div
                 aria-hidden="true"
                 className="aspect-h-2 aspect-w-3 overflow-hidden rounded-sm lg:aspect-h-9 lg:aspect-w-16 group-hover:opacity-75"
@@ -52,7 +56,7 @@ export default function Daha2() {
               </div>
               <H4 className="px-1 mt-4 text-base font-semibold text-gray-900">{category.name}</H4>
               <PXXS className="mt-1 px-1">{category.description}</PXXS>
-            </a>
+            </div>
           ))}
         </div>
       </div>