Merge branch 'OpencodeNIT-R:main' into latest-branch

Author: Krish-2118

package-lock.json

@@ -1,6 +1,6 @@
 import Footer from "./components/Footer.jsx";
 import Navbar from "./components/Navbar.jsx";
-import { Outlet } from "react-router";
+import { Outlet } from "react-router-dom";
 
 const App = () => {
   return (

src/App.jsx

@@ -3,7 +3,10 @@ import { siteConfig } from "../config/navbarHero";
 
 export default function AboutSection() {
   return (
-    <section className="bg-white px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-16">
+    <section
+      id="about"
+      className="bg-white px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-16"
+    >
       <div className="w-full max-w-[1600px] mx-auto flex flex-col md:flex-row items-center justify-between gap-y-10 gap-x-10 xl:gap-x-12 2xl:gap-x-14">
         <div className="w-full max-w-[500px] px-2 md:px-0 mt-10 md:mt-0">
           <img
@@ -29,12 +32,15 @@ export default function AboutSection() {
           </p>
 
           <div className="flex flex-col sm:flex-row sm:justify-center md:justify-start items-center mt-6 gap-4">
-            <Button
-              className="bg-white text-blue-600 px-10 shadow-lg py-2 rounded-md border border-black transition duration-300 ease-in-out hover:bg-[rgba(6,25,70,1)] hover:text-white"
+            <a
+              href="#cards"
+              role="button"
+              tabIndex={0}
+              className=" text-2xl h-12 justify-center items-center flex bg-[rgba(6,25,70,1)] text-[#ccc0c0] underline-offset-4 transition duration-300 ease-in-out hover:bg-none hover:bg-white hover:text-[#061946] font-semibold py-2 px-4 rounded"
               style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
             >
               {siteConfig.about.button}
-            </Button>
+            </a>
           </div>
         </div>
       </div>

src/assets/achievementimg.jpg

@@ -1,50 +1,30 @@
 import { Calendar } from "lucide-react";
 
-const AchievementCard = ({
-  title,
-  description,
-  image,
-  date,
-  isLeft,
-  index,
-}) => {
+const AchievementCard = ({ title, description, year, isLeft, index }) => {
   return (
     <div
       className={`flex items-center w-full mb-16 ${isLeft ? "justify-start" : "justify-end"}`}
+      data-index={index}
       style={{ animationDelay: `${index * 200}ms` }}
     >
       <div
         className={`
-          w-full max-w-md bg-gradient-card rounded-2xl shadow-card hover:shadow-card-hover 
+          w-full max-w-md rounded-2xl shadow-lg hover:shadow-xl border border-gray-200
           transition-all duration-500 hover:scale-105 group cursor-pointer
-          ${isLeft ? "animate-slide-in-left" : "animate-slide-in-right"}
+          bg-white hover:border-blue-300
         `}
       >
-        {/* Image */}
-        <div className="relative overflow-hidden rounded-t-2xl">
-          <img
-            src={image}
-            alt={title}
-            className="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110"
-          />
-          <div className="absolute inset-0 bg-primary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-        </div>
-
-        {/* Content */}
         <div className="p-6">
-          <div className="flex items-center text-muted text-sm mb-3">
+          <div className="flex items-center text-gray-500 text-sm mb-3">
             <Calendar className="h-4 w-4 mr-2" />
-            <span className="font-medium">{date}</span>
+            <span className="font-medium">{year}</span>
           </div>
-
-          <h3 className="text-xl font-bold text-foreground mb-3 group-hover:text-primary transition-colors duration-300">
+          <h3 className="text-xl font-bold mb-3 group-hover:texT-[#0B2044] transition-colors duration-300">
             {title}
           </h3>
+          <p className="text-gray-700 leading-relaxed">{description}</p>
 
-          <p className="text-muted ">{description}</p>
-
-          {/* Decorative element */}
-          <div className="mt-4 h-1 w-16 bg-gradient-primary rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+          <div className="mt-4 h-1 w-16 bg-blue-900 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
         </div>
       </div>
     </div>

src/components/AboutSection.jsx

@@ -1,11 +1,11 @@
-import { useNavigate } from "react-router";
+import { useNavigate } from "react-router-dom";
 import achievementsData from "../config/achievement";
 
 export default function Achievements() {
   const navigate = useNavigate();
 
   return (
-    <div className="px-4 md:px-12 py-8 max-w-screen-xl mx-auto">
+    <div className="px-4 pt-32 md:pt-40 md:px-12 py-8 max-w-screen-xl mx-auto">
       <div className="md:mb-48 mb-12">
         <h2 className="text-3xl font-bold text-blue-900 mb-4">
           Our Achievements
@@ -19,8 +19,8 @@ export default function Achievements() {
           solidifying their reputation for excellence in mechanical engineering.
         </p>
         <button
-          className="bg-white text-blue-800 border border-blue-800 px-4 py-2 rounded hover:bg-blue-50 md:mb-12"
-          onClick={() => navigate("/achievementpage")}
+          className="bg-[rgba(6,25,70,1)] text-white border-blue-800 px-4 py-2 rounded hover:bg-blue-50 md:mb-12  hover:text-black"
+          onClick={() => navigate("/achievements")}
         >
           View All Achievements &gt;
         </button>
@@ -31,25 +31,38 @@ export default function Achievements() {
         <div className="md:hidden absolute left-2 top-0 h-full w-1 bg-black z-0"></div>
 
         <div className="flex flex-col md:flex-row items-start md:items-center justify-between relative z-10 md:mb-60">
-          {achievementsData.map((item, index) => (
-            <div
-              key={index}
-              className={`w-full md:w-1/4 px-4 md:mb-0 flex md:flex-col items-start md:items-center relative`}
-            >
-              <div className="absolute md:static left-0 md:left-auto top-2 md:top-auto md:mb-4 transform -translate-y-1/2 md:translate-y-1/2 w-4.5 h-4.5 bg-black border-2 border-white rounded-full z-20"></div>
-
+          {achievementsData
+            .filter((item) => item.id <= 5)
+            .map((item, index) => (
               <div
-                className={`bg-white p-4 rounded-md w-full max-w-xs md:mt-0 md:absolute ${
-                  index % 2 === 0
-                    ? "md:top-1/2 md:translate-y-6 self-start"
-                    : "md:bottom-1/2 md:-translate-y-6 self-end"
-                }`}
+                key={index}
+                className={`w-full md:w-1/4 px-4 md:mb-0 flex md:flex-col items-start md:items-center relative`}
               >
-                <h3 className="font-bold text-lg text-black">{item.title}</h3>
-                <p className="text-sm text-gray-600 mt-2">{item.description}</p>
+                <div className="absolute md:static left-0 md:left-auto top-2 md:top-auto md:mb-4 transform -translate-y-1/2 md:translate-y-1/2 w-4.5 h-4.5 bg-black border-2 border-white rounded-full z-20"></div>
+
+                <div
+                  className={`bg-white p-4 rounded-md w-full max-w-xs md:mt-0 md:absolute ${
+                    index % 2 === 0
+                      ? "md:top-1/2 md:translate-y-6 self-start"
+                      : "md:bottom-1/2 md:-translate-y-6 self-end"
+                  }`}
+                >
+                  <h3 className="font-bold text-lg text-black">{item.year}</h3>
+                  <h4
+                    className="text-sm text-black decoration-4"
+                    style={{ display: "inline" }}
+                  >
+                    {item.title}:{" "}
+                  </h4>
+                  <p
+                    className="text-sm text-gray-700"
+                    style={{ display: "inline" }}
+                  >
+                    {item.description}
+                  </p>
+                </div>
               </div>
-            </div>
-          ))}
+            ))}
         </div>
       </div>
     </div>

src/components/AchievementCard.jsx

@@ -1,21 +1,19 @@
 import React from "react";
 
-const EventCard = () => {
+const EventCard = ({ title, description, image }) => {
   return (
     <div className="bg-gray-50 rounded-xl shadow-md overflow-hidden flex flex-col md:flex-row border-2 border-[#0B2044]">
       <img
-        src="https://res.cloudinary.com/dswk9scro/image/upload/v1752313324/image_urekzp.png"
-        alt="Event"
-        className="w-full md:w-2/5 object-cover"
+        src={image}
+        alt={title}
+        className="w-full md:w-2/5 object-cover aspect-[4/3]"
       />
       <div className="p-4 flex flex-col justify-center">
-        <h3 className="text-xl font-semibold text-[#0B2044]">Sample Event</h3>
-        <p className="text-sm text-gray-600 mt-1">
-          Placeholder description for the event.
-        </p>
-        <p className="text-sm text-gray-400 mt-2">Date: 25 Aug 2025</p>
+        <h3 className="text-2xl font-semibold text-[#0B2044]">{title}</h3>
+        <p className="text-base text-gray-600 mt-2">{description}</p>
       </div>
     </div>
   );
 };
+
 export default EventCard;

src/components/Achievements.jsx

@@ -1,56 +1,32 @@
 import { Link } from "react-router-dom";
-import {
-  FaFacebookF,
-  FaTwitter,
-  FaInstagram,
-  FaLinkedinIn,
-} from "react-icons/fa";
+import { FaInstagram, FaLinkedinIn } from "react-icons/fa";
 import { FiMail, FiPhone } from "react-icons/fi";
 import { GoLocation } from "react-icons/go";
+
 const Footer = ({
   title = "ASME NIT Rourkela Chapter",
   description = "The American Society of Mechanical Engineers Student Chapter at NIT Rourkela, fostering a culture of innovation and technical learning through innovation, collaboration, and hands-on learning.",
-
   social = {
-    facebook: "#",
-    twitter: "#",
-    instagram: "#",
-    linkedin: "#",
+    instagram: "https://www.instagram.com/asme.nitrkl/",
+    linkedin: "https://www.linkedin.com/company/asme-nit-rourkela",
   },
   year = new Date().getFullYear(),
 }) => {
   return (
-    <footer className="bg-[#0B2044] text-white px-10 py-8">
-      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
-        {/* Left Section */}
-        <div>
-          <div className="flex gap-4 mb-4 flex-wrap">
+    <footer className="bg-[#0B2044] text-white px-4 py-8 sm:px-8 sm:py-10 md:px-12 md:py-12">
+      <div className="max-w-7xl mx-auto grid grid-cols-1 gap-10 sm:gap-12 md:grid-cols-3 md:gap-8">
+        {/* Logo and Description Section */}
+        <div className="order-1 md:order-none">
+          <div className="flex items-center gap-4 mb-6 flex-wrap">
             <img
               src="https://res.cloudinary.com/dswk9scro/image/upload/v1752377324/Group_cropped_qgqzw9.png"
               alt="ASME Logo"
-              className="w-8 h-8 object-contain"
+              className="w-12 h-12 object-contain"
             />
-            <h2 className="text-xl font-bold">{title}</h2>
+            <h2 className="text-2xl font-bold">{title}</h2>
           </div>
-
-          <p className="text-sm">{description}</p>
-          <div className="flex gap-4 mt-4 text-lg">
-            <a
-              href={social.facebook}
-              aria-label="Facebook"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <FaFacebookF className="hover:text-gray-300 transition" />
-            </a>
-            <a
-              href={social.twitter}
-              aria-label="Twitter"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <FaTwitter className="hover:text-gray-300 transition" />
-            </a>
+          <p className="text-base mb-6">{description}</p>
+          <div className="flex gap-6 text-2xl">
             <a
               href={social.instagram}
               aria-label="Instagram"
@@ -102,20 +78,20 @@ const Footer = ({
           </ul>
         </div>
 
-        {/* Right Section */}
-        <div>
-          <h3 className="text-lg font-semibold">Contact Info</h3>
-          <div className="text-sm mt-4 text-white space-y-4">
+        {/* Contact Info Section */}
+        <div className="order-2 md:order-none">
+          <h3 className="text-2xl font-semibold mb-6">Contact Info</h3>
+          <div className="text-base space-y-6">
             <div className="flex items-center gap-4">
-              <FiMail className=" text-[#51B8F2] text-xl  hover:text-white transition" />
-              <span>contact@asmenitrkl.ac.in</span> {/* To be added */}
+              <FiMail className="text-[#51B8F2] text-2xl hover:text-white transition" />
+              <span>asme.nitrkl@gmail.com</span>
             </div>
             <div className="flex items-center gap-4">
-              <FiPhone className="text-[#51B8F2] text-xl hover:text-white transition" />
-              <span>+91-1234567890</span> {/* To be added */}
+              <FiPhone className="text-[#51B8F2] text-2xl hover:text-white transition" />
+              <span>+91-1234567890</span>
             </div>
             <div className="flex items-start gap-4">
-              <GoLocation className=" text-[#51B8F2] text-xl mt-1 hover:text-white transition" />
+              <GoLocation className="text-[#51B8F2] text-2xl mt-1 hover:text-white transition" />
               <span>
                 National Institute of Technology Rourkela, <br /> Odisha -
                 769008
@@ -125,7 +101,7 @@ const Footer = ({
         </div>
       </div>
 
-      <div className="text-center text-sm mt-8 border-t border-white/20 pt-4">
+      <div className="text-center text-base mt-10 border-t border-white/20 pt-6">
         © {year} {title}. All rights reserved.
       </div>
     </footer>

src/components/EventCard.jsx

@@ -17,7 +17,9 @@ export default function GalarySection() {
         <p className="text-black-600 mb-6">
           Explore our vibrant moments captured in stunning visuals.
         </p>
-        <TButton>Go to Gallery &gt;</TButton>
+        <a href="/gallery">
+          <TButton>Go to Gallery &gt;</TButton>
+        </a>
       </div>
 
       {/* Gallery Grid */}

src/components/Footer.jsx

@@ -34,12 +34,15 @@ export default function HeroSection() {
             >
               {siteConfig.hero.primaryButton}
             </Button>
-            <Button
-              className="bg-transparent text-[rgba(55,115,236,1)] underline-offset-4 transition duration-300 ease-in-out hover:bg-[rgba(55,115,236,1)] hover:text-white "
+            <a
+              href="#about"
+              role="button"
+              tabIndex={0}
+              className=" h-12 justify-center items-center flex bg-gradient-to-r from-blue-900 to-blue-950 text-[#e2cede] underline-offset-4 transition duration-300 ease-in-out hover:bg-none hover:bg-white hover:text-[#061946] font-semibold py-2 px-4 rounded"
               style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
             >
               {siteConfig.hero.secondaryLink}
-            </Button>
+            </a>
           </div>
         </div>