// Inline SVG logos as React components — bypasses ![]()
styling issues.
// Real logo image components (uses the brand PNGs)
function UCreativeLogoImg({ theme = "light", height = 40, style = {} }) {
const src = theme === "dark" ? "assets/logos/uc-creative-light.png" : "assets/logos/uc-creative-dark.png";
return (
);
}
// Brand colors for the multi-color feather tail
const FEATHER = {
yellow: "#f7c500",
purple: "#6b27a6",
orange: "#ee6a26",
green: "#00bf7a",
};
function UCreativeMark({ color = "currentColor", size = 60, monochrome = false }) {
// The peacock mark with multi-color feather tail.
// monochrome=true paints everything in `color` (for subtle backgrounds).
const fyellow = monochrome ? color : FEATHER.yellow;
const fpurple = monochrome ? color : FEATHER.purple;
const forange = monochrome ? color : FEATHER.orange;
const fgreen = monochrome ? color : FEATHER.green;
return (
);
}
function UCreativeWordmark({ color = "#1f1f1f", tagline = "#00bf7a", size = 200, layout = "full", monochrome = false }) {
const fyellow = monochrome ? color : FEATHER.yellow;
const fpurple = monochrome ? color : FEATHER.purple;
const forange = monochrome ? color : FEATHER.orange;
const fgreen = monochrome ? color : FEATHER.green;
const h = layout === "full" ? (size * 319) / 536 : (size * 280) / 536;
return (
);
}
function UniverseLogo({ color = "#1f1f1f", accent = "#00bf7a", size = 280, withText = true }) {
// "U" with three orbiting dots, then UNIVERSE / OF / CONTENT text on the right
const w = withText ? 622 : 300;
const h = withText ? (size * 254) / 622 : (size * 254) / 300;
return (
);
}
Object.assign(window, { UCreativeMark, UCreativeWordmark, UniverseLogo, UCreativeLogoImg });