109 lines
3.0 KiB
JavaScript
109 lines
3.0 KiB
JavaScript
// Small shared primitives: logo, arrow icon, ambient glow, eyebrow, trust strip.
|
|
|
|
// The "V_" mark — bold filled V + terminal-cursor underscore. Sized via the
|
|
// outer .logo-mark; the SVG fills it. `stroke-linejoin="round"` + a thin
|
|
// stroke on the filled paths softens the corners just enough.
|
|
function LogoMark({ size = 26, blink = true }) {
|
|
return (
|
|
<span className="logo-mark" style={{ width: size, height: size }}>
|
|
<svg
|
|
viewBox="0 0 36 32"
|
|
width="74%" height="74%"
|
|
fill="currentColor"
|
|
stroke="currentColor"
|
|
strokeWidth="1.2"
|
|
strokeLinejoin="round"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M4 5 L10 5 L12 18 L14 5 L20 5 L12 27 Z" />
|
|
<rect
|
|
x="22.5" y="23" width="9.5" height="3.8" rx="0.7"
|
|
className={blink ? "logo-caret" : ""}
|
|
/>
|
|
</svg>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function Logo({ size = 26 }) {
|
|
return (
|
|
<span className="logo">
|
|
<LogoMark size={size} />
|
|
<span>vibn</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function Arrow({ size = 14 }) {
|
|
return (
|
|
<svg className="arrow" width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
|
<path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function Eyebrow({ children }) {
|
|
return <div className="eyebrow">{children}</div>;
|
|
}
|
|
|
|
// Soft radial glow blob for ambient backgrounds. Place absolutely positioned.
|
|
function Glow({ color = "var(--accent-glow)", size = 700, opacity = 1, style = {} }) {
|
|
return (
|
|
<div
|
|
aria-hidden="true"
|
|
style={{
|
|
position: "absolute",
|
|
width: size,
|
|
height: size,
|
|
background: `radial-gradient(circle at center, ${color} 0%, transparent 62%)`,
|
|
filter: "blur(20px)",
|
|
opacity,
|
|
pointerEvents: "none",
|
|
...style,
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function TrustStrip({ items }) {
|
|
return (
|
|
<div
|
|
className="mono"
|
|
style={{
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
gap: "8px 18px",
|
|
fontSize: 12,
|
|
color: "var(--fg-mute)",
|
|
letterSpacing: "0.04em",
|
|
}}
|
|
>
|
|
{items.map((item, i) => (
|
|
<React.Fragment key={i}>
|
|
{i > 0 && <span style={{ color: "var(--fg-faint)" }}>·</span>}
|
|
<span>{item}</span>
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// A subtle gradient hairline used inside cards & frames.
|
|
function Hairline({ vertical = false, style = {} }) {
|
|
return (
|
|
<div
|
|
aria-hidden="true"
|
|
style={{
|
|
background: vertical
|
|
? "linear-gradient(180deg, transparent, var(--hairline) 30%, var(--hairline) 70%, transparent)"
|
|
: "linear-gradient(90deg, transparent, var(--hairline) 30%, var(--hairline) 70%, transparent)",
|
|
height: vertical ? "100%" : 1,
|
|
width: vertical ? 1 : "100%",
|
|
...style,
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
Object.assign(window, { Logo, LogoMark, Arrow, Eyebrow, Glow, TrustStrip, Hairline });
|