ok

src/app/dahabiyas/page.jsx

@@ -1,3 +1,6 @@
+'use client'
+
+import { useState } from 'react'
 import { CallToAction3 } from '@/components/CallToAction3'
 import { Footer } from '@/components/Footer'
 import { Header } from '@/components/Header'
@@ -9,16 +12,30 @@ import Veda3 from '@/components/Veda3'
 import Veda4 from '@/components/Veda4'
 
 export default function Dahabiyas() {
+  const [selectedVeda, setSelectedVeda] = useState('veda1')
+
+  const renderSelectedVeda = () => {
+    switch (selectedVeda) {
+      case 'veda1':
+        return <Veda1 />
+      case 'veda2':
+        return <Veda2 />
+      case 'veda3':
+        return <Veda3 />
+      case 'veda4':
+        return <Veda4 />
+      default:
+        return <Veda1 />
+    }
+  }
+
   return (
     <>
       <Header />
       <main>
         <Daha1 />
-        <Daha2 />
-        <Veda1 />
-        <Veda2 />
-        <Veda3 />
-        <Veda4 />
+        <Daha2 onVedaSelect={setSelectedVeda} />
+        {renderSelectedVeda()}
       </main>
       <Footer />
     </>

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>