Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
9 changes: 8 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
<!doctype html>
<html lang="en">
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ASME</title>
<script>
if (localStorage.getItem("theme") === "light") {
document.documentElement.classList.remove("dark");
} else {
document.documentElement.classList.add("dark");
}
</script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
Expand Down
14 changes: 7 additions & 7 deletions src/components/AboutSection.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ export default function AboutSection() {
return (
<section
id="about"
className="relative bg-white dark:bg-slate-900 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-12 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">
<div className="relative z-10 max-w-7xl mx-auto flex flex-col lg:flex-row items-center justify-between gap-8 sm:gap-12 lg:gap-16">
{/* Image Section */}
<div className="w-full lg:w-1/2 relative order-2 lg:order-1">
<div className="relative max-w-2xl mx-auto">
Expand All @@ -16,7 +16,7 @@ export default function AboutSection() {
alt="About ASME NIT Rourkela"
loading="lazy"
decoding="async"
className="w-full h-[400px] md:h-[500px] transition-transform duration-300 hover:scale-105 object-cover"
className="w-full h-[280px] sm:h-[400px] md:h-[500px] transition-transform duration-300 hover:scale-105 object-cover"
/>

<div className="absolute inset-0 ring-1 ring-black/10 rounded-xl"></div>
Expand All @@ -25,12 +25,12 @@ export default function AboutSection() {
</div>

{/* 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 md:text-6xl font-extrabold text-[#021640] dark:text-white leading-tight tracking-wide">
<div className="w-full lg:w-1/2 space-y-6 sm:space-y-8 text-center lg:text-left order-1 lg:order-2">
<div className="space-y-4 sm:space-y-6">
<h2 className="text-3xl sm:text-4xl md:text-6xl font-extrabold text-[#021640] dark:text-white leading-tight tracking-wide [text-wrap:balance]">
{siteConfig.about.title}
</h2>
<p className="text-[22px] md:text-2xl text-gray-600 dark:text-gray-300 leading-relaxed max-w-2xl mx-auto lg:mx-0">
<p className="text-base sm:text-lg md:text-xl lg:text-2xl text-gray-600 dark:text-gray-300 leading-relaxed max-w-2xl mx-auto lg:mx-0 [text-wrap:pretty] px-2 sm:px-0">
{siteConfig.about.description}
</p>
</div>
Expand Down
12 changes: 6 additions & 6 deletions src/components/Achievements.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@ export default function Achievements() {
<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 md:text-5xl font-extrabold dark:text-white text-[#021640] leading-tight tracking-tight">
<div className="text-center mb-12 sm:mb-16">
<div className="space-y-4 sm:space-y-6">
<h2 className="text-3xl sm:text-4xl md:text-5xl font-extrabold dark:text-white text-[#021640] leading-tight tracking-tight [text-wrap:balance]">
Our Achievements
</h2>
<p className="text-lg md:text-2xl text-gray-600 dark:text-gray-300 leading-relaxed max-w-4xl mx-auto">
<p className="text-base sm:text-lg md:text-xl lg:text-2xl text-gray-600 dark:text-gray-300 leading-relaxed max-w-4xl mx-auto [text-wrap:pretty] px-2 sm:px-0">
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 @@ -24,9 +24,9 @@ export default function Achievements() {
</p>
</div>

<div className="pt-8">
<div className="pt-6 sm:pt-8">
<button
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"
className="cursor-pointer bg-[#021640] dark:bg-blue-800 dark:hover:bg-blue-800/90 hover:bg-[#021640]/90 text-white px-8 py-3.5 sm:py-4 rounded-lg font-semibold text-base sm:text-lg transition-all duration-300 hover:shadow-lg"
onClick={() => navigate("/achievements")}
>
View all Achievements
Expand Down
12 changes: 6 additions & 6 deletions src/components/GallerySection.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,21 +20,21 @@ export default function GallerySection() {
<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-4xl md:text-5xl font-extrabold dark:text-white text-[#021640] leading-tight tracking-tight">
<div className="text-center mb-12 sm:mb-16">
<div className="space-y-4 sm:space-y-6">
<h2 className="text-3xl sm:text-4xl md:text-5xl font-extrabold dark:text-white text-[#021640] leading-tight tracking-tight [text-wrap:balance]">
Gallery
</h2>
<p className="text-lg md:text-2xl text-gray-600 dark:text-gray-300 leading-relaxed max-w-4xl mx-auto">
<p className="text-base sm:text-lg md:text-xl lg:text-2xl text-gray-600 dark:text-gray-300 leading-relaxed max-w-4xl mx-auto [text-wrap:pretty] px-2 sm:px-0">
Explore our vibrant moments captured through stunning visuals that
showcase our activities, achievements, and memorable experiences.
</p>
</div>

<div className="pt-8">
<div className="pt-6 sm:pt-8">
<button
onClick={viewFullGallery}
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"
className="cursor-pointer bg-[#021640] dark:bg-blue-800 dark:hover:bg-blue-800/90 hover:bg-[#021640]/90 text-white px-8 py-3.5 sm:py-4 rounded-lg font-semibold text-base sm:text-lg transition-all duration-300 hover:shadow-lg"
>
View Full Gallery
</button>
Expand Down
42 changes: 17 additions & 25 deletions src/components/HeroSection.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ export default function HeroSection() {
};

return (
<section className="relative bg-gradient-to-b dark:from-slate-900 dark:to-slate-900 from-gray-50 to-white min-h-[80vh] pt-[60px] sm:pt-[80px] md:pt-[100px] lg:pt-[130px] px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-16">
<section className="relative bg-gradient-to-b dark:from-slate-900 dark:to-slate-900 from-gray-50 to-white min-h-[80vh] pt-[70px] sm:pt-[90px] md:pt-[100px] lg:pt-[130px] px-4 sm:px-6 md:px-10 lg:px-16 py-10 sm:py-16">
{/* Subtle background pattern */}
<div className="absolute inset-0 opacity-5">
<div className="absolute inset-0 opacity-5 pointer-events-none">
<div
className="absolute inset-0"
style={{
Expand All @@ -21,43 +21,35 @@ export default function HeroSection() {
></div>
</div>

<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">
<div className="relative z-10 max-w-7xl mx-auto flex flex-col lg:flex-row items-center justify-between gap-8 sm:gap-12 lg:gap-16">
{/* Text Content */}
<div className="w-full lg:w-1/2 space-y-8 text-center lg:text-left">
<div className="space-y-6">
<div className="inline-block px-4 py-2 dark:text-gray-100 dark:bg-slate-800 bg-[#021640]/10 text-[#021640] rounded-full text-sm md:text-base font-medium tracking-wide uppercase mt-10">
<div className="w-full lg:w-1/2 space-y-6 sm:space-y-8 text-center lg:text-left">
<div className="space-y-4 sm:space-y-6">
<div className="inline-block px-4 py-1.5 sm:py-2 dark:text-gray-100 dark:bg-slate-800 bg-[#021640]/10 text-[#021640] rounded-full text-xs sm:text-sm md:text-base font-semibold tracking-wider uppercase mt-4 sm:mt-6">
{siteConfig.hero.title}
</div>
{(() => {
const words = siteConfig.hero.subtitle.split(" ");
const first = words[0];
const rest = words.slice(1).join(" ");
return (
<h1 className="text-3xl sm:text-4xl md:text-6xl lg:text-7xl font-extrabold dark:text-white text-[#021640] leading-tight tracking-tighter max-w-3xl mx-auto lg:mx-0">
<span className="block sm:inline">{first}</span>
<span className="block sm:inline">
{rest ? ` ${rest}` : ""}
</span>
</h1>
);
})()}
<p className="text-xl md:text-2xl dark:text-gray-300 text-gray-600 leading-relaxed md:leading-normal max-w-2xl mx-auto lg:mx-0">

<h1 className="text-3xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold dark:text-white text-[#021640] leading-tight tracking-tight max-w-3xl mx-auto lg:mx-0 [text-wrap:balance]">
{siteConfig.hero.subtitle}
</h1>

<p className="text-base sm:text-lg md:text-xl lg:text-2xl dark:text-gray-300 text-gray-600 leading-relaxed md:leading-normal max-w-2xl mx-auto lg:mx-0 text-center lg:text-left [text-wrap:pretty] px-2 sm:px-0">
{siteConfig.hero.description}
</p>
</div>

<div className="flex flex-col sm:flex-row sm:justify-center lg:justify-start items-center gap-4 pt-4">
<div className="flex flex-col sm:flex-row justify-center lg:justify-start items-center gap-4 pt-4">
<button
onClick={handleJoinUs}
className="px-10 py-4 bg-[#0A1440] text-xl text-white dark:bg-blue-800 dark:hover:bg-blue-600/90 font-semibold rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105"
className="cursor-pointer bg-[#0A1440] text-xl text-white dark:bg-blue-800 dark:hover:bg-blue-600/90 font-semibold px-10 py-4 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105"
>
Join Us
{siteConfig.hero.primaryButton || "Join Us"}
</button>
<a
href="#about"
role="button"
tabIndex={0}
className="px-8 py-4 dark:text-white dark:border-white text-[#021640] font-semibold text-lg border-2 border-[#021640] rounded-lg transition-all duration-300 hover:bg-[#021640] dark:hover:bg-slate-900/90 hover:text-white"
className="cursor-pointer px-8 py-4 dark:text-white dark:border-white text-[#021640] font-semibold text-lg border-2 border-[#021640] rounded-lg transition-all duration-300 hover:bg-[#021640] dark:hover:bg-slate-900/90 hover:text-white text-center"
>
{siteConfig.hero.secondaryLink}
</a>
Expand All @@ -74,7 +66,7 @@ export default function HeroSection() {
loading="eager"
fetchpriority="high"
decoding="async"
className="w-full h-[320px] sm:h-[380px] md:h-[500px] lg:h-[560px] object-cover transition-transform duration-300 hover:scale-105"
className="w-full h-[280px] sm:h-[380px] md:h-[480px] lg:h-[540px] object-cover transition-transform duration-300 hover:scale-105"
/>

<div className="absolute inset-0 ring-1 ring-black/10 rounded-xl"></div>
Expand Down
32 changes: 16 additions & 16 deletions src/components/MissionSection.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,21 @@ export default function MissionSection() {
return (
<section
id="cards"
className="w-full bg-white dark:bg-slate-900 py-20 relative overflow-hidden"
className="w-full bg-white dark:bg-slate-900 py-12 sm:py-20 relative overflow-hidden"
>
{/* Subtle Background Elements */}
<div className="absolute inset-0 overflow-hidden">
<div className="absolute top-20 right-10 w-72 h-72 bg-blue-50 rounded-full opacity-40 blur-2xl"></div>
<div className="absolute bottom-20 left-10 w-72 h-72 bg-indigo-50 rounded-full opacity-40 blur-2xl"></div>
</div>

<div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
{/* Section Header */}
<div className="text-center mb-16">
<h2 className="text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-6 leading-tight">
<div className="text-center mb-12 sm:mb-16">
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-4 sm:mb-6 leading-tight [text-wrap:balance]">
Driving Innovation Forward
</h2>
<p className="text-[22px] lg:text-2xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
<p className="text-base sm:text-lg lg:text-2xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed [text-wrap:pretty] px-2 sm:px-0">
Discover the core values and principles that guide our engineering
community toward innovation, collaboration, and excellence in
technology.
Expand All @@ -46,29 +46,29 @@ export default function MissionSection() {
))}
</div>

{/* Bottom CTA Section - Matching Card Colors */}
<div className="text-center mt-20">
<div className="relative bg-[#ffffff] dark:bg-slate-800 text-white rounded-2xl p-10 shadow-lg border-2 dark:border-slate-700 border-gray-800">
{/* Decorative Elements - White with opacity */}
<div className="absolute top-4 right-4 w-16 h-16 bg-white/10 rounded-full opacity-50"></div>
<div className="absolute bottom-4 left-4 w-12 h-12 bg-white/5 rounded-full opacity-50"></div>
{/* Bottom CTA Section */}
<div className="text-center mt-12 sm:mt-20">
<div className="relative bg-[#0A1440] dark:bg-slate-800 text-white rounded-2xl p-6 sm:p-10 shadow-lg border-2 dark:border-slate-700 border-[#0A1440]">
{/* Decorative Elements */}
<div className="absolute top-4 right-4 w-16 h-16 bg-white/10 rounded-full opacity-50 pointer-events-none"></div>
<div className="absolute bottom-4 left-4 w-12 h-12 bg-white/5 rounded-full opacity-50 pointer-events-none"></div>

<div className="absolute inset-0 opacity-5 bg-gradient-to-r from-white/10 to-transparent rounded-2xl"></div>
<div className="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full -translate-y-16 translate-x-16"></div>
<div className="absolute inset-0 opacity-5 bg-gradient-to-r from-white/10 to-transparent rounded-2xl pointer-events-none"></div>
<div className="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full -translate-y-16 translate-x-16 pointer-events-none"></div>

<div className="relative z-10">
<h3 className="text-3xl font-bold text-[#0A1440] dark:text-white mb-4">
<h3 className="text-2xl sm:text-3xl font-bold text-white mb-3 sm:mb-4 [text-wrap:balance]">
Ready to Join Our Mission?
</h3>
<p className="text-[#0A1440] dark:text-gray-300 mb-8 text-lg leading-relaxed max-w-2xl mx-auto">
<p className="text-gray-200 dark:text-gray-300 mb-6 sm:mb-8 text-base sm:text-lg leading-relaxed max-w-2xl mx-auto [text-wrap:pretty] px-2 sm:px-0">
Be part of a community that's shaping the future of technology
and innovation. Connect with like-minded engineers and make an
impact.
</p>
<div className="flex justify-center">
<button
onClick={handleJoinUs}
className="px-10 py-4 bg-[#0A1440] text-xl text-white dark:bg-blue-800 dark:hover:bg-blue-600/90 font-semibold rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105"
className="cursor-pointer px-10 py-4 bg-white text-[#0A1440] dark:bg-blue-800 dark:text-white dark:hover:bg-blue-600/90 font-semibold rounded-lg text-lg sm:text-xl transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105"
>
Join Us
</button>
Expand Down
Loading
Loading