mukeshs/cmc_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Logo and Hero update

Browse Source
This commit is contained in:
mukeshs
2025-10-13 11:18:08 +05:30
parent 65b7bda12a
commit 5dcd7b179a
2 changed files with 28 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 114 KiB

After

Width:  |  Height:  |  Size: 32 KiB

51
src/components/home/HeroSection.tsx
View File

@ -3,38 +3,41 @@ import Image from 'next/image';
const HeroSection = () => {
return (
<div className="relative h-80 md:h-96 lg:h-[500px] min-h-80 md:min-h-96 lg:min-h-[450px] overflow-hidden">
{/* Background Image using Next.js Image with fill */}
<div className="relative h-80 md:h-96 lg:h-[380px] min-h-80 md:min-h-96 lg:min-h-[380px] overflow-hidden">
{/* Background Image */}
<Image
src="/images/hero.png"
src="/images/heronew.png"
alt="CMC Vellore 125 years celebration"
fill
className="object-cover"
/>
{/* Main Content */}
<div className="relative z-10 flex items-center justify-center text-left h-full px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 2xl:px-20 py-8 sm:py-12 md:py-16">
<div className="w-full max-w-5xl">
{/* Main Heading */}
<h1 className="text-white mb-6 sm:mb-8 md:mb-10 text-left">
<div className="text-lg sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl 2xl:text-5xl font-bold leading-tight mb-1 sm:mb-2 md:mb-3 lg:mb-4">
This year, we celebrate
</div>
<div className="text-lg sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl 2xl:text-5xl font-bold leading-tight mb-1 sm:mb-2 md:mb-3 lg:mb-4">
125 years of CMC Vellore
</div>
<div className="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl 2xl:text-4xl font-semibold text-gray-200">
1900 - 2025
</div>
</h1>
<div className="relative z-10 flex items-center h-full px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 2xl:px-24">
<div className="max-w-2xl lg:max-w-3xl">
{/* Glass Card */}
<div className="bg-white/20 backdrop-blur-[2px] rounded-2xl p-8 sm:p-10 md:p-12 lg:p-4 shadow-2xl border border-white/30">
{/* Main Heading */}
<h1 className="mb-6 sm:mb-8 md:mb-10" style={{ color: '#012068' }}>
<div className="text-lg sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl 2xl:text-5xl font-semibold leading-tight mb-1 sm:mb-2 md:mb-3 lg:mb-4">
This year, we celebrate <span className='text-5xl text-bold'>125 years</span>
</div>
<div className="text-lg sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl 2xl:text-5xl font-semibold leading-tight mb-1 sm:mb-2 md:mb-3 lg:mb-4">
of CMC Vellore
</div>
<div className="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl 2xl:text-4xl font-semibold" style={{ color: '#012068' }}>
1900 - 2025
</div>
</h1>
{/* CTA Button */}
<button
className="bg-red-600 hover:bg-red-700 text-white px-6 py-3 sm:px-8 sm:py-4 md:px-10 md:py-4 text-sm sm:text-base md:text-lg font-semibold rounded-sm transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-red-300"
style={{ backgroundColor: '#e64838' }}
>
Discover
</button>
{/* CTA Button */}
<button
className="bg-red-600 hover:bg-red-700 text-white px-6 py-3 sm:px-8 sm:py-4 md:px-10 md:py-4 text-sm sm:text-base md:text-lg font-semibold rounded-lg transition-all duration-300 shadow-lg hover:shadow-xl hover:-translate-y-0.5 focus:outline-none focus:ring-4 focus:ring-red-300"
style={{ backgroundColor: '#e64838' }}
>
Discover
</button>
</div>
</div>
</div>
</div>