Fix svg loading issues
This commit is contained in:
@@ -1,12 +1,9 @@
|
||||
"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";
|
||||
@@ -25,13 +22,18 @@ interface HeroBannerProps {
|
||||
description?: string;
|
||||
ctaText?: string;
|
||||
ctaHref?: string;
|
||||
imageAlt?: string;
|
||||
}
|
||||
|
||||
const HeroBanner = memo<HeroBannerProps>(
|
||||
({ title, subtitle, description, ctaText, ctaHref }) => {
|
||||
const t = useTranslation();
|
||||
const imageAlt = t("heroBanner.imageAlt");
|
||||
|
||||
({
|
||||
title,
|
||||
subtitle,
|
||||
description,
|
||||
ctaText,
|
||||
ctaHref,
|
||||
imageAlt = "Hero illustration",
|
||||
}) => {
|
||||
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)]">
|
||||
@@ -58,7 +60,7 @@ const HeroBanner = memo<HeroBannerProps>(
|
||||
</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">
|
||||
<div className="relative z-10 flex w-full items-center justify-center overflow-hidden rounded-[8px] aspect-[16/10] md:flex-1">
|
||||
<Image
|
||||
src={getAssetPath(ASSETS.HERO_IMAGE)}
|
||||
alt={imageAlt}
|
||||
@@ -66,7 +68,7 @@ const HeroBanner = memo<HeroBannerProps>(
|
||||
height={HERO_IMAGE_HEIGHT}
|
||||
priority
|
||||
sizes="(min-width: 768px) 50vw, 100vw"
|
||||
className="w-full h-auto"
|
||||
className="size-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user