From 58d2c1ef247885b2afec7d5c8f86908df9e0db94 Mon Sep 17 00:00:00 2001
From: Dhrutinandan Swain <dhrut.24.swain@gmail.com>
Date: Sun, 17 Aug 2025 01:47:31 +0530
Subject: [PATCH] Refactor MissionCard and Navbar components for improved
 styling and functionality; add Applications page with application process
 details and links; enhance Timeline component with scroll animations and
 visual effects; update achievements data and navbar configuration.

---
 src/components/AchievementCard.jsx         | 101 ++++++-
 src/components/Footer.jsx                  | 210 ++++++++------
 src/components/MissionCard.jsx             |  17 +-
 src/components/Navbar.jsx                  |  24 +-
 src/components/Timeline.jsx                | 307 ++++++++++++++++-----
 src/config/achievement.js                  |  52 +++-
 src/config/navbarHero.js                   |  13 +-
 src/config/teammate.js                     |  17 --
 src/main.jsx                               |   2 +
 src/pages/achievements/AchievementPage.jsx |  18 +-
 src/pages/applications/Applications.jsx    | 180 ++++++++++++
 11 files changed, 713 insertions(+), 228 deletions(-)
 create mode 100644 src/pages/applications/Applications.jsx

diff --git a/src/components/AchievementCard.jsx b/src/components/AchievementCard.jsx
index 82734e0..89f1b77 100644
--- a/src/components/AchievementCard.jsx
+++ b/src/components/AchievementCard.jsx
@@ -1,30 +1,105 @@
-import { Calendar } from "lucide-react";
+import { Calendar, Award, TrendingUp } from "lucide-react";
+import { useState, useEffect } from "react";
 
 const AchievementCard = ({ title, description, year, isLeft, index }) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setTimeout(() => setIsVisible(true), index * 100);
+        }
+      },
+      {
+        threshold: 0.2,
+        rootMargin: "0px 0px -50px 0px",
+      },
+    );
+
+    const cardElement = document.querySelector(`[data-card-index="${index}"]`);
+    if (cardElement) {
+      observer.observe(cardElement);
+    }
+
+    return () => observer.disconnect();
+  }, [index]);
+
   return (
     <div
-      className={`flex items-center w-full mb-16 ${isLeft ? "justify-start" : "justify-end"}`}
+      className={`w-full ${isLeft ? "text-left" : "text-right"}`}
       data-index={index}
-      style={{ animationDelay: `${index * 200}ms` }}
+      data-card-index={index}
     >
       <div
         className={`
-          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
-          bg-white hover:border-blue-300
+          max-w-md mx-auto rounded-xl shadow-lg border border-gray-100
+          transition-all duration-700 group cursor-pointer relative overflow-hidden
+          bg-white transform-gpu
+          ${isVisible ? "translate-y-0 opacity-100" : "translate-y-8 opacity-0"}
+          hover:scale-105 hover:shadow-2xl hover:border-[#51B8F2]
+          ${isLeft ? "ml-0" : "mr-0"}
         `}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
       >
-        <div className="p-6">
-          <div className="flex items-center text-gray-500 text-sm mb-3">
-            <Calendar className="h-4 w-4 mr-2" />
-            <span className="font-medium">{year}</span>
+        {/* Animated background gradient */}
+        <div className="absolute inset-0 bg-gradient-to-br from-[#0B2044]/5 via-transparent to-[#51B8F2]/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+
+        {/* Top accent line with animation */}
+        <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#0B2044] to-[#51B8F2] transition-all duration-500 group-hover:h-2">
+          <div className="h-full w-0 bg-gradient-to-r from-[#51B8F2] to-[#0B2044] transition-all duration-700 group-hover:w-full"></div>
+        </div>
+
+        <div className="relative p-6 pt-8">
+          {/* Year badge with enhanced styling */}
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center text-[#0B2044] text-sm font-semibold bg-[#51B8F2]/10 px-3 py-1.5 rounded-full">
+              <Calendar className="h-4 w-4 mr-2 text-[#51B8F2]" />
+              <span className="uppercase tracking-wide">{year}</span>
+            </div>
+            <div
+              className={`transition-all duration-300 ${
+                isHovered ? "scale-110 rotate-12" : "scale-100 rotate-0"
+              }`}
+            >
+              <Award className="h-5 w-5 text-[#51B8F2]" />
+            </div>
           </div>
-          <h3 className="text-xl font-bold mb-3 group-hover:texT-[#0B2044] transition-colors duration-300">
+
+          {/* Title with enhanced typography */}
+          <h3 className="text-xl font-bold mb-4 text-[#0B2044] group-hover:text-[#51B8F2] transition-colors duration-300 leading-tight">
             {title}
           </h3>
-          <p className="text-gray-700 leading-relaxed">{description}</p>
 
-          <div className="mt-4 h-1 w-16 bg-blue-900 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+          {/* Description with better spacing */}
+          <p className="text-gray-600 leading-relaxed text-sm mb-6">
+            {description}
+          </p>
+
+          {/* Enhanced progress bar with icon */}
+          <div className="flex items-center justify-between">
+            <div className="flex-1">
+              <div className="h-1 bg-gray-200 rounded-full overflow-hidden">
+                <div className="h-full bg-gradient-to-r from-[#0B2044] to-[#51B8F2] rounded-full transition-all duration-700 group-hover:w-full w-0"></div>
+              </div>
+            </div>
+            <TrendingUp
+              className={`ml-3 h-4 w-4 text-[#51B8F2] transition-all duration-300 ${
+                isHovered ? "translate-x-1" : ""
+              }`}
+            />
+          </div>
+        </div>
+
+        {/* Floating particles effect */}
+        <div className="absolute inset-0 pointer-events-none overflow-hidden">
+          <div className="absolute top-1/4 left-1/4 w-1 h-1 bg-[#51B8F2] rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-700 animate-pulse"></div>
+          <div
+            className="absolute top-3/4 right-1/4 w-1 h-1 bg-[#0B2044] rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-700 animate-pulse"
+            style={{ animationDelay: "0.5s" }}
+          ></div>
         </div>
       </div>
     </div>
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index ca85714..da3308a 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -13,104 +13,134 @@ const Footer = ({
   year = new Date().getFullYear(),
 }) => {
   return (
-    <footer className="bg-[#0B2044] text-white px-4 pt-4 pb-8 sm:px-8 sm:pt-6 sm:pb-10 md:px-12 md:pt-8 md:pb-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-3 flex-wrap">
-            <img
-              src="https://res.cloudinary.com/dswk9scro/image/upload/v1755092506/ASME_NIT_Rourkela_Student_Section_White_T_oe5ox2.png"
-              alt="ASME Logo"
-              className="w-24 h-20 object-contain -mt-1"
-            />
-            <h2 className="text-2xl font-bold">{title}</h2>
+    <footer className="bg-[#0B2044] text-white px-4 pt-8 pb-8 sm:px-8 sm:pt-10 sm:pb-10 md:px-12 md:pt-12 md:pb-12">
+      <div className="max-w-7xl mx-auto">
+        <div className="grid grid-cols-1 gap-12 lg:grid-cols-3 lg:gap-16">
+          {/* Logo and Description Section */}
+          <div className="lg:col-span-1">
+            <div className="flex items-start gap-4 mb-6">
+              <img
+                src="https://res.cloudinary.com/dswk9scro/image/upload/v1755092506/ASME_NIT_Rourkela_Student_Section_White_T_oe5ox2.png"
+                alt="ASME Logo"
+                className="w-20 h-16 object-contain flex-shrink-0"
+              />
+              <h2 className="text-xl sm:text-2xl font-bold leading-tight">
+                {title}
+              </h2>
+            </div>
+            <p className="text-gray-300 text-sm sm:text-base leading-relaxed mb-8 max-w-md">
+              {description}
+            </p>
+            <div className="flex gap-4">
+              <a
+                href={social.instagram}
+                aria-label="Instagram"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="p-3 bg-white/10 rounded-full hover:bg-[#51B8F2] transition-all duration-300 transform hover:scale-110"
+              >
+                <FaInstagram className="text-xl" />
+              </a>
+              <a
+                href={social.linkedin}
+                aria-label="LinkedIn"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="p-3 bg-white/10 rounded-full hover:bg-[#51B8F2] transition-all duration-300 transform hover:scale-110"
+              >
+                <FaLinkedinIn className="text-xl" />
+              </a>
+            </div>
           </div>
-          <p className="text-base mb-6">{description}</p>
-          <div className="flex gap-6 text-2xl">
-            <a
-              href={social.instagram}
-              aria-label="Instagram"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <FaInstagram className="hover:text-gray-300 transition" />
-            </a>
+
+          {/* Quick Links Section */}
+          <div className="lg:col-span-1">
+            <h3 className="text-xl sm:text-2xl font-semibold mb-6 text-white">
+              Quick Links
+            </h3>
+            <ul className="space-y-4">
+              <li>
+                <Link
+                  to="/team"
+                  className="text-gray-300 hover:text-[#51B8F2]  duration-200 text-sm sm:text-base inline-block hover:translate-x-1 transform transition-transform"
+                >
+                  Team
+                </Link>
+              </li>
+              <li>
+                <Link
+                  to="/events"
+                  className="text-gray-300 hover:text-[#51B8F2]  duration-200 text-sm sm:text-base inline-block hover:translate-x-1 transform transition-transform"
+                >
+                  Events
+                </Link>
+              </li>
+              <li>
+                <Link
+                  to="/achievements"
+                  className="text-gray-300 hover:text-[#51B8F2]  duration-200 text-sm sm:text-base inline-block hover:translate-x-1 transform transition-transform"
+                >
+                  Achievements
+                </Link>
+              </li>
+              <li>
+                <Link
+                  to="/gallery"
+                  className="text-gray-300 hover:text-[#51B8F2] duration-200 text-sm sm:text-base inline-block hover:translate-x-1 transform transition-transform"
+                >
+                  Gallery
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          {/* Contact Info Section */}
+          <div className="lg:col-span-1">
+            <h3 className="text-xl sm:text-2xl font-semibold mb-6 text-white">
+              Contact Info
+            </h3>
+            <div className="space-y-6">
+              <div className="flex items-center gap-4 group">
+                <div className="p-2 bg-[#51B8F2]/20 rounded-lg group-hover:bg-[#51B8F2]  duration-200">
+                  <FiMail className="text-[#51B8F2] text-xl group-hover:text-white  duration-200" />
+                </div>
+                <a
+                  href="mailto:asme.nitrkl@gmail.com"
+                  className="text-gray-300 hover:text-[#51B8F2]  duration-200 text-sm sm:text-base"
+                >
+                  asme.nitrkl@gmail.com
+                </a>
+              </div>
+              <div className="flex items-start gap-4 group">
+                <div className="p-2 bg-[#51B8F2]/20 rounded-lg group-hover:bg-[#51B8F2]  duration-200 mt-1">
+                  <GoLocation className="text-[#51B8F2] text-xl group-hover:text-white  duration-200" />
+                </div>
+                <span className="text-gray-300 text-sm sm:text-base leading-relaxed">
+                  National Institute of Technology Rourkela,
+                  <br />
+                  Odisha - 769008
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Copyright Section */}
+        <div className="border-t border-white/20 mt-12 pt-8">
+          <div className="flex flex-col sm:flex-row justify-between items-center gap-4 text-sm sm:text-base">
+            <p className="text-gray-300 text-center sm:text-left">
+              © {year} {title}. All rights reserved.
+            </p>
             <a
-              href={social.linkedin}
-              aria-label="LinkedIn"
+              href="https://opencodenitr.in/"
               target="_blank"
               rel="noopener noreferrer"
+              className="text-gray-300 hover:text-[#51B8F2]  duration-200 text-center sm:text-right"
             >
-              <FaLinkedinIn className="hover:text-gray-300 transition" />
+              Architected with ♥ by Team OpenCode
             </a>
           </div>
         </div>
-
-        {/* Middle Section */}
-        <div className="md:ml-15">
-          <h3 className="text-2xl font-semibold">Quick Links</h3>
-          <ul className="mt-5 space-y-3 text-base">
-            <li>
-              <Link to="/team" className="hover:underline">
-                Team
-              </Link>
-            </li>
-            <li>
-              <Link to="/events" className="hover:underline">
-                Events
-              </Link>
-            </li>
-            <li>
-              <Link to="/achievements" className="hover:underline">
-                Achievements
-              </Link>
-            </li>
-            <li>
-              <Link to="/gallery" className="hover:underline">
-                Gallery
-              </Link>
-            </li>
-          </ul>
-        </div>
-
-        {/* Contact Info Section */}
-        <div className="order-2 md:ml-6">
-          <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-2xl hover:text-white transition" />
-              <a
-                href="mailto:asme.nitrkl@gmail.com"
-                className="no-underline hover:underline"
-              >
-                asme.nitrkl@gmail.com
-              </a>
-            </div>
-            <div className="flex items-center gap-4">
-              <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-2xl mt-1 hover:text-white transition" />
-              <span>
-                National Institute of Technology Rourkela, <br /> Odisha -
-                769008
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="flex flex-col md:flex-row justify-between items-center text-base mt-5 border-t border-white/20 pt-2">
-        <p>
-          © {year} {title}. All rights reserved.
-        </p>
-        <a
-          href="https://opencodenitr.in/"
-          target="_blank"
-          className="hover:underline "
-        >
-          Architected with ♥ by Team OpenCode
-        </a>
       </div>
     </footer>
   );
diff --git a/src/components/MissionCard.jsx b/src/components/MissionCard.jsx
index 60e1bbf..7196138 100644
--- a/src/components/MissionCard.jsx
+++ b/src/components/MissionCard.jsx
@@ -1,19 +1,8 @@
 export default function MissionCard({ title, description }) {
   return (
-    <div className="bg-[#0A1440] text-white w-[300px] h-[320px] rounded-md shadow-md flex flex-col justify-center items-center text-center px-6 py-10">
-      <h4
-        className="font-bold text-[32px] leading-[150%] mb-6"
-        style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
-      >
-        {title}{" "}
-      </h4>
-
-      <p
-        className="text-[20px] leading-[150%] mb-4"
-        style={{ fontFamily: "Helvetica, Arial, sans-serif", fontWeight: 400 }}
-      >
-        {description}{" "}
-      </p>
+    <div className="bg-[#0A1440] text-white w-80 h-72 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 p-8 flex flex-col justify-center items-center text-center hover:scale-105 border border-gray-700/30">
+      <h4 className="font-bold text-2xl mb-6 leading-tight">{title}</h4>
+      <p className="text-gray-200 text-base leading-relaxed">{description}</p>
     </div>
   );
 }
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index c8d31c6..74396dd 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,10 +1,11 @@
 import { siteConfig } from "../config/navbarHero";
 import Button from "./shared/Button";
 import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 
 export default function Navbar() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-
+  const navigate = useNavigate();
   const [scrolled, setScrolled] = useState(false);
 
   useEffect(() => {
@@ -16,6 +17,17 @@ export default function Navbar() {
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
+  const handleJoinUsClick = () => {
+    navigate("/applications");
+  };
+
+  const handleContactUsClick = () => {
+    const footer = document.querySelector("footer");
+    if (footer) {
+      footer.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
   return (
     <header
       className={`w-full px-0 min-[1100px]:sticky fixed top-0 left-0 z-50 transition-all duration-300 ${
@@ -51,6 +63,7 @@ export default function Navbar() {
             backgroundColor="white"
             textColor="black"
             className="border border-black px-3 py-1.5 text-sm transition duration-300 ease-in-out hover:bg-[rgba(55,115,236,1)] hover:text-white hover:border-none"
+            onClick={handleJoinUsClick}
           >
             Join Us
           </Button>
@@ -59,6 +72,7 @@ export default function Navbar() {
             backgroundColor="rgba(6,25,70,1)"
             textColor="white"
             className="px-3 py-1.5 text-sm transition duration-300 ease-in-out hover:bg-white hover:text-[rgba(6,25,70,1)]"
+            onClick={handleContactUsClick}
           >
             Contact Us
           </Button>
@@ -134,6 +148,10 @@ export default function Navbar() {
             backgroundColor="transparent"
             textColor="white"
             className="w-full border border-white px-4 py-3 text-center text-base transition duration-300 hover:bg-white hover:text-[rgba(6,25,70,1)]"
+            onClick={() => {
+              handleJoinUsClick();
+              setMobileMenuOpen(false);
+            }}
           >
             Join Us
           </Button>
@@ -142,6 +160,10 @@ export default function Navbar() {
             backgroundColor="white"
             textColor="rgba(6,25,70,1)"
             className="w-full px-4 py-3 text-center text-base transition duration-300 hover:bg-blue-100"
+            onClick={() => {
+              handleContactUsClick();
+              setMobileMenuOpen(false);
+            }}
           >
             Contact Us
           </Button>
diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx
index b516694..d0f3425 100644
--- a/src/components/Timeline.jsx
+++ b/src/components/Timeline.jsx
@@ -1,106 +1,287 @@
 import { useEffect, useRef, useState } from "react";
 import AchievementCard from "./AchievementCard";
 import achievementsData from "../config/achievement";
+import { Sparkles } from "lucide-react";
 
 const Timeline = () => {
   const timelineRef = useRef(null);
+  const containerRef = useRef(null);
   const [visibleDots, setVisibleDots] = useState(new Set());
+  const [visibleLines, setVisibleLines] = useState(new Set());
+  const [scrollProgress, setScrollProgress] = useState(0);
 
   useEffect(() => {
+    // Scroll progress for timeline line animation
+    const handleScroll = () => {
+      if (containerRef.current) {
+        const container = containerRef.current;
+        const rect = container.getBoundingClientRect();
+        const windowHeight = window.innerHeight;
+
+        // Calculate when the timeline section enters the viewport
+        const sectionTop = rect.top;
+        const sectionHeight = rect.height;
+
+        // Start animation when section is 20% visible from bottom
+        const startPoint = windowHeight - windowHeight * 0.2;
+        const endPoint = -sectionHeight + windowHeight * 0.8;
+
+        // Calculate progress (0 to 1)
+        let progress = 0;
+        if (sectionTop <= startPoint && sectionTop >= endPoint) {
+          progress = (startPoint - sectionTop) / (startPoint - endPoint);
+        } else if (sectionTop < endPoint) {
+          progress = 1;
+        }
+
+        setScrollProgress(Math.max(0, Math.min(1, progress)));
+      }
+    };
+
+    // Intersection Observer for individual cards and dots
     const observer = new IntersectionObserver(
       (entries) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
             const index = parseInt(
-              entry.target.getAttribute("data-index") || "0",
+              entry.target.getAttribute("data-timeline-index") || "0",
             );
-            setVisibleDots((prev) => new Set([...prev, index]));
+
+            // Add staggered effect
+            setTimeout(() => {
+              setVisibleDots((prev) => new Set([...prev, index]));
+              setVisibleLines((prev) => new Set([...prev, index]));
+            }, index * 200);
           }
         });
       },
-      { threshold: 0.5 },
+      {
+        threshold: 0.3,
+        rootMargin: "0px 0px -50px 0px",
+      },
     );
 
-    const cards = document.querySelectorAll("[data-index]");
-    cards.forEach((card) => observer.observe(card));
+    // Add scroll listener
+    window.addEventListener("scroll", handleScroll);
+    handleScroll(); // Initial call
+
+    // Observe timeline items after DOM is ready
+    const observeItems = () => {
+      const items = document.querySelectorAll("[data-timeline-index]");
+      items.forEach((item) => observer.observe(item));
+    };
+
+    // Delay to ensure DOM is ready
+    setTimeout(observeItems, 100);
 
-    return () => observer.disconnect();
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("scroll", handleScroll);
+    };
   }, []);
 
   return (
-    <section id="achievements" className=" min-h-screen py-12">
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+    <section
+      id="achievements"
+      className="min-h-screen py-20 bg-gradient-to-b from-white to-gray-50 relative overflow-hidden"
+    >
+      {/* Add custom CSS animations */}
+      <style>{`
+        .timeline-line-animated {
+          transition: height 0.3s ease-out;
+        }
+        
+        .timeline-dot-pulse {
+          animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        }
+        
+        @keyframes fadeInScale {
+          from {
+            opacity: 0;
+            transform: scale(0.8) translateY(20px);
+          }
+          to {
+            opacity: 1;
+            transform: scale(1) translateY(0);
+          }
+        }
+        
+        .fade-in-scale {
+          animation: fadeInScale 0.6s ease-out forwards;
+        }
+      `}</style>
+
+      <div
+        className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"
+        ref={containerRef}
+      >
+        {/* Section Header */}
+        <div className="text-center mb-16">
+          <h2 className="text-4xl md:text-5xl font-bold text-[#0B2044] mb-6">
+            Excellence Through Innovation
+          </h2>
+          <p className="text-lg text-gray-600 max-w-3xl mx-auto leading-relaxed">
+            Discover our remarkable journey of achievements spanning over a
+            decade of engineering excellence, innovation, and competitive
+            success in mechanical engineering challenges worldwide.
+          </p>
+        </div>
+
         <div className="relative" ref={timelineRef}>
-          <div className="grid grid-cols-9 gap-2">
-            {achievementsData
-              .sort((a, b) => parseInt(b.year) - parseInt(a.year))
-              .map((achievement, index) => (
-                <div key={achievement.id} className="contents">
-                  {/* Left card */}
+          {/* Main Timeline Container */}
+          <div className="relative">
+            {/* Background Timeline Line */}
+            <div
+              className="hidden md:block absolute left-1/2 transform -translate-x-1/2 top-0 w-0.5 bg-gray-200 rounded-full"
+              style={{ height: "100%" }}
+            ></div>
+
+            {/* Animated Progress Line */}
+            <div
+              className="hidden md:block absolute left-1/2 transform -translate-x-1/2 top-0 w-1 bg-gradient-to-b from-[#0B2044] to-[#51B8F2] rounded-full timeline-line-animated"
+              style={{
+                height: `${scrollProgress * 100}%`,
+                marginLeft: "-1px",
+                boxShadow: "0 0 10px rgba(81, 184, 242, 0.4)",
+                zIndex: 10,
+              }}
+            />
+
+            {/* Timeline Items */}
+            <div className="space-y-16 md:space-y-20">
+              {achievementsData
+                .sort((a, b) => parseInt(b.year) - parseInt(a.year))
+                .map((achievement, index) => (
                   <div
-                    className={`col-span-4 ${index % 2 === 0 ? "flex justify-end" : ""} hidden md:flex`}
+                    key={achievement.id}
+                    className="relative"
+                    data-timeline-index={index}
                   >
-                    {index % 2 === 0 && (
-                      <div className="w-full max-w-md">
-                        <AchievementCard
-                          title={achievement.title}
-                          description={achievement.description}
-                          year={achievement.year}
-                          isLeft={true}
-                          index={index}
-                        />
-                      </div>
-                    )}
-                  </div>
+                    {/* Desktop Layout */}
+                    <div className="hidden md:block">
+                      <div className="flex items-center">
+                        {/* Left Side Content */}
+                        <div className="w-1/2 pr-8">
+                          {index % 2 === 0 && (
+                            <div className="text-right">
+                              <AchievementCard
+                                title={achievement.title}
+                                description={achievement.description}
+                                year={achievement.year}
+                                isLeft={true}
+                                index={index}
+                              />
+                            </div>
+                          )}
+                        </div>
 
-                  {/* Timeline line and dot */}
-                  <div className="col-span-1 hidden md:flex flex-col items-center relative">
-                    {/* Vertical line */}
-                    <div className="w-1 bg-gray-300 h-full absolute top-0 left-1/2 -translate-x-1/2 z-0"></div>
+                        {/* Center Timeline Dot */}
+                        <div className="w-16 flex justify-center relative z-20">
+                          <div className="relative">
+                            {/* Connecting Line */}
+                            <div
+                              className={`absolute top-1/2 transform -translate-y-1/2 h-0.5 bg-gradient-to-r from-[#0B2044] to-[#51B8F2] transition-all duration-700 ${
+                                visibleLines.has(index)
+                                  ? "opacity-100 w-8"
+                                  : "opacity-0 w-0"
+                              } ${index % 2 === 0 ? "right-8" : "left-8"}`}
+                            />
 
-                    {/* Timeline dot */}
-                    <div className="z-10 relative">
-                      <div
-                        className={`w-4 h-4 rounded-full border-2 border-white transition-all duration-700 ${
-                          visibleDots.has(index)
-                            ? "bg-[#0B2044] shadow-lg shadow-blue-900/50 scale-125"
-                            : "bg-gray-400"
-                        }`}
-                      ></div>
+                            {/* Pulsing Ring */}
+                            <div
+                              className={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10 h-10 rounded-full border-2 border-[#51B8F2] transition-all duration-700 ${
+                                visibleDots.has(index)
+                                  ? "scale-100 opacity-50 timeline-dot-pulse"
+                                  : "scale-0 opacity-0"
+                              }`}
+                            />
+
+                            {/* Main Timeline Dot */}
+                            <div
+                              className={`relative w-6 h-6 rounded-full border-4 border-white shadow-lg transition-all duration-700 ${
+                                visibleDots.has(index)
+                                  ? "bg-gradient-to-br from-[#0B2044] to-[#51B8F2] scale-110"
+                                  : "bg-gray-300 scale-75"
+                              }`}
+                            >
+                              {/* Inner Sparkle */}
+                              <div
+                                className={`absolute inset-0 flex items-center justify-center transition-opacity duration-500 ${
+                                  visibleDots.has(index)
+                                    ? "opacity-100"
+                                    : "opacity-0"
+                                }`}
+                              >
+                                <div className="w-2 h-2 bg-white rounded-full animate-pulse" />
+                              </div>
+                            </div>
+
+                            {/* Year Badge */}
+                            <div
+                              className={`absolute -bottom-10 left-1/2 transform -translate-x-1/2 bg-white text-[#0B2044] text-xs font-bold px-3 py-1 rounded-full shadow-md border border-gray-100 transition-all duration-500 ${
+                                visibleDots.has(index)
+                                  ? "opacity-100 translate-y-0"
+                                  : "opacity-0 translate-y-4"
+                              }`}
+                            >
+                              {achievement.year}
+                            </div>
+                          </div>
+                        </div>
+
+                        {/* Right Side Content */}
+                        <div className="w-1/2 pl-8">
+                          {index % 2 !== 0 && (
+                            <div className="text-left">
+                              <AchievementCard
+                                title={achievement.title}
+                                description={achievement.description}
+                                year={achievement.year}
+                                isLeft={false}
+                                index={index}
+                              />
+                            </div>
+                          )}
+                        </div>
+                      </div>
                     </div>
-                  </div>
 
-                  {/* Right card */}
-                  <div
-                    className={`col-span-4 ${index % 2 !== 0 ? "flex justify-start" : ""} hidden md:flex`}
-                  >
-                    {index % 2 !== 0 && (
-                      <div className="w-full max-w-md">
+                    {/* Mobile Layout */}
+                    <div className="md:hidden relative pl-8">
+                      {/* Mobile Timeline Line */}
+                      <div className="absolute left-4 top-0 w-0.5 h-full bg-gray-200 rounded-full" />
+                      <div
+                        className="absolute left-4 top-0 w-0.5 bg-gradient-to-b from-[#0B2044] to-[#51B8F2] rounded-full transition-all duration-1000"
+                        style={{
+                          height: visibleDots.has(index) ? "100%" : "0%",
+                        }}
+                      />
+
+                      {/* Mobile Dot */}
+                      <div className="absolute left-2 top-6 z-20">
+                        <div
+                          className={`w-4 h-4 rounded-full border-2 border-white shadow-md transition-all duration-500 ${
+                            visibleDots.has(index)
+                              ? "bg-gradient-to-br from-[#0B2044] to-[#51B8F2] scale-110"
+                              : "bg-gray-300 scale-75"
+                          }`}
+                        />
+                      </div>
+
+                      {/* Mobile Card */}
+                      <div className="ml-4">
                         <AchievementCard
                           title={achievement.title}
                           description={achievement.description}
                           year={achievement.year}
-                          isLeft={false}
+                          isLeft={true}
                           index={index}
                         />
                       </div>
-                    )}
-                  </div>
-
-                  {/* Mobile view */}
-                  <div className="col-span-9 flex justify-center md:hidden">
-                    <div className="w-full max-w-md">
-                      <AchievementCard
-                        title={achievement.title}
-                        description={achievement.description}
-                        year={achievement.year}
-                        isLeft={true}
-                        index={index}
-                      />
                     </div>
                   </div>
-                </div>
-              ))}
+                ))}
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/config/achievement.js b/src/config/achievement.js
index cf3b941..6e1dadc 100644
--- a/src/config/achievement.js
+++ b/src/config/achievement.js
@@ -1,72 +1,100 @@
 const achievementsData = [
   {
     id: 1,
-    title: "Human Powered Vechile Competition",
+    title: "Human Powered Vehicle Competition",
     description:
       "Secured 3rd Position Globally in Critical Design Review and 1st Position among Indian Colleges.",
     year: "2021",
+    category: "HPVC",
+    rank: "3rd Global",
   },
   {
     id: 2,
-    title: "Human Powered Vechile Competition",
+    title: "Human Powered Vehicle Competition",
     description:
       "2nd Position Globally in Critical Design and 3rd Position in Innovation- BlueStreak 9.0.",
     year: "2022",
+    category: "HPVC",
+    rank: "2nd Global",
   },
   {
     id: 3,
-    title: "IAM-3D",
-    description:
-      "Secured 2nd Position Overall, Team BlueStreak 3.0 (FPV Drone Project) and 9th Place Globally in 2022.",
+    title: "IAM3D",
+    description: "Secured 9th Place Globally (Hovercraft Project).",
     year: "2023",
+    category: "Design",
+    rank: "9th Global",
   },
   {
     id: 4,
     title: "ASME XRC 2024",
     description:
-      "Team BlueBirds Secured 1st Position in Extended Reality Challenge For Sustainable innovations in ocean cleanup.",
+      "Team BlueBird Secured 1st Position in Extended Reality Challenge For Sustainable innovations in ocean cleanup.",
     year: "2024",
+    category: "XRC",
+    rank: "1st Place",
   },
   {
     id: 5,
-    title: "Human Powered Vechile Competition",
+    title: "Human Powered Vehicle Competition",
     description:
       "Team BlueStreak 11.0 Secured 3rd Position in Design Presentation, The Best Innovation Award, 3rd Position in Drag Race and 3rd Position Overall in e-HPVC.",
     year: "2025",
+    category: "HPVC",
+    rank: "3rd Overall",
   },
   {
     id: 6,
-    title: "Human Powered Vechile Competition",
+    title: "Human Powered Vehicle Competition",
     description:
       "Secured 9th in Endurance and 13th Overall in E-Fest Asia Pacific",
     year: "2019",
+    category: "HPVC",
+    rank: "13th Overall",
   },
   {
     id: 7,
-    title: "Human Powered Vechile Competition",
+    title: "Human Powered Vehicle Competition",
     description:
       "Secured 20th in men's endurance race and 24th in female drag race out of 43 teams, HPVC ASIA PACIFIC.",
     year: "2017",
+    category: "HPVC",
+    rank: "20th Place",
   },
   {
     id: 8,
-    title: "Human Powered Vechile Competition",
+    title: "Human Powered Vehicle Competition",
     description:
       "Secured 2nd Position in design event and 9th in overall, HPVC ASIA PACIFIC VIT VELLORE.",
     year: "2016",
+    category: "HPVC",
+    rank: "2nd Design",
   },
   {
     id: 9,
-    title: "Human Powered Vechile Competition",
+    title: "Human Powered Vehicle Competition",
     description: "Highest Innovation Score, HPVC India at DTU.",
     year: "2015",
+    category: "HPVC",
+    rank: "Best Innovation",
   },
   {
     id: 10,
-    title: "Human Powered Vechile Competition",
+    title: "Human Powered Vehicle Competition",
     description:
       "First International Participation at HPVC East, University of Central Florida and Highest marks in Analysis Section, HPV India at IIT Delhi.",
     year: "2014",
+    category: "HPVC",
+    rank: "Best Analysis",
+  },
+  {
+    id: 11,
+    title: "IAM3D",
+    description:
+      "Secured 2nd Position Overall, Team BluePrint 3.0 (FPV Drone Project).",
+    year: "2025",
+    category: "Design",
+    rank: "2nd Overall",
   },
 ];
 
diff --git a/src/config/navbarHero.js b/src/config/navbarHero.js
index 204121e..5e5275e 100644
--- a/src/config/navbarHero.js
+++ b/src/config/navbarHero.js
@@ -7,6 +7,7 @@ export const siteConfig = {
       { name: "Events", href: "/events" },
       { name: "Achievements", href: "/achievements" },
       { name: "Gallery", href: "/gallery" },
+      { name: "Applications", href: "/applications" },
     ],
   },
 
@@ -36,19 +37,19 @@ export const siteConfig = {
 
   missions: [
     {
-      title: "Our Mission",
+      title: "Technical Excellence",
       description:
-        "To advance mechanical engineering knowledge and skills through innovation and practical application.",
+        "To equip members with strong technical skills in design, manufacturing, and emerging technologies through hands-on projects, workshops, and competitions.",
     },
     {
-      title: "Our Mission",
+      title: "Professional Growth",
       description:
-        "To advance mechanical engineering knowledge and skills through innovation and practical application.",
+        "To create opportunities for students to interact with industry experts, researchers, and alumni, fostering knowledge exchange and career development.",
     },
     {
-      title: "Our Mission",
+      title: "Community Building & Leadership",
       description:
-        "To advance mechanical engineering knowledge and skills through innovation and practical application.",
+        "To cultivate a culture of teamwork, innovation, and leadership by organizing engaging events, promoting collaboration, and encouraging active participation.",
     },
   ],
 };
diff --git a/src/config/teammate.js b/src/config/teammate.js
index e5c01db..c2122ca 100644
--- a/src/config/teammate.js
+++ b/src/config/teammate.js
@@ -6,7 +6,6 @@ const teamMembers = [
     img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1754119368/Photo_from_Soumya_Mohanty_yv6fsd.jpg",
     description: "",
     linkedin: "https://www.linkedin.com/in/soumya-mohanty-me0409",
-    twitter: "https://x.com/home",
   },
   {
     name: "Pratyush Prateek Dash",
@@ -15,7 +14,6 @@ const teamMembers = [
     description: "",
     team: "Executive Body",
     linkedin: "https://www.linkedin.com/in/pratyush-prateek-dash-b8298128a/",
-    twitter: "https://x.com/home",
   },
   {
     name: "Sahil Singh",
@@ -24,7 +22,6 @@ const teamMembers = [
     description: "",
     team: "Executive Body",
     linkedin: "https://linkedin.com/in/",
-    twitter: "https://x.com/home",
   },
   {
     name: "Gurudutta Sutar",
@@ -33,7 +30,6 @@ const teamMembers = [
     description: "",
     team: "Executive Body",
     linkedin: "https://linkedin.com/in/",
-    twitter: "https://x.com/home",
   },
   {
     name: "Samidha Behera",
@@ -42,7 +38,6 @@ const teamMembers = [
     description: "",
     team: "Executive Body",
     linkedin: "https://www.linkedin.com/in/samidha-behera-09297828a/",
-    twitter: "https://x.com/home",
   },
   {
     name: "Nikhil Kumar Dalai",
@@ -51,7 +46,6 @@ const teamMembers = [
     description: "",
     team: "Executive Body",
     linkedin: "https://www.linkedin.com/in/nikhil-dalai/",
-    twitter: "https://x.com/home",
   },
   {
     name: "Aaditya Sahu",
@@ -60,7 +54,6 @@ const teamMembers = [
     team: "Team Bluestreak",
     description: "",
     linkedin: "https://www.linkedin.com/in/aaditya-sahoo-9605a4279/",
-    twitter: "https://x.com/home",
   },
   {
     name: "Komal Hitesh",
@@ -69,7 +62,6 @@ const teamMembers = [
     description: "",
     team: "Team Bluestreak",
     linkedin: "https://www.linkedin.com/in/komal-hitesh-gude-a1402830a/",
-    twitter: "https://x.com/home",
   },
   {
     name: "Somanchi Shanmukh",
@@ -86,7 +78,6 @@ const teamMembers = [
     description: "",
     team: "Team Bluestreak",
     linkedin: "https://www.linkedin.com/in/aryan-dongare-82aa40325/",
-    twitter: "https://x.com/home",
   },
   {
     name: "Mayukh Thakuria",
@@ -95,7 +86,6 @@ const teamMembers = [
     description: "",
     team: "Team Bluestreak",
     linkedin: "https://www.linkedin.com/in/mayukh-thakuria-509ab8306/",
-    twitter: "https://x.com/home",
   },
   {
     name: "Smruti Satabdi Prusty",
@@ -104,7 +94,6 @@ const teamMembers = [
     description: "",
     team: "Team Bluestreak",
     linkedin: "https://www.linkedin.com/in/smruti-satabdi-prusty-a35a3a2a2/",
-    twitter: "https://x.com/home",
   },
   {
     name: "Chittaranjan Behera",
@@ -113,7 +102,6 @@ const teamMembers = [
     description: "",
     team: "Team Blueprint",
     linkedin: "https://www.linkedin.com/in/chittaranjan-behera-012b64292/",
-    twitter: "https://x.com/home",
   },
   {
     name: "Dharitri",
@@ -122,7 +110,6 @@ const teamMembers = [
     description: "",
     team: "Team Blueprint",
     linkedin: "https://www.linkedin.com/in/dharitri-pradhan-a92b98269/",
-    twitter: "https://x.com/home",
   },
   {
     name: "Nikhil Raj Kiran Sahoo",
@@ -131,7 +118,6 @@ const teamMembers = [
     description: "",
     team: "Team Blueprint",
     linkedin: "https://www.linkedin.com/in/nikhil-rajkiran-sahoo-515397277/",
-    twitter: "https://x.com/home",
   },
   {
     name: "Soaham Tripathy",
@@ -140,7 +126,6 @@ const teamMembers = [
     description: "",
     team: "Team Blueprint",
     linkedin: "https://www.linkedin.com/in/soaham-tripathy-223582336/",
-    twitter: "https://x.com/home",
   },
   {
     name: "Soaham Tripathy",
@@ -149,7 +134,6 @@ const teamMembers = [
     description: "",
     team: "Team Bluebird",
     linkedin: "https://www.linkedin.com/in/soaham-tripathy-223582336/",
-    twitter: "https://x.com/home",
   },
   {
     name: "Dev Soni",
@@ -158,7 +142,6 @@ const teamMembers = [
     description: "",
     team: "Team Bluebird",
     linkedin: "https://www.linkedin.com/in/dev-soni-80020228a/",
-    twitter: "https://x.com/home",
   },
 ];
 
diff --git a/src/main.jsx b/src/main.jsx
index 4aac412..d7407cc 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -9,6 +9,7 @@ import GallaryPage from "./pages/gallery/Gallery.jsx";
 import Events from "./pages/events/Events.jsx";
 import AchievementPage from "./pages/achievements/AchievementPage.jsx";
 import TeamPage from "./pages/team/TeamPage.jsx";
+import Applications from "./pages/applications/Applications.jsx";
 
 createRoot(document.getElementById("root")).render(
   <StrictMode>
@@ -21,6 +22,7 @@ createRoot(document.getElementById("root")).render(
           <Route path="events" element={<Events />} />
           <Route path="achievements" element={<AchievementPage />} />
           <Route path="team" element={<TeamPage />} />
+          <Route path="applications" element={<Applications />} />
         </Route>
       </Routes>
     </BrowserRouter>
diff --git a/src/pages/achievements/AchievementPage.jsx b/src/pages/achievements/AchievementPage.jsx
index 1a59393..34c06d9 100644
--- a/src/pages/achievements/AchievementPage.jsx
+++ b/src/pages/achievements/AchievementPage.jsx
@@ -3,25 +3,19 @@ import achievementImg from "../../assets/achievementimg.jpg";
 
 const AchievementPage = () => {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-gray-50">
-      <div className="relative overflow-hidden h-screen w-screen">
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-gray-100">
+      <div className="relative overflow-hidden h-200 w-full">
+        {/* Background Image - Cropped from top */}
         <div
-          className="absolute inset-0  bg-cover bg-center bg-no-repeat blur-[1px]"
+          className="absolute inset-0 bg-cover bg-no-repeat"
           style={{
             backgroundImage: `url(${achievementImg})`,
+            backgroundPosition: "center 90%",
           }}
         ></div>
-
-        <div className="relative z-10 text-center h-full flex flex-col justify-center">
-          <div className="max-w-4xl mx-auto">
-            <h1 className="text-6xl md:text-6xl  text-white mb-6 font-extrabold drop-shadow-lg ">
-              Our Achievements
-            </h1>
-          </div>
-        </div>
       </div>
 
-      <div className="relative">
+      <div className="relative bg-white">
         <Timeline />
       </div>
     </div>
diff --git a/src/pages/applications/Applications.jsx b/src/pages/applications/Applications.jsx
new file mode 100644
index 0000000..2690c34
--- /dev/null
+++ b/src/pages/applications/Applications.jsx
@@ -0,0 +1,180 @@
+import Button from "../../components/shared/Button";
+import {
+  FileText,
+  MessageCircle,
+  CheckCircle,
+  Users,
+  ArrowRight,
+} from "lucide-react";
+
+const Applications = () => {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-gray-100">
+      {/* Hero Section */}
+      <div className="relative bg-gradient-to-r from-[#0B2044] to-[#021640] text-white py-20">
+        <div className="absolute inset-0 bg-[#0B2044] opacity-90"></div>
+        <div className="relative z-10 px-8 md:px-12 text-center">
+          <h1 className="text-4xl md:text-6xl font-bold mb-6 tracking-tight">
+            Join Our Community
+          </h1>
+          <p className="text-xl md:text-2xl text-gray-200 max-w-4xl mx-auto leading-relaxed font-light mb-8">
+            Begin your journey with ASME NIT Rourkela and become part of a
+            legacy of engineering excellence and innovation
+          </p>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="px-8 md:px-12 py-16">
+        <div className="text-center mb-16">
+          <h2 className="text-3xl lg:text-5xl font-bold text-[#0B2044] mb-8">
+            Applications
+          </h2>
+          <p className="text-gray-600 mb-12 text-lg max-w-3xl mx-auto leading-relaxed">
+            Take the first step towards joining our community. Apply for
+            sophomore induction and connect with fellow members to begin your
+            journey in mechanical engineering excellence.
+          </p>
+        </div>
+
+        <div className="max-w-4xl mx-auto">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            {/* Sophomore Induction Form Card */}
+            <div className="bg-white border border-gray-100 rounded-xl shadow-lg p-8 hover:shadow-2xl transition-all duration-300 group relative overflow-hidden">
+              <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#0B2044] to-[#51B8F2]"></div>
+              <div className="text-center">
+                <div className="w-16 h-16 mx-auto mb-6 bg-gradient-to-br from-[#0B2044] to-[#51B8F2] rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+                  <FileText className="w-8 h-8 text-white" />
+                </div>
+                <h3 className="text-2xl font-bold text-[#0B2044] mb-4">
+                  Sophomore Induction Form
+                </h3>
+                <p className="text-gray-600 mb-8 leading-relaxed">
+                  Apply for our sophomore induction program and become part of
+                  the ASME NIT Rourkela community. Take the first step towards
+                  engineering excellence.
+                </p>
+                <a
+                  href="https://docs.google.com/forms/d/e/1FAIpQLSfY2KePb3PUlmtuUxN7pUDC7xcAjdTyCDdSgsIs8vuIJinMSg/viewform?usp=header"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-block"
+                >
+                  <Button
+                    backgroundColor="#0B2044"
+                    textColor="white"
+                    style={{
+                      padding: "14px 28px",
+                      fontSize: "16px",
+                      borderRadius: "10px",
+                      transition: "all 0.3s ease",
+                      fontWeight: "600",
+                    }}
+                    className="hover:bg-[#021640] transform hover:scale-105 shadow-lg hover:shadow-xl"
+                  >
+                    Apply Now
+                  </Button>
+                </a>
+              </div>
+            </div>
+
+            {/* WhatsApp Group Card */}
+            <div className="bg-white border border-gray-100 rounded-xl shadow-lg p-8 hover:shadow-2xl transition-all duration-300 group relative overflow-hidden">
+              <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#25D366] to-[#128C7E]"></div>
+              <div className="text-center">
+                <div className="w-16 h-16 mx-auto mb-6 bg-gradient-to-br from-[#25D366] to-[#128C7E] rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+                  <MessageCircle className="w-8 h-8 text-white" />
+                </div>
+                <h3 className="text-2xl font-bold text-[#0B2044] mb-4">
+                  WhatsApp Group for Induction
+                </h3>
+                <p className="text-gray-600 mb-8 leading-relaxed">
+                  Join our WhatsApp group to stay updated with induction
+                  process, announcements, and connect with other applicants
+                  throughout your journey.
+                </p>
+                <a
+                  href="https://chat.whatsapp.com/GV86IjlOeAoC6H4HxO2X2N"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-block"
+                >
+                  <Button
+                    backgroundColor="#25D366"
+                    textColor="white"
+                    style={{
+                      padding: "14px 28px",
+                      fontSize: "16px",
+                      borderRadius: "10px",
+                      transition: "all 0.3s ease",
+                      fontWeight: "600",
+                    }}
+                    className="hover:bg-[#128C7E] transform hover:scale-105 shadow-lg hover:shadow-xl"
+                  >
+                    Join Group
+                  </Button>
+                </a>
+              </div>
+            </div>
+          </div>
+
+          {/* Application Process Section */}
+          <div className="mt-16 text-center">
+            <div className="bg-gradient-to-br from-gray-50 to-white rounded-2xl p-10 border border-gray-100 shadow-lg">
+              <h3 className="text-2xl md:text-3xl font-bold text-[#0B2044] mb-6">
+                Application Process
+              </h3>
+              <p className="text-gray-600 mb-10 max-w-2xl mx-auto">
+                Follow these simple steps to join our community and begin your
+                journey with ASME NIT Rourkela
+              </p>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div className="flex flex-col items-center group">
+                  <div className="w-16 h-16 bg-gradient-to-br from-[#0B2044] to-[#51B8F2] rounded-full flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
+                    <FileText className="w-8 h-8 text-white" />
+                  </div>
+                  <div className="w-8 h-0.5 bg-[#51B8F2] rounded-full mb-4 opacity-60"></div>
+                  <h4 className="text-lg font-bold text-[#0B2044] mb-3">
+                    Fill the Form
+                  </h4>
+                  <p className="text-gray-600 leading-relaxed">
+                    Complete the sophomore induction application form with all
+                    required details and information.
+                  </p>
+                </div>
+                <div className="flex flex-col items-center group">
+                  <div className="w-16 h-16 bg-gradient-to-br from-[#25D366] to-[#128C7E] rounded-full flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
+                    <MessageCircle className="w-8 h-8 text-white" />
+                  </div>
+                  <div className="w-8 h-0.5 bg-[#25D366] rounded-full mb-4 opacity-60"></div>
+                  <h4 className="text-lg font-bold text-[#0B2044] mb-3">
+                    Join WhatsApp Group
+                  </h4>
+                  <p className="text-gray-600 leading-relaxed">
+                    Connect with fellow applicants and stay updated with
+                    announcements and important information.
+                  </p>
+                </div>
+                <div className="flex flex-col items-center group">
+                  <div className="w-16 h-16 bg-gradient-to-br from-[#0B2044] to-[#51B8F2] rounded-full flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
+                    <CheckCircle className="w-8 h-8 text-white" />
+                  </div>
+                  <div className="w-8 h-0.5 bg-[#51B8F2] rounded-full mb-4 opacity-60"></div>
+                  <h4 className="text-lg font-bold text-[#0B2044] mb-3">
+                    Selection Process
+                  </h4>
+                  <p className="text-gray-600 leading-relaxed">
+                    Participate in the selection process and become part of our
+                    engineering community.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Applications;