adilallo
82 lines
3.3 KiB
TypeScript
82 lines
3.3 KiB
TypeScript
"use client";
|
||
|
||
/**
|
||
* Figma: "Sections / Hero" (see registry)
|
||
*/
|
||
|
||
import { memo } from "react";
|
||
import Image from "next/image";
|
||
import { useTranslation } from "../../../contexts/MessagesContext";
|
||
import ContentLockup from "../../type/ContentLockup";
|
||
import HeroDecor from "./HeroDecor";
|
||
import { ASSETS, getAssetPath } from "../../../../lib/assetUtils";
|
||
|
||
/**
|
||
* Intrinsic dimensions of `public/assets/marketing/hero-image.png` (2560×1600,
|
||
* 16:10). Passed to `next/image` to reserve aspect ratio + drive responsive
|
||
* srcset generation. Actual rendered size is governed by `sizes`.
|
||
*/
|
||
const HERO_IMAGE_WIDTH = 2560;
|
||
const HERO_IMAGE_HEIGHT = 1600;
|
||
|
||
interface HeroBannerProps {
|
||
title?: string;
|
||
subtitle?: string;
|
||
description?: string;
|
||
ctaText?: string;
|
||
ctaHref?: string;
|
||
}
|
||
|
||
const HeroBanner = memo<HeroBannerProps>(
|
||
({ title, subtitle, description, ctaText, ctaHref }) => {
|
||
const t = useTranslation();
|
||
const imageAlt = t("heroBanner.imageAlt");
|
||
|
||
return (
|
||
<section className="bg-transparent px-[var(--spacing-scale-008)] sm:px-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] lg:px-[var(--spacing-scale-024)] xl:px-[var(--spacing-scale-048)]">
|
||
<div className="flex flex-col gap-[var(--spacing-scale-010)]">
|
||
{/* Frame container for content */}
|
||
<div className="bg-[var(--color-surface-inverse-brand-primary)] p-[var(--spacing-scale-012)] sm:p-[var(--spacing-scale-016)] md:p-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-096)] lg:px-[var(--spacing-scale-064)] rounded-tl-none rounded-tr-[var(--radius-measures-radius-medium)] rounded-br-[var(--radius-measures-radius-medium)] rounded-bl-[var(--radius-measures-radius-medium)] flex flex-col gap-[var(--spacing-scale-024)] sm:gap-[var(--spacing-scale-024)] md:flex-row md:gap-[var(--spacing-scale-048)] relative overflow-hidden">
|
||
{/* DECORATIONS (behind content) */}
|
||
<HeroDecor
|
||
className="pointer-events-none absolute z-0
|
||
left-0 top-0
|
||
translate-x-[-72px] translate-y-[26px] sm:translate-x-[-78px] sm:translate-y-[24px] md:translate-x-[-86px] md:translate-y-[16px] lg:translate-x-[-88px] lg:translate-y-[16px]
|
||
w-[1540px] h-[645px] scale-[1.04]"
|
||
/>
|
||
|
||
{/* Content lockup - Large variant */}
|
||
<div className="md:flex-1">
|
||
<ContentLockup
|
||
title={title}
|
||
subtitle={subtitle}
|
||
description={description}
|
||
ctaText={ctaText}
|
||
ctaHref={ctaHref}
|
||
buttonClassName="shrink-0 whitespace-nowrap min-w-[280px]"
|
||
/>
|
||
</div>
|
||
|
||
{/* Hero Image Container */}
|
||
<div className="w-full h-full md:flex-1 rounded-[8px] overflow-hidden relative z-10 flex items-center justify-center">
|
||
<Image
|
||
src={getAssetPath(ASSETS.HERO_IMAGE)}
|
||
alt={imageAlt}
|
||
width={HERO_IMAGE_WIDTH}
|
||
height={HERO_IMAGE_HEIGHT}
|
||
priority
|
||
sizes="(min-width: 768px) 50vw, 100vw"
|
||
className="w-full h-auto"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
},
|
||
);
|
||
|
||
HeroBanner.displayName = "HeroBanner";
|
||
|
||
export default HeroBanner;
|