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.
99 lines
3.0 KiB
Plaintext
99 lines
3.0 KiB
Plaintext
---
|
|
/**
|
|
* BenefitsSection - Work benefits section for Teams page
|
|
* Pixel-perfect implementation based on Webflow design
|
|
* Features 6 benefit cards with alternating layout
|
|
*/
|
|
|
|
interface BenefitItem {
|
|
title: string;
|
|
img: string;
|
|
}
|
|
|
|
interface Props {
|
|
benefits?: BenefitItem[];
|
|
}
|
|
|
|
const defaultBenefits: BenefitItem[] = [
|
|
{
|
|
title: "高績效、高獎金\n新人開張獎金",
|
|
img: "/api/media/file/61f24aa108528b79b2942d05_Make%20it%20rain-bro-%E6%96%B0%E4%BA%BA%E9%96%8B%E5%BC%B5%E7%8D%8E%E9%87%91.svg",
|
|
},
|
|
{
|
|
title: "生日慶生、電影日\n員工下午茶",
|
|
img: "/api/media/file/61f24aa108528be590942d06_Blowing%20out%20Birthday%20candles-bro-%E7%94%9F%E6%97%A5%E6%85%B6%E7%94%9F.svg",
|
|
},
|
|
{
|
|
title: "教育訓練補助",
|
|
img: "/api/media/file/61f24aa108528be22a942d03_Online%20learning-bro-%E6%95%99%E8%82%B2%E8%A8%93%E7%B7%B4%E8%A3%9C%E5%8A%A9.svg",
|
|
},
|
|
{
|
|
title: "寬敞的工作空間",
|
|
img: "/api/media/file/61f24aa108528be064942d08_Shared%20workspace-bro-%E5%AF%AC%E6%95%9E%E7%9A%84%E5%B7%A5%E4%BD%9C%E7%A9%BA%E9%96%93.svg",
|
|
},
|
|
{
|
|
title: "員工國內外旅遊\n部門聚餐、年終活動",
|
|
img: "/api/media/file/61f24aa108528b0960942d04_Flight%20Booking-bro-%E5%93%A1%E5%B7%A5%E6%97%85%E9%81%8A.svg",
|
|
},
|
|
{
|
|
title: "入職培訓及團隊建設",
|
|
img: "/api/media/file/61f24aa108528bf90b942d02_Brainstorming-bro-%E5%85%A5%E8%81%B7%E5%9F%B9%E8%A8%93.svg",
|
|
},
|
|
];
|
|
|
|
const benefits = Astro.props.benefits || defaultBenefits;
|
|
import SectionHeader from "../components/SectionHeader.astro";
|
|
---
|
|
|
|
<section
|
|
class="py-15 px-5 bg-white md:py-10 md:px-4"
|
|
aria-labelledby="benefits-heading"
|
|
>
|
|
<div class="max-w-6xl mx-auto">
|
|
<!-- Section Header -->
|
|
<SectionHeader
|
|
title="工作福利"
|
|
subtitle="Benefit Packages"
|
|
sectionBg="bg-white"
|
|
/>
|
|
|
|
<!-- Benefits Grid: 2 cards per row -->
|
|
<div
|
|
class="max-w-md md:max-w-3xl mx-auto grid grid-cols-1 gap-x-2 gap-y-2 md:gap-y-6 md:grid-cols-2 py-18"
|
|
>
|
|
{
|
|
benefits.map((benefit, index) => {
|
|
const isLeft = index % 2 === 0;
|
|
return (
|
|
<div class="grid grid-cols-2 gap-2 items-center">
|
|
<div
|
|
class:list={[
|
|
isLeft ? "order-1 text-right" : "order-2 text-left",
|
|
]}
|
|
>
|
|
<h3 class="text-xl md:text-base lg:text-xl font-semibold text-(--color-enchunblue) whitespace-pre-wrap leading-snug">
|
|
{benefit.title}
|
|
</h3>
|
|
</div>
|
|
<div
|
|
class:list={[
|
|
"flex items-center",
|
|
isLeft ? "order-2 justify-start" : "order-1 justify-end",
|
|
]}
|
|
>
|
|
<img
|
|
src={`https://enchun-cms.anlstudio.cc${benefit.img}`}
|
|
alt={benefit.title}
|
|
class="size-35 object-contain"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
}
|
|
</div>
|
|
</div>
|
|
</section>
|