pkupuk
2e32d52133
Convert custom CSS styling to Tailwind utility classes across marketing and about pages. Improve responsive layouts in feature grids, service lists, and sliders. Consolidate section headers using the shared SectionHeader component to maintain visual consistency.
77 lines
1.8 KiB
Plaintext
77 lines
1.8 KiB
Plaintext
---
|
|
/**
|
|
* TeamsHero - Hero section for Teams page
|
|
* Pixel-perfect implementation based on Webflow design
|
|
*/
|
|
interface Props {
|
|
title?: string;
|
|
subtitle?: string;
|
|
backgroundImage?: {
|
|
url?: string;
|
|
alt?: string;
|
|
};
|
|
}
|
|
|
|
const {
|
|
title = "恩群大本營",
|
|
subtitle = "Team members of Enchun",
|
|
backgroundImage,
|
|
} = Astro.props;
|
|
|
|
// Determine if we have a background image
|
|
const hasBackgroundImage = backgroundImage?.url;
|
|
const bgImageUrl = backgroundImage?.url || "";
|
|
---
|
|
|
|
<section
|
|
class:list={[
|
|
// Base styles - relative positioning for overlay
|
|
"relative",
|
|
"flex",
|
|
"items-center",
|
|
"justify-center",
|
|
"overflow-hidden",
|
|
"text-center",
|
|
"px-5",
|
|
// Background color fallback
|
|
!hasBackgroundImage && "bg-(--color-dark-blue)",
|
|
// Background image styles
|
|
hasBackgroundImage && "bg-cover bg-center bg-no-repeat",
|
|
// Pull up to counteract layout's pt-20 padding (80px)
|
|
"-mt-20",
|
|
// Full viewport height
|
|
"min-h-dvh",
|
|
"z-0",
|
|
]}
|
|
style={hasBackgroundImage
|
|
? `background-image: url('${bgImageUrl}')`
|
|
: undefined}
|
|
>
|
|
{/* Background image overlay for text readability */}
|
|
{
|
|
hasBackgroundImage && (
|
|
<div
|
|
class="absolute inset-0 bg-linear-to-b from-black/80 to-transparent z-1"
|
|
aria-hidden="true"
|
|
/>
|
|
)
|
|
}
|
|
|
|
{/* Content container - relative z-index above overlay */}
|
|
<div class="relative z-2 max-w-6xl mx-auto">
|
|
<!-- Main Title -->
|
|
<h1
|
|
class="text-white text-shadow-md font-['Noto_Sans_TC',sans-serif]! font-bold leading-[1.2] -mb-1 text-6xl! md:text-5xl"
|
|
>
|
|
{title}
|
|
</h1>
|
|
|
|
<!-- Subtitle -->
|
|
<p
|
|
class="text-gray-100 text-shadow-md font-['Quicksand'] font-thin leading-[1.2] max-w-3xl mx-auto text-3xl! md:text-2xl"
|
|
>
|
|
{subtitle}
|
|
</p>
|
|
</div>
|
|
</section>
|