52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
import React from "react";
|
|
import grhWatermark from "../../../assets/images/grhWatermark.png";
|
|
|
|
export default function Watermark({
|
|
opacity = 0.08,
|
|
size = 520,
|
|
}: {
|
|
opacity?: number;
|
|
size?: number;
|
|
}) {
|
|
return (
|
|
<div className="pointer-events-none fixed inset-0 z-20 overflow-hidden">
|
|
{/* Marca centrada (SIN rotación) */}
|
|
<div
|
|
className="absolute left-1/2 top-1/2"
|
|
style={{
|
|
transform: "translate(-50%, -50%)",
|
|
opacity,
|
|
}}
|
|
>
|
|
<img
|
|
src={grhWatermark}
|
|
alt="GRH Watermark"
|
|
width={size}
|
|
height={size}
|
|
className="select-none object-contain"
|
|
draggable={false}
|
|
style={{ filter: "grayscale(100%)" }} // opcional
|
|
/>
|
|
</div>
|
|
|
|
{/* Marca secundaria (SIN rotación) */}
|
|
<div
|
|
className="absolute right-[-140px] bottom-[-180px]"
|
|
style={{
|
|
opacity: Math.max(0.04, opacity * 0.55),
|
|
}}
|
|
>
|
|
<img
|
|
src={grhWatermark}
|
|
alt="GRH Watermark"
|
|
width={Math.round(size * 0.75)}
|
|
height={Math.round(size * 0.75)}
|
|
className="select-none object-contain"
|
|
draggable={false}
|
|
style={{ filter: "grayscale(100%)" }} // opcional
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|