forked from UKSOURCE/hailearning.edu.vn
45 lines
2.5 KiB
TypeScript
45 lines
2.5 KiB
TypeScript
export default function FeaturedHero() {
|
|
return (
|
|
<section id="featured-hero" className="w-full bg-white border-b border-ui-border mb-12">
|
|
<div className="max-w-[1440px] mx-auto">
|
|
<div className="flex flex-col lg:flex-row min-h-[500px]">
|
|
{/* Left: Content */}
|
|
<div className="w-full lg:w-1/2 p-8 lg:p-16 flex flex-col justify-center">
|
|
<span className="inline-block px-3 py-1 bg-brand-light text-brand-blue border border-brand-blue/20 text-xs font-semibold mb-4 w-fit" style={{ borderRadius: "6px" }}>
|
|
Featured Research
|
|
</span>
|
|
<div className="blog-heading text-ui-text tracking-tight mb-6 leading-tight font-bold">
|
|
Pioneering Sustainable Urban Development in the Heart of Paris
|
|
</div>
|
|
<p className="text-lg text-ui-muted mb-8 leading-relaxed">
|
|
Our latest collaborative research initiative uncovers groundbreaking methods for integrating green infrastructure into historic urban environments, setting a new standard for European cities.
|
|
</p>
|
|
<div className="flex items-center gap-4 text-sm text-ui-muted mb-8 mt-4">
|
|
<div className="flex items-center gap-2">
|
|
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-1.jpg" alt="Author" className="w-8 h-8 rounded-full border border-ui-border" />
|
|
<span className="font-medium text-ui-text">Dr. Amélie Dubois</span>
|
|
</div>
|
|
<span>•</span>
|
|
<span>October 15, 2024</span>
|
|
<span>•</span>
|
|
<span>5 min read</span>
|
|
</div>
|
|
<a href="#" className="inline-flex items-center justify-center px-5 py-3 text-white font-semibold text-sm hover:bg-brand-hover transition-colors shadow-sm w-fit gap-2" style={{ borderRadius: "5px", backgroundColor: "rgb(38, 60, 111)" }}>
|
|
Read Full Story <i className="fas fa-arrow-right text-xs"></i>
|
|
</a>
|
|
</div>
|
|
|
|
{/* Right: Image */}
|
|
<div className="w-full lg:w-1/2 bg-gray-100 relative min-h-[300px] lg:min-h-full">
|
|
<img
|
|
className="absolute inset-0 w-full h-full object-cover"
|
|
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/75c7c284e8-18119bca345a35938b88.png"
|
|
alt="Aerial view of Paris with sustainable green roofs and modern eco-friendly architecture blending with historic buildings"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|