Merge pull request #65 from sliitsesc/git_gallery

Feat: Gallery

src/components/Gallery/Gallery.jsx

@@ -0,0 +1,39 @@
+import { landingPageData } from "../../lib/data/landingPageData";
+import { Link } from "react-router-dom"; 
+
+export default function Gallery() {
+  return (
+      <section className="py-12">
+        <div className="container mx-auto p-4 bg-black  px-8 py-10 text-center rounded-md dm-sans-400">
+
+          <div className="text-center mb-8">
+            <h1 className="text-[48px] dm-sans-600 font-bold text-white mb-5 drop-shadow-white-glow">
+              {landingPageData.gelleryItem.title}
+            </h1>
+            <p className="text-[20px] text-white">
+              {landingPageData.gelleryItem.content}
+            </p>
+          </div>
+
+
+            <div className="flex flex-col sm:flex-row gap-y-6 md:gap-y-14 gap-4 p-6 flex-wrap justify-center">
+                {landingPageData.gelleryItem.images.map((image, index) => (
+                        <Link key={index} to="#" className="relative w-full max-w-[320px]">
+                            <img
+                                src={image.src}
+                                alt={image.alt}
+                                className="w-full h-[420px] object-cover rounded-lg border-gray-300 grayscale"
+                            />
+
+                            <div
+                                className="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-white text-orange-600 px-6 py-2 rounded-lg w-[80%] text-left pl-2 font-bold shadow-white-glow">
+                                <p>{image.content}</p>
+                            </div>
+
+                        </Link>
+                ))}
+            </div>
+        </div>
+      </section>
+  );
+}

src/lib/data/landingPageData.js

@@ -72,6 +72,31 @@ export const landingPageData = {
       },
     ],
   },
+
+  gelleryItem: {
+    title: "Gallery",
+    content:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies.",
+      images: [
+        {
+          src: "/images/xtreme-2.0/sliitxtreme-2-photos-1.png",
+          alt: "SLIIT Xtreme 2.0 - Prizes",
+          content: "Highlights"
+        },
+        {
+          src: "/images/xtreme-2.0/sliitxtreme-2-photos-2.png",
+          alt: "SLIIT Xtreme 2.0 - Teams working",
+          content: "Highlights"
+        },
+        {
+          src: "/images/xtreme-2.0/sliitxtreme-2-photos-3.png",
+          alt: "SLIIT Xtreme 2.0 - Organizers",
+          content: "Highlights"
+        },
+
+      ],
+  },
+
   timelineSection: {
     title: "Timeline",
     subTitle:
@@ -131,5 +156,6 @@ export const landingPageData = {
         team: "Code Buddies",
       },
     ],
+
   },
 };

src/routes/home.jsx

@@ -4,9 +4,11 @@ import Awards from "../components/Awards/Awards";
 import Hero from "../components/Hero/Hero";
 import InfoSection from "../components/Info/InfoSection";
 import Stats from "../components/Stats/Stats";
+import Gallery from "../components/Gallery/Gallery";
 import Testimonials from "../components/Testimonials/Testimonials";
 import Timeline from "../components/Timeline/Timeline";
 
+
 export default function Home() {
   return (
     <>
@@ -35,6 +37,7 @@ export default function Home() {
       <InfoSection />
       <Stats />
       <Awards />
+      <Gallery/>
       <Timeline />
       <Testimonials />
     </>

tailwind.config.mjs

@@ -14,6 +14,10 @@ module.exports = {
         "orange-glow-bright": "0px 0px 25px #EF722690",
         "white-glow": "0px 0px 10px #FFFFFF60",
       },
+
+      boxShadow: {
+        'white-glow': '0 0 5px #fff, 0 0 3px #fff',
+      },
       backgroundImage: {
         "timeline-gradient":
           "linear-gradient(0deg, #000000 5%, #EF7226 10%, #EF7226 90%, #000000 95%)",