Skip to content

UI fixes #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
swaindhruti merged 1 commit into from
Aug 16, 2025
Merged

UI fixes #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 88 additions & 13 deletions src/components/AchievementCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
210 changes: 120 additions & 90 deletions src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
17 changes: 3 additions & 14 deletions src/components/MissionCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
Loading
Loading