forked from izu/student-web-if-development-kit
Andrie
66 lines
2.5 KiB
TypeScript
66 lines
2.5 KiB
TypeScript
import { useLang } from '../context/LanguageContext';
|
|
|
|
export default function Hero() {
|
|
const { t } = useLang();
|
|
|
|
return (
|
|
<div
|
|
id="hero"
|
|
className="acaab-full-bleed bg-untan-navy text-white pt-6 md:pt-8 lg:pt-10 mb-8 border-t border-white/10 relative"
|
|
>
|
|
<div className="container mx-auto px-4 lg:px-8 relative z-10">
|
|
|
|
<div className="grid lg:grid-cols-2 gap-6 lg:gap-10 items-center">
|
|
|
|
{/* LEFT CONTENT */}
|
|
<div className="max-w-3xl py-6 md:py-8 lg:py-10">
|
|
<span className="inline-block bg-untan-yellow text-slate-900 text-[10px] md:text-xs font-bold uppercase tracking-widest px-2 py-0.5 mb-3">
|
|
{t.hero.badge}
|
|
</span>
|
|
<h1 className="text-2xl md:text-3xl lg:text-[36px] font-bold font-serif leading-tight md:leading-snug tracking-tight mb-3">
|
|
{t.hero.title}
|
|
</h1>
|
|
<p className="text-slate-300 max-w-2xl text-sm md:text-base leading-relaxed">
|
|
{t.hero.desc}
|
|
</p>
|
|
</div>
|
|
|
|
{/* RIGHT IMAGE */}
|
|
<div className="relative flex justify-center lg:justify-end items-end">
|
|
{/* Glow behind image */}
|
|
<div className="absolute bottom-0 w-[300px] h-[300px] bg-cyan-300/10 rounded-full blur-3xl"></div>
|
|
|
|
<div className="relative">
|
|
<img
|
|
src={new URL('../gambar/hero.png', import.meta.url).href}
|
|
alt="Mahasiswa Informatika UNTAN"
|
|
className="
|
|
relative z-10
|
|
w-full
|
|
max-w-[300px]
|
|
md:max-w-[420px]
|
|
lg:max-w-[450px]
|
|
h-auto
|
|
object-contain
|
|
opacity-95
|
|
drop-shadow-[0_15px_35px_rgba(0,0,0,0.25)]
|
|
hover:scale-[1.02]
|
|
transition-all
|
|
duration-500
|
|
"
|
|
/>
|
|
{/* Gradient fade bawah */}
|
|
<div className="absolute bottom-0 left-0 w-full h-40 bg-gradient-to-t from-untan-navy to-transparent z-20" />
|
|
{/* Gradient fade kiri */}
|
|
<div className="absolute top-0 left-0 h-full w-20 bg-gradient-to-r from-untan-navy to-transparent z-20" />
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* Decorative Glow */}
|
|
<div className="absolute top-0 right-0 -mr-20 -mt-20 w-80 h-80 bg-untan-yellow/10 rounded-full blur-3xl pointer-events-none"></div>
|
|
</div>
|
|
);
|
|
} |