gw/seasonalthemes.md

# Seasonal Events Banner

The seasonal banner is a full-width strip that sits above the site header across the public site. It is used for time-sensitive announcements tied to holidays or events — booking reminders, holiday hour notices, etc.

## Component

`frontend/src/components/SeasonalBanner.svelte`

Integrated at the layout level in `frontend/src/routes/+layout.svelte`. The banner renders site wide on public routes and is excluded from `/admin`.

---

## Props

| Prop      | Type                | Default             | Description                                   |
|-----------|---------------------|---------------------|-----------------------------------------------|
| `theme`   | `string`            | `'christmas'`       | Controls colours and particle animation        |
| `message` | `string`            | Christmas greeting  | Main bold text shown in the banner             |
| `sub`     | `string`            | —                   | Smaller secondary text (hidden on mobile)      |
| `link`    | `{ label, url }`    | Book now → /contact | Optional CTA button rendered to the right      |
| `visible` | `boolean`           | `true`              | Set `false` to suppress the banner entirely    |

---

## Themes

Switching themes changes the banner background, text colours, button colours, and the particle animation. To activate a theme, update the `theme` prop in `+layout.svelte` along with a matching `message` and `sub`.

### Christmas — `theme="christmas"`

| Property   | Value                                              |
|------------|----------------------------------------------------|
| Background | Dark green gradient `#1a3a1a → #213021`            |
| Text       | White `#ffffff`                                    |
| Accent     | Yellow `#FFD100`                                   |
| Animation  | ❄ Snowflakes falling straight down with slow rotation |

Particles: 18 snowflakes at varied horizontal positions, sizes (8–14 px), and durations (3–4.5 s).

**Example usage:**
```svelte
<SeasonalBanner
  theme="christmas"
  message="🎄 Merry Christmas from the Tiny Gang! Walks continue over the holidays."
  sub="Book before 20 Dec to secure your spot."
  link={{ label: 'Book now', url: '/contact' }}
/>
```

---

### Easter — `theme="easter"`

| Property   | Value                                               |
|------------|-----------------------------------------------------|
| Background | Purple gradient `#7c3aed → #a855f7`                 |
| Text       | White `#ffffff`                                     |
| Accent     | Soft yellow `#fde68a`                               |
| Animation  | 🌸 Cherry blossom petals drifting down with a gentle lateral sway and rotation |

Particles: 14 petals at varied positions, sizes (8–13 px), and durations (3.5–5.5 s). The `petal-fall` keyframe adds horizontal drift at each quarter-step to mimic a natural tumbling fall.

**Example usage:**
```svelte
<SeasonalBanner
  theme="easter"
  message="🐣 Happy Easter from the Tiny Gang! We're walking all through the long weekend."
  sub="Book your spot before it fills up."
  link={{ label: 'Book now', url: '/contact' }}
/>
```

**Active window:** Good Friday through Easter Monday (exact dates vary — check annually).

---

### Halloween — `theme="halloween"`

| Property   | Value                                               |
|------------|-----------------------------------------------------|
| Background | Near-black gradient `#1c1917 → #292524`             |
| Text       | Orange `#f97316`                                    |
| Accent     | Orange `#f97316`                                    |
| Animation  | 🦇 Bats flying right-to-left across the banner with a sinusoidal vertical wobble |

Particles: 8 bats staggered across vertical positions (10–80% height), sizes (11–18 px), delays (0–7 s) and durations (6–10.5 s). The `bat-fly` keyframe starts off the right edge (`left: 108%`) and translates to `-115vw`, with Y offsets at 30 %, 60 %, and 85 % of the animation to create the swooping motion.

**Example usage:**
```svelte
<SeasonalBanner
  visible={true}
  theme="halloween"
  message="🎃 Boo! The Tiny Gang is still walking this Halloween weekend."
  sub="Spooky walks, same great dogs."
  link={{ label: 'Book now', url: '/contact' }}
/>
```

**Active window:** ~October 28 – November 1.

---

### New Year's Eve / New Year's Day — `theme="newYear"`

| Property   | Value                                                   |
|------------|---------------------------------------------------------|
| Background | Deep navy gradient `#0a0a1a → #1a102e`                  |
| Text       | Gold `#FFD700`                                          |
| Accent     | Gold `#FFD700`                                          |
| Animation  | ✨ Sparkles and confetti (✨ 🎊 ⭐ 💫) falling and rotating with a scale pulse |

Particles: 20 sparkles cycling through four emoji types, varied positions, sizes (10–14 px), and durations (2.5–4.5 s). The `sparkle-fall` keyframe scales up at 40 % for a "pop" effect before fading out.

**Example usage:**
```svelte
<SeasonalBanner
  theme="newYear"
  message="🥂 Happy New Year from the Tiny Gang! Walks resume 2 Jan."
  sub="Book ahead for the first week — spots go fast."
  link={{ label: 'Book now', url: '/contact' }}
/>
```

**Active window:** December 31 – January 1 (and optionally through January 2 if there is a holiday schedule notice).

---

### Summer — `theme="summer"`

| Property   | Value                                |
|------------|--------------------------------------|
| Background | Blue gradient `#0ea5e9 → #06b6d4`   |
| Text       | White `#ffffff`                      |
| Accent     | Pale yellow `#fef08a`               |
| Animation  | None                                 |

General-purpose warm-weather banner. No particle effect. Good for school holiday or summer schedule notices.

---

### Custom — `theme="custom"`

Falls back to dark green with yellow accents (same palette as Christmas but without snow). Use this as a neutral base for one-off announcements that don't fit a seasonal theme.

---

## Behaviour

**Dismissal** — The ✕ button sets a local `dismissed` boolean. The banner hides for the remainder of the session but reappears on next page load (no localStorage persistence).

**Mobile** — Below 600 px the `sub` text is hidden and the main message font drops to 0.82 rem. The CTA button and dismiss button remain visible.

**z-index** — The banner sits at `z-index: 200`, above the header (`z-index: 20`).

**Analytics** — CTA button clicks fire a `banner_click` signal event via `signalClick` (see `frontend/src/lib/signals.js`). Metadata includes the button label and destination URL.

---

## How to switch themes

Edit `frontend/src/routes/+layout.svelte` and update the three props on `<SeasonalBanner>`:

```svelte
<SeasonalBanner
  visible={true}
  theme="halloween"
  message="🎃 Boo! The Tiny Gang is still walking this Halloween weekend."
  sub="Spooky walks, same great dogs."
  link={{ label: 'Book now', url: '/contact' }}
/>
```

To disable the banner entirely, set `visible={false}` or remove the component from the layout. To limit it to specific routes again, pass a route-based condition from `+layout.svelte`.

---

## Adding a new theme

1. Add an entry to the `THEMES` object in `SeasonalBanner.svelte`:
   ```js
   myTheme: {
     bg:        'linear-gradient(90deg, #colour1, #colour2)',
     accent:    '#hex',
     text:      '#hex',
     sub:       'rgba(r,g,b,0.75)',
     btn:       '#hex',
     btnText:   '#hex',
     particles: false, // or 'snow' | 'bats' | 'petals' | 'confetti'
   },
   ```
2. If you need a custom particle effect, add a particle array and a matching `{:else if t.particles === 'myEffect'}` block in the template, plus a `@keyframes` rule in the `<style>` block.
3. Update `+layout.svelte` to use the new theme key.