`public/hero.svg`

47 lines
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1000" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Brutalist barbershop">
  <defs>
    <linearGradient id="conc" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#3a3a38"/>
      <stop offset="1" stop-color="#15140f"/>
    </linearGradient>
    <pattern id="dots" width="22" height="22" patternUnits="userSpaceOnUse">
      <circle cx="3" cy="3" r="2.4" fill="#f5f500" fill-opacity="0.16"/>
    </pattern>
    <!-- barber pole: red / paper / ink diagonal stripes -->
    <pattern id="pole" width="120" height="120" patternUnits="userSpaceOnUse" patternTransform="rotate(35)">
      <rect width="120" height="40" y="0" fill="#ff2e1f"/>
      <rect width="120" height="40" y="40" fill="#f3f1ea"/>
      <rect width="120" height="40" y="80" fill="#0a0a0a"/>
    </pattern>
    <filter id="grain"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/>
      <feColorMatrix type="saturate" values="0"/><feComponentTransfer><feFuncA type="linear" slope="0.06"/></feComponentTransfer>
      <feComposite operator="over" in2="SourceGraphic"/></filter>
  </defs>

  <rect width="1600" height="1000" fill="url(#conc)"/>
  <rect width="1600" height="1000" fill="url(#dots)"/>

  <!-- structural slabs -->
  <g stroke="#0a0a0a" stroke-width="6">
    <rect x="120" y="140" width="430" height="720" fill="#4a4945"/>
    <rect x="120" y="140" width="430" height="120" fill="#f5f500"/>
    <rect x="600" y="320" width="300" height="540" fill="#2b2a26"/>
    <rect x="1180" y="80" width="290" height="840" fill="#56544e"/>
  </g>

  <!-- the barber pole -->
  <g stroke="#0a0a0a" stroke-width="8">
    <rect x="980" y="120" width="120" height="760" fill="url(#pole)"/>
    <rect x="965" y="80" width="150" height="50" fill="#c9c6bd"/>   <!-- cap -->
    <rect x="965" y="870" width="150" height="50" fill="#c9c6bd"/>  <!-- base -->
  </g>

  <!-- girders -->
  <g stroke="#0a0a0a" stroke-width="10" stroke-linecap="square">
    <line x1="0" y1="900" x2="1600" y2="900"/>
    <line x1="335" y1="140" x2="335" y2="860"/>
  </g>

  <rect width="1600" height="1000" filter="url(#grain)" opacity="0.5"/>
</svg>