Add src/components/sections/gallery/GalleryOne.tsx

src/components/sections/gallery/GalleryOne.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+const GalleryOne = () => {
+  const images = [
+    '/images/courses-box-1.e8498908-1768918267950.png',
+    '/images/courses-box-2.2e36a41b-1768918267948.png',
+    '/images/courses.aee168f4-1768918267985.png',
+    '/images/256-1768918267936.png'
+  ];
+
+  return (
+    <section className="py-20 bg-gray-50 dark:bg-gray-800">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center mb-16">
+          <h2 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
+            Gallery
+          </h2>
+          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
+            Showcase of our work and components in action.
+          </p>
+        </div>
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {images.map((src, index) => (
+            <div key={index} className="bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-lg">
+              <img 
+                src={src} 
+                alt={`Gallery item ${index + 1}`}
+                className="w-full h-48 object-cover"
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default GalleryOne;