Add snake staff illustration (#125)

* Add snake staff illustration component.

Use vector-only SVG (no embedded raster) so lanyard and badge align
with strokes. Register snakeStaff and add Storybook story.

* Update snake staff illustration from Figma export.

Drop the redundant serpente-staff.svg source file; the React component is the single source of truth.

* Update snake staff badge and label paths from Figma.

Use the orange staff badge and revised vector outlines for STAFF and PyCon Italia.

* Update snake staff lanyard layering from Figma export.

Redraw strap behind bodies with a separate front mask and revised path geometry.

* Update snake staff badge and lanyard from Figma export.

Author: estyxx

src/illustrations/illustration.stories.tsx

@@ -16,6 +16,7 @@ import { SnakeInDragonInverted } from "./snake-in-dragon-inverted";
 import { SnakeLetter } from "./snake-letter";
 import { SnakeLongNeck } from "./snake-long-neck";
 import { SnakePencil } from "./snake-pencil";
+import { SnakeStaff } from "./snake-staff";
 import { SnakeTail } from "./snake-tail";
 import { SnakeWithBalloon } from "./snake-with-balloon";
 import { SnakeWithContacts } from "./snake-with-contacts";
@@ -90,6 +91,9 @@ SnakeLongNeckStory.args = { component: SnakeLongNeck };
 export const SnakePencilStory = Template.bind({});
 SnakePencilStory.args = { component: SnakePencil };
 
+export const SnakeStaffStory = Template.bind({});
+SnakeStaffStory.args = { component: SnakeStaff };
+
 export const SnakeTailStory = Template.bind({});
 SnakeTailStory.args = { component: SnakeTail };
 

src/illustrations/illustrations.ts

@@ -15,6 +15,7 @@ import { SnakeInDragonInverted } from "./snake-in-dragon-inverted";
 import { SnakeLetter } from "./snake-letter";
 import { SnakeLongNeck } from "./snake-long-neck";
 import { SnakePencil } from "./snake-pencil";
+import { SnakeStaff } from "./snake-staff";
 import { SnakeTail } from "./snake-tail";
 import { SnakeTailUp } from "./snake-tail-up";
 import { SnakeWithBalloon } from "./snake-with-balloon";
@@ -64,6 +65,8 @@ export const getIllustration = (name: Illustration | undefined) => {
       return SnakeLongNeck;
     case "snakePencil":
       return SnakePencil;
+    case "snakeStaff":
+      return SnakeStaff;
     case "snakeTail":
       return SnakeTail;
     case "snakeWithBalloon":

src/illustrations/index.ts

@@ -15,6 +15,7 @@ export { SnakeInDragonInverted } from "./snake-in-dragon-inverted";
 export { SnakeLetter } from "./snake-letter";
 export { SnakeLongNeck } from "./snake-long-neck";
 export { SnakePencil } from "./snake-pencil";
+export { SnakeStaff } from "./snake-staff";
 export { SnakeTail } from "./snake-tail";
 export { SnakeWithBalloon } from "./snake-with-balloon";
 export { SnakeWithContacts } from "./snake-with-contacts";