← back to Stayclaim

src/components/GucciStripe.tsx

22 lines

/**
 * GucciStripe — the green/red/green ribbon that's the only shared visual
 * element across all three surfaces (per PLAN.md).
 *
 * 4px high. Three equal bands. Sits under the global header on every page.
 * Don't repeat. Don't background. It's a heritage-luxury cue, not a pattern.
 */
export function GucciStripe() {
  return (
    <div
      role="presentation"
      aria-hidden="true"
      className="w-full flex"
      style={{ height: '4px' }}
    >
      <div className="flex-1" style={{ background: '#1f4d40' }} />
      <div className="flex-1" style={{ background: '#c9292e' }} />
      <div className="flex-1" style={{ background: '#1f4d40' }} />
    </div>
  );
}