replace

public/images/components/Activities.jsx

@@ -34,7 +34,7 @@ const posts = [
       <div className="bg-creme-200 py-12 lg:py-12">
         <div className="mx-auto max-w-7xl px-6 lg:px-8">
           <div className="mx-auto max-w-2xl text-center">
-            <p className="mt-2 text-xl/5 leading-8 text-gray-600 italic font-semibold">
+            <p className="mt-2 text-xl/5 leading-8 text-gray-200 italic font-semibold">
             Mind, Body, and Soul: For a Deeper Connection.
             </p>
           </div>

public/images/components/Boat.jsx

@@ -119,7 +119,7 @@ function TestimonialCard({
           </p>
         </blockquote>
         
-        <p className="mt-2 lg:text-base text-sm text-gray-600 leading-6">
+        <p className="mt-2 lg:text-base text-sm text-gray-200 leading-6">
           {subtitle}
         </p>
         

public/images/components/Boats.jsx

@@ -62,7 +62,7 @@ export default function Boats() {
             <div className="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
                 <div className="mx-auto max-w-2xl lg:mx-0">
                     <h2 className="text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">Our team</h2>
-                    <p className="mt-6 text-lg leading-8 text-gray-600">
+                    <p className="mt-6 text-lg leading-8 text-gray-200">
                         We’re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the
                         best results for our clients.
                     </p>
@@ -82,7 +82,7 @@ export default function Boats() {
                                 />
                             </div>
                             <h3 className="mt-6 text-lg font-semibold leading-8 text-gray-800">{person.name}</h3>
-                            <ul className="mt-4 text-base leading-7 text-gray-600 list-disc pl-5 space-y-1">
+                            <ul className="mt-4 text-base leading-7 text-gray-200 list-disc pl-5 space-y-1">
                                 {person.bio.map((item, index) => (
                                     <li key={index}>{item}</li>
                                 ))}

public/images/components/ContactHero.jsx

@@ -49,10 +49,10 @@ export function ContactHero() {
             <h2 className="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">
               Get in Touch
             </h2>
-            <p className="mt-6 text-lg/8 text-gray-600">
+            <p className="mt-6 text-lg/8 text-gray-200">
               At VEDA, we welcome your questions, ideas, and collaborations. Whether you’re curious about our retreats, interested in hosting a private gathering, or exploring partnership opportunities, we’re here to connect. Reach out to us today and let’s create transformative experiences along the timeless Nile.
             </p>
-            <dl className="mt-10 space-y-4 text-base/7 text-gray-600">
+            <dl className="mt-10 space-y-4 text-base/7 text-gray-200">
               <div className="flex gap-x-4">
                 <dt className="flex-none">
                   <span className="sr-only">Email</span>

public/images/components/Daha1.jsx

@@ -12,7 +12,7 @@ export default function Example() {
             <p className="mt-2 text-xl leading-12 text-gray-300">
             Embark on a Transformative Journey Along the Nile
             </p>
-            <p className="mt-6 max-w-3xl text-lg leading-8 text-gray-600">
+            <p className="mt-6 max-w-3xl text-lg leading-8 text-gray-200">
             Discover the heart of Egypt on our specially designed dahabiyas, crafted to elevate your energy and frequency through unique experiences. These elegant vessels are perfect for spiritual work and mystical exploration, offering a harmonious setting to connect with the essence of the Nile. Drift past ancient wonders and immerse yourself in the tranquil rhythm of the river, embarking on a journey of self-discovery and rejuvenation.
             </p>
           </div>

public/images/components/NewFeatures.jsx

@@ -44,7 +44,7 @@ export default function NewFeatures() {
         </div>
           <div className="lg:ml-auto lg:pl-4 lg:pt-0">
             <div className="lg:max-w-lg">
-              <dl className="lg:mt-10 mt-0 max-w-xl space-y-8 text-base leading-7 text-gray-600 lg:max-w-none">
+              <dl className="lg:mt-10 mt-0 max-w-xl space-y-8 text-base leading-7 text-gray-200 lg:max-w-none">
                 {features.map((feature) => (
                   <div key={feature.name} className="relative pl-9">
                     <dt className="inline font-semibold lg:text-xl text-lg text-darkgr-900">

public/images/components/NewFeatures2.jsx

@@ -28,7 +28,7 @@ export default function NewFeatures2() {
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
           <div className="lg:order-first">
             <div className="lg:max-w-lg">
-              <dl className="mt-10 max-w-xl space-y-8 text-base leading-7 text-gray-600 lg:max-w-none">
+              <dl className="mt-10 max-w-xl space-y-8 text-base leading-7 text-gray-200 lg:max-w-none">
                 {features.map((feature) => (
                   <div key={feature.name} className="relative pl-9">
                     <dt className="inline font-semibold lg:text-xl text-lg text-darkgr-900">

public/images/components/SecondaryFeatures.jsx

@@ -268,7 +268,7 @@ export function SecondaryFeatures() {
           <h2 className="font-display mt-2 text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">
             VEDA DAHABIYAS
           </h2>
-          <p className="mt-6 max-w-3xl text-lg leading-8 text-gray-600">
+          <p className="mt-6 max-w-3xl text-lg leading-8 text-gray-200">
             Discover peaceful platforms where every detail ensures a truly memorable stay.
           </p>
         </div>

public/images/components/Story.jsx

@@ -20,7 +20,7 @@ export default function NewFeatures() {
           <div className="lg:ml-auto lg:pl-4 lg:pt-0">
             <div className="lg:max-w-lg">
               <p className="mt-2 text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">OUR STORY</p>
-              <p className="mt-4 text-xl leading-8 tracking-wide ITALIC font-normal text-gray-600">
+              <p className="mt-4 text-xl leading-8 tracking-wide ITALIC font-normal text-gray-200">
               THE TALE OF SACRED ENERGIES OF THE NILE
               </p>
               <p className="mt-6 text-lg leading-7 font-light text-gray-500">

public/images/components/Story2.jsx

@@ -13,7 +13,7 @@ export default function NewFeatures2() {
               <p className="mt-4 text-lg leading-7 font-light text-gray-500">
               Frequencies are the new currency. Our mission is to help you recognize and align with different frequencies, creating a deeply fulfilling life in tune with your soul's gifts. Self-knowledge and self-mastery are the keys to fully opening your heart. By understanding and resonating with these frequencies, you can achieve a life of harmony and fulfillment.
               </p>
-              <p className="mt-4 text-lg leading-7 italic font-normal text-gray-600">
+              <p className="mt-4 text-lg leading-7 italic font-normal text-gray-200">
               Are you ready to step out of your comfort zone and embrace these changes? Can you let the new energies flow through you and break free from outdated programs to welcome new wisdom?
               </p>
               <p className="mt-4 text-lg leading-7 font-light text-gray-500">

public/images/components/Team.jsx

@@ -32,7 +32,7 @@ const people = [
         <div className="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
           <div className="mx-auto max-w-2xl lg:mx-0">
             <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">OUR PEOPLE</h2>
-            <p className="mt-6 text-lg leading-8 text-gray-600">
+            <p className="mt-6 text-lg leading-8 text-gray-200">
             We are a dynamic family of individuals from diverse cultural backgrounds and varied expertise, united by our passion in spirituality and dedication delivering heartfelt and authentic Nile experiences for our guests.
             </p>
           </div>
@@ -44,10 +44,10 @@ const people = [
               <li key={person.name}>
                 <img alt="" src={person.imageUrl} className="aspect-[4/4] w-full rounded-2xl object-cover" />
                 <h3 className="mt-6 text-lg font-semibold leading-8 text-gray-900">{person.name}</h3>
-                <p className="text-base leading-7 text-gray-600">{person.role}</p>
-                <p className="mt-4 text-base leading-7 text-gray-600">{person.bio}</p>
-                <p className="mt-2 text-base leading-7 text-gray-600">{person.bio2}</p>
-                <p className="mt-2 text-base leading-7 text-gray-600">{person.bio3}</p>
+                <p className="text-base leading-7 text-gray-200">{person.role}</p>
+                <p className="mt-4 text-base leading-7 text-gray-200">{person.bio}</p>
+                <p className="mt-2 text-base leading-7 text-gray-200">{person.bio2}</p>
+                <p className="mt-2 text-base leading-7 text-gray-200">{person.bio3}</p>
                 <ul role="list" className="mt-6 flex gap-x-6">
                   <li>
                     <a href={person.Url} className="text-gray-400 hover:text-gray-500" target='_blank' rel="noopener noreferrer">

public/images/components/ThirdFeatures.jsx

@@ -26,7 +26,7 @@ const ThirdFeatures = () => {
               <h1 className="mt-24 text-4xl font-bold tracking-tight text-gray-800 sm:mt-10 sm:text-6xl">
                 Data to enrich your online business
               </h1>
-              <p className="mt-6 text-lg leading-8 text-gray-600">
+              <p className="mt-6 text-lg leading-8 text-gray-200">
                 Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet
                 fugiat veniam occaecat fugiat aliqua.
               </p>

src/components/Activities.jsx

@@ -34,7 +34,7 @@ const posts = [
       <div className="bg-creme-200 py-12 lg:py-12">
         <div className="mx-auto max-w-7xl px-6 lg:px-8">
           <div className="mx-auto max-w-2xl text-center">
-            <p className="mt-2 text-xl/5 leading-8 text-gray-600 italic font-semibold">
+            <p className="mt-2 text-xl/5 leading-8 text-gray-200 italic font-semibold">
             Mind, Body, and Soul: For a Deeper Connection.
             </p>
           </div>

src/components/Boats.jsx

@@ -62,7 +62,7 @@ export default function Boats() {
             <div className="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
                 <div className="mx-auto max-w-2xl lg:mx-0">
                     <h2 className="text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">Our team</h2>
-                    <p className="mt-6 text-lg leading-8 text-gray-600">
+                    <p className="mt-6 text-lg leading-8 text-gray-200">
                         We’re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the
                         best results for our clients.
                     </p>
@@ -82,7 +82,7 @@ export default function Boats() {
                                 />
                             </div>
                             <h3 className="mt-6 text-lg font-semibold leading-8 text-gray-800">{person.name}</h3>
-                            <ul className="mt-4 text-base leading-7 text-gray-600 list-disc pl-5 space-y-1">
+                            <ul className="mt-4 text-base leading-7 text-gray-200 list-disc pl-5 space-y-1">
                                 {person.bio.map((item, index) => (
                                     <li key={index}>{item}</li>
                                 ))}

src/components/ContactHero.jsx

@@ -52,10 +52,10 @@ export function ContactHero() {
             <H2 className="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">
               Get in Touch
             </H2>
-            <p className="mt-6 text-lg/8 text-gray-600">
+            <p className="mt-6 text-lg/8 text-gray-200">
               At VEDA, we welcome your questions, ideas, and collaborations. Whether you’re curious about our retreats, interested in hosting a private gathering, or exploring partnership opportunities, we’re here to connect. Reach out to us today and let’s create transformative experiences along the timeless Nile.
             </p>
-            <dl className="mt-10 space-y-4 text-base/7 text-gray-600">
+            <dl className="mt-10 space-y-4 text-base/7 text-gray-200">
               <div className="flex gap-x-4">
                 <dt className="flex-none">
                   <span className="sr-only">Email</span>

src/components/Daha1.jsx

@@ -12,7 +12,7 @@ export default function Example() {
             <p className="mt-2 text-xl leading-12 text-gray-300">
             Embark on a Transformative Journey Along the Nile
             </p>
-            <p className="mt-6 max-w-3xl text-lg leading-8 text-gray-600">
+            <p className="mt-6 max-w-3xl text-lg leading-8 text-gray-200">
             Discover the heart of Egypt on our specially designed dahabiyas, crafted to elevate your energy and frequency through unique experiences. These elegant vessels are perfect for spiritual work and mystical exploration, offering a harmonious setting to connect with the essence of the Nile. Drift past ancient wonders and immerse yourself in the tranquil rhythm of the river, embarking on a journey of self-discovery and rejuvenation.
             </p>
           </div>

src/components/NewFeatures.jsx

@@ -44,7 +44,7 @@ export default function NewFeatures() {
         </div>
           <div className="lg:ml-auto lg:pl-4 lg:pt-0">
             <div className="lg:max-w-lg">
-              <dl className="lg:mt-10 mt-0 max-w-xl space-y-8 text-base leading-7 text-gray-600 lg:max-w-none">
+              <dl className="lg:mt-10 mt-0 max-w-xl space-y-8 text-base leading-7 text-gray-200 lg:max-w-none">
                 {features.map((feature) => (
                   <div key={feature.name} className="relative pl-9">
                     <dt className="inline font-semibold lg:text-xl text-lg text-darkgr-900">

src/components/NewFeatures2.jsx

@@ -28,7 +28,7 @@ export default function NewFeatures2() {
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
           <div className="lg:order-first">
             <div className="lg:max-w-lg">
-              <dl className="mt-10 max-w-xl space-y-8 text-base leading-7 text-gray-600 lg:max-w-none">
+              <dl className="mt-10 max-w-xl space-y-8 text-base leading-7 text-gray-200 lg:max-w-none">
                 {features.map((feature) => (
                   <div key={feature.name} className="relative pl-9">
                     <dt className="inline font-semibold lg:text-xl text-lg text-darkgr-900">

src/components/SecondaryFeatures.jsx

@@ -267,7 +267,7 @@ export function SecondaryFeatures() {
           <H2 className="font-display mt-2 text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">
             VEDA DAHABIYAS
           </H2>
-          <p className="mt-6 max-w-3xl text-lg leading-8 text-gray-600">
+          <p className="mt-6 max-w-3xl text-lg leading-8 text-gray-200">
             Discover peaceful platforms where every detail ensures a truly memorable stay.
           </p>
         </div>

src/components/Story.jsx

@@ -20,7 +20,7 @@ export default function NewFeatures() {
           <div className="lg:ml-auto lg:pl-4 lg:pt-0">
             <div className="lg:max-w-lg">
               <p className="mt-2 text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">OUR STORY</p>
-              <p className="mt-4 text-xl leading-8 tracking-wide ITALIC font-normal text-gray-600">
+              <p className="mt-4 text-xl leading-8 tracking-wide ITALIC font-normal text-gray-200">
               THE TALE OF SACRED ENERGIES OF THE NILE
               </p>
               <p className="mt-6 text-lg leading-7 font-light text-gray-500">

src/components/Story2.jsx

@@ -13,7 +13,7 @@ export default function NewFeatures2() {
               <p className="mt-4 text-lg leading-7 font-light text-gray-500">
               Frequencies are the new currency. Our mission is to help you recognize and align with different frequencies, creating a deeply fulfilling life in tune with your soul's gifts. Self-knowledge and self-mastery are the keys to fully opening your heart. By understanding and resonating with these frequencies, you can achieve a life of harmony and fulfillment.
               </p>
-              <p className="mt-4 text-lg leading-7 italic font-normal text-gray-600">
+              <p className="mt-4 text-lg leading-7 italic font-normal text-gray-200">
               Are you ready to step out of your comfort zone and embrace these changes? Can you let the new energies flow through you and break free from outdated programs to welcome new wisdom?
               </p>
               <p className="mt-4 text-lg leading-7 font-light text-gray-500">

src/components/Team.jsx

@@ -33,7 +33,7 @@ const people = [
         <div className="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
           <div className="mx-auto max-w-2xl lg:mx-0">
             <H2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">OUR PEOPLE</H2>
-            <p className="mt-6 text-lg leading-8 text-gray-600">
+            <p className="mt-6 text-lg leading-8 text-gray-200">
             We are a dynamic family of individuals from diverse cultural backgrounds and varied expertise, united by our passion in spirituality and dedication delivering heartfelt and authentic Nile experiences for our guests.
             </p>
           </div>
@@ -45,10 +45,10 @@ const people = [
               <li key={person.name}>
                 <img alt="" src={person.imageUrl} className="aspect-[4/4] w-full rounded-2xl object-cover" />
                 <h3 className="mt-6 text-lg font-semibold leading-8 text-gray-900">{person.name}</h3>
-                <p className="text-base leading-7 text-gray-600">{person.role}</p>
-                <p className="mt-4 text-base leading-7 text-gray-600">{person.bio}</p>
-                <p className="mt-2 text-base leading-7 text-gray-600">{person.bio2}</p>
-                <p className="mt-2 text-base leading-7 text-gray-600">{person.bio3}</p>
+                <p className="text-base leading-7 text-gray-200">{person.role}</p>
+                <p className="mt-4 text-base leading-7 text-gray-200">{person.bio}</p>
+                <p className="mt-2 text-base leading-7 text-gray-200">{person.bio2}</p>
+                <p className="mt-2 text-base leading-7 text-gray-200">{person.bio3}</p>
                 <ul role="list" className="mt-6 flex gap-x-6">
                   <li>
                     <a href={person.Url} className="text-gray-400 hover:text-gray-500" target='_blank' rel="noopener noreferrer">

src/components/ThirdFeatures.jsx

@@ -26,7 +26,7 @@ const ThirdFeatures = () => {
               <h1 className="mt-24 text-4xl font-bold tracking-tight text-gray-800 sm:mt-10 sm:text-6xl">
                 Data to enrich your online business
               </h1>
-              <p className="mt-6 text-lg leading-8 text-gray-600">
+              <p className="mt-6 text-lg leading-8 text-gray-200">
                 Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet
                 fugiat veniam occaecat fugiat aliqua.
               </p>

src/components/Veda1.jsx

@@ -19,52 +19,75 @@ const product = {
     {
       id: 1,
       name: 'Veda',
-      src: '/images/veda10.jpg',
+      src: '/images/dahabiyas/veda1/veda1_1.jpg',
       alt: 'Veda1',
     },
     {
-      id: 1,
+      id: 2,
       name: 'Veda',
-      src: '/images/veda11.jpg',
+      src: '/images/dahabiyas/veda1/veda1_3.jpg',
       alt: 'Veda1',
     },
     {
-      id: 1,
+      id: 3,
       name: 'Veda',
-      src: '/images/veda12.jpg',
+      src: '/images/dahabiyas/veda1/veda1_5.jpg',
       alt: 'Veda1',
     },
     {
-      id: 1,
+      id: 4,
       name: 'Veda',
-      src: '/images/veda13.jpg',
+      src: '/images/dahabiyas/veda1/veda1_6.jpg',
       alt: 'Veda1',
     },
     {
-      id: 1,
+      id: 5,
       name: 'Veda',
-      src: '/images/veda14.jpg',
+      src: '/images/dahabiyas/veda1/veda1_7.jpg',
       alt: 'Veda1',
     },
     {
-      id: 1,
+      id: 6,
       name: 'Veda',
-      src: '/images/veda15.jpg',
+      src: '/images/dahabiyas/veda1/veda1_8.jpg',
       alt: 'Veda1',
     },
     {
-      id: 1,
+      id: 7,
       name: 'Veda',
-      src: '/images/veda17.jpg',
+      src: '/images/dahabiyas/veda1/veda1_9.jpg',
       alt: 'Veda1',
     },
     {
-      id: 1,
+      id: 8,
       name: 'Veda',
-      src: '/images/veda18.jpg',
+      src: '/images/dahabiyas/veda1/veda1_10.jpg',
+      alt: 'Veda1',
+    },
+    {
+      id: 9,
+      name: 'Veda',
+      src: '/images/dahabiyas/veda1/veda1_11.jpg',
+      alt: 'Veda1',
+    },
+    {
+      id: 10,
+      name: 'Veda',
+      src: '/images/dahabiyas/veda1/veda1_12.jpg',
+      alt: 'Veda1',
+    },
+    {
+      id: 11,
+      name: 'Veda',
+      src: '/images/dahabiyas/veda1/veda1_13.jpg',
+      alt: 'Veda1',
+    },
+    {
+      id: 12,
+      name: 'Veda',
+      src: '/images/dahabiyas/veda1/veda1_14.jpg',
       alt: 'Veda1',
     },
-    // More images...
   ],
   colors: [
     { name: 'Washed Black', bgColor: 'bg-gray-700', selectedColor: 'ring-gray-700' },
@@ -127,7 +150,7 @@ export default function Example() {
               </TabList>
             </div>
 
-            <TabPanels className="aspect-h-1 aspect-w-1 w-full">
+            <TabPanels className="aspect-h-9 aspect-w-16 w-full">
               {product.images.map((image) => (
                 <TabPanel key={image.id}>
                   <img

src/components/Veda2.jsx

@@ -14,51 +14,81 @@ const product = {
   images: [
     {
       id: 1,
-      name: 'Veda 1',
-      src: '/images/veda20.jpg',
-      alt: 'Veda2 Veda 1',
+      name: 'Veda',
+      src: '/images/dahabiyas/veda2/veda2_1.jpg',
+      alt: 'Veda2',
     },
     {
       id: 2,
-      name: 'Veda 2',
-      src: '/images/veda21.jpg',
-      alt: 'Veda2 Veda 2',
+      name: 'Veda',
+      src: '/images/dahabiyas/veda2/veda2_8.jpg',
+      alt: 'Veda2',
     },
     {
       id: 3,
-      name: 'Veda 3',
-      src: '/images/veda22.jpg',
-      alt: 'Veda2 Veda 3',
+      name: 'Veda',
+      src: '/images/dahabiyas/veda2/veda2_10.jpg',
+      alt: 'Veda2',
     },
     {
       id: 4,
-      name: 'Veda 4',
-      src: '/images/veda23.jpg',
-      alt: 'Veda2 Veda 4',
+      name: 'Veda',
+      src: '/images/dahabiyas/veda2/veda2_14.jpg',
+      alt: 'Veda2',
     },
     {
       id: 5,
-      name: 'Veda 4',
-      src: '/images/veda24.jpg',
-      alt: 'Veda2 Veda 4',
+      name: 'Veda',
+      src: '/images/dahabiyas/veda2/veda2_16.jpg',
+      alt: 'Veda2',
     },
     {
       id: 6,
-      name: 'Veda 4',
-      src: '/images/veda25.jpg',
-      alt: 'Veda2 Veda 4',
+      name: 'Veda',
+      src: '/images/dahabiyas/veda2/veda2_18.jpg',
+      alt: 'Veda2',
     },
     {
       id: 7,
-      name: 'Veda 4',
-      src: '/images/veda26.jpg',
-      alt: 'Veda2 Veda 4',
+      name: 'Veda',
+      src: '/images/dahabiyas/veda2/veda2_22.jpg',
+      alt: 'Veda2',
     },
     {
       id: 8,
-      name: 'Veda 4',
-      src: '/images/veda27.jpg',
-      alt: 'Veda2 Veda 4',
+      name: 'Veda',
+      src: '/images/dahabiyas/veda2/veda2_26.jpg',
+      alt: 'Veda2',
+    },
+    {
+      id: 9,
+      name: 'Veda',
+      src: '/images/dahabiyas/veda2/veda2_29.jpg',
+      alt: 'Veda2',
+    },
+    {
+      id: 10,
+      name: 'Veda',
+      src: '/images/dahabiyas/veda2/veda2_31.jpg',
+      alt: 'Veda2',
+    },
+    {
+      id: 11,
+      name: 'Veda',
+      src: '/images/dahabiyas/veda2/veda2_32.jpg',
+      alt: 'Veda2',
+    },
+    {
+      id: 12,
+      name: 'Veda',
+      src: '/images/dahabiyas/veda2/veda2_36.jpg',
+      alt: 'Veda2',
+    },
+    {
+      id: 13,
+      name: 'Veda',
+      src: '/images/dahabiyas/veda2/veda2_37.jpg',
+      alt: 'Veda2',
     },
   ],
   colors: [
@@ -101,7 +131,7 @@ export default function Example() {
         <div className="lg:grid lg:grid-cols-2 lg:gap-x-8">
           {/* Image gallery */}
           <TabGroup className="lg:order-last">
-            <TabPanels className="aspect-h-1 aspect-w-1 w-full">
+            <TabPanels className="aspect-h-9 aspect-w-16 w-full">
               {product.images.map((image) => (
                 <TabPanel key={image.id}>
                   <img