3693495dd0
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
Use mainwhite.svg on white sections with curvy green transitions into flat green bands, improve text and button contrast, and deploy via OpenNext on Cloudflare Workers. Co-authored-by: Cursor <cursoragent@cursor.com>
107 lines
2.6 KiB
TypeScript
107 lines
2.6 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const siteName = "Great Rift Valley Innovation Summit";
|
|
|
|
type BrandLogoProps = {
|
|
className?: string;
|
|
href?: string;
|
|
/** Header/footer wordmark, or icon-only */
|
|
variant?: "default" | "footer" | "icon";
|
|
/** Tighter sizing for the floating navbar */
|
|
compact?: boolean;
|
|
};
|
|
|
|
export function BrandLogo({
|
|
className,
|
|
href = "/",
|
|
variant = "default",
|
|
compact = false,
|
|
}: BrandLogoProps) {
|
|
const isFooter = variant === "footer";
|
|
|
|
const markSize = compact ? "size-8" : "size-9 md:size-10";
|
|
const markPad = isFooter ? "rounded-md bg-white p-1 shadow-sm" : "rounded-md";
|
|
|
|
const mark = (
|
|
<span className={cn("inline-flex shrink-0 items-center justify-center", markPad)}>
|
|
<Image
|
|
src="/branding/logo-icon.png"
|
|
alt=""
|
|
width={40}
|
|
height={40}
|
|
className={cn("object-contain", variant === "icon" ? "size-8" : markSize)}
|
|
priority={variant === "default"}
|
|
/>
|
|
</span>
|
|
);
|
|
|
|
if (variant === "icon") {
|
|
return (
|
|
<span className={cn("inline-flex", className)} aria-hidden>
|
|
{mark}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
const primaryClass = isFooter
|
|
? "text-white"
|
|
: "text-[#1a5c38]";
|
|
const secondaryClass = isFooter
|
|
? "text-white/85"
|
|
: "text-[#0d3d26]/90";
|
|
|
|
const primarySize = compact
|
|
? "text-[12px] sm:text-[13px] md:text-sm"
|
|
: isFooter
|
|
? "text-base md:text-lg"
|
|
: "text-sm sm:text-base md:text-lg";
|
|
const secondarySize = compact
|
|
? "text-[8px] sm:text-[9px]"
|
|
: "text-[9px] sm:text-[10px]";
|
|
|
|
const content = (
|
|
<span className={cn("inline-flex min-w-0 items-center gap-2.5", className)}>
|
|
{mark}
|
|
<span
|
|
className={cn(
|
|
"flex min-w-0 flex-col items-start justify-center leading-none",
|
|
compact ? "gap-0" : "gap-0.5"
|
|
)}
|
|
>
|
|
<span
|
|
className={cn(
|
|
"font-wordmark uppercase whitespace-nowrap",
|
|
primaryClass,
|
|
primarySize
|
|
)}
|
|
>
|
|
Great Rift Valley
|
|
</span>
|
|
<span
|
|
className={cn(
|
|
"font-normal whitespace-nowrap",
|
|
secondaryClass,
|
|
secondarySize
|
|
)}
|
|
>
|
|
Innovation Summit
|
|
</span>
|
|
</span>
|
|
</span>
|
|
);
|
|
|
|
if (!href) return content;
|
|
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className="shrink-0 rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1a5c38] focus-visible:ring-offset-2"
|
|
aria-label={siteName}
|
|
>
|
|
{content}
|
|
</Link>
|
|
);
|
|
}
|