Gallery section

src/assets/gallery/index.js

@@ -0,0 +1,13 @@
+import image1 from './image1.png';
+import image2 from './image2.png';
+import image3 from './image3.png';
+import image4 from './image4.png';
+import image5 from './image5.png';
+import image6 from './image6.png';
+import image7 from './image7.png';
+import image8 from './image8.jpg';
+import image9 from './image9.jpeg';
+
+const images = [image1, image2, image3, image4, image5, image6, image7,image8,image9];
+
+export default images;

src/components/Navbar.jsx

@@ -9,6 +9,7 @@ const Navbar = () => {
     { name: "Home", link: "/" },
     { name: "About Us", link: "/#aboutCommunity" },
     { name: "Events", link: "/events" },
+    { name: "Gallery", link: "/gallery" },
     { name: "Team", link: "/team" },
     { name: "FAQs", link: "/#faqs" },
     { name: "Contributors", link: "/Contributors" },

src/pages/gallery/index.jsx

@@ -0,0 +1,52 @@
+import images from '@/assets/gallery/index';
+import Footer from '@/components/Footer';
+import Navbar from '@/components/Navbar';
+import ScrollToTop from '@/components/ScrollToTop';
+import Image from 'next/image';
+import { useState } from 'react';
+
+const Gallery = () => {
+    const [hoveredIndex, setHoveredIndex] = useState(null);
+
+    return (
+        <>
+            <Navbar />
+            <div style={{ marginTop: 80, marginBottom: 50, color: 'white', alignItems: 'center' }}>
+                <h1 className="text-5xl font-bold text-center text-blue-500">Welcome to the DevsinTech Community Gallery Page!</h1>
+            </div>
+
+            <div className="flex flex-wrap justify-center">
+                {images.map((image, index) => (
+                    <div
+                        key={index}
+                        className="w-1/2 sm:w-1/3 lg:w-1/6 p-4 relative overflow-hidden transition duration-500 transform hover:-translate-y-1 hover:scale-110"
+                        onMouseEnter={() => setHoveredIndex(index)}
+                        onMouseLeave={() => setHoveredIndex(null)}
+                    >
+                        <div
+                            className={`w-full h-40 ${hoveredIndex === index ? 'grayscale-0' : 'grayscale'}`}
+                            style={{
+                                border: '2px solid',
+                                borderColor: hoveredIndex === index ? '#AF7AF2' : 'transparent',
+                                borderWidth: hoveredIndex === index ? '4px' : '2px',
+                                background: 'linear-gradient(to right, #AF7AF2, #A5F7A8, #AF7AF2)',
+                            }}
+                        >
+                            <Image
+                                src={image}
+                                alt={`Image ${index + 1}`}
+                                layout="fill"
+                                objectFit="cover"
+                            />
+                        </div>
+                    </div>
+                ))}
+            </div>
+
+            <ScrollToTop />
+            <Footer />
+        </>
+    );
+};
+
+export default Gallery;