add

src/app/dahabiyas/page.jsx

@@ -10,6 +10,7 @@ import Veda1 from '@/components/Veda1'
 import Veda2 from '@/components/Veda2'
 import Veda3 from '@/components/Veda3'
 import Veda4 from '@/components/Veda4'
+import { Testimonials } from '@/components/Testimonials'
 
 export default function Dahabiyas() {
   const [selectedVeda, setSelectedVeda] = useState('veda1')
@@ -34,8 +35,9 @@ export default function Dahabiyas() {
       <Header />
       <main>
         <Daha1 />
-        <Daha2 onVedaSelect={setSelectedVeda} />
+        <Daha2 onVedaSelect={setSelectedVeda} selectedVeda={selectedVeda} />
         {renderSelectedVeda()}
+        <Testimonials />
       </main>
       <Footer />
     </>

src/components/Daha2.jsx

@@ -33,31 +33,40 @@ const categories = [
   },
 ]
 
-export default function Daha2({ onVedaSelect }) {
+export default function Daha2({ onVedaSelect, selectedVeda }) {
   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) => (
+          {categories.map((category) => {
-            <div 
+            const isSelected = selectedVeda === category.vedaId;
-              key={category.name} 
+            return (
-              className="group block cursor-pointer"
+              <div 
-              onClick={() => onVedaSelect(category.vedaId)}
+                key={category.name} 
-            >
+                className="group block cursor-pointer"
-              <div
+                onClick={() => onVedaSelect(category.vedaId)}
-                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"
               >
-                <img
+                <div
-                  alt={category.imageAlt}
+                  aria-hidden="true"
-                  src={category.image}
+                  className={`aspect-h-2 aspect-w-3 overflow-hidden  lg:aspect-h-9 lg:aspect-w-16 transition-all duration-200 ${
-                  className="h-full w-full object-cover object-center"
+                    isSelected 
-                />
+                      ? 'ring-1 ring-gold-500 opacity-100 ' 
+                      : 'group-hover:opacity-75'
+                  }`}
+                >
+                  <img
+                    alt={category.imageAlt}
+                    src={category.image}
+                    className="h-full w-full object-cover object-center"
+                  />
+                </div>
+                <H4 className={`px-1 mt-4 text-base font-semibold ${
+                  isSelected ? 'text-gold-600' : 'text-gray-900'
+                }`}>{category.name}</H4>
+                <PXXS className="mt-1 px-1">{category.description}</PXXS>
               </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>
+          })}
-            </div>
-          ))}
         </div>
       </div>
     </div>