63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
import Image from 'next/image';
|
|
|
|
/**
|
|
* The two official Loyaly.ai assets — and the only place in the product where
|
|
* brand colour is allowed to appear. Everything around them stays monochrome.
|
|
*
|
|
* Both render at their own intrinsic ratio: a caller sizes ONE axis and the
|
|
* other is derived, so neither mark can be letterboxed or stretched. There is
|
|
* deliberately no `fill` / `objectFit` escape hatch — that is how logos end up
|
|
* distorted. Recolouring is likewise not a prop: the PNGs carry the mark.
|
|
*/
|
|
|
|
// Intrinsic pixel dimensions of the shipped files, alpha-trimmed so the
|
|
// wordmark optically centres (the supplied original carried 44px of dead
|
|
// transparent space on its trailing edge).
|
|
const LOGO = {src: '/white-logo.png', width: 1489, height: 248};
|
|
const MARK = {src: '/brand/loyaly-mark.png', width: 285, height: 256};
|
|
|
|
interface BrandProps {
|
|
/** Alternative text. Pass '' where a sibling element already names the brand. */
|
|
alt?: string;
|
|
/** Set on marks that paint above the fold, so Next preloads them. */
|
|
priority?: boolean;
|
|
}
|
|
|
|
/** Full horizontal Loyaly.ai lockup. Sized by height; width follows. */
|
|
export function BrandLogo({
|
|
height = 28,
|
|
alt = 'Loyaly.ai',
|
|
priority = false,
|
|
}: BrandProps & {height?: number}) {
|
|
return (
|
|
<Image
|
|
src={LOGO.src}
|
|
alt={alt}
|
|
height={height}
|
|
width={Math.round((height * LOGO.width) / LOGO.height)}
|
|
priority={priority}
|
|
// Block display keeps the anchor that usually wraps this from painting a
|
|
// hover underline in the leftover line box.
|
|
className="block"
|
|
/>
|
|
);
|
|
}
|
|
|
|
/** Heart symbol alone, for spaces too narrow for the lockup. Sized by width. */
|
|
export function BrandMark({
|
|
size = 28,
|
|
alt = 'Loyaly.ai',
|
|
priority = false,
|
|
}: BrandProps & {size?: number}) {
|
|
return (
|
|
<Image
|
|
src={MARK.src}
|
|
alt={alt}
|
|
width={size}
|
|
height={Math.round((size * MARK.height) / MARK.width)}
|
|
priority={priority}
|
|
className="block"
|
|
/>
|
|
);
|
|
}
|