Skip to content

Improve UI/UX and add dark mode support #63

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
Krish-2118 merged 3 commits into from
Jun 29, 2026
Merged

Improve UI/UX and add dark mode support #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
84aab0c
Improve UI/UX and add dark mode support
RKS-ai-coder Jun 29, 2026
622745c
Add navigation functionality to HeroSection
Krish-2118 Jun 29, 2026
6e9bcd0
Fix import path for useNavigate from react-router-dom
Krish-2118 Jun 29, 2026
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
11 changes: 11 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"dependencies": {
"@tailwindcss/vite": "^4.1.11",
"lucide-react": "^0.525.0",
"next-themes": "^0.4.6",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-icons": "^5.5.0",
Expand Down
6 changes: 6 additions & 0 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,14 @@
import Footer from "./components/Footer.jsx";
import Navbar from "./components/Navbar.jsx";
import { Outlet } from "react-router-dom";
import { useEffect } from "react";
import { applyTheme } from "./config/theme";

const App = () => {
useEffect(() => {
applyTheme();
}, []);

return (
<>
<Navbar />
Expand Down
17 changes: 3 additions & 14 deletions src/components/AboutSection.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export default function AboutSection() {
return (
<section
id="about"
className="relative bg-white px-4 sm:px-6 md:px-10 lg:px-16 py-16 sm:py-20"
className="relative bg-white dark:bg-slate-900 px-4 sm:px-6 md:px-10 lg:px-16 py-16 sm:py-20"
>
<div className="relative z-10 max-w-7xl mx-auto flex flex-col lg:flex-row items-center justify-between gap-12 lg:gap-16">
{/* Image Section */}
Expand All @@ -24,24 +24,13 @@ export default function AboutSection() {
{/* Text Content */}
<div className="w-full lg:w-1/2 space-y-8 text-center lg:text-left order-1 lg:order-2">
<div className="space-y-6">
<h2 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-[#021640] leading-tight tracking-tight">
<h2 className="text-4xl md:text-5xl font-bold text-[#021640] dark:text-white leading-tight tracking-tight">
{siteConfig.about.title}
</h2>
<p className="text-xl text-gray-600 leading-relaxed max-w-2xl mx-auto lg:mx-0">
<p className="text-lg md:text-xl text-gray-600 dark:text-gray-300 leading-relaxed max-w-2xl mx-auto lg:mx-0">
{siteConfig.about.description}
</p>
</div>

<div className="flex flex-col sm:flex-row sm:justify-center lg:justify-start items-center gap-4 pt-4">
<a
href="#cards"
role="button"
tabIndex={0}
className="bg-[#021640] hover:bg-[#021640]/90 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300 hover:shadow-lg"
>
{siteConfig.about.button}
</a>
</div>
</div>
</div>
</section>
Expand Down
28 changes: 14 additions & 14 deletions src/components/AchievementCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const ImageCarousel = ({ images, title }) => {

return (
<div className="mb-4 overflow-hidden rounded-lg relative group">
<div className="w-full h-48 bg-gray-100 flex items-center justify-center">
<div className="w-full h-48 bg-gray-100 dark:bg-slate-700 flex items-center justify-center">
<img
src={images[currentIndex]}
alt={`${title} - Image ${currentIndex + 1}`}
Expand Down Expand Up @@ -126,11 +126,11 @@ const AchievementCard = ({
>
<div
className={`
max-w-md mx-auto rounded-xl shadow-lg border border-gray-100
max-w-md mx-auto rounded-xl shadow-lg border dark:border-slate-700 dark:hover:border-blue-500/50 border-gray-100
transition-all duration-700 group cursor-pointer relative overflow-hidden
bg-white transform-gpu
bg-white dark:bg-[#13233F] transform-gpu
${isVisible ? "translate-y-0 opacity-100" : "translate-y-8 opacity-0"}
hover:scale-105 hover:shadow-2xl hover:border-[#51B8F2]
hover:scale-105 hover:shadow-2xl dark:hover:bg-[#18304F] hover:border-[#51B8F2]
${isLeft ? "ml-0" : "mr-0"}
`}
onMouseEnter={() => setIsHovered(true)}
Expand All @@ -140,8 +140,8 @@ const AchievementCard = ({
<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 className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r dark:from-[#2563EB] dark:to-[#38BDF8] from-[#0B2044] to-[#51B8F2] transition-all duration-500 group-hover:h-2">
<div className="h-full w-0 bg-gradient-to-r dark:from-[#2563EB] dark:to-[#38BDF8] from-[#51B8F2] to-[#0B2044] transition-all duration-700 group-hover:w-full"></div>
</div>

<div className="relative p-6 pt-8">
Expand All @@ -150,39 +150,39 @@ const AchievementCard = ({

{/* 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]" />
<div className="flex items-center dark:bg-blue-900/60 dark:text-blue-300 text-[#0B2044] text-sm font-semibold bg-[#51B8F2]/10 px-3 py-1.5 rounded-full">
<Calendar className="h-4 w-4 mr-2 dark:text-blue-400 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]" />
<Award className="h-5 w-5 dark:text-amber-400 text-[#51B8F2]" />
</div>
</div>

{/* Title with enhanced typography */}
<h3 className="text-xl font-bold mb-4 text-[#0B2044] group-hover:text-[#51B8F2] transition-colors duration-300 leading-tight">
<h3 className="text-xl font-bold mb-4 dark:text-white text-[#0B2044] dark:group-hover:text-blue-100 group-hover:text-[#51B8F2] transition-colors duration-300 leading-tight">
{title}
</h3>

{/* Description with better spacing */}
<p className="text-gray-600 leading-relaxed text-sm mb-6">
<p className="text-gray-600 dark:text-gray-300 leading-normal text-base 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 className="h-full bg-gradient-to-r dark:from-[#2563EB] dark:to-[#38BDF8] 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" : ""
className={`ml-3 h-4 w-4 dark:text-blue-400 text-[#51B8F2] transition-all duration-300 ${
isHovered ? "translate-x-1 " : ""
}`}
/>
</div>
Expand Down
20 changes: 10 additions & 10 deletions src/components/Achievements.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@ export default function Achievements() {
const navigate = useNavigate();

return (
<section className="relative bg-white px-4 sm:px-6 md:px-10 lg:px-16 py-16 sm:py-20">
<section className="relative bg-white dark:bg-slate-900 px-4 sm:px-6 md:px-10 lg:px-16 py-16 sm:py-20">
<div className="max-w-7xl mx-auto">
{/* Header Section */}
<div className="text-center mb-16">
<div className="space-y-6">
<h2 className="text-4xl sm:text-5xl md:text-6xl font-bold text-[#021640] leading-tight tracking-tight">
<h2 className="text-4xl md:text-5xl font-bold dark:text-white text-[#021640] leading-tight tracking-tight">
Our Achievements
</h2>
<p className="text-xl text-gray-600 leading-relaxed max-w-4xl mx-auto">
<p className="text-lg md:text-xl text-gray-600 dark:text-gray-300 leading-relaxed max-w-4xl mx-auto">
ASME NIT Rourkela excels in fostering innovation and leadership
through workshops, competitions, and expert lectures. Recognized
for achievements in events like the Student Design Challenge and
Expand All @@ -26,7 +26,7 @@ export default function Achievements() {

<div className="pt-8">
<button
className="bg-[#021640] hover:bg-[#021640]/90 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300 hover:shadow-lg"
className="bg-[#021640] dark:bg-blue-800 dark:hover:bg-blue-800/90 hover:bg-[#021640]/90 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300 hover:shadow-lg"
onClick={() => navigate("/achievements")}
>
View all Achievements
Expand All @@ -41,25 +41,25 @@ export default function Achievements() {
.map((item, index) => (
<div
key={index}
className="bg-white border border-gray-200 hover:border-[#021640]/30 p-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group"
className="bg-white dark:bg-[#13233F] dark:border-slate-700 border border-gray-200 hover:border-[#021640]/30 p-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group"
>
<div className="space-y-4">
<div className="flex items-center justify-between">
<div className="inline-block px-3 py-1 bg-[#021640]/10 text-[#021640] rounded-full text-sm font-semibold">
<div className="inline-block px-3 py-1 bg-[#021640]/10 dark:bg-blue-800/10 text-[#021640] dark:text-blue-300 rounded-full text-sm font-semibold">
{item.year}
</div>
<div className="w-2 h-2 bg-[#021640] rounded-full opacity-50 group-hover:opacity-100 transition-opacity duration-300"></div>
<div className="w-2 h-2 bg-[#021640] dark:bg-blue-500 rounded-full opacity-50 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<h4 className="font-bold text-lg text-[#021640] leading-tight">
<h4 className="font-bold text-lg text-[#021640] dark:text-white leading-tight">
{item.title}
</h4>
<p className="text-gray-600 text-sm leading-relaxed">
<p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
{item.description}
</p>
</div>

{/* Simple accent line */}
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#021640] to-blue-500 rounded-t-xl transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r dark:from-[#2563EB] dark:to-[#38BDF8] from-[#021640] to-blue-500 rounded-t-xl transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
</div>
))}
</div>
Expand Down
29 changes: 16 additions & 13 deletions src/components/EventCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,19 +42,22 @@ const EventCard = ({ title, description, images, date, location, status }) => {
const getStatusColor = (status) => {
switch (status?.toLowerCase()) {
case "upcoming":
return "bg-blue-50 text-blue-600 border-blue-200";
return "bg-blue-50 text-blue-600 border-blue-200 dark:bg-[#163A72] dark:text-blue-100 dark:border-blue-400/40";

case "ongoing":
return "bg-green-50 text-green-600 border-green-200";
return "bg-green-50 text-green-600 border-green-200 dark:bg-[#0F5132] dark:text-emerald-100 dark:border-emerald-400/40";

case "completed":
return "bg-gray-50 text-gray-600 border-gray-200";
return "bg-gray-50 text-gray-600 border-gray-200 dark:bg-[#334155] dark:text-slate-100 dark:border-slate-500";

default:
return "bg-gray-50 text-gray-600 border-gray-200";
return "bg-gray-50 text-gray-600 border-gray-200 dark:bg-[#334155] dark:text-slate-100 dark:border-slate-500";
}
};

return (
<div
className="bg-white border border-gray-200 hover:border-[#021640]/30 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group overflow-hidden"
className="bg-white dark:dark:bg-[#13233F] dark:border-slate-700 border border-gray-200 hover:border-[#021640]/30 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group overflow-hidden"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
Expand Down Expand Up @@ -135,38 +138,38 @@ const EventCard = ({ title, description, images, date, location, status }) => {
{/* Content Section */}
<div className="p-6 space-y-4">
<div>
<h3 className="font-bold text-lg text-[#021640] leading-tight mb-2 line-clamp-2">
<h3 className="font-bold text-lg dark:text-white text-[#021640] leading-tight mb-2 line-clamp-2">
{title || "Event Title"}
</h3>
<p className="text-sm text-gray-600 line-clamp-3">
<p className="text-sm dark:text-gray-300 text-gray-600 line-clamp-3">
{description || "Event description will be displayed here."}
</p>
</div>

{/* Event Meta Information */}
<div className="space-y-2">
{date && (
<div className="flex items-center text-sm text-gray-500">
<FaCalendar className="w-3 h-3 mr-2 text-[#021640]" />
<div className="flex items-center text-sm dark:text-gray-400 text-gray-500">
<FaCalendar className="w-3 h-3 mr-2 dark:text-blue-900 text-[#021640]" />
<span>{date}</span>
</div>
)}
{location && (
<div className="flex items-center text-sm text-gray-500">
<FaMapMarkerAlt className="w-3 h-3 mr-2 text-[#021640]" />
<div className="flex items-center text-sm dark:text-gray-400 text-gray-500">
<FaMapMarkerAlt className="w-3 h-3 mr-2 dark:text-blue-900 text-[#021640]" />
<span>{location}</span>
</div>
)}
</div>

{/* Action Button */}
<button className="w-full bg-[#021640] text-white px-4 py-2 text-sm font-semibold rounded-lg transition-all duration-300 hover:bg-[#021640]/90 hover:shadow-lg">
<button className="w-full bg-[#021640] dark:bg-blue-900 text-white px-4 py-2 text-sm font-semibold rounded-lg transition-all duration-300 dark:hover:bg-blue-900/90 hover:bg-[#021640]/90 hover:shadow-lg">
View Details
</button>
</div>

{/* Accent line */}
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#021640] to-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r dark:from-[#2563EB] dark:to-[#38BDF8] from-[#021640] to-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
</div>
);
};
Expand Down
2 changes: 1 addition & 1 deletion src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const Footer = ({
year = new Date().getFullYear(),
}) => {
return (
<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">
<footer className="bg-[#0B2044] dark:bg-slate-900 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 */}
Expand Down
10 changes: 5 additions & 5 deletions src/components/GallerySection.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,15 @@ export default function GallerySection() {
};

return (
<section className="relative bg-white px-4 sm:px-6 md:px-10 lg:px-16 py-16 sm:py-20">
<section className="relative dark:bg-slate-900 bg-white px-4 sm:px-6 md:px-10 lg:px-16 py-16 sm:py-20">
<div className="max-w-7xl mx-auto">
{/* Header Section */}
<div className="text-center mb-16">
<div className="space-y-6">
<h2 className="text-4xl sm:text-5xl md:text-6xl font-bold text-[#021640] leading-tight tracking-tight">
<h2 className="text-4xl sm:text-4xl md:text-5xl font-bold dark:text-white text-[#021640] leading-tight tracking-tight">
Gallery
</h2>
<p className="text-xl text-gray-600 leading-relaxed max-w-4xl mx-auto">
<p className="text-lg md:text-xl text-gray-600 dark:text-gray-300 leading-relaxed max-w-4xl mx-auto">
Explore our vibrant moments captured through stunning visuals that
showcase our activities, achievements, and memorable experiences.
</p>
Expand All @@ -34,7 +34,7 @@ export default function GallerySection() {
<div className="pt-8">
<button
onClick={viewFullGallery}
className="bg-[#021640] hover:bg-[#021640]/90 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300 hover:shadow-lg"
className="bg-[#021640] dark:bg-blue-800 dark:hover:bg-blue-800/90 hover:bg-[#021640]/90 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300 hover:shadow-lg"
>
View Full Gallery
</button>
Expand Down Expand Up @@ -70,7 +70,7 @@ export default function GallerySection() {
</div>

{/* Accent line */}
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#021640] to-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r dark:from-[#2563EB] dark:to-[#38BDF8] from-[#021640] to-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
</div>
))}
</div>
Expand Down
Loading
Loading