feat: build juozas auto site

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.