forked from UKSOURCE/hailearning.edu.vn
102 lines
5.6 KiB
TypeScript
102 lines
5.6 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
const ResearchHero = () => {
|
|
const router = useRouter();
|
|
return (
|
|
<section id="research-hero">
|
|
<div className="max-w-[1440px] mx-auto px-6 lg:px-8">
|
|
<div className="flex flex-col lg:flex-row gap-12 items-center">
|
|
|
|
{/* --- CỘT TRÁI --- */}
|
|
<div className="w-full lg:w-1/2 hero-left">
|
|
|
|
{/* Label: gạch ngang + "Research Hub" */}
|
|
<div className="hero-label">
|
|
<span className="hero-label-line"></span>
|
|
<span className="hero-label-text">Research Hub</span>
|
|
</div>
|
|
|
|
{/* Heading */}
|
|
<h1>
|
|
Pioneering <br />
|
|
<span>Discovery</span>
|
|
</h1>
|
|
|
|
{/* Description */}
|
|
<p className="hero-desc">
|
|
Explore our cutting-edge research domains, active projects, and interdisciplinary centers driving innovation in liberal arts and sciences.
|
|
</p>
|
|
|
|
{/* Buttons */}
|
|
<div className="hero-buttons">
|
|
<button className="r-btn-primary" onClick={() => router.push('/research/search')}>
|
|
Browse Projects <i className="fa-solid fa-arrow-right text-sm"></i>
|
|
</button>
|
|
<button className="r-btn-outline">
|
|
View Publications
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* --- CỘT PHẢI: Visual composition --- */}
|
|
<div className="w-full lg:w-1/2 relative">
|
|
<div className="relative w-full aspect-square max-w-[600px] mx-auto">
|
|
|
|
{/* Glow nền */}
|
|
<div className="absolute inset-0 bg-brand-light rounded-full blur-3xl opacity-50"></div>
|
|
|
|
{/* Main image card */}
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80%] h-[80%] bg-white rounded-[32px] border border-ui-border shadow-2xl overflow-hidden z-10">
|
|
<img
|
|
className="w-full h-full object-cover"
|
|
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/11d578de27-837b09c2ea77020bcb48.png"
|
|
alt="Research laboratory"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
|
|
<div className="absolute bottom-0 left-0 p-6 w-full text-white">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<span className="px-3 py-1 text-white text-xs font-bold rounded-full" style={{ backgroundColor: 'var(--r-accent)' }}>
|
|
Featured
|
|
</span>
|
|
</div>
|
|
<h3 className="text-xl font-bold mb-1" style={{ fontFamily: 'Inter, sans-serif' }}>Cognitive Sciences Lab</h3>
|
|
<p className="text-sm opacity-90" style={{ fontFamily: 'Inter, sans-serif' }}>Exploring the intersection of AI and human psychology.</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Floating stat card 1 — Publications */}
|
|
<div className="r-stat-card" style={{ top: '10%', right: '5%' }}>
|
|
<div className="w-12 h-12 rounded-full flex items-center justify-center" style={{ backgroundColor: 'var(--r-blue-light)', color: 'var(--r-blue)' }}>
|
|
<i className="fa-solid fa-book-open text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<p className="text-2xl font-bold" style={{ color: 'var(--r-text)', fontFamily: 'Inter, sans-serif' }}>12k+</p>
|
|
<p className="text-xs font-medium" style={{ color: 'var(--r-muted)', fontFamily: 'Inter, sans-serif' }}>Publications</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Floating stat card 2 — Active Projects */}
|
|
<div className="r-stat-card" style={{ bottom: '15%', left: '0%' }}>
|
|
<div className="w-12 h-12 rounded-full flex items-center justify-center" style={{ backgroundColor: '#f0fdf4', color: '#16a34a' }}>
|
|
<i className="fa-solid fa-flask text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<p className="text-2xl font-bold" style={{ color: 'var(--r-text)', fontFamily: 'Inter, sans-serif' }}>340</p>
|
|
<p className="text-xs font-medium" style={{ color: 'var(--r-muted)', fontFamily: 'Inter, sans-serif' }}>Active Projects</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default ResearchHero;
|