add new content

src/components/Exp.jsx

@@ -0,0 +1,42 @@
+const features = [
+    { name: 'Mind and Body Practices', description: 'Activities that enhance physical well-being and mental clarity through mindful movement and meditation.' },
+    { name: 'Healing and Wellness Therapies', description: 'Therapeutic activities designed to promote relaxation, rejuvenation, and overall well-being.' },
+    { name: 'Holistic Health and Nutrition', description: 'Programs focused on nourishing the body and promoting health through mindful eating and natural remedies.' },
+    { name: 'Creative and Expressive Workshops', description: 'Opportunities for self-expression and exploration through artistic and creative endeavors.' },
+    { name: 'Relaxation and Reflection', description: 'Activities that encourage rest, introspection, and a deeper connection with oneself and the natural world.' },
+    { name: 'Entertainment and Performance Arts', description: 'Experiences that offer enjoyment and inspiration through music, dance, and captivating performances.' },
+  ]
+  
+  export default function Example() {
+    return (
+      <div className="bg-creme-600">
+        <div aria-hidden="true" className="relative">
+          <img
+            alt=""
+            src="/images/exp.jpg"
+            className="h-96 w-full object-cover object-center"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-creme-600" />
+        </div>
+  
+        <div className="relative mx-auto -mt-12 max-w-7xl px-4 pb-16 sm:px-6 sm:pb-24 lg:px-8">
+          <div className="mx-auto max-w-2xl text-center lg:max-w-4xl">
+            <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">VEDA EXPERIENCES</h2>
+            <p className="mt-4 text-gray-900">
+              Join us for transformative journeys of wellness, creativity, and connection on the tranquil and sacred Nile.
+            </p>
+          </div>
+  
+          <dl className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 sm:gap-y-16 lg:max-w-none lg:grid-cols-3 lg:gap-x-8">
+            {features.map((feature) => (
+              <div key={feature.name} className="border-t border-gray-200 pt-4">
+                <dt className="font-medium text-gray-900">{feature.name}</dt>
+                <dd className="mt-2 text-sm text-gray-500">{feature.description}</dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </div>
+    )
+  }
+