feat: build juozas auto site

docs/superpowers/plans/2026-05-02-juozas-auto.md

@@ -0,0 +1,21 @@
+# Juozas Auto Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Build a production-ready Astro and Tailwind static website for Juozas Auto.
+
+**Architecture:** Use Astro content collections for cars, small server-rendered components for layout and SEO, and one lightweight client gallery script. Keep configuration, Lithuanian strings, formatting utilities, and schema helpers separate so listing pages stay simple.
+
+**Tech Stack:** Astro 4, TypeScript, Tailwind CSS, Astro Image, content collections, Vitest, static Vercel output.
+
+---
+
+## Tasks
+
+- [ ] Scaffold Astro, Tailwind, sitemap, TypeScript, Vitest, and base config.
+- [ ] Add formatting, slug, excerpt, contact, and JSON-LD utilities with tests.
+- [ ] Add car content schema and three example listings with local photos.
+- [ ] Build shared layout, header, footer, SEO, Meta Pixel, JSON-LD, and contact components.
+- [ ] Build homepage, listing pages, about, contact, robots, and Meta CAPI stub.
+- [ ] Add styling tokens, responsive layout, gallery behavior, and accessibility polish.
+- [ ] Update README and run full verification: tests, build, and 375px browser inspection.

docs/superpowers/specs/2026-05-02-juozas-auto-design.md

@@ -0,0 +1,64 @@
+# Juozas Auto Design Brief
+
+## Feature Summary
+
+Build the full Juozas Auto static website for a Lithuanian single-seller used-car inventory. Listing pages are the highest-priority surface because each one doubles as a Meta ad landing page and must convert mobile visitors into calls or WhatsApp messages.
+
+## Primary User Action
+
+A buyer should quickly understand the car, see the price, trust the presentation, and contact the seller without friction.
+
+## Design Direction
+
+Color strategy: Restrained burgundy. Use tinted off-white and charcoal neutrals, with deep burgundy reserved for primary contact actions, prices, focus states, and a few editorial details.
+
+Theme scene: A buyer opens a Meta ad on a phone in daylight or near a car, wants quick trust and contact, so the site uses a light theme with high readability and quiet contrast.
+
+Anchor references: boutique automotive retail, restrained fashion ecommerce, and calm Swiss-style inventory presentation. The site must avoid Autoplius, Skelbiu, marketplace density, and generic SaaS hero sections.
+
+Image gate: skipped because this harness has no native image-generation tool.
+
+## Scope
+
+Fidelity: production-ready.
+
+Breadth: full site, including homepage, listing detail pages, about, contact, content collection, SEO metadata, Meta Pixel stub, README, and responsive behavior.
+
+Interactivity: shipped-quality static site with minimal client JavaScript only where it directly supports conversion or gallery use.
+
+Time intent: polish until build verification passes and the 375px experience answers the conversion checklist.
+
+## Layout Strategy
+
+Mobile-first. Listing pages put the photo gallery, title, price, and contact actions at the top so buyers can evaluate and act within seconds. Desktop uses a sticky gallery on the left and a sticky information/contact column on the right. The homepage stays sparse and image-led, with inventory cards only where they help comparison.
+
+## Key States
+
+- Current inventory with 1-10 cars.
+- Sold inventory hidden by default behind a config flag.
+- Empty inventory with a calm contact prompt.
+- Optional specification fields missing.
+- Mobile sticky contact bar after initial scroll.
+- Desktop sticky contact area in the right column.
+- Reduced-motion mode with no spatial animation dependency.
+
+## Interaction Model
+
+Car cards are full-link targets with subtle lift on hover-capable devices and no image zoom. The gallery is swipeable with a counter and minimal controls. Phone and WhatsApp links fire the Meta `Contact` event when a pixel ID is configured. Contact remains reachable without requiring the buyer to hunt through the page.
+
+## Content Requirements
+
+All UI strings are Lithuanian and centralized in `src/i18n/lt.ts`. Copy should be confident, honest, and quiet. Formatting must match Lithuanian expectations: `12 500 €`, `145 000 km`, `140 kW (190 AG)`, and Lithuanian WhatsApp text.
+
+## Recommended References
+
+- `brand.md` for brand-register distinctiveness and anti-slop checks.
+- `spatial-design.md` for mobile-first hierarchy and avoiding unnecessary cards.
+- `typography.md` for fluid display type, readable measure, and tabular figures.
+- `responsive-design.md` for 375px and touch-target behavior.
+- `color-and-contrast.md` for OKLCH burgundy and tinted neutrals.
+- `motion-design.md` for restrained micro-interactions and reduced motion.
+
+## Open Questions
+
+None blocking. Use placeholder seller contact details and form endpoint values that are easy to replace in config.