adilallo
500d2d0965
CI Pipeline / test (20) (pull_request) Failing after 8m5s
CI Pipeline / test (18) (pull_request) Failing after 8m36s
CI Pipeline / e2e (chromium) (pull_request) Successful in 2m32s
CI Pipeline / e2e (webkit) (pull_request) Successful in 3m40s
CI Pipeline / e2e (firefox) (pull_request) Successful in 5m43s
CI Pipeline / performance (pull_request) Failing after 3m18s
CI Pipeline / visual-regression (pull_request) Failing after 3m20s
CI Pipeline / lint (pull_request) Successful in 1m7s
CI Pipeline / storybook (pull_request) Successful in 1m32s
CI Pipeline / build (pull_request) Successful in 1m22s
53 lines
1.8 KiB
JavaScript
53 lines
1.8 KiB
JavaScript
"use client";
|
|
|
|
import { getAssetPath } from "../../lib/assetUtils";
|
|
import ContentContainer from "./ContentContainer";
|
|
|
|
export default function ContentBanner({ post }) {
|
|
return (
|
|
<div className="pt-[var(--measures-spacing-016)] md:pt-[var(--measures-spacing-008)] lg:pt-[50px] xl:pt-[112px] h-[275px] sm:h-[326px] md:h-[224px] lg:h-[358.4px] xl:h-[504px] relative w-full sm:overflow-hidden">
|
|
{/* Background SVG - Default to sm breakpoint */}
|
|
<div
|
|
className="absolute inset-0 w-full h-full bg-cover bg-no-repeat aspect-[320/225.5]"
|
|
style={{
|
|
backgroundImage: `url(${getAssetPath("assets/Content_Banner.svg")})`,
|
|
backgroundPosition: "center bottom",
|
|
}}
|
|
/>
|
|
|
|
{/* Background SVG - md breakpoint and above */}
|
|
<div
|
|
className="absolute inset-0 w-full h-full bg-cover bg-no-repeat aspect-[640/224] md:block hidden"
|
|
style={{
|
|
backgroundImage: `url(${getAssetPath(
|
|
"assets/Content_Banner_2.svg",
|
|
)})`,
|
|
backgroundPosition: "center bottom",
|
|
}}
|
|
/>
|
|
|
|
{/* Content Container */}
|
|
<div
|
|
className="
|
|
relative z-10 h-full
|
|
flex flex-col
|
|
pl-[var(--measures-spacing-016)] md:pl-[var(--measures-spacing-024)] lg:pl-[var(--measures-spacing-064)]
|
|
pr-[96px] md:pr-[350px]
|
|
|
|
/* default: normal flow, top-aligned */
|
|
justify-start
|
|
|
|
/* only at md: take out of flow and center vertically */
|
|
md:absolute md:inset-x-0 md:top-1/2 md:-translate-y-1/2 md:w-full md:h-auto
|
|
|
|
/* after md (lg+): snap back to normal flow/top align */
|
|
lg:static lg:translate-y-0 lg:top-auto lg:h-full lg:justify-start
|
|
"
|
|
>
|
|
{/* ContentContainer with post data */}
|
|
<ContentContainer post={post} size="responsive" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|