Add food truck catering social example

ATTRIBUTION.md

@@ -1,5 +1,15 @@
 # Attribution
 
+## Food Truck Catering Social Posts
+
+The Food Truck Catering example set uses source-neutral Unsplash photos passed through template modification JSON files:
+
+- `examples/use-cases/assets/food-truck-catering-truck-unsplash.jpg` - Photo by Zhivko Dimitrov on Unsplash: https://unsplash.com/photos/oI9pFRh5mXM
+- `examples/use-cases/assets/food-truck-catering-street-unsplash.jpg` - Photo by Jon Tyson on Unsplash: https://unsplash.com/photos/EhxhCueTZAk
+- `examples/use-cases/assets/food-truck-catering-event-unsplash.jpg` - Photo by Sebastian Schuster on Unsplash: https://unsplash.com/photos/HUyOmTCIQTc
+
+Unsplash License: https://unsplash.com/license
+
 ## Weave Home Retail Social Posts
 
 The Weave Home example set uses source-neutral Unsplash photos passed through template modification JSON files:

README.md

@@ -723,6 +723,100 @@ live in [docs/examples.md](./docs/examples.md):
 - local templates, image layers, custom fonts, debug bundles, config recipes, and multi-size sets;
 - extra preset variations that demonstrate alternate option combinations.
 
+### Render Food Truck Catering Social Posts
+
+Use a reusable mixed photo-and-graphic template for a fictional food truck monetization campaign:
+route preorders, office catering inquiries, and private event deposits. Source-neutral Unsplash
+photos are passed through JSON image layers, while the route cards, offer badges, borders, and
+pattern work are intentional CSS geometry.
+
+#### Route Preorder Post
+
+CLI:
+
+```bash
+npm run dev -- template examples/use-cases/food-truck-catering.html \
+  --css examples/use-cases/food-truck-catering.css \
+  --modify-file examples/use-cases/food-truck-catering-schedule.json \
+  --out examples/use-cases/food-truck-catering-schedule.png \
+  --width 1080 \
+  --height 1080
+```
+
+Library:
+
+```ts
+await renderTemplate({
+  htmlPath: "examples/use-cases/food-truck-catering.html",
+  cssPath: "examples/use-cases/food-truck-catering.css",
+  modifications: JSON.parse(await readFile("examples/use-cases/food-truck-catering-schedule.json", "utf8")),
+  viewport: { width: 1080, height: 1080 },
+  output: { path: "examples/use-cases/food-truck-catering-schedule.png" },
+});
+```
+
+Result:
+
+![Food truck route preorder social post result](./examples/use-cases/food-truck-catering-schedule.png)
+
+#### Office Catering Inquiry Post
+
+CLI:
+
+```bash
+npm run dev -- template examples/use-cases/food-truck-catering.html \
+  --css examples/use-cases/food-truck-catering.css \
+  --modify-file examples/use-cases/food-truck-catering-catering.json \
+  --out examples/use-cases/food-truck-catering-catering.png \
+  --width 1080 \
+  --height 1080
+```
+
+Library:
+
+```ts
+await renderTemplate({
+  htmlPath: "examples/use-cases/food-truck-catering.html",
+  cssPath: "examples/use-cases/food-truck-catering.css",
+  modifications: JSON.parse(await readFile("examples/use-cases/food-truck-catering-catering.json", "utf8")),
+  viewport: { width: 1080, height: 1080 },
+  output: { path: "examples/use-cases/food-truck-catering-catering.png" },
+});
+```
+
+Result:
+
+![Food truck office catering inquiry social post result](./examples/use-cases/food-truck-catering-catering.png)
+
+#### Private Event Booking Post
+
+CLI:
+
+```bash
+npm run dev -- template examples/use-cases/food-truck-catering.html \
+  --css examples/use-cases/food-truck-catering.css \
+  --modify-file examples/use-cases/food-truck-catering-booking.json \
+  --out examples/use-cases/food-truck-catering-booking.png \
+  --width 1080 \
+  --height 1080
+```
+
+Library:
+
+```ts
+await renderTemplate({
+  htmlPath: "examples/use-cases/food-truck-catering.html",
+  cssPath: "examples/use-cases/food-truck-catering.css",
+  modifications: JSON.parse(await readFile("examples/use-cases/food-truck-catering-booking.json", "utf8")),
+  viewport: { width: 1080, height: 1080 },
+  output: { path: "examples/use-cases/food-truck-catering-booking.png" },
+});
+```
+
+Result:
+
+![Food truck private event booking social post result](./examples/use-cases/food-truck-catering-booking.png)
+
 ## Package Release
 
 The npm package is prepared as `@maurogoncalo/clickclick` with MIT licensing, public npm access,

examples/use-cases/food-truck-catering-booking.json

@@ -0,0 +1,16 @@
+[
+  { "name": "post", "className": "post post-booking" },
+  { "name": "brand", "text": "Copper Cart" },
+  { "name": "tagline", "text": "Private events and festivals" },
+  { "name": "eyebrow", "text": "Bookings open" },
+  { "name": "title", "html": "Bring the<br>truck in" },
+  { "name": "subtitle", "text": "A photo-led booking card for venues turning weekend foot traffic into paid event deposits." },
+  { "name": "hero_image", "src": "./assets/food-truck-catering-event-unsplash.jpg", "fit": "cover", "anchor": "50% 52%" },
+  { "name": "route_label", "text": "Best for" },
+  { "name": "route_one", "text": "Courtyard parties" },
+  { "name": "route_two", "text": "Brewery nights" },
+  { "name": "route_three", "text": "Local festivals" },
+  { "name": "offer_label", "text": "Hold" },
+  { "name": "offer_value", "text": "$250 deposit" },
+  { "name": "cta", "text": "Book a service window at coppercart.example/events" }
+]

examples/use-cases/food-truck-catering-catering.json

@@ -0,0 +1,16 @@
+[
+  { "name": "post", "className": "post post-catering" },
+  { "name": "brand", "text": "Copper Cart" },
+  { "name": "tagline", "text": "Office lunches, packed hot" },
+  { "name": "eyebrow", "text": "Catering" },
+  { "name": "title", "html": "Feed the<br>whole team" },
+  { "name": "subtitle", "text": "Boxed lunches and pop-up bars built for weekday office events." },
+  { "name": "hero_image", "src": "./assets/food-truck-catering-street-unsplash.jpg", "fit": "cover", "anchor": "47% 45%" },
+  { "name": "route_label", "text": "Packages" },
+  { "name": "route_one", "text": "25 person lunch drop" },
+  { "name": "route_two", "text": "Market table buffet" },
+  { "name": "route_three", "text": "Late-night snack bar" },
+  { "name": "offer_label", "text": "Starts" },
+  { "name": "offer_value", "text": "$18 per guest" },
+  { "name": "cta", "text": "Request dates at coppercart.example/catering" }
+]

examples/use-cases/food-truck-catering-schedule.json

@@ -0,0 +1,16 @@
+[
+  { "name": "post", "className": "post post-schedule" },
+  { "name": "brand", "text": "Copper Cart" },
+  { "name": "tagline", "text": "Mobile kitchen and catering" },
+  { "name": "eyebrow", "text": "This week" },
+  { "name": "title", "html": "Lunch route<br>drop" },
+  { "name": "subtitle", "text": "Three stops, one brisket taco special, preorders open now." },
+  { "name": "hero_image", "src": "./assets/food-truck-catering-truck-unsplash.jpg", "fit": "cover", "anchor": "50% 54%" },
+  { "name": "route_label", "text": "Route" },
+  { "name": "route_one", "text": "Mon - Foundry Yard" },
+  { "name": "route_two", "text": "Wed - Arcade Park" },
+  { "name": "route_three", "text": "Fri - Harbor Lawn" },
+  { "name": "offer_label", "text": "Preorder" },
+  { "name": "offer_value", "text": "$12 lunch box" },
+  { "name": "cta", "text": "Order by 10am at coppercart.example" }
+]