add hackathon page

src/app/(pages)/Hackathon/Card.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { FaGithub } from 'react-icons/fa';
+import Image from 'next/image';
+
+function Card({ title, description, image, link }) {
+  return (
+    <div className="max-w-sm rounded-lg overflow-hidden shadow-lg transition-transform duration-300 transform hover:scale-105 hover:shadow-2xl m-4 bg-gray-300 flex flex-col justify-between">
+      {/* Image Section */}
+      <div className="relative h-44 w-full">
+        <Image
+          src={image}
+          alt={title}
+          className="rounded-t-lg w-full object-cover"
+          layout="fill"
+        />
+      </div>
+
+      {/* Content Section */}
+      <div className="px-6 py-4 flex-grow">
+        <div className="font-bold text-2xl text-gray-800 mb-3">{title}</div>
+        <p className="text-gray-700 text-sm leading-relaxed">{description}</p>
+      </div>
+
+      {/* Action Button Section */}
+      <div className="px-6 py-4 flex justify-center">
+        <a
+          href={link}
+          className="inline-block px-4 py-2 bg-gradient-to-r from-blue-500 to-indigo-500 text-white rounded-lg shadow-md hover:from-blue-600 hover:to-indigo-600 transition duration-300 transform hover:scale-105"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <FaGithub className="inline-block mr-2" />
+          View on GitHub
+        </a>
+      </div>
+    </div>
+  );
+}
+
+export default Card;

src/app/(pages)/Hackathon/page.jsx

@@ -0,0 +1,80 @@
+'use client'
+import React, { useState } from 'react';
+import Card from './Card.jsx';
+import { hackathonProjects } from '../../../lib/Hackathon';
+import { motion } from 'framer-motion';
+
+function ProjectsPage() {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  // Filter projects based on search query
+  const filteredProjects = hackathonProjects.filter((project) =>
+    project.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    project.description.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  return (
+    <div>
+      <div className="flex flex-col mx-4">
+        {/* Heading Section */}
+        <div className="text-center pt-10">
+          <motion.h1
+            className="text-5xl font-extrabold bg-gradient-to-r from-blue-500 to-purple-500 text-transparent bg-clip-text"
+            initial={{ opacity: 0, y: -50 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+          >
+            Girl Hackathon 2024
+          </motion.h1>
+
+          <motion.p
+            className="text-gray-600 text-xl mt-4 max-w-3xl mx-auto"
+            initial={{ opacity: 0, y: 50 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+          >
+            Girl Hackathon is a program for women students in computer science and allied courses across India.
+          </motion.p>
+        </div>
+
+        {/* Search Bar */}
+        <div className="flex justify-center mt-8">
+          <input
+            type="text"
+            className="px-4 py-2 border border-gray-300 rounded-lg w-full max-w-lg text-gray-800"
+            placeholder="Search for hackathons..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+
+        {/* Cards Section */}
+        <div className="flex justify-center flex-wrap mt-8">
+          {filteredProjects && filteredProjects.length > 0 ? (
+            filteredProjects.map((project, index) => (
+              <motion.div
+                key={project.title}
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                initial={{ opacity: 0, y: 50 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: index * 0.2 }}
+              >
+                <Card
+                  title={project.title}
+                  description={project.description}
+                  image={project.image}
+                  link={project.link}
+                />
+              </motion.div>
+            ))
+          ) : (
+            <p>No projects match your search</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ProjectsPage;

src/components/Global/Header.jsx

@@ -88,6 +88,11 @@ export function NavigationMenu() {
                     Projects
                   </NavigationMenuLink>
                 </Link>
+                <Link href="/Hackathon" legacyBehavior passHref>
+                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                  Hackathons
+                  </NavigationMenuLink>
+                </Link>
               </NavigationMenuItem>
               <NavigationMenuItem>
                 <Link href="/Events" legacyBehavior passHref>

src/lib/Hackathon.js

@@ -0,0 +1,53 @@
+import Img1 from "../../public/hack1.jpg";
+
+export const hackathonProjects = [
+    {
+        title: 'HacktoberFest 2024 Challenge',
+        description: 'Kickstart your Hacktoberfest 2024 journey by contributing to open-source projects with GDSC JU! Whether you are a beginner or an expert, there’s something for everyone. Contribute to web development, AI, and other exciting fields.',
+        image: Img1,
+        link: 'https://github.com/GDSC-RCCIIT/gdg-website',
+        challenge: 'Contribute at least 4 pull requests to any open-source repository to complete the Hacktoberfest challenge.',
+    },
+    {
+        title: 'GDSC Website Challenge',
+        description: 'Join the GDSC JU hackathon by building features for the official GDSC website. Work on front-end and back-end tasks to improve the platform’s usability and performance.',
+        image: Img1,
+        link: 'https://github.com/GDSC-RCCIIT/gdg-website',
+        challenge: 'Build new features, fix bugs, and enhance the user experience on the official website. Front-end and back-end developers welcome!',
+    },
+    {
+        title: 'AI-Powered News Aggregator Hack',
+        description: 'Develop an AI-powered news aggregator that curates the latest tech news from multiple sources and personalizes recommendations. Ideal for participants interested in machine learning and AI.',
+        image: Img1,
+        link: 'https://github.com/GDSC-RCCIIT/gdg-website',
+        challenge: 'Implement machine learning models to curate and recommend relevant news articles based on user preferences.',
+    },
+    {
+        title: 'GDSC Blog Platform Build',
+        description: 'Help create a platform where GDSC JU members can publish technical articles, tutorials, and blogs. The hackathon challenge involves both front-end and back-end tasks.',
+        image: Img1,
+        link: 'https://github.com/GDSC-RCCIIT/gdg-website',
+        challenge: 'Develop a blog platform with features like markdown support, user authentication, and search functionality.',
+    },
+    {
+        title: 'Open-Source Contribution Tracker',
+        description: 'Build a tool to track and display open-source contributions of GDSC members, particularly during Hacktoberfest. Showcase how each member has participated in open-source projects.',
+        image: Img1,
+        link: 'https://github.com/GDSC-RCCIIT/gdg-website',
+        challenge: 'Create a real-time tracking system for open-source contributions using GitHub’s API.',
+    },
+    {
+        title: 'Campus Event Management Hack',
+        description: 'Design and develop a comprehensive system for organizing GDSC events on campus, complete with RSVP functionality, event scheduling, and more.',
+        image: Img1,
+        link: 'https://github.com/GDSC-RCCIIT/gdg-website',
+        challenge: 'Implement an event management system with real-time notifications, user RSVPs, and event calendars.',
+    },
+    {
+        title: 'GDSC Member Portfolio Hack',
+        description: 'Create a customizable portfolio template for GDSC JU members to showcase their projects, skills, and contributions. This project requires front-end design and back-end integration skills.',
+        image: Img1,
+        link: 'https://github.com/GDSC-RCCIIT/gdg-website',
+        challenge: 'Develop a responsive portfolio template with project showcases, skills, and social media integration.',
+    },
+];